页面修改

src/api/system/index.js

@@ -376,3 +376,14 @@ export function GetClassTypeList(data) {
   });
 }
 
+/**
+ * 获取退课流程设置
+*/
+export function queryBackClassFlow(data)
+{
+    return request({
+        url: '/Flow/GetBackClassFlow',
+        method: 'post',
+        data
+      });
+}
\ No newline at end of file

src/components/system/process-form.vue

@@ -47,9 +47,11 @@
     margin: 0 20px 0 20px;
     background-color: #F7F7F7;
   }
-  .processMain:first-child{
-    margin-top:20px;
+
+  .processMain:first-child {
+    margin-top: 20px;
   }
+
   .processPerson {
     position: absolute;
     width: 78px;
@@ -121,33 +123,35 @@
     position: absolute;
     background-color: #E9EFFF;
   }
-  .processAddzhai{
-    height:50px;
-    border:1px dashed #2961FE!important;
+
+  .processAddzhai {
+    height: 50px;
+    border: 1px dashed #2961FE !important;
     text-align: center;
     background-color: #fff;
-    color:#2961FE;
+    color: #2961FE;
     line-height: 50px;
     cursor: pointer;
-    margin:0 20px;
-    border-radius: 5px!important;
+    margin: 0 20px;
+    border-radius: 5px !important;
   }
+
 </style>
 <template>
   <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeProcess">
     <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
-      <div class="processMain">
+      <div class="processMain" v-for="(aItem,aIndex) in saveObj.FlowAduitList">
         <div class="processShenPi">
-          <div class="processPerson">审批人1</div>
+          <div class="processPerson">审批人{{aIndex+1}}</div>
           <div class="processInner">
             <div class="q-gutter-sm" style="padding-top:20px;">
-              <q-radio left-label v-model="roleChoice" :val="1" label="指定人员" />
-              <q-radio left-label v-model="roleChoice" :val="2" label="内置角色" />
+              <q-radio left-label v-model="aItem.AuditType" :val="2" label="指定人员" />
+              <q-radio left-label v-model="aItem.AuditType" :val="3" label="内置角色" />
             </div>
             <div style="margin:10px 0;">
-              <q-select class="col-6 q-pb" v-if="roleChoice==1" clearable filled stack-label use-input option-value="Id"
-                option-label="EmployeeName" v-model="zhidingName" ref="ManagerId" :options="EmployeeList" label="指定人员名称"
-                :dense="false" emit-value map-options @filter="filterFn">
+              <q-select class="col-6 q-pb" v-if="aItem.AuditType==2" clearable filled stack-label use-input
+                option-value="Id" option-label="EmployeeName" v-model="aItem.UserId" ref="ManagerId"
+                :options="EmployeeList" label="指定人员名称" :dense="false" emit-value map-options @filter="filterFn">
                 <template v-slot:no-option>
                   <q-item>
                     <q-item-section class="text-grey">
@@ -156,77 +160,36 @@
                   </q-item>
                 </template>
               </q-select>
-              <q-select class="col-6 q-pb" v-if="roleChoice==2" clearable filled stack-label use-input option-value="Id"
-                option-label="Name" v-model="role" ref="ManagerId" :options="roleList" label="选择角色" :dense="false"
-                emit-value map-options>
+              <q-select class="col-6 q-pb" v-if="aItem.AuditType==3" clearable filled stack-label use-input
+                option-value="Id" option-label="Name" v-model="aItem.PostType" ref="ManagerId" :options="roleList"
+                label="选择角色" :dense="false" emit-value map-options>
               </q-select>
             </div>
-            <q-toggle v-model="shousun" label="设定收损" left-label />
+            <q-toggle v-if="saveObj.FlowAduitList&&saveObj.FlowAduitList.length>0 && aIndex==0"
+              v-model="saveObj.FlowAduitList[0].IsSpecNode" label="设定收损" left-label :true-value="1" :false-value="0" />
             <div class="process_Warm">
               <i class="iconfont icon-jinggao"></i>
               只能由一个人开启，一旦开启其他关闭
             </div>
           </div>
-          <div class="process_Btn_List">
-            <div class="processBtn_Cancel">关闭</div>
-            <div class="processBtn_Save">保存</div>
-          </div>
         </div>
-        <div class="process_LineTwo">
+        <div class="process_LineTwo" v-if="saveObj.FlowAduitList&&saveObj.FlowAduitList.length>0"
+          v-show="aIndex!=saveObj.FlowAduitList.length-1">
           <div class="process_InnerLine"></div>
           <div style="width:100px;margin:10px 0">
-            <q-select class="col=3 q-pb" filled stack-label option-value="Id" option-label="Name" v-model="heormore"
-              :options="arrList" label="" :dense="false" emit-value map-options>
+            <q-select class="col=3 q-pb" filled stack-label option-value="Id" option-label="Name"
+              v-model="saveObj.FlowAduitList[0].AuditWay" :options="auditWayList" label="" :dense="false" emit-value
+              map-options>
             </q-select>
           </div>
         </div>
+        <a v-if="saveObj.FlowAduitList&&saveObj.FlowAduitList.length>0 && aIndex>0" @click="DelAduitInfo(index)">删除</a>
       </div>
-      <div class="processMain">
-        <div class="processShenPi">
-          <div class="processPerson">审批人1</div>
-          <div class="processInner">
-            <div class="q-gutter-sm" style="padding-top:20px;">
-              <q-radio left-label v-model="roleChoice" :val="1" label="指定人员" />
-              <q-radio left-label v-model="roleChoice" :val="2" label="内置角色" />
-            </div>
-            <div style="margin:10px 0;">
-              <q-select class="col-6 q-pb" v-if="roleChoice==1" clearable filled stack-label use-input option-value="Id"
-                option-label="EmployeeName" v-model="zhidingName" ref="ManagerId" :options="EmployeeList" label="指定人员名称"
-                :dense="false" emit-value map-options @filter="filterFn">
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      未找到相关数据
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-              <q-select class="col-6 q-pb" v-if="roleChoice==2" clearable filled stack-label use-input option-value="Id"
-                option-label="Name" v-model="role" ref="ManagerId" :options="roleList" label="选择角色" :dense="false"
-                emit-value map-options>
-              </q-select>
-            </div>
-            <q-toggle v-model="shousun" label="设定收损" left-label />
-            <div class="process_Warm">
-              <i class="iconfont icon-jinggao"></i>
-              只能由一个人开启，一旦开启其他关闭
-            </div>
-          </div>
-          <div class="process_Btn_List">
-            <div class="processBtn_Cancel">关闭</div>
-            <div class="processBtn_Save">保存</div>
-          </div>
-        </div>
-        <div class="process_LineTwo">
-          <div class="process_InnerLine"></div>
-          <div style="width:100px;margin:10px 0">
-            <q-select class="col=3 q-pb" filled stack-label option-value="Id" option-label="Name" v-model="heormore"
-              :options="arrList" label="" :dense="false" emit-value map-options>
-            </q-select>
-          </div>
-        </div>
+      <div class="processAddzhai" @click="AddAduitInfo">新增审核人</div>
+      <div class="process_Btn_List">
+        <div class="processBtn_Cancel">关闭</div>
+        <div class="processBtn_Save">保存</div>
       </div>
-      <div class="processAddzhai">新增摘要</div>
     </q-card>
     <div class="dialog-out-close" @click="closeProcess"
       style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
@@ -250,40 +213,60 @@
     data() {
       return {
         persistent: true,
-        roleChoice: 1,
         AllemployeeList: [], //所有员工列表
         EmployeeList: [], //员工列表
-        zhidingName: '', //指定人员选择
-        role: '', //角色
-        shousun: true, //设定收损
-
-        heormore: 1, //和或者
+        //固定角色列表
         roleList: [{
-          Name: '班级老师',
-          Id: 0
-        }, {
-          Name: '关联销售',
-          Id: 1
-        }, {
-          Name: '分校校长',
+            Name: '班级老师',
+            Id: 1
+          }, {
+            Name: '关联销售',
+            Id: 2
+          }, {
+            Name: '分校校长',
+            Id: 3
+          },
+          {
+            Name: '教务长',
+            Id: 4
+          }
+        ],
+        //审核类型
+        auditWayList: [{
+          Name: '会签',
           Id: 2
-        }],
-        arrList: [{
-          Name: '和',
-          Id: 1
         }, {
-          Name: '或者',
-          Id: 2
+          Name: '或签',
+          Id: 3
         }]
       }
     },
     created() {
-
+      this.getEmployee();
     },
     mounted() {
-      this.getEmployee();
+      console.log("saveObj", this.saveObj);
     },
     methods: {
+      //新增审核人
+      AddAduitInfo() {
+        this.saveObj.FlowAduitList.push({
+          CheckId: 0,
+          FlowId: 0,
+          AuditWay: 2,
+          AuditType: 3,
+          AduitName: "",
+          IsSpecNode: 0,
+          NodeId: 0,
+          PostType: 0,
+          UserId: 0,
+        });
+      },
+      //删除审核人
+      DelAduitInfo(index) {
+        this.saveObj.FlowAduitList.splice(index, 1);
+      },
+      //关闭流程设置
       closeProcess() {
         this.persistent = false;
         this.$emit('close');
@@ -309,13 +292,11 @@
           if (val === '') {
             this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
           } else {
-            const needle = val.toLowerCase()
-            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
+            const needle = val.toLowerCase();
+            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1);
           }
         })
       },
-
-
     }
   }
 

src/pages/system/processSet.vue

@@ -27,85 +27,97 @@
     text-align: center;
     line-height: 54px;
   }
-  .processLine i{
+
+  .processLine i {
     font-size: 25px;
     font-weight: bold;
   }
-  .otherList{
-      background-color: #2961FE!important;
-      color:#fff;
-      font-weight: bold;
+
+  .otherList {
+    background-color: #2961FE !important;
+    color: #fff;
+    font-weight: bold;
   }
-  .process_TwoList{
+
+  .process_TwoList {
     display: flex;
-    background-color: #2961FE!important;
-    color:#fff;
+    background-color: #2961FE !important;
+    color: #fff;
     font-weight: bold;
     align-items: center;
     justify-content: center;
   }
-  .process_He{
-      width:36px;
-      height:36px;
-      background-color: #3FC4FF;
-      text-align: center;
-      line-height: 36px;
-      color: #fff;
-      border-radius: 50%;
-  }
-  .process_Left{
-    width:40%;
-    height:100%;
+
+  .process_He {
+    width: 36px;
+    height: 36px;
+    background-color: #3FC4FF;
+    text-align: center;
+    line-height: 36px;
+    color: #fff;
+    border-radius: 50%;
+  }
+
+  .process_Left {
+    width: 40%;
+    height: 100%;
     text-align: right;
   }
-  .process_center{
-    width:20%;
-    height:100%;
+
+  .process_center {
+    width: 20%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  .process_Right{
-    width:40%;
-    height:100%;
+
+  .process_Right {
+    width: 40%;
+    height: 100%;
     text-align: left;
   }
-  .process_OR{
+
+  .process_OR {
     background-color: #F28C1D;
   }
-  .addProcessBtn{
-    width:100%;
-    height:45px;
+
+  .addProcessBtn {
+    width: 100%;
+    height: 45px;
     text-align: center;
     line-height: 45px;
-    color:#2961FE;
-    border:1px dashed #2961FE;
+    color: #2961FE;
+    border: 1px dashed #2961FE;
     border-radius: 2px;
     cursor: pointer;
   }
-  .process_BtnList{
-    margin-top:30px;
-    width:100%;
+
+  .process_BtnList {
+    margin-top: 30px;
+    width: 100%;
     display: flex;
     justify-content: center;
   }
-  .process_BtnOne{
-    width:90px;
-    height:38px;
+
+  .process_BtnOne {
+    width: 90px;
+    height: 38px;
     text-align: center;
     line-height: 38px;
     border-radius: 2px;
-    border:1px solid #A1AAB2;
-    color:#000000;
+    border: 1px solid #A1AAB2;
+    color: #000000;
     cursor: pointer;
-    margin-right:50px;
+    margin-right: 50px;
   }
+
 </style>
 <template>
   <div class="page-body">
     <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
       <q-tab :ripple="false" name="1" label="退课流程" />
-      <q-tab :ripple="false" name="2" label="某某流程" />
+      <q-tab :ripple="false" name="2" label="某某流程" style="display:none" />
     </q-tabs>
     <div class="processSet">
       <div class="processList">
@@ -114,53 +126,53 @@
           <i class="iconfont icon-down"></i>
         </div>
       </div>
-      <div class="processList" @click="getItem()">
-        <div class="processTop otherList">班级老师</div>
-        <div class="processLine">
-          <i class="iconfont icon-down"></i>
-        </div>
-      </div>
-      <div class="processList">
-        <div class="processTop process_TwoList">
-            <div class="process_Left">关联销售</div>
-            <div class="process_center">
-              <div class="process_He">和</div>
+      <template v-for="(item,index) in flowObj.FlowNodeList">
+        <div class="processList" @click="getItem(item)">
+          <template v-if="item.FlowAduitList&&item.FlowAduitList.length==1">
+            <div class="processTop otherList">{{item.NodeName}}</div>
+            <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
+              <i class="iconfont icon-down"></i>
             </div>
-            <div class="process_Right">刘小勇</div>
-        </div>
-        <div class="processLine">
-          <i class="iconfont icon-down"></i>
-        </div>
-      </div>
-      <div class="processList">
-        <div class="processTop process_TwoList">
-            <div class="process_Left">分校校长</div>
-            <div class="process_center">
-              <div class="process_He process_OR">或者</div>
+          </template>
+          <template v-else>
+            <div class="processTop process_TwoList">
+              <div class="process_Left">{{item.FlowAduitList[0].AduitName}}</div>
+              <div class="process_center">
+                <template v-if="item.FlowAduitList[0].AuditWay==2">
+                  <div class="process_He">和</div>
+                </template>
+                <template v-if="item.FlowAduitList[0].AuditWay==3">
+                  <div class="process_He process_OR">或者</div>
+                </template>
+              </div>
+              <div class="process_Right">
+                <template v-for="(subItem,subIndex) in item.FlowAduitList" v-if="subIndex>0">
+                  {{subItem.AduitName}}
+                </template>
+              </div>
             </div>
-            <div class="process_Right">教务长</div>
-        </div>
-        <div class="processLine">
-          <i class="iconfont icon-down"></i>
-        </div>
-      </div>
-      <div class="processList">
-        <div class="processTop otherList">吴大春</div>
-        <div class="processLine">
-          <i class="iconfont icon-down"></i>
+            <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
+              <i class="iconfont icon-down"></i>
+            </div>
+          </template>
         </div>
-      </div>
+      </template>
+      <br />
       <div class="addProcessBtn">新增节点</div>
       <div class="process_BtnList">
         <div class="process_BtnOne">日志信息</div>
-        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important"/>
+        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" />
       </div>
     </div>
-    <process-form v-if="isShowProcess" :save-obj="processObj" @close="closeProcessForm" @success="refreshPage"></process-form>
+    <process-form v-if="isShowProcess" :save-obj="processObj" @close="closeProcessForm" @success="refreshPage">
+    </process-form>
   </div>
 </template>
 <script>
   import processForm from '../../components/system/process-form';
+  import {
+    queryBackClassFlow
+  } from '../../api/system/index'
   export default {
     components: {
       processForm
@@ -168,32 +180,44 @@
     data() {
       return {
         dateList: [], //开学时间
-        msg: {},
-        tabCheck:'1',
-        isShowProcess:false, //显示旁边弹窗
-        processObj:{}, //传递子组件
+        msg: {
+          FlowId: 1
+        },
+        tabCheck: '1',
+        isShowProcess: false, //显示旁边弹窗
+        processObj: {}, //传递子组件
+        flowObj: {
+          FlowId: 1,
+          FlowName: "退课流程",
+          FlowNodeList: [],
+        }, //流程列表
       }
     },
     created() {},
     mounted() {
-      this.getList();
+      this.getBackClassFlow();
     },
     methods: {
-      getList() {
-
+      getBackClassFlow() {
+        queryBackClassFlow(this.msg).then(res => {
+          if (res.Code == 1) {
+            this.flowObj = res.Data;
+          }
+        })
       },
       //点开旁边
-      getItem(){
-        this.isShowProcess=true;
+      getItem(item) {
+        this.processObj = item;
+        this.isShowProcess = true;
       },
       //关闭
-      closeProcessForm(){
+      closeProcessForm() {
         this.isShowProcess = false
       },
       //成功刷新
-      refreshPage(){
-        this.isShowProcess=false;
-        this.getList();
+      refreshPage() {
+        this.isShowProcess = false;
+        this.getBackClassFlow();
       }
     }
   }