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

update 增加了开发文档的编写

Browse Source
This commit is contained in:
自带大佬气场
2021-04-27 18:22:32 +08:00
parent 0b18832602
commit bfb61e728c
17 changed files with 711 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
Web/public/doc-code/seed/addForm.vue Normal file
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,9 @@
{
"seed-index.vue": {
"prefix": "seed.index",
"body": [
"<template>",
"</template>"
]
}
}

2
Web/public/doc-part/use/a.js
View File

@@ -1,2 +0,0 @@
const a = 2;
const b = 3;

53
Web/public/doc-part/use/test.vue
View File

@@ -1,53 +0,0 @@
<template>
<container>
<template v-for="(doc, index) in docs">
<component :codes="codes" :is="doc.component" :key="index" />
</template>
<a-anchor>
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
<a-anchor-link
href="#components-anchor-demo-basic"
target="_blank"
title="Basic demo with Target"
/>
<a-anchor-link href="#API" title="API">
<a-anchor-link href="#Anchor-Props" title="Anchor Props" />
<a-anchor-link href="#Link-Props" title="Link Props" />
</a-anchor-link>
</a-anchor>
</container>
</template>
<script>
export default {
data() {
return {
docs: [
{
title: '开始使用',
name: 'use',
},
],
codes: {},
};
},
mounted() {
this.docs.forEach((doc) => {
this.$set(doc, 'component', () => import(`./${doc.name}`));
});
const files = require.context('@/../public/doc-part', true, /\.(js|html)(\?.*)?$/);
const codes = {};
files.keys().forEach((p) => {
const fileName = p.slice(1);
const xhr = new XMLHttpRequest();
xhr.open('GET', `./doc-part${fileName}`, false);
xhr.overrideMimeType('text/plain;charset=utf-8');
xhr.send(null);
codes[fileName] = xhr.responseText;
});
this.codes = codes;
},
};
</script>

24
Web/src/assets/style/lib/font-size.less
View File

@@ -1 +1,25 @@
@import (reference) '~@/assets/style/extend.less'; @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;
}

11
Web/src/components/container/index.vue
View File

@@ -1,5 +1,14 @@
<template> <template>
<section :class="$root.global.settings.container || 'container-fluid'"> <section :class="mode || $root.global.settings.container || 'container-fluid'">
<slot /> <slot />
</section> </section>
</template> </template>
<script>
export default {
props: {
mode: {
type: String,
},
},
};
</script>

2
Web/src/main.js
View File

@@ -26,7 +26,7 @@ SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
Vue.use(getAwesomeSwiper(SwiperClass)) Vue.use(getAwesomeSwiper(SwiperClass))
import hljs from 'highlight.js' import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' import 'highlight.js/styles/vs2015.css'
Vue.use(hljs.vuePlugin); Vue.use(hljs.vuePlugin);
/** /**

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

@@ -6,15 +6,37 @@ export default {
}, },
methods: { 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() { render() {
const props = { const props = {
...this.$props, ...this.$props,
...this.$attrs ...this.$attrs,
} }
return props.code && <highlightjs {...{ props }} /> 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>
)
} }
} }

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

@@ -1,22 +1,51 @@
<template> <template>
<container> <a-card :bordered="false" class="mb-none">
<template v-for="(doc, index) in docs"> <container>
<component :codes="codes" :is="doc.component" :key="index" /> <a-row :gutter="16" type="flex">
</template> <a-col flex="auto">
<a-anchor> <container mode="container">
<a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" /> <section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
<a-anchor-link href="#components-anchor-demo-static" title="Static demo" /> <h1>{{ doc.title }}</h1>
<a-anchor-link <component :codes="codes" :is="doc.component" v-if="doc.name" />
href="#components-anchor-demo-basic" <template v-if="doc.children">
target="_blank" <section
title="Basic demo with Target" :id="`doc-${index}-${_index}`"
/> :key="_index"
<a-anchor-link href="#API" title="API"> v-for="(_doc, _index) in doc.children"
<a-anchor-link href="#Anchor-Props" title="Anchor Props" /> >
<a-anchor-link href="#Link-Props" title="Link Props" /> <h3>{{ _doc.title }}</h3>
</a-anchor-link> <component :codes="codes" :is="_doc.component" v-if="_doc.name" />
</a-anchor> </section>
</container> </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> </template>
<script> <script>
export default { export default {
@@ -25,7 +54,24 @@ export default {
docs: [ docs: [
{ {
title: '开始使用', title: '开始使用',
name: 'use', name: '/usage',
},
{
title: '窗口',
},
{
title: '种子',
name: '/seed',
children: [
{
title: '查询表格',
name: '/seed/query',
},
{
title: '编辑窗口',
name: '/seed/form',
},
],
}, },
], ],
codes: {}, codes: {},
@@ -33,15 +79,23 @@ export default {
}, },
mounted() { mounted() {
this.docs.forEach((doc) => { this.docs.forEach((doc) => {
this.$set(doc, 'component', () => import(`./${doc.name}`)); if (doc.name) {
this.$set(doc, 'component', () => import(`.${doc.name}`));
}
if (doc.children) {
doc.children.forEach((_doc) => {
this.$set(_doc, 'component', () => import(`.${_doc.name}`));
});
}
}); });
const files = require.context('@/../public/doc-part', true, /\.(js|html|vue|css|less)(\?.*)?$/); // 读取doc-code下所有文件内容
const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
const codes = {}; const codes = {};
files.keys().forEach((p) => { files.keys().forEach((p) => {
const fileName = p.slice(1); const fileName = p.slice(1);
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', `./doc-part${fileName}`, false); xhr.open('GET', `./doc-code${fileName}`, false);
xhr.overrideMimeType('text/plain;charset=utf-8'); xhr.overrideMimeType('text/plain;charset=utf-8');
xhr.send(null); xhr.send(null);
codes[fileName] = xhr.responseText; codes[fileName] = xhr.responseText;
@@ -49,5 +103,10 @@ export default {
console.log(codes); console.log(codes);
this.codes = codes; this.codes = codes;
}, },
methods: {
container() {
return this.$el;
},
},
}; };
</script> </script>

33
Web/src/pages/system/doc/seed/form.vue Normal file
View 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
View 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
View 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
View File

@@ -0,0 +1,17 @@
<template>
<section></section>
</template>
<script>
import Highlight from './highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

21
Web/src/pages/system/doc/use.vue
View File

@@ -1,21 +0,0 @@
<template>
<section>
<h3>开始使用</h3>
<Highlight :code="codes['/use/a.js'] || ''" language="javascript" />
<Highlight :code="codes['/use/test.vue'] || ''" language="javascript" />
</section>
</template>
<script>
import Highlight from './highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>