lims-pc/src/views/taskManagement/todo/component/tableCol.vue

<template>
    <div class="app-container">
     <el-row :gutter="12" class="mb8" style="margin-top: 10px;margin-bottom: 10px;">
       <el-col :span="1.5">
         <el-button
           type="primary"
           
           icon="el-icon-caret-right"
           size="mini"
           @click="handleDelete"
         >
         开始
         </el-button>
       </el-col>
       <el-col style="float: right;" :span="8.5">
           <el-input
           v-model="queryParams.name"
           placeholder="请输入名称"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
         >
         <el-button slot="append" icon="el-icon-search"></el-button>
           </el-input>
       </el-col>
       <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
     
     </el-row>
     <el-row :gutter="12"  style="margin-top: 10px;margin-bottom: 10px;">
     <div  class="table_top">
      <div>已选择<span >2</span>项</div>
      <div style="margin: 0 10px;">样品数量累计：<span >4</span>个</div>
      <div class="table_btn">清空</div>
     </div>
     </el-row>
     <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
       <el-table-column label="流程名称" align="center" prop="procDefName"/>
       <el-table-column label="样品数量" align="center" prop="procDefName"/>
       <el-table-column label="当前节点" align="center" prop="taskName"/>
       <el-table-column label="流程状态" align="center" prop="taskName"/>
       <!-- <el-table-column label="流程版本" align="center">
         <template slot-scope="scope">
           <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
         </template>
       </el-table-column> -->
       <!-- <el-table-column label="流程发起人" align="center">
         <template slot-scope="scope">
           <label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
         </template>
       </el-table-column> -->
       <el-table-column label="到达节点时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             @click="handleProcess(scope.row)"
           >返回
           </el-button>
           <el-button
             size="mini"
             type="text"
             @click="handleProcess(scope.row)"
           >查看
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
       v-show="total>0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
   </div>
  </template>
  
  <script>
  import {
    todoList,
    complete,
    returnList,
    returnTask,
    rejectTask,
    getDeployment,
    delDeployment,
    exportDeployment
  } from "@/api/flowable/todo";
  
  export default {
    name: "Deploy",
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 流程待办任务表格数据
        todoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          category: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询流程定义列表 */
      getList() {
        this.todoList=[]
        this.loading = false;
        // this.loading = true;
        // todoList(this.queryParams).then(response => { 
        //   this.todoList = response.data.records;
     
        //   this.total = response.data.total;
        //   this.loading = false;
        // });
      },
      // 跳转到处理页面
      handleProcess(row){
        this.$router.push({ path: '/flowable/task/todo/detail/index',
          query: {
            procInsId: row.procInsId,
            executionId: row.executionId,
            deployId: row.deployId,
            taskId: row.taskId,
            taskName: row.taskName,
            startUser: row.startUserName + '-' + row.startDeptName,
          }})
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          category: null,
          key: null,
          tenantId: null,
          deployTime: null,
          derivedFrom: null,
          derivedFromRoot: null,
          parentDeploymentId: null,
          engineVersion: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.taskId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
    
        // this.$router.push({ path: '/task/test/detail'});
        this.$router.push({ path: '/task/detail'})
        // const ids = row.taskId || this.ids;
        // this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning"
        // }).then(function () {
        //   return delDeployment(ids);
        // }).then(() => {
        //   this.getList();
        //  this.$modal.msgSuccess("删除成功");
        // })
      },
    }
  };
  </script>
<style lang="scss" scoped>
.table_top{
  display: flex;
  height: 40px;
  align-items: center;
  background-color:rgba(230, 247, 255, 1) ;
  border-color: rgba(186, 231, 255, 1);
  padding-left: 10px;
  margin-left: 5px;
  span{
    color: #1890FF;
  }
  .table_btn{
    color: #1890FF;
  }
}
</style>