update 增加了开发文档的编写

Web/public/doc-code/seed/addForm.vue

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

Web/public/doc-code/seed/editForm.vue

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

Web/public/doc-code/seed/form.vue

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

Web/public/doc-code/seed/query.vue

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

Web/public/doc-code/seed/vue.json

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

Web/public/doc-part/use/a.js

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

Web/public/doc-part/use/test.vue

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

Web/src/assets/style/lib/font-size.less

@@ -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;
+}

Web/src/components/container/index.vue

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

Web/src/main.js

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

Web/src/pages/system/doc/highlight.js

@@ -6,15 +6,37 @@ export default {
     },
 
     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
+            ...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>
+        )
     }
 }

Web/src/pages/system/doc/index.vue

@@ -1,22 +1,51 @@
 <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>
+  <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 {
@@ -25,7 +54,24 @@ export default {
       docs: [
         {
           title: '开始使用',
-          name: 'use',
+          name: '/usage',
+        },
+        {
+          title: '窗口',
+        },
+        {
+          title: '种子',
+          name: '/seed',
+          children: [
+            {
+              title: '查询表格',
+              name: '/seed/query',
+            },
+            {
+              title: '编辑窗口',
+              name: '/seed/form',
+            },
+          ],
         },
       ],
       codes: {},
@@ -33,15 +79,23 @@ export default {
   },
   mounted() {
     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 = {};
     files.keys().forEach((p) => {
       const fileName = p.slice(1);
       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.send(null);
       codes[fileName] = xhr.responseText;
@@ -49,5 +103,10 @@ export default {
     console.log(codes);
     this.codes = codes;
   },
+  methods: {
+    container() {
+      return this.$el;
+    },
+  },
 };
 </script>

Web/src/pages/system/doc/seed/form.vue

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

Web/src/pages/system/doc/seed/index.vue

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

Web/src/pages/system/doc/seed/query.vue

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

Web/src/pages/system/doc/usage.vue

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

Web/src/pages/system/doc/use.vue

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