zhgdyun/src/views/projectFront/dailyCheck/settleCheck.vue

  <!-- 整改巡检 -->
<template>
  <vue-scroll style="height: 100%">
    <div class="basicInfo" v-if="!showDetails">
      <div class="title whiteBlock">
        <el-form
          :inline="true"
          size="medium"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-form-item>
            <!-- 请选择 -->
            <el-select v-model="searchForm.state" :placeholder="$t('message.projectManage.pleaseChoose')">
              <!-- 全部 -->
              <el-option :label="$t('message.projectManage.all')" value=""></el-option>
              <!-- 待整改 -->
              <el-option :label="$t('message.projectManage.awaitChange')" :value="1"></el-option>
              <!-- 待审核 -->
              <el-option :label="$t('message.projectManage.awaitAudit')" :value="2"></el-option>
              <!-- 已整改 -->
              <el-option :label="$t('message.projectManage.alreadyComplete')" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- 至 开始日期 结束日期 -->
            <el-date-picker
              v-model="startTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              :range-separator="$t('message.projectManage.to')"
              :start-placeholder="$t('message.projectManage.startData')"
              :end-placeholder="$t('message.projectManage.endData')"
              @change="datePicker"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="queryBtn">
              <!-- 查询 -->
              {{$t('message.projectManage.query')}}
            </el-button>
            <el-button type="warning" plain @click="refreshBtn">
              <!-- 刷新 -->
               {{$t('message.projectManage.fresh')}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content whiteBlock">
        <el-table
          :data="tableData"
          class="tables"
          style="width: 100%"
          height="600px"
        >
        <!-- 序号 -->
          <el-table-column type="index" width="50" :label="$t('message.projectManage.serialNumber')">
          </el-table-column>
          <!-- 巡检位置 -->
          <el-table-column prop="inspectPlace" :label="$t('message.projectManage.pollingLocation')"> </el-table-column>
          <!-- 巡检内容 -->
          <el-table-column prop="inspectContent" :label="$t('message.projectManage.pollingContent')"></el-table-column>
          <!-- 检查人 -->
          <el-table-column prop="inspectorName" :label="$t('message.projectManage.pollingPeople')"></el-table-column>
          <!-- 整改人 -->
          <el-table-column prop="rectifyPeopleName" :label="$t('message.projectManage.changePeople')"></el-table-column>
          <!-- 检查时间 -->
          <el-table-column prop="inspectTime" :label="$t('message.projectManage.checkedTime')"></el-table-column>
          <!-- 整改状态 -->
          <el-table-column prop="state" :label="$t('message.projectManage.changeStatus')">
            <template slot-scope="scope">
              <!-- '待整改' -->
              <div>{{scope.row.state==1?$t('message.projectManage.awaitChange'):scope.row.state==2?$t('message.projectManage.awaitAudit'):$t('message.projectManage.alreadyChange')}}</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column prop="address" :label="$t('message.projectManage.operation')">
            <template slot-scope="scope">
              <el-button type="text" @click="showDetailsBtn(scope.row)"
                >
                <!-- 详情 -->
                {{$t('message.projectManage.detail')}}
                </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(total)"
          background
        ></el-pagination>
      </div>
    </div>
    <checkDetailsMod
      v-else
      style="width: 100%; height: 100%"
      @detailType="setDetailType"
      :dataId='detailsId'
    ></checkDetailsMod>
  </vue-scroll>
</template>
<script>
import checkDetailsMod from "./checkDetailsMod";
import { getCheckListDataApi } from "@/assets/js/api/dailyCheck";
export default {
  components: {
    checkDetailsMod,
  },
  data() {
    return {
      projectSn: "",
      userInfo: {},
      pageNo: 1,
      pageSize: 10,
      total: 0,
      startTime: [],
      searchForm: {
        type: 2,
        state: "",
        startTime: "",
        endTime: "",
      },
      tableData: [],
      showDetails: false,
      detailsId:'',
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.userInfo = this.$store.state.userInfo;
    this.getCheckListData();
  },

  methods: {
    //切换时间时
    datePicker(val) {
      if (val && val.length > 0) {
        this.searchForm.startTime = val[0];
        this.searchForm.endTime = val[1];
      } else {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      }
    },

    //刷新按钮
    refreshBtn() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.startTime = [];
      this.searchForm = {
        type: 2,
        state: "",
        startTime: "",
        endTime: "",
      };
      this.getCheckListData();
    },

    //获取列表数据
    getCheckListData() {
      let data = this.searchForm;
      data.pageNo = this.pageNo;
      data.pageSize = this.pageSize;
      data.projectSn = this.projectSn;
      data.inspector = this.userInfo.userId;
      getCheckListDataApi(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    //查询按钮
    queryBtn(){
      this.pageNo = 1;
      this.getCheckListData();
    },

    //详情按钮
    showDetailsBtn(val) {
      this.showDetails = true;
      this.detailsId = val.id;
    },
    //关闭详情
    setDetailType(val) {
      this.showDetails = val;
      this.refreshBtn();
    },

    //换条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCheckListData();
    },
    //换页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getCheckListData();
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.basicInfo {
  width: 100%;
  height: 100%;
  .title {
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
  }
}
.operationText {
  display: flex;
  align-items: center;
}
</style>