Merge branch 'master' into features/area_data_scope
This commit is contained in:
@@ -13,6 +13,7 @@
|
||||
"core-js": "^3.6.5",
|
||||
"crypto-js": "^4.0.0",
|
||||
"echarts": "^5.0.2",
|
||||
"highlight.js": "^10.7.2",
|
||||
"less": "^3.12.2",
|
||||
"less-loader": "4.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
@@ -20,6 +21,7 @@
|
||||
"swiper": "^6.5.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-highlight.js": "^3.1.0",
|
||||
"vue-router": "^3.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
78
Web/public/doc-code/seed/addForm.vue
Normal file
78
Web/public/doc-code/seed/addForm.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<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
Normal file
79
Web/public/doc-code/seed/editForm.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<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>
|
||||
100
Web/public/doc-code/seed/form.vue
Normal file
100
Web/public/doc-code/seed/form.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 表单数据 */
|
||||
form: {},
|
||||
/** 验证格式 */
|
||||
rules: {},
|
||||
|
||||
/** 加载异步数据状态 */
|
||||
loading: false,
|
||||
|
||||
/** 其他成员属性 */
|
||||
/** ... */
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
*/
|
||||
onFillData(record) {
|
||||
/** 将默认数据覆盖到form */
|
||||
this.form = this.$_.cloneDeep({
|
||||
...record,
|
||||
/** 在此处添加默认数据转换 */
|
||||
/** ... */
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 验证表单并获取表单数据
|
||||
*/
|
||||
onGetData() {
|
||||
return new Promise((reslove, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const record = this.$_.cloneDeep(this.form);
|
||||
|
||||
/** 验证通过后可以对数据进行转换得到想要提交的格式 */
|
||||
/** ... */
|
||||
|
||||
reslove(record);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口进行保存时调用表单验证
|
||||
*/
|
||||
onValidate(callback) {
|
||||
this.$refs.form.validate(callback);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在外部窗口关闭或重置时对表单验证进行初始化
|
||||
*/
|
||||
onResetFields() {
|
||||
setTimeout(() => {
|
||||
this.$refs.form.resetFields();
|
||||
|
||||
/** 在这里可以初始化当前组件中其他属性 */
|
||||
/** ... */
|
||||
}, 300);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载当前表单中所需要的异步数据
|
||||
*/
|
||||
async onInit() {
|
||||
this.loading = true;
|
||||
/** 可以在这里await获取一些异步数据 */
|
||||
/** ...BEGIN */
|
||||
/** ...END */
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
/** 当前组件的其他方法 */
|
||||
/** ... */
|
||||
},
|
||||
};
|
||||
</script>
|
||||
189
Web/public/doc-code/seed/query.vue
Normal file
189
Web/public/doc-code/seed/query.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<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">
|
||||
<Auth auth="authCode:add" slot="operator">
|
||||
<a-button @click="onOpen('add-form')" icon="plus">新增XX</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>
|
||||
<br />
|
||||
<add-form @ok="onReloadData" ref="add-form" />
|
||||
<edit-form @ok="onReloadData" ref="edit-form" />
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import AddForm from './addForm';
|
||||
import EditForm from './editForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddForm,
|
||||
EditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {},
|
||||
columns: [],
|
||||
codes: {
|
||||
code1: [],
|
||||
code2: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.onLoadCodes();
|
||||
|
||||
/** 根据权限添加操作列 */
|
||||
const flag = this.$auth(/** ... */);
|
||||
if (flag) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
*/
|
||||
loadData(params) {
|
||||
return (
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testGetApi({
|
||||
...params,
|
||||
...this.query,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.data;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 加载数据时初始化分页信息
|
||||
*/
|
||||
onQuery() {
|
||||
this.$refs.table.onReloadData(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* 有查询功能时的必要方法
|
||||
* 重置查询条件
|
||||
*/
|
||||
onResetQuery() {
|
||||
/** 在这里重置查询条件时,可对特殊的字段做保留处理 */
|
||||
this.query = {};
|
||||
this.onQuery();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 重新列表数据
|
||||
*/
|
||||
onReloadData() {
|
||||
this.$refs.table.onReloadData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 加载字典数据
|
||||
* 如果不需要获取相应的字典数据,此方法内容可空
|
||||
*/
|
||||
onLoadCodes() {
|
||||
this.$api
|
||||
.$queue([
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'code1' }),
|
||||
this.$api.sysDictTypeDropDownWait({ code: 'code2' }),
|
||||
])
|
||||
.then(([code1, code2]) => {
|
||||
this.codes.code1 = code1.data;
|
||||
this.codes.code2 = code2.data;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 绑定数据字典值
|
||||
*/
|
||||
bindCodeValue(code, name) {
|
||||
const c = this.codes[name].find((p) => p.code == code);
|
||||
if (c) {
|
||||
return c.value;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 从列表页调用窗口的打开方法
|
||||
*/
|
||||
onOpen(formName, record) {
|
||||
this.$refs[formName].onOpen(record);
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
|
||||
*/
|
||||
onResult(success, successMessage) {
|
||||
if (success) {
|
||||
this.$message.success(successMessage);
|
||||
this.onReloadData();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 必要方法
|
||||
* 删除时调用
|
||||
*/
|
||||
onDelete(record) {
|
||||
this.$refs.table.onLoading();
|
||||
this.$api
|
||||
/** !!此处必须修改调用的接口方法 */
|
||||
.testDeleteApi(record)
|
||||
.then(({ success }) => {
|
||||
this.onResult(success, '删除成功');
|
||||
})
|
||||
.finally(() => {
|
||||
this.$refs.table.onLoaded();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
9
Web/public/doc-code/seed/vue.json
Normal file
9
Web/public/doc-code/seed/vue.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"seed-index.vue": {
|
||||
"prefix": "seed.index",
|
||||
"body": [
|
||||
"<template>",
|
||||
"</template>"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -9,10 +9,6 @@
|
||||
<script>
|
||||
import zh_CN from 'ant-design-vue/es/locale/zh_CN';
|
||||
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
moment.locale('zh-cn');
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
|
||||
@@ -1 +1,25 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
body {
|
||||
font-weight: 100;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
.ant-card-meta-title {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.ant-table-thead > tr > th {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1,30 +1,20 @@
|
||||
@import (reference) '~@/assets/style/extend.less';
|
||||
.ant-modal-content {
|
||||
background-color: fade(@primary-color, 20%);
|
||||
background-color: fade(@white, 90%);
|
||||
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.ant-modal-header {
|
||||
padding: @padding-sm @padding-md;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: @white;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: @white;
|
||||
}
|
||||
.ant-modal-close {
|
||||
color: fade(@white, 45%);
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: fade(@white, 75%);
|
||||
}
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
line-height: 46px;
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: @layout-header-height - 20px;
|
||||
top: @layout-header-height;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
@@ -38,6 +38,32 @@
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow opacity;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--bar {
|
||||
line-height: 20px;
|
||||
|
||||
height: 20px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
text-align: right;
|
||||
>.anticon {
|
||||
cursor: pointer;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
&:hover {
|
||||
color: fade(@black, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<section :class="$root.global.settings.container || 'container-fluid'">
|
||||
<section :class="mode || $root.global.settings.container || 'container-fluid'">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -122,6 +122,10 @@ export default {
|
||||
this.onUpdateSwiper()
|
||||
},
|
||||
|
||||
onUnexpandAll() {
|
||||
this.expandedKeys = []
|
||||
},
|
||||
|
||||
onSearch(value) {
|
||||
const expandedKeys = this.list
|
||||
.map(p => {
|
||||
@@ -136,6 +140,10 @@ export default {
|
||||
this.expandedKeys = expandedKeys
|
||||
this.autoExpandParent = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.onUpdateSwiper()
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
onSelect(selectedKeys) {
|
||||
@@ -238,6 +246,11 @@ export default {
|
||||
<a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
|
||||
</div>
|
||||
</a-layout-header>
|
||||
<div class="yo-tree-layout--bar">
|
||||
<a-tooltip placement="bottom" title="折叠全部">
|
||||
<a-icon type="switcher" onClick={this.onUnexpandAll} />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="swiper-container" ref="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
|
||||
@@ -25,6 +25,10 @@ import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
|
||||
SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
|
||||
Vue.use(getAwesomeSwiper(SwiperClass))
|
||||
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/vs2015.css'
|
||||
Vue.use(hljs.vuePlugin);
|
||||
|
||||
/**
|
||||
* api全局化
|
||||
*/
|
||||
@@ -36,7 +40,30 @@ Vue.prototype.$api = api
|
||||
*/
|
||||
import _ from 'lodash'
|
||||
Vue.prototype.$_ = _
|
||||
|
||||
/**
|
||||
* moment全局化
|
||||
*/
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
moment.updateLocale('zh-cn', {
|
||||
meridiem: function (hour, minute, isLowercase) {
|
||||
if (hour < 9) {
|
||||
return '早上'
|
||||
} else if (hour < 11) {
|
||||
return '上午'
|
||||
} else if (hour < 13) {
|
||||
return '中午'
|
||||
} else if (hour < 18) {
|
||||
return '下午'
|
||||
} else {
|
||||
return '晚上'
|
||||
}
|
||||
}
|
||||
})
|
||||
Vue.prototype.$moment = moment
|
||||
/**
|
||||
* 权限验证全局化
|
||||
*/
|
||||
import { auth } from './components/authorized'
|
||||
Vue.prototype.$auth = auth
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
@@ -6,17 +6,14 @@
|
||||
<a-col>
|
||||
<div class="home-header-row">
|
||||
<div class="home-header-avatar">
|
||||
<a-avatar
|
||||
:size="64"
|
||||
src="https://gss0.baidu.com/7Ls0a8Sm2Q5IlBGlnYG/sys/portraith/item/tb.1.9f0e4392.Q2njD2SGV-9wBUKqKFoQqA?t=1507123743"
|
||||
/>
|
||||
<yo-image :id="$root.global.info.avatar" :size="64" type="avatar" />
|
||||
</div>
|
||||
<div class="home-header-content">
|
||||
<h2>
|
||||
上午好，
|
||||
<span>软件开发人员</span>，欢迎您登录系统！
|
||||
{{ $moment().format('A') }}好，
|
||||
<span>{{ $root.global.info.nickName || $root.global.info.name }}</span>，欢迎您登录系统！
|
||||
</h2>
|
||||
<p>上次IP：115.217.160.156 上次登录时间：2021-04-06 13:10:13</p>
|
||||
<p>上次IP：{{ $root.global.info.lastLoginIp }} 上次登录时间：{{ $root.global.info.lastLoginTime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
<a href="#" slot="extra">更多</a>
|
||||
<a-list :data-source="data" item-layout="horizontal">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
<a-list-item-meta :description="moment().format('YYYY-MM-DD HH:mm:ss')" :title="item.title">
|
||||
<a-list-item-meta
|
||||
:description="$moment().format('YYYY-MM-DD HH:mm:ss')"
|
||||
:title="item.title"
|
||||
>
|
||||
<a-icon :style="{ fontSize: '18px' }" slot="avatar" theme="twoTone" type="message" />
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
@@ -11,8 +14,6 @@
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -23,8 +24,5 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -37,7 +37,6 @@
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -56,7 +55,6 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
|
||||
42
Web/src/pages/system/doc/highlight.js
Normal file
42
Web/src/pages/system/doc/highlight.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export default {
|
||||
props: {
|
||||
code: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onCopy() {
|
||||
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.select()
|
||||
document.execCommand('copy')
|
||||
$textarea.remove()
|
||||
this.$message.success('已复制到剪贴板')
|
||||
}
|
||||
catch
|
||||
{
|
||||
this.$message.error('复制失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
const props = {
|
||||
...this.$props,
|
||||
...this.$attrs,
|
||||
}
|
||||
|
||||
return props.code && (
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
112
Web/src/pages/system/doc/index.vue
Normal file
112
Web/src/pages/system/doc/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="mb-none">
|
||||
<container>
|
||||
<a-row :gutter="16" type="flex">
|
||||
<a-col flex="auto">
|
||||
<container mode="container">
|
||||
<section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
|
||||
<h1>{{ doc.title }}</h1>
|
||||
<component :codes="codes" :is="doc.component" v-if="doc.name" />
|
||||
<template v-if="doc.children">
|
||||
<section
|
||||
:id="`doc-${index}-${_index}`"
|
||||
:key="_index"
|
||||
v-for="(_doc, _index) in doc.children"
|
||||
>
|
||||
<h3>{{ _doc.title }}</h3>
|
||||
<component :codes="codes" :is="_doc.component" v-if="_doc.name" />
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</container>
|
||||
</a-col>
|
||||
<a-col flex="240px">
|
||||
<a-anchor
|
||||
:get-container="()=> $el.parentNode"
|
||||
:offset-top="24"
|
||||
:wrapper-style="{ backgroundColor: 'transparent' }"
|
||||
>
|
||||
<a-anchor-link
|
||||
:href="`#doc-${index}`"
|
||||
:key="index"
|
||||
:title="doc.title"
|
||||
v-for="(doc, index) in docs"
|
||||
>
|
||||
<template v-if="doc.children">
|
||||
<a-anchor-link
|
||||
:href="`#doc-${index}-${_index}`"
|
||||
:key="_index"
|
||||
:title="_doc.title"
|
||||
v-for="(_doc, _index) in doc.children"
|
||||
/>
|
||||
</template>
|
||||
</a-anchor-link>
|
||||
</a-anchor>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</container>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
title: '开始使用',
|
||||
name: '/usage',
|
||||
},
|
||||
{
|
||||
title: '窗口',
|
||||
},
|
||||
{
|
||||
title: '种子',
|
||||
name: '/seed',
|
||||
children: [
|
||||
{
|
||||
title: '查询表格',
|
||||
name: '/seed/query',
|
||||
},
|
||||
{
|
||||
title: '编辑窗口',
|
||||
name: '/seed/form',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
codes: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.docs.forEach((doc) => {
|
||||
if (doc.name) {
|
||||
this.$set(doc, 'component', () => import(`.${doc.name}`));
|
||||
}
|
||||
if (doc.children) {
|
||||
doc.children.forEach((_doc) => {
|
||||
this.$set(_doc, 'component', () => import(`.${_doc.name}`));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 读取doc-code下所有文件内容
|
||||
const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
|
||||
const codes = {};
|
||||
files.keys().forEach((p) => {
|
||||
const fileName = p.slice(1);
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', `./doc-code${fileName}`, false);
|
||||
xhr.overrideMimeType('text/plain;charset=utf-8');
|
||||
xhr.send(null);
|
||||
codes[fileName] = xhr.responseText;
|
||||
});
|
||||
console.log(codes);
|
||||
this.codes = codes;
|
||||
},
|
||||
methods: {
|
||||
container() {
|
||||
return this.$el;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
33
Web/src/pages/system/doc/seed/form.vue
Normal file
33
Web/src/pages/system/doc/seed/form.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<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" />
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import Highlight from '../highlight';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Highlight,
|
||||
},
|
||||
props: {
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
45
Web/src/pages/system/doc/seed/index.vue
Normal file
45
Web/src/pages/system/doc/seed/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section>
|
||||
<p>种子文件已经提供了业务组件通用的架构，可以通过以下几种方式快速获取架构代码。</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>
|
||||
从
|
||||
<a-tag class="mr-none" color="orange">@/src/pages/system/_seed</a-tag>中找到，并复制内容。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
<b>用户片段</b>达到快速生成的目的。
|
||||
</p>
|
||||
<p>
|
||||
在VSCode中，选择
|
||||
<a-breadcrumb separator=">">
|
||||
<a-breadcrumb-item>文件</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>首选项</a-breadcrumb-item>
|
||||
<a-breadcrumb-item>用户片段</a-breadcrumb-item>
|
||||
</a-breadcrumb>输入
|
||||
<a-tag class="mr-none" color="orange">vue.json</a-tag>并回车，将会打开针对vue文件的用户片段配置JSON。
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Highlight :code="codes['/seed/vue.json']" language="json" />
|
||||
<ul>
|
||||
<li>在下方直接复制代码。</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import Highlight from '../highlight';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Highlight,
|
||||
},
|
||||
props: {
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
19
Web/src/pages/system/doc/seed/query.vue
Normal file
19
Web/src/pages/system/doc/seed/query.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<section>
|
||||
<Highlight :code="codes['/seed/query.vue']" language="html" />
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import Highlight from '../highlight';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Highlight,
|
||||
},
|
||||
props: {
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
17
Web/src/pages/system/doc/usage.vue
Normal file
17
Web/src/pages/system/doc/usage.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<section></section>
|
||||
</template>
|
||||
<script>
|
||||
import Highlight from './highlight';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Highlight,
|
||||
},
|
||||
props: {
|
||||
codes: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -44,7 +44,7 @@
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
@@ -84,8 +84,6 @@
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -133,8 +131,6 @@ export default {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
@@ -142,8 +138,8 @@ export default {
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<a-range-picker
|
||||
:show-time="{
|
||||
hideDisabledOptions: true,
|
||||
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
|
||||
defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')],
|
||||
}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
v-model="query.dates"
|
||||
@@ -76,8 +76,6 @@
|
||||
</container>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -125,8 +123,6 @@ export default {
|
||||
this.onLoadCodes();
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 传给yo-table以示意数据接口及其参数和返回的数据结构
|
||||
@@ -134,8 +130,8 @@ export default {
|
||||
loadData(params) {
|
||||
const query = this.$_.cloneDeep(this.query);
|
||||
if (query.dates && query.dates.length) {
|
||||
query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchBeginTime = this.$moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
query.searchEndTime = this.$moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
delete query.dates;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="生日">
|
||||
<a-date-picker
|
||||
@change="(date) => form.birthday = date ? moment(date).format('YYYY-MM-DD') : undefined"
|
||||
@change="(date) => form.birthday = date ? $moment(date).format('YYYY-MM-DD') : undefined"
|
||||
class="w-100-p"
|
||||
placeholder="请选择生日"
|
||||
v-model="form.birthday"
|
||||
@@ -120,8 +120,6 @@
|
||||
</a-form-model>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
|
||||
const validateToNextPassword = (rule, value, callback) => {
|
||||
callback();
|
||||
};
|
||||
@@ -179,8 +177,6 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
|
||||
/**
|
||||
* 必要的方法
|
||||
* 在打开编辑页时允许填充数据
|
||||
@@ -189,7 +185,7 @@ export default {
|
||||
const form = this.$_.cloneDeep(record || {});
|
||||
// 日期特殊处理
|
||||
if (form.birthday) {
|
||||
form.birthday = moment(form.birthday).format('YYYY-MM-DD');
|
||||
form.birthday = this.$moment(form.birthday).format('YYYY-MM-DD');
|
||||
}
|
||||
// 提交的时候是"param",而获取下来却是"info",在这里转换一下
|
||||
if (form.sysEmpInfo) {
|
||||
|
||||
@@ -260,6 +260,9 @@ export default {
|
||||
} else {
|
||||
this.$message.error(message);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
record.statusChanging = false;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -127,7 +127,7 @@ export default {
|
||||
<template slot="dataSource">
|
||||
{this.renderSelect(this.searchResult)}
|
||||
</template>
|
||||
<a-input>
|
||||
<a-input allow-clear>
|
||||
<a-icon slot="suffix" type="search" class="certain-category-icon" />
|
||||
</a-input>
|
||||
</a-auto-complete>
|
||||
|
||||
@@ -3241,6 +3241,11 @@ destroy@~1.0.4:
|
||||
resolved "https://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
|
||||
integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
|
||||
|
||||
detect-indent@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.nlark.com/detect-indent/download/detect-indent-5.0.0.tgz?cache=0&sync_timestamp=1618847240598&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdetect-indent%2Fdownload%2Fdetect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
|
||||
integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
|
||||
|
||||
detect-node@^2.0.4:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npm.taobao.org/detect-node/download/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
|
||||
@@ -4418,6 +4423,11 @@ highlight.js@^10.0.0:
|
||||
resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
|
||||
integrity sha1-qOxBUtsk6mMMkJJ9bK4qRfjsuVU=
|
||||
|
||||
highlight.js@^10.7.2:
|
||||
version "10.7.2"
|
||||
resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.2.tgz?cache=0&sync_timestamp=1619160938319&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhighlight.js%2Fdownload%2Fhighlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
|
||||
integrity sha1-iTGbhh7cZsSIVO0ebaIeqJ+Ec2A=
|
||||
|
||||
hmac-drbg@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
@@ -4688,6 +4698,11 @@ imurmurhash@^0.1.4:
|
||||
resolved "https://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
|
||||
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
|
||||
|
||||
indent-string@^3.0.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-3.2.0.tgz?cache=0&sync_timestamp=1618679561483&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Findent-string%2Fdownload%2Findent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
|
||||
integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
|
||||
|
||||
indent-string@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npm.taobao.org/indent-string/download/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
|
||||
@@ -7054,6 +7069,14 @@ readdirp@~3.5.0:
|
||||
dependencies:
|
||||
picomatch "^2.2.1"
|
||||
|
||||
redent@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npm.taobao.org/redent/download/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
|
||||
integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
|
||||
dependencies:
|
||||
indent-string "^3.0.0"
|
||||
strip-indent "^2.0.0"
|
||||
|
||||
regenerate-unicode-properties@^8.2.0:
|
||||
version "8.2.0"
|
||||
resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
|
||||
@@ -8169,7 +8192,7 @@ tslib@2.0.3:
|
||||
resolved "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1617647442601&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
|
||||
integrity sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=
|
||||
|
||||
tslib@^1.10.0, tslib@^1.9.0:
|
||||
tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.14.1.tgz?cache=0&sync_timestamp=1609887785854&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=
|
||||
@@ -8482,6 +8505,15 @@ vue-eslint-parser@^7.0.0:
|
||||
esquery "^1.4.0"
|
||||
lodash "^4.17.15"
|
||||
|
||||
vue-highlight.js@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npm.taobao.org/vue-highlight.js/download/vue-highlight.js-3.1.0.tgz#87b60b4931fd310b318f2b2c9116fe71b69dd053"
|
||||
integrity sha1-h7YLSTH9MQsxjysskRb+cbad0FM=
|
||||
dependencies:
|
||||
detect-indent "^5.0.0"
|
||||
redent "^2.0.0"
|
||||
tslib "^1.9.3"
|
||||
|
||||
vue-hot-reload-api@^2.3.0:
|
||||
version "2.3.4"
|
||||
resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
|
||||
|
||||
Reference in New Issue
Block a user