demo-web-ui

demo-web-ui/src/views/workflow/mytask.vue

@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <div class="tab-header">
+      <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="名称"><el-input v-model="queryParams.params.days" clearable placeholder="请输入名称" /></el-form-item>
+            <el-form-item label="开始时间">
+              <el-date-picker v-model="queryParams.params.startTime" clearable type="date" value-format="yyyy-MM-dd" placeholder="选择时间" />
+            </el-form-item>
+            <el-button @click="handleQuery">查询</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-table v-loading="tableLoading" :data="myTaskList" border>
+      <el-table-column label="序号" width="50px" type="index" align="center" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)">处理</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="请假天数" width="90" align="center" prop="processVariables.zd1" />
+      <el-table-column label="任务编号" width="300" align="center" prop="taskId" />
+      <el-table-column label="流程名称" align="center" prop="procDefName" />
+      <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>
+    <pagination :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" @pagination="pagination" />
+    <!-- 编辑信息 -->
+    <el-dialog title="编辑用户信息" :visible.sync="editDialog" width="40%">
+      <el-card class="box-card">
+        <el-col :span="16" :offset="4">
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="请假原因2"><el-input v-model="form.zd2" /></el-form-item>
+            <el-form-item label="请假天数1"><el-input v-model="form.zd1" /></el-form-item>
+            <el-form-item label="指定人员3"><el-input v-model="form.zd3" /></el-form-item>
+            <el-form-item label="审批意见4"><el-input v-model="form.zd4" /></el-form-item>
+            <el-form-item label="指定待办人"><el-input v-model="form.INITIATOR" /></el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleComplete">同意</el-button>
+              <el-button @click="handleReject">驳回</el-button>
+              <el-button @click="getNextNode">下一环节</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import reqFlow from '@/api/workflow/flow'
+import {complete} from'@/api/workflow/flow'
+import {  rejectTask } from "@/api/workflow/todo";
+export default {
+  data() {
+    return {
+      editDialog:false,
+      queryParams: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          processDefinitionId:'',
+          days: '',
+          startTime: '',
+          userSid: window.sessionStorage.getItem('userSid')
+        }
+      },
+      tableLoading: false,
+      myTaskList: [],
+      form: {
+        zd: '',
+        days: '',
+        initiator: '',
+        outcome: '',
+        taskId:"",
+        userSid:"",
+        comment:"",
+        instanceId:""
+      }
+    }
+  },
+  created() {
+    this.loadList()
+  },
+  methods: {
+    /** 审批任务 */
+    handleComplete() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          complete(this.form).then(response => {
+            this.editDialog = false;
+            this.handleQuery();
+          });
+        }
+      });
+    },
+    // 跳转到处理页面
+    handleProcess(row) {
+      this.editDialog = true
+      this.form.zd1=row.processVariables.zd1;
+      this.form.zd2=row.processVariables.zd2;
+      this.form.zd3=row.processVariables.zd3;
+      this.form.zd4=row.processVariables.zd4;
+/*
+      this.form.zd=row.processVariables.zd;
+      this.form.outcome=row.processVariables.outcome;
+      this.form.initiator=row.processVariables.initiator;
+      this.form.days=row.processVariables.days;
+*/
+      this.form.taskId=row.taskId;
+      this.form.userSid=  window.sessionStorage.getItem('userSid');
+      this.form.comment='同意';
+      this.form.instanceId=row.procInsId;
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.$refs['queryForm'].resetFields()
+      this.handleQuery()
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.loadList()
+    },
+    loadList() {
+      this.queryParams.params.processDefinitionId="order_approve_96asleqi:1:227504"
+      this.tableLoading = true
+      reqFlow
+        .todoTaskList(this.queryParams)
+        .then(response => {
+          this.myTaskList = response.data.records
+          this.queryParams.total = response.data.total
+          this.tableLoading = false
+        })
+        .catch(e => {
+          this.tableLoading = false
+        })
+    },
+    // 分页
+    pagination(val) {
+      this.queryParams.current = val.pageNum
+      this.queryParams.size = val.pageSize
+      this.loadList()
+    },
+    /** 驳回任务 */
+    handleReject() {
+      const params = {
+        taskId: this.form.taskId
+      }
+      rejectTask(params).then(res => {
+        this.msgSuccess(res.msg);
+        this.goBack();
+      });
+    },
+    /** 下一环节 */
+    getNextNode() {
+      const params = {
+        taskId: this.form.taskId
+      }
+      reqFlow.getNextNodes(params).then(res => {
+        this.msgSuccess(res.msg);
+      });
+    }
+  }
+}
+</script>
+
+<style></style>