帮助文档提取单独页面

src/layout/components/SiderBarItem.vue

@@ -4,7 +4,7 @@
       <span>{{ item.meta?.title }}</span>
     </template>
 
-    <template v-for="items in item.children" :key="items.path">
+    <template v-for="items in filterHiddenChild(item.children)" :key="items.path">
       <sider-bar-item :item="items" />
     </template>
   </el-sub-menu>
@@ -26,8 +26,11 @@ export default defineComponent({
   setup(props) {
     const hasChild = computed(() => props.item?.children && props.item.children.length)
 
+    const filterHiddenChild = (child) => child.filter(v => !!!v.hidden)
+
     return {
-      hasChild
+      hasChild,
+      filterHiddenChild
     }
   }
 })

src/router/index.ts

@@ -28,6 +28,15 @@ export const routes = [
           title: '脚本管理'
         }
       },
+      {
+        path: '/order/scripts-help',
+        name: 'OrderScriptsHelp',
+        hidden: true,
+        component: () => import('@/views/order/scripts/help.vue'),
+        meta: {
+          title: '帮助文档'
+        }
+      },
       {
         path: '/order/list',
         name: 'OrderList',

src/views/order/scripts/help.vue

+<template>
+  <div class="w-full h-full bg-white p-4">
+    <p class="font-bold text-lg leading-10 border-b-2">帮助文档</p>
+    <p class="font-bold text-lg text-black">脚本</p>
+    <div class="p-3 text-black leading-loose">
+      <ol class="list-decimal">
+        <li class="pl-2" v-for="(item, index) in scriptsDesc" :key="index">
+          <span class="font-bold text-sm">{{ item.scriptName }}：</span
+          ><span class="text-gray-500">{{ item.scriptDesc }}</span>
+          <p class="text-gray-500">示例：</p>
+          <div class="bg-[#1e293b] p-2 text-white rounded">{{ item.example }}</div>
+        </li>
+      </ol>
+    </div>
+    <p class="font-bold text-lg text-black mb-2">内置变量</p>
+
+    <p class="text-black mb-2"><span>单元格</span> <span>cellValue</span></p>
+
+    <p class="font-bold text-lg text-black mb-2">变量模块内置变量</p>
+
+    <p>
+      <span class="font-bold text-black">支持订单字段：</span>
+      <span
+        v-for="(item, index) in orderVars"
+        :key="index"
+        class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+        >{{ item.fliedTitle }}</span
+      >
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { apiGetScriptDesc, apiOrderVarGetVarField } from '@/api/common'
+
+const scriptsDesc = ref([]);
+const orderVars = ref([]);
+
+const onQueryVar = async () => {
+  const { data } = await apiOrderVarGetVarField()
+  orderVars.value = data.result || []
+}
+const onQueryExlScript = async () => {
+  const { data } = await apiGetScriptDesc()
+  scriptsDesc.value = data.result || []
+}
+
+onMounted(() => {
+    onQueryVar()
+    onQueryExlScript()
+})
+</script>
+<style lang="scss" scoped></style>

src/views/order/scripts/index.vue

@@ -59,35 +59,6 @@
       </vxe-pager>
     </div>
 
-    <vxe-modal width="70%" height="90%" v-model="helpModal" title="帮助" destroy-on-close>
-      <p class="font-bold text-lg text-black">脚本</p>
-      <div class="p-3 text-black leading-loose">
-        <ol class="list-decimal">
-          <li class="pl-2" v-for="(item, index) in scriptsDesc" :key="index">
-            <span class="font-bold text-sm">{{ item.scriptName }}：</span
-            ><span class="text-gray-500">{{ item.scriptDesc }}</span>
-            <p class="text-gray-500">示例：</p>
-            <div class="bg-[#1e293b] p-2 text-white rounded">{{ item.example }}</div>
-          </li>
-        </ol>
-      </div>
-      <p class="font-bold text-lg text-black mb-2">内置变量</p>
-
-      <p class="text-black mb-2"><span>单元格</span> <span>cellValue</span></p>
-
-      <p class="font-bold text-lg text-black mb-2">变量模块内置变量</p>
-
-      <p>
-        <span class="font-bold text-black">支持订单字段：</span>
-        <span
-          v-for="(item, index) in orderVars"
-          :key="index"
-          class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
-          >{{ item.fliedTitle }}</span
-        >
-      </p>
-    </vxe-modal>
-
     <vxe-modal
       width="70%"
       height="90%"
@@ -163,7 +134,9 @@ import {
 import { ElMessage, type FormInstance } from 'element-plus'
 import type { VxeTableInstance } from 'vxe-table'
 import { apiGetScriptDesc, apiOrderVarGetVarField } from '@/api/common'
+import {  useRouter } from 'vue-router'
 
+const router = useRouter()
 const visibleTest = ref(false)
 const loading = ref(false)
 const saveLoading = ref(false)
@@ -269,10 +242,8 @@ const removeRows = async () => {
     onQuery()
   }
 }
-
-const helpModal = ref(false)
 const showHelp = () => {
-  helpModal.value = true
+  router.push('/order/scripts-help')
 }
 
 // 表单提交
@@ -298,22 +269,9 @@ const onQuery = async () => {
   loading.value = false
 }
 
-const orderVars = ref([])
-const scriptsDesc = ref([])
-
-const onQueryVar = async () => {
-  const { data } = await apiOrderVarGetVarField()
-  orderVars.value = data.result || []
-}
-const onQueryExlScript = async () => {
-  const { data } = await apiGetScriptDesc()
-  scriptsDesc.value = data.result || []
-}
 
 onMounted(() => {
   onQuery()
-  onQueryVar()
-  onQueryExlScript()
 })
 </script>
 <style lang="scss" scoped></style>