iailab-plat-ui-vue3.git

Merge remote-tracking branch 'origin/master'

liriming

2025-03-03 8bb7160c9c4fd7ce5893ee673647b13cc35410ae

提交 \| 用户 \| 时间
c62768	1	<template>
J	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="55%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules" label-width="100px">
	8	<el-row>
	9	<el-col :span="12">
	10	<el-form-item label="指标编码" prop="itemNo">
	11	<el-input v-model="formData.itemNo" disabled/>
	12	</el-form-item>
	13	</el-col>
	14	<el-col :span="12">
	15	<el-form-item label="指标名称" prop="itemName">
	16	<el-input v-model="formData.itemName" placeholder="请输入指标名称"/>
	17	</el-form-item>
	18	</el-col>
	19	</el-row>
	20	<el-row>
	21	<el-col :span="12">
	22	<el-form-item label="指标分类" prop="itemCategory">
6a72da	23	<el-tree-select
J	24	v-model="formData.itemCategory"
	25	:data="dataCategoryList"
	26	:default-expanded-keys="[0]"
	27	:props="defaultProps"
	28	check-strictly
	29	node-key="id"
	30	/>
c62768	31	</el-form-item>
J	32	</el-col>
	33	<el-col :span="12">
	34	<el-form-item label="时间粒度" prop="timeGranularity">
d5bb0c	35	<el-select v-model="formData.timeGranularity" clearable placeholder="请选择">
c62768	36	<el-option
J	37	v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
	38	:key="dict.value"
	39	:label="dict.label"
	40	:value="dict.value"
	41	/>
	42	</el-select>
	43	</el-form-item>
	44	</el-col>
	45	</el-row>
	46	<el-row>
d3ee81	47	<el-col :span="6">
c62768	48	<el-form-item label="指标精度" prop="precision">
J	49	<el-input v-model="formData.precision"/>
	50	</el-form-item>
	51	</el-col>
d3ee81	52	<el-col :span="6">
c62768	53	<el-form-item label="转换系数" prop="coefficient">
J	54	<el-input v-model="formData.coefficient"/>
	55	</el-form-item>
	56	</el-col>
d3ee81	57	<el-col :span="6">
c62768	58	<el-form-item label="数量单位" prop="unit">
J	59	<el-input v-model="formData.unit"/>
	60	</el-form-item>
	61	</el-col>
331bbb	62	<el-col :span="6">
J	63	<el-form-item label="固化标识" prop="solidifyFlag">
	64	<el-select v-model="formData.solidifyFlag"
	65	clearable
	66	filterable
	67	allow-create
	68	placeholder="请选择">
	69	<el-option
	70	v-for="dict in getStrDictOptions(DICT_TYPE.SOLIDIFY_FLAG)"
	71	:key="dict.value"
	72	:label="dict.label"
	73	:value="dict.value"
	74	/>
	75	</el-select>
	76	</el-form-item>
	77	</el-col>
c62768	78	</el-row>
J	79	<el-row>
683738	80	<el-col :span="12">
c62768	81	<el-form-item label="数据集" prop="atomItem.dataSet">
6a72da	82	<el-select v-model="formData.atomItem.dataSet" filterable
J	83	allow-create clearable placeholder="请选择数据集" @change="handleDataSetChange($event)">
c62768	84	<el-option
J	85	v-for="item in dataSetList"
	86	:key="item.id"
	87	:label="item.name"
	88	:value="item.id + ''"
	89	/>
	90	</el-select>
	91	</el-form-item>
	92	</el-col>
d3ee81	93	<el-col :span="6">
c62768	94	<el-form-item label="使用字段" prop="atomItem.usingField">
6a72da	95	<el-select v-model="formData.atomItem.usingField" filterable
J	96	allow-create clearable placeholder="请选择字段">
c62768	97	<el-option
J	98	v-for="item in dataSetFieldList"
	99	:key="item.id"
	100	:label="item.fieldCode"
fb7d46	101	:value="item.fieldCode"
c62768	102	/>
J	103	</el-select>
	104	</el-form-item>
	105	</el-col>
d3ee81	106	<el-col :span="6">
1f3755	107	<el-form-item label="统计方式" prop="atomItem.statFunc">
67e80d	108	<el-select v-model="formData.atomItem.statFunc" clearable placeholder="请选择">
c62768	109	<el-option
d3ee81	110	v-for="dict in getStrDictOptions(DICT_TYPE.DATA_STAT_FUNC)"
c62768	111	:key="dict.value"
J	112	:label="dict.label"
	113	:value="dict.value"
	114	/>
	115	</el-select>
d3ee81	116	</el-form-item>
潘	117	</el-col>
	118	</el-row>
	119	<el-row>
	120	<el-col :span="24">
	121	<el-form-item label="备注" prop="remark">
	122	<el-input v-model="formData.remark" type="textarea" maxlength="100"/>
c62768	123	</el-form-item>
J	124	</el-col>
	125	</el-row>
	126	</el-form>
	127	<template #footer>
	128	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	129	<el-button @click="dialogVisible = false">取消</el-button>
	130	</template>
	131	</Dialog>
	132	</template>
	133	<script lang="ts" setup>
	134	import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
	135	import * as ItemApi from '@/api/data/ind/item/item'
	136	import * as DataSetApi from '@/api/data/ind/data/data.set'
	137	import * as DataSetFieldApi from '@/api/data/ind/data/data.field'
	138	import * as CategoryApi from '@/api/data/ind/category/index'
6a72da	139	import {handleTree} from "@/utils/tree";
c62768	140
J	141	defineOptions({name: 'IndDataSetForm'})
	142
	143	const {t} = useI18n() // 国际化
	144	const message = useMessage() // 消息弹窗
	145
	146	const dialogVisible = ref(false) // 弹窗的是否展示
	147	const dialogTitle = ref('') // 弹窗的标题
	148	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	149	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	150	let formData = ref({
	151	id: undefined,
	152	itemNo: '',
	153	itemName: '',
	154	itemType: '',
	155	itemCategory: '',
d3ee81	156	coefficient: 1,
潘	157	precision: 0,
c62768	158	businessType: '',
J	159	timeRange: '',
	160	timeGranularity: '',
	161	remark: '',
331bbb	162	solidifyFlag: '',
c62768	163	atomItem:{
J	164	dataSource:'',
	165	dataSet: '',
	166	usingField: '',
	167	statFunc: ''
	168	}
	169	})
	170	const validateAsNumber = (rule, value, callback) => {
	171	const regex = /^(\-\|\+)?\d+(\.\d+)?$/;
	172	if (!regex.test(value)) {
	173	callback(new Error('请输入数字！'));
	174	}
	175	}
	176	const formRules = reactive({
	177	itemName: [{required: true, message: '指标名称不能为空', trigger: 'blur'}],
	178	itemCategory: [{required: true, message: '指标分类不能为空', trigger: 'blur'}],
1f3755	179	"atomItem.usingField": [{required: true, message: '使用字段不能为空', trigger: 'blur'}],
15335f	180	// "atomItem.statFunc": [{required: true, message: '统计方式不能为空', trigger: 'blur'}],
c62768	181	})
J	182	const formRef = ref() // 表单 Ref
	183	const dataSetList = ref([] as DataSetApi.DataSetVO[])
	184	const dataSetFieldList = ref([] as DataSetFieldApi.DataSetFieldVO[])
6a72da	185
J	186	const dataCategoryList = ref<Tree[]>([])
	187
	188	const getCategoryTree = async () => {
	189	dataCategoryList.value = []
	190	const res = await CategoryApi.getCategoryListAllSimple()
	191	let category: Tree = {id: 0, label: '主类目', children: []}
	192	category.children = handleTree(res, 'id', 'pid')
	193	dataCategoryList.value.push(category)
	194	}
c62768	195	/** 打开弹窗 */
J	196	const open = async (type: string, id?: string) => {
	197	dialogVisible.value = true
	198	dialogTitle.value = '原子指标'
	199	formType.value = type
	200	resetForm()
	201	// 加载数据源列表
	202	dataSetList.value = await DataSetApi.getDataSetList()
6a72da	203	await getCategoryTree()
c62768	204	// 修改时，设置数据
J	205	if (id) {
	206	formLoading.value = true
	207	try {
	208	formData.value = await ItemApi.getItem(id)
	209	if(formData.value.atomItem.dataSet !== null){
	210	const queryParams = reactive({
	211	dataSetId: formData.value.atomItem.dataSet,
	212	})
	213	dataSetFieldList.value = (await DataSetFieldApi.getDataSetFieldPage(queryParams)).list
	214	}
	215	} finally {
	216	formLoading.value = false
	217	}
	218	}
	219
	220	}
	221	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	222
	223	/** 提交表单 */
	224	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	225	const submitForm = async () => {
d3ee81	226	debugger
c62768	227	// 校验表单
J	228	if (!formRef) return
	229	const valid = await formRef.value.validate()
	230	if (!valid) return
	231	// 提交请求
	232	formLoading.value = true
	233	try {
	234	formData.value.itemType = 'ATOM'
	235	for (let index in dataSetList.value){
	236	if(formData.value.atomItem.dataSet === dataSetList.value[index].id){
	237	formData.value.atomItem.dataSource = dataSetList.value[index].dataSource
	238	}
	239	}
	240	const data = formData.value as ItemApi.ItemVO
	241	if (formType.value === 'create') {
	242	await ItemApi.createItem(data)
	243	message.success(t('common.createSuccess'))
	244	} else {
	245	await ItemApi.updateItem(data)
	246	message.success(t('common.updateSuccess'))
	247	}
	248	dialogVisible.value = false
	249	// 发送操作成功的事件
	250	emit('success')
	251	} finally {
	252	formLoading.value = false
	253	}
	254	}
	255
	256	/** 重置表单 */
	257	const resetForm = () => {
	258	formData.value = {
	259	id: '',
	260	itemNo: '',
	261	itemName: '',
	262	itemType: '',
	263	itemCategory: '',
d3ee81	264	coefficient: 1,
潘	265	precision: 0,
c62768	266	businessType: '',
J	267	timeRange: '',
	268	timeGranularity: '',
	269	remark: '',
	270	atomItem:{
	271	dataSource:'',
	272	dataSet: '',
	273	usingField: '',
	274	statFunc: ''
	275	}
	276	}
	277	dataSetFieldList.value = []
	278	formRef.value?.resetFields()
	279	}
	280
	281	async function handleDataSetChange(event) {
	282	if (event !== null && event !== undefined) {
	283	const queryParams = reactive({
	284	dataSetId: event,
	285	})
	286	dataSetFieldList.value = (await DataSetFieldApi.getDataSetFieldPage(queryParams)).list
	287	}
	288	}
	289
	290	</script>