源参数

This commit is contained in:
caozehui
2024-12-02 08:50:21 +08:00
parent 13992ffa58
commit da78b9c98a
6 changed files with 428 additions and 222 deletions

View File

@@ -19,6 +19,6 @@ export const userStatus = [
export const resourceType = [ export const resourceType = [
{ label: "菜单", value: 0 }, { label: "菜单", value: 0 },
{ label: "按钮", value: 1 }, { label: "按钮", value: 1 },
{ label: "公共资源", value: 2 } { label: "公共资源", value: 2 },
{ label: "服务间调用资源", value: 3 } { label: "服务间调用资源", value: 3 }
]; ];

View File

@@ -14,7 +14,7 @@
<el-table-column prop="type" label="电能质量检测指标类型" width="181"> <el-table-column prop="type" label="电能质量检测指标类型" width="181">
<template #default="{ row }"> <template #default="{ row }">
<el-select v-model="row.type" placeholder="选择指标类型" > <el-select v-model="row.type" placeholder="选择指标类型" >
<el-option v-for="item in dictStore.getDictData('Error_Value_Type')" <el-option v-for="item in dictStore.getDictData('Pq_Test_Type')"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id"/> :value="item.id"/>

View File

@@ -1,11 +1,156 @@
<template> <template>
<el-dialog v-model="dialogVisible" :title="dialogTitle"
v-bind="dialogSmall" @close="close">
<div> <div>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
<el-form-item label="参数所属" prop="pId" :label-width="100">
<el-tree-select
v-model="displayPid"
:data="tableData"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="源参数描述" :label-width="100" prop="sourceParamDesc">
<el-input v-model="formContent.sourceParamDesc" autocomplete="off"/>
</el-form-item>
<el-form-item label="源参数类型" :label-width="100" prop="sourceParamType">
<el-input v-model="formContent.sourceParamType" autocomplete="off"/>
</el-form-item>
<el-form-item v-show="displayPid && displayPid!== '0'" label="源参数值" :label-width="100"
prop="sourceParamValue">
<el-input v-model="formContent.sourceParamValue" autocomplete="off"/>
</el-form-item>
<el-form-item label="排序" :label-width="100">
<el-input-number v-model="formContent.sort" :min='1' :max='999'/>
</el-form-item>
</el-form>
</div> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import {defineEmits, reactive, watch} from 'vue'
import {dialogSmall} from "@/utils/elementBind"
import {TestSource} from "@/api/device/interface/testSource"
import {ElMessage, FormItemRule} from "element-plus"
defineProps<{
tableData: TestSource.ParameterType[]
}>()
const emit = defineEmits(['get-parameter'])
// 计算属性,用于控制显示的 pid
const displayPid = computed({
get: () => {
return formContent.pId === '0' ? '' : formContent.pId;
},
set: (value) => {
formContent.pId = value;
}
});
// 树形节点配置
const defaultProps = {
children: 'children',
label: 'sourceParamDesc',
value: 'id'
};
const dialogFormRef = ref()
const {dialogVisible, titleType, formContent} = useMetaInfo()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = reactive<TestSource.ParameterType>({
id: "",
sourceParamType: "",
sourceParamDesc: "",
sourceParamValue: "",
sort: 100,
pId: "0",
})
return {dialogVisible, titleType, formContent}
}
const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
sourceParamDesc: [{required: true, message: '源参数描述必填!', trigger: 'blur'}],
sourceParamType: [{required: true, message: '源参数类型必填!', trigger: 'blur'}],
sort: [{required: true, message: '排序必填!', trigger: 'blur'}]
})
watch(() => formContent.pId, (newVal, oldVal) => {
if (newVal !== '0') {
rules.sourceParamValue = [{required: true, message: '源参数值必填!', trigger: 'blur'}]
} else {
rules.sourceParamValue = []
}
})
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
})
const resetFormContent = () => {
Object.assign(formContent, {
id: "",
sourceParamType: "",
sourceParamDesc: "",
sourceParamValue: "",
sort: 100,
pId: "0",
})
}
const open = (sign: string, data: TestSource.ParameterType) => {
// 重置表单
dialogFormRef.value?.resetFields()
resetFormContent()
titleType.value = sign
dialogVisible.value = true
if (data.id) {
Object.assign(formContent, data)
}
}
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let newUpdateParameter = toRaw({...formContent})
delete newUpdateParameter.children
emit('get-parameter', newUpdateParameter)
ElMessage.success({message: `${dialogTitle.value}成功!`})
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
const close = () => {
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
}
defineExpose({open})
</script> </script>
<style scoped> <style scoped>

View File

@@ -1,96 +1,111 @@
<template> <template>
<div class='table-box'> <div class='table-box'>
<ProTable <ProTable
ref='proTable' ref='proTable'
:columns='columns' :columns='columns'
:pagination="false" :pagination="false"
:toolButton="false" :toolButton="false"
:data="tableData" :data="tableData"
:row-key="id" :row-key="id"
> >
<!-- 表格 header 按钮 --> <!-- 表格 header 按钮 -->
<template #tableHeader='scope'> <template #tableHeader='scope'>
<el-button v-auth.testSource="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button> <el-button v-auth.testSource="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增
<el-button v-auth.testSource="'batchDelete'" type='danger' :icon='Delete' </el-button>
<el-button v-auth.testSource="'batchDelete'" type='danger' :icon='Delete'
plain :disabled='!scope.isSelected' @click='batchDelete(scope.selectedListIds)'> plain :disabled='!scope.isSelected' @click='batchDelete(scope.selectedListIds)'>
批量删除 批量删除
</el-button> </el-button>
</template> </template>
<!-- 表格操作 --> <!-- 表格操作 -->
<template #operation='scope'> <template #operation='scope'>
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button> <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button> <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button> <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)'>删除</el-button>
</template> </template>
</ProTable> </ProTable>
</div> </div>
<ParameterPopup :refresh-table='getTableList' ref='parameterPopup' /> <ParameterPopup @getParameter="getParameter" ref='parameterPopup' :tableData="tableData"/>
</template> </template>
<script setup lang='tsx' name='useRole'> <script setup lang='tsx' name='useRole'>
import { type TestSource } from '@/api/device/interface/testSource' import {type TestSource} from '@/api/device/interface/testSource'
import { useHandleData } from '@/hooks/useHandleData' import ProTable from '@/components/ProTable/index.vue'
import ProTable from '@/components/ProTable/index.vue' import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
import type{ ProTableInstance, ColumnProps } from '@/components/ProTable/interface' import {CirclePlus, CopyDocument, Delete, EditPen} from '@element-plus/icons-vue'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh,CopyDocument } from '@element-plus/icons-vue' import {useDictStore} from '@/stores/modules/dict'
import { useDictStore } from '@/stores/modules/dict' import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue';
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue'; import {reactive, ref, watch} from 'vue'
import { onMounted, reactive, ref, watch } from 'vue' import {generateUUID} from "@/styles";
import {map} from "lodash"; import {defineEmits} from "vue/dist/vue";
const parameterPopup = ref()
const dictStore = useDictStore() const parameterPopup = ref()
// ProTable 实例 const dictStore = useDictStore()
const proTable = ref<ProTableInstance>() // ProTable 实例
const tableData = ref<any[]>([]) const proTable = ref<ProTableInstance>()
const props = defineProps<{ const tableData = ref<any[]>([])
parameterStr: string; const props = defineProps<{
parameterStr: string;
}>(); }>();
let originalParameterArr: TestSource.ParameterType[] = [] const emit = defineEmits(['change-parameter'])
onMounted(() => {
getTableList(); let originalParameterArr=reactive<TestSource.ParameterType[]>([])
})
watch(() => props.parameterStr, (newData) => { watch(() => props.parameterStr, (newData) => {
if (newData) { if (newData) {
getTableList(); getTableList()
} }
}) })
const getTableList = () => { const getTableList = () => {
if (props.parameterStr) { if (props.parameterStr) {
originalParameterArr =JSON.parse(props.parameterStr) originalParameterArr = JSON.parse(props.parameterStr)
tableData.value = getTreeData(originalParameterArr) tableData.value = getTreeData(originalParameterArr)
} }
}; };
const getTreeData = (data: TestSource.ParameterType[]): TestSource.ParameterType[] => { const getTreeData = (data: TestSource.ParameterType[]): TestSource.ParameterType[] => {
const result: TestSource.ParameterType[] = []// 最终返回的树形结构数据 const result: TestSource.ParameterType[] = []// 最终返回的树形结构数据
//不能修改原数组,所以需要深拷贝 //不能修改原数组,所以需要深拷贝
const copyData = JSON.parse(JSON.stringify(data)) const copyData = JSON.parse(JSON.stringify(data))
const map = new Map<string, TestSource.ParameterType>(); const map = new Map<string, TestSource.ParameterType>();
copyData.forEach(item => { copyData.forEach(item => {
map.set(item.id, item); map.set(item.id, item)
}); });
for (const item of copyData) { for (const item of copyData) {
let parent = map.get(item.pId); let parent = map.get(item.pId);
if (parent) { if (parent) {
if (!parent.children) { if (!parent.children) {
parent.children = []; parent.children = [];
}
parent.children.push(item);
} else {
result.push(item);
} }
parent.children.push(item);
parent.children.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
} else {
result.push(item)
result.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
} }
return result;
} }
return result
}
const columns = reactive<ColumnProps<any>[]>([ const columns = reactive<ColumnProps<any>[]>([
{ type: 'selection', fixed: 'left', width: 70 }, {type: 'selection', fixed: 'left', width: 70},
{ type: 'index', fixed: 'left', width: 70, label: '序号' }, {type: 'index', fixed: 'left', width: 70, label: '序号'},
{ {
prop: 'sourceParamType', prop: 'sourceParamType',
label: '参数类型', label: '参数类型',
@@ -102,47 +117,88 @@ const columns = reactive<ColumnProps<any>[]>([
minWidth: 220, minWidth: 220,
}, },
{ {
prop: 'value', prop: 'sourceParamValue',
label: '值', label: '值',
minWidth: 150, minWidth: 150,
}, },
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }, {prop: 'operation', label: '操作', fixed: 'right', width: 250},
]) ])
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestSource.ResTestSource> = {}) => { const openDialog = (titleType: string, row: Partial<TestSource.ParameterType> = {}) => {
parameterPopup.value?.open(titleType) parameterPopup.value?.open(titleType, row)
} }
// 批量删除设备 // 批量删除源参数
const batchDelete = async (id: string[]) => { const batchDelete = async (ids: string[]) => {
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.some(item => ids.includes(item))) {
ElMessage.error('不能删除父节点');
return;
}
for (const id of ids) {
handleDelete(id)
}
proTable.value?.clearSelection() proTable.value?.clearSelection()
proTable.value?.getTableList()
} }
// 删除设备 // 删除源参数
const handleDelete = async (params: TestSource.ResTestSource) => { const handleDelete = (id: string) => {
let parentIds = originalParameterArr.map(item => item.pId) let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.includes(params.id)) { if (parentIds.includes(id)) {
ElMessage.error('不能删除父节点'); ElMessage.error('不能删除父节点');
return; return;
} }
originalParameterArr = originalParameterArr.filter(item => item.id !== params.id); originalParameterArr = originalParameterArr.filter(item => item.id !== id);
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr) tableData.value = getTreeData(originalParameterArr)
} }
const copyRow = (row) => { // 复制源参数
let parentIds = originalParameterArr.map(item => item.pId) const copyRow = (row) => {
// if (parentIds.includes(row.id)) { delete row.children
// originalParameterArr.push({ let parentIds = originalParameterArr.map(item => item.pId)
//
// }) if (parentIds.includes(row.id)) {
// } else { let newParameterId = generateUUID()
// let children = originalParameterArr.filter(item => item.pId == row.id).map(item => ({
// } ...item,
}; id: generateUUID(),
</script> pId: newParameterId
}))
originalParameterArr.push({...row, id: newParameterId})
originalParameterArr.push(...children)
} else {
originalParameterArr.push({...row, id: generateUUID(), pId: row.pId})
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
const getParameter = (data: TestSource.ParameterType) => {
let index = originalParameterArr.findIndex(item => item.id === data.id)
if (index === -1) {
data.id = generateUUID()
// 新增
originalParameterArr.push(data)
} else {
// 编辑
originalParameterArr[index] = data
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
//清空数据
const clearData = () => {
console.log('clearData')
originalParameterArr = []
tableData.value = []
}
defineExpose({
clearData
})
</script>

View File

@@ -1,144 +1,146 @@
<template> <template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig"> <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
<div class="form-grid"> <div class="form-grid">
<el-form :model="formContent" ref='dialogFormRef' :rules='rules'> <el-form :model="formContent" ref='dialogFormRef' :rules='rules'>
<el-row :gutter="24" > <el-row :gutter="24">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="检测源名称" prop="name" :label-width="100"> <el-form-item label="检测源名称" prop="name" :label-width="100">
<el-input v-model='formContent.name' placeholder="检测源类型+设备类型简称+数字"/> <el-input v-model='formContent.name' placeholder="检测源类型+设备类型简称+数字"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="设备类型" prop="devType" :label-width="100"> <el-form-item label="设备类型" prop="devType" :label-width="100">
<el-select v-model='formContent.devType' placeholder="请选择设备类型"> <el-select v-model='formContent.devType' placeholder="请选择设备类型">
<el-option <el-option
v-for="item in dictStore.getDictData('PqSource_Dev_Type')" v-for="item in dictStore.getDictData(dictTypeCode)"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="标准源" prop="type" :label-width="100"> <el-form-item label="标准源" prop="type" :label-width="100">
<el-select v-model='formContent.type' placeholder="请选择检测源类型"> <el-select v-model='formContent.type' placeholder="请选择检测源类型">
<el-option <el-option
v-for="item in dictStore.getDictData('Pq_Source_Type')" v-for="item in dictStore.getDictData('Pq_Source_Type')"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
<ParameterTable :parameterStr="formContent.parameter"/> <ParameterTable :parameterStr="formContent.parameter" @change-parameter="changeParameter" ref="parameterTable"/>
<template #footer> <template #footer>
<div > <div>
<el-button @click='close()'> </el-button> <el-button @click='close()'> </el-button>
<el-button type="primary" @click='save()'>保存</el-button> <el-button type="primary" @click='save()'>保存</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup name="ErrorSystemDialog"> <script lang="ts" setup name="ErrorSystemDialog">
import{ElMessage, type FormInstance,type FormItemRule}from'element-plus' import {ElMessage, type FormItemRule} from 'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref, computed } from 'vue'; import {computed, defineProps, Ref, ref} from 'vue';
import { dialogBig} from '@/utils/elementBind' import {dialogBig} from '@/utils/elementBind'
import { addTestSource,updateTestSource,getTestSourceById} from '@/api/device/testSource/index' import {addTestSource, getTestSourceById, updateTestSource} from '@/api/device/testSource/index'
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue' import {useDictStore} from '@/stores/modules/dict'
import { useDictStore } from '@/stores/modules/dict' import {type TestSource} from '@/api/device/interface/testSource';
import { type TestSource } from '@/api/device/interface/testSource'; // 定义弹出组件元信息
import ParameterTable from '@/views/machine/testSource/components/parameterTable.vue'; const dialogFormRef = ref()
// 定义弹出组件元信息 const dictStore = useDictStore()
const dialogFormRef = ref() const mode = ref()
const dictStore = useDictStore() const modeId = ref()
const mode = ref() const parameterTable = ref()
const modeId = ref()
function useMetaInfo() { function useMetaInfo() {
const dialogVisible = ref(false) const dialogVisible = ref(false)
const titleType = ref('add') const titleType = ref('add')
const formContent = ref<TestSource.ResTestSource>({ const formContent = ref<TestSource.ResTestSource>({
id: '', id: '',
name: '', name: '',
pattern: modeId.value, pattern: modeId.value,
parameter:'', parameter: '',
type: '', type: '',
devType: '', devType: '',
state:1, state: 1,
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
pattern: modeId.value,
parameter:'',
type: '',
devType: '',
state:1,
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增检测源' : '编辑检测源'
}) })
return {dialogVisible, titleType, formContent}
}
// 定义规则 const {dialogVisible, titleType, formContent} = useMetaInfo()
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({ // 清空formContent
name: [{ required: true, message: '检测源名称必填!', trigger: 'blur' }], const resetFormContent = () => {
devType:[{ required: true, message: '请选择一项设备类型', trigger: 'change' },], formContent.value = {
type:[{ required: true, message: '请选择一项检测源类型', trigger: 'change '},] id: '',
}); name: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1,
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增检测源' : '编辑检测源'
})
let dictTypeCode = computed(() => {
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
})
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{required: true, message: '检测源名称必填!', trigger: 'blur'}],
devType: [{required: true, message: '请选择一项设备类型', trigger: 'change'},],
type: [{required: true, message: '请选择一项检测源类型', trigger: 'change '},]
});
// 关闭弹窗 // 关闭弹窗
const close = () => { const close = () => {
dialogVisible.value = false dialogVisible.value = false
// 清空dialogForm中的值 // 清空dialogForm中的值
resetFormContent() resetFormContent()
// 重置表单 // 重置表单
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
} parameterTable.value?.clearData()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateTestSource(formContent.value);
ElMessage.success({ message: `${dialogTitle.value}成功!` })
} else {
await addTestSource(formContent.value);
ElMessage.success({ message: `${dialogTitle.value}成功!` })
}
close()
// 刷新表格
await props.refreshTable!()
} // 保存数据
}) const save = () => {
} catch (err) { try {
console.error('验证过程中出现错误', err) dialogFormRef.value?.validate(async (valid: boolean) => {
} if (valid) {
} if (formContent.value.id) {
await updateTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功!`})
} else {
await addTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功!`})
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗,可能是新增,也可能是编辑 // 打开弹窗,可能是新增,也可能是编辑
const open = async (sign: string, data: TestSource.ResTestSource,currentMode: string) => { const open = async (sign: string, data: TestSource.ResTestSource, currentMode: string) => {
titleType.value = sign titleType.value = sign
dialogVisible.value = true dialogVisible.value = true
mode.value = currentMode mode.value = currentMode
@@ -155,9 +157,12 @@ const open = async (sign: string, data: TestSource.ResTestSource,currentMode: st
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
} }
const changeParameter = (parameterArr) => {
formContent.value.parameter = JSON.stringify(parameterArr)
}
// 对外映射 // 对外映射
defineExpose({ open }) defineExpose({open})
const props = defineProps<{ const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined; refreshTable: (() => Promise<void>) | undefined;
}>() }>()

View File

@@ -68,7 +68,7 @@
{ {
prop: 'devType', prop: 'devType',
label: '设备类型', label: '设备类型',
enum: dictStore.getDictData('PqSource_Dev_Type'), enum: dictStore.getDictData('S_Dev_Type_'+dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.code),
fieldNames: { label: 'name', value: 'id' }, fieldNames: { label: 'name', value: 'id' },
search: { el: 'select' }, search: { el: 'select' },
minWidth: 220, minWidth: 220,