iailab-plat-ui-vue3.git

潘志宝

2024-09-25 6e7f226b03fb059971b76d875671e2b662f29f1f

提交 \| 用户 \| 时间
820397	1	<template>
H	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="80px"
	9	>
	10	<el-form-item label="租户名" prop="name">
	11	<el-input v-model="formData.name" placeholder="请输入租户名" />
	12	</el-form-item>
	13	<el-form-item label="租户套餐" prop="packageId">
	14	<el-select v-model="formData.packageId" clearable placeholder="请选择租户套餐">
	15	<el-option
	16	v-for="item in packageList"
	17	:key="item.id"
	18	:label="item.name"
	19	:value="item.id"
	20	/>
	21	</el-select>
	22	</el-form-item>
	23	<el-form-item label="联系人" prop="contactName">
	24	<el-input v-model="formData.contactName" placeholder="请输入联系人" />
	25	</el-form-item>
	26	<el-form-item label="联系手机" prop="contactMobile">
	27	<el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
	28	</el-form-item>
	29	<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
	30	<el-input v-model="formData.username" placeholder="请输入用户名称" />
	31	</el-form-item>
	32	<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
	33	<el-input
	34	v-model="formData.password"
	35	placeholder="请输入用户密码"
	36	show-password
	37	type="password"
	38	/>
	39	</el-form-item>
	40	<el-form-item label="账号额度" prop="accountCount">
	41	<el-input-number
	42	v-model="formData.accountCount"
	43	:min="0"
	44	controls-position="right"
	45	placeholder="请输入账号额度"
	46	/>
	47	</el-form-item>
	48	<el-form-item label="过期时间" prop="expireTime">
	49	<el-date-picker
	50	v-model="formData.expireTime"
	51	clearable
	52	placeholder="请选择过期时间"
	53	type="date"
	54	value-format="x"
	55	/>
	56	</el-form-item>
	57	<el-form-item label="绑定域名" prop="website">
	58	<el-input v-model="formData.website" placeholder="请输入绑定域名" />
	59	</el-form-item>
82f682	60	<el-form-item label="数据源" prop="dataSourceConfigId">
潘	61	<el-select v-model="formData.dataSourceConfigId" clearable placeholder="请选择数据源">
	62	<el-option
	63	v-for="item in dataSourceList"
	64	:key="item.id"
	65	:label="item.name"
	66	:value="item.id"
	67	/>
	68	</el-select>
	69	</el-form-item>
820397	70	<el-form-item label="租户状态" prop="status">
H	71	<el-radio-group v-model="formData.status">
	72	<el-radio
	73	v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
	74	:key="dict.value"
	75	:label="dict.value"
	76	>
	77	{{ dict.label }}
	78	</el-radio>
	79	</el-radio-group>
	80	</el-form-item>
	81	</el-form>
	82	<template #footer>
	83	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	84	<el-button @click="dialogVisible = false">取消</el-button>
	85	</template>
	86	</Dialog>
	87	</template>
	88	<script lang="ts" setup>
	89	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	90	import * as TenantApi from '@/api/system/tenant'
	91	import { CommonStatusEnum } from '@/utils/constants'
	92	import * as TenantPackageApi from '@/api/system/tenantPackage'
82f682	93	import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";
820397	94
H	95	defineOptions({ name: 'SystemTenantForm' })
	96
	97	const { t } = useI18n() // 国际化
	98	const message = useMessage() // 消息弹窗
	99	const dialogVisible = ref(false) // 弹窗的是否展示
	100	const dialogTitle = ref('') // 弹窗的标题
	101	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	102	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	103	const formData = ref({
	104	id: undefined,
	105	name: undefined,
	106	packageId: undefined,
	107	contactName: undefined,
	108	contactMobile: undefined,
	109	accountCount: undefined,
	110	expireTime: undefined,
	111	website: undefined,
	112	status: CommonStatusEnum.ENABLE,
82f682	113	dataSourceConfigId: undefined,
820397	114	// 新增专属
H	115	username: undefined,
	116	password: undefined
	117	})
	118	const formRules = reactive({
	119	name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
	120	packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
	121	contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
	122	status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
	123	accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
	124	expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
	125	website: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }],
	126	username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
	127	password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
	128	})
	129	const formRef = ref() // 表单 Ref
	130	const packageList = ref([] as TenantPackageApi.TenantPackageVO[]) // 租户套餐
82f682	131	const dataSourceList = ref([] as DataSourceConfigApi.DataSourceConfigVO[])
820397	132
H	133	/** 打开弹窗 */
	134	const open = async (type: string, id?: number) => {
	135	dialogVisible.value = true
	136	dialogTitle.value = t('action.' + type)
	137	formType.value = type
	138	resetForm()
	139	// 修改时，设置数据
	140	if (id) {
	141	formLoading.value = true
	142	try {
	143	formData.value = await TenantApi.getTenant(id)
	144	} finally {
	145	formLoading.value = false
	146	}
	147	}
	148	// 加载套餐列表
	149	packageList.value = await TenantPackageApi.getTenantPackageList()
82f682	150
潘	151	// 加载数据源列表
	152	dataSourceList.value = await DataSourceConfigApi.getDataSourceConfigList()
820397	153	}
H	154	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	155
	156	/** 提交表单 */
	157	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	158	const submitForm = async () => {
	159	// 校验表单
	160	if (!formRef) return
	161	const valid = await formRef.value.validate()
	162	if (!valid) return
	163	// 提交请求
	164	formLoading.value = true
	165	try {
	166	const data = formData.value as unknown as TenantApi.TenantVO
	167	if (formType.value === 'create') {
	168	await TenantApi.createTenant(data)
	169	message.success(t('common.createSuccess'))
	170	} else {
	171	await TenantApi.updateTenant(data)
	172	message.success(t('common.updateSuccess'))
	173	}
	174	dialogVisible.value = false
	175	// 发送操作成功的事件
	176	emit('success')
	177	} finally {
	178	formLoading.value = false
	179	}
	180	}
	181
	182	/** 重置表单 */
	183	const resetForm = () => {
	184	formData.value = {
	185	id: undefined,
	186	name: undefined,
	187	packageId: undefined,
	188	contactName: undefined,
	189	contactMobile: undefined,
	190	accountCount: undefined,
	191	expireTime: undefined,
	192	website: undefined,
	193	status: CommonStatusEnum.ENABLE,
	194	username: undefined,
	195	password: undefined
	196	}
	197	formRef.value?.resetFields()
	198	}
	199	</script>