1

src/components/flow/transfer-form.vue

+<style>
+  .changeClassProcess {
+    width: 350px;
+  }
+
+  .changeClassProcess .processList {
+    width: 100%;
+    height: auto;
+  }
+
+  .changeClassProcess .processTop {
+    width: 100%;
+    height: 54px;
+    background-color: #F1F1F1;
+    color: #000000;
+    text-align: center;
+    line-height: 54px;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .changeClassProcess .processLine {
+    width: 100%;
+    height: 54px;
+    background-color: #fff;
+    color: #bbb6b6;
+    text-align: center;
+    line-height: 54px;
+  }
+
+  .changeClassProcess .processLine i {
+    font-size: 25px;
+    font-weight: bold;
+  }
+
+  .changeClassProcess .otherList {
+    background-color: #2961FE !important;
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .changeClassProcess .process_TwoList {
+    display: flex;
+    background-color: #2961FE !important;
+    color: #fff;
+    font-weight: bold;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .changeClassProcess .process_He {
+    width: 36px;
+    height: 36px;
+    background-color: #3FC4FF;
+    text-align: center;
+    line-height: 36px;
+    color: #fff;
+    border-radius: 50%;
+  }
+
+  .changeClassProcess .process_Left {
+    width: 40%;
+    height: 100%;
+    text-align: right;
+  }
+
+  .changeClassProcess .process_center {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .changeClassProcess .process_Right {
+    width: 40%;
+    height: 100%;
+    text-align: left;
+  }
+
+  .changeClassProcess .process_OR {
+    background-color: #F28C1D;
+  }
+
+  .changeClassProcess .addProcessBtn {
+    width: 100%;
+    height: 45px;
+    text-align: center;
+    line-height: 45px;
+    color: #2961FE;
+    border: 1px dashed #2961FE;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .changeClassProcess .process_BtnList {
+    margin-top: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .changeClassProcess .process_BtnOne {
+    width: 90px;
+    height: 38px;
+    text-align: center;
+    line-height: 38px;
+    border-radius: 2px;
+    border: 1px solid #A1AAB2;
+    color: #000000;
+    cursor: pointer;
+    margin-right: 50px;
+  }
+
+  .changeClassProcess .SetShouSun {
+    display: inline-block;
+    border-radius: 2px;
+    background-color: #8175FB;
+    color: #fff;
+    position: absolute;
+    right: 10px;
+    width: 60px;
+    height: 27px;
+    left: 0;
+    top: 0;
+    line-height: 27px;
+    font-size: 13px;
+  }
+
+  .changeClassProcess .operationDiv {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 30px;
+    line-height: 30px;
+    padding-right: 10px;
+    vertical-align: top;
+  }
+
+  .changeClassProcess .operationDiv i:first-child {
+    font-size: 13px;
+  }
+
+  .changeClassProcess .operationDiv i:hover {
+    color: red;
+  }
+
+  .changeClassProcess .justTwoClass {
+    margin-left: 8px;
+  }
+
+</style>
+<template>
+  <div class="changeClassProcess">
+    <div class="processList">
+      <div class="processTop">发起人</div>
+      <div class="processLine">
+        <i class="iconfont icon-down"></i>
+      </div>
+    </div>
+    <template v-for="(item,index) in flowObj.FlowNodeList">
+      <div class="processList" @click="getItem(index)">
+        <template v-if="item.FlowAduitList&&item.FlowAduitList.length==1">
+          <div class="processTop otherList">
+            {{item.FlowAduitList[0].AduitName}}
+            <template v-if="item.FlowAduitList&&item.FlowAduitList.length>0 && item.FlowAduitList[0].IsSpecNode==1">
+              <span class="SetShouSun">设定收损</span>
+            </template>
+            <div class="operationDiv">
+              <i class="iconfont icon-shanchu" style="position:relative;top:-2px;" @click.stop="DeleteNode(index)"></i>
+              <i style="margin:0 8px;" class="iconfont icon-shangyi2" v-if="index!=0"
+                @click.stop="moveDown(index,0)"></i>
+              <i class="iconfont icon-xiayi" :class="{'justTwoClass':index==0}" @click.stop="moveDown(index,1)"
+                v-if="index!=flowObj.FlowNodeList.length-1"></i>
+            </div>
+          </div>
+          <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
+            <i class="iconfont icon-down"></i>
+          </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>
+            <template v-if="item.FlowAduitList&&item.FlowAduitList.length>0 && item.FlowAduitList[0].IsSpecNode==1">
+              <span class="SetShouSun">设定收损</span>
+            </template>
+            <div class="operationDiv">
+              <i class="iconfont icon-shanchu" style="position:relative;top:-2px;" @click.stop="DeleteNode(index)"></i>
+              <i style="margin:0 8px;" class="iconfont icon-shangyi2" v-if="index!=0"
+                @click.stop="moveDown(index,0)"></i>
+              <i class="iconfont icon-xiayi" :class="{'justTwoClass':index==0}" @click.stop="moveDown(index,1)"
+                v-if="index!=flowObj.FlowNodeList.length-1"></i>
+            </div>
+          </div>
+          <div class="processLine" v-if="index!=flowObj.FlowNodeList.length-1">
+            <i class="iconfont icon-down"></i>
+          </div>
+        </template>
+      </div>
+    </template>
+    <br />
+    <div class="addProcessBtn" @click="AddNode">新增节点</div>
+    <div class="process_BtnList">
+
+      <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="setBackClassFlow" />
+    </div>
+    <process-form v-if="isShowProcess" :save-obj="processObj" :NodeIndex="ChooseNodeIndex" @close="closeProcessForm"
+      @success="refreshPage" :authObj="showObj">
+    </process-form>
+  </div>
+</template>
+<script>
+  import processForm from '../../components/flow/process-form';
+  import {
+    queryBackClassFlow,
+    saveBackClassFlow
+  } from '../../api/system/index'
+  export default {
+    meta: {
+      title: ""
+    },
+    components: {
+      processForm
+    },
+    data() {
+      return {
+        msg: {
+          FlowId: 5
+        },
+        isShowProcess: false, //显示旁边弹窗
+        processObj: {}, //传递子组件
+        flowObj: {
+          FlowId: 5,
+          FlowName: "转班流程",
+          FlowNodeList: [], //审核节点列表
+        },
+        //显示对象
+        showObj: {
+          isShowShouSun: 0,//不显示收损
+        },
+        ChooseNodeIndex: 0,
+      }
+    },
+    created() {},
+    mounted() {
+      this.getBackClassFlow();
+    },
+    methods: {
+      //新增节点
+      AddNode() {
+        this.flowObj.FlowNodeList.push({
+          FlowId: 0,
+          NodeId: 0,
+          NodeName: "新增节点",
+          SortNum: 0,
+          FlowAduitList: [{
+            AduitName: "新增节点",
+            AuditType: 2,
+            AuditWay: 2,
+            CheckId: 0,
+            FlowId: 0,
+            IsSpecNode: 0,
+            NodeId: 8,
+            PostType: 0,
+            UserId: 0,
+          }]
+        });
+      },
+      //删除节点
+      DeleteNode(index) {
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除该流程',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          this.flowObj.FlowNodeList.splice(index, 1);
+        }).onCancel(() => {
+
+        });
+      },
+      getBackClassFlow() {
+        queryBackClassFlow(this.msg).then(res => {
+          if (res.Code == 1 && res.Data) {
+            this.flowObj = res.Data;
+          }
+        })
+      },
+      //点开旁边
+      getItem(nodeIndex) {
+        this.processObj = this.flowObj;
+        this.ChooseNodeIndex = nodeIndex;
+        this.isShowProcess = true;
+      },
+      //关闭
+      closeProcessForm() {
+        this.isShowProcess = false
+      },
+      //成功刷新
+      refreshPage() {
+        this.isShowProcess = false;
+        this.getBackClassFlow();
+      },
+      //保存退课流程
+      setBackClassFlow() {
+        saveBackClassFlow(this.flowObj).then(res => {
+          if (res.Code == 1) {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '操作成功',
+              position: 'top'
+            })
+            this.refreshPage();
+          }
+        })
+      },
+      //下移下移
+      moveDown(index, IsUp) {
+        var currentItem = this.flowObj.FlowNodeList[index];
+        if (IsUp == 0) {
+          if (index > 0) {
+            var upItem = this.flowObj.FlowNodeList[index - 1];
+            this.$set(this.flowObj.FlowNodeList, index - 1, currentItem);
+            this.$set(this.flowObj.FlowNodeList, index, upItem);
+          }
+        } else {
+          if (index != this.flowObj.FlowNodeList.length - 1) {
+            var downItem = this.flowObj.FlowNodeList[index + 1];
+            this.$set(this.flowObj.FlowNodeList, index + 1, currentItem);
+            this.$set(this.flowObj.FlowNodeList, index, downItem);
+          }
+        }
+      }
+    }
+  }
+
+</script>