iailab-plat-ui-vue3.git

潘志宝

2024-09-25 6e7f226b03fb059971b76d875671e2b662f29f1f

提交 \| 用户 \| 时间
db5c54	1	<template>
潘	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	>
b1e092	10	<el-col :span="12">
H	11	<el-form-item label="应用类型">
	12	<el-select v-model="formData.type" placeholder="请选择">
	13	<el-option
	14	v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_APP_TYPE)"
	15	:key="dict.value"
	16	:label="dict.label"
	17	:value="dict.value"
	18	/>
	19	</el-select>
	20	</el-form-item>
	21	</el-col>
	22	<el-row>
	23	<el-col :span="12">
	24	<el-form-item label="选择租户" prop="tenantId">
	25	<el-select v-model="formData.tenantId" clearable placeholder="请选择租户">
	26	<el-option
	27	v-for="item in tenantList"
	28	:key="item.id"
	29	:label="item.name"
	30	:value="item.id"
	31	/>
	32	</el-select>
	33	</el-form-item>
	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="应用分组" prop="groupId">
	37	<el-select v-model="formData.groupId" clearable placeholder="请选择分组">
	38	<el-option
	39	v-for="item in groupList"
	40	:key="item.id"
	41	:label="item.name"
	42	:value="item.id"
	43	/>
	44	</el-select>
	45	</el-form-item>
	46	</el-col>
	47	</el-row>
db5c54	48	<el-row>
潘	49	<el-col :span="12">
	50	<el-form-item label="应用编号" prop="appCode">
	51	<el-input v-model="formData.appCode" placeholder="请输入应用编号" />
	52	</el-form-item>
	53	</el-col>
	54	<el-col :span="12">
	55	<el-form-item label="应用名称" prop="appName">
	56	<el-input v-model="formData.appName" placeholder="请输入应用名称" />
	57	</el-form-item>
	58	</el-col>
	59	</el-row>
	60	<el-row>
	61	<el-col :span="12">
	62	<el-form-item label="应用域名" prop="appDomain">
	63	<el-input v-model="formData.appDomain" placeholder="请输入应用域名" />
	64	</el-form-item>
	65	</el-col>
	66	<el-col :span="12">
	67	<el-form-item label="接口域名" prop="apiDomain">
	68	<el-input v-model="formData.apiDomain" placeholder="请输入接口域名" />
	69	</el-form-item>
	70	</el-col>
	71	</el-row>
	72	<el-row>
	73	<el-col :span="12">
	74	<el-form-item label="应用账号" prop="appKey">
	75	<el-input v-model="formData.appKey" placeholder="请输入应用账号" />
	76	</el-form-item>
	77	</el-col>
	78	<el-col :span="12">
	79	<el-form-item label="应用密码" prop="appSecret">
	80	<el-input v-model="formData.appSecret" placeholder="请输入应用密码" />
	81	</el-form-item>
	82	</el-col>
	83	</el-row>
	84	<el-row>
b1e092	85	<el-col :span="24">
H	86	<el-form-item label="应用图标" prop="icon">
	87	<UploadImg v-model="formData.icon" :limit="1" />
db5c54	88	</el-form-item>
潘	89	</el-col>
	90	</el-row>
	91	<el-row>
	92	<el-col :span="12">
	93	<el-form-item label="排序" prop="orderNum">
b1e092	94	<el-input-number v-model="formData.orderNum" placeholder="请输入排序" />
db5c54	95	</el-form-item>
潘	96	</el-col>
	97	<el-col :span="12">
	98	<el-form-item label="状态" prop="status">
	99	<el-radio-group v-model="formData.status">
	100	<el-radio
	101	v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
	102	:key="dict.value"
	103	:label="dict.value"
	104	>
	105	{{ dict.label }}
	106	</el-radio>
	107	</el-radio-group>
	108	</el-form-item>
	109	</el-col>
	110	</el-row>
	111	<el-row>
	112	<el-col :span="24">
	113	<el-form-item label="备注" prop="remark">
	114	<el-input v-model="formData.remark" clearable type="textarea" />
	115	</el-form-item>
	116	</el-col>
	117	</el-row>
	118	</el-form>
	119	<template #footer>
	120	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	121	<el-button @click="dialogVisible = false">取消</el-button>
	122	</template>
	123	</Dialog>
	124	</template>
	125	<script lang="ts" setup>
	126	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	127	import * as AppApi from '@/api/system/app'
	128	import { CommonStatusEnum } from '@/utils/constants'
b1e092	129	import * as TenantApi from "@/api/system/tenant";
H	130	import * as AppGroupApi from "@/api/system/appgroup";
db5c54	131
潘	132	defineOptions({ name: 'SystemAppForm' })
	133
	134	const { t } = useI18n() // 国际化
	135	const message = useMessage() // 消息弹窗
	136	const dialogVisible = ref(false) // 弹窗的是否展示
	137	const dialogTitle = ref('') // 弹窗的标题
	138	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	139	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	140	const formData = ref({
	141	id: undefined,
	142	appCode: undefined,
	143	appName: undefined,
b1e092	144	type: undefined,
db5c54	145	appDomain: undefined,
潘	146	apiDomain: undefined,
	147	appKey: undefined,
	148	appSecret: undefined,
b1e092	149	groupId: undefined,
db5c54	150	loadType: undefined,
潘	151	icon: undefined,
	152	orderNum: undefined,
	153	status: CommonStatusEnum.ENABLE,
	154	devId: undefined,
	155	devName: undefined,
b1e092	156	remark: undefined,
H	157	tenantId: undefined
db5c54	158	})
潘	159	const formRules = reactive({
	160	appCode: [{ required: true, message: '应用编号不能为空', trigger: 'blur' }],
	161	appName: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
	162	appKey: [{ required: true, message: '应用账号不能为空', trigger: 'blur' }],
	163	appSecret: [{ required: true, message: '应用密码不能为空', trigger: 'blur' }]
	164	})
	165	const formRef = ref() // 表单 Ref
b1e092	166	const tenantList = ref([] as TenantApi.TenantVO[]) // 租户列表
H	167	const groupList = ref([] as AppGroupApi.AppGroupVO[]) // 分组列表
db5c54	168	/** 打开弹窗 */
潘	169	const open = async (type: string, id?: number) => {
	170	dialogVisible.value = true
	171	dialogTitle.value = t('action.' + type)
	172	formType.value = type
	173	resetForm()
	174	// 修改时，设置数据
	175	if (id) {
	176	formLoading.value = true
	177	try {
	178	formData.value = await AppApi.getApp(id)
	179	} finally {
	180	formLoading.value = false
	181	}
	182	}
b1e092	183	tenantList.value = await TenantApi.getSimpleTenant()
H	184	groupList.value = await AppGroupApi.getAppGroupList()
db5c54	185	}
潘	186	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	187
	188	/** 提交表单 */
	189	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	190	const submitForm = async () => {
	191	// 校验表单
	192	if (!formRef) return
	193	const valid = await formRef.value.validate()
	194	if (!valid) return
	195	// 提交请求
	196	formLoading.value = true
	197	try {
	198	const data = formData.value as unknown as AppApi.AppVO
	199	if (formType.value === 'create') {
	200	await AppApi.createApp(data)
	201	message.success(t('common.createSuccess'))
	202	} else {
	203	await AppApi.updateApp(data)
	204	message.success(t('common.updateSuccess'))
	205	}
	206	dialogVisible.value = false
	207	// 发送操作成功的事件
	208	emit('success')
	209	} finally {
	210	formLoading.value = false
	211	}
	212	}
	213
	214	/** 重置表单 */
	215	const resetForm = () => {
	216	formData.value = {
	217	id: undefined,
b1e092	218	appCode: undefined,
H	219	appName: undefined,
	220	appDomain: undefined,
	221	apiDomain: undefined,
	222	appKey: undefined,
	223	appSecret: undefined,
	224	groupId: undefined,
	225	loadType: undefined,
	226	icon: undefined,
	227	orderNum: undefined,
db5c54	228	status: CommonStatusEnum.ENABLE,
b1e092	229	devId: undefined,
H	230	devName: undefined,
	231	remark: undefined,
	232	tenantId: undefined
db5c54	233	}
潘	234	formRef.value?.resetFields()
	235	}
	236	</script>