240 lines
9.9 KiB
Vue
240 lines
9.9 KiB
Vue
|
<template>
|
||
|
|
<el-dialog v-model='dialogVisible' :title='dialogTitle' v-bind='dialogMiddle' @close="close">
|
||
|
|
<div>
|
||
|
|
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' class='form-two'>
|
||
|
|
<el-form-item label='数据模型' :label-width='100' prop='dataType'>
|
||
|
|
<el-select v-model="formContent.dataType" placeholder="请选择资源类型">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('dataType')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='指标名称' :label-width='100' prop='name'>
|
||
|
|
<el-input v-model='formContent.name' placeholder='请输入' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='别名' :label-width='100' prop='otherName'>
|
||
|
|
<el-input v-model='formContent.otherName' placeholder='请输入' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='显示名称' :label-width='100' prop='showName'>
|
||
|
|
<el-input v-model='formContent.showName' placeholder='请输入' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='相别' :label-width='100' prop='phase'>
|
||
|
|
<el-select v-model="formContent.phase" placeholder="请选择相别">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('dataType')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='单位' :label-width='100' prop='unit'>
|
||
|
|
<el-input v-model='formContent.unit' placeholder='请输入单位' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='指标数据类型' :label-width='100' prop='type'>
|
||
|
|
<el-input v-model='formContent.type' placeholder='请输入指标数据类型' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='开始结束' :label-width='100' prop='type'>
|
||
|
|
<el-input v-model='formContent.type' placeholder='请输入开始结束' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='数据统计类型' :label-width='100' prop='statMethod'>
|
||
|
|
<el-select v-model="formContent.statMethod" placeholder="请选择数据统计类型">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('statMethod')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='报表数据来源' :label-width='100' prop='resourcesId'>
|
||
|
|
<el-select v-model="formContent.resourcesId" placeholder="请选择报表数据来源">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('statMethod')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='数据表表名' :label-width='100' prop='statMethod'>
|
||
|
|
<el-select v-model="formContent.statMethod" placeholder="请选择数据表表名">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('statMethod')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='排序' :label-width='100'>
|
||
|
|
<el-input-number v-model='formContent.sort' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='限值字段名称' :label-width='100' prop='limitName'>
|
||
|
|
<el-input v-model='formContent.limitName' placeholder='请输入限值字段名称' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='限值表名' :label-width='100' prop='limitTable'>
|
||
|
|
<el-input v-model='formContent.limitTable' placeholder='请输入限值表名' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='超标判断方式' :label-width='100' prop='formula'>
|
||
|
|
<el-select v-model="formContent.formula" placeholder="请选择超标判断方式">
|
||
|
|
<el-option
|
||
|
|
v-for="item in dictStore.getDictData('formula')"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.code"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='参数缺省值' :label-width='100' prop='defaultValue'>
|
||
|
|
<el-input v-model='formContent.defaultValue' placeholder='请输入参数缺省值' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='事件类别' :label-width='100' prop='eventType'>
|
||
|
|
<el-input v-model='formContent.eventType' placeholder='请输入事件类别' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='设置最大值' :label-width='100' prop='maxNum'>
|
||
|
|
<el-input v-model='formContent.maxNum' placeholder='请输入最大值' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='设置最小值' :label-width='100' prop='minNum'>
|
||
|
|
<el-input v-model='formContent.minNum' placeholder='请输入最小值' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='枚举序列' :label-width='100' prop='setValue'>
|
||
|
|
<el-input v-model='formContent.setValue' placeholder='请输入枚举序列' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='字符串长度上限' :label-width='100' prop='strlen'>
|
||
|
|
<el-input v-model='formContent.strlen' placeholder='请输入字符串长度上限' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label='上送规则' :label-width='100' prop='tranRule'>
|
||
|
|
<el-input v-model='formContent.tranRule' placeholder='请输入上送规则' autocomplete='off' />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="是否可远程控制" :label-width="100">
|
||
|
|
<el-radio-group v-model="formContent.ctlSts" >
|
||
|
|
<el-radio-button label="是" :value="1"></el-radio-button>
|
||
|
|
<el-radio-button label="否" :value="0"></el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="是否存储" :label-width="100">
|
||
|
|
<el-radio-group v-model="formContent.storeFlag" >
|
||
|
|
<el-radio-button label="是" :value="1"></el-radio-button>
|
||
|
|
<el-radio-button label="否" :value="0"></el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="数据是否上送" :label-width="100">
|
||
|
|
<el-radio-group v-model="formContent.tranFlag" >
|
||
|
|
<el-radio-button label="是" :value="1"></el-radio-button>
|
||
|
|
<el-radio-button label="否" :value="0"></el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<template #footer>
|
||
|
|
<div class='dialog-footer'>
|
||
|
|
<el-button @click='close()'>取消</el-button>
|
||
|
|
<el-button type='primary' @click='save()'>
|
||
|
|
保存
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { dialogMiddle } from '@/utils/elementBind'
|
||
|
|
import { type Dict } from '@/api/system/dictionary/interface'
|
||
|
|
import { ElMessage, type FormItemRule } from 'element-plus'
|
||
|
|
import { addDictPq, updateDictPq } from '@/api/system/dictionary/dictPq'
|
||
|
|
import { computed, type Ref, ref } from 'vue';
|
||
|
|
import { useDictStore } from '@/stores/modules/dict'
|
||
|
|
const dictStore = useDictStore()
|
||
|
|
// 定义弹出组件元信息
|
||
|
|
const dialogFormRef = ref()
|
||
|
|
|
||
|
|
function useMetaInfo() {
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const titleType = ref('add')
|
||
|
|
const formContent = ref<Dict.ResDictPq>({
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
phase: '',
|
||
|
|
sort: 100,
|
||
|
|
dataType: '',
|
||
|
|
state: 1,
|
||
|
|
})
|
||
|
|
return { dialogVisible, titleType, formContent }
|
||
|
|
}
|
||
|
|
|
||
|
|
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||
|
|
|
||
|
|
// 清空formContent
|
||
|
|
const resetFormContent = () => {
|
||
|
|
formContent.value = {
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
phase: '',
|
||
|
|
sort: 100,
|
||
|
|
dataType: '',
|
||
|
|
state: 1,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let dialogTitle = computed(() => {
|
||
|
|
return titleType.value === 'add' ? '新增字典类型' : '编辑字典类型'
|
||
|
|
})
|
||
|
|
|
||
|
|
// 定义表单校验规则
|
||
|
|
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||
|
|
name: [{ required: true, message: '类型名称必填！', trigger: 'blur' }],
|
||
|
|
code: [{ required: true, message: '类型编码必填！', trigger: 'blur' }],
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
const close = () => {
|
||
|
|
dialogVisible.value = false
|
||
|
|
// 清空dialogForm中的值
|
||
|
|
resetFormContent()
|
||
|
|
// 重置表单
|
||
|
|
dialogFormRef.value?.resetFields()
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存数据
|
||
|
|
const save = () => {
|
||
|
|
try {
|
||
|
|
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||
|
|
if (valid) {
|
||
|
|
if (formContent.value.id) {
|
||
|
|
await updateDictPq(formContent.value)
|
||
|
|
} else {
|
||
|
|
await addDictPq(formContent.value)
|
||
|
|
}
|
||
|
|
ElMessage.success({ message: `${dialogTitle.value}成功！` })
|
||
|
|
close()
|
||
|
|
// 刷新表格
|
||
|
|
await props.refreshTable!()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} catch (err) {
|
||
|
|
console.error('验证过程中出现错误', err)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 打开弹窗，可能是新增，也可能是编辑
|
||
|
|
const open = (sign: string, data: Dict.ResDictType) => {
|
||
|
|
titleType.value = sign
|
||
|
|
dialogVisible.value = true
|
||
|
|
if (data.id) {
|
||
|
|
formContent.value = { ...data }
|
||
|
|
} else {
|
||
|
|
resetFormContent()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 对外映射
|
||
|
|
defineExpose({ open })
|
||
|
|
const props = defineProps<{
|
||
|
|
refreshTable: (() => Promise<void>) | undefined;
|
||
|
|
}>()
|
||
|
|
|
||
|
|
</script>
|