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.daitotal }})</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="10" :total="totalDaiban" v-if="tabbox1">
          </el-pagination> -->
          <el-pagination @current-change="currchangeDdaiban" :current-page="daipage" :page-size="daisize"
            layout="total,prev, pager, next" :total="daitotal" 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"  @current-change="currchangeDone"
            layout="total,prev, pager, next" background :total="totalDone" page-size="10">
          </el-pagination> -->
          <el-pagination @current-change="currchangeDyiban" :current-page="yibanpage" :page-size="yibansize"
            layout="total,prev, pager, next" :total="yibantotal" v-if="tabbox2">
          </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="10">
          </el-pagination> -->
          <el-pagination @current-change="currchangefaqi" :current-page="faqipage" :page-size="faqisize"
            layout="total,prev, pager, next" :total="faqitotal" v-if="tabbox3">
          </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,
      daipage: 1, //第几页
      daisize: 10, //一页多少条
      daitotal: 0, //总条目数
      yibanpage: 1, //第几页
      yibansize: 10, //一页多少条
      yibantotal: 0, //总条目数
      faqipage: 1, //第几页
      faqisize: 10, //一页多少条
      faqitotal: 0, //总条目数
    };
  },
  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":"' + '1' + '","pageSize":"100"}',
        },
        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
      }).then((res) => {
       // this.niticList = res.data.data;
       let data = JSON.parse(JSON.stringify(res.data.data))
        this.niticList = data.splice(
          (this.daipage - 1) * this.daisize,
          this.daisize
        );
        this.daitotal = res.data.data.length
        // 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":"' + '1' + '","pageSize":"100"}',
        },
        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
      }).then((res) => {
         // this.tableDatayj = res.data.data;
        // this.totalDone = res.data.totalRecord;
        let data = JSON.parse(JSON.stringify(res.data.data))
        this.tableDatayj = data.splice(
          (this.yibanpage - 1) * this.yibansize,
          this.yibansize
        );
        this.yibantotal = res.data.data.length
      });
    },
    //待办分页
    currchangeDdaiban(val) {
      console.log("翻页，当前为第几页", val);
      this.daipage = val;
      // this.getTabelData2();
      // this.pageSizeDdaiban = v;
      this.daiban(this.params, this.pageSizeDdaiban);
    },
    //已办分页
    currchangeyiban(val) {
      // this.pageSizeDone = v;
      this.yibanpage = val;
      this.getListyj(this.params, this.pageSizeDone);
    },
    //发起分页
    currchangefaqi(val) {
      // this.pageSizeOp = v;
      this.faqipage = val;
      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":"' + '1' + '","pageSize":"100"}',
        },
        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
      }).then((res) => {
      // this.OpList = res.data.data;
        // this.totalOp = res.data.totalRecord;
        let data = JSON.parse(JSON.stringify(res.data.data))
        this.OpList = data.splice(
          (this.faqipage - 1) * this.faqisize,
          this.faqisize
        );
        this.faqitotal = res.data.data.length
      });
    },
    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>