|
|
@@ -1,426 +0,0 @@
|
|
|
-<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
|
|
|
->;
|