fix: bug

wupengfei

15 小时以前 cf3a9a81f4f26cc9cc13829fe6fb507dc41e2b2c

 src/views/EnterpriseManage/components/ConfigureDialog.vue

@@ -1,125 +1,28 @@
<template>
  <ProDialog title="配置" v-model="visible" @close="onDialogClose" destroy-on-close draggable>
    <ProForm :model="form" ref="dialogForm" label-width="100px">
      <ProFormItemV2 label="" prop="enterpriseConfigureType" label-width="0">
        <ProFormRadio
          v-model="form.enterpriseConfigureType"
          :value-enum="EnterpriseConfigureTypeText"
          buttonStyle
        />
      </ProFormItemV2>
      <!-- <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.Bank">
        <ProFormItemV2 label="开户总行:" prop="openBank">
          <ProFormText
            v-model.trim="form.openBank"
            placeholder="请输入开户总行"
            :maxlength="40"
          />
        </ProFormItemV2>
        <ProFormItemV2 label="开户支行:" prop="openBranchBank">
          <ProFormText
            v-model.trim="form.openBranchBank"
            placeholder="请输入开户支行"
            :maxlength="40"
          />
        </ProFormItemV2>
        <ProFormItemV2
          label="银行账户:"
          prop="bankAccount"
          :check-rules="[
            { message: '请输入银行账户' },
            { message: '银行账户仅支持数字', pattern: BoleRegExp.RegNumber },
          ]"
        >
          <ProFormText v-model.trim="form.bankAccount" placeholder="请输入银行账户" />
        </ProFormItemV2>
        <ProFormItemV2 label="银行账户:" prop="verifyStatus">
          {{ VerifyStatusText[form.verifyStatus] }}
          <el-button style="margin-left: 40px" type="primary" link @click="handleCheckBankAccount"
            >校验</el-button
          >
        </ProFormItemV2>
      </template> -->
      <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.Electronic">
        <div class="configure-dialog-form-title">通道配置</div>
        <ProFormItemV2
          label="名称:"
          prop="realAccess"
          :checkRules="[{ message: '请选择电子签通道' }]"
        >
          <ProFormSelect
            v-model="form.realAccess"
            :valueEnum="EnumRealAccessText"
            placeholder="请选择电子签通道"
          >
          </ProFormSelect>
        </ProFormItemV2>
        <div class="configure-dialog-form-title">费用配置</div>
        <ProFormItemV2
          label="计费方式:"
          prop="chargeType"
          :checkRules="[{ message: '请选择计费方式' }]"
        >
          <ProFormRadio
            :button-style="false"
            v-model="form.chargeType"
            :value-enum="ChargeTypeEnumText"
          />
        </ProFormItemV2>
        <template v-if="form.chargeType === ChargeTypeEnum.Group">
          <ProFormItemV2 label="实名费用:" prop="realVerifyCost">
            <ProFormInputNumber
              :controls="false"
              v-model="form.realVerifyCost"
              placeholder="请输入"
              unit="元/条"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="签约费用:" prop="signCost">
            <ProFormInputNumber
              :controls="false"
              v-model="form.signCost"
              placeholder="请输入"
              unit="元/份"
            />
          </ProFormItemV2>
        </template>
        <template v-if="form.chargeType === ChargeTypeEnum.Merge">
          <ProFormItemV2 label="统一电子签:" prop="mergeSignCost">
            <ProFormInputNumber
              :controls="false"
              v-model="form.mergeSignCost"
              placeholder="请输入"
              unit="元/份"
            />
          </ProFormItemV2>
        </template>
      </template>
      <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage">
        <div class="configure-dialog-form-title">通道配置</div>
        <!-- <ProFormItemV2
          label="名称:"
          prop="messageChannel"
          :checkRules="[{ message: '请选择短信通道' }]"
        >
          <ProFormSelect
            v-model="form.messageChannel"
            :valueEnum="EnumSmsAccessText"
            placeholder="请选择短信通道"
          >
          </ProFormSelect>
        </ProFormItemV2> -->
        <div class="configure-dialog-form-title">费用配置</div>
        <ProFormItemV2 label="短信费用:" prop="smsCost">
          <ProFormInputNumber
            :controls="false"
            v-model="form.smsCost"
            placeholder="请输入"
            unit="元/条"
          />
        </ProFormItemV2>
      </template>
    </ProForm>
    <FieldRadio
      v-model="form.enterpriseConfigureType"
      :value-enum="EnterpriseConfigureTypeText"
      buttonStyle
      style="margin-bottom: 22px"
    />
    <el-tabs v-model="form.enterpriseConfigureType" class="configure-dialog-tabs">
      <el-tab-pane lazy :name="EnterpriseConfigureType.Bank">
        <BankConfigureView :id="form.id" ref="bankConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.AliPay">
        <AliPayConfigureView :id="form.id" ref="aliPayConfigureViewRef" />
      </el-tab-pane>
      <!-- <el-tab-pane lazy :name="EnterpriseConfigureType.Wechat">
        <WechatConfigureView :id="form.id" ref="wechatConfigureViewRef" />
      </el-tab-pane> -->
      <el-tab-pane lazy :name="EnterpriseConfigureType.Electronic">
        <ElectronicConfigureView :id="form.id" ref="electronicConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.ShortMessage">
        <ShortMessageConfigureView :id="form.id" ref="shortMessageConfigureViewRef" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('onCancel')">取 消</el-button>
@@ -130,28 +33,13 @@
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus';
import {
  ProDialog,
  ProForm,
  ProFormItemV2,
  ProFormText,
  ProFormRadio,
  ProFormInputNumber,
  ProFormSelect,
} from '@bole-core/components';
import { BoleRegExp } from '@bole-core/core';
import {
  EnterpriseConfigureType,
  EnterpriseConfigureTypeText,
  ChargeTypeEnum,
  ChargeTypeEnumText,
  EnumRealAccessText,
  VerifyStatusText,
  VerifyStatus,
  EnumSmsAccessText,
  EnumRealAccess,
} from '@/constants';
import { ProDialog, FieldRadio } from '@bole-core/components';
import { EnterpriseConfigureType, EnterpriseConfigureTypeText } from '@/constants';
import BankConfigureView from './BankConfigureView.vue';
import AliPayConfigureView from './AliPayConfigureView.vue';
import ElectronicConfigureView from './ElectronicConfigureView.vue';
import ShortMessageConfigureView from './ShortMessageConfigureView.vue';
import WechatConfigureView from './WechatConfigureView.vue';

defineOptions({
  name: 'ConfigureDialog',
@@ -159,17 +47,7 @@

type Form = {
  enterpriseConfigureType: EnterpriseConfigureType;
  // openBank: string;
  // openBranchBank: string;
  // bankAccount: string;
  // verifyStatus: VerifyStatus;
  chargeType: ChargeTypeEnum;
  realAccess: EnumRealAccess;
  realVerifyCost: number;
  signCost: number;
  mergeSignCost: number;
  smsAccess: EnumSmsAccess;
  smsCost: number;
  id: string;
};

const form = defineModel<Form>('form');
@@ -180,33 +58,51 @@
  (e: 'onCancel'): void;
}>();

const dialogForm = ref<FormInstance>();
const bankConfigureViewRef =
  useTemplateRef<InstanceType<typeof BankConfigureView>>('bankConfigureViewRef');
const aliPayConfigureViewRef =
  useTemplateRef<InstanceType<typeof AliPayConfigureView>>('aliPayConfigureViewRef');
const electronicConfigureViewRef = useTemplateRef<InstanceType<typeof ElectronicConfigureView>>(
  'electronicConfigureViewRef'
);
const shortMessageConfigureViewRef = useTemplateRef<InstanceType<typeof ShortMessageConfigureView>>(
  'shortMessageConfigureViewRef'
);

function handleCheckBankAccount() {}
const wechatConfigureViewRef =
  useTemplateRef<InstanceType<typeof WechatConfigureView>>('wechatConfigureViewRef');

function onDialogClose() {
  if (!dialogForm.value) return;
  dialogForm.value.resetFields();
  // if (!dialogForm.value) return;
  // dialogForm.value.resetFields();
}

function handleConfirm() {
  if (!dialogForm.value) return;
  dialogForm.value.validate((valid) => {
    if (valid) {
      emit('onConfirm');
    } else {
      return;
    }
  });
async function handleConfirm() {
  let res: any;
  if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Bank) {
    res = await bankConfigureViewRef.value?.onConfirm();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.AliPay) {
    res = await aliPayConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Electronic) {
    res = await electronicConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage) {
    res = await shortMessageConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Wechat) {
    res = await wechatConfigureViewRef.value?.onConfirm?.();
  }
  if (res) {
    emit('onConfirm');
  }
}
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;

.configure-dialog-form-title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 36px;
.configure-dialog-tabs {
  :deep() {
    .el-tabs__header {
      display: none;
    }
  }
}
</style>