iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

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