重构租户管理组件,采用 setup 语法糖并优化代码结构
This commit is contained in:
WUSIJIAN
@@ -58,7 +58,6 @@
|
||||
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ formatTime(row.updatedAt) }}
|
||||
<!-- 修正：应该是updatedAt -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220">
|
||||
|
||||
@@ -102,196 +102,184 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, unref, computed, toRefs } from 'vue';
|
||||
import { ElMessage, UploadProps } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { addTenant, editTenant, getTenant } from '/@/api/system/tenant';
|
||||
import { addTenant, editTenant } 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);
|
||||
// 定义父组件传递的事件
|
||||
const emit = defineEmits(['getTenantList']);
|
||||
|
||||
// 省市数据（使用 element-china-area-data）
|
||||
const cityOptions = pcTextArr;
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
|
||||
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' }]
|
||||
},
|
||||
});
|
||||
// 省市数据（使用 element-china-area-data）
|
||||
const cityOptions = pcTextArr;
|
||||
|
||||
// 密码强度检测
|
||||
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),
|
||||
};
|
||||
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' }]
|
||||
},
|
||||
});
|
||||
|
||||
// 解构 state 以便在模板中使用
|
||||
const { isShowDialog, ruleForm, rules, passwordStrength } = toRefs(state);
|
||||
|
||||
// 密码强度检测
|
||||
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,
|
||||
};
|
||||
}
|
||||
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;
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
<el-table-column prop="tenantName" label="租户名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="tenantType" label="租户类型" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.tenantType === 1">普通类型</el-tag>
|
||||
<el-tag v-else-if="scope.row.tenantType === 2" type="warning">代理类型</el-tag>
|
||||
<el-tag v-if="scope.row.tenantType === 1">普通</el-tag>
|
||||
<el-tag v-else-if="scope.row.tenantType === 2" type="warning">代理</el-tag>
|
||||
<el-tag v-else type="info">未知</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -96,110 +96,99 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
||||
export default {
|
||||
name: 'systemTenant',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
|
||||
import EditTenant from './component/editTenant.vue';
|
||||
import { getTenantList, deleteTenant } from '/@/api/system/tenant';
|
||||
import { pcTextArr } from 'element-china-area-data';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemTenant',
|
||||
components: { EditTenant },
|
||||
setup() {
|
||||
const editTenantRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tenantName: '',
|
||||
tenantType: '',
|
||||
city: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 省市数据
|
||||
const cityOptions = pcTextArr;
|
||||
|
||||
// 初始化表格数据
|
||||
const tenantList = () => {
|
||||
state.tableData.loading = true;
|
||||
getTenantList(state.tableData.param)
|
||||
.then((res: any) => {
|
||||
state.tableData.data = res.data.list ?? [];
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
.catch(() => {
|
||||
// 模拟数据，防止报错影响演示
|
||||
state.tableData.data = [];
|
||||
state.tableData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
state.tableData.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 打开新增弹窗
|
||||
const onOpenAddTenant = () => {
|
||||
editTenantRef.value.openDialog();
|
||||
};
|
||||
|
||||
// 打开修改弹窗
|
||||
const onOpenEditTenant = (row: any) => {
|
||||
editTenantRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除租户：“${row.tenantName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteTenant([row.id]).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
tenantList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
tenantList();
|
||||
};
|
||||
|
||||
// 解析城市名称
|
||||
const getCityName = (cityArr: string[]) => {
|
||||
if (!cityArr || cityArr.length === 0) return '';
|
||||
// 这里简单模拟，实际可以用 cityOptions 递归查找
|
||||
return cityArr.join(' / ');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
tenantList();
|
||||
});
|
||||
|
||||
return {
|
||||
queryRef,
|
||||
editTenantRef,
|
||||
onOpenAddTenant,
|
||||
onOpenEditTenant,
|
||||
onRowDel,
|
||||
tenantList,
|
||||
resetQuery,
|
||||
cityOptions,
|
||||
getCityName,
|
||||
...toRefs(state),
|
||||
};
|
||||
const editTenantRef = ref();
|
||||
const queryRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tenantName: '',
|
||||
tenantType: '',
|
||||
city: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const { tableData } = toRefs(state);
|
||||
|
||||
// 省市数据
|
||||
const cityOptions = pcTextArr;
|
||||
|
||||
// 初始化表格数据
|
||||
const tenantList = () => {
|
||||
state.tableData.loading = true;
|
||||
getTenantList(state.tableData.param)
|
||||
.then((res: any) => {
|
||||
state.tableData.data = res.data.list ?? [];
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
.catch(() => {
|
||||
// 模拟数据，防止报错影响演示
|
||||
state.tableData.data = [];
|
||||
state.tableData.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
state.tableData.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 打开新增弹窗
|
||||
const onOpenAddTenant = () => {
|
||||
editTenantRef.value.openDialog();
|
||||
};
|
||||
|
||||
// 打开修改弹窗
|
||||
const onOpenEditTenant = (row: any) => {
|
||||
editTenantRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 删除
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除租户：“${row.tenantName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteTenant([row.id]).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
tenantList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
tenantList();
|
||||
};
|
||||
|
||||
// 解析城市名称
|
||||
const getCityName = (cityArr: string[]) => {
|
||||
if (!cityArr || cityArr.length === 0) return '';
|
||||
// 这里简单模拟，实际可以用 cityOptions 递归查找
|
||||
return cityArr.join(' / ');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
tenantList();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user