收入分析

web/.env.development

@@ -11,4 +11,4 @@ VITE_EDITOR = webstorm
 
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
 // 如果使用docker-compose开发模式，设置为下面的地址或本机主机IP
-//VITE_BASE_PATH = http://106.52.134.22
+// VITE_BASE_PATH = http://106.52.134.22

web/src/pinia/node/node.js

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+import { getNodeList } from '@/api/node'
+export const nodeData = defineStore('node', () => {
+  const nodeList = reactive([])
+  const nodeListCondition = reactive({
+    page: 1,
+    pageSize: 10
+  })
+  const queryNodeList = () => {
+    getNodeList(nodeListCondition).then(res => {
+      if (res.code === 0) {
+        console.log('节点列表', res.data)
+        nodeList.length = 0
+        nodeList.push(...res.data)
+      }
+    })
+  }
+  return {
+    nodeList,
+    queryNodeList
+  }
+})

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

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <el-row>
+      <el-col
+        :span="24"
+      >
+        <el-form :inline="true">
+          <el-form-item label="审批人：">
+            <el-select
+              v-model="approverValue"
+              placeholder="请选择审核人员"
+              filterable
+              clearable
+              @click="changeApprover"
+              @clear="clearApprover"
+            >
+              <el-option
+                v-for="item in approverList"
+                :key="item.ID"
+                :label="item.user.nickName"
+                :value="item.ID"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              icon="Search"
+              @click="queryApproverNode"
+            >查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              icon="Plus"
+              @click="openAddDialog"
+            >新增</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 40px">
+      <el-col :span="24">
+        <el-table />
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-model="addDialogShow"
+      title="新增节点"
+    >
+      <el-form
+        size="large"
+        label-width="110"
+        label-position="left"
+      >
+        <el-form-item label="审批节点名称：">
+          <el-input
+            v-model="createNodeData.nodeName"
+            placeholder="请输入审批节点名称"
+          />
+        </el-form-item>
+        <el-form-item label="审批人：">
+          <el-select
+            v-model="createNodeData.approverId"
+            placeholder="请选择审核人员"
+            filterable
+          >
+            <el-option
+              v-for="item in approverList"
+              :key="item.ID"
+              :label="item.user.nickName"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点顺序：">
+          <el-select v-model="createNodeData.nodeOrder">
+            <el-option
+              v-for="(item,index) in orderList"
+              :key="index"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点描述：">
+          <el-input
+            v-model="createNodeData.nodeDescription"
+            type="textarea"
+            maxlength="200"
+            show-word-limit
+            :rows="6"
+          />
+        </el-form-item>
+      </el-form>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, ref } from 'vue'
+import { getApprovePerson } from '@/api/approver'
+import { getApproverNode } from '@/api/node'
+defineOptions({
+  name: 'NodeManage'
+})
+onMounted(() => {
+  queryApprover()
+})
+
+// 按审核人查询节点
+const condition = reactive({
+  approverId: 0
+})
+const approverValue = ref('')
+
+const changeApprover = (val) => {
+  condition.approverId = val
+  approverList.forEach(item => {
+    if (item.ID === val) {
+      approverValue.value = item.user.nickName
+    }
+  })
+}
+const clearApprover = () => {
+  condition.approverId = 0
+  approverValue.value = ''
+}
+const queryApproverNode = () => {
+  getApproverNode(condition).then(res => {
+    if (res.code === 0) {
+      console.log(res)
+    }
+  })
+}
+
+// 审核人列表
+const approverList = reactive([])
+const queryApprover = () => {
+  getApprovePerson().then(res => {
+    if (res.code === 0) {
+      approverList.length = 0
+      approverList.push(...res.data)
+    }
+  })
+}
+
+// 新增节点
+const addDialogShow = ref(false)
+const orderList = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
+const createNodeData = reactive({
+  nodeName: '',
+  approverId: 0,
+  nodeOrder: 0,
+  nodeDescription: ''
+})
+const openAddDialog = () => {
+  addDialogShow.value = true
+  createNodeData.approverId = approverList[0].ID
+  createNodeData.nodeOrder = orderList[0]
+}
+// const createNode = () => {
+//   postNode(createNodeData).then(res => {
+//     if (res.code === 0) {
+//       console.log(res.data)
+//     }
+//   })
+// }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,132 +1,39 @@
 <template>
   <div>
-    <el-drawer
-      v-model="nodeManageShow"
-      title="节点管理"
-    />
     <el-row>
-      <el-col
-        :span="23"
-        :offset="1"
-      >
-        <el-form :inline="true">
-          <el-form-item label="审批人：">
-            <el-select
-              v-model="approverValue"
-              placeholder="请选择审核人员"
-              filterable
-              clearable
-              @click="changeApprover"
-              @clear="clearApprover"
-            >
-              <el-option
-                v-for="item in approverList"
-                :key="item.ID"
-                :label="item.user.nickName"
-                :value="item.ID"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="queryApproverNode">查询</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="createNode">新增</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-    <el-row style="margin-top: 40px">
-      <el-col :span="24">
-        <el-table />
+      <el-col :span="3">
+        <el-button
+          icon="Edit"
+          type="primary"
+          @click="openNodeManage"
+        >节点编辑</el-button>
       </el-col>
     </el-row>
+    <el-drawer
+      v-model="nodeManageShow"
+      title="节点管理"
+    >
+      <node-manage />
+    </el-drawer>
   </div>
 </template>
 
 <script setup>
-import { reactive, onMounted, ref } from 'vue'
-import { getApprovePerson } from '@/api/approver'
-import { getApproverNode, getNodeList, postNode } from '@/api/node'
-
+import NodeManage from './components/nodeManage.vue'
+import { ref, onMounted } from 'vue'
+import { nodeData } from '@/pinia/node/node'
 defineOptions({
   name: 'FlowManage'
 })
-
+const record = nodeData()
 onMounted(() => {
-  queryApprover()
-  queryNodeList()
-})
-// 节点列表
-const nodeList = reactive([])
-
-// 按审核人查询节点
-const condition = reactive({
-  approverId: 0
+  // 获取节点列表
+  record.queryNodeList()
 })
-const approverValue = ref('')
-
-const changeApprover = (val) => {
-  condition.approverId = val
-  approverList.forEach(item => {
-    if (item.ID === val) {
-      approverValue.value = item.user.nickName
-    }
-  })
-}
-const clearApprover = () => {
-  condition.approverId = 0
-  approverValue.value = ''
-}
-const queryApproverNode = () => {
-  getApproverNode(condition).then(res => {
-    if (res.code === 0) {
-      console.log(res)
-    }
-  })
-}
-
-// 查询节点列表
-const nodeListCondition = reactive({
-  page: 0,
-  pageSize: 0
-})
-const queryNodeList = () => {
-  getNodeList(nodeListCondition).then(res => {
-    if (res.code === 0) {
-      console.log('节点列表', res.data)
-      nodeList.length = 0
-      nodeList.push(...res.data)
-    }
-  })
+const nodeManageShow = ref(false)
+const openNodeManage = () => {
+  nodeManageShow.value = true
 }
-
-// 审核人列表
-const approverList = reactive([])
-const queryApprover = () => {
-  getApprovePerson().then(res => {
-    if (res.code === 0) {
-      approverList.length = 0
-      approverList.push(...res.data)
-    }
-  })
-}
-
-// 新增节点
-const createNodeData = reactive({
-  nodeName: '',
-  approverId: '',
-  nodeOrder: '',
-  nodeDescription: ''
-})
-const createNode = () => {
-  postNode(createNodeData).then(res => {
-    if (res.code === 0) {
-      console.log(res.data)
-    }
-  })
-}
-
 </script>
 
 <style scoped>