pqs-9100_client/frontend/src/views/home/components/table.vue

<template>
  <div class="table_info">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data='deviceData'
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @drag-sort="sortTable"
      :height="tableHeight"
      :stripe="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-form :model="form" label-width="80px" :inline="true">
          <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="报告状态">
            <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
              type="primary"
              @click="handleTest"
              v-if="form.activeTabs === 0"
              >手动检测</el-button
            >
            <el-button
              type="primary"
              @click="handleTest"
              v-if="form.activeTabs === 0"
              >自动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
              >不合格项复检</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>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button
        type="primary"
          link
          :icon="View"
          @click="openDrawer('查看', scope.row)"
          v-if="form.activeTabs === 3 && form.activeChildTabs === 0"
          >查看</el-button
        >
        <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 1">
          <el-dropdown trigger='click'>
            <el-button link type='primary' :icon="View" class='table-operate'>
              <div class='table-operate-text'>查看...</div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Q/GDW 10650.2-2021 报告</el-dropdown-item>
                <el-dropdown-item>Q/GDW 1650.2-2016 报告</el-dropdown-item>
                <el-dropdown-item>GBT 19862-2016 报告</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <el-button
        type="primary"
          link
          :icon="EditPen"
          @click="openDrawer('生成', scope.row)"
          v-if="form.activeTabs === 3"
          >生成</el-button
        >
        <el-button
        type="primary"
          link
          :icon="View"
          @click="openDrawer('数据查看', scope.row)"
          v-if="form.activeTabs === 4"
          >数据查看</el-button
        >
        <el-button
        type="primary"
          link
          :icon="EditPen"
          @click="openDrawer('归档', scope.row)"
          v-if="form.activeTabs === 4"
          >归档</el-button
        >
        <el-button
        type="primary"
          link
          :icon="EditPen"
          @click="openDrawer('误差体系编辑', scope.row)"
          v-if="form.activeTabs === 5"
          >误差体系编辑</el-button
        >
        <!-- <el-button
          dictType="primary"
          link
          :icon="Delete"
          @click="deleteAccount(scope.row)"
          >删除</el-button
        > -->
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { useRouter } from "vue-router";
import type { Device } from '@/api/device/interface/device'
import { useHandleData } from "@/hooks/useHandleData";
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
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
import deviceDataList from '@/api/device/device/deviceData'
import { log } from "console";
import { isVisible } from "element-plus/es/utils";
import { reactive, ref } from "vue";
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 operationShow = ref(false);
//下拉框数据
//检测状态数据
let checkStatusList = reactive([
  {
    label: "未检测",
    value: 0,
    disabled: false,
  },
  {
    label: "检测中",
    value: 1,
    disabled: false,
  },
  {
    label: "检测完成",
    value: 2,
    disabled: false,
  },
  {
    label: "归档",
    value: 3,
    disabled: false,
  },
]);
//检测报告状态数据
let checkReportStatusList = reactive([
  {
    label: "未生成报告",
    value: 0,
    disabled: false,
  },
  {
    label: "已生成报告",
    value: 1,
    disabled: false,
  },
]);
//检测结果数组
let checkResultList = reactive([
  {
    label: "未出结果",
    value: 0,
    disabled: false,
  },
  {
    label: "不合格",
    value: 1,
    disabled: false,
  },
  {
    label: "合格",
    value: 2,
    disabled: false,
  },
]);
//绑定状态数组
// 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, //功能选择
  activeChildTabs: 0,//子功能选择
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
  deviceBindStatus: 0, //绑定状态
  deviceType: 0, //设备类型
  manufacturer: 0, //制造厂商
});
const searchForm = ref({
  intervalType: 0,
  time: ["2024-08-20", "2024-08-27"],
  searchBeginTime: "",
  searchEndTime: "",
  checkStatus: 0,
  checkReportStatus: 0,
  checkResult: 0,
});
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([]);
const dataCallback = (data: any) => {
  return {
    list: data || data.data || data.list,
    total: data.length || data.total, //total
  };
};
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getPlanList(newParams);
};

// 表格配置项
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
    { type: 'selection', fixed: 'left', width: 70 },
    {
      prop: 'name',
      label: '名称',
      minWidth: 120,
    },
    {
      prop: 'dev_Type',
      label: '类型',
      minWidth: 100,
    },
    {
      prop: 'dev_Chns',
      label: '通道数',
      minWidth: 100,
    },
    {
      prop: 'reCheck_Num',
      label: '复检次数',
      minWidth: 100,
    },
    {
      prop: 'report_State',
      label: '报告状态',
      minWidth: 100,
    },
    {
      prop: 'check_Result',
      label: '检测结果',
      minWidth: 100,
    },
    {
      prop: 'check_State',
      label: '检测状态',
      minWidth: 100,
    },
    {
      prop: 'document_State',
      label: '归档状态',
      minWidth: 100,
    },
    { prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 ,isShow: operationShow},
  ])

// 表格配置项
// 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: "检测脚本",
  //   render: (scope) => {
  //     return scope.row.checkExe == 0
  //       ? "国网入网检测脚本（单影响量-模拟式）"
  //       : scope.row.checkExe == 1
  //         ? "国网入网检测脚本"
  //         : scope.row.checkExe == 2
  //           ? "/"
  //           : scope.row.checkExe;
  //   },
  // },
  // {
  //   prop: "wctx",
  //   label: "误差体系",
  //   render: (scope) => {
  //     return scope.row.wctx == 0
  //       ? "Q/GDW 1650.2- 2016"
  //       : scope.row.wctx == 1
  //         ? "Q/GDW 10650.2 - 2021"
  //         : scope.row.wctx == 2
  //           ? "/"
  //           : scope.row.wctx;
  //   },
  // },
  // {
  //   prop: "checkStatus",
  //   label: "检测状态",
  //   width: 120,
  //   render: (scope) => {
  //     return scope.row.checkStatus == 1
  //       ? "未检测"
  //       : scope.row.checkStatus == 2
  //         ? "检测中"
  //         : scope.row.checkStatus == 3
  //           ? "检测完成"
  //           : scope.row.checkStatus;
  //   },
  // },
  // {
  //   prop: "checkReport",
  //   label: "检测报告",
  //   width: 120,
  //   render: (scope) => {
  //     return scope.row.checkReport == 1
  //       ? "未生成"
  //       : scope.row.checkReport == 2
  //         ? "部分生成"
  //         : scope.row.checkReport == 3
  //           ? "全部生成"
  //           : scope.row.checkReport;
  //   },
  // },
  // {
  //   prop: "checkResult",
  //   label: "检测结果",
  //   width: 120,
  //   render: (scope) => {
  //     return scope.row.checkReport == 1
  //       ? "/"
  //       : scope.row.checkReport == 2
  //         ? "符合"
  //         : scope.row.checkReport == 3
  //           ? "不符合"
  //           : scope.row.checkReport;
  //   },
  // },
  // {
  //   prop: "parentNode",
  //   label: "父节点",
  //   width: 90,
  //   render: (scope) => {
  //     return scope.row.checkReport == 0
  //       ? "/"
  //       : scope.row.checkReport == 1
  //         ? "检测计划1"
  //         : scope.row.checkReport == 2
  //           ? "检测计划2"
  //           : scope.row.checkReport == 3
  //             ? "检测计划3"
  //             : scope.row.checkReport;
  //   },
  // },
  // { prop: "operation", label: "操作", fixed: "right", width: 250 },
// ]);
// 跳转详情页
const toDetail = () => {
  router.push(
    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
  );
};
//重置查询条件
const resetSearchForm = () => {
  searchForm.value = {
    intervalType: 0,
    time: ["2024-08-20", "2024-08-27"],
    searchBeginTime: "",
    searchEndTime: "",
    checkStatus: 0,
    checkReportStatus: 0,
    checkResult: 0,
  };
};
//查询
const handleSearch = () => {
  proTable.value?.getTableList();
};
//重置
const handleRefresh = () => {
  proTable.value?.getTableList();
};
// 表格拖拽排序
const sortTable = ({
  newIndex,
  oldIndex,
}: {
  newIndex?: number;
  oldIndex?: number;
}) => {
  //console.log(newIndex, oldIndex);
  //console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
};

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
  await useHandleData(
    deleteUser,
    { id: [params.id] },
    `删除【${params.username}】`
  );
  proTable.value?.getTableList();
};

// 批量删除用户信息
const batchDelete = async (id: string[]) => {
  await useHandleData(deleteUser, { id }, "删除所选用户信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};

// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
  await useHandleData(
    resetUserPassWord,
    { id: params.id },
    `重置【${params.username}】用户密码`
  );
  proTable.value?.getTableList();
};

// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
  await useHandleData(
    changeUserStatus,
    { id: row.id, status: row.status == 1 ? 0 : 1 },
    `切换【${row.username}】用户状态`
  );
  proTable.value?.getTableList();
};
//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number,val2: number) => {
  form.value.activeTabs = val;
  form.value.activeChildTabs= val2;
  tableHeaderInit(val)
  console.log(form,val,val2,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("归档")
      operationShow.value = false;
      break;
    case 2://设备复检
      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("未出结果")
      operationShow.value = true;
    break;
    case 4://设备归档
      form.value.checkStatus = 2;//检测状态默认为检测完成
      form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
      form.value.checkResult = 2;//检测结果默认为合格
      disableCheckStatus("未检测")
      disableCheckStatus("检测中")
      disableCheckStatus("归档")
      disableCheckReportStatus("未生成报告")
      disablecheckResultList("未出结果")
      operationShow.value = true;
    break;
    case 5://设备浏览
    operationShow.value = true;
    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 = () => {
  //自动检测
  if (form.value.activeTabs === 0) {
    ElMessage.success("手动检测");
    router.push({
      path: "/plan/autoTest",
    });
  } else {
    ElMessage.warning("手动检测");
    router.push({
      path: "/plan/preTest",
    });
  }
};


// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: any) => {
  if (title === '查看')
  {
    console.log(title);
    const link = document.createElement('a');
    const fileUrl = 'G:/南网数研院非结构化数据生成程序MMS_JSON修改记录.docx'; // 文件路径
    link.href = fileUrl;
    link.target = '_blank'; // 在新标签页中打开
    link.download = 'file.docx'; // 设置下载文件的名称
    link.click();
  }
      
    else if (title === '误差体系编辑')
    console.log(title);

    if (title === '归档')
    {
      const loading = ElLoading.service({
      lock: true,
      text: '归档中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
      loading.close()
      ElMessage.success("归档成功");
    }, 2000)
    }
}

onMounted(() => {
  //console.log(proTable.value?.tableData);
});
defineExpose({ changeActiveTabs });
</script>
<style lang="scss" scoped>
/* 当屏幕宽度小于或等于1300像素时 */
@media screen and (max-width: 1300px) {
  .el-select {
    width: 130px !important;
  }
}
@media screen and (min-width: 1300px) {
  .el-select {
    width: 150px !important;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-button {
      margin: 0 !important;
      margin-right: 10px !important;
    }
  }
}
</style>