update 增加了开发文档的编写

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>