优化

src/views/modules/process/process.vue

@@ -2,22 +2,11 @@
   <div class="mod-menu">
     <div class="my-menu">
       <div class="menu-head">流程类别</div>
-      <div v-for="(item, index) in menuList" :key="index" :class="{'menu-item': true, 'menu-active': active === index}">订单流程</div>
+      <div v-for="(item, index) in menuList" :key="index" :class="{'menu-item': true, 'menu-active': active === index}">{{ item }}</div>
     </div>
     <div class="my-process">
       <div class="template_box">
         <div class="template_in">
-          <!-- <h1>新增流程模板</h1>
-          <div class="templateInfo">
-              <el-form label-width="100px" :model="templateForm" ref="templateForm" :rules="templateRules">
-                <el-form-item label="模板名称:" prop="name">
-                  <el-input v-model="templateForm.name" placeholder='请输入模板名称' />
-                </el-form-item>
-                <el-form-item label="模板说明:" prop="msg">
-                  <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" v-model="templateForm.msg" placeholder='请输入模板说明' />
-                </el-form-item>
-              </el-form>
-          </div> -->
           <div class="step_box">
               <div class='start-steps'>
                 <button class='start-btn'>开始</button>
@@ -38,18 +27,18 @@
           <div class="stepInfo">
               <p>步骤详情（请点击上方加号添加步骤）</p>
               <div class="stepDetails">
-                <el-form ref="stepForm" label-width="100px" :model="stepForm" :rules="stepRules">
+                <el-form ref="stepForm" label-width="120px" :model="stepForm" :rules="stepRules">
                   <el-form-item label="步骤名称:" prop="step_name">
                     <el-input v-model="stepForm.step_name" @change='stepnameChange' :disabled="templateAddDisable" placeholder='请输入步骤名称' />
                   </el-form-item>
                   <el-form-item label="审批类型:" prop="step_type">
-                    <el-radio-group v-model="stepForm.stepType">
+                    <el-radio-group v-model="stepForm.step_type" :disabled="templateAddDisable">
                       <el-radio label="1">会签</el-radio>
                       <el-radio label="2">或签</el-radio>
                     </el-radio-group>
                   </el-form-item>
                   <el-form-item label="节点审批员:" prop="step_func">
-                    <el-select class='typeBox' v-model='stepForm.step_func' placeholder='节点审批员' style="width: 500px;" @change='featureChange' :disabled="templateAddDisable">
+                    <el-select class='typeBox' v-model='stepForm.step_func' placeholder='节点审批员' @change='featureChange' :disabled="templateAddDisable">
                       <el-option v-for='i in featureItem' :key='i.id' :label='i.label' :value='i.value' />
                     </el-select>
                   </el-form-item>
@@ -57,7 +46,6 @@
                 </div>
           </div>
           <div class='confirmBox'>
-              <el-button size='medium' style='padding:8px 18px; font-size:14px;' @click="closeDialog">返回</el-button>
               <el-button type='primary' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="replace">重置</el-button>
               <el-button type='success' size='medium' style='padding:8px 18px; margin-left:20px; font-size:14px;' @click="confirm">提交</el-button>
           </div>
@@ -74,13 +62,15 @@
 
 <script>
   // import AddOrUpdate from './menu-add-or-update'
-  import vuedraggable from 'vuedraggable'
+  import draggable from 'vuedraggable'
   export default {
     data () {
       return {
         id: 0,
         showEndSteps: true,
         dragging: false,
+        active: 0,
+        menuList: ['订单流程', '采购流程'],
         list: [],
         templateAddDisable: true,
         featureItem: [
@@ -106,7 +96,7 @@
       }
     },
     components: {
-      vuedraggable
+      draggable
     },
     activated () {
       this.getDataList()
@@ -147,13 +137,109 @@
         let stepsArrey = document.getElementsByTagName('textarea')
         if (i) {
           window.setTimeout(() => {
-            stepsArrey[i + 1].focus()
+            stepsArrey[i].focus()
           }, 0)
         } else {
           window.setTimeout(() => {
-            stepsArrey[1].focus()
+            stepsArrey[0].focus()
           }, 0)
         }
+      },
+      addAfter (i) {
+        this.stepForm.step_name = ''
+        this.stepForm.step_type = ''
+        this.stepForm.step_func = ''
+        let stepsArrey = document.getElementsByTagName('textarea')
+        if (i === 0) {
+          i = i + 1
+          window.setTimeout(() => { stepsArrey[1].focus() }, 0)
+        } else if (i > 0) {
+          i = i + 1
+          window.setTimeout(() => { stepsArrey[i].focus() }, 0)
+        }
+        this.list.splice(i, 0, {
+          id: this.id++,
+          new_or_edit: 'new',
+          step_name: '',
+          step_type: '',
+          step_func: ''
+        })
+      },
+      deleteStep (i) {
+        this.list.splice(i, 1)
+        if (this.list.length === 0) {
+          this.showEndSteps = true
+          this.templateAddDisable = true
+          this.stepForm = { new_or_edit: 'new', step_name: '', step_type: '', step_func: '' }
+        }
+        let stepsArrey = document.querySelectorAll('textarea')
+        for (let i = 0; i < stepsArrey.length; i++) {
+          stepsArrey[i].style.backgroundColor = '#ecf5ff'
+          stepsArrey[i].style.color = '#409eff'
+        }
+      },
+      iptFocus (v, i) {
+        this.stepForm.step_name = v.step_name
+        this.stepForm.step_type = v.step_type
+        this.stepForm.step_func = v.step_func
+        let stepsArrey = document.querySelectorAll('textarea')
+        this.index = i
+        for (let i = 0; i < stepsArrey.length; i++) {
+          stepsArrey[i].style.backgroundColor = '#ecf5ff'
+          stepsArrey[i].style.color = '#409eff'
+        }
+        stepsArrey[this.index].style.backgroundColor = '#409eff'
+        stepsArrey[this.index].style.color = '#fff'
+      },
+      iptBlur (v, i) {
+        this.index = i
+      },
+      stepnameChange (selVal) {
+        this.list[this.index].step_name = selVal
+        this.stepForm.step_name = selVal
+      },
+      steptypeChange (selVal) {
+        this.list[this.index].step_type = selVal
+      },
+      featureChange (selVal) {
+        this.list[this.index].step_func = selVal
+      },
+      confirm () {
+        if (this.stepForm.step_name === '') return this.$message.error('步骤名称不能为空')
+        if (this.stepForm.step_type === '') return this.$message.error('审批类型不能为空')
+        if (this.stepForm.step_func === '') return this.$message.error('节点审批员不能为空')
+        let stepsMessage = []
+        let stepsArrey = document.querySelectorAll('textarea')
+        for (let i = 0; i < stepsArrey.length; i++) {
+          stepsArrey[i].style.backgroundColor = '#ecf5ff'
+          stepsArrey[i].style.color = '#409eff'
+        }
+        for (let i = 0; i < stepsArrey.length; i++) {
+          if (stepsArrey[i].value !== '') {
+            stepsMessage.push(stepsArrey[i].value)
+          } else {
+            for (let i = 0; i < stepsArrey.length; i++) {
+              if (stepsArrey[i].value === '') {
+                stepsArrey[i].style.backgroundColor = '#EE1111'
+                stepsArrey[i].style.color = '#fff'
+              };
+            }
+            return this.$message({type: 'error', message: '请填写完整的流程'})
+          }
+        }
+        let params = {
+          id: 0,
+          name: this.templateForm.name,
+          msg: this.templateForm.msg,
+          steps: this.list
+        }
+        console.log(params)
+      },
+      replace () {
+        this.list = []
+        this.stepForm = { new_or_edit: 'new', step_name: '', step_type: '', step_func: '' }
+        this.templateAddDisable = true
+        this.showEndSteps = true
       }
     }
   }
@@ -162,6 +248,9 @@
 .my-menu{
   width: 200px;
   position: absolute;
+      top: 20px;
+    bottom: 30px;
+    background: #efefef;
   .menu-head{
     background-color: #17B3A3;
     color: #fff;
@@ -188,20 +277,12 @@
   padding-left: 210px;
 }
 .template_box {
-  margin-top: -8px;
   background-color: #fff;
-  min-height: 680px;
   .template_in {
-    margin: 5px 0 20px 10px;
     padding: 15px 0;
-    width: 720px;
+    width: 100%;
     letter-spacing: 1px;
   }
-  h1 {
-    text-align: center;
-    margin-bottom: 20px;
-    font-size: 20px;
-  }
 }
 /deep/ .el-form-item--small.el-form-item {
     margin-bottom: 12px;
@@ -237,7 +318,7 @@
   background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
   background-size: 14px 2px;
   background-repeat: repeat-x;
-  padding: 15px 10px 0 50px;
+  padding: 10px;
   margin: 10px auto 25px;
   width: 600px;
   p {
@@ -254,10 +335,15 @@ button {
   }
 .step_box {
   min-height: 72px;
-  width: 810px;
+  width: 100%;
+  text-align: center;
   display: flex;
-
-  .start-steps,
+  justify-content:center;
+  .start-steps{
+    width: 120px;
+    position: relative;
+    padding: 15px 30px 15px 0;
+  }
   .end-steps {
     width: 90px;
     position: relative;