feat: 优化工单申请页面

package.json

@@ -47,6 +47,7 @@
     "core-js": "^2.6.11",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
+    "e-icon-picker": "^1.0.7",
     "echarts": "^4.8.0",
     "element-ui": "2.11.1",
     "file-saver": "2.0.1",

src/main.js

@@ -37,6 +37,12 @@ Vue.use(VueCodeMirror)
 import VueEditor from 'vue2-editor'
 Vue.use(VueEditor)
 
+import iconPicker from 'e-icon-picker'
+import 'e-icon-picker/dist/index.css'// 基础样式
+import 'e-icon-picker/dist/main.css' // fontAwesome 图标库样式
+
+Vue.use(iconPicker)
+
 // 全局方法挂载
 Vue.prototype.parseTime = parseTime
 Vue.prototype.resetForm = resetForm

src/views/process/admin/process-manager.vue

@@ -87,9 +87,18 @@
       <el-dialog :title="dialogProcessVisibleName===1?'新建流程':'编辑流程'" :visible.sync="open" :fullscreen="true" style="margin-top: 0">
         <div class="tpl-create-content">
           <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
-            <el-form-item label="名称" prop="name">
-              <el-input v-model="ruleForm.name" placeholder="请输入流程名称" style="width: 100%" />
-            </el-form-item>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="名称" prop="name">
+                  <el-input v-model="ruleForm.name" placeholder="请输入流程名称" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="图标" prop="icon">
+                  <e-icon-picker v-model="ruleForm.icon" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+            </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="分类" prop="classify">
@@ -137,6 +146,15 @@
                 </el-form-item>
               </el-col>
             </el-row>
+            <el-form-item label="描述" prop="remarks">
+              <el-input
+                v-model="ruleForm.remarks"
+                placeholder="请输入流程描述"
+                type="textarea"
+                :autosize="{ minRows: 2, maxRows: 4}"
+                style="width: 100%"
+              />
+            </el-form-item>
             <el-form-item label="流程" prop="structure">
               <div style="border-radius: 4px; overflow:hidden">
                 <div>
@@ -218,6 +236,9 @@ export default {
       lang: 'zh',
       ruleForm: {},
       rules: {
+        icon: [
+          { required: true, message: '请输入流程图标', trigger: 'blur' }
+        ],
         name: [
           { required: true, message: '请输入流程名称', trigger: 'blur' }
         ],
@@ -229,6 +250,9 @@ export default {
         ],
         structure: [
           { required: true, message: '请设计流程', trigger: 'blur' }
+        ],
+        remarks: [
+          { required: true, message: '请输入流程描述', trigger: 'blur' }
         ]
       }
     }
@@ -309,7 +333,9 @@ export default {
         structure: { 'edges': [], 'nodes': [], 'groups': [] },
         classify: '',
         task: [],
-        notice: [1]
+        notice: [1],
+        icon: '',
+        remarks: ''
       }
       this.dialogProcessVisibleName = 1
       this.open = true
@@ -332,7 +358,9 @@ export default {
           structure: response.data.structure,
           classify: response.data.classify,
           task: response.data.task,
-          notice: response.data.notice
+          notice: response.data.notice,
+          icon: response.data.icon,
+          remarks: response.data.remarks
         }
         this.open = true
         this.wfdDesignRefresh = false
@@ -405,7 +433,9 @@ export default {
               structure: structureValue,
               classify: this.ruleForm.classify,
               task: this.ruleForm.task,
-              notice: this.ruleForm.notice
+              notice: this.ruleForm.notice,
+              icon: this.ruleForm.icon,
+              remarks: this.ruleForm.remarks
             }).then(response => {
               this.getList()
               this.open = false

src/views/process/list/apply-process-list.vue

@@ -25,11 +25,22 @@
               v-for="buttonItem in item.process_list"
               :key="buttonItem.id"
               class="workflow-classify-button"
-              type="primary"
               plain
               @click="submitWorkOrder(buttonItem.id)"
             >
-              {{ buttonItem.name }}
+              <div class="process-button-div">
+                <div class="process-div-icon">
+                  <e-icon class="process-div-el-icon" :icon-name="buttonItem.icon" />
+                </div>
+                <div class="process-div-body">
+                  <div class="process-div-title ellipsis">
+                    {{ buttonItem.name }}
+                  </div>
+                  <div class="process-div-remarks ellipsis">
+                    {{ buttonItem.remarks }}
+                  </div>
+                </div>
+              </div>
             </el-button>
           </div>
         </div>
@@ -83,4 +94,46 @@ export default {
   .el-card__body {
     padding-bottom: 0;
   }
+
+  .process-button-div {
+    width: 180px;
+    height: 50px;
+  }
+
+  .process-div-icon {
+    float: left;
+    width: 50px;
+    height: 100%;
+    margin-right: 10px;
+  }
+
+  .process-div-el-icon {
+    font-size: 32px;
+    line-height: 50px;
+    color: #606266;
+  }
+
+  .process-div-body {
+    float: left;
+    width: 120px;
+    height: 100%;
+    text-align: left;
+  }
+
+  .process-div-title {
+    font-size: 15px;
+    margin-top: 8px;
+    color: #606266;
+  }
+
+  .process-div-remarks {
+    color: #999999;
+    margin-top: 3px;
+  }
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>