iailab-plat-ui-vue3.git

潘志宝

3 天以前 afd12bd4683489925575346214080faf05394a73

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