44 lines
18 KiB
HTML
44 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta name="generator" content="VuePress 2.0.0-rc.20" />
|
||
<style>
|
||
:root {
|
||
--vp-c-bg: #fff;
|
||
}
|
||
|
||
[data-theme='dark'] {
|
||
--vp-c-bg: #1b1b1f;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
background-color: var(--vp-c-bg);
|
||
}
|
||
</style>
|
||
<script>
|
||
const useChoice = localStorage.getItem('vuepress-color-scheme')
|
||
const systemStatus =
|
||
'matchMedia' in window
|
||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
: false
|
||
|
||
if (useChoice === 'light') {
|
||
document.documentElement.dataset.theme = 'light'
|
||
} else if (useChoice === 'dark' || systemStatus) {
|
||
document.documentElement.dataset.theme = 'dark'
|
||
}
|
||
</script>
|
||
<title>自定义页面 | 全代码框架文档</title><meta name="description" content="">
|
||
<link rel="preload" href="assets/style-CQp7YV5d.css" as="style"><link rel="stylesheet" href="assets/style-CQp7YV5d.css">
|
||
<link rel="modulepreload" href="assets/app-CDlLWk6N.js"><link rel="modulepreload" href="assets/custom_page.html-DIr-Sgm-.js">
|
||
<link rel="prefetch" href="assets/index.html-ByXOdSON.js" as="script"><link rel="prefetch" href="assets/components.html-CbpbsXEn.js" as="script"><link rel="prefetch" href="assets/field_events.html-C6V_tkoR.js" as="script"><link rel="prefetch" href="assets/form_logic.html-CA8-U3gW.js" as="script"><link rel="prefetch" href="assets/index.html-xafVSSBu.js" as="script"><link rel="prefetch" href="assets/pass_value.html-CFBEHlue.js" as="script"><link rel="prefetch" href="assets/show_and_hide.html-Bai-A-AK.js" as="script"><link rel="prefetch" href="assets/index.html-BfpfzkA1.js" as="script"><link rel="prefetch" href="assets/custom_field.html-CEs-XIt2.js" as="script"><link rel="prefetch" href="assets/dialog.html-fkmzKy_f.js" as="script"><link rel="prefetch" href="assets/form.html-B4704WRj.js" as="script"><link rel="prefetch" href="assets/table.html-BrzZNtYJ.js" as="script"><link rel="prefetch" href="assets/add_field.html-Lpe0HY5a.js" as="script"><link rel="prefetch" href="assets/ajax.html-CDfrJfFy.js" as="script"><link rel="prefetch" href="assets/change_value.html-CS5TpMC0.js" as="script"><link rel="prefetch" href="assets/computed.html-9QOs6N7a.js" as="script"><link rel="prefetch" href="assets/teleport.html-BIP5te2y.js" as="script"><link rel="prefetch" href="assets/validation.html-B_JW048n.js" as="script"><link rel="prefetch" href="assets/404.html-urOlE4ef.js" as="script">
|
||
</head>
|
||
<body>
|
||
<div id="app"><!--[--><div class="vp-theme-container external-link-icon" vp-container><!--[--><header class="vp-navbar" vp-navbar><div class="vp-toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a class="route-link" href><!----><span class="vp-site-name" aria-hidden="true">全代码框架文档</span></a></span><div class="vp-navbar-items-wrapper" style=""><!--[--><!--]--><nav class="vp-navbar-items vp-hide-mobile" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button type="button" class="vp-toggle-color-mode-button" title="toggle color mode"><svg class="light-icon" viewbox="0 0 32 32" style=""><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg class="dark-icon" viewbox="0 0 32 32" style="display:none;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="vp-sidebar-mask"></div><!--[--><aside class="vp-sidebar" vp-sidebar><nav class="vp-navbar-items" aria-label="site navigation"><!--[--><div class="vp-navbar-item"><a class="route-link auto-link" href aria-label="首页"><!--[--><!--[--><!--]--><!--]-->首页<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="tutorial/" aria-label="快速上手"><!--[--><!--[--><!--]--><!--]-->快速上手<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link auto-link" href="front_components/" aria-label="前端组件"><!--[--><!--[--><!--]--><!--]-->前端组件<!--[--><!--[--><!--]--><!--]--></a></div><div class="vp-navbar-item"><a class="route-link route-link-active auto-link" href="front_dev/" aria-label="前端二开"><!--[--><!--[--><!--]--><!--]-->前端二开<!--[--><!--[--><!--]--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="vp-sidebar-items"><!--[--><li><a class="route-link route-link-active auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/" aria-label="二开前准备"><!--[--><!--[--><!--]--><!--]-->二开前准备<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item vp-sidebar-heading" href="front_dev/mobile_app.html" aria-label="对接移动办公"><!--[--><!--[--><!--]--><!--]-->对接移动办公<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">表单介绍 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/form_logic.html" aria-label="表单封装逻辑"><!--[--><!--[--><!--]--><!--]-->表单封装逻辑<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/pass_value.html" aria-label="传值和formModel"><!--[--><!--[--><!--]--><!--]-->传值和formModel<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/components.html" aria-label="组件的封装"><!--[--><!--[--><!--]--><!--]-->组件的封装<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/show_and_hide.html" aria-label="显示隐藏控制"><!--[--><!--[--><!--]--><!--]-->显示隐藏控制<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/field_events.html" aria-label="字段事件"><!--[--><!--[--><!--]--><!--]-->字段事件<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading">基础二开 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/computed.html" aria-label="值计算"><!--[--><!--[--><!--]--><!--]-->值计算<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/change_value.html" aria-label="修改组件值"><!--[--><!--[--><!--]--><!--]-->修改组件值<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/validation.html" aria-label="自定义校验"><!--[--><!--[--><!--]--><!--]-->自定义校验<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/ajax.html" aria-label="使用远程数据源"><!--[--><!--[--><!--]--><!--]-->使用远程数据源<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/teleport.html" aria-label="为工具栏添加按钮"><!--[--><!--[--><!--]--><!--]-->为工具栏添加按钮<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/base/add_field.html" aria-label="为表单添加新字段"><!--[--><!--[--><!--]--><!--]-->为表单添加新字段<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="vp-sidebar-item vp-sidebar-heading active">高级二开 <!----></p><ul style="" class="vp-sidebar-children"><!--[--><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/custom_field.html" aria-label="自定义字段"><!--[--><!--[--><!--]--><!--]-->自定义字段<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link route-link-active auto-link vp-sidebar-item active" href="front_dev/adv/custom_page.html" aria-label="自定义页面"><!--[--><!--[--><!--]--><!--]-->自定义页面<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/dialog.html" aria-label="弹窗"><!--[--><!--[--><!--]--><!--]-->弹窗<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/form.html" aria-label="表单"><!--[--><!--[--><!--]--><!--]-->表单<!--[--><!--[--><!--]--><!--]--></a><!----></li><li><a class="route-link auto-link vp-sidebar-item" href="front_dev/adv/table.html" aria-label="表格"><!--[--><!--[--><!--]--><!--]-->表格<!--[--><!--[--><!--]--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="vp-page"><!--[--><!--]--><div vp-content><!--[--><!--]--><div><h1 id="自定义页面" tabindex="-1"><a class="header-anchor" href="#自定义页面"><span>自定义页面</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="第一步-新建页面" tabindex="-1"><a class="header-anchor" href="#第一步-新建页面"><span>第一步：新建页面</span></a></h3><p>自定义页面，需要在 <strong>/src/views</strong> 文件夹下新建你所需开发的页面，并且尽量规范化，比如：你新建页面的路由为: <strong>/custom/index</strong>，则你新建的页面的路径则为：src -> views -> custom -> index.vue。 如下图，我在 <strong>/src/views</strong> 下，新建了一个文件夹为custom，并且里面有一个index.vue的文件</p><p><img src="/assets/custom_page_pc_1-CXjVoBOn.png" alt="自定义页面"></p><h3 id="第二步-自定义路由" tabindex="-1"><a class="header-anchor" href="#第二步-自定义路由"><span>第二步：自定义路由</span></a></h3><p>自定义路由，需要在 <strong>/src/router/routes</strong> 文件夹下的 <strong>basic.ts</strong> 和 <strong>index.ts</strong> 下进行自定义，如下图，我在 <strong>basic.ts</strong> 中新建了一个自定义路由 <strong>CUSTOMFORM_ROUTE</strong>，并在 <strong>index.ts</strong> 中引入了这个自定义路由。</p><p><img src="/assets/custom_page_pc_2-8e_g1uGT.png" alt="自定义路由"></p><h3 id="第三步-配置路由权限-菜单权限" tabindex="-1"><a class="header-anchor" href="#第三步-配置路由权限-菜单权限"><span>第三步：配置路由权限（菜单权限）</span></a></h3><p>配置路由（菜单）权限需要用管理员账号登录，在 <strong>菜单管理</strong> 页面 <strong>新增菜单</strong> 进行操作，其中 <strong>菜单名称</strong>、<strong>组件名称</strong>、<strong>编码</strong>、<strong>上级菜单</strong>、<strong>所属系统</strong> 根据实际情况填写或者选择，<strong>路由地址</strong> 则必须与第二步中 <strong>自定义路由</strong> 一致，否则会找不到页面的。<strong>组件路径</strong> 则与第一步中的 <strong>新建页面</strong> 新建的页面的路径一致。</p><p><img src="/assets/custom_page_pc_3-PVAgZmk6.png" alt="配置路由权限（菜单权限）"></p><h3 id="第四步-配置角色权限" tabindex="-1"><a class="header-anchor" href="#第四步-配置角色权限"><span>第四步：配置角色权限</span></a></h3><p>要显示 <strong>自定义页面</strong> 还需在特定的角色分配权限，在 <strong>角色管理</strong> 页面选择对应的角色，点击 <strong>功能授权</strong> -> <strong>菜单</strong> 进行配置</p><p><img src="/assets/custom_page_pc_4-BJ6TU5rW.png" alt="配置角色权限"></p><p>选择你新建的页面，点击 <strong>确定</strong> 按钮进行配置即可，如下图：</p><p><img src="/assets/custom_page_pc_5-67hJreQO.png" alt="配置角色权限"></p><h3 id="第五步-查看效果" tabindex="-1"><a class="header-anchor" href="#第五步-查看效果"><span>第五步： 查看效果</span></a></h3><p>经过上面的操作，点击你新建的路由，即可显示你自定义的页面</p><p><img src="/assets/custom_page_pc_6-D0qmIZZb.png" alt="查看效果"></p><h2 id="app端" tabindex="-1"><a class="header-anchor" href="#app端"><span>APP端</span></a></h2><h3 id="第一步-新建页面-1" tabindex="-1"><a class="header-anchor" href="#第一步-新建页面-1"><span>第一步：新建页面</span></a></h3><p>自定义页面，需要在 <strong>pages</strong> 文件夹下新建你所需开发的页面，比如：我在 <strong>pages</strong> 下新建了一个文件夹 <strong>custom</strong>，并且里面新建两个文件 <strong>list.vue</strong> 和 <strong>detail.vue</strong>，并在根目录下的 <strong>pages.json</strong> 下的配置了这两个文件的路由 <strong>pages/custom/list</strong> 和 <strong>pages/custom/detail</strong></p><p><img src="/assets/custom_page_app_1-7IYO8Eyo.png" alt="自定义页面"></p><h3 id="第二步-配置路由权限" tabindex="-1"><a class="header-anchor" href="#第二步-配置路由权限"><span>第二步：配置路由权限</span></a></h3><p>由于APP端的权限与PC端的分开，所以配置APP端的路由权限，需要在数据库中找到表名为： <strong>xjr_app_menu</strong> 的表，并在表中插入你新建页面的相关信息。如下图，我插入了一条name为“<strong>自定义页面</strong>”，url为“<strong>/pages/custom/list</strong>”（必须以/开头，否则跳转会有问题），create_user_id填写一般为管理员的id，其他字段根据实际情况填写。</p><p><img src="/assets/custom_page_app_2-BSYSeOjb.png" alt="数据库插入自定义路由权限"></p><h3 id="第三步-分配权限" tabindex="-1"><a class="header-anchor" href="#第三步-分配权限"><span>第三步：分配权限</span></a></h3><p>经过第三步后，APP端并不会显示新建的页面，要显示则需要在PC端的 <strong>角色管理</strong> 页面选择对应的角色，点击 <strong>移动端功能授权</strong> 进行配置。</p><p><img src="/assets/custom_page_app_3-B3tOwhE2.png" alt="配置角色权限"></p><p>选择你在数据库插入的数据，点击 <strong>确定</strong> 按钮进行配置即可，如下图：</p><p><img src="/assets/custom_page_app_4-2qED3-kx.png" alt="配置角色权限"></p><h3 id="第五步-查看效果-1" tabindex="-1"><a class="header-anchor" href="#第五步-查看效果-1"><span>第五步： 查看效果</span></a></h3><p>经过上面的操作，点击你新建的路由，即可显示你自定义的页面</p><p><img src="/assets/custom_page_app_5-DVBTSAZJ.png" alt="查看效果"></p></div><!--[--><!--]--></div><footer class="vp-page-meta"><!----><div class="vp-meta-item git-info"><div class="vp-meta-item last-updated"><span class="meta-item-label">Last Updated:: </span><time class="meta-item-info" datetime="2025-04-15T07:24:05.000Z" data-allow-mismatch>4/15/25, 3:24 PM</time></div><div class="vp-meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: chen_junior@163.com">chen_junior</span><!----><!--]--><!--]--></span></div></div></footer><nav class="vp-page-nav" aria-label="page navigation"><a class="route-link auto-link prev" href="front_dev/adv/custom_field.html" aria-label="自定义字段"><!--[--><div class="hint"><span class="arrow left"></span> Prev</div><div class="link"><span class="external-link">自定义字段</span></div><!--]--></a><a class="route-link auto-link next" href="front_dev/adv/dialog.html" aria-label="弹窗"><!--[--><div class="hint">Next <span class="arrow right"></span></div><div class="link"><span class="external-link">弹窗</span></div><!--]--></a></nav><!--[--><!--]--></main><!--]--></div><!--[--><!----><!--]--><!--]--></div>
|
||
<script type="module" src="assets/app-CDlLWk6N.js" defer></script>
|
||
</body>
|
||
</html>
|