377 lines
12 KiB
Vue
377 lines
12 KiB
Vue
<template>
|
||
<div class='table-box' ref='popupBaseView'>
|
||
<ProTable
|
||
ref='proTable'
|
||
:columns='columns'
|
||
:data='planData'
|
||
>
|
||
<!-- 表格 header 按钮 -->
|
||
<template #tableHeader='scope'>
|
||
<el-button type='primary' :icon='Download' @click="importClick">导入</el-button>
|
||
<el-button type='primary' :icon='CirclePlus' :disabled='!(scope.selectedList.length > 1)' @click="combineClick">合并</el-button>
|
||
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
|
||
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
|
||
批量删除
|
||
</el-button>
|
||
<input type="file" style="display: none" ref="fileInput" @change="handleFiles">
|
||
</template>
|
||
<!-- 表格操作 -->
|
||
<template #operation='scope'>
|
||
<!-- <el-button type='primary' link :icon='View' @click="handleRowClick(scope.row)">查看</el-button> -->
|
||
<el-button type='primary' link :icon='Upload' @click="exportClick">导出</el-button>
|
||
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
|
||
<el-button type='primary' link :icon='Delete' >删除</el-button>
|
||
<el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">设备绑定</el-button>
|
||
<el-button type='primary' link :icon='Tools' @click="showtestSourceOpen(scope.row)">检测源绑定</el-button>
|
||
</template>
|
||
</ProTable>
|
||
|
||
<temp></temp>
|
||
<!-- 向计划导入/导出设备对话框 -->
|
||
<planPopup
|
||
:visible="dialogFormVisible"
|
||
:formData="dialogForm"
|
||
:dialogTitle="dialogTitle"
|
||
:is-read-only="isReadOnly"
|
||
@update:visible="dialogFormVisible = $event"
|
||
/>
|
||
|
||
<!-- 查看误差体系详细信息 -->
|
||
<ErrorStandardDialog
|
||
:visible="detail_dialogFormVisible"
|
||
:formData="detail_dialogForm"
|
||
:dialogTitle="detail_dialogTitle"
|
||
@update:visible="detail_dialogFormVisible = $event"
|
||
/>
|
||
</div>
|
||
<devTransfer
|
||
:dialogVisible=devTransferVisible
|
||
@update:visible='devTransferVisible = $event'
|
||
/>
|
||
<sourceTransfer
|
||
:dialogVisible=sourceTransferVisible
|
||
@update:visible='sourceTransferVisible = $event'
|
||
/>
|
||
<DeviceOpen :width='viewWidth' :height='viewHeight' ref='openDeviceView' />
|
||
<SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' />
|
||
</template>
|
||
|
||
<script setup lang="tsx" name='useProTable'>
|
||
import ProTable from '@/components/ProTable/index.vue'
|
||
import TimeControl from '@/components/TimeControl/index.vue'
|
||
import type { ProTableInstance,ColumnProps } from '@/components/ProTable/interface'
|
||
import { CirclePlus, Delete,EditPen,View,Upload,Download,List,Tools} from '@element-plus/icons-vue'
|
||
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
|
||
import { reactive,ref } from 'vue'
|
||
import type { Plan } from '@/api/plan/interface'
|
||
import planPopup from "@/views/plan/planList/components/planPopup.vue"; // 导入子组件
|
||
import DeviceOpen from '@/views/plan/planList/components/devPopup.vue'
|
||
import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue'
|
||
import temp from './components/temp.vue'
|
||
import devTransfer from './components/devTransfer.vue'
|
||
import sourceTransfer from './components/sourceTransfer.vue'
|
||
import { useViewSize } from '@/hooks/useViewSize'
|
||
import { useRouter } from "vue-router";
|
||
import { useDictStore } from '@/stores/modules/dict'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import type { Action } from 'element-plus'
|
||
import type { ErrorSystem } from '@/api/error/interface'
|
||
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
|
||
|
||
const dictStore = useDictStore()
|
||
// 定义包含和排除的单位
|
||
const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
|
||
const excludedUnits = ['季度','年']; // 要排除的单位
|
||
const defaultUnits = '日'; // 默认的单位
|
||
const { popupBaseView, viewWidth, viewHeight } = useViewSize()
|
||
const openDeviceView = ref()
|
||
const openSourceView = ref()
|
||
const devTransferVisible = ref(false)
|
||
const sourceTransferVisible = ref(false)
|
||
// ProTable 实例
|
||
const proTable = ref<ProTableInstance>()
|
||
// const planData = planData
|
||
const dialogFormVisible = ref(false)
|
||
const dialogTitle = ref('')
|
||
const isReadOnly = ref(false)
|
||
const router = useRouter();
|
||
const dialogForm = ref<Plan.PlanBO>({
|
||
id: '' ,
|
||
name: '',
|
||
pattern:'',
|
||
father_Plan_Id:'',
|
||
dataSource_Id:'',
|
||
script_Id:'',
|
||
error_Sys_Id:'',
|
||
test_State: '',
|
||
report_State: '',
|
||
result:'',
|
||
|
||
|
||
});
|
||
|
||
const detail_dialogFormVisible = ref(false)
|
||
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
|
||
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
|
||
measured: '',//被测量
|
||
deviceLevel: '',//检测装置级别
|
||
measurementType:'',
|
||
condition: '',//测量条件
|
||
maxErrorValue: '',//最大误差
|
||
});
|
||
|
||
// 表格配置项
|
||
const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
|
||
{ type: 'selection', fixed: 'left', width: 70 },
|
||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||
{
|
||
prop: 'name',
|
||
label: '检测计划名称',
|
||
width: 200,
|
||
search: { el: 'input' },
|
||
},
|
||
{
|
||
prop: 'testSourceName',
|
||
label: '检测源名称',
|
||
width: 200,
|
||
render: scope => {
|
||
return (
|
||
// <el-button
|
||
// v-for="(button, index) in scope.row.testSourceList"
|
||
// :key="index"
|
||
// @click="handleClick(button)"
|
||
// >
|
||
// {{ button.text }}
|
||
// </el-button>
|
||
<div class='flx-flex-start'>
|
||
<el-button type = "primary" link onClick = {() => showData(scope.row.testSourceName)}>
|
||
{scope.row.testSourceName}
|
||
</el-button>
|
||
<temp></temp>
|
||
</div>
|
||
|
||
);
|
||
}
|
||
},
|
||
{
|
||
prop: 'script_Id',
|
||
label: '检测脚本',
|
||
width: 300,
|
||
enum: testScriptDataList,
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
render: scope => {
|
||
return (
|
||
<el-button type = "primary" link onClick = {() => showData(scope.row.script_Id)}>
|
||
{getScriptName(scope.row.script_Id)}
|
||
</el-button>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
prop: 'error_Sys_Id',
|
||
label: '误差体系',
|
||
width: 200,
|
||
enum: testErrSystDataList,
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
render: scope => {
|
||
const errSysName = getErrSysName(scope.row.error_Sys_Id);
|
||
return (
|
||
<el-button type = "primary" link onClick = {() => showData(errSysName || '')}>
|
||
{errSysName}
|
||
</el-button>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
prop: 'dataSource_Id',
|
||
label: '数据源名称',
|
||
width: 200,
|
||
enum: testSoureDataList,
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
},
|
||
{
|
||
prop: 'test_State',
|
||
label: '检测状态',
|
||
width: 100,
|
||
enum: dictTestState,
|
||
// enum: dictStore.getDictData('planTestState'),
|
||
search: { el: 'select', props: { filterable: true } },
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
},
|
||
{
|
||
prop: 'report_State',
|
||
label: '检测报告状态',
|
||
width: 150,
|
||
enum: dictReportState,
|
||
// enum: dictStore.getDictData('planReportState'),
|
||
search: { el: 'select', props: { filterable: true } },
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
},
|
||
{
|
||
prop: 'result',
|
||
label: '检测结果',
|
||
width: 100,
|
||
enum: dictResult,
|
||
// enum: dictStore.getDictData('planResult'),
|
||
search: { el: 'select', props: { filterable: true } },
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
},
|
||
{
|
||
prop: 'father_Plan_Id',
|
||
label: '父节点',
|
||
width: 200,
|
||
enum: testFatherPlanList,
|
||
fieldNames: { label: 'label', value: 'id' },
|
||
},
|
||
// {
|
||
// prop: 'create_Time',
|
||
// label: '记录时间',
|
||
// minWidth: 180,
|
||
// search: {
|
||
// span: 2,
|
||
// render: () => {
|
||
// return (
|
||
// <div class='flx-flex-start'>
|
||
// </div>
|
||
// )
|
||
// },
|
||
// },
|
||
// },
|
||
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 450, },
|
||
])
|
||
|
||
function getScriptName(id:string){
|
||
return testScriptDataList.find(item=>item.id==id)?.label
|
||
}
|
||
function getErrSysName(id:string){
|
||
return testErrSystDataList.find(item=>item.id==id)?.label
|
||
}
|
||
|
||
const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput
|
||
function openFileDialog() {
|
||
if (fileInput.value) {
|
||
fileInput.value.click();
|
||
}
|
||
}
|
||
|
||
function showData(row: string) {
|
||
|
||
detail_dialogTitle.value = row;
|
||
detail_dialogFormVisible.value = true; // 显示对话框
|
||
|
||
// router.push({
|
||
// path: "/machine/device",
|
||
// query: { id: row }
|
||
// });
|
||
}
|
||
|
||
function handleFiles(event: Event) {
|
||
const target = event.target as HTMLInputElement;
|
||
const files = target.files;
|
||
if (files && files.length > 0) {
|
||
// 处理文件
|
||
console.log(files);
|
||
ElMessageBox.confirm(
|
||
'导入的数据与当前数据有冲突，请选择以哪个数据为主进行覆盖',
|
||
'数据冲突',
|
||
{
|
||
distinguishCancelAndClose: true,
|
||
confirmButtonText: '以导入数据为主覆盖',
|
||
cancelButtonText: '以当前数据为主覆盖',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
.then(() => {
|
||
ElMessage({
|
||
type: 'info',
|
||
message: '以导入数据为主完成数据覆盖',
|
||
})
|
||
})
|
||
.catch((action: Action) => {
|
||
ElMessage({
|
||
type: 'info',
|
||
message:
|
||
action === 'cancel'
|
||
? '以当前数据为主完成数据覆盖'
|
||
: '取消本次导入操作',
|
||
})
|
||
})
|
||
}
|
||
}
|
||
// 点击导入按钮
|
||
const importClick = () => {
|
||
openFileDialog()
|
||
}
|
||
// 点击导出按钮
|
||
const exportClick = () => {
|
||
openFileDialog()
|
||
}
|
||
|
||
// 点击合并按钮
|
||
const combineClick = () => {
|
||
ElMessageBox.prompt(
|
||
'请输入合并后的计划名称',
|
||
'检测计划合并',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
}
|
||
)
|
||
.then(({ value }) => {
|
||
console.log(`合并后的计划名为:`,value)
|
||
proTable.value?.clearSelection()
|
||
proTable.value?.getTableList()
|
||
})
|
||
}
|
||
|
||
// 打开编辑对话框
|
||
const openEditDialog = (planSystem: Plan.PlanBO) => {
|
||
dialogForm.value = {...planSystem};
|
||
dialogTitle.value = '编辑检测计划';
|
||
isReadOnly.value = false;
|
||
dialogFormVisible.value = true; // 打开对话框
|
||
};
|
||
|
||
const openAddDialog = () => {
|
||
|
||
dialogForm.value = {
|
||
id: '',
|
||
name: '',
|
||
pattern:'',
|
||
father_Plan_Id:'',
|
||
dataSource_Id:'',
|
||
script_Id:'',
|
||
error_Sys_Id:'',
|
||
test_State: '',
|
||
report_State: '',
|
||
result:'',
|
||
};
|
||
dialogTitle.value = '新增检测计划';
|
||
isReadOnly.value = false;
|
||
dialogFormVisible.value = true; // 打开对话框
|
||
};
|
||
|
||
const handleRowClick = (planSystem: Plan.PlanBO) =>{
|
||
dialogForm.value = {...planSystem};
|
||
dialogTitle.value = '查看检测计划';
|
||
isReadOnly.value = true;
|
||
dialogFormVisible.value = true; // 打开对话框
|
||
}
|
||
|
||
const showDeviceOpen = (planSystem: Plan.PlanBO) => {
|
||
devTransferVisible.value = true;
|
||
//openDeviceView.value.open('计划设备列表')
|
||
}
|
||
|
||
const showtestSourceOpen=(planSystem: Plan.PlanBO)=>{
|
||
sourceTransferVisible.value = true;
|
||
// openSourceView.value.open('计划检测源列表')
|
||
// router.push({
|
||
// path: "/machine/testSource",
|
||
// });
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |