spfm-market-front/src/pages/main/leader/leaderhomeTask.vue

<template>
  <div style="display: flex; justify-content: space-between">
    <div class="taskbox">
      <div class="tit">
        <span class="span1" @click="tabboxclick1"
          >我的待办 ({{ this.totalDaiban}})</span
        >
        <span class="span2" @click="tabboxclick2">我的已办</span>
        <span class="span3" @click="tabboxclick3">我的发起</span>
        <!-- <span class="span" @click="more">更多>></span> -->
      </div>
      <div class="fatherbox">
        <div class="tabbox">
          <!-- 我的待办列表 -->
          <el-table
            :header-cell-style="{
              background: '#F2F2F2',
              'text-align': 'center',
            }"
            :cell-style="{ background: '#FaFaFa' }"
            v-if="tabbox1"
            class="com-table"
            ref="multipleTable"
            :data="niticList"
            tooltip-effect="dark"
            size="small"
            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
            height="442px"
          >
            <el-table-column
              prop="woTitle"
              label="工单标题"
              align="left"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span
                  :title="scope.row.woTitle"
                  @click="RowTitle(scope.row)"
                  :style="
                    scope.row.woTypeDesc == '预警工单'
                      ? 'cursor: pointer;color:red;'
                      : 'cursor: pointer;color:blue;'
                  "
                >
                  <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                  >•</span> -->
                  {{ scope.row.woTitle }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="procName"
              label="流程名称"
              align="center"
              width="180"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :title="scope.row.procName">{{
                  scope.row.procName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="assigneName"
              label="上一步处理人"
              align="center"
              width="120"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :title="scope.row.assigneName">{{
                  scope.row.assigneName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="clsj"
              label="上一步处理时间"
              align="center"
              width="135"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.clsj }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="opName"
              label="发起姓名"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.opName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="发起时间"
              align="center"
              width="130"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pageBox"
            @current-change="currchangeDdaiban"
            layout="total,prev, pager, next"
            background
            :page-size="pagesize"
            :total="totalDaiban"
            v-if="tabbox1"
          >
          </el-pagination>
        </div>
        <div class="tabbox">
          <!-- 我的已办列表 -->
          <el-table
            :header-cell-style="{
              background: '#F2F2F2',
              'text-align': 'center',
            }"
            :cell-style="{ background: '#FaFaFa' }"
            class="com-table"
            ref="tableDatayj"
            v-if="tabbox2"
            :data="tableDatayj"
            tooltip-effect="dark"
            size="small"
            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
            height="442px"
          >
            <el-table-column
              prop="woTitle"
              label="工单标题"
              align="left"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                  >•</span
                > -->
                <span
                  @click="RowDoneTitle(scope.row)"
                  :title="scope.row.woTitle"
                  style="cursor: pointer; color: blue"
                  >{{ scope.row.woTitle }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="procName"
              label="流程名称"
              align="center"
              width="180"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :title="scope.row.procName">{{
                  scope.row.procName
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="opName"
              label="发起姓名"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.opName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="发起时间"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pageBox"
            v-if="tabbox2"
            @current-change="currchangeDone"
            layout="total,prev, pager, next"
            background
            :total="totalDone"
            :page-size="pagesize"
          >
          </el-pagination>
        </div>
        <div class="tabbox">
          <!-- 我的发起列表 -->
          <el-table
            :header-cell-style="{
              background: '#F2F2F2',
              'text-align': 'center',
            }"
            :cell-style="{ background: '#FaFaFa' }"
            class="com-table"
            ref="OpList"
            :data="OpList"
            v-if="tabbox3"
            tooltip-effect="dark"
            size="small"
            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
            height="442px"
          >
            <el-table-column
              prop="woTitle"
              label="工单标题"
              align="left"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                  >•</span
                > -->
                <span
                  :title="scope.row.woTitle"
                  @click="RowlaunchTitle(scope.row)"
                  style="cursor: pointer; color: blue"
                  >{{ scope.row.woTitle }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="procName"
              label="流程名称"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :title="scope.row.procName">{{
                  scope.row.procName
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="发起时间"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pageBox"
            @current-change="currchangeOp"
            layout="total,prev, pager, next"
            background
            :total="totalOp"
            v-if="tabbox3"
            :page-size="pagesize"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 查看待办弹窗 -->
      <el-dialog
        title="查看"
        :visible.sync="WorkOrderStatus"
        width="50%"
        :close-on-press-escape="false"
        :show-close="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div>
          <el-form :inline="true" :model="StatusList" class="demo-form-inline">
            <el-form-item label="工单标题">
              <el-input
                v-model="StatusList.woTitle"
                placeholder="工单标题"
                disabled
              />
            </el-form-item>
            <el-form-item label="流程名称">
              <el-input
                v-model="StatusList.procName"
                placeholder="流程名称"
                disabled
              />
            </el-form-item>
          </el-form>
          <h3>流程轨迹</h3>
          <el-table
            :data="WorkOrderList"
            style="width: 100%"
            max-height="350"
            height="300"
          >
            <el-table-column prop="createTime" label="节点开始时间" />
            <el-table-column prop="stepName" label="节点名称" width="180" />
            <el-table-column prop="assigneeName" label="处理角色" width="180" />
            <el-table-column prop="opTime" label="处理时间" />
          </el-table>
        </div>
        <div class="diobtn">
          <el-button @click="dlogStatus()">处理</el-button>
        </div>
      </el-dialog>
      <!-- 查看已办弹窗 -->
      <el-dialog
        title="查看"
        :visible.sync="DoneStatus"
        width="50%"
        :close-on-press-escape="false"
        :show-close="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div>
          <el-form :inline="true" :model="StatusList" class="demo-form-inline">
            <el-form-item label="工单标题">
              <el-input
                v-model="StatusList.woTitle"
                placeholder="工单标题"
                disabled
              />
            </el-form-item>
            <el-form-item label="流程名称">
              <el-input
                v-model="StatusList.procName"
                placeholder="流程名称"
                disabled
              />
            </el-form-item>
          </el-form>
          <h3>流程轨迹</h3>
          <el-table
            :data="DoneList"
            style="width: 100%"
            max-height="350"
            height="300"
          >
            <el-table-column prop="createTime" label="节点开始时间" />
            <el-table-column prop="stepName" label="节点名称" width="180" />
            <el-table-column prop="assigneeName" label="处理角色" width="180" />
            <el-table-column prop="opTime" label="处理时间" />
          </el-table>
        </div>
        <div class="diobtn">
          <el-button @click="dlogStatus()">查看详情</el-button>
        </div>
      </el-dialog>
      <!-- 查看发起弹窗 -->
      <el-dialog
        title="查看"
        :visible.sync="launchStatus"
        width="50%"
        :close-on-press-escape="false"
        :show-close="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div>
          <el-form :inline="true" :model="StatusList" class="demo-form-inline">
            <el-form-item label="工单标题">
              <el-input
                v-model="StatusList.woTitle"
                placeholder="工单标题"
                disabled
              />
            </el-form-item>
            <el-form-item label="流程名称">
              <el-input
                v-model="StatusList.procName"
                placeholder="流程名称"
                disabled
              />
            </el-form-item>
          </el-form>
          <h3>流程轨迹</h3>
          <el-table
            :data="launchList"
            style="width: 100%"
            max-height="350"
            height="300"
          >
            <el-table-column prop="createTime" label="节点开始时间" />
            <el-table-column prop="stepName" label="节点名称" width="180" />
            <el-table-column prop="assigneeName" label="处理角色" width="180" />
            <el-table-column prop="opTime" label="处理时间" />
          </el-table>
        </div>
      </el-dialog>
      <!-- 处理弹窗 -->
      <el-dialog
        title="处理"
        :visible.sync="WorkOrderStatus1"
        width="40%"
        :close-on-press-escape="false"
        :show-close="true"
        :destroy-on-close="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
        <div style="height: 450px">
          <iframe
            height="100%"
            width="100%"
            :src="dialogdiv"
            frameborder="0"
          ></iframe>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  // props:["tableDatayj","niticList"],
  data() {
    return {
      tabbox1: true, //待办
      tabbox2: false, //已办
      tabbox3: false, //发起
      niticList: [], //待办列表
      tableDatayj: [], //已办列表
      OpList: [], //我的发起列表
      WorkOrderStatus: false, //查看待办弹窗
      launchStatus: false, //查看我的发起弹窗
      DoneStatus: false, //查看已办弹窗
      WorkOrderStatus1: false, //处理弹窗
      dialogdiv: "", //iframe
      StatusList: [], //form表单里列表
      WorkOrderList: [], //我的待办流程节点
      DoneList: [], //我的已办流程节点
      launchList: [], //我的发起流程节点
      urlllll: "", //跳转路由
      totalDone: 0, //已办分页
      totalDaiban: 0, //已办分页
      totalOp: 0, //已办分页
      params: {},
      pageSize: 1,
      pagesize: 10,
      pageSizeDone: 1,
      pageSizeDdaiban: 1,
      pageSizeOp: 1,
    };
  },
  methods: {
    //处理按钮
    dlogStatus() {
      // this.WorkOrderStatus = false;
      // this.WorkOrderStatus1 = true;
      this.$router.push(this.urlllll);
      console.log(this.urlllll);
    },
    //查看标题按钮按钮
    RowTitle(v) {
      this.StatusList = v;
      console.log(v.actionUrl);
      if (v.procName) {
        this.WorkOrderStatus = true;
        this.$http({
          url: "/market/cwo/queryProcStepByWono",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            woNo: v.woNo,
          },
        }).then((res) => {
          this.WorkOrderList = res.data;
        });
        this.$http({
          url: "/market/cwo/redirectDealPage",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            procId: v.procId,
          },
        }).then((res) => {
          this.urlllll = res.data[0].jspUrl;
          // console.log(this.urlllll)
          // if(this.urlllll=="#"){
          //   this.urlllll=res.data[1].jspUrl
          // }
          console.log(this.urlllll);
        });
      } else {
        this.$router.push(v.actionUrl);
      }
    },
    //我的已办查看按钮
    RowDoneTitle(v) {
      this.StatusList = v;
      console.log(v.actionUrl);
      if (v.procName) {
        this.DoneStatus = true;
        this.$http({
          url: "/market/cwo/queryProcStepByWono",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            woNo: v.woNo,
          },
        }).then((res) => {
          this.DoneList = res.data;
        });
        this.$http({
          url: "/market/cwo/redirectDealPage",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            procId: v.procId,
          },
        }).then((res) => {
          this.urlllll = res.data[0].jspUrl;
          // console.log(this.urlllll)
          // if(this.urlllll=="#"){
          //   this.urlllll=res.data[1].jspUrl
          // }
          console.log(this.urlllll);
        });
      } else {
        this.$router.push(v.actionUrl);
      }
    },

    //我的发起查看按钮
    RowlaunchTitle(v) {
      this.StatusList = v;
      console.log(v.actionUrl);
      if (v.procName) {
        this.launchStatus = true;
        this.$http({
          url: "/market/cwo/queryProcStepByWono",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            woNo: v.woNo,
          },
        }).then((res) => {
          this.launchList = res.data;
        });
      }else {
        this.$router.push(v.actionUrl);
      }
    },

    //更多按钮
    more() {
      console.log(11);
    },

    //待办列表初始化
    daiban(v, n) {
      this.pageSizeDdaiban = n;
      this.$http({
        url: "/market/cwo/queryQaToDoList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: '{"pageNo":"' + n + '","pageSize":"10"}',
      }).then((res) => {
        this.niticList = res.data.data;
        this.totalDaiban = res.data.totalRecord;
      });
    },

    //已办列表初始化
    getListyj(v, n) {
      this.pageSizeDone = n;
      let _this = this;
      this.$http({
        url: "/market/cwo/queryQaFinishList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: '{"pageNo":"' + n + '","pageSize":"10"}',
      }).then((res) => {
        this.tableDatayj = res.data.data;
        this.totalDone = res.data.totalRecord;
      });
    },
    //待办分页
    currchangeDdaiban(v) {
      this.pageSizeDdaiban = v;
      this.daiban(this.params, this.pageSizeDdaiban);
    },
    //已办分页
    currchangeDone(v) {
      this.pageSizeDone = v;
      this.getListyj(this.params, this.pageSizeDone);
    },
    //发起分页
    currchangeOp(v) {
      this.pageSizeOp = v;
      this.getOPlist(this.params, this.pageSizeOp);
    },
    //我的发起列表初始化
    getOPlist(v, n) {
      this.pageSizeOp = n;
      this.$http({
        url: "/market/cwo/queryOpList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: '{"pageNo":"' + n + '","pageSize":"10"}',
      }).then((res) => {
        this.OpList = res.data.data;
        this.totalOp = res.data.totalRecord;
      });
    },
    tabboxclick1() {
      this.tabbox1 = true;
      this.tabbox2 = false;
      this.tabbox3 = false;
      document.querySelector(".span1").style.color = "blue";
      document.querySelector(".span2").style.color = "black";
      document.querySelector(".span2").style.border = 0;
      document.querySelector(".span1").style.borderBottom = "2px solid blue";
      document.querySelector(".span3").style.color = "black";
      document.querySelector(".span3").style.border = 0;
      document.querySelector(".com-table").style.backgroundColor = "#FaFaFa";
    },
    tabboxclick2() {
      this.tabbox1 = false;
      this.tabbox2 = true;
      this.tabbox3 = false;
      document.querySelector(".com-table").style.backgroundColor = "#FaFaFa";
      document.querySelector(".span1").style.border = 0;
      document.querySelector(".span2").style.borderBottom = "2px solid blue";
      document.querySelector(".span2").style.color = "blue";
      document.querySelector(".span1").style.color = "black";
      document.querySelector(".span3").style.color = "black";
      document.querySelector(".span3").style.border = 0;
    },
    tabboxclick3() {
      this.tabbox1 = false;
      this.tabbox2 = false;
      this.tabbox3 = true;
      document.querySelector(".com-table").style.backgroundColor = "#FaFaFa";
      document.querySelector(".span1").style.color = "black";
      document.querySelector(".span2").style.color = "black";
      document.querySelector(".span1").style.border = 0;
      document.querySelector(".span2").style.border = 0;
      document.querySelector(".span3").style.borderBottom = "2px solid blue";
      document.querySelector(".span3").style.color = "blue";
    },
  },
  mounted() {
    this.daiban({}, 1);
    this.getListyj({}, 1);
    this.getOPlist({}, 1);
    this.userInfo = JSON.parse(window.sessionStorage.userInfo);
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.diobtn {
  position: relative;
  text-align: right;
  //  display: flex;
  //     justify-content: end;
  margin-top: 10px;
}
.taskbox {
  width: 100%;
  display: inline-block;
}

.tit {
  margin-top: 10px;
  clear: both;
  height: 47px;
  // background: #fff;
  background-image: linear-gradient(#fafafa, #d4edfd);
  line-height: 47px;
  padding: 0 20px;
  font-size: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  justify-content: space-between;
  .com-table {
    background: "#FaFaFa";
  }
  .span {
    float: right;
    color: orange;
  }
  .span1 {
    display: inline-block;
    color: blue;
    text-align: center;
    height: 46px;
    font-weight: 900;
    width: 120px;
    border-bottom: 2px solid blue;
  }
  .span2 {
    display: inline-block;
    text-align: center;
    height: 46px;
    width: 120px;
    font-weight: 900;
  }
  .span3 {
    display: inline-block;
    text-align: center;
    height: 46px;
    width: 120px;
    font-weight: 900;
  }
  span {
    cursor: pointer;
  }
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
    overflow: hidden;
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;
    float: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
    margin-left: 20px;
  }
}
.fatherbox {
  background: #fafafa;
  padding: 10px;
  height: 484px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
}
.pageBox {
}
::v-deep .gutter {
  background: #fafafa;
}
::v-deep .is-scrolling-none {
  background: #fafafa;
}

// ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
//   overflow: hidden;
// }
// ::v-deep .el-table th>.cell{
//   padding:0px;
// }
// ::v-deep .el-table__body-wrapper .is-scrolling-left{
//   overflow-x: hidden;
// }
</style>