iailab-plat-ui-vue3.git

Jay

2025-02-19 331bbbc6604426763876ef55403b6f60cc22bf04

提交 \| 用户 \| 时间
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">
683738	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"/>
	17	</el-form-item>
	18	</el-col>
	19	</el-row>
	20	<el-row>
	21	<el-col :span="12">
6f74c2	22	<el-form-item label="原子指标" prop="atomItem.itemId">
6a72da	23	<el-select v-model="formData.atomItem.itemId" filterable
J	24	allow-create clearable placeholder="请选择原子指标"
c62768	25	@change="handleChange($event)">
J	26	<el-option
	27	v-for="item in atomItemList"
	28	:key="item.id"
	29	:label="item.itemNo"
6f74c2	30	:value="item.id + ''"
c62768	31	/>
J	32	</el-select>
	33	</el-form-item>
	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="原子指标名称" prop="atomItem.itemName">
	37	<el-input v-model="formData.atomItem.itemName" disabled/>
	38	</el-form-item>
	39	</el-col>
	40	</el-row>
	41	<el-row>
	42	<el-col :span="12">
	43	<el-form-item label="指标分类" prop="itemCategory">
6a72da	44	<el-tree-select
J	45	v-model="formData.itemCategory"
	46	:data="dataCategoryList"
	47	:default-expanded-keys="[0]"
	48	:props="defaultProps"
	49	check-strictly
	50	node-key="id"
	51	/>
c62768	52	</el-form-item>
J	53	</el-col>
	54	<el-col :span="12">
	55	<el-form-item label="时间粒度" prop="timeGranularity">
	56	<el-select v-model="formData.timeGranularity" placeholder="请选择">
	57	<el-option
	58	v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
	59	:key="dict.value"
	60	:label="dict.label"
	61	:value="dict.value"
	62	/>
	63	</el-select>
	64	</el-form-item>
	65	</el-col>
	66	</el-row>
	67	<el-row>
d3ee81	68	<el-col :span="6">
c62768	69	<el-form-item label="指标精度" prop="precision">
J	70	<el-input v-model="formData.precision"/>
	71	</el-form-item>
	72	</el-col>
d3ee81	73	<el-col :span="6">
c62768	74	<el-form-item label="转换系数" prop="coefficient">
J	75	<el-input v-model="formData.coefficient"/>
	76	</el-form-item>
	77	</el-col>
	78	<el-col :span="6">
	79	<el-form-item label="数量单位" prop="unit">
	80	<el-input v-model="formData.unit"/>
	81	</el-form-item>
	82	</el-col>
331bbb	83	<el-col :span="6">
J	84	<el-form-item label="固化标识" prop="solidifyFlag">
	85	<el-select v-model="formData.solidifyFlag"
	86	clearable
	87	filterable
	88	allow-create
	89	placeholder="请选择">
	90	<el-option
	91	v-for="dict in getStrDictOptions(DICT_TYPE.SOLIDIFY_FLAG)"
	92	:key="dict.value"
	93	:label="dict.label"
	94	:value="dict.value"
	95	/>
	96	</el-select>
	97	</el-form-item>
	98	</el-col>
c62768	99	</el-row>
J	100	<el-row>
d3ee81	101	<el-col :span="6">
c62768	102	<el-form-item label="时间标识" prop="timeLabel">
71db7a	103	<el-select v-model="formData.derItem.timeLabel" allow-create filterable clearable placeholder="请选择时间标识">
c62768	104	<el-option
J	105	v-for="item in dataSetFieldList"
	106	:key="item.id"
	107	:label="item.fieldCode"
fb7d46	108	:value="item.fieldCode"
c62768	109	/>
J	110	</el-select>
	111	</el-form-item>
	112	</el-col>
d3ee81	113	<el-col :span="6">
c62768	114	<el-form-item label="时间限定" prop="timeLimit">
6497f9	115	<el-select v-model="formData.derItem.timeLimit" placeholder="请选择"
c62768	116	@change="handleTimeLimitChange($event)">
J	117	<el-option
d3ee81	118	v-for="dict in getStrDictOptions(DICT_TYPE.IND_TIME_LIMIT)"
c62768	119	:key="dict.value"
J	120	:label="dict.label"
	121	:value="dict.value"
	122	/>
	123	</el-select>
	124	</el-form-item>
	125	</el-col>
	126	</el-row>
	127	<el-row v-if="showTimeChange">
d3ee81	128	<el-col :span="6">
c62768	129	<el-form-item label="开始时间" prop="timeStart">
J	130	<el-date-picker
	131	v-model="formData.derItem.timeStart"
	132	type="datetime"
	133	placeholder="请选择开始时间"
	134	/>
	135	</el-form-item>
	136	</el-col>
d3ee81	137	<el-col :span="6">
c62768	138	<el-form-item label="结束时间" prop="timeEnd">
J	139	<el-date-picker
	140	v-model="formData.derItem.timeEnd"
	141	type="datetime"
	142	placeholder="请选择结束时间"
	143	/>
	144	</el-form-item>
	145	</el-col>
	146	</el-row>
	147	<el-row>
d3ee81	148	<el-col :span="24">
c62768	149	<el-form-item label="分析维度" prop="dimension">
6a72da	150	<el-select v-model="formData.derItem.dimension" filterable
J	151	allow-create clearable placeholder="请选择分析维度" multiple>
c62768	152	<el-option
J	153	v-for="item in dataSetFieldList"
	154	:key="item.id"
	155	:label="item.fieldCode"
fb7d46	156	:value="item.fieldCode"
c62768	157	/>
J	158	</el-select>
d3ee81	159	</el-form-item>
潘	160	</el-col>
	161	</el-row>
	162	<el-row>
	163	<el-col :span="24">
	164	<el-form-item label="备注" prop="remark">
	165	<el-input v-model="formData.remark" type="textarea" maxlength="100"/>
c62768	166	</el-form-item>
J	167	</el-col>
	168	</el-row>
	169	</el-form>
	170	<template #footer>
	171	<el-button :="formLoading" type="primary" @click="submitForm">确定</el-button>
	172	<el-button @click="dialogVisible = false">取消</el-button>
	173	</template>
	174	</Dialog>
	175	</template>
	176	<script lang="ts" setup>
	177	import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
	178	import * as DataSetApi from '@/api/data/ind/data/data.set'
	179	import * as ItemApi from '@/api/data/ind/item/item'
	180	import {CommonStatusEnum} from '@/utils/constants'
	181	import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";
	182	import {PageParam} from "@/api/data/ind/item/item";
	183	import * as CategoryApi from "@/api/data/ind/category";
	184	import * as DataSetFieldApi from "@/api/data/ind/data/data.field";
6a72da	185	import {handleTree} from "@/utils/tree";
c62768	186
J	187	defineOptions({name: 'IndDataSetForm'})
	188
	189	const {t} = useI18n() // 国际化
	190	const message = useMessage() // 消息弹窗
	191
	192	const dialogVisible = ref(false) // 弹窗的是否展示
	193	const dialogTitle = ref('') // 弹窗的标题
	194	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	195	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	196	let formData = ref({
	197	id: undefined,
	198	itemNo: '',
	199	itemName: '',
	200	itemType: '',
	201	itemCategory: '',
d3ee81	202	coefficient: 1,
潘	203	precision: 0,
c62768	204	businessType: '',
J	205	timeRange: '',
	206	timeGranularity: '',
	207	atomItem: {
	208	id: '',
6f74c2	209	itemId: '',
c62768	210	itemNo: '',
J	211	itemName: '',
	212	},
	213	derItem: {
	214	atomItemId: '',
	215	timeLabel: '',
	216	timeLimit: '',
	217	timeStart: '',
	218	timeEnd: '',
	219	dimension: ''
	220	}
	221	})
	222
	223	const validateAsNumber = (rule, value, callback) => {
	224	const regex = /^(\-\|\+)?\d+(\.\d+)?$/;
	225	if (!regex.test(value)) {
	226	callback(new Error('请输入数字！'));
	227	}
	228	}
	229
	230	const formRules = reactive({
	231	itemName: [{required: true, message: '指标名称不能为空', trigger: 'blur'}],
	232	itemCategory: [{required: true, message: '指标类型不能为空', trigger: 'blur'}],
d3ee81	233	/*precision: [{validator: validateAsNumber, trigger: 'blur' }],
潘	234	coefficient: [{validator: validateAsNumber, trigger: 'blur' }],*/
	235	/"atomItem.id": [{required: true, message: '原子指标不能为空', trigger: 'blur'}]/
c62768	236	})
J	237	const formRef = ref() // 表单 Ref
	238	const atomItemList = ref([] as ItemApi.ItemVO[])
	239	const showTimeChange = ref(false)
	240	const dataSetFieldList = ref([] as DataSetFieldApi.DataSetFieldVO[])
6a72da	241	const dataCategoryList = ref<Tree[]>([])
c62768	242
6a72da	243	const getCategoryTree = async () => {
J	244	dataCategoryList.value = []
	245	const res = await CategoryApi.getCategoryListAllSimple()
	246	let category: Tree = {id: 0, label: '主类目', children: []}
	247	category.children = handleTree(res, 'id', 'pid')
	248	dataCategoryList.value.push(category)
	249	}
c62768	250	/** 打开弹窗 */
J	251	const open = async (type: string, id?: string) => {
	252	dialogVisible.value = true
	253	dialogTitle.value = '派生指标'
	254	formType.value = type
	255	resetForm()
	256	// 加载数据源列表
6a72da	257	await getCategoryTree()
6f74c2	258	const queryParams = reactive({
J	259	itemType: 'ATOM'
	260	})
c62768	261	atomItemList.value = await ItemApi.getItemList(queryParams)
J	262	// 修改时，设置数据
	263	if (id) {
	264	formLoading.value = true
	265	try {
	266	formData.value = await ItemApi.getItem(id)
6497f9	267	if(formData.value.derItem.dimension.length > 0){
J	268	formData.value.derItem.dimension = formData.value.derItem.dimension.split(',')
	269	}else {
	270	formData.value.derItem.dimension = ""
	271	}
fb7d46	272	showTimeChange.value = formData.value.derItem.timeLimit === 'CUSTOM'
8c605f	273	await handleChange(formData.value.derItem.atomItemId)
c62768	274	} finally {
J	275	formLoading.value = false
	276	}
	277	}
	278	}
	279	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	280
	281	/** 提交表单 */
	282	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	283	const submitForm = async () => {
	284	// 校验表单
	285	if (!formRef) return
	286	const valid = await formRef.value.validate()
	287	if (!valid) return
	288	// 提交请求
	289	formLoading.value = true
	290	try {
	291	formData.value.itemType = 'DER'
ea0250	292	formData.value.derItem.atomItemId = formData.value.atomItem.itemId
c62768	293	if(formData.value.derItem.dimension.length > 0){
J	294	let dimension = ''
	295	for (let index in formData.value.derItem.dimension){
	296	dimension = dimension + formData.value.derItem.dimension[index] + ','
	297	}
	298	formData.value.derItem.dimension = dimension.substring(0, dimension.length - 1)
6497f9	299	}else{
J	300	formData.value.derItem.dimension = ''
c62768	301	}
J	302	const data = formData.value as ItemApi.ItemVO
	303	if (formType.value === 'create') {
	304	await ItemApi.createItem(data)
	305	message.success(t('common.createSuccess'))
	306	} else {
	307	await ItemApi.updateItem(data)
	308	message.success(t('common.updateSuccess'))
	309	}
	310	dialogVisible.value = false
	311	// 发送操作成功的事件
	312	emit('success')
	313	} finally {
	314	formLoading.value = false
	315	}
	316	}
	317	/** 重置表单 */
	318	const resetForm = () => {
	319	formData.value = {
	320	id: undefined,
	321	itemNo: '',
	322	itemName: '',
	323	itemType: '',
	324	itemCategory: '',
d3ee81	325	coefficient: 1,
潘	326	precision: 0,
c62768	327	businessType: '',
J	328	timeRange: '',
	329	timeGranularity: '',
	330	remark: '',
	331	atomItem: {
	332	id: '',
	333	itemNo: '',
	334	itemName: '',
	335	},
	336	derItem: {
	337	atomItemId: '',
	338	timeLabel: '',
	339	timeLimit: '',
	340	timeStart: '',
	341	timeEnd: '',
	342	dimension: ''
	343	}
	344	}
	345	}
	346
	347	async function handleChange(event) {
	348	if (event !== null && event !== undefined) {
	349	const itemData = await ItemApi.getItem(event)
8c605f	350	let a = itemData.atomItem.id
J	351	formData.value.atomItem.id = a
c62768	352	formData.value.atomItem.itemName = itemData.itemName
ea0250	353	formData.value.atomItem.itemId = itemData.atomItem.itemId
c62768	354	const queryParams = reactive({
J	355	dataSetId: itemData.atomItem.dataSet,
	356	})
	357	dataSetFieldList.value = (await DataSetFieldApi.getDataSetFieldPage(queryParams)).list
	358	}
	359	}
	360
	361	function handleTimeLimitChange(event) {
	362	showTimeChange.value = event === 'CUSTOM';
	363	}
	364	</script>