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

<template>
          <!-- 添加或修改定时任务对话框 -->
          <el-dialog :title="t('添加商户')" align-center v-model="showDialog" width="880px" append-to-body>
            <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" :placeholder="t('请输入商户账号')" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item :label="t('密码')" prop="password">
                                <el-input v-model="formAll.password" 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">
                                <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="timeZone">
                                <CustomSelect v-if="showLoding1" placement="bottom" v-model="formAll.timeZone" :options="sys_job_group" placeholder="请选择时区" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item :label="t('信誉额度')" prop="realBalanceNum">
                                <NumberInput v-model="formAll.realBalanceNum" :min="0" :max="9999999999999999" @input="updateValue" />
                            </el-form-item>
                        </el-col> -->
                    </el-row>
                    <!-- <el-collapse >
                        <el-collapse-item :title="t('信誉额度列表')" name="1">
                    <el-table v-loading="loading1" :data="formAll.realBalance" class="scoreRatioTable">
                        <el-table-column :label="t('国家')" align="center" prop="country" />
                        <el-table-column :label="t('币种')" align="center" prop="currencyCode" />
                        <el-table-column :label="t('游戏额度')" align="center" prop="balance">
                        <template #default="{row}">
                                <NumberInput v-model="row.balance" :min="0" :max="9999999999999999" />
                        </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse> -->
        <!--    
                    <el-form-item :label="t('透支比例')" prop="depositRatio">
                        <el-input-number v-model="formAll.depositRatio" :precision="1" :min="0.9" :step="0.1" :max="2"></el-input-number>
                    </el-form-item> -->
                    <el-row>
                        <el-col :span="12">
                            <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-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="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" loading="loading2" class="scoreRatioTable">

                            <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" min-width="130" prop="useCost">
                            <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">{{ t('确 定') }}</el-button>
                <el-button @click="closeDialog">{{ t('取 消') }}</el-button>
            </div>
        </template>
       </el-dialog>
</template>
<script setup>
import { superTenantList, createTenantCreate,updateSuperTenantResetPwd,getSuperTenant,superTenantQuotaList,updateSuperTenantQuotaUpdate,superCommonTimeZone } from "@/api/super/tenant.js";
import { nextTick, ref } from "vue";
import { getLocalStorage } from "@/utils/auth";
 import NumberInput from '@/components/NumberInput'
 import CustomSelect from '@/components/CustomSelect'
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 loadingButton = ref(false);
const disabledIS = ref(props.addEditStatus == 'detail'? true : false); // 是否禁用
const langDefaultClass = ref(null), langDefaultClassList = ref([]);// 分类名称
const tenantSystemPlatforms = ref([]);
const realBalance = ref([]);
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: '请输入商户账号', trigger: 'change' },
        {
        pattern: /^[A-Za-z0-9_]{4,15}$/,
        message: '账号应为4-15位，仅包含字母、数字和下划线',
        trigger: 'change'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'change' },
        {
          pattern: /^[A-Za-z0-9_]{6,15}$/,
          message: '密码应为6-15位，仅包含字母、数字和下划线',
          trigger: 'change'
        }
      ],
       scoreRatio: [{ required: true, message: proxy.t('买分比例不能为空'), trigger: "change" }],
       tenantType: [{ required: true, message: proxy.t('商户模式不能为空'), trigger: "change" }],
       realBalanceNum: [{ required: true, message: proxy.t('信誉额度不能为空'), trigger: "change" }],
       timeZone: [{ required: true, message: proxy.t('时区不能为空'), trigger: "change" }],
       googleCode: [{ required: true, message: proxy.t('谷歌验证码不能为空'), trigger: "change" }],
   })
 const totalPlatform = ref(0);

 /** 获取平台利润 */
 function getSelectPlatform() {
    let resData = getLocalStorage('tenantSystemPlatforms');
    formAll.tenantSystemPlatforms = resData;
        let itemObj = resData[0];
        numbers.value = Number(itemObj.useCost)- Number(itemObj.cost);
      totalPlatform.value = resData.length;
      tenantSystemPlatforms.value = JSON.parse(JSON.stringify(resData));
      nextTick(() => {
        changeCurrency('VND')
      });
 }
 function findByConditions(arr, conditions = {}) {
  // 如果 conditions 为空对象，就直接返回全部
  if (conditions.currencyCode == '') {
    let arr11 = [];
    arr.map(item => {
        arr11.push(...item.list);
    })
    return arr11||[];
  }
  const found = arr.find(item => item.currencyCode == conditions.currencyCode);
  return found ? found.list : [];
}

const loading2 = ref(false);

const changeCurrency = (val) => {
    loading2.value = true;
    formAll.tenantSystemPlatforms = findByConditions(tenantSystemPlatforms.value, { currencyCode: val });
    totalPlatform.value =  formAll.tenantSystemPlatforms.length;
    nextTick(() => {
      loading2.value = false;
    });
 };
 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;
      })
 }
 const sys_job_group = ref([]);
 const showLoding1 = ref(true);
 const superCommonTimeZones = () =>{
    showLoding1.value = false;
    superCommonTimeZone({}).then(response => {
        sys_job_group.value = response.data.map(item => {
            return {
                value: item.code,
                label: item.name,
            }
        });
        showLoding1.value = true;
    })
 }

 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}`);
  }
}
//修改时数据更新区域
nextTick(() => {
    getSelectPlatform();
    getSuperCommonCurrencySelect();
    superCommonTimeZones();
})

// DEMO加载完成后
nextTick(() => {
    // 监听自定义语言
    watch(() => [langDefaultClass?.value?.getLangContentList()], ([ newContentList], [oldContentList]) => {
        if (newContentList?.length > 0) {
            formAll.name = newContentList[0].content;
        }
    }, {
        deep: true
    })
})

// 关闭弹窗
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 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 = {
            account: formAll.account,
            password: formAll.password,
            scoreRatio: formAll.scoreRatio,
            tenantType: formAll.tenantType,
            curType: formAll.curType,
            googleCodeSwitch: formAll.googleCodeSwitch,
            // proportion: formAll.proportion||numbers.value,
            tenantPlatforms: formAll.tenantSystemPlatforms,
            googleCode:formAll.googleCode,
            timeZone:formAll.timeZone||'',
        }
        createTenantCreate(dataObj).then(response => {
            loadingButton.value = false;
           proxy.$modal.msgSuccess(proxy.t('新增成功'));
           closeDialog();
           emits('submit',response.data);
         }).catch(error => {
            loadingButton.value = false;
        });
       
     }
   });
 }
</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>