zhengyiming
16 小时以前 68e3ef3c7e93de361e04dd2fc5dc261ba436b652
src/views/EnterpriseManage/components/ConfigureDialog.vue
@@ -1,24 +1,24 @@
<template>
  <ProDialog title="配置" v-model="innerVisible" @close="onDialogClose" destroy-on-close draggable>
    <ProForm :model="innerForm" ref="dialogForm" label-width="100px">
  <ProDialog title="配置" v-model="visible" @close="onDialogClose" destroy-on-close draggable>
    <ProForm :model="form" ref="dialogForm" label-width="120px">
      <ProFormItemV2 label="" prop="enterpriseConfigureType" label-width="0">
        <ProFormRadio
          v-model="innerForm.enterpriseConfigureType"
          v-model="form.enterpriseConfigureType"
          :value-enum="EnterpriseConfigureTypeText"
          buttonStyle
        />
      </ProFormItemV2>
      <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.Bank">
      <!-- <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.Bank">
        <ProFormItemV2 label="开户总行:" prop="openBank">
          <ProFormText
            v-model.trim="innerForm.openBank"
            v-model.trim="form.openBank"
            placeholder="请输入开户总行"
            :maxlength="40"
          />
        </ProFormItemV2>
        <ProFormItemV2 label="开户支行:" prop="openBranchBank">
          <ProFormText
            v-model.trim="innerForm.openBranchBank"
            v-model.trim="form.openBranchBank"
            placeholder="请输入开户支行"
            :maxlength="40"
          />
@@ -31,89 +31,131 @@
            { message: '银行账户仅支持数字', pattern: BoleRegExp.RegNumber },
          ]"
        >
          <ProFormText v-model.trim="innerForm.bankAccount" placeholder="请输入银行账户" />
          <ProFormText v-model.trim="form.bankAccount" placeholder="请输入银行账户" />
        </ProFormItemV2>
        <ProFormItemV2 label="银行账户:" prop="verifyStatus">
          {{ VerifyStatusText[innerForm.verifyStatus] }}
          <el-button style="margin-left: 40px" type="primary" link @click="handleCheckBankAccount"
          {{ VerifyStatusText[form.verifyStatus] }}
          <el-button style="margin-left: 10px" type="primary" link @click="handleCheckBankAccount"
            >校验</el-button
          >
        </ProFormItemV2>
      </template> -->
      <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.AliPay">
        <ProFormItemV2
          label="支付宝账号:"
          prop="alipayAccount"
          :checkRules="[{ message: '请输入支付宝账号' }]"
        >
          <div style="display: flex; width: 100%">
            <ProFormText v-model.trim="form.alipayAccount" placeholder="请输入支付宝账号">
            </ProFormText>
            <el-button style="margin-left: 10px" type="primary" link @click="openEnterpriseWallet"
              >获取签约链接</el-button
            >
          </div>
        </ProFormItemV2>
        <ProFormItemV2
          label="支付宝姓名:"
          prop="name"
          :checkRules="[{ message: '请输入支付宝姓名' }]"
        >
          <ProFormText v-model.trim="form.name" placeholder="请输入支付宝姓名" />
        </ProFormItemV2>
        <ProFormItemV2
          label="商户ID:"
          prop="alipayMerchantId"
          :checkRules="[{ message: '请输入商户ID' }]"
        >
          <ProFormText v-model.trim="form.alipayMerchantId" placeholder="请输入商户ID" disabled />
        </ProFormItemV2>
        <ProFormItemV2 label="业务场景:" prop="scene" :checkRules="[{ message: '请选择业务场景' }]">
          <ProFormSelect
            v-model="form.scene"
            :valueEnum="EnumEnterpriseWalletExpandindirectOrderSceneText"
            placeholder="请选择业务场景"
          >
          </ProFormSelect>
        </ProFormItemV2>
        <ProFormItemV2
          label="场景描述:"
          prop="sceneDirections"
          :checkRules="[{ message: '请输入场景描述' }]"
        >
          <ProFormText
            v-model.trim="form.sceneDirections"
            placeholder="谁/通过什么媒介(APP/web/小程序)/主要为谁提供什么服务/用于在什么场景给什么人群转账"
          />
        </ProFormItemV2>
        <ProFormItemV2
          label="转账场景截图:"
          prop="sceneFiles"
          :check-rules="[{ type: 'upload', message: '请上传转账场景截图' }]"
        >
          <ProFormUpload
            v-model:file-url="form.sceneFiles"
            :limit="5"
            :limitFileSize="10"
            accept="png,jpg,jpeg,pdf"
          ></ProFormUpload>
        </ProFormItemV2>
        <ProFormItemV2
          label="资质文件:"
          prop="sceneQualificationFiles"
          :check-rules="[{ type: 'upload', message: '请上传资质文件' }]"
        >
          <ProFormUpload
            v-model:file-url="form.sceneQualificationFiles"
            :limit="5"
            :limitFileSize="10"
            accept="png,jpg,jpeg,pdf"
          ></ProFormUpload>
        </ProFormItemV2>
        <ProFormItemV2 label="签约状态:" prop="signStatus" required>
          <span>{{ EnumEnterpriseWalletSignStatusText[form.signStatus] }}</span>
          <el-button style="margin-left: 10px" type="primary" link @click="handleCheckBankAccount"
            >校验</el-button
          >
        </ProFormItemV2>
        <ProFormItemV2 label="进件状态:" prop="expandindirectOrderStatus" required>
          <span>{{
            EnumEnterpriseWalletExpandindirectOrderStatusText[form.expandindirectOrderStatus]
          }}</span>
          <el-button style="margin-left: 10px" type="primary" link @click="handleCheckBankAccount"
            >校验</el-button
          >
        </ProFormItemV2>
      </template>
      <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.Electronic">
      <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.Electronic">
        <div class="configure-dialog-form-title">通道配置</div>
        <ProFormItemV2
          label="名称:"
          prop="signChannel"
          :checkRules="[{ message: '请选择电子签通道' }]"
          v-for="(item, index) in enabledElectronSignSettings"
          :label="item.accessName"
          :key="item.access"
          prop="electronSignAccesses"
          required
        >
          <ProFormSelect
            v-model="form.signChannel"
            :valueEnum="SignChannelEnumText"
            placeholder="请选择电子签通道"
          >
          </ProFormSelect>
          <ProFormSwitch
            v-model="form.electronSignAccesses[index]"
            :active-value="Number(item.access)"
            :inactive-value="null"
          ></ProFormSwitch>
        </ProFormItemV2>
        <div class="configure-dialog-form-title">费用配置</div>
        <ProFormItemV2
          label="计费方式:"
          prop="chargeType"
          :checkRules="[{ message: '请选择计费方式' }]"
        >
          <ProFormRadio
            :button-style="false"
            v-model="innerForm.chargeType"
            :value-enum="ChargeTypeEnumText"
          />
        </ProFormItemV2>
        <template v-if="innerForm.chargeType === ChargeTypeEnum.Group">
          <ProFormItemV2 label="实名费用:" prop="realVerifyCost">
            <ProFormInputNumber
              :controls="false"
              v-model="innerForm.realVerifyCost"
              placeholder="请输入"
              unit="元/条"
            />
          </ProFormItemV2>
          <ProFormItemV2 label="签约费用:" prop="signCost">
            <ProFormInputNumber
              :controls="false"
              v-model="innerForm.signCost"
              placeholder="请输入"
              unit="元/份"
            />
          </ProFormItemV2>
        </template>
        <template v-if="innerForm.chargeType === ChargeTypeEnum.Merge">
          <ProFormItemV2 label="统一电子签:" prop="mergeSignCost">
            <ProFormInputNumber
              :controls="false"
              v-model="innerForm.mergeSignCost"
              placeholder="请输入"
              unit="元/份"
            />
          </ProFormItemV2>
        </template>
      </template>
      <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage">
      <template v-if="form.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage">
        <div class="configure-dialog-form-title">通道配置</div>
        <ProFormItemV2
          label="名称:"
          prop="messageChannel"
          :checkRules="[{ message: '请选择短信通道' }]"
        >
        <ProFormItemV2 label="名称:" prop="smsAccess" :checkRules="[{ message: '请选择短信通道' }]">
          <ProFormSelect
            v-model="form.messageChannel"
            :valueEnum="MessageChannelEnumText"
            v-model="form.smsAccess"
            :valueEnum="EnumSmsAccessText"
            placeholder="请选择短信通道"
          >
          </ProFormSelect>
        </ProFormItemV2>
        <div class="configure-dialog-form-title">费用配置</div>
        <ProFormItemV2 label="短信费用:" prop="messageCost">
        <ProFormItemV2 label="短信费用:" prop="smsCost">
          <ProFormInputNumber
            :controls="false"
            v-model="innerForm.messageCost"
            v-model="form.smsCost"
            placeholder="请输入"
            unit="元/条"
          />
@@ -127,6 +169,7 @@
      </span>
    </template>
  </ProDialog>
  <AlipayWalletOpen v-bind="dialogQrcodeProps"></AlipayWalletOpen>
</template>
<script setup lang="ts">
@@ -139,76 +182,93 @@
  ProFormRadio,
  ProFormInputNumber,
  ProFormSelect,
  ProFormSwitch,
  useFormDialog,
  UploadUserFile,
  ProFormImageUpload,
  ProFormUpload,
} from '@bole-core/components';
import { BoleRegExp } from '@bole-core/core';
import {
  EnterpriseConfigureType,
  EnterpriseConfigureTypeText,
  ChargeTypeEnum,
  ChargeTypeEnumText,
  SignChannelEnum,
  SignChannelEnumText,
  VerifyStatusText,
  VerifyStatusColor,
  VerifyStatus,
  MessageChannelEnum,
  MessageChannelEnumText,
  EnumElectronSignAccessText,
  EnumSmsAccessText,
  EnumElectronSignAccess,
  EnumEnterpriseWalletSignStatusText,
  EnumEnterpriseWalletExpandindirectOrderStatusText,
  EnumEnterpriseWalletExpandindirectOrderSceneText,
} from '@/constants';
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
import AlipayWalletOpen from './AlipayWalletOpen.vue';
defineOptions({
  name: 'ConfigureDialog',
});
type Props = {
  modelValue: boolean;
  form?: {
    enterpriseConfigureType: EnterpriseConfigureType;
    openBank: string;
    openBranchBank: string;
    bankAccount: string;
    verifyStatus: VerifyStatus;
    signChannel: SignChannelEnum;
    chargeType: ChargeTypeEnum;
    realVerifyCost: number;
    signCost: number;
    mergeSignCost: number;
    messageCost: number;
    messageChannel: MessageChannelEnum;
  };
type Form = {
  enterpriseConfigureType: EnterpriseConfigureType;
  // openBank: string;
  // openBranchBank: string;
  // bankAccount: string;
  // verifyStatus: VerifyStatus;
  electronSignAccesses: EnumElectronSignAccess[];
  smsAccess: EnumSmsAccess;
  smsCost: number;
  alipayAccount: string;
  alipayMerchantId: string;
  id: string;
  signStatus: EnumEnterpriseWalletSignStatus;
  expandindirectOrderStatus: EnumEnterpriseWalletExpandindirectOrderStatus;
  name: string;
  scene: EnumEnterpriseWalletExpandindirectOrderScene;
  sceneDirections: string;
  /**转账场景截图 */
  sceneFiles: UploadUserFile[];
  /**商户行业资质图片或协议文本 */
  sceneQualificationFiles: UploadUserFile[];
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});
const form = defineModel<Form>('form');
const visible = defineModel({ type: Boolean });
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'update:form', value: Props['form']): void;
  (e: 'onConfirm'): void;
  (e: 'onCancel'): void;
}>();
const dialogForm = ref<FormInstance>();
const innerVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  },
const { enabledElectronSignSettings } = useEnabledElectronSignSettings({
  all: true,
});
const innerForm = computed({
  get() {
    return props.form;
  },
  set(val) {
    emit('update:form', val);
  },
});
async function handleCheckBankAccount() {
  try {
    let alipayWallet = await enterpriseWalletServices.getEnterpriseWallet({
      enterpriseId: form.value.id,
      access: EnumEnterpriseWalletAccess.Alipay,
    });
    if (alipayWallet) {
      form.value.signStatus = alipayWallet.signStatus;
      form.value.expandindirectOrderStatus = alipayWallet.expandindirectOrderStatus;
    }
  } catch (error) {}
}
function handleCheckBankAccount() {}
async function getEnterpriseWalletExpandindirectOrder() {
  try {
    let res = await enterpriseWalletServices.getEnterpriseWalletExpandindirectOrder({
      enterpriseId: form.value.id,
    });
    if (res) {
      form.value.expandindirectOrderStatus = res.orderStatus;
    }
  } catch (error) {}
}
function onDialogClose() {
  if (!dialogForm.value) return;
@@ -225,6 +285,37 @@
    }
  });
}
const { dialogProps: dialogQrcodeProps, handleAdd } = useFormDialog({
  defaultFormParams: {
    alipayUrl: '',
  },
});
// async function handleOpenEnterpriseWallet() {
//   try {
//     if (!dialogForm.value) return;
//     const valid = await dialogForm.value.validateField(['alipayAccount', 'alipayMerchantId']);
//     if (valid) {
//       openEnterpriseWallet();
//     }
//   } catch (error) {}
// }
async function openEnterpriseWallet() {
  try {
    let params: API.OpenEnterpriseWalletCommand = {
      access: EnumEnterpriseWalletAccess.Alipay,
      enterpriseId: form.value.id,
    };
    let res = await enterpriseWalletServices.openEnterpriseWallet(params);
    if (res) {
      handleAdd({
        alipayUrl: res.signUrl,
      });
    }
  } catch (error) {}
}
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;