From 7a1ff7b7e97e51c13be65bc62496508fd8d85a5d Mon Sep 17 00:00:00 2001
From: zhuyong <123@163.com>
Date: Sun, 11 Apr 2021 00:36:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=BB=E5=8A=A1=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=89=E6=8B=A9=E5=8F=AF=E9=80=80=E5=9B=9E?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/flowable/task/record/index.vue  | 164 +++++++++-------
 .../src/views/flowable/task/todo/index.vue    | 181 ------------------
 2 files changed, 92 insertions(+), 253 deletions(-)

diff --git a/ruoyi-ui/src/views/flowable/task/record/index.vue b/ruoyi-ui/src/views/flowable/task/record/index.vue
index 704bc95..57fec3b 100644
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@@ -1,36 +1,57 @@
 <template>
   <div class="app-container">
-            <!--        <el-row :gutter="20">-->
         <el-card class="box-card" >
               <div slot="header" class="clearfix">
                 <span class="el-icon-document">基础信息</span>
                 <el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
               </div>
+
+            <!--流程表单填写数据-->
             <el-col :span="16" :offset="8" v-if="variableOpen">
-                  <div style="margin-bottom: 20px;font-size: 14px" v-for="item in variables">
-                    <label style="font-weight: normal">{{item.label}}： </label>
-                    <label v-if="item.val instanceof Array" style="color:#8a909c;font-weight: normal">{{item.val[0]}}  至  {{item.val[1]}}</label>
-                    <label v-else style="color:#8a909c;font-weight: normal">{{item.val}}</label>
+                <el-form style="margin-bottom: 20px;font-size: 14px"  ref="variablesForm"  label-width="80px" size="mini">
+                  <div v-for="item in variables">
+                      <el-form-item :label="item.label">
+                        <label v-if="item.val instanceof Array" style="color:#8a909c;font-weight: normal">{{item.val[0]}}  至  {{item.val[1]}}</label>
+                        <label v-else style="color:#8a909c;font-weight: normal">{{item.val}}</label>
+                      </el-form-item>
                   </div>
+                </el-form>
 
-                  <!--审批意见填写-->
-                  <div style="margin-bottom: 20px;font-size: 14px;" v-if="finished">
-                      <label style="font-weight: normal;font-size: 14px;">审批意见：</label>
-                      <el-input style="margin-top:10px;width:50%" type="textarea" v-model="comment" placeholder="请输入意见"/>
-                    <div style="margin-top: 20px">
+              <!--审批意见填写-->
+              <div style="margin-bottom: 20px;font-size: 14px;" v-if="finished">
+                <el-form ref="taskForm" :model="taskForm" label-width="80px" size="mini">
+                  <el-form-item label="退回节点" prop="targetKey" v-show="taskForm.returnTaskShow">
+                    <el-radio-group v-model="taskForm.targetKey">
+                      <<el-radio-button
+                        v-for="item in returnTaskList"
+                        :key="item.id"
+                        :label="item.id"
+                      >{{item.name}}</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item label="审批意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
+                    <el-input style="width: 30%;" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
+                  </el-form-item>
+                  <el-form-item>
+                    <div  v-show="taskForm.defaultTaskShow">
                       <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleComplete">审批</el-button>
-                      <el-button  icon="el-icon-refresh-left" type="warning" size="mini" >退回</el-button>
+                      <el-button  icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
                       <el-button  icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
                     </div>
-                  </div>
+                    <div v-show="taskForm.returnTaskShow">
+                      <el-button type="primary" @click="submitReturnTask">确 定</el-button>
+                      <el-button @click="cancelTask">取 消</el-button>
+                    </div>
+                  </el-form-item>
+                </el-form>
+              </div>
             </el-col>
 
             <!--初始化流程加载表单信息-->
             <el-col :span="16" :offset="4" v-if="formConfOpen">
               <div class="test-form">
-                <parser :key="new Date().getTime()"  :form-conf="formConf" @submit="sumbitForm1" ref="parser" @getData="getData" />
+                <parser :key="new Date().getTime()"  :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
               </div>
-              <!--            <el-button type="success" size="mini" @click="startProcess">启动</el-button>-->
             </el-col>
         </el-card>
 
@@ -77,20 +98,17 @@
           <el-image :src="src"></el-image>
         </el-col>
       </el-card>
-<!--        </el-row>-->
   </div>
 </template>
 
 <script>
 import { flowRecord } from "@/api/flowable/finished";
-// import BpmnViewer from '@/components/BpmnViewer/src/BpmnViewer'
 import Parser from '@/components/parser/Parser'
 import {definitionStart, getProcessVariables } from "@/api/flowable/definition";
-import {complete, rejectTask} from "@/api/flowable/todo";
+import {complete, rejectTask, returnList, returnTask} from "@/api/flowable/todo";
 export default {
   name: "Record",
   components: {
-    // BpmnViewer
     Parser
   },
   props: {},
@@ -101,36 +119,40 @@ export default {
       flowRecordList: [], // 流程流转数据
       formConfCopy: {},
       src: null,
-      form:{},
-      // 表单校验
-      rules: {},
-      comment:"", // 意见内容
+      rules: {}, // 表单校验
+      variablesForm: {}, // 流程变量数据
+      taskForm:{
+        returnTaskShow: false,
+        defaultTaskShow: true,
+        comment:"", // 意见内容
+        procInsId: "", // 流程实例编号
+        deployId: "",  // 流程定义编号
+        taskId: "" ,// 流程任务编号
+        procDefId: "",  // 流程编号
+      },
       formConf: {}, // 默认表单数据
       formConfOpen: false, // 是否加载默认表单数据
-      procDefId: "",  // 流程编号
       variables: [], // 流程变量数据
       variableOpen: false, // 是否加载流程变量数据
-      procInsId: "", // 流程实例编号
-      deployId: "",  // 流程定义编号
-      taskId: "" ,// 流程任务编号
+      returnTaskList: [],  // 回退列表数据
       finished: false,
       isFinished: 0
     };
   },
   created() {
-    this.procInsId = this.$route.query && this.$route.query.procInsId;
+    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
     // 初始化表单
-    this.deployId = this.$route.query && this.$route.query.deployId;
-    this.procDefId  = this.$route.query && this.$route.query.procDefId;
+    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
+    this.taskForm.procDefId  = this.$route.query && this.$route.query.procDefId;
     this.isFinished =  this.$route.query && this.$route.query.isFinished
 
     // 流程任务重获取变量表单
-    this.taskId  = this.$route.query && this.$route.query.taskId;
-    if (this.taskId){
-      this.processVariables(this.taskId)
-      this.deployId = null
+    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
+    if (this.taskForm.taskId){
+      this.processVariables( this.taskForm.taskId)
+      this.taskForm.deployId = null
     }
-    this.getFlowRecordList(this.procInsId,this.deployId);
+    this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
   },
   mounted() {
     // // 表单数据回填，模拟异步请求场景
@@ -170,8 +192,7 @@ export default {
           this.formConf = res.data.formData;
           this.formConfOpen = true
         }
-
-        // 处理已办任务页面跳转后会显示审批等操作按钮
+        // 处理已办任务页面跳转后会显示审批等操作按钮 todo: 待优化
         if (this.isFinished == 0) {
           this.finished = res.data.finished;
         }
@@ -188,19 +209,6 @@ export default {
         }
       })
     },
-    /** 启动流程 */
-    startProcess(){
-      this.$refs.parser.getData()
-      if (this.procDefId) {
-        let variables = {
-          "variables": this.variables
-        }
-        definitionStart(this.procDefId,JSON.stringify(variables)).then(res => {
-          this.msgSuccess(res.msg);
-        })
-      }
-
-    },
     /** 获取流程变量内容 */
     processVariables(taskId){
       if (taskId) {
@@ -212,28 +220,12 @@ export default {
     },
     /** 审批任务*/
     handleComplete() {
-      const  params = {
-        instanceId: this.procInsId,
-        taskId: this.taskId,
-        comment:this.comment
-      }
-      complete(params).then(response => {
+      complete(this.taskForm).then(response => {
         this.msgSuccess(response.msg);
         this.goBack();
       })
     },
-    /** 驳回任务 */
-    handleReject() {
-      const params = {
-        taskId: this.taskId,
-        comment: this.comment
-      }
-      rejectTask(params).then(res => {
-        this.msgSuccess(res.msg);
-        this.goBack();
-      })
-    },
-    /** 回退页面 */
+    /** 返回页面 */
     goBack(){
       // 关闭当前标签页并返回上个页面
       this.$store.dispatch("tagsView/delView", this.$route);
@@ -261,8 +253,8 @@ export default {
         this.variables = variables;
       }
     },
-    sumbitForm1(data) {
-      console.log('sumbitForm1提交数据：', data)
+    /** 申请流程表单数据提交 */
+    submitForm(data) {
       if (data){
         const variableList = [];
         data.fields.forEach(item =>{
@@ -280,17 +272,45 @@ export default {
           }
           variableList.push(variableData)
         })
-        // this.variables = variables;
-        if (this.procDefId) {
+        if (this.taskForm.procDefId) {
           let variables = {
             "variables": variableList
           }
-          definitionStart(this.procDefId,JSON.stringify(variables)).then(res => {
+          // 启动流程并将表单数据加入流程变量
+          definitionStart(this.taskForm.procDefId,JSON.stringify(variables)).then(res => {
             this.msgSuccess(res.msg);
             this.goBack();
           })
         }
       }
+    },
+    /** 驳回任务 */
+    handleReject() {
+      rejectTask(this.taskForm).then(res => {
+        this.msgSuccess(res.msg);
+        this.goBack();
+      })
+    },
+    /** 可退回任务列表 */
+    handleReturn() {
+      returnList(this.taskForm).then(res => {
+        this.returnTaskList = res.data;
+        this.taskForm.returnTaskShow = true;
+        this.taskForm.defaultTaskShow = false;
+      })
+    },
+    /** 取消回退任务按钮 */
+    cancelTask() {
+      this.taskForm.returnTaskShow = false;
+      this.taskForm.defaultTaskShow = true;
+      this.returnTaskList = [];
+    },
+    /** 提交退回任务 */
+    submitReturnTask(){
+      returnTask(this.taskForm).then(res => {
+        this.msgSuccess(res.msg);
+        this.goBack()
+      })
     }
   }
 };
diff --git a/ruoyi-ui/src/views/flowable/task/todo/index.vue b/ruoyi-ui/src/views/flowable/task/todo/index.vue
index 63bfd99..41b9db8 100644
--- a/ruoyi-ui/src/views/flowable/task/todo/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/todo/index.vue
@@ -99,27 +99,6 @@
             @click="handleProcess(scope.row)"
           >处理
           </el-button>
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit-outline"-->
-<!--            @click="handleComplete(scope.row)"-->
-<!--          >审批-->
-<!--          </el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-refresh-left"-->
-<!--            @click="handleReturn(scope.row)"-->
-<!--          >退回-->
-<!--          </el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-circle-close"-->
-<!--            @click="handleReject(scope.row)"-->
-<!--          >驳回-->
-<!--          </el-button>-->
           <el-button
             size="mini"
             type="text"
@@ -139,63 +118,6 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 审批任务 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="任务编号" prop="taskId">
-          <el-input disabled v-model="form.taskId"/>
-        </el-form-item>
-        <el-form-item label="意见内容" prop="comment">
-          <el-input type="textarea" v-model="form.comment" placeholder="请输入意见"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 驳回任务 -->
-    <el-dialog :title="rejectTask.title" :visible.sync="rejectTask.open" width="500px" append-to-body>
-      <el-form ref="rejectTask" :model="rejectTask" label-width="80px">
-        <el-form-item label="任务编号" prop="taskId">
-          <el-input disabled v-model="rejectTask.taskId"/>
-        </el-form-item>
-        <el-form-item label="意见内容" prop="comment">
-          <el-input type="textarea" v-model="rejectTask.comment" placeholder="请输入意见"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitRejectForm">确 定</el-button>
-        <el-button @click="cancelReject">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 退回任务 -->
-    <el-dialog :title="returnTaskData.title" :visible.sync="returnTaskData.open" width="500px" append-to-body>
-      <el-table
-        v-loading="loading"
-        :data="returnList"
-        @current-change="handleCurrentChange"
-        highlight-current-row
-        border
-      >
-        <el-table-column width="55" align="center" label="选择">
-          <template scope="scope">
-            <el-radio :label="scope.$index" v-model="radio" @change.native="handleRadioChoice(scope.row)">{{""}}</el-radio>
-          </template>
-        </el-table-column>
-        <el-table-column label="退回key" align="center" prop="id"/>
-        <el-table-column label="退回节点" align="center" prop="name"/>
-      </el-table>
-      <el-divider></el-divider>
-      <label>意见</label><el-input type="textarea" v-model="taskComment" placeholder="请输入意见"/>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitReturnTask">确 定</el-button>
-        <el-button @click="cancelTask">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
@@ -234,13 +156,6 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
-      radio: "",
-      // 回退列表数据
-      returnList: [],
-      // 回退请求参数
-      returnTaskData: {},
-      // 退回意见
-      taskComment: "",
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -250,14 +165,12 @@ export default {
       },
       // 表单参数
       form: {},
-      rejectTask:{},
       // 表单校验
       rules: {}
     };
   },
   created() {
     this.getList();
-
   },
   methods: {
     /** 查询流程定义列表 */
@@ -284,17 +197,6 @@ export default {
       this.open = false;
       this.reset();
     },
-    // 取消驳回任务按钮
-    cancelReject() {
-      this.rejectTask.open = false;
-      this.rejectTask = {};
-    },
-    // 取消任务按钮
-    cancelTask() {
-      this.returnTaskData.open = false;
-      this.radio = "";
-      this.getList();
-    },
     // 表单重置
     reset() {
       this.form = {
@@ -327,58 +229,12 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    // 单选框选中
-    handleRadioChoice(row){
-      this.returnTaskData.targetKey =  row.id
-    },
-    handleCurrentChange(val) {
-      if (val) {
-        let index = this.returnList.findIndex(
-          item => item.id === val.id
-        )
-        if (index > -1) {
-          this.radio = index;
-        }
-        this.$emit('data', val.pkg)
-      }
-      this.returnTaskData.targetKey =  val.id
-    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加流程定义";
     },
-    /** 审批任务*/
-    handleComplete(row) {
-      this.form = {
-        instanceId: row.procInsId,
-        taskId: row.taskId
-      }
-      this.open = true;
-      this.title = "审批任务";
-    },
-    /** 可退回任务列表 */
-    handleReturn(row) {
-      const params = {
-        taskId: row.taskId
-      }
-      returnList(params).then(res => {
-        this.returnList = res.data;
-        this.returnTaskData.taskId = params.taskId
-        this.returnTaskData.open = true;
-        this.returnTaskData.title = "可退回任务列表";
-      })
-    },
-    /** 驳回任务 */
-    handleReject(row) {
-      this.rejectTask = {
-        instanceId: row.procInsId,
-        taskId: row.taskId
-      }
-      this.rejectTask.open = true;
-      this.rejectTask.title = "驳回任务";
-    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
@@ -389,43 +245,6 @@ export default {
         this.title = "修改流程定义";
       });
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          complete(this.form).then(response => {
-            this.msgSuccess(response.msg);
-            this.open = false;
-            this.getList();
-          })
-        }
-      });
-    },
-    /** 提交退回任务*/
-    submitReturnTask(){
-      const params = {
-        taskId: this.returnTaskData.taskId,
-        targetKey: this.returnTaskData.targetKey
-      }
-      returnTask(params).then(res => {
-        this.returnTaskData.open = false;
-        this.msgSuccess(res.msg);
-        this.radio = "";
-        this.getList();
-      })
-    },
-    /** 提交驳回任务*/
-    submitRejectForm(){
-      const params = {
-        taskId: this.rejectTask.taskId,
-        comment: this.rejectTask.comment
-      }
-      rejectTask(params).then(res => {
-        this.msgSuccess(res.msg);
-        this.rejectTask.open = false;
-        this.getList();
-      })
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;