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

<template>
  <div class="table_info">
    <ProTable
      ref="proTable"
      :columns="columns"
      :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="检测状态" v-if="form.activeTabs != 5">
            <el-select v-model="form.checkStatus">
              <el-option
                v-for="(item, index) in checkStatusList"
                :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.checkReportStatus">
              <el-option
                v-for="(item, index) in checkReportStatusList"
                :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.checkResult">
              <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"
                :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="handleDetection"
              v-if="form.activeTabs === 0"
              >启动自动检测</el-button
            >
            <el-button
              type="primary"
              @click="handleDetection"
              v-if="form.activeTabs === 1"
              >启动手动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
              >报告生成</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 5"
              >设备导入</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 表格操作 -->
      <!-- <template #operation="scope">
        <el-button
          type="primary"
          link
          :icon="View"
          @click="openDrawer('查看', scope.row)"
          >查看</el-button
        >
        <el-button
          type="primary"
          link
          :icon="EditPen"
          @click="openDrawer('编辑', scope.row)"
          >导出</el-button
        >
        <el-button
          type="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 { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import {
  Search,
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
const tableHeight = ref(0);
console.log(window.innerHeight, "+++++++++");
tableHeight.value = window.innerHeight - 630;

//下拉框数据
//检测状态数据
const checkStatusList = [
  {
    label: "未检测",
    value: 0,
  },
  {
    label: "检测中",
    value: 1,
  },
  {
    label: "检测完成",
    value: 2,
  },
  {
    label: "归档",
    value: 3,
  },
];
//检测报告状态数据
const checkReportStatusList = [
  {
    label: "未生成报告",
    value: 0,
  },
  {
    label: "已生成报告",
    value: 1,
  },
];
//检测结果数组
const checkResultList = [
  {
    label: "/",
    value: null,
  },
  {
    label: "不合格",
    value: 0,
  },
  {
    label: "合格",
    value: 1,
  },
];
//绑定状态数组
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 form: any = ref({
  activeTabs: 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<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) => {
  form.value.activeTabs = val;
};
//启动自动检测/手动检测
const handleDetection = () => {
  //自动检测
  if (form.value.activeTabs === 0) {
    ElMessage.success("自动检测");
  }else{
    ElMessage.warning("手动检测");
  }
};
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>