xinhuaqujiaoyujuPCOA/src/views/dashboard/LineChart.vue

<template>
  <el-card  style="min-height: 464px;overflow: hidden;">
    <div slot="header" class="clearfix">
      <img src="../../assets/image/sq.png" style="display: block;float: left;margin: 1px 5px 0 0;" height="15" width="17"/>
      <span>我的工作</span>
      <el-button style="float: right; padding: 3px 0;color: #000000;" type="text" @click="more">更多</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="待办工作" name="first">
        <el-table :data="toListItem" style="width: 100%;" :header-cell-style="[]" empty-text="暂无数据">
          <template slot="empty">
            <div>
              <div>
                <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fillRule="nonzero" stroke="#D9D9D9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path></g></g></svg>
              </div>
              <p>暂无数据</p>
            </div>
          </template>

          <el-table-column prop="fwtitle" label="标题"  align="left" >
            <template slot-scope="scope">
              <el-button type="text"  @click="openactform(scope.row.processInstanceId,scope.row.businessKey,scope.row.name,scope.row.title,scope.row.taskName)" style="color: black">{{scope.row.title}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="流程名称" width="180" align="left"></el-table-column>
          <el-table-column prop="name" label="待操作" width="180" align="center">  </el-table-column>
          <el-table-column prop="createTime" label="接收时间" width="180" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | timefilters}}</span>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已办工作" name="second">
      <el-table  class="body" :data="doneList1" :header-cell-style="{}">
        <!--        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>-->
        <el-table-column prop="fwtitle" label="标题"  align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="detern1(scope.row)" style="color: black">{{scope.row.title}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="流程名称" width="180" align="left"></el-table-column>
        <el-table-column prop="name" label="已操作" width="180" align="center"></el-table-column>
        <el-table-column prop="createTime" label="完成时间" width="180" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | timefilters}}</span>
          </template>
        </el-table-column>
      </el-table>
      </el-tab-pane>

    </el-tabs>
    <el-dialog id="actform" title="待办工作详情" :visible.sync="actOpen" :before-close="cancel" append-to-body width="80%"
               top="10" height="90%">
      <!-- 动态引入组件-->
      <component :is="actForm" :data="details":actOpen="actOpen" @getList="getList" ></component>
      <Option :optiontitle="optiontitle" :optionactkey="optionactkey" :optionid="optionid" :optionName="optionName" v-show="optiontrue"></Option>
    </el-dialog>
    <el-dialog id="actform1" title="已办工作详情" :visible.sync="actOpen1" :before-close="cancel" append-to-body width="80%" top="10" height="90%">
      <!-- 动态引入组件-->
      <component :is="actForm1" :data="details1":actOpen="actOpen1" @getList="getList1" ></component>

    </el-dialog>
  </el-card>
</template>

<script>
  import { havedInfo } from "@/api/activiti/form/fw";
  import moment from "moment";
  import {toDoItemListInfo} from "@/api/activiti/form/fw";
  import {getCurrentFlowFormKey,getStartFormKey } from '@/api/activiti/process/startprocess'
  import Option from "@/components/files/option";
  export default {
    components: {Option},
    filters: {
      timefilters(val) {
        if (val == null || val == "") {
          return "暂无时间";
        } else {
          let d = new Date(val);   //val 为表格内取到的后台时间
          let month =
            d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
          let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
          let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
          let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
          let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
          let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
          return moment(val).format("YYYY-MM-DD HH:mm")
        }
      }
    },
    data() {
      return {
        dialogVisible:false,
        tabPosition:'left',
        optiontrue:false,
        optiontitle:'',
        optionactkey:'',
        optionName:'',
        optionid:'',
        actForm: null,
        actForm1: null,
        actOpen:false,
        actOpen1:false,
        //传入到下一页面的值
        details:{
          getactkey: '',
          formId:'',
          flg:'1'},
        details1:{getactkey: '',
          formId:'',
          flg:'2'},
        activeName: 'first',
        doneList1: [],
        toListItem: [],
        //参数
        raddarParams: {
          pageNum: 1,
          pageSize: 5,
          // orderByColumn: "createTime",
          // isAsc:"desc",//排序方式
        },
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          // executionId:undefined,
          // processInstanceId:undefined,
          // createTime:undefined,
          // formKey:undefined,
          // name:undefined,
          // businessKey:undefined,
          // taskName:undefined,
          // id:undefined,
          // title:undefined,
          // processDfinitionId:undefined,
          // assign:undefined,
        },
        //参数
        query: {
          pageNum: 1,
          pageSize: 4,
          actkey:undefined,
          create_time:undefined,
          avtive_send:undefined,
          fwtitle:undefined,
          apply_user:undefined,
          title:undefined,
          content:undefined,
          copy_to:undefined,
          applyUser:undefined,
          update_time:undefined,
          security_class:undefined,
          businessKey:undefined,
          ponderance:undefined,
          taskName:undefined,
          dispose:undefined,
          id:undefined,
          fwdept:undefined,
          update_by:undefined,
          accessory:undefined,
          taskid:undefined,
          definitionId:undefined,
        },
      }
    },
    created() {
      this.getList1();
      this.getList();
      this.cancel();
    },
    methods: {
      // 取消按钮
      cancel() {
        this.actOpen=false;
        this.actOpen1 = false;
      },
      reset() {
        this.form = {
          mailGuid: undefined,
          senderName: undefined,
          senderAccount: undefined,
          receiverName: undefined,
          receiverAccount: undefined,
          mailTheme: undefined,
          mailContent: undefined,
          createTime: undefined,
          status: "0",
          deleteTime: undefined
        };
        this.resetForm("form");
      },

      getList1() {
        this.loading = true;
        havedInfo(this.raddarParams).then(response => {
          console.log(response.rows)
          this.doneList1 = response.rows;
          this.loading = false;
          this.$emit('getNum','yb',response.total)
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getList() {
        this.loading = true;
        // 待办请求
        toDoItemListInfo(this.queryParams).then(response => {
          this.toListItem = response.rows;
          if(this.toListItem.length<5){
            this.toListItem.length=response.rows.length
          }else{
            this.toListItem.length=5
          }
          this.title = response.title;
          this.loading = false;
          this.$emit('getNum','db',response.total)
        });
        this.actOpen=false;
        this.actOpen1=false;
      },
      openactform(actkey,id,name,title,taskName) {
        //var actkey=row.processDfinitionId;
        // alert(id)
        //var id=row.businessKey
        if(name == "赋文号归档分发"){
          this.optiontrue = true;
          this.optiontitle = title;
          this.optionactkey = actkey;
          this.optionid = id;
          this.optionName=taskName;
        }else{
          this.optiontrue = false;
        }

        let vue = this
        actkey=actkey.split(":")[0];
        this.details.getactkey = actkey//动态传参到下面的页面
        this.details.formId = id//动态传参到下面的页面
        this.details.flg = 1//动态传参到下面的flg
        getCurrentFlowFormKey(actkey).then(response => {
          var path = response.msg
          this.actForm = () => Promise.resolve().then(() => require(`@/views/${path}`))
          this.actOpen = true
        })

        this.actOpen =false
        return vue.actForm = this.actForm

      },


      detern(row){
        const actkey = row.actkey
        const form = row || this.form
        this.$router.push({path:'/actwork/todo/tododetails',query: {bd:form,id:actkey }})
      },
      detern1(row){
        var actkey=row.processDfinitionId
        var id=row.businessKey
        let vue = this
        actkey=actkey.split(":")[0];
        this.details.getactkey = actkey//动态传参到下面的页面
        this.details.formId = id//动态传参到下面的页面
        this.details.flg = 2//动态传参到下面的flg

        getStartFormKey(actkey).then(response => {
          var path = response.msg
          this.actForm = () => Promise.resolve().then(() => require(`@/views/${path}`))
        })
        this.actOpen = true
        return vue.actForm = this.actForm
        // const actkey = row.taskid || this.ids
        // const form = row || this.form
        // this.$router.push({path:'/actwork/havedone/havedetails',query: {bd:form,id:actkey }})
      },

      more(){
        if(this.activeName=='first'){
          this.$router.replace('/todo')
        }else {
          this.$router.replace('/havedone')
        }
      },
    }
  };
</script>

<style lang="less" scoped>
  .el-table--medium td {
    padding: 9px 0 !important;
  }
  .clearfix{
    color:#1890ff;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

  .el-table__header{
    width: 100% !important;
  }
  .el-table__thead{
    width: 100% !important;
  }
  .el-table__body{
    width: 100% !important;
  }

  /*.clearfix:before,*/
  /*.clearfix:after {*/
  /*display: table;*/
  /*content: "";*/
  /*}*/
  /*.clearfix:after {*/
  /*clear: both*/
  /*}*/
  .el-card__header{
    background: #f5f5f5;
    color:#1890ff;
  }
  .el-card__body {
    padding: 15px 20px 20px 20px;
    height: 354px;
  }
  .el-card__header{
    background: #f5f5f5;
  }
</style>