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

<template>
  <div class="planList">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @drag-sort="sortTable"
      :height="tableHeight"
    >
      <!-- 表格操作 -->
      <!-- <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 { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import {
  CirclePlus,
  Delete,
  EditPen,
  Download, 
  Upload,
  View,
  Refresh,
  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-700;

// 跳转详情页
const toDetail = () => {
  router.push(
    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
  );
};
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: "设备序列号",
    render: (scope) => {
      return scope.row.checkMode == 0
        ? "设备1"
        : scope.row.checkMode == 1
          ? "设备2"
          : scope.row.checkMode == 2
            ? "设备3"
            : scope.row.checkMode;
    },
  },
  {
    prop: "checkMode",
    label: "设备类型",
    render: (scope) => {
      return scope.row.checkMode == 0
        ? "PQS991"
        : scope.row.checkMode == 1
          ? "PQS882"
          : scope.row.checkMode == 2
            ? "PQS6666"
            : scope.row.checkMode;
    },
  },
  {
    prop: "checkFrom",
    label: "制造厂商",
    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 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();
};
onMounted(() => {
  console.log(proTable.value?.tableData);
});
</script>
<style lang="scss" scoped>
.planList {
  width: 100%;
  height: 100%;
}
::v-deep .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>