优化带啊

ruoyi-ui/src/views/flowable/task/myProcess/index.vue

@@ -129,7 +129,7 @@
           <label v-if="scope.row.assigneeName">{{scope.row.assigneeName}} <el-tag type="info" size="mini">{{scope.row.assigneeDeptName}}</el-tag></label>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="150" align="center" fixed="right" class-name="small-padding fixed-width">
+      <el-table-column label="操作" width="200" align="center" fixed="right" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button v-if="getActivate(scope.row)" @click="handleActivate(scope.row)" type="text" size="small" icon="el-icon-edit-outline">处理</el-button>
           <el-button @click="handleFlowRecord(scope.row)" type="text" size="small" icon="el-icon-finished">详情</el-button>
@@ -213,6 +213,27 @@
         @pagination="myDefinitionList"
       />
     </el-dialog>
+    <!-- 终止流程 -->
+    <el-dialog :title="title" :visible.sync="stopOpen" width="30%" append-to-body>
+      <el-form ref="form"
+        :model="form"
+        :rules="rules"
+        v-loading="stopLoading"
+        label-width="80px">
+        <el-form-item label="终止原因" prop="comment">
+          <el-input
+            type="textarea"
+            v-model="form.comment"
+            placeholder="请输入终止原因"
+            rows="5"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleStopClick">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
     <initTaskDrawer ref="initTaskDrawer" :closeCallBack="getList"></initTaskDrawer>
     <initLeaveTaskDrawer ref="initLeaveTaskDrawer" :closeCallBack="getList"></initLeaveTaskDrawer>
     <editTaskDrawer ref="editTaskDrawer" :closeCallBack="getList"></editTaskDrawer>
@@ -255,6 +276,7 @@ export default {
     return {
       // 遮罩层
       loading: true,
+      stopLoading: false,
       processLoading: true,
       // 选中数组
       ids: [],
@@ -273,6 +295,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      stopOpen:false,
       src: "",
       definitionList:[],
       // 查询参数
@@ -303,6 +326,14 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        comment: [
+          { required: true, message: "请输入终止原因", trigger: "blur" },
+          {
+            max: 500,
+            message: "终止原因最多输入500字",
+            trigger: "blur",
+          },
+        ],
       },
       daterangeCheckTime:[],
       tabs:{
@@ -357,6 +388,7 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
+      this.stopOpen = false;
       this.reset();
     },
     // 表单重置
@@ -448,18 +480,27 @@ export default {
     },
     /**  取消流程申请 */
     handleStop(row){
-      const params = {
-        instanceId: row.procInsId
-      }
+      this.form.taskId = row.taskId;
+      this.form.userId = this.$store.getters.userId
+      this.form.instanceId = row.procInsId;
+      this.stopOpen = true;
+    },
+    /**  取消流程申请 */
+    handleStopClick(){
       let that = this;
+      this.$refs["form"].validate(valid => {
+        if (valid) {
           this.$modal.confirm('是否终止当前流程申请？').then(function() {
-        that.loading = true;
-        return stopProcess(params);
+            that.stopLoading = true;
+            return stopProcess(that.form);
           }).then(res => {
             that.$modal.msgSuccess(res.msg);
-        that.loading=false;
+            that.stopLoading=false;
+            that.stopOpen = false;
             that.getList();
           });
+        }
+      });
     },
     /** 流程流转记录 */
     handleFlowRecord(row){