|
@@ -0,0 +1,426 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <!-- 修改客户资料 -->
|
|
|
|
|
+ <a-modal class="commonModal modify-custom"
|
|
|
|
|
+ title="修改客户资料"
|
|
|
|
|
+ v-if="visible"
|
|
|
|
|
+ v-model:visible="visible"
|
|
|
|
|
+ centered
|
|
|
|
|
+ :maskClosable="maskClosableFlag"
|
|
|
|
|
+ @cancel="cancel"
|
|
|
|
|
+ width="890px">
|
|
|
|
|
+ <template #footer>
|
|
|
|
|
+ <a-button key="submit"
|
|
|
|
|
+ class="cancelBtn"
|
|
|
|
|
+ @click="submit(1)">保存草稿
|
|
|
|
|
+ </a-button>
|
|
|
|
|
+ <a-button key="submit"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ @click="submit(2)">提交修改</a-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <a-form class="inlineForm"
|
|
|
|
|
+ ref="formRef"
|
|
|
|
|
+ :model="formState"
|
|
|
|
|
+ :rules="rules">
|
|
|
|
|
+ <a-row :gutter="24">
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="客户类型"
|
|
|
|
|
+ name="userinfotype">
|
|
|
|
|
+ <a-select class="typeSelect"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.userinfotype"
|
|
|
|
|
+ placeholder="请选择客户类型">
|
|
|
|
|
+ <a-select-option value="1">
|
|
|
|
|
+ 个人
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ <a-select-option value="2">
|
|
|
|
|
+ 企业
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <template v-if="!isPersonal()">
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="企业名称"
|
|
|
|
|
+ name="customername">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ v-model:value="formState.customername"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ placeholder="请输入企业名称" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="企业简称"
|
|
|
|
|
+ name="nickname">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.nickname"
|
|
|
|
|
+ placeholder="请输入企业简称" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="证件类型"
|
|
|
|
|
+ name="cardtype">
|
|
|
|
|
+ <a-select class="inlineFormSelect"
|
|
|
|
|
+ v-model:value="formState.cardtype"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ placeholder="请选择证件类型">
|
|
|
|
|
+ <a-select-option :value="item.enumitemname"
|
|
|
|
|
+ v-for="item in cardTypeList"
|
|
|
|
|
+ :key="item.autoid">
|
|
|
|
|
+ {{ item.enumdicname }}
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="法定代表人"
|
|
|
|
|
+ name="legalpersonname">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.legalpersonname"
|
|
|
|
|
+ placeholder="请输入法定代表人" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="证件号码"
|
|
|
|
|
+ name="cardnum">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.cardnum"
|
|
|
|
|
+ placeholder="请输入证件号码" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="纳税人识别号"
|
|
|
|
|
+ name="taxpayernum">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.taxpayernum"
|
|
|
|
|
+ placeholder="请输入纳税人识别号" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="营业执照">
|
|
|
|
|
+ <UploadImg :visible="visible"
|
|
|
|
|
+ :imgList="attachmentImgList"
|
|
|
|
|
+ @upload="attachmentUpload" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="联系人"
|
|
|
|
|
+ name="contactname">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.contactname"
|
|
|
|
|
+ placeholder="请输入联系人" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="联系人手机号"
|
|
|
|
|
+ name="mobilephone">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.mobilephone"
|
|
|
|
|
+ placeholder="请输入联系人手机号" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="联系电话"
|
|
|
|
|
+ name="telphone">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.telphone"
|
|
|
|
|
+ placeholder="请输入联系电话" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="姓名"
|
|
|
|
|
+ name="username">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.username"
|
|
|
|
|
+ placeholder="请输入姓名" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="身份证号码"
|
|
|
|
|
+ name="cardnum">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.cardnum"
|
|
|
|
|
+ placeholder="请输入身份证号码" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="手机号码"
|
|
|
|
|
+ name="mobilephone">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.mobilephone"
|
|
|
|
|
+ placeholder="请输入手机号码" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="身份证正面照"
|
|
|
|
|
+ name="cardbackphotourl">
|
|
|
|
|
+ <UploadImg :visible="visible"
|
|
|
|
|
+ :imgList="cardfrontImgList"
|
|
|
|
|
+ @upload="cardfrontUpload" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="邮箱"
|
|
|
|
|
+ name="email">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.email"
|
|
|
|
|
+ placeholder="请输入邮箱" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="24">
|
|
|
|
|
+ <a-form-item label="身份证反面照"
|
|
|
|
|
+ name="cardfrontphotourl">
|
|
|
|
|
+ <UploadImg :visible="visible"
|
|
|
|
|
+ :imgList="cardbackImgList"
|
|
|
|
|
+ @upload="cardbackUpload" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item label="联系电话"
|
|
|
|
|
+ name="telphone">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 200px"
|
|
|
|
|
+ v-model:value="formState.telphone"
|
|
|
|
|
+ placeholder="请输入联系电话" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="12">
|
|
|
|
|
+ <a-form-item>
|
|
|
|
|
+
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <a-col :span="24">
|
|
|
|
|
+ <a-form-item label="通讯地址">
|
|
|
|
|
+ <a-select class="inlineFormSelect"
|
|
|
|
|
+ style="width: 205px"
|
|
|
|
|
+ v-model:value="formState.provinceid"
|
|
|
|
|
+ @change="getCityList"
|
|
|
|
|
+ placeholder="请选择省">
|
|
|
|
|
+ <a-select-option v-for="item in provinceList"
|
|
|
|
|
+ :key="item.autoid"
|
|
|
|
|
+ :value="item.autoid">
|
|
|
|
|
+ {{ item.divisionname }}
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ <a-select class="inlineFormSelect ml9"
|
|
|
|
|
+ style="width: 205px"
|
|
|
|
|
+ v-model:value="formState.cityid"
|
|
|
|
|
+ @change="getDistrictList"
|
|
|
|
|
+ placeholder="请选择市">
|
|
|
|
|
+ <a-select-option v-for="item in cityList"
|
|
|
|
|
+ :key="item.autoid"
|
|
|
|
|
+ :value="item.autoid">
|
|
|
|
|
+ {{ item.divisionname }}
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ <a-select class="inlineFormSelect ml9"
|
|
|
|
|
+ v-model:value="formState.districtid"
|
|
|
|
|
+ style="width: 205px"
|
|
|
|
|
+ placeholder="请选择县(区)">
|
|
|
|
|
+ <a-select-option v-for="item in districtList"
|
|
|
|
|
+ :key="item.autoid"
|
|
|
|
|
+ :value="item.autoid">
|
|
|
|
|
+ {{ item.divisionname }}
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="24">
|
|
|
|
|
+ <a-form-item label=" "
|
|
|
|
|
+ name="cardaddress">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 635px"
|
|
|
|
|
+ v-model:value="formState.cardaddress"
|
|
|
|
|
+ placeholder="请输入详细地址" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ <a-col :span="24">
|
|
|
|
|
+ <a-form-item label="备注"
|
|
|
|
|
+ name="remark">
|
|
|
|
|
+ <a-input class="dialogInput"
|
|
|
|
|
+ style="width: 635px"
|
|
|
|
|
+ v-model:value="formState.remark"
|
|
|
|
|
+ placeholder="请输入备注" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-col>
|
|
|
|
|
+ </a-row>
|
|
|
|
|
+ </a-form>
|
|
|
|
|
+ </a-modal>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script lang="ts">
|
|
|
|
|
+import { closeModal } from '@/common/setup/modal/index';
|
|
|
|
|
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
|
|
|
|
|
+import { getCardType, handleForm, initFormState } from '../add/setup';
|
|
|
|
|
+import { AllEnums } from '@/services/go/commonService/interface';
|
|
|
|
|
+import { FormState } from '../add/interface';
|
|
|
|
|
+import { getAddress } from '@/services/go/adress';
|
|
|
|
|
+import { ModifyUserInfoApplyReq, QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
|
|
|
|
|
+import { getUserId } from '@/services/bus/account';
|
|
|
|
|
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
|
|
|
|
|
+import { QueryModifyUserInfoApply } from '@/services/go/ermcp/customInfo';
|
|
|
|
|
+import { mergeTwoObj } from '@/utils/objHandle';
|
|
|
|
|
+import { validateAction } from '@/common/setup/form';
|
|
|
|
|
+import { delAddress } from '@/services/socket/address';
|
|
|
|
|
+import UploadImg from '@/common/components/uploadImg/index.vue';
|
|
|
|
|
+import { getUploadImg } from '@/common/setup/upload';
|
|
|
|
|
+
|
|
|
|
|
+export default defineComponent({
|
|
|
|
|
+ name: 'modify-custom',
|
|
|
|
|
+ components: { UploadImg },
|
|
|
|
|
+ props: {
|
|
|
|
|
+ selectedRow: {
|
|
|
|
|
+ default: initFormState,
|
|
|
|
|
+ type: Object as PropType<QueryCustomInfoType>,
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ setup(props, context) {
|
|
|
|
|
+ const { visible, cancel } = closeModal('custom_info_btn_modify');
|
|
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
|
|
+ // 证件类型
|
|
|
|
|
+ const cardTypeList = ref<AllEnums[]>(getCardType());
|
|
|
|
|
+ // 表单
|
|
|
|
|
+ const { formRef, formState, rules } = handleForm();
|
|
|
|
|
+ // 地址
|
|
|
|
|
+ const { cityList, districtList, provinceList, getCityList, getDistrictList } = getAddress();
|
|
|
|
|
+ // 营业执照
|
|
|
|
|
+ const { uploadImgAction: attachmentUpload, uploadImgList: attachmentImgList, handleImg: attachmentHandle } = getUploadImg();
|
|
|
|
|
+ // 背面证件照地址
|
|
|
|
|
+ const { uploadImgAction: cardbackUpload, uploadImgList: cardbackImgList, handleImg: cardbackHandle } = getUploadImg();
|
|
|
|
|
+ // 正面证件照地址
|
|
|
|
|
+ const { uploadImgAction: cardfrontUpload, uploadImgList: cardfrontImgList, handleImg: cardfrontHandle } = getUploadImg();
|
|
|
|
|
+
|
|
|
|
|
+ function isPersonal(): boolean {
|
|
|
|
|
+ return formState.userinfotype === '1';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const userid = ref<number>(0);
|
|
|
|
|
+ const countryid = ref<number>(0);
|
|
|
|
|
+ watchEffect(() => {
|
|
|
|
|
+ if (visible.value) {
|
|
|
|
|
+ userid.value = props.selectedRow.userid;
|
|
|
|
|
+ countryid.value = props.selectedRow.countryid;
|
|
|
|
|
+ mergeTwoObj(formState, props.selectedRow);
|
|
|
|
|
+ if (isPersonal()) {
|
|
|
|
|
+ formState.username = props.selectedRow.customername;
|
|
|
|
|
+ }
|
|
|
|
|
+ const { provinceid, cityid, address, mobile, attachment1, cardfrontphotourl, cardbackphotourl } = props.selectedRow;
|
|
|
|
|
+ formState.cardaddress = address;
|
|
|
|
|
+ formState.mobilephone = mobile;
|
|
|
|
|
+ provinceid ? getCityList(provinceid) : (formState.provinceid = undefined);
|
|
|
|
|
+ cityid ? getDistrictList(cityid) : ((formState.cityid = undefined), (formState.districtid = undefined));
|
|
|
|
|
+ if (attachment1) {
|
|
|
|
|
+ // 营业执照
|
|
|
|
|
+ attachmentImgList.value = attachmentHandle(attachment1);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (cardbackphotourl) {
|
|
|
|
|
+ // 背面证件照地址
|
|
|
|
|
+ cardbackImgList.value = cardbackHandle(cardbackphotourl);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (cardbackphotourl) {
|
|
|
|
|
+ // 正面证件照地址
|
|
|
|
|
+ cardfrontImgList.value = cardfrontHandle(cardbackphotourl);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ function submit(OperateType: 1 | 2) {
|
|
|
|
|
+ validateAction<FormState>(formRef, formState).then((param) => {
|
|
|
|
|
+ const reqParam: ModifyUserInfoApplyReq = {
|
|
|
|
|
+ customername: Number(param.userinfotype) === 1 ? param.username : param.customername, // 必填
|
|
|
|
|
+ username: param.username,
|
|
|
|
|
+ userid: userid.value,
|
|
|
|
|
+ memberareaid: getUserId(),
|
|
|
|
|
+ userinfotype: Number(param.userinfotype),
|
|
|
|
|
+ userstate: OperateType, // 1: 保存草稿 2: 新增
|
|
|
|
|
+ cardtype: param.cardtype, // 证件类型
|
|
|
|
|
+ cardnum: param.cardnum, // 证件号码
|
|
|
|
|
+ nickname: param.nickname, // 昵称
|
|
|
|
|
+ remark: param.remark, // 备注
|
|
|
|
|
+ mobilephone: param.mobilephone, // 手机号码
|
|
|
|
|
+ telphone: param.telphone, // 电话
|
|
|
|
|
+ cardfrontphotourl: param.cardfrontphotourl, // 正面照片
|
|
|
|
|
+ cardaddress: param.cardaddress, // 证件地址
|
|
|
|
|
+ cityid: param.cityid, //
|
|
|
|
|
+ districtid: param.districtid, // 地区
|
|
|
|
|
+ countryid: countryid.value,
|
|
|
|
|
+ provinceid: param.provinceid, //省
|
|
|
|
|
+ contactname: param.contactname, // 联系人
|
|
|
|
|
+ legalpersonname: param.legalpersonname, // 法人姓名(企业)
|
|
|
|
|
+ taxpayernum: param.taxpayernum, // 纳税人识别号
|
|
|
|
|
+ email: param.email, // email
|
|
|
|
|
+ };
|
|
|
|
|
+ requestResultLoadingAndInfo(QueryModifyUserInfoApply, reqParam, loading, OperateType === 1 ? ['保存草稿成功', '保存草稿失败:'] : ['新增客户资料成功', '新增客户资料失败:']).then(() => {
|
|
|
|
|
+ cancel();
|
|
|
|
|
+ context.emit('refresh');
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ return {
|
|
|
|
|
+ formState,
|
|
|
|
|
+ rules,
|
|
|
|
|
+ formRef,
|
|
|
|
|
+ cardTypeList,
|
|
|
|
|
+ isPersonal,
|
|
|
|
|
+ visible,
|
|
|
|
|
+ cancel,
|
|
|
|
|
+ submit,
|
|
|
|
|
+ loading,
|
|
|
|
|
+ cityList,
|
|
|
|
|
+ districtList,
|
|
|
|
|
+ provinceList,
|
|
|
|
|
+ getCityList,
|
|
|
|
|
+ getDistrictList,
|
|
|
|
|
+ attachmentUpload,
|
|
|
|
|
+ attachmentImgList,
|
|
|
|
|
+ cardbackUpload,
|
|
|
|
|
+ cardbackImgList,
|
|
|
|
|
+ cardfrontUpload,
|
|
|
|
|
+ cardfrontImgList,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+});
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="less">
|
|
|
|
|
+.modify-custom {
|
|
|
|
|
+ .upload {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ .ant-btn.uploadBtn {
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ background: @m-blue0;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: @m-white0;
|
|
|
|
|
+ .rounded-corners(3px);
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: rgba(@m-blue0, 0);
|
|
|
|
|
+ color: rgba(@m-white0, 0.8);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .look {
|
|
|
|
|
+ color: @m-blue0;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style
|
|
|
|
|
+>;
|