# 快速入门
# 添加本地路由
// 路由列表
export default [
{
name: 'role-manage',//路由标识
title: '角色管理',//路由名称
menuType :'menu',//菜单类型(目录(catalog),菜单(menu),插件(plugin)，内链(ifrane)),外链(link),)
isInline :true,//是否内嵌在页面里面
isHide :false,//路由是否列表隐藏
path : 'role-manage/index.vue',//路由地址，包名，外链地址
icon: '',//图标
},
{
path: "company-structure",
title: "公司架构",
menuType: "catalog",
icon: "cluster-outlined",
isInline: true,
isHide:false,
children: [
{
path: "/biz/position",
title: "岗位管理",
menuType: "menu",
path: "biz/position/index",
icon: "apartment-outlined",
isInline: true,
isHide:false
}
]
}
]
注意事项
1.如果页面为全屏页面，无法关联父级，可以创建一个空页面，通过外链，链接全屏页面，全屏页面进行列表隐藏
# api 管理
一、配置请求地址
查看根目录下是否存在.env文件，不存在则创建该文件
# 本地环境
ENV = 'development'
#本地环境接口地址 /为默认地址，使用默认地址不需要额外拼接
#配置多个地址则在后面添加如/device,使用时则在前面拼接/device/*
VITE_API_SERVICE={"/":"http://192.168.0.186:48080","/device":"http://192.168.0.186:40910"}
#SOCKE地址
VITE_API_SOCKE =''
二、统一 api 文件夹
如：
demo-manage 模块，api 文件夹则在demo-manage 模块下新建api文件夹
一、类型
- request 普通接口
- Upload 上传文件
- Download 下载文件
import { request } from "/src/utils/request.js"
// 路由列表（post请求）
export async function loginMenu(payload) {
return await request('/sys/userCenter/loginMenu',{data:{name:111}})
}
// 用户信息（get请求）
export async function getLoginUser(payload) {
return await request('/auth/manage/getLoginUser',{method:'get',params:{name:111}},false)
}
/**
* 可传入值
* @param {String} url 地址
* @param {deploy} deploy 配置参数
* @param {Boolean} msg 请求成功是否自动进行成功提示（默认为true）
* @param {Boolean} wrong 请求成功是否自动进行错误提示（默认为true）
*/
/**
* 常用参数 deploy
* @param {string} method 请求类型,默认为post
* @param {obj} data post请求数据
* @param {obj} headers 请求头,默认为 "content-type": "application/json"
* @param {obj} params get请求参数,也可拼接到url
*/
注意事项
1.配置多个地址时，非默认地址需要在api前面加上标识，如希望/auth/manage/getLoginUser地址请求的地址是/device下的地址，则路径应为/device/auth/manage/getLoginUser
# 定制主题
可在store/themeConfig.js修改相应配置实现不同的主题样式
themeConfig:{
/**
* 全局配置
*/
// 默认 主题颜色
primary:{
primaryColor:'#25b864', // 全局主色
linkColor:'#1890ff',// 链接色
successColor:'#52c41a',// 成功色
warningColor:'#faad14',// 警告色
errorColor:'#f5222d',// 错误色
fontSizeBase:'14px', // 主字号
headingColor:'rgba(0, 0, 0, 0.85)',// 标题色
textColor:'rgba(0, 0, 0, 0.65)',// 主文本色
disabledColor:'rgba(0, 0, 0, 0.25)',// 失效色
borderRadiusBase:'2px',// 组件/浮层圆角
borderColorBase:'#d9d9d9',// 边框色
// 更多请查看ant官方文档
},
// 默认全局组件大小，可选值"< small | middle | large>"，默认 'middle'
globalComponentSize: 'middle',
// 是否开启灰色模式
isGrayscale: false,
// 是否开启色弱模式 （不可和灰色模式一起使用）
isInvert: false,
// 是否开启水印
isWartermark: false,
// 水印文案
wartermarkText: '隆感科技',
// 默认顶栏导航背景颜色
topBar: '#ffffff',
// 默认顶栏导航字体颜色
topBarColor: '#606266',
/**
* 布局切换
*/
// 默认，简单，横向，分栏 ，分割菜单
// 布局切换：可选值"<defaults|classic|transverse|columns|separate>"，默认 defaults
layout: 'classic',
// 菜单层级 0为不限制，默认为0
//仅在defaults|classic|transverse模式下生效
layoutLevel:0,
/**
* 菜单设置
*/
// 默认菜单主题:可选值"<light|dark>"，默认 light。
menuTheme: 'light',
// * 分栏设置
// */
// 默认菜单主题:可选值"<light|dark>"，默认 light。
columnsMenuTheme: 'light',
/**
/**
* 界面显示
*/
// 内容区域样式:可选值"<card|none>"，默认 card。
bodyTheme:'card',
// 内容区域样式过滤路由（设置在指定页面不进行card，仅在card下生效）
// 传入路由name
bodyRoute:[],
// 路由块标识:
//仅在bodyTheme为card下生效
bodyRouteItem:true,
// 是否开启侧边栏 Logo
isShowLogo: true,
// Logo类型 imge/title
LogoType:'title',
// Logo样式
LogoStyle:{
// color:'#fff',
},
// Logo地址或标题
Logoname:'隆感科技研发平台',
// 是否开启 Breadcrumb，强制经典、横向布局不显示
isBreadcrumb: true,
// 是否开启 Tagsview
isTagsview: false,
}
# pinia
一、在stores创建文件
import { defineStore } from 'pinia';
export const useSystem = defineStore('system', {
state: () => ({
// 菜单信息
menus: [],
// 用户信息
user:{}
}),
actions: {
//赋值方法
setRoutesList(data) {
this.menus = data;
},
setUserList(data) {
this.user = data;
},
},
})
二、在页面中使用
<script setup >
import { storeToRefs } from 'pinia';
import { useSystem } from '/src/stores/themeConfig';
const storesSystem = useSystem();
const {menus} = storeToRefs(storesSystem);
console.log(menus.value);
</script>
三、在js文件中使用
import pinia from '../stores/index.js'
import { storeToRefs } from 'pinia';
import {useSystem} from '../stores/system.js'
const storesSystem = useSystem(pinia);
const { menus } = storeToRefs(storesSystem);
console.log(menus.value);
# hooks
一、在模块目录下新建hooks/index.js
/**
* 用户管理-hooks
*/
import { nextTick, ref } from 'vue';
import { branchList, positionList } from '../api/index.js';
// 部门列表
const branchSelect = ref([]);
//ref定义在函数外则可以共享变量，如不需要则将变量定义在函数内部
// 角色（职位）列表
const positionSelect = ref([]);
export function useState() {
/**
* 获取部门列表
*/
const getBranchList = async () => {
branchList({}).then(async (res) => {
branchSelect.value = res.data;
});
};
/**
* 获取角色（职位）列表
*/
const getPositionList = async () => {
positionList({}).then(async (res) => {
positionSelect.value = res.data;
});
};
return {
positionSelect,
branchSelect,
getBranchList,
getPositionList,
};
}
二、在页面中使用
<template>
<lg-form-modal close ref="ruleForms" v-model="data.form" @change="change">
<lg-form-item :span="24" title="职位" dataIndex="roleIds" :rules="[['required', '请选择职位']]">
<lgSelect v-model="data.form.roleIds" label="name" value="id" placeholder="请选择职位" :options="positionSelect"></lgSelect>
</lg-form-item>
<lg-form-item :span="24" title="部门" dataIndex="deptId">
<lg-cascader v-model="data.form.deptId" label="name" value="id" :options="branchSelect"></lg-cascader>
</lg-form-item>
</lg-form-modal>
<span v-if="$slots.add" @click="openAdd()" style="padding-top: 10px; display: inline; width: fit-content">
<slot name="add"></slot>
</span>
</span>
</template>
<script setup>
import { lgFormItem, lgFormModal,lgSelect,lgCascader } from 'lg-ui';
import { ref, reactive } from 'vue';
import { useState } from '../hooks/index.js';
const { branchSelect, positionSelect,getBranchList,getPositionList } = useState();
const ruleForms = ref(null);
getBranchList()
getPositionList()
</script>
← 常见问题