iailab-plat-ui-vue3.git

houzhongjian

6 天以前 9259c2235e31708f954a3578bde3c6a7ab9753e8

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