UPDATE: 处理控制台警告问题
This commit is contained in:
贾同学
@@ -1,101 +1,100 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle"
|
||||
v-bind="dialogSmall" @close="close" align-center>
|
||||
<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="desc">
|
||||
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="源参数类型" :label-width="100" prop="type">
|
||||
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="源参数值" :label-width="100"
|
||||
prop="value">
|
||||
<el-input v-model="formContent.value" 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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="save()">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
|
||||
<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="desc">
|
||||
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="源参数类型" :label-width="100" prop="type">
|
||||
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="源参数值" :label-width="100" prop="value">
|
||||
<el-input v-model="formContent.value" 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>
|
||||
<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 {computed, defineEmits, reactive, watch} from 'vue'
|
||||
import {dialogSmall} from "@/utils/elementBind"
|
||||
import {TestSource} from "@/api/device/interface/testSource"
|
||||
import {ElMessage, FormItemRule} from "element-plus"
|
||||
import { computed, reactive } from 'vue'
|
||||
import { dialogSmall } from '@/utils/elementBind'
|
||||
import { type TestSource } from '@/api/device/interface/testSource'
|
||||
import { type FormItemRule } from 'element-plus'
|
||||
|
||||
defineProps<{
|
||||
tableData: TestSource.ParameterType[]
|
||||
tableData: TestSource.ParameterType[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['get-parameter'])
|
||||
|
||||
// 计算属性，用于控制显示的 pid
|
||||
const displayPid = computed({
|
||||
get: () => {
|
||||
|
||||
return formContent.pId === '0' ? '' : formContent.pId;
|
||||
},
|
||||
set: (value) => {
|
||||
|
||||
formContent.pId = value;
|
||||
}
|
||||
|
||||
});
|
||||
get: () => {
|
||||
return formContent.pId === '0' ? '' : formContent.pId
|
||||
},
|
||||
set: value => {
|
||||
formContent.pId = value
|
||||
}
|
||||
})
|
||||
|
||||
// 树形节点配置
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'desc',
|
||||
value: 'id'
|
||||
};
|
||||
children: 'children',
|
||||
label: 'desc',
|
||||
value: 'id'
|
||||
}
|
||||
|
||||
const dialogFormRef = ref()
|
||||
const {dialogVisible, titleType, formContent} = useMetaInfo()
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
|
||||
const formContent = reactive<TestSource.ParameterType>({
|
||||
id: "",
|
||||
type: "",
|
||||
value: null,
|
||||
desc: "",
|
||||
sort: 100,
|
||||
pId: "0",
|
||||
})
|
||||
const formContent = reactive<TestSource.ParameterType>({
|
||||
id: '',
|
||||
type: '',
|
||||
value: null,
|
||||
desc: '',
|
||||
sort: 100,
|
||||
pId: '0'
|
||||
})
|
||||
|
||||
return {dialogVisible, titleType, formContent}
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
|
||||
desc: [{required: true, message: '源参数描述必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
|
||||
type: [{required: true, message: '源参数类型必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
|
||||
sort: [{required: true, message: '排序必填！', trigger: 'blur'}]
|
||||
desc: [
|
||||
{ required: true, message: '源参数描述必填！', trigger: 'blur' },
|
||||
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '源参数类型必填！', trigger: 'blur' },
|
||||
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
|
||||
],
|
||||
sort: [{ required: true, message: '排序必填！', trigger: 'blur' }]
|
||||
})
|
||||
|
||||
// watch(() => formContent.pId, (newVal, oldVal) => {
|
||||
@@ -108,54 +107,52 @@ const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
|
||||
// })
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
|
||||
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
|
||||
})
|
||||
|
||||
const resetFormContent = () => {
|
||||
Object.assign(formContent, {
|
||||
id: "",
|
||||
type: "",
|
||||
value: null,
|
||||
desc: "",
|
||||
sort: 100,
|
||||
pId: "0",
|
||||
})
|
||||
Object.assign(formContent, {
|
||||
id: '',
|
||||
type: '',
|
||||
value: null,
|
||||
desc: '',
|
||||
sort: 100,
|
||||
pId: '0'
|
||||
})
|
||||
}
|
||||
const open = (sign: string, data: TestSource.ParameterType) => {
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
resetFormContent()
|
||||
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
Object.assign(formContent, data)
|
||||
}
|
||||
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)
|
||||
close()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
let newUpdateParameter = toRaw({ ...formContent })
|
||||
delete newUpdateParameter.children
|
||||
emit('get-parameter', newUpdateParameter)
|
||||
close()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
resetFormContent()
|
||||
dialogFormRef.value?.resetFields()
|
||||
dialogVisible.value = false
|
||||
resetFormContent()
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
defineExpose({open})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
@@ -1,280 +1,298 @@
|
||||
<template>
|
||||
<div class='table-box' >
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:pagination="false"
|
||||
:toolButton="false"
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
:style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
|
||||
:expand-row-keys="defaultExpandRowKeys"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader='scope'>
|
||||
<el-button :disabled="isDisable" v-auth.testSource="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增
|
||||
</el-button>
|
||||
<el-button v-auth.testSource="'delete'" type='danger' :icon='Delete'
|
||||
plain :disabled='isDisable || !scope.isSelected' @click='batchDelete(scope.selectedListIds)'>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation='scope'>
|
||||
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
|
||||
<el-button :disabled="isDisable" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
|
||||
<el-button :disabled="isDisable" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)'>删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
</div>
|
||||
<ParameterPopup @getParameter="getParameter" ref='parameterPopup' :tableData="tableData"/>
|
||||
<div class="table-box">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:toolButton="false"
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
:style="{ height: '250px', maxHeight: '400px', overflow: 'hidden' }"
|
||||
:expand-row-keys="defaultExpandRowKeys"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader="scope">
|
||||
<el-button
|
||||
:disabled="isDisable"
|
||||
v-auth.testSource="'add'"
|
||||
type="primary"
|
||||
:icon="CirclePlus"
|
||||
@click="openDialog('add')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth.testSource="'delete'"
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
plain
|
||||
:disabled="isDisable || !scope.isSelected"
|
||||
@click="batchDelete(scope.selectedListIds)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
|
||||
<el-button
|
||||
:disabled="isDisable"
|
||||
type="primary"
|
||||
link
|
||||
:icon="EditPen"
|
||||
@click="openDialog('edit', scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button :disabled="isDisable" type="primary" link :icon="Delete" @click="handleDelete(scope.row.id)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
<ParameterPopup @getParameter="getParameter" ref="parameterPopup" :tableData="tableData" />
|
||||
</template>
|
||||
|
||||
<script setup lang='tsx' name='useRole'>
|
||||
import {type TestSource} from '@/api/device/interface/testSource'
|
||||
<script setup lang="tsx" name="useRole">
|
||||
import { type TestSource } from '@/api/device/interface/testSource'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
|
||||
import {CirclePlus, CopyDocument, Delete, EditPen} from '@element-plus/icons-vue'
|
||||
import {useDictStore} from '@/stores/modules/dict'
|
||||
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue';
|
||||
import {reactive, ref, watch} from 'vue'
|
||||
import {generateUUID} from "@/styles";
|
||||
import {defineEmits} from "vue/dist/vue";
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
|
||||
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { generateUUID } from '@/styles'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const parameterPopup = ref()
|
||||
const dictStore = useDictStore()
|
||||
const btnDelete = ref(false)
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
const tableData = ref<any[]>([])
|
||||
const props = defineProps({
|
||||
parameterStr: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isDisable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
parameterStr: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isDisable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change-parameter'])
|
||||
|
||||
let originalParameterArr=reactive<TestSource.ParameterType[]>([])
|
||||
let originalParameterArr = reactive<TestSource.ParameterType[]>([])
|
||||
|
||||
watch(() => props.parameterStr, (newData) => {
|
||||
if (newData) {
|
||||
getTableList()
|
||||
}
|
||||
})
|
||||
watch(
|
||||
() => props.parameterStr,
|
||||
newData => {
|
||||
if (newData) {
|
||||
getTableList()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const defaultExpandRowKeys =computed(() => {
|
||||
return getDefaultKeyArray(tableData.value)
|
||||
const defaultExpandRowKeys = computed(() => {
|
||||
return getDefaultKeyArray(tableData.value)
|
||||
})
|
||||
|
||||
const getDefaultKeyArray = (data: any[]) => {
|
||||
if (!data || data.length === 0) {
|
||||
return []
|
||||
}
|
||||
if (!data || data.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
const firstElement = data[0]
|
||||
let result: any[] = []
|
||||
recursion(firstElement,result)
|
||||
const firstElement = data[0]
|
||||
let result: any[] = []
|
||||
recursion(firstElement, result)
|
||||
|
||||
return result
|
||||
return result
|
||||
}
|
||||
|
||||
const recursion = (node: any, result: any[]) => {
|
||||
if (node.children && node.children.length !== 0) {
|
||||
result.push(node.id)
|
||||
recursion(node.children[0], result)
|
||||
}
|
||||
if (node.children && node.children.length !== 0) {
|
||||
result.push(node.id)
|
||||
recursion(node.children[0], result)
|
||||
}
|
||||
}
|
||||
|
||||
const getTableList = () => {
|
||||
if (props.parameterStr) {
|
||||
originalParameterArr = JSON.parse(props.parameterStr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
}
|
||||
};
|
||||
|
||||
if (props.parameterStr) {
|
||||
originalParameterArr = JSON.parse(props.parameterStr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
}
|
||||
}
|
||||
|
||||
const getTreeData = (data: TestSource.ParameterType[]): TestSource.ParameterType[] => {
|
||||
const result: TestSource.ParameterType[] = []// 最终返回的树形结构数据
|
||||
//不能修改原数组，所以需要深拷贝
|
||||
const copyData = JSON.parse(JSON.stringify(data))
|
||||
const map = new Map<string, TestSource.ParameterType>();
|
||||
copyData.forEach(item => {
|
||||
map.set(item.id, item)
|
||||
});
|
||||
for (const item of copyData) {
|
||||
let parent = map.get(item.pId);
|
||||
if (parent) {
|
||||
if (!parent.children) {
|
||||
parent.children = [];
|
||||
}
|
||||
parent.children.push(item);
|
||||
parent.children.sort((a, b) => {
|
||||
if (a.sort && b.sort) {
|
||||
return a.sort - b.sort
|
||||
const result: TestSource.ParameterType[] = [] // 最终返回的树形结构数据
|
||||
//不能修改原数组，所以需要深拷贝
|
||||
const copyData = JSON.parse(JSON.stringify(data))
|
||||
const map = new Map<string, TestSource.ParameterType>()
|
||||
copyData.forEach(item => {
|
||||
map.set(item.id, item)
|
||||
})
|
||||
for (const item of copyData) {
|
||||
let parent = map.get(item.pId)
|
||||
if (parent) {
|
||||
if (!parent.children) {
|
||||
parent.children = []
|
||||
}
|
||||
parent.children.push(item)
|
||||
parent.children.sort((a, b) => {
|
||||
if (a.sort && b.sort) {
|
||||
return a.sort - b.sort
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return 0
|
||||
result.push(item)
|
||||
result.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>[]>([
|
||||
{type: 'selection', fixed: 'left', width: 70,
|
||||
selectable(row, index) {
|
||||
if (props.isDisable) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
{
|
||||
type: 'selection',
|
||||
fixed: 'left',
|
||||
width: 70,
|
||||
selectable(row, index) {
|
||||
if (props.isDisable) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
},
|
||||
{type: 'index', fixed: 'left', width: 70, label: '序号'},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '参数类型',
|
||||
minWidth: 180,
|
||||
align: 'left',
|
||||
headerAlign:'center'
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'desc',
|
||||
label: '参数描述',
|
||||
minWidth: 220,
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: '值',
|
||||
minWidth: 150,
|
||||
},
|
||||
{prop: 'operation', label: '操作', fixed: 'right', width: 250},
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'type',
|
||||
label: '参数类型',
|
||||
minWidth: 180,
|
||||
align: 'left',
|
||||
headerAlign: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'desc',
|
||||
label: '参数描述',
|
||||
minWidth: 220
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: '值',
|
||||
minWidth: 150
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }
|
||||
])
|
||||
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<TestSource.ParameterType> = {}) => {
|
||||
parameterPopup.value?.open(titleType, row)
|
||||
parameterPopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
|
||||
// 批量删除源参数
|
||||
const batchDelete = async (ids: string[]) => {
|
||||
ElMessageBox.confirm(`是否批量删除检测源?`, "温馨提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
draggable: true
|
||||
}).then(async () => {
|
||||
let parentIds = originalParameterArr.map(item => item.pId);
|
||||
if (parentIds.some(item => ids.includes(item))) {
|
||||
ElMessage.error('不能删除父节点');
|
||||
return;
|
||||
}
|
||||
// 直接过滤掉需要删除的项
|
||||
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id));
|
||||
emit('change-parameter', originalParameterArr);
|
||||
tableData.value = getTreeData(originalParameterArr);
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: `批量删除检测源成功!`
|
||||
});
|
||||
});
|
||||
ElMessageBox.confirm(`是否批量删除检测源?`, '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
draggable: true
|
||||
}).then(async () => {
|
||||
let parentIds = originalParameterArr.map(item => item.pId)
|
||||
if (parentIds.some(item => ids.includes(item))) {
|
||||
ElMessage.error('不能删除父节点')
|
||||
return
|
||||
}
|
||||
// 直接过滤掉需要删除的项
|
||||
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id))
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `批量删除检测源成功!`
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 删除源参数
|
||||
const handleDelete = (id: string) => {
|
||||
ElMessageBox.confirm(`是否删除检测源?`, "温馨提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
draggable: true
|
||||
}).then(async () => {
|
||||
let parentIds = originalParameterArr.map(item => item.pId);
|
||||
if (parentIds.includes(id)) {
|
||||
ElMessage.error('不能删除父节点');
|
||||
return;
|
||||
}
|
||||
originalParameterArr = originalParameterArr.filter(item => item.id !== id);
|
||||
emit('change-parameter', originalParameterArr);
|
||||
tableData.value = getTreeData(originalParameterArr);
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: `删除检测源成功!`
|
||||
});
|
||||
});
|
||||
ElMessageBox.confirm(`是否删除检测源?`, '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
draggable: true
|
||||
}).then(async () => {
|
||||
let parentIds = originalParameterArr.map(item => item.pId)
|
||||
if (parentIds.includes(id)) {
|
||||
ElMessage.error('不能删除父节点')
|
||||
return
|
||||
}
|
||||
originalParameterArr = originalParameterArr.filter(item => item.id !== id)
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: `删除检测源成功!`
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 复制源参数
|
||||
const copyRow = (row) => {
|
||||
delete row.children
|
||||
let parentIds = originalParameterArr.map(item => item.pId)
|
||||
const copyRow = row => {
|
||||
delete row.children
|
||||
let parentIds = originalParameterArr.map(item => item.pId)
|
||||
|
||||
if (parentIds.includes(row.id)) {
|
||||
let newParameterId = generateUUID().replaceAll("-","")
|
||||
let children = originalParameterArr.filter(item => item.pId == row.id).map(item => ({
|
||||
...item,
|
||||
id: generateUUID().replaceAll("-",""),
|
||||
pId: newParameterId
|
||||
}))
|
||||
originalParameterArr.push({...row, id: newParameterId})
|
||||
originalParameterArr.push(...children)
|
||||
} else {
|
||||
originalParameterArr.push({...row, id: generateUUID().replaceAll("-",""), pId: row.pId})
|
||||
}
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
if (parentIds.includes(row.id)) {
|
||||
let newParameterId = generateUUID().replaceAll('-', '')
|
||||
let children = originalParameterArr
|
||||
.filter(item => item.pId == row.id)
|
||||
.map(item => ({
|
||||
...item,
|
||||
id: generateUUID().replaceAll('-', ''),
|
||||
pId: newParameterId
|
||||
}))
|
||||
originalParameterArr.push({ ...row, id: newParameterId })
|
||||
originalParameterArr.push(...children)
|
||||
} else {
|
||||
originalParameterArr.push({ ...row, id: generateUUID().replaceAll('-', ''), pId: row.pId })
|
||||
}
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
}
|
||||
|
||||
const getParameter = (data: TestSource.ParameterType) => {
|
||||
// if (originalParameterArr.some(item => item.type == data.type)) {
|
||||
// ElMessage.error({message: '参数类型已存在！'})
|
||||
// return;
|
||||
// }
|
||||
let index = originalParameterArr.findIndex(item => item.id === data.id)
|
||||
// if (originalParameterArr.some(item => item.type == data.type)) {
|
||||
// ElMessage.error({message: '参数类型已存在！'})
|
||||
// return;
|
||||
// }
|
||||
let index = originalParameterArr.findIndex(item => item.id === data.id)
|
||||
|
||||
|
||||
if (index === -1) {
|
||||
data.id = generateUUID().replaceAll("-","")
|
||||
// 新增
|
||||
originalParameterArr.push(data)
|
||||
ElMessage.success({message: '新增成功！'})
|
||||
} else {
|
||||
// 编辑
|
||||
originalParameterArr[index] = data
|
||||
ElMessage.success({message: '编辑成功！'})
|
||||
}
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
if (index === -1) {
|
||||
data.id = generateUUID().replaceAll('-', '')
|
||||
// 新增
|
||||
originalParameterArr.push(data)
|
||||
ElMessage.success({ message: '新增成功！' })
|
||||
} else {
|
||||
// 编辑
|
||||
originalParameterArr[index] = data
|
||||
ElMessage.success({ message: '编辑成功！' })
|
||||
}
|
||||
emit('change-parameter', originalParameterArr)
|
||||
tableData.value = getTreeData(originalParameterArr)
|
||||
}
|
||||
|
||||
//清空数据
|
||||
const clearData = () => {
|
||||
originalParameterArr = []
|
||||
tableData.value = []
|
||||
originalParameterArr = []
|
||||
tableData.value = []
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
clearData
|
||||
clearData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,49 +1,59 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
|
||||
<div >
|
||||
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' :disabled="tableIsDisable" label-width="auto" class="form-three">
|
||||
<el-form-item label="设备类型" prop="devType" >
|
||||
<el-select v-model='formContent.devType' placeholder="请选择源型号">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData(dictTypeCode)"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测源类型" prop="type" >
|
||||
<el-select v-model='formContent.type' placeholder="请选择检测源类型">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('Pq_Source_Type')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<ParameterTable :parameterStr="formContent.parameter" @change-parameter="changeParameter" ref="parameterTable" :is-disable="tableIsDisable"/>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button :disabled="tableIsDisable" @click='close()'>取 消</el-button>
|
||||
<el-button :disabled="tableIsDisable" type="primary" @click='save()'>保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" align-center>
|
||||
<div>
|
||||
<el-form
|
||||
:model="formContent"
|
||||
ref="dialogFormRef"
|
||||
:rules="rules"
|
||||
:disabled="tableIsDisable"
|
||||
label-width="auto"
|
||||
class="form-three"
|
||||
>
|
||||
<el-form-item label="设备类型" prop="devType">
|
||||
<el-select v-model="formContent.devType" placeholder="请选择源型号">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData(dictTypeCode)"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测源类型" prop="type">
|
||||
<el-select v-model="formContent.type" placeholder="请选择检测源类型">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('Pq_Source_Type')"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<ParameterTable
|
||||
:parameterStr="formContent.parameter"
|
||||
@change-parameter="changeParameter"
|
||||
ref="parameterTable"
|
||||
:is-disable="tableIsDisable"
|
||||
/>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button :disabled="tableIsDisable" @click="close()">取 消</el-button>
|
||||
<el-button :disabled="tableIsDisable" type="primary" @click="save()">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ErrorSystemDialog">
|
||||
import {ElMessage, type FormItemRule} from 'element-plus'
|
||||
import {computed, defineProps, Ref, ref} from 'vue';
|
||||
import {dialogBig} from '@/utils/elementBind'
|
||||
import {addTestSource, getTestSourceById, updateTestSource} from '@/api/device/testSource/index'
|
||||
import {useDictStore} from '@/stores/modules/dict'
|
||||
import {type TestSource} from '@/api/device/interface/testSource';
|
||||
import { ElMessage, type FormItemRule } from 'element-plus'
|
||||
import { computed, Ref, ref } from 'vue'
|
||||
import { dialogBig } from '@/utils/elementBind'
|
||||
import { addTestSource, getTestSourceById, updateTestSource } from '@/api/device/testSource/index'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { type TestSource } from '@/api/device/interface/testSource'
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
const dictStore = useDictStore()
|
||||
@@ -53,122 +63,116 @@ const parameterTable = ref()
|
||||
const tableIsDisable = ref(true)
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<TestSource.ResTestSource>({
|
||||
id: '',
|
||||
pattern: modeId.value,
|
||||
parameter: '',
|
||||
type: '',
|
||||
devType: '',
|
||||
state: 1,
|
||||
})
|
||||
return {dialogVisible, titleType, formContent}
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<TestSource.ResTestSource>({
|
||||
id: '',
|
||||
pattern: modeId.value,
|
||||
parameter: '',
|
||||
type: '',
|
||||
devType: '',
|
||||
state: 1
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const {dialogVisible, titleType, formContent} = useMetaInfo()
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',
|
||||
pattern: modeId.value,
|
||||
parameter: '',
|
||||
type: '',
|
||||
devType: '',
|
||||
state: 1,
|
||||
}
|
||||
formContent.value = {
|
||||
id: '',
|
||||
pattern: modeId.value,
|
||||
parameter: '',
|
||||
type: '',
|
||||
devType: '',
|
||||
state: 1
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
switch (titleType.value) {
|
||||
case 'add':
|
||||
tableIsDisable.value = false
|
||||
return '新增检测源';
|
||||
case 'edit':
|
||||
tableIsDisable.value = false
|
||||
return '编辑检测源';
|
||||
case 'view':
|
||||
tableIsDisable.value = true
|
||||
return '查看检测源';
|
||||
default:
|
||||
return ''; // 默认情况，可选
|
||||
}
|
||||
});
|
||||
switch (titleType.value) {
|
||||
case 'add':
|
||||
tableIsDisable.value = false
|
||||
return '新增检测源'
|
||||
case 'edit':
|
||||
tableIsDisable.value = false
|
||||
return '编辑检测源'
|
||||
case 'view':
|
||||
tableIsDisable.value = true
|
||||
return '查看检测源'
|
||||
default:
|
||||
return '' // 默认情况，可选
|
||||
}
|
||||
})
|
||||
|
||||
let dictTypeCode = computed(() => {
|
||||
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
|
||||
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 '},]
|
||||
});
|
||||
|
||||
name: [{ required: true, message: '检测源名称必填！', trigger: 'blur' }],
|
||||
devType: [{ required: true, message: '请选择一项设备类型', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请选择一项检测源类型', trigger: 'change ' }]
|
||||
})
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
parameterTable.value?.clearData()
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
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!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
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!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗，可能是新增，也可能是编辑
|
||||
const open = async (sign: string, data: TestSource.ResTestSource, currentMode: string) => {
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
mode.value = currentMode
|
||||
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
|
||||
if (data.id) {
|
||||
const result = await getTestSourceById(data);
|
||||
if (result && result.data) {
|
||||
formContent.value = result.data as TestSource.ResTestSource;
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
mode.value = currentMode
|
||||
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
|
||||
if (data.id) {
|
||||
const result = await getTestSourceById(data)
|
||||
if (result && result.data) {
|
||||
formContent.value = result.data as TestSource.ResTestSource
|
||||
}
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
|
||||
|
||||
const changeParameter = (parameterArr: any) => {
|
||||
formContent.value.parameter = JSON.stringify(parameterArr)
|
||||
formContent.value.parameter = JSON.stringify(parameterArr)
|
||||
}
|
||||
|
||||
// 对外映射
|
||||
defineExpose({open})
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
refreshTable: (() => Promise<void>) | undefined
|
||||
}>()
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user