|
|
@@ -0,0 +1,289 @@
|
|
|
+<!-- 交易商管理-交易商管理-交易商管理-编辑 -->
|
|
|
+<template>
|
|
|
+ <app-drawer title="编辑" width="900" v-model:show="show" :refresh="refresh" :loading="loading">
|
|
|
+ <el-form ref="formRef" class="el-form--horizontal" label-width="140px" :model="formData.userinfoDetailVo"
|
|
|
+ :rules="formRules" :show-message="false">
|
|
|
+ <fieldset class="g-fieldset el-form--horizontal">
|
|
|
+ <legend class="g-fieldset__legend">基本信息</legend>
|
|
|
+ <el-form-item label="交易商代码" prop="userId">
|
|
|
+ {{ formData.userAccountDetailVo.userId }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="交易商名称" prop="accountName">
|
|
|
+ <el-input v-model="formData.userAccountDetailVo.accountName" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属会员" prop="memberUserName">
|
|
|
+ {{ formData.userAccountDetailVo.memberUserName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属机构" prop="parentuserid">
|
|
|
+ <app-select-member v-model="formData.userAccountDetailVo.parentuserid" usertype="3"
|
|
|
+ placeholder="代码或名称模糊匹配" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推荐人" prop="refereeUserName">
|
|
|
+ {{ handleNoneValue(formData.userAccountDetailVo.refereeUserName) }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否认证" prop="isAuth">
|
|
|
+ <el-radio-group v-model="formData.userAccountDetailVo.isAuth">
|
|
|
+ <template v-for="item in getUserInfoTypeList()" :key="item.value">
|
|
|
+ <el-radio :label="item.label" :value="item.value" />
|
|
|
+ </template>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </fieldset>
|
|
|
+ <fieldset class="g-fieldset el-form--horizontal">
|
|
|
+ <legend class="g-fieldset__legend">{{ isPerson ? '个人' : '企业' }}资料</legend>
|
|
|
+ <el-form-item label="证件类型" prop="cardTypeId">
|
|
|
+ <app-enum code="certypeperson" v-model="formData.userinfoDetailVo.cardTypeId" v-if="isPerson" />
|
|
|
+ <app-enum code="certypecompany" v-model="formData.userinfoDetailVo.cardTypeId" v-else />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证件号码" prop="cardNum">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.cardNum" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="!isPerson">
|
|
|
+ <el-form-item label="企业名称" prop="customerName">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.customerName" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="企业性质" prop="bizNature" v-if="!isPerson">
|
|
|
+ <app-enum code="biznature" v-model="formData.userinfoDetailVo.bizNature" :empty-values="[0]" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="法人姓名" prop="legalPersonName">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.legalPersonName" maxlength="50"
|
|
|
+ placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人" prop="contactName">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.contactName" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item label="性别" prop="sex">
|
|
|
+ <el-radio-group v-model="formData.userinfoDetailVo.sex">
|
|
|
+ <template v-for="item in getGenderList()" :key="item.value">
|
|
|
+ <el-radio :label="item.label" :value="item.value" />
|
|
|
+ </template>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属公司" prop="company" v-if="isPerson">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.company" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号" prop="mobile">
|
|
|
+ <el-input type="number" v-model="formData.userinfoDetailVo.mobile" maxlength="50"
|
|
|
+ placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="telPhone">
|
|
|
+ <el-input type="number" v-model="formData.userinfoDetailVo.telPhone" maxlength="50"
|
|
|
+ placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="地区" prop="region">
|
|
|
+ <app-region class="el-form-item--col" v-model:province="formData.userinfoDetailVo.provinceid"
|
|
|
+ v-model:city="formData.userinfoDetailVo.cityid"
|
|
|
+ v-model:district="formData.userinfoDetailVo.districtid" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="地址" prop="address">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.address" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮政编码" prop="postalCode">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.postalCode" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱" prop="email">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.email" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="微信" prop="wechat">
|
|
|
+ <el-input v-model="formData.userinfoDetailVo.wechat" maxlength="50" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="isPerson">
|
|
|
+ <el-form-item label="证件照正面" prop="cardFrontPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.cardFrontPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证件照反面" prop="cardBackPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.cardBackPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item label="营业执照" prop="cardFrontPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.cardFrontPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手持证件照" prop="halfBodyPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.halfBodyPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="法人身份证正面" prop="legalCardFrontPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.legalCardFrontPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="法人身份证反面" prop="legalCardFrontPhotoUrl">
|
|
|
+ <app-upload v-model="uploadFiles.legalCardFrontPhotoUrl" :file-types="['image']"
|
|
|
+ type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="法人授权书" prop="otherUrl">
|
|
|
+ <app-upload v-model="uploadFiles.otherUrl" :file-types="['image']" type-message="请选择正确的图片类型" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item class="el-form-item--row" label="备注" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="formData.userinfoDetailVo.remark" maxlength="200" :rows="2"
|
|
|
+ placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </fieldset>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="onCancel(false)">关闭</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">提交审核</el-button>
|
|
|
+ </template>
|
|
|
+ </app-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, PropType, onMounted, computed } from 'vue'
|
|
|
+import { ElMessage, FormInstance, FormRules, UploadUserFile } from 'element-plus'
|
|
|
+import { handleNoneValue } from '@/filters'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { investorEdit, queryInvestorListDetail } from '@/services/api/investor'
|
|
|
+import { getUserInfoTypeList, getGenderList, UserInfoType } from '@/constants/member'
|
|
|
+import AppDrawer from '@pc/components/base/drawer/index.vue'
|
|
|
+import AppUpload from '@pc/components/base/upload/index.vue'
|
|
|
+import AppEnum from '@pc/components/modules/enum/index.vue'
|
|
|
+import AppRegion from '@pc/components/modules/region/index.vue'
|
|
|
+import AppSelectMember from '@pc/components/modules/select-member/index.vue'
|
|
|
+import service from '@/services'
|
|
|
+import { decryptAES } from '@/services/crypto'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ record: {
|
|
|
+ type: Object as PropType<Model.InvestorListRsp>
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+const show = ref(true)
|
|
|
+const refresh = ref(false)
|
|
|
+
|
|
|
+const uploadFiles = reactive<{
|
|
|
+ cardFrontPhotoUrl: UploadUserFile[];
|
|
|
+ cardBackPhotoUrl: UploadUserFile[];
|
|
|
+ legalCardFrontPhotoUrl: UploadUserFile[];
|
|
|
+ legalCardBackPhotoUrl: UploadUserFile[];
|
|
|
+ halfBodyPhotoUrl: UploadUserFile[];
|
|
|
+ otherUrl: UploadUserFile[];
|
|
|
+}>({
|
|
|
+ cardFrontPhotoUrl: [],
|
|
|
+ cardBackPhotoUrl: [],
|
|
|
+ halfBodyPhotoUrl: [],
|
|
|
+ legalCardFrontPhotoUrl: [],
|
|
|
+ legalCardBackPhotoUrl: [],
|
|
|
+ otherUrl: []
|
|
|
+})
|
|
|
+
|
|
|
+// 是否个人
|
|
|
+const isPerson = computed(() => formData.value.userinfoDetailVo.userinfoType === UserInfoType.Personal)
|
|
|
+
|
|
|
+const formData = ref<Model.InvestorEditReq>({
|
|
|
+ userAccountDetailVo: {},
|
|
|
+ userinfoDetailVo: {}
|
|
|
+})
|
|
|
+
|
|
|
+const getUploadFiles = (value?: string) => {
|
|
|
+ const paths = value ? value.split(',') : []
|
|
|
+ return paths.map((url) => {
|
|
|
+ const urlObj = new URL(url, service.getConfig('apiUrl'))
|
|
|
+ const name = urlObj.pathname.split('/').pop()
|
|
|
+ return {
|
|
|
+ name: name ?? urlObj.href,
|
|
|
+ url: urlObj.href,
|
|
|
+ response: {
|
|
|
+ data: [{ filePath: value }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const { loading, run } = useRequest(queryInvestorListDetail, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: ((res) => {
|
|
|
+ const { userinfoDetailVo } = res.data.oldResult
|
|
|
+
|
|
|
+ userinfoDetailVo.cardNum = decryptAES(userinfoDetailVo.cardNum)
|
|
|
+ userinfoDetailVo.mobile = decryptAES(userinfoDetailVo.mobile)
|
|
|
+ userinfoDetailVo.telPhone = decryptAES(userinfoDetailVo.telPhone)
|
|
|
+ userinfoDetailVo.wechat = decryptAES(userinfoDetailVo.wechat)
|
|
|
+ userinfoDetailVo.email = decryptAES(userinfoDetailVo.email)
|
|
|
+
|
|
|
+ uploadFiles.cardFrontPhotoUrl = getUploadFiles(userinfoDetailVo.cardFrontPhotoUrl)
|
|
|
+ uploadFiles.cardBackPhotoUrl = getUploadFiles(userinfoDetailVo.cardBackPhotoUrl)
|
|
|
+ uploadFiles.legalCardFrontPhotoUrl = getUploadFiles(userinfoDetailVo.legalCardFrontPhotoUrl)
|
|
|
+ uploadFiles.legalCardBackPhotoUrl = getUploadFiles(userinfoDetailVo.legalCardBackPhotoUrl)
|
|
|
+ uploadFiles.otherUrl = getUploadFiles(userinfoDetailVo.otherUrl)
|
|
|
+
|
|
|
+ formData.value = res.data.oldResult
|
|
|
+ }),
|
|
|
+ onError: (err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: FormRules = {
|
|
|
+ accountName: [{
|
|
|
+ required: true,
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (formData.value.userAccountDetailVo.accountName) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入交易商名称'))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ cardTypeId: [{ required: true }],
|
|
|
+ cardNum: [{ required: true }],
|
|
|
+ mobile: [{ required: true }]
|
|
|
+}
|
|
|
+
|
|
|
+const onCancel = (isRefresh = false) => {
|
|
|
+ show.value = false
|
|
|
+ refresh.value = isRefresh
|
|
|
+}
|
|
|
+
|
|
|
+// 更新上传文件到表单中
|
|
|
+const updateUploadFiles = (uploadFiles: UploadUserFile[]) => {
|
|
|
+ return uploadFiles.map((e) => {
|
|
|
+ const res = e.response as { data: { filePath: string }[] }
|
|
|
+ return res.data.map((e) => e.filePath)
|
|
|
+ }).join(',')
|
|
|
+}
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ const rawData = { ...formData.value }
|
|
|
+ rawData.userAccountDetailVo.modifyStatus = 3
|
|
|
+ rawData.userinfoDetailVo.cardFrontPhotoUrl = updateUploadFiles(uploadFiles.cardFrontPhotoUrl)
|
|
|
+ rawData.userinfoDetailVo.cardBackPhotoUrl = updateUploadFiles(uploadFiles.cardBackPhotoUrl)
|
|
|
+ rawData.userinfoDetailVo.halfBodyPhotoUrl = updateUploadFiles(uploadFiles.halfBodyPhotoUrl)
|
|
|
+ rawData.userinfoDetailVo.legalCardFrontPhotoUrl = updateUploadFiles(uploadFiles.legalCardFrontPhotoUrl)
|
|
|
+ rawData.userinfoDetailVo.legalCardBackPhotoUrl = updateUploadFiles(uploadFiles.legalCardBackPhotoUrl)
|
|
|
+ rawData.userinfoDetailVo.otherUrl = updateUploadFiles(uploadFiles.otherUrl)
|
|
|
+
|
|
|
+ formRef.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true
|
|
|
+ investorEdit({
|
|
|
+ data: rawData
|
|
|
+ }).then(() => {
|
|
|
+ ElMessage.success('保存成功')
|
|
|
+ onCancel(true)
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error('保存失败:' + err)
|
|
|
+ }).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const record = props.record
|
|
|
+ if (record) {
|
|
|
+ run({
|
|
|
+ userid: record.userId,
|
|
|
+ modifyFlag: record.modifyStatus
|
|
|
+ })
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|