This commit is contained in:
ky_sunl
2021-04-19 09:41:33 +00:00
parent ccb20d51ae
commit a18b6fe920
14 changed files with 668 additions and 108 deletions

View File

@@ -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 {

View File

@@ -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])
// }
})
})
}

View File

@@ -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 = ''

View File

@@ -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()

View File

@@ -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>
)
},
}

View File

@@ -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>
)

View File

@@ -39,6 +39,9 @@ Vue.prototype.$api = api
import _ from 'lodash'
Vue.prototype.$_ = _
import { auth } from './components/authorized'
Vue.prototype.$auth = auth
/**
* 注册全局组件
*/

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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: {

View File

@@ -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>

View File

@@ -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 >
)
}
}