2545307760@qq.com преди 1 година
родител
ревизия
03df570111
променени са 3 файла, в които са добавени 378 реда и са изтрити 179 реда
  1. 0 1
      web/src/pinia/node/node.js
  2. 0 1
      web/src/view/approve/flowManage/components/nodeManage.vue
  3. 378 177
      web/src/view/approve/flowManage/flowManage.vue

+ 0 - 1
web/src/pinia/node/node.js

@@ -12,7 +12,6 @@ export const nodeData = defineStore('node', () => {
     getNodeList(nodeListCondition).then(res => {
       if (res.code === 0) {
         nodeList.length = 0
-        console.log('节点列表', res.data)
         nodeList.push(...res.data.list)
         nodeListTotal.value = res.data.total
       }

+ 0 - 1
web/src/view/approve/flowManage/components/nodeManage.vue

@@ -185,7 +185,6 @@ const queryApprover = () => {
     if (res.code === 0) {
       approverList.length = 0
       approverList.push(...res.data)
-      console.log(res.data)
     }
   })
 }

+ 378 - 177
web/src/view/approve/flowManage/flowManage.vue

@@ -1,111 +1,47 @@
 <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"
-          type="primary"
-          @click="openNodeManage"
-        >节点编辑</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="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">
+    <div class="box">
+      <el-row>
+        <el-col :span="2">
           <el-button
+            icon="Plus"
             type="primary"
-            icon="Notebook"
-            @click="openEffectDialog"
-          >效果图</el-button>
+            @click="openAddDrawer"
+          >
+            新增流程
+          </el-button>
         </el-col>
-        <el-col :span="4">
+        <el-col :span="3">
           <el-button
+            icon="Edit"
             type="primary"
-            icon="Plus"
-            @click="openProcessNodeDialog()"
-          >添加节点</el-button>
+            @click="openNodeManage"
+          >节点编辑</el-button>
         </el-col>
       </el-row>
       <el-row style="margin-top: 20px">
-        <el-col :span="24">
+        <el-col :span="23">
           <el-table
-            height="470"
-            :data="intermediary"
+            :data="processList"
+            height="650px"
           >
             <el-table-column
-              label="节点顺序"
+              prop="processName"
+              label="流程名称"
               align="center"
-              width="180"
-              prop="nodeOrder"
+              width="250"
             />
             <el-table-column
-              label="节点名称"
+              prop="processType"
+              label="流程类型"
               align="center"
-              prop="nodeName"
+              width="250"
             />
             <el-table-column
-              label="节点审核人"
+              label="节点数量"
               align="center"
-              prop="nodeHead"
+              prop="nodes.length"
+              width="250"
             />
             <el-table-column
               label="操作"
@@ -113,96 +49,247 @@
             >
               <template #default="scope">
                 <el-button
-                  icon="Delete"
+                  icon="Picture"
+                  text
+                  type="primary"
+                  @click="openRender(scope.row)"
+                >效果图</el-button>
+                <el-popover
+                  placement="top"
+                  :width="250"
+                  trigger="click"
+                  :content="scope.row.processContent"
+                >
+                  <template #reference>
+                    <el-button
+                      icon="Memo"
+                      text
+                      type="primary"
+                    >流程内容</el-button>
+                  </template>
+                </el-popover>
+                <el-button
+                  icon="Edit"
+                  text
                   type="primary"
+                  @click="openModifyDrawer(scope.row)"
+                >修改</el-button>
+                <el-button
+                  icon="Delete"
                   text
-                  @click="deleteProcessNode(scope.row)"
+                  type="primary"
+                  @click="deleteProcess(scope.row)"
                 >删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-col>
       </el-row>
-      <el-row
-        style="margin-top: 50px"
-        justify="end"
+      <el-drawer
+        v-model="nodeManageShow"
+        title="节点管理"
+        size="55%"
       >
-        <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"
+        <node-manage />
+      </el-drawer>
+      <el-drawer
+        v-model="editProcessShow"
+        :title="processDrawerTitle"
+        size="37%"
       >
-        <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-form
+          label-position="left"
+          label-width="100"
+          size="large"
+        >
+          <el-form-item label="流程名称:">
+            <el-input
+              v-model="editProcessData.process.processName"
+              placeholder="请输入审核流程名称"
             />
-          </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-form-item>
+          <el-form-item label="流程内容:">
+            <el-input
+              v-model="editProcessData.process.processContent"
+              placeholder="请输入审核流程内容"
             />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button
+          </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"
-          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"
+          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-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>
+        <el-row
+          style="margin-top: 20px;height: 150px"
+        >
+          <el-col :span="24">
+            <el-steps
+              v-show="intermediary.length > 1"
+              :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>
+      <el-dialog
+        v-model="renderShow"
+        title="流程效果图"
+      >
+        <el-row
+          style="margin-top: 20px;height: 150px"
+        >
+          <el-col :span="24">
+            <el-steps
+              v-show="renderNodeList.length > 1"
+              :active="renderNodeList.length"
+              space="20%"
+              align-center
+            >
+              <el-step
+                v-for="item in renderNodeList"
+                :key="item.nodeId"
+                :title="item.nodeName"
+                :description="item.nodeHead"
+              />
+            </el-steps>
+          </el-col>
+        </el-row>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -211,8 +298,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'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { postProcess, getProcessList, delProcess, putProcess } from '@/api/process'
 defineOptions({
   name: 'FlowManage'
 })
@@ -222,8 +309,9 @@ onMounted(() => {
   record.queryNodeList()
   queryAllNode()
   // 查看流程
-  queryAllProcess()
+  queryProcessList()
 })
+
 // .....................................节点
 const nodeManageShow = ref(false)
 const openNodeManage = () => {
@@ -240,10 +328,12 @@ const queryAllNode = () => {
     }
   })
 }
+
 // .....................................流程
 const editProcessShow = ref(false)
 
 const processDrawerTitle = ref('新增流程')
+
 // 添加流程数据
 const editProcessData = reactive({
   process: {
@@ -255,8 +345,19 @@ const editProcessData = reactive({
 })
 const openAddDrawer = () => {
   editProcessShow.value = true
+  const initial = reactive({
+    process: {
+      processName: '',
+      processContent: '',
+      processType: ''
+    },
+    processNodes: []
+  })
+  Object.assign(editProcessData, initial)
+  intermediary.value = []
 }
-// 为流程添加节点
+
+// 为流程添加、编辑节点
 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]
@@ -271,7 +372,6 @@ 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([])
@@ -298,6 +398,8 @@ const deleteProcessNode = (row) => {
     }
   })
 }
+
+// 编辑流程
 const editProcess = () => {
   const arr = intermediary.value
   arr.forEach(item => {
@@ -320,12 +422,35 @@ const editProcess = () => {
       }
     }
   }
-  postProcess(editProcessData).then(res => {
-    if (res.code === 0) {
-      console.log(res.data)
+  if (processDrawerTitle.value === '新增流程') {
+    postProcess(editProcessData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('新增流程成功')
+        editProcessShow.value = false
+        queryProcessList()
+      }
+    })
+  } else {
+    const { process, processNodes } = editProcessData
+    const editData = {
+      process: {
+        id: processId.value,
+        processName: process.processName,
+        processContent: process.processContent,
+        processType: process.processType
+      },
+      processNodes: processNodes
     }
-  })
+    putProcess(editData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('修改流程成功')
+        editProcessShow.value = false
+        queryProcessList()
+      }
+    })
+  }
 }
+
 // 流程效果图
 const processActive = ref(0)
 
@@ -335,17 +460,93 @@ const openEffectDialog = () => {
   processEffectShow.value = true
 } // 打开弹窗
 
-// 查看所有流程
-const queryAllProcess = () => {
-  getAllProcess().then(res => {
+// 查看流程列表
+const processPag = reactive({
+  page: 1,
+  pageSize: 10
+})
+const processList = reactive([])
+const queryProcessList = () => {
+  getProcessList(processPag).then(res => {
     if (res.code === 0) {
       console.log('流程列表', res.data)
+      processList.length = 0
+      processList.push(...res.data.list)
     }
   })
 }
 
+// 已完成的流程效果图
+const renderShow = ref(false)
+const renderNodeList = reactive([])
+const openRender = (row) => {
+  renderShow.value = true
+  renderNodeList.length = 0
+  renderNodeList.push(...row.nodes)
+}
+
+// 修改流程
+const processId = ref(0)// 流程id
+const openModifyDrawer = (row) => {
+  processId.value = row.ID
+  editProcessShow.value = true
+  processDrawerTitle.value = '修改流程'
+  const { process, processNodes } = editProcessData
+  process.processContent = row.processContent
+  process.processName = row.processName
+  process.processType = row.processType
+  processNodes.length = 0
+  const nodes = row.nodes
+  intermediary.value.length = 0
+  nodes.forEach(item => {
+    const obj = {
+      nodeId: item.ID,
+      nodeName: item.nodeName,
+      nodeOrder: item.order,
+      nodeHead: item.approver.nickName
+    }
+    intermediary.value.push(obj)
+  })
+}
+
+// 删除流程
+const deleteProcess = (row) => {
+  ElMessageBox.confirm(
+    '确定要删除此流程吗?',
+    '删除流程',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const delId = {
+        id: row.ID
+      }
+      delProcess(delId).then(res => {
+        if (res.code === 0) {
+          console.log(res.data)
+          ElMessage.success('删除成功')
+          queryProcessList()
+        }
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
+}
+
 </script>
 
 <style scoped>
-
+.box{
+  width: 1550px;
+  height: 700px;
+  background-color: #ffffff;
+  padding: 20px;
+}
 </style>