iailab-plat-ui-vue3.git

潘志宝

2024-09-26 d3ee81e33f92f23ee579f3d72c26e011523e166b

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