优化租户管理字段映射,统一前后端字段命名并完善营业执照图片预览功能

This commit is contained in:
WUSIJIAN
2025-12-10 15:38:23 +08:00
parent 06ca1d227d
commit ef4a0e6803
2 changed files with 51 additions and 44 deletions

View File

@@ -17,19 +17,19 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="联系人" prop="contactPerson"> <el-form-item label="联系人" prop="userNickname">
<el-input v-model="ruleForm.contactPerson" placeholder="请输入联系人" clearable></el-input> <el-input v-model="ruleForm.userNickname" placeholder="请输入联系人" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="电话" prop="phone"> <el-form-item label="电话" prop="mobile">
<el-input v-model="ruleForm.phone" placeholder="请输入电话" clearable></el-input> <el-input v-model="ruleForm.mobile" placeholder="请输入电话" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="所属城市" prop="city"> <el-form-item label="所属城市" prop="cityMergerName">
<el-cascader <el-cascader
v-model="ruleForm.city" v-model="ruleForm.cityMergerName"
:options="cityOptions" :options="cityOptions"
placeholder="请选择省市" placeholder="请选择省市"
clearable clearable
@@ -41,14 +41,14 @@
<!-- 新增时显示账号和密码 --> <!-- 新增时显示账号和密码 -->
<template v-if="ruleForm.id === 0"> <template v-if="ruleForm.id === 0">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="租户账号" prop="tenantAccount"> <el-form-item label="租户账号" prop="userName">
<el-input v-model="ruleForm.tenantAccount" placeholder="字母或数字6位以上" clearable></el-input> <el-input v-model="ruleForm.userName" placeholder="字母或数字6位以上" clearable></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="userPassword">
<el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password clearable @input="checkPasswordStrength"></el-input> <el-input v-model="ruleForm.userPassword" placeholder="请输入密码" type="password" show-password clearable @input="checkPasswordStrength"></el-input>
<div class="password-strength" v-if="ruleForm.password"> <div class="password-strength" v-if="ruleForm.userPassword">
强度: <span :class="passwordStrengthClass">{{ passwordStrengthText }}</span> 强度: <span :class="passwordStrengthClass">{{ passwordStrengthText }}</span>
</div> </div>
</el-form-item> </el-form-item>
@@ -64,7 +64,7 @@
<template v-else> <template v-else>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="租户账号"> <el-form-item label="租户账号">
<el-input v-model="ruleForm.tenantAccount" disabled></el-input> <el-input v-model="ruleForm.userName" disabled></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</template> </template>
@@ -140,24 +140,24 @@ const state = reactive({
id: 0, id: 0,
tenantName: '', tenantName: '',
tenantType: '' as number | '', tenantType: '' as number | '',
contactPerson: '', userNickname: '',
phone: '', mobile: '',
city: [] as string[], cityMergerName: [] as string[],
tenantAccount: '', userName: '',
password: '', userPassword: '',
confirmPassword: '', confirmPassword: '',
businessLicense: '', businessLicense: '',
}, },
rules: { rules: {
tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }], tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
tenantType: [{ required: true, message: '请选择租户类型', trigger: 'change' }], tenantType: [{ required: true, message: '请选择租户类型', trigger: 'change' }],
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }], userNickname: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
phone: [ mobile: [
{ required: true, message: '请输入电话', trigger: 'blur' }, { required: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
], ],
city: [{ required: true, message: '请选择所属城市', trigger: 'change' }], cityMergerName: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
tenantAccount: [ userName: [
{ required: true, message: '请输入租户账号', trigger: 'blur' }, { required: true, message: '请输入租户账号', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{6,}$/, message: '账号必须为字母或数字且长度至少6位', trigger: 'blur' } { pattern: /^[a-zA-Z0-9]{6,}$/, message: '账号必须为字母或数字且长度至少6位', trigger: 'blur' }
], ],
@@ -166,7 +166,7 @@ const state = reactive({
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
{ {
validator: (rule: any, value: any, callback: any) => { validator: (rule: any, value: any, callback: any) => {
if (value !== state.ruleForm.password) { if (value !== state.ruleForm.userPassword) {
callback(new Error('两次输入密码不一致')); callback(new Error('两次输入密码不一致'));
} else { } else {
callback(); callback();
@@ -184,7 +184,7 @@ const { isShowDialog, ruleForm, rules, passwordStrength } = toRefs(state);
// 密码强度检测 // 密码强度检测
const checkPasswordStrength = () => { const checkPasswordStrength = () => {
const pwd = state.ruleForm.password; const pwd = state.ruleForm.userPassword;
let strength = 0; let strength = 0;
if (pwd.length >= 6) strength++; if (pwd.length >= 6) strength++;
if (/[A-Z]/.test(pwd)) strength++; if (/[A-Z]/.test(pwd)) strength++;
@@ -219,8 +219,8 @@ const openDialog = (row?: any) => {
// 由于没有反查函数,这里如果 row.city 是字符串,我们暂时将其直接放入数组,或者需要调用专门的工具函数 // 由于没有反查函数,这里如果 row.city 是字符串,我们暂时将其直接放入数组,或者需要调用专门的工具函数
// 简单处理:如果 row.city 是字符串,尝试回显 // 简单处理:如果 row.city 是字符串,尝试回显
let cityArray: string[] = []; let cityArray: string[] = [];
if (row.city && typeof row.city === 'string') { if (row.cityMergerName && typeof row.cityMergerName === 'string') {
const storedCode = row.city; const storedCode = row.cityMergerName;
// 判断是否为直辖市代码 (11xxxx, 12xxxx, 31xxxx, 50xxxx) // 判断是否为直辖市代码 (11xxxx, 12xxxx, 31xxxx, 50xxxx)
if (/^(11|12|31|50)/.test(storedCode)) { if (/^(11|12|31|50)/.test(storedCode)) {
// 直辖市,回显为 [2位代码] (如 '11') // 直辖市,回显为 [2位代码] (如 '11')
@@ -234,19 +234,19 @@ const openDialog = (row?: any) => {
cityArray = [provinceCode, cityCode]; cityArray = [provinceCode, cityCode];
} }
} }
} else if (Array.isArray(row.city)) { } else if (Array.isArray(row.cityMergerName)) {
cityArray = row.city; cityArray = row.cityMergerName;
} }
state.ruleForm = { state.ruleForm = {
id: row.id, id: row.id,
tenantName: row.tenantName, tenantName: row.tenantName,
tenantType: row.tenantType, tenantType: row.tenantType,
contactPerson: row.contactPerson, userNickname: row.userNickname,
phone: row.phone, mobile: row.mobile,
city: cityArray, cityMergerName: cityArray,
tenantAccount: row.tenantAccount, userName: row.userName,
password: '', // 修改时不显示密码 userPassword: '', // 修改时不显示密码
confirmPassword: '', confirmPassword: '',
businessLicense: row.businessLicense, businessLicense: row.businessLicense,
}; };
@@ -269,8 +269,8 @@ const onSubmit = () => {
if (valid) { if (valid) {
// 处理城市数据提交:取数组最后一位 // 处理城市数据提交:取数组最后一位
const submitForm: any = { ...state.ruleForm }; const submitForm: any = { ...state.ruleForm };
if (Array.isArray(submitForm.city) && submitForm.city.length > 0) { if (Array.isArray(submitForm.cityMergerName) && submitForm.cityMergerName.length > 0) {
let lastCode = String(submitForm.city[submitForm.city.length - 1]); let lastCode = String(submitForm.cityMergerName[submitForm.cityMergerName.length - 1]);
// 特殊处理直辖市:如果选中的是省级代码,转换为市级代码 (市辖区) // 特殊处理直辖市:如果选中的是省级代码,转换为市级代码 (市辖区)
const municipalityMap: Record<string, string> = { const municipalityMap: Record<string, string> = {
'11': '110100', '110000': '110100', // 北京 '11': '110100', '110000': '110100', // 北京
@@ -284,9 +284,9 @@ const onSubmit = () => {
// 普通省市如果是4位代码补齐为6位 // 普通省市如果是4位代码补齐为6位
lastCode = lastCode + '00'; lastCode = lastCode + '00';
} }
submitForm.city = lastCode; submitForm.cityCode = lastCode;
} else { } else {
submitForm.city = ''; submitForm.cityCode = '';
} }
// 转换为FormData // 转换为FormData
@@ -315,9 +315,9 @@ const onSubmit = () => {
} else { } else {
// 过滤掉密码字段,或者后端接口决定是否更新密码 // 过滤掉密码字段,或者后端接口决定是否更新密码
// 根据需求,修改时不能修改密码 // 根据需求,修改时不能修改密码
if (formData.has('password')) formData.delete('password'); if (formData.has('userPassword')) formData.delete('userPassword');
if (formData.has('confirmPassword')) formData.delete('confirmPassword'); if (formData.has('confirmPassword')) formData.delete('confirmPassword');
if (formData.has('tenantAccount')) formData.delete('tenantAccount'); if (formData.has('userName')) formData.delete('userName');
editTenant(formData).then(() => { editTenant(formData).then(() => {
ElMessage.success('修改成功'); ElMessage.success('修改成功');
@@ -334,11 +334,11 @@ const resetForm = () => {
id: 0, id: 0,
tenantName: '', tenantName: '',
tenantType: '', tenantType: '',
contactPerson: '', userNickname: '',
phone: '', mobile: '',
city: [], cityMergerName: [],
tenantAccount: '', userName: '',
password: '', userPassword: '',
confirmPassword: '', confirmPassword: '',
businessLicense: '', businessLicense: '',
}; };

View File

@@ -68,6 +68,7 @@
style="width: 50px; height: 50px" style="width: 50px; height: 50px"
:src="scope.row.businessLicense" :src="scope.row.businessLicense"
:preview-src-list="[scope.row.businessLicense]" :preview-src-list="[scope.row.businessLicense]"
preview-teleported
fit="cover" fit="cover"
v-if="scope.row.businessLicense" v-if="scope.row.businessLicense"
/> />
@@ -172,7 +173,13 @@ const tenantList = () => {
getTenantList(params) getTenantList(params)
.then((res: any) => { .then((res: any) => {
state.tableData.data = res.data.list ?? []; const imgAddressPrefix = res.data.imgAddressPrefix || '';
const list = res.data.list ?? [];
// 拼接营业执照完整地址
state.tableData.data = list.map((item: any) => ({
...item,
businessLicense: item.businessLicense ? imgAddressPrefix + item.businessLicense : '',
}));
state.tableData.total = res.data.total; state.tableData.total = res.data.total;
}) })
.catch(() => { .catch(() => {