ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of http://118.178.224.202:3000/ewide/ewide_core

Browse Source
This commit is contained in:
Ky_Gyt
2021-05-06 10:53:10 +08:00
parent 9146a96130 60088ea4b7
commit a1e5b2f238
55 changed files with 1213 additions and 1341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/package.json
View File

@@ -21,6 +21,7 @@
"swiper": "^6.5.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-color": "^2.8.1",
"vue-highlight.js": "^3.1.0",
"vue-router": "^3.5.1"
},

78
Web/public/doc-code/seed/addForm.vue
View File

@@ -1,78 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="新增XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testAddApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

79
Web/public/doc-code/seed/editForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="编辑XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testEditApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

38
Web/public/doc-code/seed/form.vue
View File

@@ -1,27 +1,41 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group">
<!-- 表单控件 -->
<!-- ... -->
</div>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
data() {
return {
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {},
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/** ... */
/* ... */
};
},
@@ -30,12 +44,13 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
@@ -50,7 +65,7 @@ export default {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/** ... */
/* ... */
reslove(record);
} else {
@@ -77,7 +92,7 @@ export default {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/** ... */
/* ... */
}, 300);
},
@@ -85,16 +100,15 @@ export default {
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
/** ...END */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/** ... */
/* ... */
},
};
</script>

81
Web/public/doc-code/seed/query.vue
View File

@@ -1,26 +1,29 @@
<template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container>
<br />
<a-card :bordered="false">
<Auth auth="authCode:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="onResetQuery">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
<a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
@@ -33,35 +36,52 @@
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'testPageApi',
delete: 'testDeleteApi',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
AddForm,
EditForm,
FormBody,
},
data() {
return {
api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
@@ -69,10 +89,11 @@ export default {
};
},
created() {
/** 按需加载字典编码 */
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -132,10 +153,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -156,7 +179,11 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
},
/**

125
Web/public/doc-code/seed/treeLayout.vue
View File

@@ -1,4 +1,10 @@
<template>
<!--
普通树查询表格
v 1.2
2021-04-30
Lufthafen
-->
<yo-tree-layout
:load-data="loadTreeData"
@select="onSelect"
@@ -7,72 +13,90 @@
>
<container>
<a-card :bordered="false">
<Auth auth="authCode:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<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">
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
</yo-table-actions>
</span>
</yo-table>
</Auth>
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
</container>
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</yo-tree-layout>
</template>
<script>
/* 需要引用YoTreeLayout组件 */
import YoTreeLayout from '@/components/yoTreeLayout';
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
tree: 'testTreeApi',
page: 'testPageApi',
delete: 'testDeleteApi',
tree: 'testTreeApi...',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
YoTreeLayout,
AddForm,
EditForm,
FormBody,
},
data() {
return {
api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
},
};
},
@@ -80,7 +104,7 @@ export default {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -107,7 +131,7 @@ export default {
* 选择树节点事件
*/
onSelect([id]) {
/* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
this.query = {
pid: id,
};
@@ -168,10 +192,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -192,7 +218,12 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record, this.query['pid']);
this.$refs[formName].onOpen({
record,
pid: this.query.pid,
/* 按需添加其他参数 */
/* ... */
});
},
/**

5
Web/src/assets/style/frame/dark.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background;
@nav-box-shadow-color: fade(@black, 25%);
@nav-scrollbar-background: fade(@white, 50%);
@nav-app-color: fade(@white, 35%);
@logo-color: @white;
@logo-box-shadow: none;
@app-selector-color: @white;
@app-selector-border-color: fade(@white, 10%);
@app-selector-background-color: fade(@white, 30%);
@app-selector-box-shadow-color: fade(@white, 15%);
@header-action-color: fade(@white, 60%);
@header-action-hover-color: @white;
@header-action-hover-background: fade(@white, 20%);

5
Web/src/assets/style/frame/light.less
View File

@@ -3,12 +3,9 @@
.main(@nav-background: @white;
@nav-box-shadow-color: fade(@black, 5%);
@nav-scrollbar-background: fade(@black, 30%);
@nav-app-color: fade(@black, 35%);
@logo-color: @black;
@logo-box-shadow: inset -1px -1px 1px @border-color-split;
@app-selector-color: @primary-6;
@app-selector-border-color: @primary-3;
@app-selector-background-color: @primary-1;
@app-selector-box-shadow-color: @primary-1;
@header-action-color: fade(@black, 35%);
@header-action-hover-color: @icon-color-hover;
@header-action-hover-background: fade(@black, 5%);

2
Web/src/assets/style/lib/container.less
View File

@@ -1,5 +1,5 @@
@import (reference) '~@/assets/style/extend.less';
@container-width: 1200px;
@container-width: 1400px;
.container {
width: @container-width;
margin: 0 auto;

28
Web/src/assets/style/lib/form.less
View File

@@ -207,22 +207,34 @@
}
}
.yo-drawer-form {
.ant-drawer-wrapper-body {
display: flex;
flex-direction: column;
}
.ant-drawer-header {
position: absolute;
top: 0;
left: 0;
z-index: 7;
width: 100%;
flex: 0 0 auto;
}
.ant-drawer-body {
padding: @padding-lg + 56px @padding-lg;
position: relative;
flex: 1 1 100%;
padding: 0;
}
.yo-drawer-form--body {
position: absolute;
top: 0;
bottom: @border-width-base + 20px + @padding-md * 2;
overflow: auto;
width: 100%;
padding: @padding-lg;
}
.ant-drawer-footer {
position: absolute;
left: 0;
bottom: 0;
z-index: 7;
width: 100%;
padding: 10px @padding-md;

1
Web/src/assets/style/lib/visibility.less
View File

@@ -1,3 +1,4 @@
@import (reference) '~@/assets/style/extend.less';
.hide {
visibility: hidden !important;
}

3
Web/src/assets/style/lib/width-height.css
View File

@@ -1,3 +0,0 @@
.w-100-p {
width: 100%;
}

1
Web/src/assets/style/lib/width-height.less
View File

@@ -1,3 +1,4 @@
@import (reference) '~@/assets/style/extend.less';
.w-100-p {
width: 100%;
}

85
Web/src/assets/style/main.less
View File

@@ -4,12 +4,9 @@
.main(@nav-background: @layout-header-background,
@nav-box-shadow-color: fade(@black, 25%),
@nav-scrollbar-background: fade(@white, 30%),
@nav-app-color: fade(@white, 35%),
@logo-color: @white,
@logo-box-shadow: none,
@app-selector-color: @white,
@app-selector-border-color: fade(@white, 10%),
@app-selector-background-color: fade(@white, 30%),
@app-selector-box-shadow-color: fade(@white, 15%),
@header-action-color: fade(@white, 60%),
@header-action-hover-color: @white,
@header-action-hover-background: fade(@white, 20%),
@@ -251,6 +248,52 @@
border-right: 0;
}
}
.yo-nav {
padding-top: @padding-lg;
padding-bottom: @padding-lg;
&--row {
padding: 1px 0;
column-gap: @padding-md;
column-count: 3;
}
&--col {
break-inside: avoid;
}
&--sub-item {
}
&--item-group {
font-size: @font-size-base;
line-height: 1.5;
margin-bottom: @padding-xs;
padding-top: @padding-xs * 2;
color: fade(@black, 35%);
border: @border-width-base @border-style-base transparent;
}
&--item {
font-size: @font-size-base;
line-height: 1.5;
position: relative;
margin-bottom: @padding-xs;
padding: @padding-xs @padding-sm;
cursor: pointer;
transition: @animation-duration-fast;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
background-color: @white;
&:hover {
color: @white;
border-color: @primary-color;
background-color: @primary-color;
}
}
}
.yo-layout--left-menu,
.yo-layout--right-menu {
position: absolute;
@@ -345,15 +388,21 @@
position: relative;
z-index: 10;
display: flex;
flex: 1 1 100%;
flex-direction: column;
box-shadow: 2px 0 8px @nav-box-shadow-color;
&--app {
font-size: @font-size-sm;
margin-top: @padding-sm;
padding: 0 @padding-md;
color: @nav-app-color;
}
}
.swiper-container {
position: absolute;
top: (@layout-header-height / 2) + (@padding-xxs * 2);
top: 0;
left: 0;
bottom: 0;
@@ -385,28 +434,6 @@
}
}
}
.yo-apps-selector {
>span {
line-height: @layout-header-height / 2 - 2px;
display: block;
height: @layout-header-height / 2;
margin: @padding-xxs @padding-xs;
cursor: pointer;
transition: @animation-duration-slow box-shadow;
text-align: center;
color: @app-selector-color;
border: @border-width-base @border-style-base @app-selector-border-color;
border-radius: @border-radius-base;
background-color: @app-selector-background-color;
&:hover {
box-shadow: 0 0 15px @app-selector-box-shadow-color;
}
}
}
}
}
}

3
Web/src/common/login/index.js
View File

@@ -1,6 +1,6 @@
import { api } from '@/common/api'
import { token } from '@/common/token'
import { GLOBAL_INFO_KEY, ACTIVE_APP_KEY } from '@/common/storage'
import { GLOBAL_INFO_KEY } from '@/common/storage'
import { encryptByDES, decryptByDES } from '@/util/des'
import app from '@/main'
@@ -50,7 +50,6 @@ const doLogout = () => {
if (success) {
removeGlobal()
token.value = ''
window.localStorage.removeItem(ACTIVE_APP_KEY)
if (app.$route.path === '/') {
app.$router.replace('/login')
} else {

2
Web/src/common/storage/index.js
View File

@@ -1,11 +1,9 @@
const SESSION_KEY = '__SESSION'
const SETTING_KEY = '__SETTINGS'
const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
const ACTIVE_APP_KEY = '__ACTIVE_APP'
export {
SESSION_KEY,
SETTING_KEY,
GLOBAL_INFO_KEY,
ACTIVE_APP_KEY
}

148
Web/src/components/yoModalForm/index.js Normal file
View File

@@ -0,0 +1,148 @@
export default {
props: {
type: {
type: String,
default: 'modal',
validator: function (value) {
return ['modal', 'drawer'].indexOf(value) > -1
}
},
compareOnClose: {
type: Boolean,
default: true
},
action: {
type: Function
}
},
data() {
return {
visible: false,
confirmLoading: false,
form: {}
}
},
computed: {
body() {
return this.$slots.default && this.$slots.default[0].componentInstance
}
},
created() {
},
methods: {
renderModal(props) {
const _props = {
...props,
confirmLoading: this.confirmLoading
}
const _on = {
cancel: () => this.onClose(this.compareOnClose),
ok: () => this.onOk()
}
return (<a-modal {...{ props: _props, on: _on }} class="yo-modal-form">
{this.renderBody()}
</a-modal>)
},
renderDrawer(props) {
const _props = {
...props
}
const _on = {
close: () => this.onClose(this.compareOnClose),
ok: () => this.onOk()
}
return (<a-drawer {...{ props: _props, on: _on }} class="yo-drawer-form">
<div class="yo-drawer-form--body">
{this.renderBody()}
</div>
<div class="ant-drawer-footer">
<a-button onClick={_on.close}>取消</a-button>
<a-button loading={this.confirmLoading} onClick={_on.ok} type="primary">确定</a-button>
</div >
</a-drawer>)
},
renderBody() {
return this.$scopedSlots.default && this.$scopedSlots.default()
},
onOpen(data) {
this.visible = true
this.$nextTick(async () => {
if (!this.body) return
this.body.onInit && await this.body.onInit(data)
this.body.onFillData && this.body.onFillData(data)
this.form = this.$_.cloneDeep(this.body.form)
})
},
onClose(compare = false) {
const close = () => {
this.body
&& this.body.onResetFields
&& this.body.onResetFields()
this.visible = false
}
if (this.body) {
if (!this.$_.isEqual(this.form, this.body.form) && compare) {
this.$confirm({
title: '是否确认关闭',
content: '当前内容已更改，是否确认不保存并且关闭',
onOk: () => {
close()
}
})
} else {
close()
}
} else {
close()
}
},
onOk() {
this.body
&& this.body.onGetData
&& this.body.onGetData()
.then((data) => {
this.confirmLoading = true
this.action
&& this.action(data)
.then(({ success }) => {
if (success) {
this.$message.success('保存成功');
this.onClose();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false
})
}).catch(() => { })
}
},
render() {
const props = {
...this.$props,
...this.$attrs,
visible: this.visible
}
return this.type === 'modal' ? this.renderModal(props) : this.renderDrawer(props)
}
}

32
Web/src/components/yoTable/index.js
View File

@@ -151,6 +151,15 @@ export default {
})
return data
},
onQuery() {
this.$emit('query')
},
onResetQuery() {
this.$emit('resetQuery')
this.$emit('reset-query')
}
},
render() {
@@ -161,7 +170,7 @@ export default {
columns: this.columns.filter(p => !p.hidden),
bordered: true,
size: 'middle',
rowKey: record => record.id,
rowKey: record => record.id || Math.random().toString(16).slice(2),
scroll: { x: 'max-content' }
}
@@ -169,16 +178,33 @@ export default {
change: this.onTableChange,
...this.$listeners
}
const queryOn = {
'submit.native.prevent': () => { }
}
return (
<section>
<a-alert type="warning" closable>
<template slot="message">
后端没有排序参数
<br />
字段固定应该遵循左侧固定到最左,右侧固定到最右(此逻辑难以实现)
</template>
</a-alert>
<br />
{
this.$scopedSlots.query &&
<div class="yo-query-bar">
<a-form-model layout="inline" {...{ on: queryOn }}>
{this.$scopedSlots.query()}
<a-form-model-item>
<a-button-group>
<a-button onClick={this.onQuery} html-type="submit" type="primary">查询</a-button>
<a-button onClick={this.onResetQuery}>重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
}
<div class="yo-action-bar">
<div class="yo-action-bar--actions">
{this.$scopedSlots.operator && this.$scopedSlots.operator()}

2
Web/src/main.js
View File

@@ -78,6 +78,8 @@ import YoTable from './components/yoTable'
Vue.component('YoTable', YoTable)
import YoTableActions from './components/yoTableActions'
Vue.component('YoTableActions', YoTableActions)
import YoModalForm from './components/yoModalForm'
Vue.component('YoModalForm', YoModalForm)
import YoImage from './components/yoImage'
Vue.component('YoImage', YoImage)

6
Web/src/pages/home/index.less
View File

@@ -10,8 +10,10 @@
}
.home-header-content {
margin-left: @padding-lg;
span {
color: @primary-color;
h4 {
span {
color: @primary-color;
}
}
p {
margin: 0;

10
Web/src/pages/home/index.vue
View File

@@ -9,11 +9,15 @@
<yo-image :id="$root.global.info.avatar" :size="64" icon="user" type="avatar" />
</div>
<div class="home-header-content">
<h2>
<h4>
{{ $moment().format('A') }}好，
<span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
</h2>
<p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
</h4>
<p>
<span>上次IP：{{ $root.global.info.lastLoginIp }}</span>
<a-divider type="vertical" />
<span>上次登录时间：{{ $root.global.info.lastLoginTime }}</span>
</p>
</div>
</div>
</a-col>

78
Web/src/pages/system/_seed/addForm.vue
View File

@@ -1,78 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="新增XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testAddApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

79
Web/src/pages/system/_seed/editForm.vue
View File

@@ -1,79 +0,0 @@
<template>
<a-modal
:confirmLoading="confirmLoading"
:visible="visible"
@cancel="onCancel"
@ok="onOk"
class="yo-modal-form"
title="编辑XX"
>
<FormBody ref="form-body" />
</a-modal>
</template>
<script>
import FormBody from './form';
export default {
components: {
FormBody,
},
data() {
return {
visible: false,
confirmLoading: false,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.testEditApi(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

38
Web/src/pages/system/_seed/form.vue
View File

@@ -1,27 +1,41 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group">
<!-- 表单控件 -->
<!-- ... -->
</div>
</a-spin>
</a-form-model>
</template>
<script>
/* 表单内容默认值 */
const defaultForm = {
/* ... */
};
export default {
data() {
return {
/** 表单数据 */
form: {},
/** 验证格式 */
rules: {},
rules: {
/* ... */
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/** ... */
/* ... */
};
},
@@ -30,12 +44,13 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
@@ -50,7 +65,7 @@ export default {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/** ... */
/* ... */
reslove(record);
} else {
@@ -77,7 +92,7 @@ export default {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/** ... */
/* ... */
}, 300);
},
@@ -85,16 +100,15 @@ export default {
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit() {
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
/** ...END */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/** ... */
/* ... */
},
};
</script>

81
Web/src/pages/system/_seed/index.vue
View File

@@ -1,26 +1,29 @@
<template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container>
<br />
<a-card :bordered="false">
<Auth auth="authCode:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="onResetQuery">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增XX</a-button>
<a-button @click="onOpen('add-form')" icon="plus">新增...</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
@@ -33,35 +36,52 @@
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'testPageApi',
delete: 'testDeleteApi',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
AddForm,
EditForm,
FormBody,
},
data() {
return {
api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
@@ -69,10 +89,11 @@ export default {
};
},
created() {
/** 按需加载字典编码 */
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -132,10 +153,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -156,7 +179,11 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
},
/**

125
Web/src/pages/system/_seed/treeLayout.vue
View File

@@ -1,4 +1,10 @@
<template>
<!--
普通树查询表格
v 1.2
2021-04-30
Lufthafen
-->
<yo-tree-layout
:load-data="loadTreeData"
@select="onSelect"
@@ -7,72 +13,90 @@
>
<container>
<a-card :bordered="false">
<Auth auth="authCode:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<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">
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
</yo-table-actions>
</span>
</yo-table>
</Auth>
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="authCode:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
</Auth>
<Auth auth="authCode:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="authCode:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="authCode:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
</container>
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</yo-tree-layout>
</template>
<script>
/* 需要引用YoTreeLayout组件 */
import YoTreeLayout from '@/components/yoTreeLayout';
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
tree: 'testTreeApi',
page: 'testPageApi',
delete: 'testDeleteApi',
tree: 'testTreeApi...',
page: 'testPageApi...',
add: 'testAddApi',
edit: 'testEditApi',
delete: 'testDeleteApi...',
/* ... */
};
export default {
components: {
YoTreeLayout,
AddForm,
EditForm,
FormBody,
},
data() {
return {
api,
name: '...',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
code1: [],
code2: [],
},
};
},
@@ -80,7 +104,7 @@ export default {
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth(/** ... */);
const flag = this.$auth(/* ... */);
if (flag) {
this.columns.push({
title: '操作',
@@ -107,7 +131,7 @@ export default {
* 选择树节点事件
*/
onSelect([id]) {
/* 在选择事件中可以对右侧表格添加父节点id的查询条件 */
/** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
this.query = {
pid: id,
};
@@ -168,10 +192,12 @@ export default {
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'code1' }),
this.$api.sysDictTypeDropDownAwait({ code: 'code2' }),
/* ... */
])
.then(([code1, code2]) => {
this.codes.code1 = code1.data;
this.codes.code2 = code2.data;
/* ... */
});
},
@@ -192,7 +218,12 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record, this.query['pid']);
this.$refs[formName].onOpen({
record,
pid: this.query.pid,
/* 按需添加其他参数 */
/* ... */
});
},
/**

135
Web/src/pages/system/app/form.vue
View File

@@ -1,44 +1,119 @@
<template>
<!--
普通编辑窗体
v 1.2
2021-04-30
Lufthafen
-->
<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>
</div>
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<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="icon">
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
</a-input>
</a-form-model-item>
<a-form-model-item label="图标颜色" prop="color">
<chrome-picker v-model="form.color" />
</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>
</div>
</a-spin>
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
</a-form-model>
</template>
<script>
import YoIconSelector from '@/components/yoIconSelector';
import { Chrome } from 'vue-color';
/* 表单内容默认值 */
const defaultForm = {
/* ... */
color: '#ffffff',
active: false,
};
export default {
components: {
YoIconSelector,
ChromePicker: Chrome,
},
data() {
return {
/** 表单数据 */
form: {
active: false,
...defaultForm,
},
/** 验证格式 */
rules: {
/* ... */
name: [{ required: true, message: '请输入应用名称' }],
code: [{ required: true, message: '请输入唯一编码' }],
},
/** 加载异步数据状态 */
loading: false,
/** 其他成员属性 */
/* ... */
};
},
methods: {
/**
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
this.form = this.$_.cloneDeep(record);
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
...params.record,
/** 在此处添加其他默认数据转换 */
/* ... */
});
},
/**
* 必要方法
* 验证表单并获取表单数据
*/
onGetData() {
return new Promise((reslove, reject) => {
this.$refs.form.validate((valid) => {
if (valid) {
const record = this.$_.cloneDeep(this.form);
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
/* ... */
record.color = record.color.constructor === Object ? record.color.hex : record.color;
reslove(record);
} else {
reject();
}
});
});
},
/**
@@ -56,8 +131,28 @@ export default {
onResetFields() {
setTimeout(() => {
this.$refs.form.resetFields();
/** 在这里可以初始化当前组件中其他属性 */
/* ... */
}, 300);
},
/**
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/* ... */
this.loading = false;
},
/** 当前组件的其他方法 */
/* ... */
onOpenSelectIcon() {
this.$refs['icon-selector'].onOpen(this.form.icon);
},
},
};
</script>

183
Web/src/pages/system/app/index.vue
View File

@@ -1,30 +1,35 @@
<template>
<!--
普通查询表格
v 1.2
2021-04-30
Lufthafen
-->
<container>
<br />
<a-card :bordered="false">
<Auth auth="sysApp:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<a-form-model-item label="应用名称">
<a-input placeholder="请输入应用名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="() => { query = {}, onQuery() }">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysApp:page" slot="query">
<!-- 此处添加查询表单控件 -->
<!-- ... -->
<a-form-model-item label="应用名称">
<a-input placeholder="请输入应用名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysApp:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
</Auth>
<!-- 格式化字段内容 -->
<!-- ... -->
<span slot="active" slot-scope="text, record">
{{ text ? '是' : '否' }}
<Auth auth="sysApp:setAsDefault" v-if="!record.active">
@@ -40,7 +45,9 @@
</yo-table-actions>
</Auth>
</span>
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
<!-- 添加操作控件 -->
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysApp:edit">
@@ -51,27 +58,50 @@
<a>删除</a>
</a-popconfirm>
</Auth>
<!-- 可在此处添加其他操作控件 -->
<!-- ... -->
</yo-table-actions>
</span>
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<!-- 新增表单 -->
<yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
<form-body />
</yo-modal-form>
<!-- 编辑表单 -->
<yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
/* 在此管理整个页面需要的接口名称 */
const api = {
page: 'getAppPage',
add: 'sysAppAdd',
edit: 'sysAppEdit',
delete: 'sysAppDelete',
/* ... */
};
export default {
components: {
AddForm,
EditForm,
FormBody,
},
data() {
return {
api,
name: '应用',
/* 查询条件 */
query: {},
/* 表格字段 */
columns: [
{
title: '应用名称',
@@ -105,25 +135,22 @@ export default {
sorter: true,
},
],
codes: [
{
code: 'yes_or_no',
values: [],
},
{
code: 'common_status',
values: [],
},
],
/* 字典编码储存格式 */
codes: {
yesOrNo: [],
commonStatus: [],
},
};
},
created() {
/** 按需加载字典编码 */
this.onLoadCodes();
/** 根据权限添加操作列 */
const flag = this.$auth({
sysApp: [['edit'], ['delete']],
});
if (flag) {
this.columns.push({
title: '操作',
@@ -139,14 +166,12 @@ export default {
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return this.$api
.getAppPage({
...params,
...this.query,
})
.then((res) => {
return res.data;
});
return this.$api[api.page]({
...params,
...this.query,
}).then((res) => {
return res.data;
});
},
/**
@@ -157,6 +182,16 @@ export default {
this.$refs.table.onReloadData(true);
},
/**
* 有查询功能时的必要方法
* 重置查询条件
*/
onResetQuery() {
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
this.query = {};
this.onQuery();
},
/**
* 必要方法
* 重新列表数据
@@ -166,21 +201,30 @@ export default {
},
/**
* 加载字典数据时的必要方法
* 必要方法
* 加载字典数据
* 如果不需要获取相应的字典数据,此方法内容可空
*/
onLoadCodes() {
this.$api
.$queue([
this.$api.sysDictTypeDropDownAwait({ code: 'yes_or_no' }),
this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
/* ... */
])
.then(([yesOrNo, commonStatus]) => {
this.codes.find((p) => p.code === 'yes_or_no').values = yesOrNo.data;
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
.then(([code1, code2]) => {
this.codes.yesOrNo = code1.data;
this.codes.commonStatus = code2.data;
/* ... */
});
},
/**
* 必要方法
* 绑定数据字典值
*/
bindCodeValue(code, name) {
const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
const c = this.codes[name].find((p) => p.code == code);
if (c) {
return c.value;
}
@@ -188,19 +232,41 @@ export default {
},
/**
* 有编辑新增功能的必要方法
* 必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
/* 按需添加其他参数 */
/* ... */
});
},
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
onResult(success, successMessage) {
if (success) {
this.$message.success(successMessage);
this.onReloadData();
}
this.$refs.table.onLoaded();
},
/**
* 必要方法
* 删除时调用
*/
onDelete(record) {
this.$refs.table.onLoading();
this.$api[api.delete](record)
.then(({ success }) => {
this.onResult(success, '删除成功');
})
.finally(() => {
this.$refs.table.onLoaded();
});
},
onSetDefault(record) {
@@ -209,13 +275,6 @@ export default {
this.onResult(success, '设置成功');
});
},
onDelete(record) {
this.$refs.table.onLoading();
this.$api.sysAppDelete(record).then(({ success }) => {
this.onResult(success, '删除成功');
});
},
},
};
</script>

78
Web/src/pages/system/dict/addForm.vue
View File

@@ -1,78 +0,0 @@
<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,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen() {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypeAdd(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

79
Web/src/pages/system/dict/dictdata/addForm.vue
View File

@@ -1,79 +0,0 @@
<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,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口
*/
async onOpen(record, typeId) {
this.visible = true;
this.$nextTick(() => {
this.formBody.onInit();
this.formBody.onFillData(record, typeId);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictDataAdd(data)
.then(({ success }) => {
if (success) {
this.$message.success('新增成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

79
Web/src/pages/system/dict/dictdata/editForm.vue
View File

@@ -1,79 +0,0 @@
<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,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictDataEdit(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

30
Web/src/pages/system/dict/dictdata/form.vue
View File

@@ -21,14 +21,16 @@
</a-form-model>
</template>
<script>
const defaultForm = {
typeId: '',
sort: 100,
};
export default {
data() {
return {
/** 表单数据 */
form: {
typeId: '',
sort: 100,
},
form: {},
/** 验证格式 */
rules: {
value: [{ required: true, message: '请输入字典值' }],
@@ -48,17 +50,15 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record, typeId) {
if (typeId) {
this.form.typeId = typeId;
} else {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
/** 在此处添加默认数据转换 */
/** ... */
});
}
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...defaultForm,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
typeId: params.typeId,
});
},
/**

57
Web/src/pages/system/dict/dictdata/index.vue
View File

@@ -1,26 +1,21 @@
<template>
<a-card>
<Auth auth="sysDictData:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<a-form-model-item label="文本">
<a-input placeholder="请输入文本" v-model="query.value" />
</a-form-model-item>
<a-form-model-item label="字典值">
<a-input placeholder="请输入字典值" v-model="query.code" />
</a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="onResetQuery">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysDictData:page" slot="query">
<!-- 此处添加查询表单控件 -->
<a-form-model-item label="文本">
<a-input placeholder="请输入文本" v-model="query.value" />
</a-form-model-item>
<a-form-model-item label="字典值">
<a-input placeholder="请输入字典值" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictData:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
</Auth>
@@ -42,18 +37,21 @@
</span>
</yo-table>
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
<form-body />
</yo-modal-form>
</a-card>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
export default {
components: {
AddForm,
EditForm,
FormBody,
},
props: {
type: {
@@ -187,7 +185,10 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record, this.type.id);
this.$refs[formName].onOpen({
typeId: this.type.id,
record,
});
},
/**

79
Web/src/pages/system/dict/editForm.vue
View File

@@ -1,79 +0,0 @@
<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,
};
},
computed: {
formBody() {
return this.$refs['form-body'];
},
},
methods: {
/**
* 必要的方法
* 从外部调用打开本窗口,并填充外部传入的数据
*/
onOpen(record) {
this.visible = true;
this.$nextTick(async () => {
await this.formBody.onInit();
this.formBody.onFillData(record);
});
},
/**
* 必要的方法
* 点击保存时的操作
*/
onOk() {
this.formBody.onGetData().then((data) => {
this.confirmLoading = true;
this.$api
/** !!此处必须修改调用的接口方法 */
.sysDictTypeEdit(data)
.then(({ success }) => {
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
}
})
.finally(() => {
this.confirmLoading = false;
});
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

4
Web/src/pages/system/dict/form.vue
View File

@@ -47,10 +47,10 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
});

56
Web/src/pages/system/dict/index.vue
View File

@@ -2,27 +2,21 @@
<container>
<br />
<a-card :bordered="false">
<Auth auth="sysDictType:page">
<div class="yo-query-bar">
<a-form-model :model="query" layout="inline">
<!-- 此处添加查询表单控件 -->
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
<a-form-model-item>
<a-button-group>
<a-button @click="onQuery" type="primary">查询</a-button>
<a-button @click="onResetQuery">重置</a-button>
</a-button-group>
</a-form-model-item>
</a-form-model>
</div>
</Auth>
<yo-table :columns="columns" :load-data="loadData" ref="table">
<yo-table
:columns="columns"
:load-data="loadData"
@query="onQuery"
@resetQuery="onResetQuery"
ref="table"
>
<Auth auth="sysDictType:page" slot="query">
<a-form-model-item label="类型名称">
<a-input placeholder="请输入类型名称" v-model="query.name" />
</a-form-model-item>
<a-form-model-item label="唯一编码">
<a-input placeholder="请输入唯一编码" v-model="query.code" />
</a-form-model-item>
</Auth>
<Auth auth="sysDictType:add" slot="operator">
<a-button @click="onOpen('add-form')" icon="plus">新增字典类型</a-button>
</Auth>
@@ -48,21 +42,25 @@
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<yo-modal-form :action="$api.sysDictTypeAdd" @ok="onReloadData" ref="add-form" title="新增字典类型">
<form-body />
</yo-modal-form>
<yo-modal-form :action="$api.sysDictTypeEdit" @ok="onReloadData" ref="edit-form" title="编辑字典类型">
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import DictData from './dictdata';
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
export default {
components: {
DictData,
AddForm,
EditForm,
FormBody,
},
data() {
return {
@@ -197,7 +195,9 @@ export default {
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
this.$refs[formName].onOpen({
record,
});
},
/**

50
Web/src/pages/system/doc/highlight.js
View File

@@ -1,17 +1,23 @@
import { template } from "lodash"
export default {
props: {
code: {
type: String
},
copyTemplate: {
type: Boolean,
default: false
}
},
methods: {
onCopy() {
baseCopy(content) {
try {
const $textarea = document.createElement('textarea')
$textarea.style = 'opacity: 0;position: fixed;top: -10000;left: -10000'
document.body.append($textarea)
$textarea.value = this.code
$textarea.value = content
$textarea.select()
document.execCommand('copy')
$textarea.remove()
@@ -21,7 +27,24 @@ export default {
{
this.$message.error('复制失败')
}
}
},
onCopy() {
this.baseCopy(this.code)
},
onCopyTemplate() {
const code = '"' +
this.code
// 转义双引号 => \"
.replace(/"/g, '\\"')
// 转义$ => $$
.replace(/\$/g, '$$$$')
// 替换行首 => "
.replace(/\n/g, '"')
// 替换行末 = ",
.replace(/\r/g, '",\r') +
'"'
this.baseCopy(code)
},
},
render() {
@@ -34,7 +57,26 @@ export default {
<section>
<highlightjs {...{ props }} style={{ maxHeight: '400px', overflow: 'auto' }} />
<div class="text-right">
<a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
{this.$scopedSlots.actions && this.$scopedSlots.actions().map(p => {
return (
<span>
{p}
<a-divider type="vertical" />
</span>
)
})}
{
this.copyTemplate &&
<span>
<a-tooltip title="复制用户片段模版">
<a-button size="small" type="dashed" onClick={this.onCopyTemplate} class="mb-xs">Copy template</a-button>
</a-tooltip>
<a-divider type="vertical" />
</span>
}
<a-tooltip title="复制内容">
<a-button size="small" type="dashed" onClick={this.onCopy} class="mb-xs">Copy</a-button>
</a-tooltip>
</div>
</section>
)

7
Web/src/pages/system/doc/index.vue
View File

@@ -3,12 +3,7 @@
<container>
<a-row :gutter="16" type="flex">
<a-col flex="auto">
<container
:id="`doc-${index}`"
:key="index"
mode="container"
v-for="(doc, index) in docs"
>
<container :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
<section>
<h1>{{ doc.title }}</h1>
<component :codes="codes" :is="doc.component" v-if="doc.path" />

20
Web/src/pages/system/doc/seed/form.vue
View File

@@ -1,20 +1,10 @@
<template>
<section>
<h4>
新增
<a-tag>1.0</a-tag>
</h4>
<Highlight :code="codes['/seed/addForm.vue']" language="html" />
<h4>
编辑
<a-tag>1.0</a-tag>
</h4>
<Highlight :code="codes['/seed/editForm.vue']" language="html" />
<h4>
表单主体
<a-tag>1.0</a-tag>
</h4>
<Highlight :code="codes['/seed/form.vue']" language="html" />
<p>
当前版本
<a-tag>1.2</a-tag>
</p>
<Highlight :code="codes['/seed/form.vue']" copy-template language="html" />
</section>
</template>
<script>

4
Web/src/pages/system/doc/seed/query.vue
View File

@@ -2,9 +2,9 @@
<section>
<p>
当前版本
<a-tag>1.1</a-tag>
<a-tag>1.2</a-tag>
</p>
<Highlight :code="codes['/seed/query.vue']" language="html" />
<Highlight :code="codes['/seed/query.vue']" copy-template language="html" />
</section>
</template>
<script>

4
Web/src/pages/system/doc/seed/treeLayout.vue
View File

@@ -2,9 +2,9 @@
<section>
<p>
当前版本
<a-tag>1.0</a-tag>
<a-tag>1.1</a-tag>
</p>
<Highlight :code="codes['/seed/treeLayout.vue']" language="html" />
<Highlight :code="codes['/seed/treeLayout.vue']" copy-template language="html" />
</section>
</template>
<script>

33
Web/src/pages/system/menu/form.vue
View File

@@ -148,9 +148,7 @@ export default {
data() {
return {
/** 表单数据 */
form: {
...defaultValue,
},
form: {},
/** 验证格式 */
rules: {
type: [{ required: true, message: '请选择菜单类型' }],
@@ -185,13 +183,21 @@ export default {
* 必要的方法
* 在打开编辑页时允许填充数据
*/
onFillData(record) {
onFillData(params) {
/** 将默认数据覆盖到form */
this.form = this.$_.cloneDeep({
...record,
let form = {
...defaultValue,
...params.record,
/** 在此处添加默认数据转换 */
/** ... */
});
};
if (params.isParent) {
form.pid = params.parent.id;
form.application = params.parent.application;
}
this.form = this.$_.cloneDeep(form);
},
/**
@@ -244,20 +250,17 @@ export default {
* 必要方法
* 加载当前表单中所需要的异步数据
*/
async onInit(record, isParent = false) {
async onInit(params) {
this.loading = true;
/** 可以在这里await获取一些异步数据 */
/** ...BEGIN */
this.codes = await this.onLoadCodes();
this.appList = await this.onLoadSysApplist();
if (record) {
await this.onLoadMenuTree(record.application);
if (isParent) {
this.$set(this.form, 'pid', record.id);
this.$set(this.form, 'application', record.application);
}
if (params.isParent) {
await this.onLoadMenuTree(params.parent.application);
} else if (params.record) {
await this.onLoadMenuTree(params.record.application);
}
/** ...END */
this.loading = false;

46
Web/src/pages/system/menu/index.vue
View File

@@ -19,7 +19,7 @@
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysMenu:add" v-if="record.type < 2">
<a @click="onOpen('add-form', record)">新增子菜单</a>
<a @click="onOpen('add-form', record, true)">新增子菜单</a>
</Auth>
<Auth auth="sysMenu:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
@@ -33,19 +33,36 @@
</span>
</yo-table>
</a-card>
<br />
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<yo-modal-form
:action="$api.sysMenuAdd"
:width="800"
@ok="onReloadData"
ref="add-form"
title="新增菜单"
type="drawer"
>
<form-body />
</yo-modal-form>
<yo-modal-form
:action="$api.sysMenuEdit"
:width="800"
@ok="onReloadData"
ref="edit-form"
title="编辑菜单"
type="drawer"
>
<form-body />
</yo-modal-form>
</container>
</template>
<script>
import AddForm from './addForm';
import EditForm from './editForm';
import FormBody from './form';
export default {
components: {
AddForm,
EditForm,
FormBody,
},
data() {
return {
@@ -178,8 +195,17 @@ export default {
* 有编辑新增功能的必要方法
* 从列表页调用窗口的打开方法
*/
onOpen(formName, record) {
this.$refs[formName].onOpen(record);
onOpen(formName, record, isParent = false) {
const params = isParent
? {
parent: record,
isParent,
}
: {
record,
isParent,
};
this.$refs[formName].onOpen(params);
},
onResult(success, successMessage) {

11
Web/src/pages/system/role/dataForm.vue
View File

@@ -138,17 +138,6 @@ export default {
onLoadAreaTreeData() {
return this.$api.getAreaTree().then(({ data }) => {
// 为了防止出现空的层级选择,删除所有空children节点
const clearChiildren = (data) => {
data.forEach((item) => {
if (item.children && item.children.length) {
clearChiildren(item.children);
} else {
delete item.children;
}
});
};
clearChiildren(data);
return data;
});
},

35
Web/src/pages/system/user/orgForm.vue → Web/src/pages/system/user/dataForm.vue
View File

@@ -11,16 +11,27 @@
<a-spin :spinning="loading">
<a-icon slot="indicator" spin type="loading" />
<div class="yo-form-group">
<a-form-model-item class="yo-form--fluid">
<a-form-model-item label="选择机构">
<a-tree-select
:show-checked-strategy="SHOW_PARENT"
:tree-data="orgList"
:tree-data="orgTreeData"
placeholder="请选择机构"
search-placeholder="请检索"
tree-checkable
v-model="orgs"
/>
</a-form-model-item>
<a-form-model-item label="区域">
<a-tree-select
:replace-fields="{ title: 'name', value: 'code', children: 'children' }"
:show-checked-strategy="SHOW_PARENT"
:tree-data="arerTreeData"
placeholder="请区域"
search-placeholder="请检索"
tree-checkable
v-model="areas"
/>
</a-form-model-item>
</div>
</a-spin>
</a-form-model>
@@ -40,7 +51,11 @@ export default {
id: '',
orgs: [],
orgList: [],
orgTreeData: [],
areas: [],
arerTreeData: [],
SHOW_PARENT,
};
},
@@ -69,6 +84,7 @@ export default {
.sysUserGrantData({
id: this.id,
grantOrgIdList: this.orgs,
grantAreaCodeList: this.areas,
})
.then(({ success }) => {
if (success) {
@@ -90,22 +106,31 @@ export default {
this.visible = false;
setTimeout(() => {
this.orgs = [];
this.areas = [];
}, 300);
},
async onInit() {
this.loading = true;
this.orgList = await this.onLoadOrgList();
this.orgTreeData = await this.onLoadOrgTreeData();
this.orgs = await this.onLoadOrg();
this.arerTreeData = await this.onLoadAreaTreeData();
this.loading = false;
},
onLoadOrgList() {
onLoadOrgTreeData() {
return this.$api.getOrgTree().then(({ data }) => {
return data;
});
},
onLoadAreaTreeData() {
return this.$api.getAreaTree().then(({ data }) => {
return data;
});
},
onLoadOrg() {
return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
return data;

8
Web/src/pages/system/user/index.vue
View File

@@ -66,7 +66,7 @@
</Auth>
<Auth auth="sysUser:grantData">
<a-menu-item>
<a @click="onOpen('org-form', record)">授权额外数据</a>
<a @click="onOpen('data-form', record)">授权额外数据</a>
</a-menu-item>
</Auth>
</a-menu>
@@ -112,7 +112,7 @@
<add-form @ok="onReloadData" ref="add-form" />
<edit-form @ok="onReloadData" ref="edit-form" />
<role-form @ok="onReloadData" ref="role-form" />
<org-form @ok="onReloadData" ref="org-form" />
<data-form @ok="onReloadData" ref="data-form" />
</yo-tree-layout>
</template>
<script>
@@ -122,7 +122,7 @@ import YoList from '@/components/yoList';
import AddForm from './addForm';
import EditForm from './editForm';
import RoleForm from './roleForm';
import OrgForm from './orgForm';
import DataForm from './dataForm';
export default {
components: {
@@ -131,7 +131,7 @@ export default {
AddForm,
EditForm,
RoleForm,
OrgForm,
DataForm,
},
data() {

34
Web/src/views/main/_layout/header/index.vue
View File

@@ -10,7 +10,7 @@
>
<a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
</a>
<search :menus="nav.menus" />
<search :menus="nav.content" />
</div>
<div class="header-actions">
<User />
@@ -29,9 +29,11 @@
</section>
<container v-else-if="$root.global.settings.layout === 'top-nav'">
<div class="header-actions">
<a @click="showNav = !showNav" class="header-action mr-md">
<a-icon type="menu" />
</a>
<Logo />
<Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
<search :menus="nav.menus" />
<search :menus="nav.content" />
</div>
<div class="header-actions">
<User />
@@ -47,12 +49,26 @@
<a-icon type="setting" />
</a>
</div>
<a-drawer
:body-style="{ padding: 0 }"
:closable="false"
:get-container="'.ant-layout-content > .ant-tabs'"
:visible="showNav"
:wrap-style="{ position: 'absolute' }"
@close="showNav = false"
placement="left"
width="38.2%"
>
<div @blur="showNav = false" @mouseleave="showNav = false">
<Nav :nav="nav" @open="showNav = false" />
</div>
</a-drawer>
</container>
</a-layout-header>
</template>
<script>
import Logo from '../logo';
import Sider from '../sider';
import Nav from '../nav';
import User from './user';
import Search from './search';
@@ -60,7 +76,7 @@ import Search from './search';
export default {
components: {
Logo,
Sider,
Nav,
User,
Search,
@@ -69,12 +85,16 @@ export default {
nav: {
default() {
return {
apps: [],
menus: [],
content: [],
};
},
type: Object,
},
},
data() {
return {
showNav: false,
};
},
};
</script>

6
Web/src/views/main/_layout/header/search.js
View File

@@ -46,7 +46,7 @@ export default {
onSearch(value) {
this.searchText = value
const menus = this.$_.cloneDeep(this.menus)
const menus = this.$_.concat.apply(this, this.$_.cloneDeep(this.menus.map(p => p.menu)))
const search = (m) => {
if (!value) return []
@@ -83,12 +83,14 @@ export default {
return result
}
this.searchResult = unzip(search(menus)).map(p => {
const result = unzip(search(menus)).filter(p => p.parents.length).map(p => {
return {
parents: p.parents.join('-'),
children: p.children
}
})
this.searchResult = result
},
onSearchSelect(value, node) {

78
Web/src/views/main/_layout/nav/index.js Normal file
View File

@@ -0,0 +1,78 @@
export default {
props: {
nav: {
type: Object,
default() {
return {
content: []
}
}
}
},
methods: {
onOpenContentWindow(menu) {
this.$emit('open')
setTimeout(() => {
this.openContentWindow({
key: menu.id,
title: menu.meta.title,
icon: menu.meta.icon,
path: menu.component,
})
}, 300)
},
},
render() {
return (
<container mode="container-fluid">
{this.nav.content.map((item, i) => {
return (
<section class="yo-nav">
<h5 class="yo-nav--app">{item.app.name}</h5>
<div class="yo-nav--row">
{
item.menu.map(sub => {
return (
<div class="yo-nav--col">
<div class="yo-nav--sub-item">
{
sub.children ?
<div class="yo-nav--item-group">
{
sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
}
{sub.meta.title}
</div>
:
<div class="yo-nav--item" onClick={() => this.onOpenContentWindow(sub)}>
{
sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
}
{sub.meta.title}
</div>
}
{
sub.children && sub.children.map(menu => {
return <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(menu)}>
{
menu.meta.icon && <a-icon type={menu.meta.icon} class="mr-xs" />
}
{menu.meta.title}
</div>
})
}
</div>
</div>
)
})
}
</div>
</section>
)
})}
</container>
)
}
}

46
Web/src/views/main/_layout/sider/app.vue
View File

@@ -1,46 +0,0 @@
<template>
<a-popover :placement="placement" trigger="click">
<template slot="content">
<a-button-group>
<a-button :key="app.code" @click="onChangeApp(app)" v-for="app in apps">{{ app.name }}</a-button>
</a-button-group>
</template>
<div class="yo-apps-selector">
<span>{{ appActived.name }}</span>
</div>
</a-popover>
</template>
<script>
export default {
props: {
apps: {
type: Array,
require: true,
},
},
computed: {
placement() {
const layout = this.$root.global.settings.layout;
switch (layout) {
case 'left-menu':
return 'right';
case 'right-menu':
return 'left';
default:
return 'bottom';
}
},
appActived() {
return this.apps.find((p) => p.active) || {};
},
},
methods: {
onChangeApp(app) {
this.$emit('change-app', app);
},
},
};
</script>

138
Web/src/views/main/_layout/sider/index copy.vue
View File

@@ -1,138 +0,0 @@
<template>
<section>
<a-layout-sider
:collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
@collapse="onCollapse"
v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
width="200"
>
<Logo />
<div class="yo-sider-nav">
<App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
<!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
<swiper-slide>
<a-spin :spinning="nav.loading">
<a-icon slot="indicator" spin type="loading" />
<Menu
:menu-style="{ height: '100%', borderRight: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="inline"
/>
</a-spin>
</swiper-slide>
<div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
</swiper>-->
<div class="swiper-container" id="layout--swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a-spin :spinning="nav.loading">
<a-icon slot="indicator" spin type="loading" />
<Menu
:menu-style="{ height: '100%', borderRight: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="inline"
/>
</a-spin>
</div>
<div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
</div>
</div>
</div>
</a-layout-sider>
<template v-else-if="$root.global.settings.layout === 'top-nav'">
<Menu
:menu-style="{ borderBottom: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="horizontal"
/>
</template>
</section>
</template>
<script>
import Logo from '../logo';
import App from './app';
import Menu from './menu';
import Swiper from 'swiper';
let timer,
swiper,
siderSwiperOptions = {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
scrollbar: {
el: '#layout--swiper-scrollbar',
},
mousewheel: true,
};
export default {
components: {
Logo,
App,
Menu,
},
props: {
nav: {
default() {
return {
apps: [],
menus: [],
loading: false,
};
},
type: Object,
},
},
data() {
return {
siderCollapsed: undefined,
};
},
mounted() {
swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
window.addEventListener('resize', () => {
if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
if (!this.$root.global.settings.siderCollapsed) {
if (window.innerWidth < 1000) {
this.siderCollapsed = true;
} else {
this.siderCollapsed = undefined;
}
}
this.onUpdateSwiper();
}
});
},
methods: {
onUpdateSwiper() {
clearTimeout(timer);
timer = setTimeout(() => {
// if (this.$refs['sider-swiper']) {
// this.$refs['sider-swiper'].$swiper.update();
// }
swiper.update();
}, 300);
},
onMenuOpenChange() {
this.onUpdateSwiper();
},
onCollapse() {
this.onUpdateSwiper();
},
windowTriggerResize() {
let e = new Event('resize');
window.dispatchEvent(e);
},
},
};
</script>

11
Web/src/views/main/_layout/sider/index.vue
View File

@@ -8,7 +8,6 @@
>
<Logo />
<div class="yo-sider-nav">
<App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
<div class="swiper-container" id="layout--swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
@@ -27,19 +26,10 @@
</div>
</div>
</a-layout-sider>
<template v-else-if="$root.global.settings.layout === 'top-nav'">
<Menu
:menu-style="{ borderBottom: 0 }"
:nav="nav"
@openChange="onMenuOpenChange"
mode="horizontal"
/>
</template>
</section>
</template>
<script>
import Logo from '../logo';
import App from './app';
import Menu from './menu';
import Swiper from 'swiper';
@@ -59,7 +49,6 @@ let timer,
export default {
components: {
Logo,
App,
Menu,
},
props: {

18
Web/src/views/main/_layout/sider/menu.js
View File

@@ -1,10 +1,11 @@
import { HmacMD5 } from "crypto-js"
export default {
props: {
nav: {
default() {
return {
modules: [],
menus: [],
content: []
}
},
type: Object,
@@ -75,6 +76,17 @@ export default {
openChange: this.onMenuOpenChange,
}
return <a-menu {...{ props, on }}>{this.renderMenu(this.nav.menus)}</a-menu>
return (<section>
{
this.nav.content.map(item => {
return (
<section>
<div class="yo-sider-nav--app">{item.app.name}</div>
<a-menu {...{ props, on }}>{this.renderMenu(item.menu)}</a-menu>
</section>
)
})
}
</section>)
},
}

60
Web/src/views/main/index.vue
View File

@@ -6,11 +6,7 @@
[`yo-layout--${$root.global.settings.layout}`]: true,
}"
>
<Sider
:nav="nav"
@change-app="onChangeApp"
v-if="$root.global.settings.layout === 'left-menu'"
/>
<Sider :nav="nav" v-if="$root.global.settings.layout === 'left-menu'" />
<a-layout>
<Header :nav="nav" @reload="onReloadContentWindow" @setting="setting.visible = true" />
<a-layout>
@@ -40,7 +36,6 @@ import Content from './_layout/content';
import Setting from './setting';
import { setGlobal } from '@/common/login';
import { ACTIVE_APP_KEY } from '@/common/storage';
import { EMPTY_ID } from '@/util/global';
@@ -65,8 +60,7 @@ export default {
},
nav: {
loading: false,
apps: [],
menus: [],
content: [],
},
};
},
@@ -77,15 +71,14 @@ export default {
this.nav.loading = true;
this.$api.getLoginUser().then(({ data }) => {
this.$api.getLoginUser().then(async ({ data }) => {
// 去除应用和菜单信息,存储基本信息
const info = this.$_.cloneDeep(data);
delete info.apps;
delete info.menus;
setGlobal(info);
data.apps.map((p) => (p.active = p.active));
this.onSetNav(data);
this.nav.content = await this.onSetNav(data);
this.nav.loading = false;
this.$root.global.defaultWindow.map((options) => {
@@ -206,37 +199,22 @@ export default {
this.$refs.content.onLoadContentWindow(key);
},
onChangeApp(app) {
this.nav.loading = true;
this.$api.sysMenuChange({ application: app.code }).then(({ data }) => {
this.nav.apps.map((p) => (p.active = p.code === app.code));
window.localStorage.removeItem(ACTIVE_APP_KEY);
this.onSetNav({
apps: this.nav.apps,
menus: data,
});
this.nav.loading = false;
});
},
onSetNav(nav) {
// 从本地存储获取当前选中的应用及菜单
this.nav.apps = nav.apps;
const code = window.localStorage.getItem(ACTIVE_APP_KEY);
if (code) {
this.nav.apps.map((p) => (p.active = p.code === code.code));
this.onChangeApp({
code,
const getNav = [];
nav.apps.forEach((app) => {
getNav.push({
app,
});
});
return this.$api
.$queue(getNav.map((p) => this.$api.sysMenuChangeAwait({ application: p.app.code })))
.then((menus) => {
menus.forEach((menu, i) => {
getNav[i].menu = this.serializeMenu(menu.data);
});
return getNav;
});
} else {
// 将默认选中菜单存储
const app = nav.apps.find((p) => p.active);
if (app) {
window.localStorage.setItem(ACTIVE_APP_KEY, app.code);
this.serializeMenu(nav.menus);
}
}
},
serializeMenu(menus) {
@@ -252,7 +230,7 @@ export default {
return m;
};
this.nav.menus = children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
},
},
};

27
Web/yarn.lock
View File

@@ -2478,6 +2478,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
inherits "^2.0.1"
safe-buffer "^5.0.1"
clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/clamp/download/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -5437,6 +5442,11 @@ lodash.memoize@^4.1.2:
resolved "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.throttle@^4.0.0:
version "4.1.1"
resolved "https://registry.nlark.com/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
lodash.toarray@^4.4.0:
version "4.4.0"
resolved "https://registry.npm.taobao.org/lodash.toarray/download/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -5523,6 +5533,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.0.0:
version "1.2.6"
resolved "https://registry.npm.taobao.org/material-colors/download/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha1-bRlYhxEmmSzuzHL0vMTY8BCGX0Y=
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8105,7 +8120,7 @@ timsort@^0.3.0:
resolved "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tinycolor2@^1.4.1:
tinycolor2@^1.1.2, tinycolor2@^1.4.1:
version "1.4.2"
resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.2.tgz?cache=0&sync_timestamp=1601056395015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftinycolor2%2Fdownload%2Ftinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha1-P2pNEHGtB2dtf6Ry4frECnGdiAM=
@@ -8493,6 +8508,16 @@ vue-awesome-swiper@^4.1.1:
resolved "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"
integrity sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4=
vue-color@^2.8.1:
version "2.8.1"
resolved "https://registry.npm.taobao.org/vue-color/download/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
integrity sha1-oJDz3Pjtbwev24ZcrISxmnMwLnA=
dependencies:
clamp "^1.0.1"
lodash.throttle "^4.0.0"
material-colors "^1.0.0"
tinycolor2 "^1.1.2"
vue-eslint-parser@^7.0.0:
version "7.6.0"
resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"