检测首页增加不同入口的默认选择状态和禁止选择状态
This commit is contained in:
GYYM
@@ -3,6 +3,7 @@
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:columns="columns"
|
||||
:data='deviceData'
|
||||
:request-api="getTableList"
|
||||
:init-param="initParam"
|
||||
:data-callback="dataCallback"
|
||||
@@ -13,62 +14,35 @@
|
||||
<!-- 表格 header 按钮 -->
|
||||
<template #tableHeader="scope">
|
||||
<el-form :model="form" label-width="80px" :inline="true">
|
||||
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkStatus">
|
||||
<el-form-item label="检测状态">
|
||||
<el-select v-model="form.checkStatus" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in checkStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报告状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkReportStatus">
|
||||
<el-form-item label="报告状态">
|
||||
<el-select v-model="form.checkReportStatus" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in checkReportStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检测结果" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkResult">
|
||||
<el-form-item label="检测结果">
|
||||
<el-select v-model="form.checkResult" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in checkResultList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定状态" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceBindStatus">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceBindStatusList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.deviceType">
|
||||
<el-option
|
||||
v-for="(item, index) in deviceTypeList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="制造厂商" v-if="form.activeTabs == 5">
|
||||
<el-select v-model="form.manufacturer">
|
||||
<el-option
|
||||
v-for="(item, index) in manufacturerList"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
@@ -90,10 +64,18 @@
|
||||
>启动手动检测</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 2"
|
||||
>报告生成</el-button
|
||||
>不合格项复检</el-button
|
||||
>
|
||||
<el-button type="primary" v-if="form.activeTabs === 5"
|
||||
>设备导入</el-button
|
||||
<el-button type="primary" v-if="form.activeTabs === 2"
|
||||
>全部复检</el-button
|
||||
>
|
||||
|
||||
<el-button type="primary" v-if="form.activeTabs === 3"
|
||||
>批量生成报告</el-button
|
||||
>
|
||||
|
||||
<el-button type="primary" v-if="form.activeTabs === 4"
|
||||
>设备批量归档</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -128,120 +110,136 @@
|
||||
|
||||
<script setup lang="tsx" name="useProTable">
|
||||
import { useRouter } from "vue-router";
|
||||
import { User } from "@/api/interface";
|
||||
import type { Device } from '@/api/device/interface'
|
||||
import { useHandleData } from "@/hooks/useHandleData";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
|
||||
import {
|
||||
Search,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { getPlanList } from "@/api/plan/planList";
|
||||
import deviceDataList from '@/api/device/deviceData'
|
||||
import { log } from "console";
|
||||
import { isVisible } from "element-plus/es/utils";
|
||||
const router = useRouter();
|
||||
const value1 = ref("");
|
||||
const value2 = ref("");
|
||||
const tableHeight = ref(0);
|
||||
console.log(window.innerHeight, "+++++++++");
|
||||
tableHeight.value = window.innerHeight - 630;
|
||||
const deviceData = deviceDataList.plan_devicedata
|
||||
|
||||
//下拉框数据
|
||||
//检测状态数据
|
||||
const checkStatusList = [
|
||||
let checkStatusList = reactive([
|
||||
{
|
||||
label: "未检测",
|
||||
value: 0,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "检测中",
|
||||
value: 1,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "检测完成",
|
||||
value: 2,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "归档",
|
||||
value: 3,
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
]);
|
||||
//检测报告状态数据
|
||||
const checkReportStatusList = [
|
||||
let checkReportStatusList = reactive([
|
||||
{
|
||||
label: "未生成报告",
|
||||
value: 0,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "已生成报告",
|
||||
value: 1,
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
]);
|
||||
//检测结果数组
|
||||
const checkResultList = [
|
||||
let checkResultList = reactive([
|
||||
{
|
||||
label: "/",
|
||||
value: null,
|
||||
label: "未出结果",
|
||||
value: 0,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "不合格",
|
||||
value: 0,
|
||||
value: 1,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
label: "合格",
|
||||
value: 1,
|
||||
value: 2,
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
]);
|
||||
//绑定状态数组
|
||||
const deviceBindStatusList = [
|
||||
{
|
||||
label: "未绑定",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "已绑定",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
//设备类型数组
|
||||
const deviceTypeList = [
|
||||
{
|
||||
label: "PQS882A",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "PQS882B4",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "PQS882B5",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "PQS882B6",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "PQS882B7",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "PQS882B8",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
//制造厂商数组
|
||||
const manufacturerList = [
|
||||
{
|
||||
label: "南京灿能电力",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "南瑞继保",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "中电",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
// const deviceBindStatusList = [
|
||||
// {
|
||||
// label: "未绑定",
|
||||
// value: 0,
|
||||
// disabled: true,
|
||||
// },
|
||||
// {
|
||||
// label: "已绑定",
|
||||
// value: 1,
|
||||
// disabled: true,
|
||||
// },
|
||||
// ];
|
||||
// //设备类型数组
|
||||
// const deviceTypeList = [
|
||||
// {
|
||||
// label: "PQS882A",
|
||||
// value: 0,
|
||||
// },
|
||||
// {
|
||||
// label: "PQS882B4",
|
||||
// value: 1,
|
||||
// },
|
||||
// {
|
||||
// label: "PQS882B5",
|
||||
// value: 2,
|
||||
// },
|
||||
// {
|
||||
// label: "PQS882B6",
|
||||
// value: 3,
|
||||
// },
|
||||
// {
|
||||
// label: "PQS882B7",
|
||||
// value: 4,
|
||||
// },
|
||||
// {
|
||||
// label: "PQS882B8",
|
||||
// value: 5,
|
||||
// },
|
||||
// ];
|
||||
// //制造厂商数组
|
||||
// const manufacturerList = [
|
||||
// {
|
||||
// label: "南京灿能电力",
|
||||
// value: 0,
|
||||
// },
|
||||
// {
|
||||
// label: "南瑞继保",
|
||||
// value: 1,
|
||||
// },
|
||||
// {
|
||||
// label: "中电",
|
||||
// value: 2,
|
||||
// },
|
||||
// ];
|
||||
//查询条件
|
||||
const form: any = ref({
|
||||
activeTabs: 0, //功能选择
|
||||
@@ -285,64 +283,111 @@ const getTableList = (params: any) => {
|
||||
delete newParams.createTime;
|
||||
return getPlanList(newParams);
|
||||
};
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 70 },
|
||||
{
|
||||
prop: "checkMode",
|
||||
label: "设备序列号",
|
||||
width: 140,
|
||||
render: (scope) => {
|
||||
return scope.row.checkMode == 0
|
||||
? "设备1"
|
||||
: scope.row.checkMode == 1
|
||||
? "设备2"
|
||||
: scope.row.checkMode == 2
|
||||
? "设备3"
|
||||
: scope.row.checkMode;
|
||||
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
minWidth: 120,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "checkMode",
|
||||
label: "设备类型",
|
||||
width: 140,
|
||||
render: (scope) => {
|
||||
return scope.row.checkMode == 0
|
||||
? "PQS991"
|
||||
: scope.row.checkMode == 1
|
||||
? "PQS882"
|
||||
: scope.row.checkMode == 2
|
||||
? "PQS6666"
|
||||
: scope.row.checkMode;
|
||||
{
|
||||
prop: 'dev_Type',
|
||||
label: '类型',
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "checkFrom",
|
||||
label: "制造厂商",
|
||||
width: 140,
|
||||
render: (scope) => {
|
||||
return scope.row.checkFrom == 0
|
||||
? "南京灿能"
|
||||
: scope.row.checkFrom == 1
|
||||
? "南瑞继保"
|
||||
: scope.row.checkFrom == 2
|
||||
? "/"
|
||||
: scope.row.checkFrom;
|
||||
{
|
||||
prop: 'dev_Chns',
|
||||
label: '通道数',
|
||||
minWidth: 100,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: "numberFromName",
|
||||
label: "MAC/IP",
|
||||
render: (scope) => {
|
||||
return scope.row.numberFromName == 0
|
||||
? "192.168.0.1"
|
||||
: scope.row.numberFromName == 1
|
||||
? "192.168.0.2"
|
||||
: scope.row.numberFromName == 2
|
||||
? "192.168.0.3"
|
||||
: scope.row.numberFromName;
|
||||
{
|
||||
prop: 'reCheck_Num',
|
||||
label: '复检次数',
|
||||
minWidth: 70,
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'report_State',
|
||||
label: '报告状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'check_Result',
|
||||
label: '检测结果',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'check_State',
|
||||
label: '检测状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
prop: 'document_State',
|
||||
label: '归档状态',
|
||||
minWidth: 130,
|
||||
},
|
||||
// { prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 },
|
||||
])
|
||||
|
||||
// 表格配置项
|
||||
// const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
// { type: "selection", fixed: "left", width: 70 },
|
||||
// {
|
||||
// prop: "checkMode",
|
||||
// label: "设备序列号",
|
||||
// width: 140,
|
||||
// render: (scope) => {
|
||||
// return scope.row.checkMode == 0
|
||||
// ? "设备1"
|
||||
// : scope.row.checkMode == 1
|
||||
// ? "设备2"
|
||||
// : scope.row.checkMode == 2
|
||||
// ? "设备3"
|
||||
// : scope.row.checkMode;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// prop: "checkMode",
|
||||
// label: "设备类型",
|
||||
// width: 140,
|
||||
// render: (scope) => {
|
||||
// return scope.row.checkMode == 0
|
||||
// ? "PQS991"
|
||||
// : scope.row.checkMode == 1
|
||||
// ? "PQS882"
|
||||
// : scope.row.checkMode == 2
|
||||
// ? "PQS6666"
|
||||
// : scope.row.checkMode;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// prop: "checkFrom",
|
||||
// label: "制造厂商",
|
||||
// width: 140,
|
||||
// render: (scope) => {
|
||||
// return scope.row.checkFrom == 0
|
||||
// ? "南京灿能"
|
||||
// : scope.row.checkFrom == 1
|
||||
// ? "南瑞继保"
|
||||
// : scope.row.checkFrom == 2
|
||||
// ? "/"
|
||||
// : scope.row.checkFrom;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// prop: "numberFromName",
|
||||
// label: "MAC/IP",
|
||||
// render: (scope) => {
|
||||
// return scope.row.numberFromName == 0
|
||||
// ? "192.168.0.1"
|
||||
// : scope.row.numberFromName == 1
|
||||
// ? "192.168.0.2"
|
||||
// : scope.row.numberFromName == 2
|
||||
// ? "192.168.0.3"
|
||||
// : scope.row.numberFromName;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// prop: "checkExe",
|
||||
// label: "检测脚本",
|
||||
@@ -428,7 +473,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
// },
|
||||
// },
|
||||
// { prop: "operation", label: "操作", fixed: "right", width: 250 },
|
||||
]);
|
||||
// ]);
|
||||
// 跳转详情页
|
||||
const toDetail = () => {
|
||||
router.push(
|
||||
@@ -507,7 +552,94 @@ const changeStatus = async (row: User.ResUserList) => {
|
||||
//顶部功能切换时修改activeTabs
|
||||
const changeActiveTabs = (val: number) => {
|
||||
form.value.activeTabs = val;
|
||||
tableHeaderInit(val)
|
||||
console.log(form,val,666)
|
||||
};
|
||||
|
||||
//根据当前功能，初始化表头下拉框中的默认值和禁用值
|
||||
function tableHeaderInit(val: number) {
|
||||
refreshStatusList()
|
||||
switch (val) {
|
||||
case 0://自动检测
|
||||
case 1://手动检测
|
||||
form.value.checkStatus = 0;//检测状态默认为未检
|
||||
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
|
||||
form.value.checkResult = 0;//检测结果默认为未出结果
|
||||
disableCheckStatus("检测中")
|
||||
disableCheckStatus("归档")
|
||||
break;
|
||||
case 2://设备复检
|
||||
form.value.checkStatus = 2;//检测状态默认为检测完成
|
||||
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
|
||||
form.value.checkResult = 1;//检测结果默认为不合格
|
||||
disableCheckStatus("未检")
|
||||
disableCheckStatus("检测中")
|
||||
disableCheckStatus("归档")
|
||||
disablecheckResultList("未出结果")
|
||||
break;
|
||||
case 3://报告生成
|
||||
form.value.checkStatus = 2;//检测状态默认为检测完成
|
||||
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
|
||||
form.value.checkResult = 2;//检测结果默认为合格
|
||||
disableCheckStatus("未检")
|
||||
disableCheckStatus("检测中")
|
||||
disableCheckStatus("归档")
|
||||
disablecheckResultList("未出结果")
|
||||
break;
|
||||
case 4://设备归档
|
||||
form.value.checkStatus = 2;//检测状态默认为检测完成
|
||||
form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
|
||||
form.value.checkResult = 2;//检测结果默认为合格
|
||||
disableCheckStatus("未检")
|
||||
disableCheckStatus("检测中")
|
||||
disableCheckStatus("归档")
|
||||
disableCheckReportStatus("未生成报告")
|
||||
disablecheckResultList("未出结果")
|
||||
break;
|
||||
case 5://报告浏览
|
||||
break;
|
||||
}
|
||||
}
|
||||
function refreshStatusList(){
|
||||
checkStatusList.map((item: any, index: any) => {
|
||||
if (item.disabled) {
|
||||
item.disabled = false;
|
||||
}
|
||||
});
|
||||
checkReportStatusList.map((item: any, index: any) => {
|
||||
if (item.disabled) {
|
||||
item.disabled = false;
|
||||
}
|
||||
});
|
||||
checkResultList.map((item: any, index: any) => {
|
||||
if (item.disabled) {
|
||||
item.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function disableCheckStatus(val: string){
|
||||
checkStatusList.map((item: any, index: any) => {
|
||||
if (val == item.label) {
|
||||
item.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
function disableCheckReportStatus(val: string){
|
||||
checkReportStatusList.map((item: any, index: any) => {
|
||||
if (val == item.label) {
|
||||
item.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
function disablecheckResultList(val: string){
|
||||
checkResultList.map((item: any, index: any) => {
|
||||
if (val == item.label) {
|
||||
item.disabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//启动自动检测/手动检测
|
||||
const handleTest = () => {
|
||||
//自动检测
|
||||
@@ -523,6 +655,7 @@ const handleTest = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log(proTable.value?.tableData);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user