收入分析

web/src/view/approve/flowManage/flowManage.vue

@@ -53,21 +53,35 @@
           />
         </el-form-item>
         <el-form-item label="流程类型：">
-          <el-input
+          <el-select
             v-model="editProcessData.process.processType"
-            placeholder="请输入审核流程类型"
-          />
+            placeholder="请选择流程类型"
+          >
+            <el-option
+              v-for="item in processType"
+              :key="item.id"
+              :label="item.value"
+              :value="item.value"
+            />
+          </el-select>
         </el-form-item>
       </el-form>
       <el-row
         style="margin-top: 20px"
         justify="end"
       >
+        <el-col :span="4">
+          <el-button
+            type="primary"
+            icon="Notebook"
+            @click="openEffectDialog"
+          >效果图</el-button>
+        </el-col>
         <el-col :span="4">
           <el-button
             type="primary"
             icon="Plus"
-            @click="processNodeDialog = true"
+            @click="openProcessNodeDialog()"
           >添加节点</el-button>
         </el-col>
       </el-row>
@@ -75,7 +89,7 @@
         <el-col :span="24">
           <el-table
             height="470"
-            :data="editProcessData.processNodes"
+            :data="intermediary"
           >
             <el-table-column
               label="节点顺序"
@@ -86,15 +100,26 @@
             <el-table-column
               label="节点名称"
               align="center"
+              prop="nodeName"
+            />
+            <el-table-column
+              label="节点审核人"
+              align="center"
+              prop="nodeHead"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
             >
               <template #default="scope">
-                <el-text>{{ scope.row.nodeId }}</el-text>
+                <el-button
+                  icon="Delete"
+                  type="primary"
+                  text
+                  @click="deleteProcessNode(scope.row)"
+                >删除</el-button>
               </template>
             </el-table-column>
-            <el-table-column
-              label="操作"
-              align="center"
-            />
           </el-table>
         </el-col>
       </el-row>
@@ -105,12 +130,13 @@
         <el-button
           type="primary"
           size="large"
+          @click="editProcess"
         >确认</el-button>
       </el-row>
     </el-drawer>
     <el-dialog
       v-model="processNodeDialog"
-      title="新增流程节点"
+      :title="processNodeTitle"
       width="40%"
     >
       <el-form
@@ -119,8 +145,11 @@
         label-width="90"
         style="margin-top: 20px"
       >
-        <el-form-item label="节点：">
-          <el-select v-model="addProcessNodeData.nodeId">
+        <el-form-item label="节点名称：">
+          <el-select
+            v-model="addProcessNodeData.nodeId"
+            @change="changeNodeName"
+          >
             <el-option
               v-for="item in nodeList"
               :key="item.ID"
@@ -148,6 +177,32 @@
         >确认</el-button>
       </template>
     </el-dialog>
+    <el-dialog
+      v-model="processEffectShow"
+      title="流程效果图"
+      width="45%"
+      align-center
+    >
+      <el-row
+        v-show="intermediary.length > 1"
+        style="margin-top: 20px;height: 150px"
+      >
+        <el-col :span="24">
+          <el-steps
+            :active="processActive"
+            space="20%"
+            align-center
+          >
+            <el-step
+              v-for="item in intermediary"
+              :key="item.nodeId"
+              :title="item.nodeName"
+              :description="item.nodeHead"
+            />
+          </el-steps>
+        </el-col>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
@@ -156,6 +211,8 @@ import NodeManage from './components/nodeManage.vue'
 import { ref, onMounted, reactive } from 'vue'
 import { nodeData } from '@/pinia/node/node'
 import { getAllNode } from '@/api/node'
+import { ElMessage } from 'element-plus'
+import { postProcess, getAllProcess } from '@/api/process'
 defineOptions({
   name: 'FlowManage'
 })
@@ -164,6 +221,8 @@ onMounted(() => {
   // 获取节点列表
   record.queryNodeList()
   queryAllNode()
+  // 查看流程
+  queryAllProcess()
 })
 // .....................................节点
 const nodeManageShow = ref(false)
@@ -175,11 +234,9 @@ const nodeList = reactive([])
 const queryAllNode = () => {
   getAllNode().then(res => {
     if (res.code === 0) {
-      console.log('所有节点', res.data)
-      const list = res.data
       nodeList.length = 0
       nodeList.push(...res.data)
-      addProcessNodeData.nodeId = list[0].ID
+      // console.log('节点列表', nodeList)
     }
   })
 }
@@ -187,7 +244,7 @@ const queryAllNode = () => {
 const editProcessShow = ref(false)
 
 const processDrawerTitle = ref('新增流程')
-
+// 添加流程数据
 const editProcessData = reactive({
   process: {
     processName: '',
@@ -201,17 +258,90 @@ const openAddDrawer = () => {
 }
 // 为流程添加节点
 const processNodeDialog = ref(false)
+const processNodeTitle = ref('新增流程节点')
 const orderList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-
+const processType = [{ id: 1, value: '立项' }, { id: 2, value: '费用' }]
 const addProcessNodeData = reactive({
   nodeId: 0,
-  nodeOrder: 1
+  nodeOrder: 1,
+  nodeName: '',
+  nodeHead: ''
 })
-
+const openProcessNodeDialog = () => {
+  processNodeDialog.value = true
+  addProcessNodeData.nodeId = nodeList[0].ID
+  addProcessNodeData.nodeName = nodeList[0].nodeName
+  console.log(nodeList[0])
+  addProcessNodeData.nodeHead = nodeList[0].approver.nickName
+}
+const intermediary = ref([])
+const changeNodeName = (val) => {
+  addProcessNodeData.nodeId = val
+  nodeList.forEach(item => {
+    if (item.ID === val) {
+      addProcessNodeData.nodeName = item.nodeName
+      addProcessNodeData.nodeHead = item.approver.nickName
+    }
+  })
+}
 const addProcessNodes = () => {
-  console.log(addProcessNodeData)
-  console.log(editProcessData.processNodes)
-  // editProcessData.processNodes.push(...addProcessNodeData)
+  const obj = {}
+  Object.assign(obj, addProcessNodeData)
+  intermediary.value.push(obj)
+  processActive.value = intermediary.value.length
+  processNodeDialog.value = false
+}
+const deleteProcessNode = (row) => {
+  intermediary.value.forEach((item, index) => {
+    if (row.nodeId === item.nodeId) {
+      intermediary.value.splice(index, 1)
+    }
+  })
+}
+const editProcess = () => {
+  const arr = intermediary.value
+  arr.forEach(item => {
+    const obj = {
+      nodeId: item.nodeId,
+      nodeOrder: item.nodeOrder,
+    }
+    editProcessData.processNodes.push(obj)
+  })
+  for (const key in editProcessData) {
+    if (key === 'processNodes') {
+      if (editProcessData[key].length < 2) {
+        ElMessage.error('节点的个数不足以构成流程（最少为2）')
+        return
+      }
+    } else {
+      if (editProcessData[key] === '') {
+        ElMessage.error('请将流程的基本信息填写完整')
+        return
+      }
+    }
+  }
+  postProcess(editProcessData).then(res => {
+    if (res.code === 0) {
+      console.log(res.data)
+    }
+  })
+}
+// 流程效果图
+const processActive = ref(0)
+
+const processEffectShow = ref(false) // 弹窗显示
+
+const openEffectDialog = () => {
+  processEffectShow.value = true
+} // 打开弹窗
+
+// 查看所有流程
+const queryAllProcess = () => {
+  getAllProcess().then(res => {
+    if (res.code === 0) {
+      console.log('流程列表', res.data)
+    }
+  })
 }
 
 </script>