ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
GYYM
2024-11-29 13:45:48 +08:00
parent a1d3485ba7
commit b39c076879
17 changed files with 871 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
frontend/src/views/home/components/table.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="table_info">
<!-- :request-api="getTableList" -->
<!-- :request-api="getTableList" -->
<ProTable
ref="proTable"
:columns="columns"
@@ -18,9 +18,9 @@
<template #tableHeader="scope">
<el-form :model="form" label-width="80px" :inline="true">
<el-form-item label="模糊搜索">
<el-input v-model="form.search" placeholder="请输入搜索内容" clearable></el-input>
<el-input v-model="form.search" placeholder="请输入搜索内容"></el-input>
</el-form-item>
<el-form-item label="检测状态">
<el-form-item label="检测状态" v-if="form.activeTabs != 3 && form.activeTabs != 5">
<el-select v-model="form.checkStatus" clearable>
<el-option
v-for="(item, index) in checkStatusList"
@@ -31,17 +31,6 @@
></el-option>
</el-select>
</el-form-item>
<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="检测结果">
<el-select v-model="form.checkResult" clearable>
<el-option
@@ -53,10 +42,35 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报告状态" v-if="form.activeTabs != 0 && form.activeTabs != 4">
<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="检测结果">
<el-select v-model="form.checkResult" clearable>
<el-option
v-for="(item, index) in checkResultList"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:key="index"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch"
>查询</el-button
>
<el-button :icon="Delete" @click="handleRefresh"
>重置</el-button
>
<el-button
type="primary"
:icon="Clock"
@@ -78,10 +92,13 @@
>全部复检</el-button
>
<el-button type="primary" :icon="Postcard" @click="handleTest('批量生成')" v-if="form.activeTabs === 3"
<el-button type="primary" :icon="Download" :disabled='!scope.isSelected' @click="handleTest('批量下载')" v-if="form.activeTabs === 3"
>批量下载</el-button
>
<el-button type="primary" :icon="Postcard" :disabled='!scope.isSelected' @click="handleTest('批量生成')" v-if="form.activeTabs === 3"
>批量生成</el-button
>
<el-button type="primary" :icon="Notebook" @click="handleTest('批量归档')" v-if="form.activeTabs === 4"
>批量归档</el-button
>
@@ -100,8 +117,8 @@
>
<div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
<el-dropdown trigger='click'>
<el-button link type='primary' :icon="View" class='table-operate'>
<div class='table-operate-text'>查看</div>
<el-button link type='primary' :icon="Download" class='table-operate'>
<div class='table-operate-text'>下载</div>
</el-button>
<template #dropdown>
<el-dropdown-menu>
@@ -134,7 +151,7 @@
link
:icon="Notebook"
@click="openDrawer('归档', scope.row)"
v-if="form.activeTabs === 4"
v-if="form.activeTabs === 0"
>归档</el-button
>
<el-button
@@ -201,7 +218,7 @@ import { ElMessage, ElMessageBox, ElLoading} from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import {
Search,View,EditPen,Clock,ChatLineRound,ChatLineSquare,ChatDotSquare,Postcard,Notebook,Switch,PieChart
Search,View,Delete,Download,EditPen,Clock,ChatLineRound,ChatLineSquare,ChatDotSquare,Postcard,Notebook,Switch,PieChart
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
import deviceDataList from '@/api/device/device/deviceData'
@@ -209,7 +226,7 @@ import testPopup from "./testPopup.vue";
import reportPopup from "./reportPopup.vue";
import dataCheckPopup from "./dataCheckPopup.vue";
import dataCheckChangeErrSysPopup from "./dataCheckChangeErrSysPopup.vue";
import { isVisible } from "element-plus/es/utils";
import { reactive, ref } from "vue";
const tableKey = ref(0);
@@ -234,9 +251,12 @@ const dialogForm = ref<any>({
});
//console.log(window.innerHeight, "+++++++++");
tableHeight.value = window.innerHeight - 600;
const deviceData = deviceDataList.plan_devicedata
//const deviceData = deviceDataList.plan_devicedata
const deviceData = ref([]);
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.document_State === "未归档")
const operationShow = ref(false);
const operationMinWidth = ref(200);
//下拉框数据
//检测状态数据
let checkStatusList = reactive([
@@ -263,31 +283,36 @@ let checkStatusList = reactive([
]);
//检测报告状态数据
let checkReportStatusList = reactive([
{
label: "未生成报告",
{
label: "未检测",
value: 0,
disabled: false,
},
{
label: "已生成报告",
label: "未生成",
value: 1,
disabled: false,
},
{
label: "已生成",
value: 2,
disabled: false,
},
]);
//检测结果数组
let checkResultList = reactive([
{
label: "未出结果",
label: "未检测",
value: 0,
disabled: false,
},
{
label: "不合格",
label: "有不合格项",
value: 1,
disabled: false,
},
{
label: "合格",
label: "全部合格",
value: 2,
disabled: false,
},
@@ -350,10 +375,11 @@ let checkResultList = reactive([
//查询条件
const form: any = ref({
activeTabs: 0, //功能选择
search: "",//搜索内容
activeChildTabs: 0,//子功能选择
checkStatus: 0, //检测状态
checkReportStatus: 0, //检测报告状态
checkResult: 0, //检测结果
checkStatus: null, //检测状态
checkResult: null, //检测结果
checkReportStatus: null, //检测报告状态
deviceBindStatus: 0, //绑定状态
deviceType: 0, //设备类型
manufacturer: 0, //制造厂商
@@ -416,8 +442,8 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
minWidth: 100,
},
{
prop: 'report_State',
label: '报告状态',
prop: 'check_State',
label: '检测状态',
minWidth: 100,
},
{
@@ -426,8 +452,8 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
minWidth: 100,
},
{
prop: 'check_State',
label: '检测状态',
prop: 'report_State',
label: '报告状态',
minWidth: 100,
},
{
@@ -599,17 +625,51 @@ const resetSearchForm = () => {
checkResult: 0,
};
};
let testType = "test";//检测还是复检
const handleSelectionChange = (selection: any[]) => {
const result = selection.filter((item) => item.check_Result != "有不合格项")
if(result.length > 0)
{
testType= "test";
}
else
{
testType= "reTest";
}
console.log(selection);
}
//查询
const handleSearch = () => {
matchDialogVisible.value = true;
if(form.value.activeTabs === 0 || form.value.activeTabs === 4)//设备检测、设备归档
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.document_State === "未归档")
}
else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成");
}
//matchDialogVisible.value = true;
//proTable.value?.getTableList();
};
//重置
const handleRefresh = () => {
proTable.value?.getTableList();
form.value.search = "";
form.value.checkStatus = null;
form.value.checkResult = null;
form.value.checkReportStatus = null;
if(form.value.activeTabs === 0 || form.value.activeTabs === 4)//设备检测、设备归档
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.document_State === "未归档")
}
else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成");
}
};
// 表格拖拽排序
const sortTable = ({
@@ -661,75 +721,77 @@ const changeStatus = async (row: User.ResUserList) => {
proTable.value?.getTableList();
};
//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number,val2: number) => {
const changeActiveTabs = (val: number,val2: number,tabledata:any[]) => {
form.value.activeTabs = val;
form.value.activeChildTabs= val2;
deviceData.value = tabledata;
tableHeaderInit(val)
console.log(form,val,val2,666)
};
//根据当前功能，初始化表头下拉框中的默认值和禁用值
function tableHeaderInit(val: number) {
refreshStatusList()
switch (val) {
case 0://自动检测
case 0://设备检测
case 1://手动检测
form.value.checkStatus = 0;//检测状态默认为未检
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 0;//检测结果默认为未出结果
disableCheckStatus("检测中")
//disableCheckStatus("检测中")
disableCheckStatus("归档")
operationShow.value = false;
// operationShow.value = false;
columns[columns.length - 1].minWidth = 100;
tableKey.value ++;
operationShow.value = true;
break;
case 2://设备复检
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 1;//检测结果默认为不合格
disableCheckStatus("未检测")
disableCheckStatus("检测中")
disableCheckStatus("归档")
disablecheckResultList("未出结果")
operationShow.value = false;
// form.value.checkStatus = 2;//检测状态默认为检测完成
// form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
// form.value.checkResult = 1;//检测结果默认为不合格
// disableCheckStatus("未检测")
// disableCheckStatus("检测中")
// disableCheckStatus("归档")
// disablecheckResultList("未出结果")
// operationShow.value = false;
break;
case 3://报告生成
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 2;//检测结果默认为合格
disableCheckStatus("未检测")
disableCheckStatus("检测中")
disableCheckStatus("归档")
disablecheckResultList("未出结果")
// form.value.checkStatus = 2;//检测状态默认为检测完成
// form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
// form.value.checkResult = 2;//检测结果默认为合格
// disableCheckStatus("未检测")
// disableCheckStatus("检测中")
// disableCheckStatus("归档")
disablecheckResultList("未检测")
disableCheckReportStatus("未检测")
columns[columns.length - 1].minWidth = 150;
tableKey.value += 1;
operationShow.value = true;
break;
case 4://设备归档
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
form.value.checkResult = 2;//检测结果默认为合格
disableCheckStatus("未检测")
disableCheckStatus("检测中")
disableCheckStatus("归档")
// form.value.checkStatus = 2;//检测状态默认为检测完成
// form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
// form.value.checkResult = 2;//检测结果默认为合格
// disableCheckStatus("未检测")
// disableCheckStatus("检测中")
// disableCheckStatus("归档")
disableCheckReportStatus("未生成报告")
disablecheckResultList("未出结果")
columns[columns.length - 1].minWidth = 100;
tableKey.value ++;
operationShow.value = true;
break;
case 5://数据查询
disablecheckResultList("未检测")
disableCheckReportStatus("未检测")
columns[columns.length - 1].minWidth = 250;
tableKey.value += 1;
operationShow.value = true;
break;
}
console.log("test",columns);
}
tableHeaderInit(0)
function refreshStatusList(){
checkStatusList.map((item: any, index: any) => {
if (item.disabled) {
@@ -746,6 +808,10 @@ function refreshStatusList(){
item.disabled = false;
}
});
form.value.checkStatus = null;//检测状态默认为未检
form.value.checkReportStatus = null;//检测报告状态默认为未生成报告
form.value.checkResult = null;//检测结果默认为未出结果
}
function disableCheckStatus(val: string){
@@ -775,9 +841,41 @@ const handleTest = (val:string) => {
if(val==='手动检测'||val==='自动检测'||val==='不合格项复检'||val==='全部复检' )
{
ElMessage.success(val);
if(testType === "reTest")
{
ElMessageBox.confirm(
'请选择复检检测方式',
'设备复检',
{
distinguishCancelAndClose: true,
confirmButtonText: '不合格项复检',
cancelButtonText: '全部复检',
type: 'warning',
},
)
.then(() => {
ElMessage.success(val);
dialogTitle.value = val;
dialogFormVisible.value = true; // 打开对话框
})
// .catch((action: Action) => {
// ElMessage({
// type: 'info',
// message:
// action === 'cancel'
// ? '以当前数据为主完成数据覆盖'
// : '取消本次导入操作',
// })
// })
}
else
{
ElMessage.success(val);
dialogTitle.value = val;
dialogFormVisible.value = true; // 打开对话框
}
}
if(val==='批量生成')