faw-report-library-web/src/views/userCenter/processCenter/sentProcess.vue

<template>
  <div>
    <div class="table">
      <vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
                 v-table-min-height="'calc(100vh - 380px)'">
        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
          <template #default="{ row, rowIndex }">
            {{ rowIndex + (q.current - 1) * q.size + 1 }}
          </template>
        </vxe-column>
        <vxe-column show-overflow show-header-overflow field="prcNum"
                    title="流程编号">
          <template #default="{ row,index }">
            <div class="blurcolor" @click="view(row)">{{row.prcNum}}</div>
          </template>
        </vxe-column>
        <vxe-column show-overflow show-header-overflow field="prcType"
                    title="流程类型">
          <template #default="{ row,index }">
            <div >{{getPrcName(row.prcType)}}</div>
          </template>
        </vxe-column>

        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称">
          <template #default="{ row,index }">
            <div class="blurcolor" @click="view(row)">{{row.prcName}}</div>
          </template>
        </vxe-column>
        <vxe-column show-overflow show-header-overflow field="creatUserName"
                    title="发起人"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="taskBackAssignee"
                    title="上一处理人"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="endTime"
                    title="完成时间"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="status" title="状态">
          <template #default="{ row }">
            <span v-if="row.isEnd === '0'">未完成</span>
            <span v-if="row.isEnd === '1'">已完成</span>
          </template>
        </vxe-column>
        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
          <template #default="{ row,index }">
            <el-button type="text" size="small"  @click="view(row)">
              查看
            </el-button>
            <el-button type="text" size="small" @click="withdraw(row)" v-if="row.isEnd === '0'">
              <span>强制撤回</span>
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
                     :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="total"/>
    </div>

  </div>
</template>

<script>
import ProcessMixin from "../../../components/ProcessMixin";
export default {
  name: "sentProcess",
  mixins: [ProcessMixin],
  data() {
    return {
      color: 'rgb(236, 128, 141)',
      icolor: 'rgb(119,136,153)',
      q: {
        current: 1,
        size: 10
      },
      total: 0,
      tableData: []
    };
  },
  props: {
    form:{
      type:Object,
      default:{},
    }
  },
  watch:{
    form:{
      handler(){
        console.log("我见他",this.form)
        this.loadData()
      },
      deep:true
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    viewDetails(row) {
      const prcType = row.prcType
      console.log(prcType);
      this.loading = true
      this.$api.getAlreadData({taskId:row.taskId})
        .then(res=>{
            switch (prcType) {
              case '1':
                res.isViewDetails = 1
                res.prcType = prcType
                res.prcNum = row.prcNum
                if (res.taskDefinitionKey == 'aid1' ||
                  res.taskDefinitionKey == 'aid4' ) {
                    this.$router.push({
                      path: '/permission/launch',
                      query: res,
                    })
                    return
                }
                else{
                  this.$router.push({
                    path: '/permission/examine',
                    query: res,
                  })
                }
            }
        })

    },
    //撤回
    withdraw(row){
      this.$confirm('确认强制撤回该条数据？', '强制撤回', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'common-button-primary',
        type: 'warning'
      }).then(() => {
        this.$api.processCenter.getBack({prcId: row.prcId}).then(res => {
          this.$message.success(res.data.message)
          this.loadData()
        }).catch(err => {
          console.log(err)
        })
      })
    },
    loadData() {
      let userId=this.$store.getters.userInfo.usid
      this.$api.processCenter.sentProcessPage({...this.q,...this.form,userId:userId}).then(res=>{
        this.tableData = res.data.list
        this.total = res.data.count
      }).catch(err=>{

      })
    },
    // 单页数据量
    handleSizeChange(val) {
      this.q.size = val;
      this.q.current = 1;
      this.loadData();
    },
    // 第几页
    handleCurrentChange(val) {
      this.q.current = val;
      this.loadData();
    },
    view(row) {
      this.$router.push({
        path: 'monitorViews',
        query: {
          id: this.$route.query.id,
          prcNum: row.prcNum,
          prcType: row.prcType,
          tabsName: 'AlreadyProcess'
        }
      })
    },

  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before {
  height: 0px !important;

}

.table {
  margin: 0 14px 0 13px;

  ::v-deep .el-pagination {
    margin-top: 13px;
    padding-left: 20px;
    padding-bottom: 10px;
  }
}
</style>