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

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" />

22
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>
@@ -30,4 +20,4 @@ export default {
},
},
};
</script>
</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() {