MingGao_vue/minggao/src/page/commandCenter/supervise.vue

<!--  -->
<template>
  <div class="supervise_box">
    <!-- 筛选 -->
    <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="primary" size="mini" @click="searchData"
              >搜索</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>

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

    <el-card style="margin-top: 15px">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        :height="48 * 13"
        style="width: 100%; overflow-y: auto"
      >
        <el-table-column prop="ind" label="序号" width="180"> </el-table-column>
        <el-table-column prop="supervisor_user" 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, // 总页数
      btnShow: false // 防止导出数据重复下载
    };
  },
  //监听属性 类似于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() {
      this.loading = true;
      this.tableData = [];
      this.tableList();
    },

    // 重置
    reset() {
      this.input = ""; // 监督人
      this.input2 = ""; // 监督形式
      this.value = ""; // 时间筛选
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.loading = true;
      this.tableData = [];
      this.tableList();
    },

    // 导出数据
    exportData() {
      this.loadingShow = true;
      this.btnShow = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.supervisor_export",
        responseType: "blob"
      })
        .then(res => {
          this.downloadFile(res, "监督记录.xls");
          this.loadingShow = false;
          setTimeout(() => {
            this.btnShow = false;
          }, 1500);
        })
        .catch(err => {
          this.loadingShow = false;
          setTimeout(() => {
            this.btnShow = false;
          }, 1500);
        });
    },

    // 流文件下载
    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.loading = true;
      this.tableData = []
      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>
.supervise_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;
  }
}
</style>