MingGao_vue/minggao/src/page/superviseModule/superviseModule.vue

<!--  -->
<template>
  <div class="superviseModule_box">
    <el-card :style="'height:' + fullHeight + 'px'">
      <!-- 筛选 -->
      <el-row>
        <el-col>
          <div class="search_box">
            <!-- 监督人 -->
            <el-select
              filterable
              v-model="input"
              clearable
              @change="searchData"
              placeholder="请选择监督人"
              size="mini"
            >
              <el-option
                v-for="item in conductorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 监督形式 -->
            <el-select
              filterable
              v-model="input2"
              clearable
              @change="searchData"
              placeholder="请选择监督形式"
              size="mini"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 时间筛选 -->
            <el-date-picker
              size="mini"
              v-model="value"
              @change="searchData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              :editable="false"
            >
            </el-date-picker>

            <div class="btn_box">
              <el-button type="info" size="mini" @click="searchData"
                >搜索</el-button
              >
              <el-button size="mini" @click="reset">重置</el-button>

              <el-button type="info" size="mini" @click="exportData">
                <i v-if="loadingShow" class="el-icon-loading"></i>
                导出数据</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
        :height="48 * 13"
      >
        <el-table-column prop="ind" label="序号" width="180">
          <template slot-scope="scope">
            <span>{{ ((page-1)*20)+scope.row.ind}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="supervisor_user" label="监督人" width="180">
        </el-table-column>
        <el-table-column
          prop="actual_supervisor"
          label="实际监督人"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="supervisor_type" label="监督形式" width="180">
        </el-table-column>
        <el-table-column prop="supervisor_depa" label="监督单位" width="180">
        </el-table-column>
        <el-table-column prop="supervisor_msg" label="监督情况" width="380">
        </el-table-column>
        <el-table-column prop="supervisor_time" label="监督时间" width="280">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <a
              class="reset"
              href="javascript:;"
              @click="examineDetail(scope.row)"
              >查看</a
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin: 60px 0 0 0"
        :page-size="20"
        @current-change="newPage"
        :current-page="page"
        v-if="tableData.length > 0"
        background
        layout="prev, pager, next, jumper"
        :total="tableSum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //

      // 筛选
      input: "", // 监督人
      conductorList: [], // 监督人 - 列表
      input2: "", // 监督形式
      // 监督形式 - 列表
      options: [
        {
          value: "远程监督",
          label: "远程监督",
        },
        {
          value: "现场监督",
          label: "现场监督",
        },
      ],
      value: "", // 时间筛选
      startTime: "", // 开始时间
      endTime: "", // 结束时间
      loadingShow: false, // 导出加载

      // 表格
      tableData: [],
      loading: false, // 加载

      // 分页
      page: 1, // 当期页码
      tableSum: 0, // 总页数
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 表格
    tableList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.supervisor_record_list",
        data: this.qs.stringify({
          page: this.page,
          page_item: "20",
          supervisor_user_id: this.input, // 监督人id
          start_time: this.startTime, // 开始时间
          end_time: this.endTime, // 结束时间
          supervisor_type: this.input2, // 监督形式
        }),
      })
        .then((res) => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data;
            this.tableSum = data.total_item;
            var list = [];
            data.page_list.forEach((item, index) => {
              item.ind = index + 1;
              list.push(item);
            });
            this.tableData = list;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 监督人列表
    conductorAxios() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_user_list",
        data: this.qs.stringify({
          user_type: "supervisor", // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
          operator_id: "", // 已经选择的任务处理人id
          supervisor_id: "", // 已经选择的任务监督人id
          owner_id: "", // 已经选择的任务发布人id
        }),
      })
        .then((res) => {
          if (res.data.data.length !== 0) {
            var data = res.data.data;
            var list = [];
            data.forEach((item) => {
              var obj = {};
              obj["value"] = item.user_id;
              obj["label"] = item.real_name;
              list.push(obj);
            });
            this.conductorList = list;
          }
        })
        .catch((err) => {});
    },

    // 搜索
    searchData(e) {
      if (this.value) {
        this.startTime = this.tabtime(e[0]);
        this.endTime = this.tabtime(e[1]);
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.page = 1;
      this.loading = true;
      this.tableData = [];
      this.tableList();
    },
    tabtime(times) {
      //时间转换
      var years = times.getFullYear();
      var month = times.getMonth() + 1;
      var date = times.getDate();
      return years + "-" + month + "-" + date;
    },
    // 重置
    reset() {
      this.input = ""; // 监督人
      this.input2 = ""; // 监督形式
      this.value = ""; // 时间筛选
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.loading = true;
      this.tableData = [];
      this.page = 1
      this.tableList();
    },

    // 导出数据
    exportData() {
      this.loadingShow = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.supervisor_export",
        responseType: "blob",
        data: this.qs.stringify({
          supervisor_user_id: this.input, //                      非必填                   监督人id
          start_time: this.startTime, //                               非必填                     开始时间
          end_time: this.endTime, //                                 非必填                     结束时间
          supervisor_type: this.input2, //                          非必填                     监督形式
        }),
      })
        .then((res) => {
          this.downloadFile(res, "监督记录.xls");
          this.loadingShow = false;
        })
        .catch((err) => {
          this.loadingShow = false;
          // console.log(err);
        });
    },

    // 流文件下载
    downloadFile(res, name) {
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(new Blob([res.data]));
      link.target = "_blank";
      // 文件名和格式
      link.download = name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    // 分页
    newPage(page) {
      this.page = page;
      this.tableList();
    },

    // 查看
    examineDetail(data) {
      this.$router.push({
        path: "/index/superviseDetails",
        query: {
          id: data.id,
        },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.get_boderHeight(); // 动态获取浏览器高度
    this.conductorAxios(); // 监督人 - 筛选列表
    this.tableList(); // 表格
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.superviseModule_box {
  // 搜索
  .search_box {
    display: flex;
    /deep/.el-select {
      margin: 0 15px 0 0;
    }
    /deep/.el-input {
      margin: 0 15px 0 0;
    }
    .btn_box {
      margin: 0 0 0 15px;
      // width: 50%;
      display: flex;
      justify-content: start;
    }

    /deep/.el-range-editor--mini.el-input__inner {
      width: 20%;
    }
  }

  a {
    text-decoration: none;
  }
  .reset {
    color: #1890ff;
  }
}
/deep/.el-date-editor {
  cursor: pointer;
  .el-range-input {
    cursor: pointer;
  }
}

/deep/.el-button--info {
  background-color: #409eff;
  border-color: #409eff;
}
</style>