364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="system-edit-tenant-container">
|
|||
|
|
<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '租户'" v-model="isShowDialog" width="769px">
|
|||
|
|
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
|
|||
|
|
<el-row :gutter="35">
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="租户名称" prop="tenantName">
|
|||
|
|
<el-input v-model="ruleForm.tenantName" placeholder="请输入租户名称" clearable></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="租户类型" prop="tenantType">
|
|||
|
|
<el-select v-model="ruleForm.tenantType" placeholder="请选择租户类型" clearable class="w100">
|
|||
|
|
<el-option label="普通类型" :value="1"></el-option>
|
|||
|
|
<el-option label="代理类型" :value="2"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="联系人" prop="contactPerson">
|
|||
|
|
<el-input v-model="ruleForm.contactPerson" placeholder="请输入联系人" clearable></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="电话" prop="phone">
|
|||
|
|
<el-input v-model="ruleForm.phone" placeholder="请输入电话" clearable></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="所属城市" prop="city">
|
|||
|
|
<el-cascader
|
|||
|
|
v-model="ruleForm.city"
|
|||
|
|
:options="cityOptions"
|
|||
|
|
placeholder="请选择省市"
|
|||
|
|
clearable
|
|||
|
|
class="w100"
|
|||
|
|
></el-cascader>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- 新增时显示账号和密码 -->
|
|||
|
|
<template v-if="ruleForm.id === 0">
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="租户账号" prop="tenantAccount">
|
|||
|
|
<el-input v-model="ruleForm.tenantAccount" placeholder="字母或数字，6位以上" clearable></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="密码" prop="password">
|
|||
|
|
<el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password clearable @input="checkPasswordStrength"></el-input>
|
|||
|
|
<div class="password-strength" v-if="ruleForm.password">
|
|||
|
|
强度: <span :class="passwordStrengthClass">{{ passwordStrengthText }}</span>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="确认密码" prop="confirmPassword">
|
|||
|
|
<el-input v-model="ruleForm.confirmPassword" placeholder="请再次输入密码" type="password" show-password clearable></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 修改时只显示账号（不可改） -->
|
|||
|
|
<template v-else>
|
|||
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|||
|
|
<el-form-item label="租户账号">
|
|||
|
|
<el-input v-model="ruleForm.tenantAccount" disabled></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-col :span="24" class="mb20">
|
|||
|
|
<el-form-item label="营业执照" prop="businessLicense">
|
|||
|
|
<div class="upload-container">
|
|||
|
|
<el-upload
|
|||
|
|
class="avatar-uploader"
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
:on-change="handleAvatarSuccess"
|
|||
|
|
:before-upload="beforeAvatarUpload"
|
|||
|
|
>
|
|||
|
|
<img v-if="ruleForm.businessLicense" :src="ruleForm.businessLicense" class="avatar" />
|
|||
|
|
<div v-else class="upload-placeholder">
|
|||
|
|
<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
|
|||
|
|
<span class="upload-text">点击上传营业执照</span>
|
|||
|
|
</div>
|
|||
|
|
</el-upload>
|
|||
|
|
<div class="upload-tip">支持 jpg、png 格式，文件大小不超过 2MB</div>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="onCancel" size="default">取 消</el-button>
|
|||
|
|
<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
|
|||
|
|
import { ElMessage, UploadProps } from 'element-plus';
|
|||
|
|
import { Plus } from '@element-plus/icons-vue';
|
|||
|
|
import { addTenant, editTenant, getTenant } from '/@/api/system/tenant';
|
|||
|
|
import { pcTextArr } from 'element-china-area-data';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'systemEditTenant',
|
|||
|
|
components: { Plus },
|
|||
|
|
setup(prop, { emit }) {
|
|||
|
|
const formRef = ref<HTMLElement | null>(null);
|
|||
|
|
|
|||
|
|
// 省市数据（使用 element-china-area-data）
|
|||
|
|
const cityOptions = pcTextArr;
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
isShowDialog: false,
|
|||
|
|
passwordStrength: 0,
|
|||
|
|
ruleForm: {
|
|||
|
|
id: 0,
|
|||
|
|
tenantName: '',
|
|||
|
|
tenantType: '' as number | '',
|
|||
|
|
contactPerson: '',
|
|||
|
|
phone: '',
|
|||
|
|
city: [] as string[],
|
|||
|
|
tenantAccount: '',
|
|||
|
|
password: '',
|
|||
|
|
confirmPassword: '',
|
|||
|
|
businessLicense: '',
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
|
|||
|
|
tenantType: [{ required: true, message: '请选择租户类型', trigger: 'change' }],
|
|||
|
|
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
|||
|
|
phone: [
|
|||
|
|
{ required: true, message: '请输入电话', trigger: 'blur' },
|
|||
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
city: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
|
|||
|
|
tenantAccount: [
|
|||
|
|
{ required: true, message: '请输入租户账号', trigger: 'blur' },
|
|||
|
|
{ pattern: /^[a-zA-Z0-9]{6,}$/, message: '账号必须为字母或数字，且长度至少6位', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|||
|
|
confirmPassword: [
|
|||
|
|
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
|||
|
|
{
|
|||
|
|
validator: (rule: any, value: any, callback: any) => {
|
|||
|
|
if (value !== state.ruleForm.password) {
|
|||
|
|
callback(new Error('两次输入密码不一致'));
|
|||
|
|
} else {
|
|||
|
|
callback();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
trigger: 'blur'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
businessLicense: [{ required: true, message: '请上传营业执照', trigger: 'change' }]
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 密码强度检测
|
|||
|
|
const checkPasswordStrength = () => {
|
|||
|
|
const pwd = state.ruleForm.password;
|
|||
|
|
let strength = 0;
|
|||
|
|
if (pwd.length >= 6) strength++;
|
|||
|
|
if (/[A-Z]/.test(pwd)) strength++;
|
|||
|
|
if (/[a-z]/.test(pwd)) strength++;
|
|||
|
|
if (/[0-9]/.test(pwd)) strength++;
|
|||
|
|
if (/[^A-Za-z0-9]/.test(pwd)) strength++;
|
|||
|
|
state.passwordStrength = strength;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const passwordStrengthText = computed(() => {
|
|||
|
|
const s = state.passwordStrength;
|
|||
|
|
if (s < 2) return '弱';
|
|||
|
|
if (s < 4) return '中';
|
|||
|
|
return '强';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const passwordStrengthClass = computed(() => {
|
|||
|
|
const s = state.passwordStrength;
|
|||
|
|
if (s < 2) return 'strength-weak';
|
|||
|
|
if (s < 4) return 'strength-medium';
|
|||
|
|
return 'strength-strong';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 打开弹窗
|
|||
|
|
const openDialog = (row?: any) => {
|
|||
|
|
resetForm();
|
|||
|
|
if (row) {
|
|||
|
|
state.ruleForm = {
|
|||
|
|
id: row.id,
|
|||
|
|
tenantName: row.tenantName,
|
|||
|
|
tenantType: row.tenantType,
|
|||
|
|
contactPerson: row.contactPerson,
|
|||
|
|
phone: row.phone,
|
|||
|
|
city: row.city || [],
|
|||
|
|
tenantAccount: row.tenantAccount,
|
|||
|
|
password: '', // 修改时不显示密码
|
|||
|
|
confirmPassword: '',
|
|||
|
|
businessLicense: row.businessLicense,
|
|||
|
|
};
|
|||
|
|
// 获取详情接口（可选）
|
|||
|
|
// getTenant(row.id).then(...)
|
|||
|
|
}
|
|||
|
|
state.isShowDialog = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const closeDialog = () => {
|
|||
|
|
state.isShowDialog = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onCancel = () => {
|
|||
|
|
closeDialog();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
const formWrap = unref(formRef) as any;
|
|||
|
|
if (!formWrap) return;
|
|||
|
|
formWrap.validate((valid: boolean) => {
|
|||
|
|
if (valid) {
|
|||
|
|
if (state.ruleForm.id === 0) {
|
|||
|
|
addTenant(state.ruleForm).then(() => {
|
|||
|
|
ElMessage.success('添加成功');
|
|||
|
|
closeDialog();
|
|||
|
|
emit('getTenantList');
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 过滤掉密码字段，或者后端接口决定是否更新密码
|
|||
|
|
// 根据需求，修改时不能修改密码
|
|||
|
|
const { password, confirmPassword, tenantAccount, ...rest } = state.ruleForm;
|
|||
|
|
editTenant({ ...rest, id: state.ruleForm.id }).then(() => {
|
|||
|
|
ElMessage.success('修改成功');
|
|||
|
|
closeDialog();
|
|||
|
|
emit('getTenantList');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const resetForm = () => {
|
|||
|
|
state.ruleForm = {
|
|||
|
|
id: 0,
|
|||
|
|
tenantName: '',
|
|||
|
|
tenantType: '',
|
|||
|
|
contactPerson: '',
|
|||
|
|
phone: '',
|
|||
|
|
city: [],
|
|||
|
|
tenantAccount: '',
|
|||
|
|
password: '',
|
|||
|
|
confirmPassword: '',
|
|||
|
|
businessLicense: '',
|
|||
|
|
};
|
|||
|
|
state.passwordStrength = 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 模拟上传图片
|
|||
|
|
const handleAvatarSuccess: UploadProps['onChange'] = (uploadFile) => {
|
|||
|
|
state.ruleForm.businessLicense = URL.createObjectURL(uploadFile.raw!);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|||
|
|
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
|
|||
|
|
ElMessage.error('Avatar picture must be JPG/PNG format!');
|
|||
|
|
return false;
|
|||
|
|
} else if (rawFile.size / 1024 / 1024 > 2) {
|
|||
|
|
ElMessage.error('Avatar picture size can not exceed 2MB!');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
openDialog,
|
|||
|
|
closeDialog,
|
|||
|
|
onCancel,
|
|||
|
|
onSubmit,
|
|||
|
|
formRef,
|
|||
|
|
cityOptions,
|
|||
|
|
checkPasswordStrength,
|
|||
|
|
passwordStrengthText,
|
|||
|
|
passwordStrengthClass,
|
|||
|
|
handleAvatarSuccess,
|
|||
|
|
beforeAvatarUpload,
|
|||
|
|
...toRefs(state),
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.system-edit-tenant-container {
|
|||
|
|
.avatar-uploader .avatar {
|
|||
|
|
width: 178px;
|
|||
|
|
height: 178px;
|
|||
|
|
display: block;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
.upload-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
.upload-placeholder {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 178px;
|
|||
|
|
height: 178px;
|
|||
|
|
color: #8c939d;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
|
|||
|
|
.el-icon {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8c939d;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.upload-tip {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #909399;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.avatar-uploader .el-upload {
|
|||
|
|
border: 1px dashed var(--el-border-color);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: var(--el-transition-duration-fast);
|
|||
|
|
}
|
|||
|
|
.avatar-uploader .el-upload:hover {
|
|||
|
|
border-color: var(--el-color-primary);
|
|||
|
|
.upload-placeholder {
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
.upload-text {
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.password-strength {
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
.strength-weak { color: #f56c6c; }
|
|||
|
|
.strength-medium { color: #e6a23c; }
|
|||
|
|
.strength-strong { color: #67c23a; }
|
|||
|
|
}
|
|||
|
|
</style>
|