标准设备，比对模式被检设备
This commit is contained in:
sjl
330
frontend/src/views/plan/planList/components/chidrenPlan.vue
Normal file
330
frontend/src/views/plan/planList/components/chidrenPlan.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<!--单列-->
|
||||
<template>
|
||||
<el-dialog
|
||||
class="table-box"
|
||||
v-model="dialogVisible"
|
||||
top="114px"
|
||||
:style="{ height: height + 'px', maxHeight: height + 'px', overflow: 'hidden' }"
|
||||
:title="title"
|
||||
:width="width"
|
||||
:modal="false"
|
||||
>
|
||||
<div
|
||||
class="table-box"
|
||||
:style="{ height: height - 64 + 'px', maxHeight: height - 64 + 'px', overflow: 'hidden' }"
|
||||
>
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-button type="primary" :icon="CirclePlus" @click="addTab(editableTabsValue)">新增计划</el-button>
|
||||
</div>
|
||||
<el-tabs
|
||||
v-model="editableTabsValue"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
closable
|
||||
@tab-remove="removeTab"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="item in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:columns="item.columns"
|
||||
:data="item.tableData"
|
||||
type="selection"
|
||||
style="height: 750px;"
|
||||
>
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader="scope">
|
||||
<el-button type="primary" :icon="Delete" v-if="item.name == '1'">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Delete" v-if="item.name != '1'">
|
||||
导出检测方案
|
||||
</el-button>
|
||||
<el-button type="primary" :icon="Delete" >
|
||||
导入检测结果
|
||||
</el-button>
|
||||
<el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected">
|
||||
批量移除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 表格操作 -->
|
||||
<template #operation="scope">
|
||||
<el-button type="primary" link :icon="Delete" v-if="item.name == '1'">删除</el-button>
|
||||
<el-button type="primary" link :icon="Delete" v-if="item.name != '1'">移除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { TabPaneName } from 'element-plus'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { CirclePlus, Delete } from '@element-plus/icons-vue'
|
||||
const sourceDataList = [
|
||||
{
|
||||
id: 'device1',
|
||||
name:"电能质量监测仪A001",
|
||||
type:"PQS-882A",
|
||||
date:"2022-05-05",
|
||||
channel: "2",
|
||||
vol: "57.74",
|
||||
cur: "5",
|
||||
company: "南京灿能",
|
||||
state: 0,
|
||||
check:1,
|
||||
},
|
||||
{
|
||||
id: 'device2',
|
||||
name:"电能质量监测仪A002",
|
||||
type:"PQS-882B4",
|
||||
date:"2022-05-05",
|
||||
channel: "4",
|
||||
vol: "57.74",
|
||||
cur: "5",
|
||||
company: "南京灿能",
|
||||
state: 1,
|
||||
check:2,
|
||||
},
|
||||
{
|
||||
id: 'device3',
|
||||
name:"电能质量监测仪A003",
|
||||
type:"PQS-882B4",
|
||||
date:"2022-05-05",
|
||||
channel: "4",
|
||||
vol: "57.74",
|
||||
cur: "5",
|
||||
company: "南京灿能",
|
||||
state: 1,
|
||||
check:2,
|
||||
},
|
||||
]
|
||||
const sourceDataList2 = [
|
||||
{
|
||||
id: 'device1',
|
||||
name:"电能质量监测仪A003",
|
||||
type:"PQS-882A",
|
||||
date:"2022-05-05",
|
||||
channel: "2",
|
||||
vol: "57.74",
|
||||
cur: "5",
|
||||
company: "南京灿能",
|
||||
state: 0,
|
||||
check:1,
|
||||
},
|
||||
]
|
||||
// 初始数据源
|
||||
const SourceData = sourceDataList
|
||||
const SourceData2 = sourceDataList2
|
||||
// 控制弹窗显示与标题
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const planTitle = ref('')
|
||||
// tab 相关
|
||||
let tabIndex = 2
|
||||
const editableTabsValue = ref('2')
|
||||
const editableTabs = ref([
|
||||
{
|
||||
title: planTitle,
|
||||
name: '1',
|
||||
content: 'Tab 1 content',
|
||||
tableData: [...SourceData],
|
||||
columns: [
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
search: { el: 'input' },
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '设备类型',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'date',
|
||||
label: '出厂日期',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'channel',
|
||||
label: '通道数',
|
||||
search: { el: 'select' },
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
prop: 'vol',
|
||||
label: '额定电压V',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'cur',
|
||||
label: '额定电流A',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'company',
|
||||
label: '设备厂家',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '分配状态',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
render: () => {
|
||||
return (
|
||||
<el-tag type='success' effect="dark">已分配</el-tag>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'check',
|
||||
label: '检测状态',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
render: (scope: { row: { check: number } }) => {
|
||||
return (
|
||||
scope.row.check === 0 ? <el-tag type='warning' effect="dark">未检</el-tag> :
|
||||
scope.row.check === 1 ? <el-tag type='danger' effect="dark">检测中</el-tag> :
|
||||
<el-tag type='success' effect="dark">检测完成</el-tag>
|
||||
)
|
||||
},
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 100 },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '子计划',
|
||||
name: '2',
|
||||
content: 'Tab 2 content',
|
||||
tableData: [...SourceData2],
|
||||
columns: [
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
search: { el: 'input' },
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '设备类型',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'date',
|
||||
label: '出厂日期',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'channel',
|
||||
label: '通道数',
|
||||
search: { el: 'select' },
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
prop: 'vol',
|
||||
label: '额定电压V',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'cur',
|
||||
label: '额定电流A',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
prop: 'company',
|
||||
label: '设备厂家',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
|
||||
},
|
||||
{
|
||||
prop: 'check',
|
||||
label: '检测状态',
|
||||
search: { el: 'select' },
|
||||
minWidth: 150,
|
||||
render: (scope: { row: { check: number } }) => {
|
||||
return (
|
||||
scope.row.check === 0 ? <el-tag type='warning' effect="dark">未检</el-tag> :
|
||||
scope.row.check === 1 ? <el-tag type='danger' effect="dark">检测中</el-tag> :
|
||||
<el-tag type='success' effect="dark">检测完成</el-tag>
|
||||
)
|
||||
},
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 100 },
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
// 新增 tab 方法
|
||||
const addTab = (targetName: string) => {
|
||||
const newTabName = `${++tabIndex}`
|
||||
editableTabs.value.push({
|
||||
title: '子计划',
|
||||
name: newTabName,
|
||||
content: 'New Tab content',
|
||||
tableData: [], // 每个 tab 独立的数据副本
|
||||
columns: [...editableTabs.value[0].columns], // 复用已有列配置
|
||||
})
|
||||
editableTabsValue.value = newTabName
|
||||
}
|
||||
|
||||
// 删除 tab 方法
|
||||
const removeTab = (targetName: TabPaneName) => {
|
||||
const tabs = editableTabs.value
|
||||
let activeName = editableTabsValue.value
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
const nextTab = tabs[index + 1] || tabs[index - 1]
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
editableTabsValue.value = activeName
|
||||
editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
|
||||
}
|
||||
|
||||
// 弹窗打开方法
|
||||
const open = (textTitle: string,planName: string) => {
|
||||
dialogVisible.value = true
|
||||
title.value = textTitle
|
||||
planTitle.value = planName
|
||||
}
|
||||
defineExpose({ open })
|
||||
|
||||
// props
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
default: 800,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 744,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -1,6 +1,6 @@
|
||||
<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" align-center>
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
|
||||
Reference in New Issue
Block a user