iailab-plat-ui-vue3.git

Merge remote-tracking branch 'origin/master'

liriming

2 天以前 1220f5ca98b10b735a47c37a81fbfc554b01e2fe

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