gameapi-client/src/views/merchant/businessInformation/components/RenewDialog.vue

<template>
    <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="t('修改')" align-center v-model="showDialog" width="880px" append-to-body @opened="forceUpdateTable">
        <el-scrollbar max-height="600px">
            <el-form ref="agentRef" :model="formAll" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="t('商户账号')" prop="account">
                            <el-input v-model="formAll.account" disabled :placeholder="t('请输入商户账号')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="t('密码')" prop="password">
                            <el-input v-model="formAll.password" disabled auto-complete="off" type="password"
                                :placeholder="t('请输入密码')" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="t('商户模式')" prop="tenantType">
                            <el-radio-group v-model="formAll.tenantType" style="pointer-events: none;">
                                <el-radio-button v-for="item in ff_tenant_type" :key="item.value" :value="item.value">{{
                                    item.label }}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"> 
                        <el-form-item :label="t('谷歌验证')" prop="curType">
                                <el-switch
                                    v-model="formAll.googleCodeSwitch"
                                    inline-prompt
                                     :active-value="1" 
                                     :inactive-value="0"
                                    active-text="启用"
                                    inactive-text="禁用"
                                />
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item :label="t('买分比例')" prop="scoreRatio">
                    <el-input-number v-model="formAll.scoreRatio" :precision="1" :min="0.9" :step="0.1"
                        :max="2"></el-input-number>
                    &nbsp;
                    {{ t(' (万法定货币=1万通用额度)') }}
                </el-form-item>
                <!-- <el-form-item :label="t('谷歌验证码')" prop="googleCode">
                    <el-input v-model="formAll.googleCode" style="width: 260px;" :placeholder="t('请输入谷歌验证码')" />
                </el-form-item> -->
                <el-form-item :label="t('币种模式')" prop="curType">
                        <el-radio-group v-model="formAll.curType">
                            <el-radio-button value="1" @click="changeCurrency('VND')">{{ t('单币种') }}</el-radio-button>
                            <el-radio-button value="2"  @click="changeCurrency('')">{{ t('多币种') }}</el-radio-button>
                        </el-radio-group>
                </el-form-item>
                <el-form-item v-if="formAll.curType == 1">
                    <CustomSelect  v-model="formAll.currencyCode" @change="changeCurrency" :options="currencySelectArr" placeholder="请选择币种"/>
                </el-form-item>
                <div class="label-scoreRatio">
                    <span>{{ t('平台比例') }}</span>
                    <div>
                        <el-button type="danger" @click="queryCode('del')"
                            :disabled="!formAll.tenantSystemPlatforms.length">-0.5</el-button>
                        <el-button type="primary" @click="queryCode('add')"
                            :disabled="!formAll.tenantSystemPlatforms.length">+0.5</el-button>
                    </div>
                </div>
                <el-table :data="formAll.tenantSystemPlatforms" ref="myTable" class="scoreRatioTable" >
                    <!-- <el-table-column :label="t('id')" align="center"  >
                        <template #default="{row,$index}"> 
                            {{$index}}
                        </template>
                    </el-table-column> -->
                    <el-table-column :label="t('平台')" align="center" prop="platformCode" />
                    <el-table-column :label="t('币种')" align="center" prop="currencyCode" />
                    <el-table-column :label="t('成本比例（%）')" align="center" min-width="120" prop="cost">
                        <template #default="scope">
                            {{ scope.row.cost }}%
                        </template>
                    </el-table-column>
                    <el-table-column :label="t('商户通用比例（%）')" align="center" prop="useCost" min-width="130">
                        <template #default="scope">
                            <div style="display: flex;align-items: center;">
                                <el-input v-model="scope.row.useCost" @input="handleInput(scope.row)"
                                @blur="handleBlur(scope.row)" :placeholder="t('请输入')" />&nbsp;%
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="maxAmount" label="带入金额" min-width="180">
                        <template #default="scope">
                            <div  style="display:flex;align-items: center;"><NumberInput v-model="scope.row.minAmount"></NumberInput> ~  <NumberInput v-model="scope.row.maxAmount"></NumberInput></div>                
                    </template>
                    </el-table-column>
                </el-table>
                <!-- <pagination v-show="totalPlatform > 0" :total="totalPlatform" v-model:page="platformSystem.pageNum"
                    v-model:limit="platformSystem.pageSize" @pagination="getSelectPlatform" /> -->
            </el-form>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm" :loading="loadingButton" v-hasPermi="['super:tenant:edit']">{{ t('确 定') }}</el-button>
                <el-button @click="closeDialog">{{ t('取 消') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { updateSuperTenantEdit } from "@/api/super/tenant.js";
import { superPlatformSystem } from "@/api/agent";
import { getLocalStorage } from "@/utils/auth";
import { nextTick, ref } from "vue";
import CustomSelect from '@/components/CustomSelect'
import NumberInput from '@/components/NumberInput'
const { proxy } = getCurrentInstance()
const { ff_tenant_type, ff_tenant_status } = proxy.useDict("ff_tenant_type", "ff_tenant_status");
const emits = defineEmits(['submit', 'update:show']) // 自定义事件
const props = defineProps({ // 父组件向子组件传值
    show: {
        type: Boolean,
        default: false
    },
    modifyDate: {
        type: Object,
        default: {}
    },
    addEditStatus: {
        type: String,
        default: 'add'
    }

})
const disabledIS = ref(props.addEditStatus == 'detail' ? true : false); // 是否禁用
const langDefaultClass = ref(null), langDefaultClassList = ref([]);// 分类名称
const tenantSystemPlatforms = ref([]);
const loadingButton = ref(false);
const oldForm = shallowRef({  });
const realBalance = ref([]);
const myTable = ref()
const loading5 = ref(false)

const forceUpdateTable = async () => {
  // 打开弹窗时先清空
  formAll.tenantSystemPlatforms = []

  // 假设 allData 已经有 1000 条数据
  // 每次塞 10 条进去
  let index = 0
  const batchSize = 20

  const loadBatch = () => {
    if (index < props.modifyDate.tenantSystemPlatforms.length) {
        formAll.tenantSystemPlatforms.push(
        ...props.modifyDate.tenantSystemPlatforms.slice(index, index + batchSize)
    )
    index += batchSize
    // 下一帧再加载，避免阻塞 UI
    requestAnimationFrame(loadBatch)
    }
    oldForm.value = JSON.stringify(formAll);
  }
  loadBatch()
}
const showDialog = computed({// 对话框显示隐藏
    get() {
        return props.show
    },
    set(value) {
        emits('update:show', value)
    }
})
const formAll = reactive({ //  表单验证数据
    account: "",
    password: "",
    scoreRatio: 1,
    tenantType: 1,
    curType:1,
    currencyCode: "VND",
    tenantSystemPlatforms: [],
    realBalance: [],
})
const currencySelectArr = ref([]);
let res = getLocalStorage('currencySelect');
currencySelectArr.value = res.map(item => {
        return { label:`${item.currencyName}(${item.currencyCode})`, value: item.currencyCode }
    })
// 表单验证
const rules = ref({
    account: [{ required: true, message: proxy.t('商户账号不能为空'), trigger: "blur" }],
    scoreRatio: [{ required: true, message: proxy.t('买分比例不能为空'), trigger: "blur" }],
    googleCode: [{ required: true, message: proxy.t('谷歌验证码不能为空'), trigger: "change" }],
    tenantType: [{ required: true, message: proxy.t('商户模式不能为空'), trigger: "change" }],
    realBalanceNum: [{ required: true, message: proxy.t('信誉额度不能为空'), trigger: "change" }],
})

const totalPlatform = ref(0);
/** 获取平台利润 */
function getSelectPlatform() {
    let resData = getLocalStorage('tenantSystemPlatforms');
    tenantSystemPlatforms.value = resData;
}

const loading1 = ref(false);
/** 获取货币 */
function getSuperCommonCurrencySelect() {

    loading1.value = true;
    let res = getLocalStorage('currencySelect');
    let _data = res.map(item => {
        return {
            ...item,
            balance: '',
            currencyCode: item.currencyCode,
        }
    })
    formAll.realBalance = _data;
    realBalance.value = JSON.parse(JSON.stringify(_data));
    nextTick(() => {
        loading1.value = false;
    })
}
function findByConditions(arr, conditions = {}) {
  // 如果 conditions 为空对象，就直接返回全部
  if (conditions.currencyCode == '') {
     // ✅ 用 ref 包装成响应式
     const arr11 = ref([]);
    // 异步小步处理，避免一次性塞太多
    const mergeData = async () => {
        for (let i = 0; i < arr.length; i++) {
            arr11.value.push(...arr[i].list);
            if (i % 1 == 0) { 
                // 每处理20组，给浏览器一点空闲时间
                await new Promise(resolve => setTimeout(resolve, 100));
            }
        }
    };
    mergeData();
    return arr11.value || [];
  }
  const found = arr.find(item => item.currencyCode == conditions.currencyCode);
  return found ? found.list : [];
}

const loading2 = ref(false);

const changeCurrency = (val) => {
    loading2.value = true;
    console.log(tenantSystemPlatforms.value.length);
    formAll.tenantSystemPlatforms = findByConditions(tenantSystemPlatforms.value, { currencyCode: val });
    totalPlatform.value =  formAll.tenantSystemPlatforms.length;
    nextTick(() => {
      loading2.value = false;
    });
 };
//修改时数据更新区域
nextTick(() => {
    getSelectPlatform();
    getSuperCommonCurrencySelect();
})

// DEMO加载完成后
nextTick(() => {
    // 监听自定义语言
    // formAll.tenantSystemPlatforms = props.modifyDate.tenantSystemPlatforms;
    formAll.account = props.modifyDate.account;
    formAll.tenantType = props.modifyDate.tenantType;
    formAll.scoreRatio = props.modifyDate.scoreRatio;
    formAll.curType = props.modifyDate.curType;
    formAll.googleCodeSwitch = props.modifyDate.googleCodeSwitch;
})

// 关闭弹窗
const closeDialog = () => {
    showDialog.value = false
}
const updateValue = (value, row) => {
    console.log(value, "value");
    formAll.realBalance.map(item => {
        item.balance = value;
    })
}
const numbers = ref(0);
function queryCode(type) {
    formAll.tenantSystemPlatforms = formAll.tenantSystemPlatforms.map((item, index) => {
        if (type === 'del' && item.useCost > item.cost) {
            item.useCost = Number(item.useCost);
            item.useCost -= 0.5
        } else if (type === 'add') {
            item.useCost = Number(item.useCost);
            item.useCost += 0.5;
        }
        return item
    })
    if (type === 'del' && numbers.value > 0) {
        numbers.value= Number(numbers.value);
        numbers.value -= 0.5;
    } else if (type === 'add') {
        numbers.value= Number(numbers.value);
        numbers.value += 0.5;
    }
    formAll.proportion = numbers.value;
}
const handleInput = (row) => {
  let input = row.useCost.toString();

  // 清除非法字符（只允许数字和一个小数点）
  input = input.replace(/[^\d.]/g, '');

  // 防止多个小数点
  const parts = input.split('.');
  if (parts.length > 2) {
    input = parts[0] + '.' + parts[1];
  }

  // 限制小数点后最多两位
  if (parts[1]) {
    input = parts[0] + '.' + parts[1].substring(0, 2);
  }

  row.useCost = input;
};
const handleBlur = (row) => {
  const cost = parseFloat(row.cost);
  const useCost = parseFloat(row.useCost);

  if (isNaN(useCost)) {
    row.useCost = '';
    return;
  }

  if (useCost < cost) {
    row.useCost = Number(cost); // 保留两位小数
    // 可选提示
    // this.$message.warning(`不能小于最小成本：${cost}`);
  }
}
const formRef = ref(null);//获取表单验证

// 提交表单
/** 提交按钮 */
function submitForm() {
    proxy.$refs["agentRef"].validate(valid => {
        if (valid) {
            loadingButton.value = true;
            // let arrData = formAll.realBalance.map(item => {
            //     return {
            //         balance: item.balance,
            //         currencyCode: item.currencyCode,
            //     }
            // })
            let dataObj = {
                id: props.modifyDate.id,
                scoreRatio: formAll.scoreRatio,
                curType: formAll.curType,
                googleCodeSwitch: formAll.googleCodeSwitch,
                // tenantType: formAll.tenantType,
                // googleCode:formAll.googleCode,
                tenantPlatforms: formAll.tenantSystemPlatforms,

            }
            if (JSON.stringify(formAll) != oldForm.value) {
                updateSuperTenantEdit(dataObj).then(response => {
                    loadingButton.value = false;
                    proxy.$modal.msgSuccess(proxy.t('更新成功'));
                    closeDialog();
                    emits('submit',response.data);
                }).catch(() => {
                    loadingButton.value = false;
                });
            }else{
                loadingButton.value = false;
                closeDialog();
            }

        }
    });
}
</script>
<style scope lang="scss">
.icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.disable-click {
    pointer-events: none;
}

.label-scoreRatio {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    span {
        width: 120px;
        text-align: right;
        font-weight: 700;
        padding-right: 12px;
    }
}

.scoreRatioTable {
    width: calc(100% - 120px);
    margin-left: 120px;
}
</style>