1

src/components/flow/leave-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: 7,
+      },
+      isShowProcess: false, //显示旁边弹窗
+      processObj: {}, //传递子组件
+      flowObj: {
+        FlowId: 7,
+        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>

src/pages/system/processSet.vue

 <style>
-
 </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" v-for="(qitem,qindex) in tabList" :name="qitem.name" :label="qitem.label" :key="qindex" />
+    <q-tabs
+      style="margin-bottom: 20px"
+      v-model="tabCheck"
+      narrow-indicator
+      dense
+      align="left"
+      class="text-primary"
+    >
+      <q-tab
+        :ripple="false"
+        v-for="(qitem, qindex) in tabList"
+        :name="qitem.name"
+        :label="qitem.label"
+        :key="qindex"
+      />
     </q-tabs>
     <div>
-      <template v-if="tabCheck=='1'">
+      <template v-if="tabCheck == '1'">
         <!--退课流程-->
         <backclassflow-form></backclassflow-form>
       </template>
-      <template v-if="tabCheck=='2'">
+      <template v-if="tabCheck == '2'">
         <!--调课流程-->
         <changeclassflow-form></changeclassflow-form>
       </template>
-       <template v-if="tabCheck=='3'">
+      <template v-if="tabCheck == '3'">
         <!--停课流程-->
         <stopclassflow-form></stopclassflow-form>
       </template>
-      <template v-if="tabCheck=='4'">
+      <template v-if="tabCheck == '4'">
         <!-- 转班流程 -->
         <transfer-form></transfer-form>
       </template>
-      <template v-if="tabCheck=='5'">
+      <template v-if="tabCheck == '5'">
         <!-- 临时上课邀请流程 -->
         <temporaryClass-form></temporaryClass-form>
       </template>
-      <template v-if="tabCheck=='6'">
+      <template v-if="tabCheck == '6'">
         <!-- 分拆 -->
         <separate-form></separate-form>
       </template>
+      <template v-if="tabCheck == '7'">
+        <!-- 请假流程 -->
+        <leave-form></leave-form>
+      </template>
     </div>
   </div>
 </template>
 <script>
-  import backclassflowForm from '../../components/flow/backclassflow-form';
-  import changeclassflowForm from '../../components/flow/changeclassflow-form';
-  import stopclassflowForm from '../../components/flow/stopclassflow-form';
-  import transferForm from '../../components/flow/transfer-form';
-  import temporaryClassForm from '../../components/flow/temporaryClass-form';
-  import separateForm from '../../components/flow/separate-form'
-  export default {
-    meta: {
-      title: "流程设置"
-    },
-    components: {
-      backclassflowForm,
-      changeclassflowForm,
-      stopclassflowForm,
-      transferForm,
-      temporaryClassForm,
-      separateForm
-    },
-    data() {
-      return {
-        tabList: [{
-            name: "1",
-            label: "退课流程",
-          },
-          {
-            name: "2",
-            label: "调课流程",
-          },
-          {
-            name: "3",
-            label: "停课流程",
-          },
-          {
-            name: "4",
-            label: "转班流程"
-          },
-           {
-            name: "5",
-            label: "临时上课邀请流程"
-          },
-          {
-            name: "6",
-            label: "分拆"
-          }
-        ],
-        tabCheck: '1',
-      }
-    },
-    created() {},
-    mounted() {
-
-    },
-    methods: {
-
-    }
-  }
-
+import backclassflowForm from "../../components/flow/backclassflow-form";
+import changeclassflowForm from "../../components/flow/changeclassflow-form";
+import stopclassflowForm from "../../components/flow/stopclassflow-form";
+import transferForm from "../../components/flow/transfer-form";
+import temporaryClassForm from "../../components/flow/temporaryClass-form";
+import separateForm from "../../components/flow/separate-form";
+import leaveForm from "../../components/flow/leave-form";
+export default {
+  meta: {
+    title: "流程设置",
+  },
+  components: {
+    backclassflowForm,
+    changeclassflowForm,
+    stopclassflowForm,
+    transferForm,
+    temporaryClassForm,
+    separateForm,
+    leaveForm,
+  },
+  data() {
+    return {
+      tabList: [
+        {
+          name: "1",
+          label: "退课流程",
+        },
+        {
+          name: "2",
+          label: "调课流程",
+        },
+        {
+          name: "3",
+          label: "停课流程",
+        },
+        {
+          name: "4",
+          label: "转班流程",
+        },
+        {
+          name: "5",
+          label: "临时上课邀请流程",
+        },
+        {
+          name: "6",
+          label: "分拆",
+        },
+        {
+          name: "7",
+          label: "请假流程",
+        },
+      ],
+      tabCheck: "1",
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
 </script>