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

<!--  -->
<template>
  <div class="superviseAdmin_box">
    <!-- 筛选 -->
    <el-row>
      <el-col>
        <div class="search_box">
          <!-- 任务处理人 -->
          <el-select
            filterable
            :loading="loading2"
            v-model="input"
            clearable
            @change="searchData"
            @focus="selectList('operator')"
            placeholder="请选择任务处理人/实际处理人"
            size="mini"
          >
            <el-option
              v-for="item in conductorList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <!-- 任务发布人 -->
          <!-- <el-input
              style="width: 14%"
              @change="searchData"
              :loading="loading3"
              @focus="selectList('owner')"
              placeholder="请输入任务发布人"
              v-model="input2"
              size="mini"
              clearable
            >
            </el-input> -->
          <el-select
            filterable
            :loading="loading3"
            v-model="input2"
            clearable
            @change="searchData"
            @focus="selectList('owner')"
            placeholder="请选择任务发布人"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <!-- 任务状态 -->
          <el-select
            filterable
            v-model="value"
            @change="searchData"
            clearable
            placeholder="请选择任务状态"
            size="mini"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <!-- 时间筛选 -->
          <el-date-picker
            size="mini"
            v-model="value2"
            @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>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-card style="margin-top: 15px">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%; overflow-y: auto"
        :height="48 * 13"
      >
        <el-table-column prop="ind" label="序号" width="80"> </el-table-column>
        <el-table-column prop="task_id" label="任务编号" width="100">
        </el-table-column>
        <el-table-column prop="task_type" label="任务类型" width="180">
        </el-table-column>
        <el-table-column prop="operator_user" label="任务处理人" width="180">
        </el-table-column>
        <el-table-column prop="owner_user" label="任务发布人" width="180">
        </el-table-column>
        <el-table-column prop="supervisor_user" label="任务监督人" width="180">
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="任务时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="last_time"
          label="任务结束"
          width="180"
        ></el-table-column>
        <el-table-column prop="end_time" label="任务完成时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.end_time || "暂无" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="task_status" label="任务状态" width="180">
          <template slot-scope="scope">
            <div v-for="(item, index) in type_status" :key="index">
              <span
                v-if="item.name == scope.row.task_status"
                :style="'color:' + item.color + '; font-weight: 550'"
                >{{ scope.row.task_status }}</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" 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: "", // 任务处理人
      loading2: false,
      conductorList: [], // 任务处理人 - 列表
      input2: "", // 任务发布人
      loading3: false,
      options: [], // 任务发布人 - 列表
      value: "", // 任务状态
      options2: [
        {
          value: "未开始",
          label: "未开始"
        },
        {
          value: "处理中",
          label: "处理中"
        },
        {
          value: "已完成",
          label: "已完成"
        },
        {
          value: "未处理",
          label: "未处理"
        },
        {
          value: "逾期完成",
          label: "逾期完成"
        }
      ], // 任务状态 - 列表
      value2: "", // 时间筛选
      startTime: "", // 开始时间
      endTime: "", // 结束时间

      // 表格
      tableData: [],
      loading: false, // 加载
      // 任务状态展示
      type_status: [
        {
          name: "未开始",
          color: "#E6A23C"
        },
        {
          name: "处理中",
          color: "#E6A23C"
        },
        {
          name: "已完成",
          color: "#67C23A"
        },
        {
          name: "未处理",
          color: "#F56C6C"
        },
        {
          name: "逾期完成",
          color: "#409EFF"
        }
      ],

      // 分页
      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_list",
        data: this.qs.stringify({
          page: this.page,
          page_item: "20",
          operator_user_id: this.input, // 处理人
          owner_user_id: this.input2, // 发布人id
          start_time: this.startTime, // 开始时间
          end_time: this.endTime, // 结束时间
          task_status: this.value // 任务状态
        })
      })
        .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;
        });
    },

    // 搜索
    searchData() {
      if (this.value2) {
        this.startTime = this.formatTime(this.value2[0], "yyyy-MM-dd");
        this.endTime = this.formatTime(this.value2[1], "yyyy-MM-dd");
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.page = 1
      this.tableData = [];
      this.loading = true;
      this.tableList();
    },

    // 筛选列表 - 任务处理人、任务发布人
    selectList(type) {
      if (type == "operator") {
        // 任务处理人
        var a = ""; //任务处理人
        var b = ""; //任务监督人
        var c = this.input2; //任务发布人
        this.loading2 = true;
      } else if (type == "owner") {
        // 任务发布人
        var a = this.input; //任务处理人
        var b = ""; //任务监督人
        var c = ""; //任务发布人
        this.loading3 = true;
      }
      this.conductorAxios(type, a, b, c);
    },

    // 筛选列表 - 处理人
    conductorAxios(type, a, b, c) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=control_center.task.task_user_list",
        data: this.qs.stringify({
          user_type: type, // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
          operator_id: a, // 已经选择的任务处理人id
          supervisor_id: b, // 已经选择的任务监督人id
          owner_id: c // 已经选择的任务发布人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);
            });
            if (type == "operator") {
              // 任务处理人
              this.loading2 = false;
              this.conductorList = list;
            } else if (type == "owner") {
              // 任务发布人
              this.loading3 = false;
              this.options = list;
            }
          }
        })
        .catch(err => {});
    },

    // 重置
    reset() {
      this.input = ""; // 处理人
      this.input2 = ""; // 发布人
      this.value = ""; // 任务状态
      this.value2 = ""; // 时间筛选
      this.startTime = ""; // 开始时间
      this.endTime = ""; // 结束时间
      this.tableData = [];
      this.loading = true;
      this.page = 1
      this.tableList();
    },

    // 下页
    newPage(page) {
      this.page = page;
      this.tableData = [];
      this.loading = true;
      this.tableList();
    },

    // 查看
    examineDetail(data) {
      this.$router.push({
        path: "/index/superviseAdminDetails",
        query: {
          id: data.task_id
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.get_boderHeight(); // 动态获取浏览器高度
    this.tableList(); // 表格
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.superviseAdmin_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-card {
    overflow: hidden;
    overflow-y: auto;
  }
}
/deep/.el-date-editor {
  cursor: pointer;
  .el-range-input {
    cursor: pointer;
  }
}

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