shasteel-ui.git

houzhongjian

2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015

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