流程管理

src/views/system/archivesCategory/processManage/module/form.vue

@@ -19,7 +19,7 @@
               />
             </el-select>
           </el-form-item>
-          <div class="template-img">
+          <div v-loading="loadingImg" class="template-img">
             <img :src="srcImg" alt="" :onerror="defaultImg">
           </div>
         </div>
@@ -29,18 +29,18 @@
             <div class="task-item">
               <p>任务1：任务名称</p>
               <el-form-item label="执行岗位" prop="task01">
-                <el-select v-model="form.task01">
-                  <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.label" />
-                </el-select>
-              </el-form-item>
-            </div>
-            <div class="task-item">
-              <p>任务2：任务名称</p>
-              <el-form-item label="执行岗位" prop="task02">
-                <el-select v-model="form.task02">
+                <el-select v-model="form.task01" @change="selectJob">
                   <el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.label" />
                 </el-select>
               </el-form-item>
+              <div v-if="form.task01" class="detail-arrow" @click="isExpend = !isExpend"><i :class="['iconfont icon-xiala', isExpend ? 'arrow-up':'']" /></div>
+              <el-collapse-transition>
+                <el-table v-if="isExpend" :data="userTableData" border style="width: 100%">
+                  <el-table-column prop="fonds" label="全宗" align="center" />
+                  <el-table-column prop="dept" label="部门" align="center" />
+                  <el-table-column prop="username" label="用户名" align="center" />
+                </el-table>
+              </el-collapse-transition>
             </div>
           </div>
         </div>
@@ -61,15 +61,21 @@ export default {
     return {
       cuDialogVisible: false,
       loading: false,
+      loadingImg: false,
       form: {
         modelId: null,
         task01: null,
         task02: null
       },
       modelOptions: [],
-      srcImg: null,
-      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"',
-      jobOptions: [],
+      srcImg: '',
+      defaultImg: 'this.src="' + require('@/assets/images/system/default-img2.png') + '"',
+      jobOptions: [
+        {
+          value: '',
+          label: '请选择'
+        }
+      ],
       rules: {
         modelId: [
           { required: true, message: '流程模板不可为空', trigger: 'change' }
@@ -80,7 +86,9 @@ export default {
         task02: [
           { required: true, message: '执行岗位不可为空', trigger: 'change' }
         ]
-      }
+      },
+      isExpend: false,
+      userTableData: []
     }
   },
   mounted() {
@@ -102,8 +110,10 @@ export default {
       })
     },
     selectModel(val) {
+      this.loadingImg = true
       FetchFindFolwImgByModelId({ 'processDefinitionId': val.procdefId }).then((res) => {
         this.srcImg = 'data:image/jpeg;base64,' + res
+        this.loadingImg = false
       }).catch(err => {
         console.log(err)
       })
@@ -149,13 +159,17 @@ export default {
   margin-right: 20px;
 }
 .template-img{
+  display: flex;
+  align-items: center;
   width: 690px;
   height: 460px;
   border: 1px solid #eee;
+  background-color: #EDEFF3;
   overflow: hidden;
   img{
     display: block;
-    width: 100%;
+    margin: 0 auto;
+    // width: 100%;
   }
 }
 .task-tip{
@@ -177,4 +191,35 @@ export default {
     line-height: 32px;
   }
 }
+.detail-arrow{
+    position: relative;
+    width: 64px;
+    height: 20px;
+    margin: -8px auto 10px auto;
+    background-color:#E8F2FF;
+    border-radius: 3px;
+    cursor: pointer;
+    i{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      display: block;
+      width: 14px;
+      height: 14px;
+      margin-top: -7px;
+      margin-left: -7px;
+      text-align: center;
+      font-size: 12px;
+      color: #0348F3;
+      transition: all ease-in 0.4s;
+      transform: scale(0.7);
+      &.arrow-up {
+        transform: scale(0.7) rotate(180deg);
+        transform-origin: center;
+      }
+    }
+  }
+  ::v-deep .el-table__body-wrapper{
+    border-bottom: 1px solid #dfe6ec !important;
+  }
 </style>