/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
noCache: true if set true, the page will no be cached(default is false)
affix: true if set true, the tag will affix in the tags-view
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
-------------------------
清理roleID不在的 role和menu关联信息
SELECT * from sys_role_menu where id in (SELECT count(*) FROM `sys_role_menu` join sys_menu USING(menu_id))
select * from sys_role_menu where id not in (SELECT sys_role_menu.id FROM `sys_role_menu` join sys_role USING(role_id))
DELETE from sys_role_menu where role_id = 3
-----------------------------
和字典表连接查取信息
SELECT
equipment.*,d1.content typeDict,d2.content locationDict
FROM
equipment
LEFT JOIN dict d1 ON type = d1.dict_id
LEFT JOIN dict d2 ON location = d2.dict_id
-------------------
java.util.Date date = new Date();//获得系统时间.
String nowTime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);//将时间格式转换成符合Timestamp要求的格式.
Timestamp goodsC_date = Timestamp.valueOf(nowTime);//把时间转换 carService.save(car);
car.setAddTime(new Date());
--------------------------
树形结构直接把父节点名字查询出来
select m.*,(select p.name from sys_menu p where p.menu_id = m.parent_id) as parentName
from sys_menu m
---------------------------
------------------------
computed: {
...mapGetters([
'name',
'avatar',
'roles'
])
},
--------------------
props: {
user: {
type: Object,
default: () => {
return {
name: '',
email: ''
}
}
}
},
------------------
路由传参
<router-link :to="'/bulletin/detail/'+scope.row.id">
const id = this.$route.params && this.$route.params.id;
------------------------
computed: {
contentShortLength() {
return this.postForm.content_short.length
},
lang() {
return this.$store.getters.language
},
------------------
export function getRoleIds(roleId) {
return request({
url: '/sys/user/getRoleIds/' + roleId,
method: 'get',
})
}
export function setRoleIds(userId, roleIds) {
return request({
url: '/sys/user/setRoleIds',
method: 'post',
data: qs.stringify(
{
userId: userId,
roleIds: roleIds
},
{indices: false})
})
}
--------------
<el-button size="mini" icon="el-icon-edit" v-show="scope.row.fixerId===$store.getters.user.userId" @click="showDone(scope)">已修完</el-button>
------------------------
回调函数用法
<el-select @change="selectChanged" v-model="devType" size=small>
<el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select>
selectChanged(value) {
console.log(value)
}
————————————————
版权声明：本文为CSDN博主「走_开」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/believet93/article/details/99824140
------------------------------
<el-form-item label="用户类型" prop="type">
<el-select v-model="dialogData.type" placeholder="用户类型"
style="width: 90px">
<el-option v-for="item in dicts.userType" :key="item.dictId"
:label="item.content" :value="item.dictId"/>
</el-select>
</el-form-item>
--------------------------
setMenuAndPerm({commit, state}) {
store.dispatch('permission/conductMenuTree', menuList);
-------------------------------------------------------
布尔数据是的get 是 isName() set是setName()形式
--------------------------------------
接收用 @RequestBody SysMenuEntity 接收,
发送用json发送,也保持内部类的格式
内部类
查询直接查询,查询出来的数据会直接,好像不这样定义也能映射成功
<resultMap type="com.learn.entity.SysMenuEntity" id="menuMap">
<result property="menuId" column="menu_id"/>
<result property="pId" column="parent_id"/>
<result property="name" column="name"/>
<result property="component" column="component"/>
<result property="path" column="path"/>
<result property="perms" column="perms"/>
<result property="type" column="type"/>
<result property="hidden" column="hidden"/>
<result property="alwaysShow" column="always_show"/>
<result property="redirect" column="redirect"/>
<result property="orderNum" column="order_num"/>
<collection property="meta" ofType="com.learn.entity.SysMenuEntity$Meta">
<result property="title" column="title"/>
<result property="icon" column="icon"/>
<result property="noCache" column="no_cache"/>
<result property="affix" column="affix"/>
<result property="breadcrumb" column="breadcrumb"/>
<result property="activeMenu" column="active_menu"/>
</collection>
</resultMap>
-------------------------------
树
单选 有
多选 有
下拉框
单选 没有
多选 没有
boolean
单值 有
双值 有
----------------------------
调用methods 里的方法 this.$options.methods.loadData();
------------------------------------
注意引用传递 和 值传递, 对引用传递直接赋值是改变地址,要对引用传递遍历赋值.改变地址指向地址的东西
export function copyValues(from, to) {
Object.keys(from).forEach(key => {
if (from[key] && typeof from[key] === 'object')
copyValues(from[key], to[key]);
else
from[key] = to[key];
})
}
-------------------------
this.dialogVisible = true;
设置这一句后就会开始渲染前端.
---------------------
import {getMenu} from "../../api/menu"; //导入函数
导入时可以用@是因为定义了@是根目录
--------------------------
const roles = store.getters && store.getters.roles
-------------------
Vue.set(this.tableData,this.indexWaitForUpdate,this.dialogData);
----------------------------
数组拼接 data = [...data, ...temp]
---------------------------
vue dom语句里for是()
---------------------
前端设置代理,写上代理地址,这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到代理地址
代理地址写后端的地址,然后发送请求的地址写前端的地址. 这样就会代理请求后端.
https://cli.vuejs.org/zh/config/#devserver-proxy
------------------
弹出from.
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
<el-form-item :label="$t('table.type')" prop="type">
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
</el-form-item>
<el-form-item :label="$t('table.title')" prop="title">
<el-input v-model="temp.title" />
</el-form-item>
<el-form-item :label="$t('table.status')">
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.importance')">
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
</el-form-item>
<el-form-item :label="$t('table.remark')">
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
{{ $t('table.cancel') }}
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
{{ $t('table.confirm') }}
</el-button>
</div>
</el-dialog>
------------------
用数组访问对象的属性.
res[i].component = () => components[res[i].component];
if(comp&&comp!==null) 一样 if(comp)
----------------
Vue-$emit的用法
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；
----
methods:{
this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
}
<train-city @showCityName="updateCity" :sendData="toCity"></train-city>
---------------------
// 根据权限id过滤出可以访问的菜单,自动获取所有菜单,输出的是树.
export function filterAsyncRoutes(menuList) {
// if(routes.length===0){
// getMenu().then(response=>{
// const {data} = response;
// state.routes=data;
// })
// }
// const res = [];
// const routes = state.routes;
// //根据 权限ids authIds 从 state.routes里过滤出来id一样的,也就是有权限的. 都是排序好的.
// let l = 0;
// let r = 0;
// while(authIds.length<=l||routes.length<=r){
// if(res[l]==routes[r].id){
// res.push(routes[i]);
// l++;
// r++;
// }else if(authIds[l]>=routes[r].id){
// r++
// } else if(authIds[l]<=routes[r].id){
// l++
// }
// }
let tree = makeTree(menuList);
state.authedRoutes = tree;
router.addRoutes(tree);
resetRouter();
}
------------------
if (state.id !== '') {
getInfo(state.id === '' ? -1 : state.id).then(response => {
const {data} = response
if (!data) {
reject('Verification failed, please Login again.')
}
const {roles} = data;
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
})
}
---------------------------------
优化路由显示
generateArr(routes) {
let data = []
routes.forEach(route => {
data.push(route)
if (route.children) {
const temp = this.generateArr(route.children)
if (temp.length > 0) {
data = [...data, ...temp]
}
}
})
return data
},
// Reshape the routes structure so that it looks the same as the sidebar
generateRoutes(routes, basePath = '/') {
const res = []
for (let route of routes) {
// skip some route
if (route.hidden) {
continue
}
const onlyOneShowingChild = this.onlyOneShowingChild(route.children, route)
if (route.children && onlyOneShowingChild && !route.alwaysShow) {
route = onlyOneShowingChild
}
const data = {
path: path.resolve(basePath, route.path),
title: route.meta && route.meta.title
}
// recursive child routes
if (route.children) {
data.children = this.generateRoutes(route.children, data.path)
}
res.push(data)
}
return res
},
generateTree(routes, basePath = '/', checkedKeys) {
const res = []
for (const route of routes) {
const routePath = path.resolve(basePath, route.path)
// recursive child routes
if (route.children) {
route.children = this.generateTree(route.children, routePath, checkedKeys)
}
if (checkedKeys.includes(routePath) || (route.children && route.children.length >= 1)) {
res.push(route)
}
}
return res
},
async confirmRole() {
const isEdit = this.dialogType === 'edit'
const checkedKeys = this.$refs.tree.getCheckedKeys()
this.role.routes = this.generateTree(deepClone(this.serviceRoutes), '/', checkedKeys)
if (isEdit) {
await updateRole(this.role.key, this.role)
for (let index = 0; index < this.rolesList.length; index++) {
if (this.rolesList[index].key === this.role.key) {
this.rolesList.splice(index, 1, Object.assign({}, this.role))
break
}
}
} else {
const {data} = await addRole(this.role)
this.role.key = data.key
this.rolesList.push(this.role)
}
const {description, key, name} = this.role
this.dialogVisible = false
this.$notify({
title: 'Success',
dangerouslyUseHTMLString: true,
message: `
<div>Role Key: ${key}</div>
<div>Role Name: ${name}</div>
<div>Description: ${description}</div>
`,
type: 'success'
})
},
// reference: src/view/layout/components/Sidebar/SidebarItem.vue
onlyOneShowingChild(children = [], parent) {
let onlyOneChild = null
const showingChildren = children.filter(item => !item.hidden)
// When there is only one child route, the child route is displayed by default
if (showingChildren.length === 1) {
onlyOneChild = showingChildren[0]
onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
return onlyOneChild
}
// Show parent if there are no child route to display
if (showingChildren.length === 0) {
onlyOneChild = {...parent, path: '', noShowingChildren: true}
return onlyOneChild
}
return false
}
-----------------------------------
评论区