pqs-9100_client/frontend/src/views/plan/planList/index.vue

<template>
  <div class="table-box planList">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :data-callback="dataCallback"
      @drag-sort="sortTable"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-form :model="searchForm">
          <el-form-item label="检测时间">
            <el-select
              v-model="searchForm.intervalType"
              style="width: 100px !important"
            >
              <el-option :value="0" label="按周">按周</el-option>
              <el-option :value="1" label="按月">按月</el-option>
              <el-option :value="2" label="按日">按日</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker> </el-date-picker>
          </el-form-item>
          <el-form-item label="检测状态">
            <el-select v-model="searchForm.checkStatus">
              <el-option :value="0" label="全部"></el-option>
              <el-option :value="1" label="未检测"></el-option>
              <el-option :value="2" label="检测中"></el-option>
              <el-option :value="3" label="检测完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测报告状态">
            <el-select v-model="searchForm.checkReportStatus">
              <el-option :value="0" label="全部"></el-option>
              <el-option :value="1" label="未生成"></el-option>
              <el-option :value="2" label="部分生成"></el-option>
              <el-option :value="3" label="全部生成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检测结果">
            <el-select v-model="searchForm.checkResult">
              <el-option :value="0" label="全部"></el-option>
              <el-option :value="1" label="/"></el-option>
              <el-option :value="2" label="符合"></el-option>
              <el-option :value="3" label="不符合"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>

        <!-- <el-button
          v-auth="'add'"
          type="primary"
          :icon="CirclePlus"
          @click="openDrawer('新增')"
          >新增用户</el-button
        >
        <el-button
          v-auth="'batchAdd'"
          type="primary"
          :icon="Upload"
          plain
          @click="batchAdd"
          >批量添加用户</el-button
        >
        <el-button
          v-auth="'export'"
          type="primary"
          :icon="Download"
          plain
          @click="downloadFile"
          >导出用户数据</el-button
        >
        <el-button type="primary" plain @click="toDetail"
          >To 子集详情页面</el-button
        >
        <el-button
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除用户
        </el-button> -->
      </template>
      <!-- Expand -->
      <!-- <template #expand="scope">
        {{ scope.row }}
      </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 { 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,
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
const router = useRouter();

// 跳转详情页
const toDetail = () => {
  router.push(
    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
  );
};
const searchForm = ref({
  intervalType: 0,
  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([]);
// console.log(data, ">>>>>>>>>>>");
//   tableList.value = data;
//   console.log(tableList.value, "?????????????????????177");
const dataCallback = (data: any) => {
  return {
    list: data || data.data || data.list,
    total: data.length || data.total, //total
  };
};
console.log(proTable.value, "proTable.value?proTable.value?proTable.value?");
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：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 },
  //   { type: "sort", label: "Sort", width: 80 },
  //   { type: "expand", label: "Expand", width: 85 },
  {
    prop: "planName",
    label: "计划名称",
    width: 120,
  },
  {
    prop: "checkMode",
    label: "检测模式",
    width: 120,
    render: (scope) => {
      return scope.row.checkMode == 0
        ? "模拟式"
        : scope.row.checkMode == 1
          ? "对比式"
          : scope.row.checkMode == 2
            ? "数字式"
            : scope.row.checkMode;
    },
  },
  {
    prop: "checkFrom",
    label: "检测源",
    Width: 120,
    render: (scope) => {
      return scope.row.checkFrom == 0
        ? "标准源-福禄克-6100A"
        : scope.row.checkFrom == 1
          ? "标准源-昂立-PF2"
          : scope.row.checkFrom == 2
            ? "高精度设备-PQS882-1"
            : scope.row.checkFrom;
    },
  },
  {
    prop: "numberFromName",
    label: "数字源名称",
    width: 120,
    render: (scope) => {
      return scope.row.numberFromName == 0
        ? "分钟统计数据最大值"
        : scope.row.numberFromName == 1
          ? "分钟统计数据最小值"
          : scope.row.numberFromName == 2
            ? "分钟统计数据CP95值"
            : scope.row.numberFromName;
    },
  },
  {
    prop: "checkExe",
    label: "检测脚本",
    width: 120,
    render: (scope) => {
      return scope.row.checkExe == 0
        ? "国网入网检测脚本（单影响量-模拟式）"
        : scope.row.checkExe == 1
          ? "国网入网检测脚本"
          : scope.row.checkExe == 2
            ? "/"
            : scope.row.checkExe;
    },
  },
  {
    prop: "wctx",
    label: "误差体系",
    width: 120,
    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 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: calc(100vh - 130px);
}
::v-deep .el-select {
  width: 180px !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>