项目文件管理完成

src/api/flow.js

@@ -0,0 +1,8 @@
+import service from '@/utils/request'
+export const getProcessList = (data) => {
+    return service({
+        url: '/process/queryProcessList',
+        method: 'POST',
+        data
+    })
+}

src/router/index.js

@@ -64,7 +64,20 @@ let routes= [
             {
                 path: 'approve',
                 name: 'approve',
-                component: () => import('@/view/approve/approve.vue')
+                redirect: '/navigation/approve/flowList',
+                component: () => import('@/view/approve/approve.vue'),
+                children: [
+                    {
+                        path: 'approveList',
+                        name: 'approveList',
+                        component: () => import('@/view/approve/components/approveList.vue')
+                    },
+                    {
+                        path: 'flowList',
+                        name: 'flowList',
+                        component: () => import('@/view/approve/components/flowList.vue')
+                    },
+                ],
             },
         ]
     },

src/view/approve/approve.vue

@@ -1,13 +1,26 @@
+<template>
+  <van-dropdown-menu>
+    <van-dropdown-item v-model="costValue" :options="costOption" @change="changeDropdown"/>
+  </van-dropdown-menu>
+  <router-view/>
+</template>
+
 <script setup>
 defineOptions({
   name: 'Approve',
 })
+const router = useRouter()
+const costValue = ref('/navigation/approve/flowList');
+const costOption = [
+  { text: '流程管理', value: '/navigation/approve/flowList' },
+  { text: '审批管理', value: '/navigation/approve/approveList' },
+];
+const changeDropdown = (val) => {
+  console.log(val)
+  router.push({path: val})
+}
 </script>
 
-<template>
-  <div>审核列表</div>
-</template>
-
 <style scoped>
 
 </style>

src/view/approve/components/approveList.vue

@@ -0,0 +1,13 @@
+<template>
+  审批管理
+</template>
+
+<script setup>
+defineOptions({
+  name: 'approveList',
+})
+</script>
+
+<style scoped lang="less">
+
+</style>

src/view/approve/components/flowList.vue

@@ -0,0 +1,95 @@
+<template>
+  <van-collapse v-model="activeNames">
+    <van-collapse-item v-for="item in processList" :key="item.ID">
+      <template #title>
+        <van-text-ellipsis :content="item.processName" style="font-size: 0.45rem"/>
+      </template>
+      <template #value>
+        <van-switch
+            v-model="item.isUse"
+            @change="changeSwitch"
+            @click.stop
+            size="0.5rem"
+        />
+      </template>
+      <van-row style="font-size: 0.36rem">
+        <van-col :span="15">
+          <van-text-ellipsis :content="flowType(item.processType)"/>
+        </van-col>
+        <van-col :span="9">
+          <van-text-ellipsis :content="nodeNumber(item.nodes.length)"/>
+        </van-col>
+      </van-row>
+      <van-row style="margin-top: 20px">
+        <van-col :span="24">
+          <van-button
+              type="primary"
+              size="large"
+              round
+              @click="openStepsPopup(item.nodes)">
+            效果图
+          </van-button>
+        </van-col>
+      </van-row>
+    </van-collapse-item>
+  </van-collapse>
+  <van-popup v-model:show="stepsShow" class="stepsPopup">
+    <van-steps :active="stepsActive" direction="vertical">
+      <van-step v-for="item in nodeList" :key="item.ID">
+        <h3>{{item.nodeName}}</h3>
+        <p>{{item.approver.nickName}}</p>
+      </van-step>
+    </van-steps>
+  </van-popup>
+</template>
+
+<script setup>
+import { getProcessList } from "@/api/flow"
+defineOptions({
+  name: 'flowList',
+})
+const processPag = reactive({
+  page: 1,
+  pageSize: 1000
+})
+onMounted(() => {
+  queryProcessList()
+})
+const processList = reactive([])
+const nodeList = reactive([])
+const queryProcessList = () => {
+  getProcessList(processPag).then(res => {
+    if (res.code === 0) {
+      const list = res.data.list
+      processList.length = 0
+      processList.push(...list)
+    }
+  })
+}
+const activeNames = ref(['1'])
+const changeSwitch = (val) => {
+  console.log(val)
+}
+// 流程效果图
+const stepsShow = ref(false)
+const stepsActive = ref(1)
+const openStepsPopup = (item) => {
+  stepsShow.value = true
+  nodeList.length = 0
+  nodeList.push(...item)
+  stepsActive.value = item.length - 1
+}
+// 计算属性
+const flowType = computed(() => {
+  return (type) =>  "流程类型：" + type
+})
+const nodeNumber = computed(() => {
+  return (num) => "节点数量：" + num
+})
+</script>
+
+<style scoped lang="less">
+.stepsPopup{
+  width: 500px;
+}
+</style>