<script setup lang="tsx">
|
import { message } from "@/utils/message";
|
import { useNav } from "@/layout/hooks/useNav";
|
import { useUserStoreHook } from "@/store/modules/user";
|
import type { FormInstance, FormRules, UploadProps } from "element-plus";
|
import { cloneDeep } from "@pureadmin/utils";
|
import { onMounted, reactive, ref, watch } from "vue";
|
import { getToken } from "@/utils/auth";
|
const { route } = useNav();
|
import { baseUrlApi } from "@/api/util";
|
import { cusExtendInfo, changeCusExtend } from "@/api/mine";
|
import { Edit } from "@element-plus/icons-vue";
|
import { enterpriseTypes } from "@/api/register/index";
|
|
import {
|
addDialog,
|
closeDialog,
|
updateDialog,
|
closeAllDialog
|
} from "@/components/ReDialog";
|
|
const ruleFormRef = ref<FormInstance>();
|
const isLoading = ref(false);
|
const showDialog = ref(false);
|
const state = reactive({
|
userInfo: useUserStoreHook().enterpriseInfo,
|
headers: {
|
// Accept: "application/json, text/plain, */*",
|
// "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
|
// "X-Requested-With": "XMLHttpRequest",
|
Authorization: `Bearer ${getToken()?.accessToken}`
|
},
|
isShowPassword: false,
|
ruleForm: {
|
// 主键（唯一标识）
|
id: null, // integer($int64)，可空
|
// 企业类型（从预设企业类型列表中选择）
|
enterpriseType: null, // string，可空
|
// 交易主体代码（同角色代码，不可空，最小长度为1）
|
transactionCode: "", // string，必填
|
// 交易主体名称
|
transactionName: null, // string，可空
|
// 营业执照文件路径
|
businessLicense: null, // string，可空
|
// 企业名称
|
enterpriseName: null, // string，可空
|
// 统一社会信用代码
|
unifiedSocialCreditCode: null, // string，可空
|
// 注册资金（单位：万元）
|
registeredCapital: null, // number($double)，可空
|
// 法定代表人姓名
|
legalRepresentativeName: null, // string，可空
|
// 法定代表人身份证文件路径
|
legalRepresentativeIdCard: null, // string，可空
|
// 法定代表人身份证号码
|
legalRepresentativeIdNumber: null, // string，可空
|
// 法定代表人联系电话
|
legalRepresentativePhone: null, // string($tel)，可空
|
// 企业住所（下拉选择，暂以字符串接收）
|
residence: null, // string，可空
|
// 企业联系电话
|
enterprisePhone: null, // string($tel)，可空
|
// 企业成立时间（格式示例：2025-07-08 14:56:54）
|
establishmentTime: null, // string($date-time)，可空
|
// 企业主营业务
|
mainBusiness: null, // string，可空
|
// 企业邮箱
|
enterpriseEmail: null, // string，可空
|
// 业务经办人姓名
|
operatorName: null, // string，可空
|
// 业务经办人身份证文件路径或标识（上传后存储信息）
|
operatorIdCard: null, // string，可空
|
// 业务经办人身份证号码
|
operatorIdNumber: null, // string，可空
|
// 业务经办人联系电话
|
operatorPhone: null, // string($tel)，可空
|
// 企业开户行
|
bankName: null, // string，可空
|
// 企业银行账号
|
bankAccount: null // string，可空
|
},
|
enterpriseList: [],
|
type: "",
|
rules: {
|
enterpriseType: [
|
{ required: true, message: "请选择企业类型", trigger: "change" }
|
],
|
businessLicense: [
|
{ required: true, message: "请上传营业执照", trigger: "change" }
|
],
|
enterpriseName: [
|
{ required: true, message: "请输入企业名称", trigger: "blur" }
|
],
|
unifiedSocialCreditCode: [
|
{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }
|
],
|
registeredCapital: [
|
{ required: true, message: "请输入注册资金", trigger: "blur" }
|
],
|
legalRepresentativeName: [
|
{ required: true, message: "请输入法定代表人姓名", trigger: "blur" }
|
],
|
legalRepresentativeIdCard: [
|
{ required: true, message: "请上传法定代表人身份证", trigger: "change" }
|
],
|
legalRepresentativeIdNumber: [
|
{
|
required: true,
|
message: "请输入法定代表人身份证号码",
|
trigger: "blur"
|
}
|
],
|
legalRepresentativePhone: [
|
{ required: true, message: "请输入法定代表人联系电话", trigger: "blur" },
|
{
|
type: "string",
|
pattern: /^1[3-9]\d{9}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur"
|
}
|
],
|
residence: [
|
{ required: true, message: "请选择企业住所", trigger: "change" }
|
],
|
enterprisePhone: [
|
{ required: true, message: "请输入企业联系电话", trigger: "blur" },
|
{
|
type: "string",
|
pattern: /^1[3-9]\d{9}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur"
|
}
|
],
|
establishmentTime: [
|
{ required: true, message: "请选择企业成立时间", trigger: "change" }
|
],
|
mainBusiness: [
|
{ required: true, message: "请输入企业主营业务", trigger: "blur" }
|
],
|
enterpriseEmail: [
|
{ required: true, message: "请输入企业邮箱", trigger: "blur" },
|
{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
|
],
|
operatorName: [
|
{ required: true, message: "请输入业务经办人姓名", trigger: "blur" }
|
],
|
operatorIdCard: [
|
{ required: true, message: "请上传业务经办人身份证", trigger: "change" }
|
],
|
operatorIdNumber: [
|
{
|
required: true,
|
message: "请输入业务经办人身份证号码",
|
trigger: "blur"
|
}
|
],
|
operatorPhone: [
|
{ required: true, message: "请输入业务经办人联系电话", trigger: "blur" },
|
{
|
type: "string",
|
pattern: /^1[3-9]\d{9}$/,
|
message: "请输入正确的手机号码",
|
trigger: "blur"
|
}
|
],
|
bankName: [
|
{ required: true, message: "请输入企业开户行", trigger: "blur" }
|
],
|
bankAccount: [
|
{ required: true, message: "请输入企业银行账号", trigger: "blur" }
|
]
|
},
|
loading: {
|
signIn: false
|
},
|
captchaImage: "",
|
rotateVerifyVisible: false,
|
// rotateVerifyImg: verifyImg,
|
// rotateVerifyImg: themeConfig.value.logoUrl,
|
secondVerEnabled: false,
|
// captchaEnabled: false,
|
isPassRotate: false,
|
capsLockVisible: false,
|
hideTenantForLogin: false,
|
expirySeconds: 60, // 验证码过期时间
|
phoneSeconds: 0, // 手机验证码倒计时
|
roleList: [],
|
showDialog: false
|
});
|
onMounted(async () => {
|
// let res = await useUserStoreHook().getCusExtendInfo();
|
// if (res.code == 200) {
|
// state.userInfo = res.result;
|
// state.userInfo.enterpriseTypeName = res.result.enterpriseType;
|
// state.ruleForm = res.result;
|
// state.ruleForm.enterpriseType = state.ruleForm.enterpriseType.split(",");
|
// } else {
|
// message(res.message, {
|
// type: "error"
|
// });
|
// }
|
state.ruleForm = cloneDeep(state.userInfo);
|
console.log(state.userInfo);
|
|
state.ruleForm.enterpriseType = state.ruleForm.enterpriseType.split(",");
|
let nowRole = useUserStoreHook()?.exRoles;
|
if (nowRole.length >= 1 && !route.query.code) {
|
state.ruleForm.transactionCode = nowRole[0].code;
|
state.userInfo.transactionName = nowRole[0].name;
|
} else {
|
state.ruleForm.transactionCode = route.query.code;
|
state.userInfo.enterpriseTypeName = route.query.name;
|
}
|
|
let restypes = await enterpriseTypes();
|
state.enterpriseList = restypes?.result;
|
});
|
const isLeaf = data => {
|
data.forEach(item => {
|
if (!item.child) {
|
item.leaf = true;
|
}
|
});
|
};
|
const loadNode = (node, resolve) => {
|
if (node.level === 0) {
|
isLeaf(node.data);
|
return resolve(node.data);
|
} else if (node.level > 0 && node.data.child) {
|
isLeaf(node.data.child);
|
return resolve(node.data.child);
|
} else {
|
return resolve([]);
|
}
|
};
|
|
const showImg = name => {
|
addDialog({
|
width: "40%",
|
title: "查看营业执照",
|
contentRenderer: () => <img src={state.userInfo[name]} />, // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
closeCallBack: ({ options, args }) => {
|
// options.props 是响应式的
|
// const { formInline } = options.props as FormProps;
|
// const text = `姓名：${formInline.user} 城市：${formInline.region}`;
|
if (args?.command === "cancel") {
|
// 您点击了取消按钮
|
// active.value -= 1;
|
} else if (args?.command === "sure") {
|
} else {
|
}
|
}
|
});
|
};
|
const handleAvatarSuccess: UploadProps["onSuccess"] = (
|
response,
|
uploadFile
|
) => {
|
if (response.code == "200") {
|
// state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
|
let res = response.result;
|
state.ruleForm.businessLicense = res.url; // 营业执照文件路径
|
state.ruleForm.enterpriseName = res.info.Name; // 企业名称
|
state.ruleForm.unifiedSocialCreditCode = res.info.RegNum; // 统一社会信用代码
|
state.ruleForm.registeredCapital = res.info.Capital; // 注册资金（单位：万元）
|
state.ruleForm.legalRepresentativeName = res.info.Person; // 法定代表人姓名
|
state.ruleForm.establishmentTime = res.info.SetDate; // 企业成立时间（格式示例：2025-07-08 14:56:54）
|
state.ruleForm.residence = res.info.Address; // 企业住所（下拉选择，暂以字符串接收）
|
state.ruleForm.mainBusiness = res.info.Business; // 企业主营业务
|
} else {
|
message(response.message, {
|
type: "error"
|
});
|
}
|
isLoading.value = false;
|
};
|
const handleAvatarSuccessLegalRepresentative: UploadProps["onSuccess"] = (
|
response,
|
uploadFile
|
) => {
|
console.log(response);
|
if (response.code == "200") {
|
// state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
|
let res = response.result;
|
state.ruleForm.legalRepresentativeIdCard = res.url; // 法定代表人身份证文件路径
|
state.ruleForm.legalRepresentativeIdNumber = res.info.IdNum; // 法定代表人身份证号码
|
} else {
|
message(response.message, {
|
type: "error"
|
});
|
}
|
isLoading.value = false;
|
};
|
|
const handleAvatarSuccessOperator: UploadProps["onSuccess"] = (
|
response,
|
uploadFile
|
) => {
|
if (response.code == "200") {
|
// state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
|
let res = response.result;
|
state.ruleForm.operatorName = res.info.Name; // 业务经办人姓名
|
state.ruleForm.operatorIdCard = res.url; // 业务经办人身份证文件路径或标识（上传后存储信息）
|
state.ruleForm.operatorIdNumber = res.info.IdNum; // 业务经办人身份证号码
|
} else {
|
message(response.message, {
|
type: "error"
|
});
|
}
|
isLoading.value = false;
|
};
|
|
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
|
isLoading.value = true;
|
// if (rawFile.type !== "image/jpeg") {
|
// message(`请上传jpeg类型的图片`, {
|
// type: "error"
|
// });
|
// return false;
|
// } else if (rawFile.size / 1024 / 1024 > 2) {
|
// message(`图片大小不能超过 2MB！`, {
|
// type: "error"
|
// });
|
// return false;
|
// }
|
return true;
|
};
|
// 提交修改企业注册信息
|
const modifyData = async () => {
|
let obj = cloneDeep(state.ruleForm);
|
obj.enterpriseType = state.ruleForm.enterpriseType.join(",");
|
let res = await changeCusExtend(obj);
|
if (res.code == "200") {
|
showDialog.value = false;
|
await useUserStoreHook().getCusExtendInfo();
|
message("修改成功！", {
|
type: "success"
|
});
|
} else {
|
message(res.message, {
|
type: "error"
|
});
|
}
|
};
|
defineOptions({
|
name: "mine"
|
});
|
</script>
|
|
<template>
|
<el-descriptions class="margin-top" title="" :column="3" :size="size" border>
|
<!-- <template #extra>
|
<el-button type="primary">Operation</el-button>
|
</template> -->
|
<el-descriptions-item :span="3">
|
<template #label>
|
<div class="cell-item">交易主体</div>
|
</template>
|
{{ state.userInfo.transactionName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">企业名称</div>
|
</template>
|
{{ state.userInfo.enterpriseName }}
|
|
<span @click="showImg('businessLicense')">
|
<el-link type="primary" underline>查看营业执照</el-link>
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">统一社会信用代码</div>
|
</template>
|
{{ state.userInfo.unifiedSocialCreditCode }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">注册资金</div>
|
</template>
|
{{ state.userInfo.registeredCapital }}
|
</el-descriptions-item>
|
<el-descriptions-item :span="2">
|
<template #label>
|
<div class="cell-item">企业类型</div>
|
</template>
|
{{ state.userInfo.enterpriseType }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">住所地</div>
|
</template>
|
{{ state.userInfo.residence }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">联系电话</div>
|
</template>
|
{{ state.userInfo.legalRepresentativePhone }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">成立时间</div>
|
</template>
|
{{ state.userInfo.establishmentTime }}
|
</el-descriptions-item>
|
<el-descriptions-item :span="2">
|
<template #label>
|
<div class="cell-item">电子邮箱</div>
|
</template>
|
{{ state.userInfo.enterpriseEmail }}
|
</el-descriptions-item>
|
<el-descriptions-item :span="3" label-width="100">
|
<template #label>
|
<div class="cell-item">主营业务</div>
|
</template>
|
{{ state.userInfo.mainBusiness }}
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">法定代表人</div>
|
</template>
|
{{ state.userInfo.legalRepresentativeName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">身份证</div>
|
</template>
|
{{ state.userInfo.legalRepresentativeIdNumber }}
|
<span @click="showImg('legalRepresentativeIdCard')">
|
<el-link type="primary" underline>查看身份证</el-link>
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">联系电话</div>
|
</template>
|
{{ state.userInfo.legalRepresentativePhone }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">业务经办人</div>
|
</template>
|
{{ state.userInfo.operatorName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">身份证</div>
|
</template>
|
{{ state.userInfo.operatorIdNumber }}
|
<span style="margin-right: auto" @click="showImg('operatorIdCard')">
|
<el-link type="primary" underline>查看身份证</el-link>
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">联系电话</div>
|
</template>
|
{{ state.userInfo.operatorPhone }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">开户银行</div>
|
</template>
|
{{ state.userInfo.bankName }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template #label>
|
<div class="cell-item">银行账号</div>
|
</template>
|
{{ state.userInfo.bankAccount }}
|
</el-descriptions-item>
|
</el-descriptions>
|
<div class="m-5">
|
<el-button type="primary" :icon="Edit" @click="() => (showDialog = true)"
|
>修改资料</el-button
|
>
|
</div>
|
<el-dialog
|
v-model="showDialog"
|
title="修改资料"
|
:width="1500"
|
draggable
|
:close-on-click-modal="false"
|
>
|
<div v-loading="isLoading" class="flex justify-center mt-5">
|
<el-form
|
ref="ruleFormRef"
|
style="width: 95%"
|
:model="state.ruleForm"
|
:rules="state.rules"
|
label-width="auto"
|
>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业类型" prop="enterpriseType">
|
<el-tree-select
|
v-model="state.ruleForm.enterpriseType"
|
:data="state.enterpriseList"
|
multiple
|
node-key="name"
|
:render-after-expand="false"
|
show-checkbox
|
check-strictly
|
check-on-click-node
|
:load="loadNode"
|
lazy
|
:props="{ label: 'name', children: 'child', isLeaf: 'leaf' }"
|
/>
|
<!-- <el-select
|
v-model="state.ruleForm.enterpriseType"
|
placeholder="请选择"
|
clearable
|
multiple
|
>
|
<el-option
|
v-for="item in state.enterpriseList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select> -->
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row><div class="baseclass">基本资料</div></el-row>
|
<!-- <el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="交易主体">
|
<el-input
|
v-model="state.ruleForm.transactionName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row> -->
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="营业执照" prop="businessLicense">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/upBizLicense')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.businessLicense"
|
:src="state.ruleForm.businessLicense"
|
width="200px"
|
height="150px"
|
/>
|
<el-button v-else type="primary">上传</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="企业名称" prop="enterpriseName">
|
<el-input
|
v-model="state.ruleForm.enterpriseName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item
|
label="统一社会信用代码"
|
prop="unifiedSocialCreditCode"
|
>
|
<el-input
|
v-model="state.ruleForm.unifiedSocialCreditCode"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="注册资金" prop="registeredCapital">
|
<el-input
|
v-model="state.ruleForm.registeredCapital"
|
disabled
|
placeholder="请输入"
|
>
|
<template #append>万元</template></el-input
|
>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
<el-form-item label="法定代表人" prop="legalRepresentativeName">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="住所地" prop="residence">
|
<el-input
|
v-model="state.ruleForm.residence"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="成立时间" prop="establishmentTime">
|
<el-input
|
v-model="state.ruleForm.establishmentTime"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="主营业务" prop="mainBusiness">
|
<el-input
|
v-model="state.ruleForm.mainBusiness"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="enterprisePhone">
|
<el-input
|
v-model="state.ruleForm.enterprisePhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="邮箱" prop="enterpriseEmail">
|
<el-input
|
v-model="state.ruleForm.enterpriseEmail"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="法定代表人" prop="legalRepresentativeIdCard">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccessLegalRepresentative"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.legalRepresentativeIdCard"
|
:src="state.ruleForm.legalRepresentativeIdCard"
|
width="85.6px"
|
height="5.4px"
|
/>
|
<el-button v-else type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名" prop="legalRepresentativeName">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证" prop="legalRepresentativeIdNumber">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativeIdNumber"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="legalRepresentativePhone">
|
<el-input
|
v-model="state.ruleForm.legalRepresentativePhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
<el-form-item label="业务经办人" prop="operatorIdCard">
|
<el-upload
|
:action="`${baseUrlApi('/api/upFile/uploadIdCord?PageName=FRONT')}`"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccessOperator"
|
:before-upload="beforeAvatarUpload"
|
:headers="state.headers"
|
>
|
<img
|
v-if="state.ruleForm.operatorIdCard"
|
:src="state.ruleForm.operatorIdCard"
|
width="85.6px"
|
height="5.4px"
|
/>
|
<el-button v-else type="primary">上传身份证</el-button>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="姓名" prop="operatorName">
|
<el-input
|
v-model="state.ruleForm.operatorName"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="身份证" prop="operatorIdNumber">
|
<el-input
|
v-model="state.ruleForm.operatorIdNumber"
|
disabled
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="联系电话" prop="operatorPhone">
|
<el-input
|
v-model="state.ruleForm.operatorPhone"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
<el-form-item label="开户行" prop="bankName">
|
<el-input
|
v-model="state.ruleForm.bankName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
<el-form-item label="银行账号" prop="bankAccount">
|
<el-input
|
v-model="state.ruleForm.bankAccount"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="() => (showDialog = false)">取 消</el-button>
|
<el-button type="primary" :disabled="isLoading" @click="modifyData"
|
>确 定</el-button
|
>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style lang="scss">
|
.el-descriptions {
|
margin-top: 20px;
|
}
|
.cell-item {
|
display: flex;
|
align-items: center;
|
}
|
.flex-between {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
.element {
|
position: absolute;
|
right: 0;
|
}
|
</style>
|
