This commit is contained in:
@@ -59,6 +59,83 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
&--name {
|
||||
position: absolute;
|
||||
left: 32px + @padding-sm * 2;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
&--dropdown {
|
||||
width: 200px;
|
||||
|
||||
transition: @animation-duration-base;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
|
||||
opacity: 0;
|
||||
.ant-dropdown-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
width: 200px;
|
||||
.user-container-inner {
|
||||
background-color: @white;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
.user {
|
||||
&--name {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.drop {
|
||||
.user {
|
||||
&--dropdown {
|
||||
transform: scaleY(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
@@ -73,7 +150,7 @@
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs-bar {
|
||||
z-index: 6;
|
||||
z-index: 5;
|
||||
|
||||
margin-bottom: 0;
|
||||
|
||||
@@ -176,7 +253,7 @@
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 5;
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
@@ -188,7 +265,9 @@
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 20px;
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
@@ -339,6 +418,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
@@ -389,7 +471,7 @@
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
|
||||
@@ -77,12 +77,22 @@ for (let key in urls) {
|
||||
.then(({ data }) => {
|
||||
reslove(data)
|
||||
})
|
||||
.catch(err => {
|
||||
if (process.env.VUE_APP_NODE_ENV === 'development') {
|
||||
alert('发生错误,请联系管理员')
|
||||
} else {
|
||||
reject(err, urls[key])
|
||||
}
|
||||
.catch(({ response: { data } }) => {
|
||||
const { code, message } = data
|
||||
app.$notification.error({
|
||||
duration: 0,
|
||||
message: code,
|
||||
description: message,
|
||||
})
|
||||
|
||||
// if (process.env.VUE_APP_NODE_ENV === 'development') {
|
||||
// app.$notification.open({
|
||||
// message: '错误',
|
||||
// description: '发生错误,请联系管理员',
|
||||
// });
|
||||
// } else {
|
||||
// reject(err, urls[key])
|
||||
// }
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@ const doLogin = (args) => {
|
||||
|
||||
const doLogout = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
api.logout().then(({ result: { success, message } }) => {
|
||||
api.logout().then(({ success, message }) => {
|
||||
if (success) {
|
||||
removeGlobal()
|
||||
token.value = ''
|
||||
|
||||
@@ -37,9 +37,9 @@
|
||||
*
|
||||
*/
|
||||
|
||||
const authByArray = (auth, permissions) => {
|
||||
import app from '@/main'
|
||||
|
||||
let result = true
|
||||
const authByArray = (auth, permissions) => {
|
||||
|
||||
const flags = []
|
||||
|
||||
@@ -57,8 +57,25 @@ const authByArray = (auth, permissions) => {
|
||||
}
|
||||
})
|
||||
|
||||
flags.forEach(p => {
|
||||
result = p[1] === '&&' ? result && p[0] : result || p[0]
|
||||
let result
|
||||
|
||||
flags.forEach((p, i) => {
|
||||
if (p[1] === '&&') {
|
||||
if (i === 0) {
|
||||
result = true
|
||||
}
|
||||
if (result) {
|
||||
result = p[0]
|
||||
}
|
||||
} else {
|
||||
if (i === 0) {
|
||||
result = false
|
||||
}
|
||||
if (!result) {
|
||||
result = p[0]
|
||||
}
|
||||
}
|
||||
//result = p[1] === '&&' ? result && p[0] : result || p[0]
|
||||
})
|
||||
|
||||
return result
|
||||
@@ -71,10 +88,10 @@ const authByJson = (auth, permissions) => {
|
||||
const flags = []
|
||||
|
||||
const deepName = (arr, key) => {
|
||||
arr.forEach(p => {
|
||||
arr.forEach((p, i) => {
|
||||
switch (p.constructor) {
|
||||
case String:
|
||||
p = `${key}:${p}`
|
||||
arr[i] = `${key}:${p}`
|
||||
break
|
||||
case Array:
|
||||
p = deepName(p, key)
|
||||
@@ -84,6 +101,7 @@ const authByJson = (auth, permissions) => {
|
||||
break
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
|
||||
for (let key in auth) {
|
||||
@@ -106,6 +124,41 @@ const authByJson = (auth, permissions) => {
|
||||
|
||||
}
|
||||
|
||||
export const auth = (auth) => {
|
||||
|
||||
const { info } = app.global
|
||||
const permissions = info.permissions
|
||||
|
||||
if (!info) {
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 超级管理员
|
||||
*/
|
||||
if (info.adminType === 1) {
|
||||
return true
|
||||
}
|
||||
|
||||
let flag = false
|
||||
|
||||
if (auth) {
|
||||
switch (auth.constructor) {
|
||||
case String:
|
||||
flag = permissions.indexOf(auth) > -1
|
||||
break
|
||||
case Array:
|
||||
flag = authByArray(auth, permissions)
|
||||
break
|
||||
case Object:
|
||||
flag = authByJson(auth, permissions)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return flag
|
||||
}
|
||||
|
||||
export default {
|
||||
functional: true,
|
||||
props: {
|
||||
@@ -125,37 +178,9 @@ export default {
|
||||
|
||||
render(h, context) {
|
||||
const { props, scopedSlots } = context
|
||||
const { info } = context.parent.$root.global
|
||||
const permissions = info.permissions
|
||||
const auth = props.auth
|
||||
const authExclude = props.authExclude
|
||||
|
||||
if (!info) {
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 超级管理员
|
||||
*/
|
||||
if (info.adminType === 1) {
|
||||
return scopedSlots.default()
|
||||
}
|
||||
|
||||
let flag = false
|
||||
|
||||
if (auth) {
|
||||
switch (auth.constructor) {
|
||||
case String:
|
||||
flag = permissions.indexOf(auth) > -1
|
||||
break
|
||||
case Array:
|
||||
flag = authByArray(auth, permissions)
|
||||
break
|
||||
case Object:
|
||||
flag = authByJson(auth, permissions)
|
||||
break
|
||||
}
|
||||
}
|
||||
let flag = auth(props.auth)
|
||||
|
||||
if (flag) {
|
||||
return scopedSlots.default()
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { template } from "lodash";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
pageNo: {
|
||||
@@ -33,6 +35,11 @@ export default {
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `总共${total}条数据`
|
||||
},
|
||||
|
||||
sorter: {
|
||||
sortField: '',
|
||||
sortOrder: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -57,7 +64,8 @@ export default {
|
||||
|
||||
this.loadData({
|
||||
pageNo: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize
|
||||
pageSize: this.pagination.pageSize,
|
||||
...this.sorter
|
||||
}).then((res) => {
|
||||
this.data = res.rows
|
||||
this.pagination.total = res.totalRows
|
||||
@@ -75,6 +83,7 @@ export default {
|
||||
|
||||
onTableChange(pagination, filters, sorter) {
|
||||
this.pagination = pagination
|
||||
this.sorter = sorter
|
||||
this.onLoadData()
|
||||
}
|
||||
},
|
||||
@@ -95,11 +104,17 @@ export default {
|
||||
}
|
||||
|
||||
return (
|
||||
<a-table class="yo-table" {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
|
||||
{Object.keys(this.$slots).map((name) => (
|
||||
<template slot={name}>{this.$slots[name]}</template>
|
||||
))}
|
||||
</a-table>
|
||||
<section>
|
||||
<a-alert type="error" closable>
|
||||
<template slot="message">后端没有排序参数</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-table class="yo-table" {...{ props, on, scopedSlots: { ...this.$scopedSlots } }}>
|
||||
{Object.keys(this.$slots).map((name) => (
|
||||
<template slot={name}>{this.$slots[name]}</template>
|
||||
))}
|
||||
</a-table>
|
||||
</section>
|
||||
)
|
||||
},
|
||||
}
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
</swiper>
|
||||
</a-layout-sider>
|
||||
<a-layout-content>
|
||||
{this.$scopedSlots.default()}
|
||||
{this.$scopedSlots.default ? this.$scopedSlots.default() : null}
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
)
|
||||
|
||||
@@ -39,6 +39,9 @@ Vue.prototype.$api = api
|
||||
import _ from 'lodash'
|
||||
Vue.prototype.$_ = _
|
||||
|
||||
import { auth } from './components/authorized'
|
||||
Vue.prototype.$auth = auth
|
||||
|
||||
/**
|
||||
* 注册全局组件
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="新增应用"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口
|
||||
*/
|
||||
onOpen() {
|
||||
this.visible = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api.sysAppAdd(this.$refs['form-body'].form).then(({ success, message }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:confirmLoading="confirmLoading"
|
||||
:visible="visible"
|
||||
@cancel="onCancel"
|
||||
@ok="onOk"
|
||||
class="yo-modal-form"
|
||||
title="编辑应用"
|
||||
>
|
||||
<FormBody ref="form-body" />
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
import FormBody from './form';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormBody,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
|
||||
confirmLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 从外部调用打开本窗口,并填充外部传入的数据
|
||||
*/
|
||||
onOpen(record) {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs['form-body'].onFillData(record);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 点击保存时的操作
|
||||
*/
|
||||
onOk() {
|
||||
this.$refs['form-body'].onValidate((valid) => {
|
||||
if (valid) {
|
||||
this.confirmLoading = true;
|
||||
this.$api.sysAppEdit(this.$refs['form-body'].form).then(({ success, message }) => {
|
||||
this.confirmLoading = false;
|
||||
if (success) {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel();
|
||||
this.$emit('ok');
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 关闭窗口时的操作
|
||||
*/
|
||||
onCancel() {
|
||||
this.$refs['form-body'].onResetFields();
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
||||
<div class="yo-form-group">
|
||||
<a-form-model-item label="机构名称" prop="name">
|
||||
<a-input placeholder="请输入机构名称" v-model="form.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="唯一编码" prop="code">
|
||||
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="排序" prop="sort">
|
||||
<a-input-number
|
||||
:max="1000"
|
||||
:min="0"
|
||||
class="w-100-p"
|
||||
placeholder="请输入排序"
|
||||
v-model="form.sort"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="备注">
|
||||
<a-input placeholder="请输入备注" v-model="form.remark" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
active: 'N',
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入机构名称' }],
|
||||
code: [{ required: true, message: '请输入唯一编码' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
this.form = this.$_.cloneDeep(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,3 +1,172 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
|
||||
<container>
|
||||
<br />
|
||||
<a-card :bordered="false">
|
||||
<Auth auth="sysUser:page">
|
||||
<div class="yo-query-bar">
|
||||
<a-form-model :model="query" layout="inline">
|
||||
<a-form-model-item label="机构名称">
|
||||
<a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<a-button-group>
|
||||
<a-button @click="onQuery" type="primary">查询</a-button>
|
||||
<a-button @click="onReset">重置</a-button>
|
||||
</a-button-group>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
|
||||
<yo-table :columns="columns" :load-data="loadData" ref="table">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<yo-table-actions>
|
||||
<Auth auth="sysOrg:edit">
|
||||
<a @click="onOpen('edit-form', record)">编辑</a>
|
||||
</Auth>
|
||||
<Auth auth="sysOrg:delete">
|
||||
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
</yo-table-actions>
|
||||
</span>
|
||||
</yo-table>
|
||||
</Auth>
|
||||
</a-card>
|
||||
</container>
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</yo-tree-layout>
|
||||
</template>
|
||||
<script>
|
||||
import YoTreeLayout from '@/components/yoTreeLayout';
|
||||
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
YoTreeLayout,
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
const flag = this.$auth({
|
||||
sysOrg: [['edit'], ['delete']],
|
||||
});
|
||||
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 树形选择界面必要的方法
|
||||
* 传给yo-table-layout以示意数据接口
|
||||
*/
|
||||
loadTreeData() {
|
||||
return this.$api.getOrgTree().then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
onSelect([id]) {
|
||||
this.query = {
|
||||
pid: id,
|
||||
};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return this.$api
|
||||
.getOrgPage({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
onReset() {
|
||||
Object.keys(this.query).forEach((p) => {
|
||||
if (p !== 'pid') {
|
||||
this.query[p] = undefined;
|
||||
}
|
||||
});
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 有编辑新增功能的必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record, this.query['pid']);
|
||||
},
|
||||
|
||||
onDelete(record) {
|
||||
this.$api.sysOrgDelete(record).then(({ success, message }) => {
|
||||
if (success) {
|
||||
this.$message.success('删除成功');
|
||||
this.onReloadData();
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -2,11 +2,14 @@
|
||||
<yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
|
||||
<container>
|
||||
<br />
|
||||
<a-alert banner closable type="error">
|
||||
<template slot="message">后端bug:生日不填写,在保存时会默认写入0001-01-01</template>
|
||||
<a-alert closable type="error">
|
||||
<template slot="message">
|
||||
后端bug:生日不填写,在保存时会默认写入0001-01-01
|
||||
<br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
|
||||
</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
<a-alert banner closable type="warning">
|
||||
<a-alert closable type="warning">
|
||||
<template slot="message">缺授权的两块功能</template>
|
||||
</a-alert>
|
||||
<br />
|
||||
@@ -82,7 +85,7 @@
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</Auth>
|
||||
<Auth :ath="{ sysUser: [['grantRole'], ['grantData']] }">
|
||||
<Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }">
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
授权
|
||||
@@ -156,14 +159,6 @@ export default {
|
||||
customRender: 'status',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '240px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: {
|
||||
customRender: 'action',
|
||||
},
|
||||
},
|
||||
],
|
||||
codes: [
|
||||
{
|
||||
@@ -180,6 +175,18 @@ export default {
|
||||
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
const flag = this.$auth({
|
||||
sysUser: ['edit', 'resetPwd', 'delete', 'grantRole', 'grantData'],
|
||||
});
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '240px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<search :menus="nav.menus" />
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<User />
|
||||
<a @click="$emit('reload')" class="header-action">
|
||||
<a-icon type="reload" />
|
||||
</a>
|
||||
@@ -30,9 +31,10 @@
|
||||
<div class="header-actions">
|
||||
<Logo />
|
||||
<Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
|
||||
<search :menus="nav.menus" />
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<search :menus="nav.menus" />
|
||||
<User />
|
||||
<a @click="$emit('reload')" class="header-action">
|
||||
<a-icon type="reload" />
|
||||
</a>
|
||||
@@ -52,6 +54,7 @@
|
||||
import Logo from '../logo';
|
||||
import Sider from '../sider';
|
||||
|
||||
import User from './user';
|
||||
import Search from './search';
|
||||
|
||||
export default {
|
||||
@@ -59,6 +62,7 @@ export default {
|
||||
Logo,
|
||||
Sider,
|
||||
|
||||
User,
|
||||
Search,
|
||||
},
|
||||
props: {
|
||||
@@ -72,45 +76,5 @@ export default {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
searchResult: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSearch(value) {
|
||||
const menus = this.$_.cloneDeep(this.nav.menus);
|
||||
|
||||
const search = (m) => {
|
||||
if (!value) return [];
|
||||
return m.filter((p) => {
|
||||
if (p.children) {
|
||||
p.children = search(p.children);
|
||||
} else {
|
||||
return p.meta.title.indexOf(value) > -1;
|
||||
}
|
||||
return p.children.length;
|
||||
});
|
||||
};
|
||||
|
||||
this.searchResult = search(menus);
|
||||
},
|
||||
|
||||
onSearchSelect(value, node) {
|
||||
this.searchText = '';
|
||||
this.onSearch(this.searchText);
|
||||
|
||||
const id = node.componentOptions.propsData.value;
|
||||
//const menu = this.nav.menus.
|
||||
|
||||
// this.openContentWindow({
|
||||
// key: menu.id,
|
||||
// title: menu.meta.title,
|
||||
// icon: menu.meta.icon,
|
||||
// path: menu.component,
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
let userOpenTimer, userCloseTimer
|
||||
|
||||
let initDropdownHeight
|
||||
|
||||
import { doLogout } from '@/common/login'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dropdownHeight: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
initDropdownHeight = this.$refs.dropdown.scrollHeight
|
||||
},
|
||||
methods: {
|
||||
onOpen(e) {
|
||||
clearTimeout(userCloseTimer)
|
||||
e.target.classList.add('open')
|
||||
userOpenTimer = setTimeout(() => {
|
||||
e.target.classList.add('drop')
|
||||
this.dropdownHeight = initDropdownHeight
|
||||
}, 300)
|
||||
},
|
||||
|
||||
onClose(e) {
|
||||
clearTimeout(userOpenTimer)
|
||||
e.target.classList.remove('drop')
|
||||
this.dropdownHeight = 0
|
||||
userCloseTimer = setTimeout(() => {
|
||||
e.target.classList.remove('open')
|
||||
}, 300)
|
||||
},
|
||||
|
||||
onLogout() {
|
||||
this.$confirm({
|
||||
title: '提示',
|
||||
content: '是否确定退出登录',
|
||||
onOk: () => {
|
||||
doLogout()
|
||||
},
|
||||
onCancel() {
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div onMouseenter={this.onOpen} onMouseleave={this.onClose} class="user-container" >
|
||||
<div class="user-container-inner">
|
||||
<div class="user--base">
|
||||
<a-avatar
|
||||
src={this.$root.global.info && this.$root.global.info.avatar}
|
||||
class="user--avatar"
|
||||
icon="user"
|
||||
/>
|
||||
{
|
||||
this.$root.global.info &&
|
||||
<span
|
||||
class="user--name"
|
||||
>{this.$root.global.info.nickName || this.$root.global.info.name}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="user--dropdown" ref="dropdown" style={{ height: `${this.dropdownHeight}px` }}>
|
||||
<ul class="ant-dropdown-menu ant-dropdown-menu-vertical">
|
||||
<li class="ant-dropdown-menu-item-divider"></li>
|
||||
<li class="ant-dropdown-menu-item" onClick={this.onLogout}>
|
||||
<a-icon type="logout" />
|
||||
退出登录
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user