iailab-plat-ui-vue3.git

Jay

2024-10-12 ea0250cf26f16b5f40f2da259796b9c581e39b6b

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