merchant_feedov_web/src/views/customer/NewCustomerForm.vue

<template>
  <a-modal :visible="visible" :title="editMode ? $t('customer.editCustomer') : $t('customer.addCustomer')"
    :loading="loading" @ok="handleSubmit" @cancel="handleCancel" :width="800" :okText="$t('form.Confirm')"
    :cancelText="$t('form.Cancel')">
    <a-tabs>
      <!-- 基本信息 Tab -->
      <a-tab-pane key="1" :title="$t('customer.basicInfo')">
        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }">
          <a-divider>{{ $t('customer.basicInfoSection') }}</a-divider>
          <!-- Customer Code -->
          <a-form-item field="zip" :label="$t('customer.customerCode')" required validate-trigger="blur">
            <a-input v-model="formData.zip" :placeholder="$t('customer.enterCustomerCode')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="email" :label="$t('customer.emailName')" required validate-trigger="blur">
            <a-input v-model="formData.email" :placeholder="$t('customer.emailType')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="phone" :label="$t('customer.phoneName')" required validate-trigger="blur">
            <a-input v-model="formData.phone" :placeholder="$t('customer.phoneType')" show-word-limit />
          </a-form-item>
          <!-- Customer Name -->
          <a-form-item field="name" :label="$t('customer.customerName')" required validate-trigger="blur">
            <a-input v-model="formData.name" :placeholder="$t('customer.enterCustomerName')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <!-- Account Number -->
          <a-form-item field="username" :label="$t('customer.accountNumber')" required validate-trigger="blur">
            <a-input v-model="formData.username" :placeholder="$t('customer.enterAccountNumber')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <!-- Password -->
          <a-form-item :label="$t('customer.password')" required validate-trigger="blur">
            <a-input-password v-model="formData.password" :placeholder="$t('customer.enterPassword')" :max-length="60"
              show-word-limit />
            <a-button type="primary" @click="generatePassword">{{ $t('customer.generatePassword') }}</a-button>
          </a-form-item>
          <div class="note">
            {{ $t('customer.note') }}
          </div>
          <a-form-item field="note" :label="$t('customer.remark')" required validate-trigger="blur">
            <a-input v-model="formData.note" :placeholder="$t('customer.enterRemark')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <!-- Account Balance -->
          <a-form-item field="amount" :label="$t('customer.accountBalance')" required validate-trigger="blur">
            <a-input-number v-model="formData.amount" :min="0" :precision="2" :step="100"
              :suffix="$t('customer.currency')" />
          </a-form-item>
          <!-- Address -->
          <a-form-item field="addr" :label="$t('customer.address')" required validate-trigger="blur">
            <a-input v-model="formData.addr" :placeholder="$t('customer.addressMessage')" :max-length="50"
              show-word-limit />
          </a-form-item>
          <!-- Status -->
          <a-form-item field="state" :label="$t('customer.statusName')" required validate-trigger="blur">
            <a-radio-group v-model="formData.state">
              <a-radio :value="item.value" v-for="item in userTypes">{{
                item.value == 1 ? $t('customer.status.normal') : (item.value == 2 ? $t('customer.status.disabled') :
                  (item.value == 3 ? $t('customer.status.pending') : $t('customer.status.suspended')))
                }} </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <!-- SMS 信息 Tab -->
      <a-tab-pane key="2" :title="$t('customer.smsInfoSection')">
        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }">
          <a-divider>{{ $t('customer.smsInfoSection') }}</a-divider>
          <a-form-item field="sms" :label="$t('customer.smsSubCode')" required validate-trigger="blur">
            <a-input v-model="formData.sms" :placeholder="$t('customer.enterSmsSubCode')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="smsSignature" :label="$t('customer.smsName')" required validate-trigger="blur">
            <a-input v-model="formData.smsSignature" :placeholder="$t('customer.enterSmsName')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="loginSms" :label="$t('customer.loginSmsTemplate')" required validate-trigger="blur">
            <a-input v-model="formData.loginSms" :placeholder="$t('customer.enterLoginSmsTemplate')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="warnSms" :label="$t('customer.alarmSmsTemplate')" required validate-trigger="blur">
            <a-input v-model="formData.warnSms" :placeholder="$t('customer.enterAlarmSmsTemplate')" :max-length="60"
              show-word-limit />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <!-- Billing Information Tab -->
      <a-tab-pane key="3" :title="$t('customer.billingInfo')">
        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }">
          <a-divider>{{ $t('customer.InvoiceInformation') }}</a-divider>
          <a-form-item field="invoiceTitle" :label="$t('customer.invoiceTitle')" required validate-trigger="blur">
            <a-input v-model="formData.invoiceTitle" :placeholder="$t('customer.enterInvoiceTitle')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="invoiceType" :label="$t('customer.invoice_vatTextType')" required validate-trigger="blur">
            <a-select v-model="formData.invoiceType" :style="{ width: '100%' }"
              :placeholder="$t('customer.invoice_vatTextTypeSelect')">
              <a-option v-for="item of invoiceList" :value="item.value" :label="item.label" />
            </a-select>
          </a-form-item>
          <a-form-item field="invoiceAddr" :label="$t('customer.registeredAddress')" required validate-trigger="blur">
            <a-input v-model="formData.invoiceAddr" :placeholder="$t('customer.enterRegisteredAddress')"
              :max-length="60" show-word-limit />
          </a-form-item>
          <a-form-item field="invoiceZip" :label="$t('customer.invoiceCode')" required validate-trigger="blur">
            <a-input v-model="formData.invoiceZip" :placeholder="$t('customer.InvoiceCodeName')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="invoiceEmail" :label="$t('customer.invoiceEmailName')" required validate-trigger="blur">
            <a-input v-model="formData.invoiceEmail" :placeholder="$t('customer.invoiceEmailNameType')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="bankName" :label="$t('customer.bankName')" required validate-trigger="blur">
            <a-input v-model="formData.bankName" :placeholder="$t('customer.enterBankName')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="bankAccount" :label="$t('customer.BankNumber')" required validate-trigger="blur">
            <a-input v-model="formData.bankAccount" :placeholder="$t('customer.BankNumberName')" :max-length="60"
              show-word-limit />
          </a-form-item>
          <a-form-item field="bankBranch" :label="$t('customer.bank_branchName')" required validate-trigger="blur">
            <a-input v-model="formData.bankBranch" :placeholder="$t('customer.bank_branchNameType')" show-word-limit />
          </a-form-item>
          <a-form-item field="businessLicense" :label="$t('customer.BusinessLicense')" required validate-trigger="blur">
            <upload v-model="formData.businessLicense" />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <!-- Tax Registration Tab -->
      <a-tab-pane key="4" :title="$t('customer.TaxRegistration')">
        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 8 }"
          :wrapper-col-props="{ span: 16 }">
          <a-divider>{{ $t('customer.TaxRegistrationText') }}</a-divider>
          <a-form-item field="taxRegistrationCertificate" :label="$t('customer.photocopy')" required
            validate-trigger="blur">
            <upload v-model:modelValue="formData.taxRegistrationCertificate" />
          </a-form-item>
          <a-form-item field="taxpayerQualification" :label="$t('customer.CertificationQualification')" required
            validate-trigger="blur">
            <upload v-model:modelValue="formData.taxpayerQualification" />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <a-tab-pane key="5" :title="$t('forewarning.forewarning')">
        <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 4 }"
          :wrapper-col-props="{ span: 20 }">
          <a-divider>{{ $t('forewarning.EarlyWarningSetting') }}</a-divider>
          <a-form-item field="amountWarn" :label="$t('forewarning.AccountBalanceAlarm')" required
            validate-trigger="blur">
            <a-input v-model="formData.amountWarn" :placeholder="$t('form.datapoolForm.pleaseEnter')" :max-length="60"
              :style="{ width: '320px' }" show-word-limit />
          </a-form-item>
          <a-form-item field="arriveWarn" :label="$t('forewarning.ReachWarning')" required validate-trigger="blur">
            <a-input-number v-model="formData.arriveWarn" :style="{ width: '320px' }"
              :placeholder="$t('form.datapoolForm.pleaseEnter')" allow-clear hide-button>
              <template #suffix>
                %
              </template>
            </a-input-number>
          </a-form-item>
          <a-form-item field="arriveNetwork" :label="$t('forewarning.NetworkOutage')" required validate-trigger="blur">
            <a-input-number v-model="formData.arriveNetwork" :style="{ width: '320px' }"
              :placeholder="$t('form.datapoolForm.pleaseEnter')" allow-clear hide-button>
              <template #suffix>
                %
              </template>
            </a-input-number>
            <a-radio-group v-model="formData.arriveStopNetwork" :options="reachList"></a-radio-group>
          </a-form-item>
          <a-form-item field="warnPhone" :label="$t('forewarning.EarlyWarningPhone')" required validate-trigger="blur">
            <a-input v-model="formData.warnPhone" :style="{ width: '320px' }"
              :placeholder="$t('form.datapoolForm.pleaseEnter')" allow-clear hide-button>
            </a-input>
          </a-form-item>
          <a-form-item field="warnEmail" :label="$t('forewarning.WarningMailbox')" required validate-trigger="blur">
            <a-input v-model="formData.warnEmail" :style="{ width: '320px' }"
              :placeholder="$t('form.datapoolForm.pleaseEnter')" allow-clear>
            </a-input>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>


<script setup>
import { ref, watch, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
import { dictionaryDetail } from '@/api/path/dict.js'
import Upload from "@/components/upload/index.vue";
import { systemFindRoleList } from "@/api/path/system.api.js";
import { addCustomer, updateCustomer } from "@/api/customer.js";
import { Getdictionary } from '@/mixins/index.js'
const { t } = useI18n();
import { encryptByDES } from '@/utils/crypto.js'

const props = defineProps({
  visible: Boolean,
  editMode: Boolean,
  editData: Object,
  loading: Boolean,
});

const invoiceList = ref([])
const roles = ref([])
const userTypes = ref([])
watch(
  () => props.editData,
  (newVal) => {
    if (newVal && props.editMode) {
      // 深拷贝编辑数据
      const editDataCopy = JSON.parse(JSON.stringify(newVal));
      delete editDataCopy.alert.id
      delete editDataCopy.alert.userId
      delete editDataCopy.alert.createdAt
      delete editDataCopy.alert.deletedAt
      delete editDataCopy.alert.updatedAt
      // 检查并展平嵌套的 info 对象
      let flattenedFormData = {};
      let flasAlert = {}
      if (editDataCopy.info) {
        flattenedFormData = { ...editDataCopy.info }; // 展平 info 的键值对
        flasAlert = { ...editDataCopy.alert }
        delete editDataCopy.info; // 删除原始 info 字段
        delete editDataCopy.alert; // 删除原始 info 字段
      }

      // 合并 editDataCopy 和 flattenedFormData
      const formDataList = {
        ...editDataCopy,
        ...flattenedFormData, // 此处直接使用展开后的 flattenedFormData
        ...flasAlert
      };

      // 更新 formData 的值
      formData.value = formDataList;

    }

  }
);

const emit = defineEmits(['update:visible', 'submit']);

const formRef = ref(null);
const reachList = ref([])
const formData = ref({
  username: "",
  state: "",
  name: "",
  password: "",
  phone: "",
  email: "",
  addr: "",
  zip: "",
  note: "",
  sms: "",
  smsSignature: "",
  loginSms: "",
  warnSms: "",
  amount: "",
  invoiceTitle: "",
  invoiceType: "",
  invoiceAddr: "",
  invoiceZip: "",
  invoiceEmail: "",
  bankName: "",
  bankAccount: "",
  bankBranch: "",
  businessLicense: "",
  taxRegistrationCertificate: "",
  taxpayerQualification: "",
  amountWarn: '',
  arriveWarn: '',
  // arriveStop: '',
  arriveNetwork: '',
  arriveStopOperation: '',
  arriveStopNetwork: '',
  warnPhone: '',
  warnEmail: ''
});

const rules = {
  userName: [{ required: true, message: t('customer.enterAccountNumber') }],
  state: [{ required: true, message: t('customer.stateType') }],
  name: [{ required: true, message: t('customer.nameType') }],
  // password: [{ required: true, message: t('customer.passwordRequired') }],
  // roleIds: [{required: true, message: t('customer.roleIdsType')}],
  // userType: [{required: true, message: t('customer.userTypeType')}],
  phone: [{ required: true, message: t('customer.phoneType') }],
  email: [{ required: true, message: t('customer.emailType') }],
  addr: [{ required: true, message: t('customer.addressRequired') }],
  amount: [{ required: true, message: t('customer.amountRequired') }],
  bankAccount: [{ required: true, message: t('customer.bankAccountRequired') }],
  bankBranch: [{ required: true, message: t('customer.bankBranchRequired') }],
  bankName: [{ required: true, message: t('customer.bankNameRequired') }],
  businessLicense: [{ required: true, message: t('customer.businessLicenseRequired') }],
  invoiceAddr: [{ required: true, message: t('customer.invoiceAddressRequired') }],
  invoiceEmail: [{ required: true, message: t('customer.invoiceEmailRequired') }],
  invoiceTitle: [{ required: true, message: t('customer.invoiceTitleRequired') }],
  invoiceType: [{ required: true, message: t('customer.invoiceTypeRequired') }],
  invoiceZip: [{ required: true, message: t('customer.invoiceZipRequired') }],
  loginSms: [{ required: true, message: t('customer.loginSMSTemplateRequired') }],
  note: [{ required: true, message: t('customer.noteRequired') }],
  sms: [{ required: true, message: t('customer.smsRequired') }],
  smsSignature: [{ required: true, message: t('customer.smsSignatureRequired') }],
  warnSms: [{ required: true, message: t('customer.warnSMSTemplateRequired') }],
  zip: [{ required: true, message: t('customer.zipCodeRequired') }],
  taxRegistrationCertificate: [{ required: true, message: t('customer.taxRegistrationCertificateRequired') }],
  taxpayerQualification: [{ required: true, message: t('customer.taxpayerQualificationRequired') }],
};


const handleSubmit = () => {
  if (activeKey.value != 5 && !props.editData?.id) {
    Message.error('请继续填写下一步骤')
  } else {
    formRef.value.validate(async (values, errors) => {
      if (!errors) {
        if (formData.value.password) {
          formData.value.password = encryptByDES(formData.value.password);
        }
        formData.value.amountWarn = Number(formData.value.amountWarn);
        formData.value.warnPhone = String(formData.value.warnPhone);
        formData.value.warnEmail = String(formData.value.warnEmail);
        let response;
        if (props.editMode) {
          response = await updateCustomer(formData.value);
        } else {
          response = await addCustomer(formData.value);
        }
        if (response.code === 200) {
          Message.success(props.editMode ? t('customer.updateSuccess') : t('customer.addSuccess'));
          emit('submit', true);
          emit('update:visible', false);
        } else {
          Message.error(response.message || (props.editMode ? t('customer.updateFailed') : t('customer.addFailed')));
        }

      }
    });
  }
};

const handleCancel = () => {
  Object.keys(formData.value).forEach(key => {
    formData.value[key] = ''
  })
  formRef.value = null
  emit('update:visible', false);
};


const generatePassword = () => {
  formData.value.password = Math.random().toString(36).slice(-8);
  Message.success(t('customer.passwordGenerated'));
};


const getDistList = async () => {
  let code = ['invoiceVat', 'reach'];

  for (let i = 0; i < code.length; i++) {
    let res = await dictionaryDetail({ typeKey: code[i] });
    if (res.code === 200) {
      if (i == 0) {
        invoiceList.value = res.data;
      } else {
        reachList.value = res.data;
      }

    }
  }
}

const getRolesData = async () => {
  let res = await systemFindRoleList()
  if (res.code === 200) {
    roles.value = res.data
  }
}

const getList = async () => {
  let res = await Getdictionary('userType')
  userTypes.value = res
}

watch(() => props.visible, val => {
  if (!val) {
    Object.keys(formData.value).forEach(key => {
      formData.value[key] = ''
    })
  } else {
    getRolesData()
    getDistList()
    getList()
  }
}, { immediate: true })

</script>

<style scoped>
.upload-description {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.note {
  color: #f73f3f;
  text-align: center;
  position: relative;
  top: -20px;
  left: 65px;
}
</style>