257 lines
7.3 KiB
Vue
257 lines
7.3 KiB
Vue
<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'}"
|
|
|
|
>
|
|
<!-- 表格 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'
|
|
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 { 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 emit = defineEmits(['change-parameter'])
|
|
|
|
let originalParameterArr=reactive<TestSource.ParameterType[]>([])
|
|
|
|
watch(() => props.parameterStr, (newData) => {
|
|
if (newData) {
|
|
getTableList()
|
|
}
|
|
})
|
|
|
|
const getTableList = () => {
|
|
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
|
|
} 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
|
|
}
|
|
|
|
const columns = reactive<ColumnProps<any>[]>([
|
|
{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},
|
|
])
|
|
|
|
|
|
// 打开 drawer(新增、编辑)
|
|
const openDialog = (titleType: string, row: Partial<TestSource.ParameterType> = {}) => {
|
|
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: `批量删除检测源成功!`
|
|
});
|
|
});
|
|
}
|
|
|
|
// 删除源参数
|
|
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: `删除检测源成功!`
|
|
});
|
|
});
|
|
}
|
|
|
|
// 复制源参数
|
|
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)
|
|
}
|
|
|
|
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 (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 = []
|
|
}
|
|
|
|
defineExpose({
|
|
clearData
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|
|
|