修改监控流程详情

src/views/userCenter/processCenter/monitorProcesses/monitorModal.vue

@@ -1,13 +1,15 @@
 <template>
     <div>
-        <el-dialog title="调整处理人" :visible.sync="dialogVisible" :before-close="handleClose">
-            <div class="form-container">
-                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
-                    <el-form-item label="选择人员" prop="select" >
-                        <el-select v-model="form.select" placeholder="请选择调整处理人">
-                            <el-option label="张三" value="1"></el-option>
-                            <el-option label="李四" value="2"></el-option>
-                        </el-select>
+        <el-dialog title="调整处理人" :visible.sync="dialogVisible" width="500px">
+            <div class="label-input-form addModel">
+                <el-form ref="form" :model="form" label-width="120px" :rules="rules" class="formData">
+                    <el-form-item label="选择人员" prop="assignee" class="el-form-item">
+                      <el-select v-model="form.assignee" class="icon-auth" collapse-tags
+                                 placeholder="请选择">
+                        <template v-for="item in userList">
+                          <el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>
+                        </template>
+                      </el-select>
                     </el-form-item>
                 </el-form>
             </div>
@@ -24,72 +26,89 @@ export default {
     name: 'modal',
     data() {
         return {
+            userList: [],
             dialogVisible: false,
-            form: {},
+            form: {
+              assignee:''
+            },
             rules: {
-                select: [
-                    {
-                        required: 'true',
-                        trigger: 'change',
-                        message: '请选择调整处理人'
-                    }
+              assignee: [
+                      {
+                          required: 'true',
+                          trigger: 'change',
+                          message: '请选择调整处理人'
+                      }
                 ]
-            }
+            },
+           taskId:''
         };
     },
+
+    mounted() {
+      this.sysUserList()
+    },
     methods: {
-        handleClose() {
-          this.dialogVisible = true
-        },
-        open() {
-          this.form.name
-            this.dialogVisible = true
-        },
-        submit() {
-            this.$refs.form.validate((valid) => {
-                if (valid) {
-                    alert(11)
-                    this.dialogVisible = false
-                }
-            })
+      changeSelect(val) {
+        this.checked = (val.length || this.reportF.reportUserIdList.length) === this.userList.length;
+        // this.$emit('update:updateMultipleSelect',this.reportF.reportUserIdList);
+      },
+      // 获取所有用户
+      sysUserList() {
+        this.$api.user.sysUserList({ pageNo: 1, pageSize: 999999 }).then(({ data }) => {
+          this.userList = data.records;
+        })
+      },
+      open(taskId) {
+        this.taskId=taskId
+        this.form.name={
+          assignee:''
         }
+        this.dialogVisible = true
+      },
+      submit() {
+        this.$refs.form.validate((valid) => {
+            if (valid) {
+              let userId=this.form.assignee
+              let assignee=this.$store.getters.userInfo.USID
+                this.$api.process.changeAssignee({
+                  taskId:this.taskId.join(','),
+                  assignee:assignee,
+                  userId: userId,
+                  pId:this.pId
+                })
+                  .then(res=>{
+                    //转办完应该跳到哪个页面？
+                    //转办完这个人还能看到这个监控流程吗
+                    this.dialogVisible = false
+                  })
+
+            }
+        })
+      }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog-footer {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 30px;
-
+.dialog-footer{
+  margin: 20px 20px ;
+  .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+    font-size: 14px;
+  }
 }
-
-::v-deep .el-dialog {
-    width: 600px;
-
+::v-deep .el-dialog__footer{
+  padding-bottom: 20px;
 }
-
-::v-deep .el-dialog .el-dialog__body {
-    font-size: 50px;
-    height: 230px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.addModel{
+  padding: 20px;
 }
-
-::v-deep .el-input__inner {
-    height: 40px;
-    line-height: 40px;
+.el-form-item{
+  ::v-deep .el-select{
+    width: 300px;
+    vertical-align: center;
+  }
 }
-
-::v-deep .el-form-item--mini .el-form-item__label {
-    line-height: 40px !important;
-}
-
-::v-deep .btn {
-    width: 90px;
-    height: 40px;
-    border-radius: 30px;
-    margin-right: 30px;
-}</style>
+</style>