shuili-vue/src/views/dike/runManage/patrolMaintenance/defectList/index.vue

<!-- 缺陷清单管理 -->
<template>
  <div class="slider-right">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>
    <div class="table-box slider-right-body" ref="tableBoxRef">
      <div class="pb-16" ref="topBoxRef">
        <div class="search-form flex flex-wrap" ref="searchFormRef">
          <div class="search-item flex items-center">
            <span class="search-label">巡查名称</span>
            <el-input
              clearable
              size="small"
              class="w-202 ml-10"
              :maxlength="50"
              v-model="paramsData.name"
              placeholder="请输入名称"
            />
          </div>

          <div class="search-item flex items-center">
            <span class="search-label">巡查类型</span>
            <el-select
              clearable
              size="small"
              class="w-202 ml-10"
              v-model="paramsData.type"
              :popper-append-to-body="false"
              filterable
              placeholder="请选择"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option
                v-for="item in maintenanceType"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>

          <div class="search-item flex items-center">
            <span class="search-label">巡查时间</span>
            <el-date-picker
              size="small"
              class="ml-10"
              v-model="paramsData.time"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>

          <div class="search-item flex items-center">
            <span class="search-label">巡查责任人</span>
            <el-input
              clearable
              size="small"
              class="w-202 ml-10"
              :maxlength="50"
              v-model="paramsData.dutyHolder"
              placeholder="请输入名称"
            />
          </div>

          <div class="search-item flex items-center">
            <span class="search-label">巡查类别</span>
            <el-select
              clearable
              size="small"
              class="w-202 ml-10"
              v-model="paramsData.category"
              :popper-append-to-body="false"
              filterable
              placeholder="请选择"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option
                v-for="item in maintenanceCategory"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>

          <div class="search-item flex items-center">
            <span class="search-label">巡查状态</span>
            <el-select
              clearable
              size="small"
              class="w-202 ml-10"
              v-model="paramsData.status"
              :popper-append-to-body="false"
              filterable
              placeholder="请选择"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option
                v-for="item in maintenanceStatus"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search-item flex items-center">
            <span class="search-label">问题等级</span>
            <el-select
              clearable
              size="small"
              class="w-202 ml-10"
              v-model="paramsData.level"
              :popper-append-to-body="false"
              filterable
              placeholder="请选择"
            >
              <el-option label="全部" value=""> </el-option>
              <el-option
                v-for="item in maintenanceLevel"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </div>
          <div class="flex-1 flex justify-end search-item">
            <el-button
              size="small"
              class="flex-shrink-0 myml-12"
              type="success"
              @click="handleChangeQuery"
            >查询</el-button
            >
            <el-button
              class="flex-shrink-0"
              size="small"
              @click="handleResetQuery"
            >重置</el-button
            >
          </div>
        </div>
        <div class="line" ref="lineRef"></div>
      </div>
      <el-table
        :height="tableHeight"
        :data="tableData"
        border
      >
        <el-table-column prop="id" align="center" label="单号" />
        <el-table-column prop="checkingName" align="center" label="巡查名称" />
        <el-table-column prop="type" align="center" label="巡查类型">
          <template slot-scope="scope">
            <span>{{
                getDictLabelName(scope.row.type, "maintenanceType")
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="category" align="center" label="巡查类别">
          <template slot-scope="scope">
            <span>{{
                getDictLabelName(scope.row.category, "maintenanceCategory")
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="level" align="center" label="问题等级">
          <template slot-scope="scope">
            <span>{{
                getDictLabelName(scope.row.level, "maintenanceLevel")
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="巡查状态">
          <template slot-scope="scope">
            <span>{{
                getDictLabelName(scope.row.status, "maintenanceStatus")
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dutyHolderName" align="center" label="责任人" />
        <el-table-column
          prop="startDate"
          align="center"
          label="巡查开始时间/结束时间"
        >
          <template slot-scope="scope">
            <span
            >{{ scope.row.startDate || "-" }}/{{
                scope.row.endDate || "-"
              }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="opera"
          align="center"
          label="操作"
          fixed="right"
          width="168"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleCheckDetails(scope.row, false)"
            >领单</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleCheckDetails(scope.row, true)"
            >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="pagination"
        style="margin-top: 16px; margin-right: 16px; float: right"
        :current-page="pageData.pageNum"
        :page-sizes="pageData.pageSizes"
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageData.total"
        @size-change="(e) => handlePageSizeChange(e)"
        @current-change="(e) => handleCurrentPageChange(e)"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle/index.vue";
import { calcTableHeight } from "@/mixins/calcTableHeight";

import {
  postV2ProblemList
} from "@/api/dike/patrolMaintenance";
export default {
  components: {TopBackTitle},
  mixins: [calcTableHeight],
  data() {
    return {
      tableData: [{
        id: 1
      }],
      maintenanceStatus: [],
      maintenanceCategory: [],
      maintenanceType: [],
      maintenanceLevel: [],
      paramsData: {
        name: "",
        type: "",
        time: [],
        dutyHolder: '',
        category: '',
        status: ''
      },
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0, // 总数量
      },
    };
  },
  created() {
    this.getDicts("patrol_maintenance_status").then((response) => {
      this.maintenanceStatus = response.data;
    });
    this.getDicts("patrol_maintenance_category").then((response) => {
      this.maintenanceCategory = response.data;
    });
    this.getDicts("patrol_maintenance_type").then((response) => {
      this.maintenanceType = response.data;
    });
    this.getDicts("patrol_maintenance_level").then((response) => {
      this.maintenanceLevel = response.data;
    });
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    handleCurrentPageChange(page) {
      this.pageData.pageNum = page;
      this.getTableData();
    },
    handlePageSizeChange(pageSize) {
      this.pageData.pageSize = pageSize;
      this.getTableData();
    },
    handleCheckDetails() {
      this.$router.push({
        path: "defectDetails",
      });
    },
    getDictLabelName(type, dictListName) {
      if (!this[dictListName]) return "";
      return (
        this[dictListName].find((item) => item.dictValue === type)?.dictLabel ||
        ""
      );
    },
    // 查询
    handleChangeQuery() {
      this.reqCountCalc();
      this.pageData.pageNum = 1;
      this.getTableData();
    },
    // 重置搜索
    handleResetQuery() {
      this.paramsData.name = "";
      this.paramsData.type = "";
      this.paramsData.time = [];
      this.paramsData.dutyHolder = "";
      this.paramsData.category = "";
      this.paramsData.status = "";
      this.reqCountCalc();
      this.pageData.pageNum = 1;
      this.getTableData();
    },
    getTableData() {
      const data = {
        name: this.paramsData.name,
        type: this.paramsData.type,
        dutyHolder: this.paramsData.dutyHolder,
        category: this.paramsData.category,
        status: this.paramsData.status,
        startTime: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[0] : '',
        endTime: this.paramsData.time && this.paramsData.time.length > 1 ? this.paramsData.time[1] : '',
      }
      postV2ProblemList({
        data: {
          timeView: {
            timeField: "create_time",
          },
          ...data,
        },
        params: {
          sort: "desc",
          orderBy: "create_time",
        },
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
      }).then((res) => {
        if (res) {
          this.tableData = [{
            id: 1
          }];
          this.pageData.total = res.total;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.search-form {
  .search-item {
    margin-bottom: 16px;
    .search-label {
      width: 120px;
      text-align: right;
      flex-shrink: 0;
    }
  }
}
</style>