iailab-plat-ui-vue3.git

潘志宝

2024-11-04 cfec18ca87063d77398711c2914695e8e7f6b2e6

提交 \| 用户 \| 时间
b1d33f	1	<template>
潘	2	<Dialog v-model="dialogVisible" :title="dialogTitle">
	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="itemNo">
	13	<el-input v-model="formData.itemNo" disabled/>
	14	</el-form-item>
	15	</el-col>
	16	<el-col :span="12">
	17	<el-form-item label="指标名称" prop="itemName">
	18	<el-input v-model="formData.itemName" 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="itemCategory">
2cb862	25	<el-tree-select
潘	26	v-model="formData.itemCategory"
	27	:data="categoryTree"
	28	:default-expanded-keys="[0]"
	29	:props="defaultProps"
	30	check-strictly
	31	node-key="id"
	32	/>
b1d33f	33	</el-form-item>
潘	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="时间粒度" prop="timeGranularity">
	37	<el-select v-model="formData.timeGranularity" placeholder="请选择">
	38	<el-option
	39	v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
	40	:key="dict.value"
	41	:label="dict.label"
	42	:value="dict.value"
	43	/>
	44	</el-select>
	45	</el-form-item>
	46	</el-col>
	47	</el-row>
	48	<el-row>
2cb862	49	<el-col :span="12">
b1d33f	50	<el-form-item label="数据集" prop="dataSet">
cfec18	51	<el-select v-model="formData.dataSet" clearable placeholder="请选择数据集"
潘	52	@change="handleDataSetChange($event)">
b1d33f	53	<el-option
潘	54	v-for="item in dataSetList"
	55	:key="item.id"
	56	:label="item.name"
	57	:value="item.id + ''"
	58	/>
	59	</el-select>
	60	</el-form-item>
	61	</el-col>
	62	</el-row>
	63	<el-form-item label="备注" prop="remark">
	64	<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
	65	show-word-limit/>
	66	</el-form-item>
	67	</el-form>
	68	<template #footer>
	69	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	70	<el-button @click="dialogVisible = false">取消</el-button>
	71	</template>
	72	</Dialog>
	73	</template>
	74	<script lang="ts" setup>
	75	import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
	76	import * as ItemApi from '@/api/data/plan/item'
cfec18	77	import {CommonStatusEnum} from '@/utils/constants'
b1d33f	78	import * as DataSetApi from "@/api/data/plan/data";
潘	79	import * as CategoryApi from "@/api/data/plan/category";
2cb862	80	import {defaultProps} from "@/api/data/plan/category";
潘	81	import {handleTree} from "@/utils/tree";
b1d33f	82
cfec18	83	defineOptions({name: 'PlanItemForm'})
b1d33f	84
cfec18	85	const {t} = useI18n() // 国际化
b1d33f	86	const message = useMessage() // 消息弹窗
潘	87
	88	const dialogVisible = ref(false) // 弹窗的是否展示
	89	const dialogTitle = ref('') // 弹窗的标题
	90	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	91	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	92	const formData = ref({
	93	id: undefined,
	94	itemNo: '',
	95	itemName: '',
	96	itemCategory: '',
	97	timeGranularity: '',
	98	dataSet: '',
	99	remark: '',
	100	status: undefined,
	101	})
	102	const formRules = reactive({
cfec18	103	itemName: [{required: true, message: '名称不能为空', trigger: 'blur'}],
潘	104	itemCategory: [{required: true, message: '分类不能为空', trigger: 'blur'}],
	105	dataSet: [{required: true, message: '数据集不能为空', trigger: 'change'}]
b1d33f	106	})
潘	107	const formRef = ref() // 表单 Ref
	108	const dataSetList = ref([] as DataSetApi.DataSetVO[])
2cb862	109
潘	110	const categoryTree = ref<Tree[]>([])
	111	const getCategoryTree = async () => {
	112	categoryTree.value = []
	113	const res = await CategoryApi.getCategoryListAllSimple()
cfec18	114	let category: Tree = {id: 0, label: '主类目', children: []}
2cb862	115	category.children = handleTree(res, 'id', 'pid')
潘	116	categoryTree.value.push(category)
	117	}
b1d33f	118
潘	119	/** 打开弹窗 */
	120	const open = async (type: string, id?: number) => {
	121	dialogVisible.value = true
	122	dialogTitle.value = t('action.' + type)
	123	formType.value = type
	124	resetForm()
	125	// 加载数据源列表
	126	dataSetList.value = await DataSetApi.getDataSetList()
2cb862	127	// 加载类别
潘	128	await getCategoryTree()
b1d33f	129	// 修改时，设置数据
潘	130	if (id) {
	131	formLoading.value = true
	132	try {
	133	formData.value = await ItemApi.getItem(id)
	134	} finally {
	135	formLoading.value = false
	136	}
	137	}
	138	}
cfec18	139	defineExpose({open}) // 提供 open 方法，用于打开弹窗
b1d33f	140
潘	141	/** 提交表单 */
	142	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	143	const submitForm = async () => {
	144	// 校验表单
	145	if (!formRef) return
	146	const valid = await formRef.value.validate()
	147	if (!valid) return
	148	// 提交请求
	149	formLoading.value = true
	150	try {
	151	const data = formData.value as ItemApi.ItemVO
	152	if (formType.value === 'create') {
	153	await ItemApi.createItem(data)
	154	message.success(t('common.createSuccess'))
	155	} else {
	156	await ItemApi.updateItem(data)
	157	message.success(t('common.updateSuccess'))
	158	}
	159	dialogVisible.value = false
	160	// 发送操作成功的事件
	161	emit('success')
	162	} finally {
	163	formLoading.value = false
	164	}
	165	}
	166
	167	/** 重置表单 */
	168	const resetForm = () => {
	169	formData.value = {
	170	id: undefined,
	171	name: '',
	172	dataSource: '',
	173	querySql: '',
	174	remark: ''
	175	}
	176	formRef.value?.resetFields()
	177	}
	178	</script>