Merge remote-tracking branch 'origin/dev' into dev

web/src/api/node.js

@@ -8,11 +8,10 @@ export const getAllNode = () => {
   })
 }
 // 按审批人查询节点
-export const getApproverNode = (params) => {
+export const getApproverNode = (approverId) => {
   return service({
-    url: '/node/QueryNodeByApproverId',
-    method: 'GET',
-    params
+    url: '/node/queryNodeByApproverId?approverId=' + approverId,
+    method: 'GET'
   })
 }
 

web/src/api/process.js

@@ -0,0 +1,45 @@
+import service from '@/utils/request'
+
+// 查询所有流程
+export const getAllProcess = () => {
+  return service({
+    url: '/process/queryAllProcess',
+    method: 'GET'
+  })
+}
+
+// 新增流程
+export const postProcess = (data) => {
+  return service({
+    url: '/process/createProcess',
+    method: 'POST',
+    data
+  })
+}
+
+// 查询流程列表
+export const getProcessList = (data) => {
+  return service({
+    url: '/process/queryProcessList',
+    method: 'POST',
+    data
+  })
+}
+
+// 修改流程
+export const putProcess = (data) => {
+  return service({
+    url: '/process/updateProcess',
+    method: 'PUT',
+    data
+  })
+}
+
+// 删除流程
+export const delProcess = (data) => {
+  return service({
+    url: '/process/deleteProcess',
+    method: 'delete',
+    data
+  })
+}

web/src/pinia/node/node.js

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

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

@@ -11,24 +11,17 @@
               placeholder="请选择审核人员"
               filterable
               clearable
-              @click="changeApprover"
+              @change="changeApprover"
               @clear="clearApprover"
             >
               <el-option
                 v-for="item in approverList"
                 :key="item.ID"
-                :label="item.user.nickName"
+                :label="item.nickName"
                 :value="item.ID"
               />
             </el-select>
           </el-form-item>
-          <el-form-item>
-            <el-button
-              icon="Search"
-              type="primary"
-              @click="queryApproverNode"
-            >查询</el-button>
-          </el-form-item>
           <el-form-item>
             <el-button
               icon="Plus"
@@ -52,11 +45,6 @@
             label="审核人"
             align="center"
           />
-          <el-table-column
-            prop="nodeOrder"
-            label="节点顺序"
-            align="center"
-          />
           <el-table-column
             label="操作"
             align="center"
@@ -77,6 +65,13 @@
                   >描述</el-button>
                 </template>
               </el-popover>
+              <el-button
+                text
+                type="primary"
+                icon="Edit"
+                size="small"
+                @click="editNode(scope.row)"
+              >编辑</el-button>
               <el-button
                 text
                 type="primary"
@@ -89,9 +84,20 @@
         </el-table>
       </el-col>
     </el-row>
+    <el-row justify="end">
+      <el-pagination
+        :current-page="point.nodeListCondition.page"
+        :page-size="point.nodeListCondition.pageSize"
+        :page-sizes="[10, 30, 50, 100]"
+        :total="point.nodeListTotal"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      />
+    </el-row>
     <el-dialog
       v-model="addDialogShow"
-      title="新增节点"
+      :title="identifyType"
     >
       <el-form
         size="large"
@@ -113,21 +119,11 @@
             <el-option
               v-for="item in approverList"
               :key="item.ID"
-              :label="item.user.nickName"
+              :label="item.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"
@@ -154,11 +150,11 @@
 
 <script setup>
 import { reactive, onMounted, ref } from 'vue'
-import { getApprovePerson } from '@/api/approver'
-import { getApproverNode, delNode } from '@/api/node'
+import { delNode, putNode } from '@/api/node'
 import { nodeData } from '@/pinia/node/node'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { postNode } from '@/api/node'
+import { getAllUsers } from '@/api/user'
 defineOptions({
   name: 'NodeManage'
 })
@@ -167,86 +163,123 @@ onMounted(() => {
 })
 const point = nodeData()
 // 按审核人查询节点
-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
+      approverValue.value = item.nickName
+      point.queryApproverNode(val)
     }
   })
 }
 const clearApprover = () => {
-  condition.approverId = 0
+  point.queryNodeList()
   approverValue.value = ''
 }
-const queryApproverNode = () => {
-  getApproverNode(condition).then(res => {
-    if (res.code === 0) {
-      console.log(res)
-    }
-  })
-}
 
 // 审核人列表
 const approverList = reactive([])
 const queryApprover = () => {
-  getApprovePerson().then(res => {
+  getAllUsers().then(res => {
     if (res.code === 0) {
       approverList.length = 0
       approverList.push(...res.data)
+      console.log(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 identifyType = ref('')
+// 新增、修改节点数据
 const createNodeData = reactive({
   nodeName: '',
   approverId: 0,
-  nodeOrder: 0,
   nodeDescription: ''
 })
 const openAddDialog = () => {
   addDialogShow.value = true
   createNodeData.approverId = approverList[0].ID
-  createNodeData.nodeOrder = orderList[0]
+  createNodeData.nodeName = ''
+  createNodeData.nodeDescription = ''
+  identifyType.value = '新增节点'
+}
+
+const editId = ref(0)
+const editNode = (row) => {
+  editId.value = row.ID
+  createNodeData.approverId = row.approverId
+  createNodeData.nodeName = row.nodeName
+  createNodeData.nodeDescription = row.nodeDescription
+  addDialogShow.value = true
+  identifyType.value = '修改节点'
 }
+
 const createNode = () => {
-  postNode(createNodeData).then(res => {
-    console.log(res)
-    if (res.code === 0) {
-      point.queryNodeList()
-      ElMessage.success('新增节点成功')
+  if (identifyType.value === '新增节点') {
+    postNode(createNodeData).then(res => {
+      if (res.code === 0) {
+        point.queryNodeList()
+        ElMessage.success('新增节点成功')
+        createNodeData.nodeName = ''
+        createNodeData.approverId = approverList[0].ID
+        createNodeData.nodeDescription = ''
+        addDialogShow.value = false
+      }
+    })
+  } else {
+    const editData = {
+      id: editId.value,
+      nodeName: createNodeData.nodeName,
+      approverId: createNodeData.approverId,
+      nodeDescription: createNodeData.nodeDescription
     }
-  })
+    putNode(editData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改成功')
+        addDialogShow.value = false
+        point.queryNodeList()
+      }
+    })
+  }
 }
 
 // 删除节点
 const deleteNode = (val) => {
-  console.log(val)
-  // ElMessageBox.confirm(
-  //   '确定要删除此费用记录吗?',
-  //   '删除记录',
-  //   {
-  //     confirmButtonText: '删除',
-  //     cancelButtonText: '取消',
-  //     type: 'warning',
-  //   }
-  // )
-  //   .then(() => {})
-  //   .catch(() => {
-  //     ElMessage({
-  //       type: 'info',
-  //       message: '取消删除',
-  //     })
-  //   })
+  ElMessageBox.confirm(
+    '确定要删除此费用记录吗?',
+    '删除记录',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const delId = {
+        id: val.ID
+      }
+      delNode(delId).then(res => {
+        if (res.code === 0) {
+          ElMessage.success('删除成功')
+          point.queryNodeList()
+        }
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
 }
+
+const handleCurrentChange = () => {}
+
+const handleSizeChange = () => {}
+
 </script>
 
 <style scoped>

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

@@ -1,6 +1,15 @@
 <template>
   <div>
     <el-row>
+      <el-col :span="2">
+        <el-button
+          icon="Plus"
+          type="primary"
+          @click="openAddDrawer"
+        >
+          新增流程
+        </el-button>
+      </el-col>
       <el-col :span="3">
         <el-button
           icon="Edit"
@@ -9,20 +18,201 @@
         >节点编辑</el-button>
       </el-col>
     </el-row>
+    <el-row style="margin-top: 20px">
+      <el-col :span="24">
+        <el-table />
+      </el-col>
+    </el-row>
     <el-drawer
       v-model="nodeManageShow"
       title="节点管理"
-      size="50%"
+      size="55%"
     >
       <node-manage />
     </el-drawer>
+    <el-drawer
+      v-model="editProcessShow"
+      :title="processDrawerTitle"
+      size="37%"
+    >
+      <el-form
+        label-position="left"
+        label-width="100"
+        size="large"
+      >
+        <el-form-item label="流程名称：">
+          <el-input
+            v-model="editProcessData.process.processName"
+            placeholder="请输入审核流程名称"
+          />
+        </el-form-item>
+        <el-form-item label="流程内容：">
+          <el-input
+            v-model="editProcessData.process.processContent"
+            placeholder="请输入审核流程内容"
+          />
+        </el-form-item>
+        <el-form-item label="流程类型：">
+          <el-select
+            v-model="editProcessData.process.processType"
+            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="openProcessNodeDialog()"
+          >添加节点</el-button>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 20px">
+        <el-col :span="24">
+          <el-table
+            height="470"
+            :data="intermediary"
+          >
+            <el-table-column
+              label="节点顺序"
+              align="center"
+              width="180"
+              prop="nodeOrder"
+            />
+            <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-button
+                  icon="Delete"
+                  type="primary"
+                  text
+                  @click="deleteProcessNode(scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+      <el-row
+        style="margin-top: 50px"
+        justify="end"
+      >
+        <el-button
+          type="primary"
+          size="large"
+          @click="editProcess"
+        >确认</el-button>
+      </el-row>
+    </el-drawer>
+    <el-dialog
+      v-model="processNodeDialog"
+      :title="processNodeTitle"
+      width="40%"
+    >
+      <el-form
+        size="large"
+        label-position="left"
+        label-width="90"
+        style="margin-top: 20px"
+      >
+        <el-form-item label="节点名称：">
+          <el-select
+            v-model="addProcessNodeData.nodeId"
+            @change="changeNodeName"
+          >
+            <el-option
+              v-for="item in nodeList"
+              :key="item.ID"
+              :label="item.nodeName"
+              :value="item.ID"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点顺序：">
+          <el-select v-model="addProcessNodeData.nodeOrder">
+            <el-option
+              v-for="(item,index) in orderList"
+              :key="index"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          size="large"
+          type="primary"
+          @click="addProcessNodes"
+        >确认</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>
 
 <script setup>
 import NodeManage from './components/nodeManage.vue'
-import { ref, onMounted } from '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'
 })
@@ -30,11 +220,130 @@ const record = nodeData()
 onMounted(() => {
   // 获取节点列表
   record.queryNodeList()
+  queryAllNode()
+  // 查看流程
+  queryAllProcess()
 })
+// .....................................节点
 const nodeManageShow = ref(false)
 const openNodeManage = () => {
   nodeManageShow.value = true
 }
+const nodeList = reactive([])
+// 查询所有节点
+const queryAllNode = () => {
+  getAllNode().then(res => {
+    if (res.code === 0) {
+      nodeList.length = 0
+      nodeList.push(...res.data)
+      // console.log('节点列表', nodeList)
+    }
+  })
+}
+// .....................................流程
+const editProcessShow = ref(false)
+
+const processDrawerTitle = ref('新增流程')
+// 添加流程数据
+const editProcessData = reactive({
+  process: {
+    processName: '',
+    processContent: '',
+    processType: ''
+  },
+  processNodes: []
+})
+const openAddDrawer = () => {
+  editProcessShow.value = true
+}
+// 为流程添加节点
+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,
+  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 = () => {
+  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>
 
 <style scoped>