Web/src/pages/system/_seed/README.md

@@ -0,0 +1,5 @@
+/** 
+基本上所有列表页都可以通过拷贝此处的种子文件实现增删改查的功能
+所有带 ... 的注释是可以依据当前业务添加内容的地方
+其他所有尽量不要修改
+**/

Web/src/pages/system/_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/src/pages/system/_seed/editForm.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @close="onCancel"
+    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/src/pages/system/_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/src/pages/system/_seed/index.vue

@@ -0,0 +1,187 @@
+<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();
+      }
+      this.$refs.table.onLoaded();
+    },
+
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .testDeleteApi(record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        });
+    },
+  },
+};
+</script>

Web/src/pages/system/app/addForm.vue

@@ -0,0 +1,71 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen() {
+      this.visible = true;
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysAppAdd(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('新增成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/app/editForm.vue

@@ -0,0 +1,74 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysAppEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/app/form.vue

@@ -0,0 +1,63 @@
+<template>
+  <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-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,216 @@
+<template>
+  <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">
+        <Auth auth="sysApp:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增应用</a-button>
+        </Auth>
+        <span slot="active" slot-scope="text, record">
+          {{ bindCodeValue(text, 'yes_or_no') }}
+          <Auth auth="sysApp:setAsDefault" v-if="record.active == 'N'">
+            <yo-table-actions>
+              <span></span>
+              <a-popconfirm
+                @confirm="onSetDefault(record)"
+                placement="topRight"
+                title="是否确认设置为默认应用"
+              >
+                <a>设为默认</a>
+              </a-popconfirm>
+            </yo-table-actions>
+          </Auth>
+        </span>
+        <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysApp:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysApp: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: [
+        {
+          title: '应用名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+        },
+        {
+          title: '是否默认',
+          dataIndex: 'active',
+          scopedSlots: {
+            customRender: 'active',
+          },
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          scopedSlots: {
+            customRender: 'status',
+          },
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort',
+        },
+      ],
+      codes: [
+        {
+          code: 'yes_or_no',
+          values: [],
+        },
+        {
+          code: 'common_status',
+          values: [],
+        },
+      ],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    const flag = this.$auth({
+      sysApp: [['edit'], ['delete']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getAppPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'yes_or_no' }),
+          this.$api.sysDictTypeDropDownWait({ 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;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes.find((p) => p.code == name).values.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();
+      }
+      this.$refs.table.onLoaded();
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysAppSetAsDefault({ id: record.id }).then(({ success }) => {
+        this.onResult(success, '设置成功');
+      });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysAppDelete(record).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/config/addForm.vue

@@ -0,0 +1,78 @@
+<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() {
+      this.visible = true;
+        this.$nextTick(async () => {
+        await this.formBody.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysConfigAdd(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              this.confirmLoading = false;
+              if (success) {
+                this.$message.success('添加成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/config/editForm.vue

@@ -0,0 +1,74 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="编辑用户"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        this.$refs['form-body'].onFillData(record);
+
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysConfigEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/config/form.vue

@@ -0,0 +1,114 @@
+<template>
+  <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" :disabled="editDisabled">
+        <a-input placeholder="请输入唯一编码" v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item label="系统参数" prop="sysFlag">
+        <a-radio-group v-model="form.sysFlag" :disabled="editDisabled">
+          <a-radio-button value="Y">
+            <a-icon :style="{ color: '#1890ff' }" />是
+          </a-radio-button>
+          <a-radio-button value="N">
+            <a-icon :style="{ color: '#eb2f96' }" />否
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="所属分类" prop="groupCode">
+        <a-select placeholder="请选择所属分类" v-model="form.groupCode" :disabled="editDisabled">
+            <a-select-option
+                  :key="i"
+                  :value="item.code"
+                  v-for="(item, i) in groupCode"
+                >{{ item.value }}</a-select-option>
+              </a-select>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="参数值" prop="name">
+        <a-input placeholder="请输入参数值 " v-model="form.value" />
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input placeholder="请输入备注" v-model="form.remark" />
+      </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data() {
+    return {
+        editDisabled:false,
+    groupCode:[],
+      form: {
+        active: "N",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入应用名称" }],
+        code: [{ required: true, message: "请输入唯一编码" }],
+        sysFlag: [{ required: true, message: "请选择参数类型" }],
+        groupCode: [{ required: true, message: "请选择所属分类" }],
+        value: [{ required: true, message: "请输入参数值" }],
+      },
+    };
+  },
+  methods: {
+      moment,
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+      if(record.sysFlag == 'Y')
+      {
+          this.editDisabled = true
+      }else
+      {
+           this.editDisabled = false
+      }
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.groupCode = await this.onLoadgroupCodeData();
+      this.loading = false;
+    },
+
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+    
+    /**
+     * 
+     * 获取所属分类字典表的内容
+     */
+    
+    onLoadgroupCodeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+
+  },
+};
+</script>

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

@@ -0,0 +1,146 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="sysConfig: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">
+        <Auth auth="sysConfig: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="sysConfig:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysConfig:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+     <edit-form @ok="onReloadData" ref="edit-form" />
+    <add-form @ok="onReloadData" ref="add-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import editForm from './editForm';
+export default {
+components: {
+     AddForm,
+     editForm,
+   },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '参数名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+        },
+        {
+          title: '参数值',
+          dataIndex: 'value',
+        },
+        {
+          title: '所属分类',
+          dataIndex: 'groupCode',
+        },
+         {
+          title: '备注',
+          dataIndex: 'remark',
+        },
+        {
+          title: '操作',
+          width: '200px',
+          dataIndex: 'action',
+          scopedSlots: {
+            customRender: 'action',
+          },
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysConfigPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, 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.sysConfigDelete(record).then(({ success, message }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/dict/dictdata/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    width="800px"
+    class="yo-modal-form"
+    title="字典值管理"
+  >
+    <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="
+                    () => {
+                      (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">
+        <div class="yo-action-bar" slot="title">
+          <div class="yo-action-bar--actions">
+            <a-button @click="onOpen('add-form')">新增类型</a-button>
+          </div>
+        </div>
+         <span slot="status" slot-scope="text, record">
+             {{statusFilter(text)}}
+             </span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+              <a @click="onLoad('data-Index', record)">字典</a>
+            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
+              <a-dropdown>
+                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysDictType:edit">
+                    <a-menu-item>
+                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
+                        >编辑</a
+                      >
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysDictType:delete">
+                    </a-menu-item>
+                    <a-menu-item>
+                    <a-popconfirm
+                      @confirm="onDelete(record)"
+                      placement="topRight"
+                      title="是否确认删除"
+                    >
+                      <a>删除</a>
+                    </a-popconfirm>
+                     </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+     <!-- <data-Index ref="data-Index" @ok="onReloadData"/> -->
+     <!-- <add-form @ok="onReloadData" ref="add-form" />
+     <edit-form @ok="onReloadData" ref="edit-form" />
+      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
+      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
+  </container>
+  </a-modal>
+</template>
+<script>
+// import AddForm from './addForm';
+// import editForm from "./editForm";
+// import roleMenuForm from "./roleMenuForm";
+// import dataIndex from "./dictdata/index";
+export default {
+     components: {
+      //  dataIndex
+  //     AddForm,
+  //     editForm,
+  //     roleMenuForm,
+  //     roleOrgForm,
+     },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: "类型名称",
+          dataIndex: "name",
+        },
+        {
+          title: "唯一编码",
+          dataIndex: "code",
+        },
+        {
+          title: "排序",
+          dataIndex: "sort",
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          width: 200,
+        },
+        {
+          title: "状态",
+          dataIndex: "status",
+          scopedSlots: { customRender: "status" },
+        },
+        {
+          title: "操作",
+          width: "150px",
+          dataIndex: "action",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      visible:false,
+
+      statusDict: [],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+  },
+  methods: {
+    statusFilter(status) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.statusDict.filter((item) => item.code == status);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysDictDataPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          this.visible = true;
+          console.log(params)
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
+        .then((res) => {
+          this.statusDict = res[0].data;
+        });
+    },
+
+    bindCodeValue(code, name) {
+      const c = this.codes
+        .find((p) => p.code == name)
+        .values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onLoad(formName,record){
+      this.$refs[formName].loadData(record);
+    },
+    onResult(success, message, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      } else {
+        this.$refs.table.onLoaded();
+        this.$message.error(message);
+      }
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        .sysAppSetAsDefault({ id: record.id })
+        .then(({ success, message }) => {
+          this.onResult(success, message, "设置成功");
+        });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
+        this.onResult(success, message, "删除成功");
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,231 @@
+<template>
+  <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="
+                    () => {
+                      (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">
+        <div class="yo-action-bar" slot="title">
+          <div class="yo-action-bar--actions">
+            <a-button @click="onOpen('add-form')">新增类型</a-button>
+          </div>
+        </div>
+         <span slot="status" slot-scope="text, record">
+             {{statusFilter(text)}}
+             </span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+              <a @click="onLoad('data-Index', record)">字典</a>
+            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
+              <a-dropdown>
+                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysDictType:edit">
+                    <a-menu-item>
+                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
+                        >编辑</a
+                      >
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysDictType:delete">
+                    </a-menu-item>
+                    <a-menu-item>
+                    <a-popconfirm
+                      @confirm="onDelete(record)"
+                      placement="topRight"
+                      title="是否确认删除"
+                    >
+                      <a>删除</a>
+                    </a-popconfirm>
+                     </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+     <data-Index ref="data-Index" @ok="onReloadData"/>
+     <!-- <add-form @ok="onReloadData" ref="add-form" />
+     <edit-form @ok="onReloadData" ref="edit-form" />
+      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
+      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
+  </container>
+</template>
+<script>
+// import AddForm from './addForm';
+// import editForm from "./editForm";
+// import roleMenuForm from "./roleMenuForm";
+import dataIndex from "./dictdata/index";
+export default {
+     components: {
+       dataIndex
+  //     AddForm,
+  //     editForm,
+  //     roleMenuForm,
+  //     roleOrgForm,
+     },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: "类型名称",
+          dataIndex: "name",
+        },
+        {
+          title: "唯一编码",
+          dataIndex: "code",
+        },
+        {
+          title: "排序",
+          dataIndex: "sort",
+        },
+        {
+          title: "备注",
+          dataIndex: "remark",
+          width: 200,
+        },
+        {
+          title: "状态",
+          dataIndex: "status",
+          scopedSlots: { customRender: "status" },
+        },
+        {
+          title: "操作",
+          width: "150px",
+          dataIndex: "action",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      statusDict: [],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+  },
+  methods: {
+    statusFilter(status) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.statusDict.filter((item) => item.code == status);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysDictTypePage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          console.log(params)
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
+        .then((res) => {
+          this.statusDict = res[0].data;
+        });
+    },
+
+    bindCodeValue(code, name) {
+      const c = this.codes
+        .find((p) => p.code == name)
+        .values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onLoad(formName,record){
+      this.$refs[formName].loadData(record);
+    },
+    onResult(success, message, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      } else {
+        this.$refs.table.onLoaded();
+        this.$message.error(message);
+      }
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        .sysAppSetAsDefault({ id: record.id })
+        .then(({ success, message }) => {
+          this.onResult(success, message, "设置成功");
+        });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
+        this.onResult(success, message, "删除成功");
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/log/oplog/detailsForm.vue

@@ -0,0 +1,72 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    :width="1024"
+    @ok="onOk"
+    :footer="false"
+    title="日志详情"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen(record) {
+      this.visible = true;
+       this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+    //   this.$refs['form-body'].onValidate((valid) => {
+    //     if (valid) {
+    //       this.confirmLoading = true;
+    //       this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
+    //         this.confirmLoading = false;
+    //         if (success) {
+    //           this.$message.success('编辑成功');
+    //           this.onCancel();
+    //           this.$emit('ok');
+    //         } else {
+    //           this.$message.error(message);
+    //         }
+    //       });
+    //     }
+    //   });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/log/oplog/form.vue

@@ -0,0 +1,105 @@
+<template>
+<a-form-model :model="form"  class="yo-form" ref="form">
+  <a-descriptions bordered>
+    <a-descriptions-item label="方法名称" :span="1">
+      {{form.methodName}}
+    </a-descriptions-item>
+    <a-descriptions-item label="地址" :span="2">
+      {{form.location}}
+    </a-descriptions-item>
+    <a-descriptions-item label="浏览器">
+      {{form.browser}}
+    </a-descriptions-item>
+    <a-descriptions-item label="操作系统" :span="2">
+      {{form.os}}
+    </a-descriptions-item>
+    <a-descriptions-item label="类名称" :span="3">
+      {{form.className}}
+    </a-descriptions-item>
+    <a-descriptions-item label="返回结果" :span="3">
+      {{form.result}}
+    </a-descriptions-item>
+      <a-descriptions-item label="请求参数" :span="3">
+      {{form.param}}
+    </a-descriptions-item>
+        <a-descriptions-item label="具体消息" :span="3">
+      {{form.message}}
+    </a-descriptions-item>
+  </a-descriptions>
+  </a-form-model> 
+  <!-- <a-form-model :model="form"  class="yo-form" ref="form">
+    <a-row :gutter="16">
+      <a-col :span="10">
+        <div class="yo-form-group">
+          <a-form-model-item label="方法名称" prop="methodName">
+            <a-input v-model="form.methodName" />
+          </a-form-model-item>
+          <a-form-model-item label="地址" prop="location">
+            <a-input v-model="form.location" />
+          </a-form-model-item>
+                    <a-form-model-item label="类名称" prop="className">
+            <a-textarea :rows="4" v-model="form.className" />
+          </a-form-model-item>
+          <a-form-model-item label="返回结果" prop="result">
+            <a-textarea :rows="4" v-model="form.result" />
+          </a-form-model-item>
+        </div>
+      </a-col>
+      <a-col :span="14">
+        <div class="yo-form-group">
+          <a-form-model-item label="浏览器" prop="browser">
+            <a-input v-model="form.browser" />
+          </a-form-model-item>
+          <a-form-model-item label="操作系统" prop="os">
+            <a-input v-model="form.os" />
+          </a-form-model-item>
+          <a-form-model-item label="请求参数" prop="param">
+            <a-textarea :rows="4" v-model="form.param" />
+          </a-form-model-item>
+          <a-form-model-item label="具体消息" prop="message">
+            <a-textarea :rows="4" v-model="form.message" />
+          </a-form-model-item>
+        </div>
+      </a-col>
+    </a-row>
+  </a-form-model> -->
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: "N",
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

Web/src/pages/system/log/oplog/index.vue

@@ -0,0 +1,241 @@
+<template>
+  <container>
+          <br />
+      <a-alert banner closable type="error">
+        <template slot="message">后端bug:任何操作的操作类型都是增加</template>
+      </a-alert>
+       <br />
+      <a-alert banner closable type="warning">
+        <template slot="message">详情的确认按钮没功能</template>
+      </a-alert>
+      <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">
+        <div class="yo-action-bar" slot="title">
+          <Auth auth="sysApp:delete">
+            <div class="yo-action-bar--actions">
+              <a-popconfirm
+                @confirm="sysVisLogDelete()"
+                placement="topRight"
+                title="确认清空日志？"
+              >
+                <a-button>清空日志</a-button>
+              </a-popconfirm>
+            </div>
+          </Auth>
+        </div>
+        <span slot="opType" slot-scope="text">
+          {{ opTypeFilter(text) }}
+        </span>
+        <span slot="success" slot-scope="text">
+          {{ successFilter(text) }}
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <a @click="onOpen('details-Form', record)">详情</a>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+      <details-Form ref="details-Form" />
+    </a-card>
+    <br />
+  </container>
+</template>
+<script>
+import detailsForm from "./detailsForm";
+export default {
+  components: {
+    detailsForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: "日志名称",
+          dataIndex: "name",
+        },
+        {
+          title: "操作类型",
+          dataIndex: "opType",
+          scopedSlots: { customRender: "opType" },
+        },
+        {
+          title: "是否成功",
+          dataIndex: "success",
+          scopedSlots: { customRender: "success" },
+        },
+        {
+          title: "ip",
+          dataIndex: "ip",
+        },
+        {
+          title: "请求地址",
+          dataIndex: "url",
+          scopedSlots: { customRender: "url" },
+        },
+        {
+          title: "操作时间",
+          dataIndex: "opTime",
+          scopedSlots: { customRender: "opTime" },
+        },
+        {
+          title: "操作人",
+          dataIndex: "account",
+        },
+        {
+          title: "详情",
+          dataIndex: "action",
+          width: "150px",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      opTypeDict: [],
+      successDict: [],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+  },
+  methods: {
+    opTypeFilter(result) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.opTypeDict.filter((item) => item.code == result);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    sysVisLogDelete() {
+      this.$api.sysOpLogDelete().then((res) => {
+        if (res.success) {
+          this.$message.success("清空成功");
+          this.onReloadData();
+        } else {
+          this.$message.error("清空失败：" + res.message);
+        }
+      });
+    },
+    successFilter(result) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.successDict.filter((item) => item.code == result);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysOpLogPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
+          this.$api.sysDictTypeDropDownWait({ code: "op_type" }),
+        ])
+        .then(([yesOrNo, commonStatus]) => {
+          this.opTypeDict = commonStatus.data;
+          this.successDict = yesOrNo.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes
+        .find((p) => p.code == name)
+        .values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onResult(success, message, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      } else {
+        this.$refs.table.onLoaded();
+        this.$message.error(message);
+      }
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        .sysAppSetAsDefault({ id: record.id })
+        .then(({ success, message }) => {
+          this.onResult(success, message, "设置成功");
+        });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysRoleDel(record).then(({ success, message }) => {
+        this.onResult(success, message, "删除成功");
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/log/vislog/detailsForm.vue

@@ -0,0 +1,72 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="日志详情"
+    :footer="false"
+  >
+    <FormBody ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen(record) {
+      this.visible = true;
+       this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+    //   this.$refs['form-body'].onValidate((valid) => {
+    //     if (valid) {
+    //       this.confirmLoading = true;
+    //       this.$api.sysRoleAdd(this.$refs['form-body'].form).then(({ success, message }) => {
+    //         this.confirmLoading = false;
+    //         if (success) {
+    //           this.$message.success('编辑成功');
+    //           this.onCancel();
+    //           this.$emit('ok');
+    //         } else {
+    //           this.$message.error(message);
+    //         }
+    //       });
+    //     }
+    //   });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/log/vislog/form.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-form-model :model="form"  class="yo-form" ref="form">
+      <a-form-model-item label="具体消息" prop="message">
+         <a-textarea :rows="4" v-model="form.message" />
+      </a-form-model-item>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

Web/src/pages/system/log/vislog/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <container>
+    <br />
+    <a-alert banner closable type="warning">
+      <template slot="message">详情的确认按钮没功能</template>
+    </a-alert>
+    <br />
+    <a-alert banner closable type="warning">
+      <template slot="message"
+        >页面刷新的时候也会有保存登录日志，但是没有ip显示</template
+      >
+    </a-alert>
+    <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">
+        <div class="yo-action-bar" slot="title">
+          <Auth auth="sysApp:delete">
+            <div class="yo-action-bar--actions">
+              <a-popconfirm
+                @confirm="sysVisLogDelete()"
+                placement="topRight"
+                title="确认清空日志？"
+              >
+                <a-button>清空日志</a-button>
+              </a-popconfirm>
+            </div>
+          </Auth>
+        </div>
+        <span slot="visType" slot-scope="text">
+          {{ visTypeFilter(text) }}
+        </span>
+        <span slot="success" slot-scope="text">
+          {{ successFilter(text) }}
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <span slot="action" >
+            <a @click="onOpen('details-Form', record)">详情</a>
+          </span>
+        </span>
+      </yo-table>
+      <details-Form ref="details-Form" />
+    </a-card>
+    <br />
+  </container>
+</template>
+<script>
+import detailsForm from "./detailsForm";
+export default {
+  components: {
+    detailsForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: "日志名称",
+          dataIndex: "name",
+        },
+        {
+          title: "访问类型",
+          dataIndex: "visType",
+          scopedSlots: { customRender: "visType" },
+        },
+        {
+          title: "是否成功",
+          dataIndex: "success",
+          scopedSlots: { customRender: "success" },
+        },
+        {
+          title: "ip",
+          dataIndex: "ip",
+        },
+        {
+          title: "浏览器",
+          dataIndex: "browser",
+        },
+        {
+          title: "访问时间",
+          dataIndex: "visTime",
+          scopedSlots: { customRender: "visTime" },
+        },
+        {
+          title: "访问人",
+          dataIndex: "account",
+        },
+        {
+          title: "详情",
+          width: "200px",
+          dataIndex: "action",
+          scopedSlots: {
+            customRender: "action",
+          },
+        },
+      ],
+      visTypeDict: [],
+      successDict: [],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+  },
+  methods: {
+    visTypeFilter(result) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.visTypeDict.filter((item) => item.code == result);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    sysVisLogDelete() {
+      this.$api.sysVisLogDelete().then((res) => {
+        if (res.success) {
+          this.$message.success("清空成功");
+          this.onReloadData();
+        } else {
+          this.$message.error("清空失败：" + res.message);
+        }
+      });
+    },
+    successFilter(result) {
+      // eslint-disable-next-line eqeqeq
+      const values = this.successDict.filter((item) => item.code == result);
+      if (values.length > 0) {
+        return values[0].value;
+      }
+    },
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysVisLogPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: "yes_or_no" }),
+          this.$api.sysDictTypeDropDownWait({ code: "vis_type" }),
+        ])
+        .then(([yesOrNo, commonStatus]) => {
+          this.visTypeDict = commonStatus.data;
+          this.successDict = yesOrNo.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes
+        .find((p) => p.code == name)
+        .values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record);
+    },
+
+    onResult(success, message, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
+      } else {
+        this.$refs.table.onLoaded();
+        this.$message.error(message);
+      }
+    },
+
+    onSetDefault(record) {
+      this.$refs.table.onLoading();
+      this.$api
+        .sysAppSetAsDefault({ id: record.id })
+        .then(({ success, message }) => {
+          this.onResult(success, message, "设置成功");
+        });
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysRoleDel(record).then(({ success, message }) => {
+        this.onResult(success, message, "删除成功");
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/menu/addForm.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-drawer
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="800"
+    @close="onClose"
+    @ok="onOk"
+    class="yo-drawer-form"
+    title="新增菜单"
+  >
+    <FormBody ref="form-body" />
+    <div class="ant-drawer-footer">
+      <a-button @click="onClose">取消</a-button>
+      <a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
+    </div>
+  </a-drawer>
+</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
+          .sysMenuAdd(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('新增成功');
+              this.onClose();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onClose() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/menu/editForm.vue

@@ -0,0 +1,83 @@
+<template>
+  <a-drawer
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="800"
+    @close="onClose"
+    class="yo-drawer-form"
+    title="编辑应用"
+  >
+    <FormBody ref="form-body" />
+    <div class="ant-drawer-footer">
+      <a-button @click="onClose">取消</a-button>
+      <a-button :loading="confirmLoading" @click="onOk" type="primary">确定</a-button>
+    </div>
+  </a-drawer>
+</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
+          .sysMenuEdit(data)
+          .then(({ success }) => {
+            if (success) {
+              this.$message.success('编辑成功');
+              this.onClose();
+              this.$emit('ok');
+            }
+          })
+          .finally(() => {
+            this.confirmLoading = false;
+          });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onClose() {
+      this.formBody.onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/menu/form.vue

@@ -0,0 +1,297 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-alert type="warning">
+        <template slot="message">当前没有写入字段[重定向]</template>
+      </a-alert>
+      <br />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <h3>基本信息</h3>
+        <div class="yo-form-group">
+          <a-form-model-item label="菜单类型" prop="type">
+            <template slot="help">
+              目录：默认添加在顶级
+              <br />菜单：
+              <br />按钮：
+            </template>
+            <a-radio-group @change="onTypeChange" v-model="form.type">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.menuType"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <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="application">
+            <a-select
+              @change="onChangeApplication"
+              placeholder="请选择所属应用"
+              v-model="form.application"
+            >
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                v-for="item in appList"
+              >{{item.name}}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <!-- 父级菜单只有[目录]不可用 -->
+          <a-form-model-item label="父级菜单" prop="pid" v-if="form.type != 0">
+            <a-tree-select
+              :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
+              :tree-data="parentTreeData"
+              placeholder="请选择父级菜单"
+              v-model="form.pid"
+            />
+          </a-form-model-item>
+        </div>
+
+        <h3>扩展信息</h3>
+        <div class="yo-form-group">
+          <a-form-model-item label="打开方式" prop="openType" v-if="form.type == 1">
+            <a-radio-group @change="onOpenTypeChange" v-model="form.openType">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.openType"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <!-- 前端组件只有[菜单]及[组件]可用 -->
+          <a-form-model-item
+            label="前端组件"
+            prop="component"
+            v-if="form.type == 1 && form.openType == 1"
+            v-show="form.type == 1 && form.openType == 1"
+          >
+            <a-input placeholder="请输入前端组件" v-model="form.component" />
+          </a-form-model-item>
+          <!-- 内链地址只有[菜单]及[内链]可用 -->
+          <a-form-model-item label="内链地址" prop="router" v-if="form.type == 1 && form.openType == 2">
+            <a-input placeholder="请输入内链地址" v-model="form.router" />
+          </a-form-model-item>
+          <!-- 外链地址只有[菜单]及[外链]可用 -->
+          <a-form-model-item label="内外链地址" prop="link" v-if="form.type == 1 && form.openType == 3">
+            <a-input placeholder="请输入内外链地址" v-model="form.link" />
+          </a-form-model-item>
+          <a-form-model-item label="权重" prop="weight">
+            <template slot="help">
+              系统权重：菜单可分配给任何角色
+              <br />业务权重：菜单对超级管理员不可见
+            </template>
+            <a-radio-group v-model="form.weight">
+              <a-radio-button
+                :key="type.code"
+                :value="type.code"
+                v-for="type in codes.menuWerght"
+              >{{type.value}}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item label="可见性">
+            <a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
+          </a-form-model-item>
+          <!-- 图标只有[按钮]不可用 -->
+          <a-form-model-item label="图标" v-if="form.type != 2"></a-form-model-item>
+          <a-form-model-item label="排序">
+            <a-input-number
+              :max="1000"
+              :min="0"
+              class="w-100-p"
+              placeholder="请输入排序"
+              v-model="form.sort"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="备注信息">
+            <a-textarea placeholder="请输入备注信息" v-model="form.remark" />
+          </a-form-model-item>
+        </div>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {
+        type: '1',
+        openType: '1',
+        weight: '2',
+        visible: true,
+        sort: 100,
+      },
+      /** 验证格式 */
+      rules: {
+        type: [{ required: true, message: '请选择菜单类型' }],
+        name: [{ required: true, message: '请输入名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+        application: [{ required: true, message: '请选择所属应用' }],
+        pid: [{ required: true, message: '请选择父级' }],
+        component: [{ required: true, message: '请输入前端组件' }],
+        router: [{ required: true, message: '请输入内链地址' }],
+        link: [{ required: true, message: '请输入外链地址' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+
+      /** 其他成员属性 */
+      /** ... */
+      appList: [],
+      codes: {
+        menuType: [],
+        menuWerght: [],
+        openType: [],
+      },
+
+      parentTreeData: [],
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+        visible: record.visible == 'Y',
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /** ... */
+            record.visible = record.visible ? 'Y' : 'N';
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /** ... */
+        this.parentTreeData = [];
+      }, 300);
+    },
+
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit() {
+      this.loading = true;
+
+      /** 可以在这里await获取一些异步数据 */
+      /** ...BEGIN */
+      this.codes = await this.onLoadCodes();
+      this.appList = await this.onLoadSysApplist();
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /** ... */
+    onLoadCodes() {
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'open_type' }),
+        ])
+        .then(([menuType, menuWerght, openType]) => {
+          return {
+            menuType: menuType.data,
+            menuWerght: menuWerght.data,
+            openType: openType.data,
+          };
+        });
+    },
+
+    onLoadSysApplist() {
+      return this.$api.getAppList().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onTypeChangeGroup() {
+      const { type, openType } = this.form;
+      if (type == 1 && openType == 2) {
+        this.$set(this.form, 'component', 'iframe');
+      } else {
+        this.$set(this.form, 'component', '');
+      }
+    },
+
+    onTypeChange() {
+      this.onTypeChangeGroup();
+
+      if (this.form.type == 0 || this.form.type == 2) {
+        this.form.openType = '0';
+      } else {
+        this.form.openType = '1';
+      }
+    },
+
+    onOpenTypeChange() {
+      this.onTypeChangeGroup();
+    },
+
+    onChangeApplication(value) {
+      this.$api.getMenuTree({ application: value }).then(({ data }) => {
+        this.parentTreeData = [
+          {
+            id: -1,
+            parentId: 0,
+            title: '顶级',
+            value: 0,
+            pid: 0,
+            children: data,
+          },
+        ];
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,194 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <yo-table :columns="columns" :load-data="loadData" ref="table">
+        <Auth auth="sysMenu:add" slot="operator">
+          <a-button @click="onOpen('add-form')" icon="plus">新增菜单</a-button>
+        </Auth>
+        <span slot="type" slot-scope="text">{{ bindCodeValue(text, 'menu_type') }}</span>
+        <span slot="icon" slot-scope="text">
+          <div v-if="text">
+            <a-icon :type="text" />
+          </div>
+        </span>
+        <span slot="action" slot-scope="text, record">
+          <yo-table-actions>
+            <Auth auth="sysMenu:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysMenu: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: [
+        {
+          title: '菜单名称',
+          width: '220px',
+          dataIndex: 'name',
+        },
+        {
+          title: '菜单类型',
+          width: '100px',
+          dataIndex: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '图标',
+          width: '100px',
+          dataIndex: 'icon',
+          scopedSlots: { customRender: 'icon' },
+        },
+        {
+          title: '前端组件',
+          width: '220px',
+          dataIndex: 'component',
+          ellipsis: true,
+        },
+        {
+          title: '权限标识',
+          width: '220px',
+          dataIndex: 'permission',
+          ellipsis: true,
+        },
+        {
+          title: '排序',
+          width: '100px',
+          dataIndex: 'sort',
+        },
+      ],
+      codes: [
+        {
+          code: 'menu_type',
+          values: [],
+        },
+        {
+          code: 'menu_weight',
+          values: [],
+        },
+        {
+          code: 'open_type',
+          values: [],
+        },
+      ],
+    };
+  },
+  created() {
+    this.onLoadCodes();
+
+    const flag = this.$auth({
+      sysApp: [['edit'], ['delete']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getMenuList({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_type' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'menu_weight' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'open_type' }),
+        ])
+        .then(([menuType, menuWerght, openType]) => {
+          this.codes.find((p) => p.code === 'menu_type').values = menuType.data;
+          this.codes.find((p) => p.code === 'menu_weight').values = menuWerght.data;
+          this.codes.find((p) => p.code === 'open_type').values = openType.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes.find((p) => p.code == name).values.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();
+      }
+      this.$refs.table.onLoaded();
+    },
+
+    onDelete(record) {
+      this.$refs.table.onLoading();
+      this.$api.sysMenuDelete(record).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/org/addForm.vue

@@ -0,0 +1,85 @@
+<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, orgId) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+
+        // 获取外部选中的部门id
+        this.formBody.onFillData({
+          pid: orgId,
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysOrgAdd(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('新增成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/org/editForm.vue

@@ -0,0 +1,75 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.$refs['form-body'].onInit();
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysOrgEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/org/form.vue

@@ -0,0 +1,96 @@
+<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">
+        <a-form-model-item has-feedback label="机构名称" prop="name">
+          <a-input placeholder="请输入机构名称" v-model="form.name" />
+        </a-form-model-item>
+        <a-form-model-item has-feedback label="唯一编码" prop="code">
+          <a-input placeholder="请输入唯一编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item has-feedback label="上级机构" prop="pid">
+          <a-tree-select
+            :tree-data="orgData"
+            placeholder="请选择上级机构"
+            tree-default-expand-all
+            v-model="form.pid"
+          />
+        </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>
+        <a-form-model-item label="备注">
+          <a-textarea placeholder="请输入备注" v-model="form.remark" />
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      rules: {
+        name: [{ required: true, message: '请输入机构名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+        pid: [{ required: true, message: '请选择上级机构' }],
+      },
+
+      loading: false,
+
+      orgData: [],
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgData = await this.onLoadOrgData();
+      this.loading = false;
+    },
+
+    onLoadOrgData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onChangeExtData(value, record, type) {
+      record[type] = value;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,185 @@
+<template>
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
+    <container>
+      <br />
+      <a-card :bordered="false">
+        <Auth auth="sysOrg:page">
+          <div class="yo-query-bar">
+            <a-form-model :model="query" layout="inline">
+              <a-form-model-item label="机构名称">
+                <a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
+              </a-form-model-item>
+              <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="sysOrg: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="sysOrg:edit">
+                  <a @click="onOpen('edit-form', record)">编辑</a>
+                </Auth>
+                <Auth auth="sysOrg:delete">
+                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                    <a>删除</a>
+                  </a-popconfirm>
+                </Auth>
+              </yo-table-actions>
+            </span>
+          </yo-table>
+        </Auth>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
+</template>
+<script>
+import YoTreeLayout from '@/components/yoTreeLayout';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    YoTreeLayout,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '机构名称',
+          width: '400px',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          width: '200px',
+          dataIndex: 'code',
+        },
+        {
+          title: '排序',
+          width: '80px',
+          dataIndex: 'sort',
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+        },
+      ],
+    };
+  },
+
+  created() {
+    const flag = this.$auth({
+      sysOrg: [['edit'], ['delete']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api.getOrgTree().then((res) => {
+        return res.data;
+      });
+    },
+
+    onSelect([id]) {
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getOrgPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    onReset() {
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['pid']);
+    },
+
+    onDelete(record) {
+      this.$api.sysOrgDelete(record).then(({ success }) => {
+        if (success) {
+          this.$message.success('删除成功');
+          this.onReloadData();
+          if (this.query['pid'] == record.id) {
+            delete this.query.pid;
+          }
+        }
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/pos/addForm.vue

@@ -0,0 +1,74 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen() {
+      this.visible = true;
+    //   this.$nextTick(() => {
+    //     this.$refs['form-body'].onFillData(record);
+    //   });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysPosAdd(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              this.confirmLoading = false;
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/pos/editForm.vue

@@ -0,0 +1,74 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysPosEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              this.confirmLoading = false;
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/pos/form.vue

@@ -0,0 +1,70 @@
+<template>
+  <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>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
+        </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,143 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="sysPos: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">
+        <Auth auth="sysPos: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="sysPos:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysPos:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+    <add-form @ok="onReloadData" ref="add-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import editForm from './editForm';
+export default {
+  components: {
+    AddForm,
+    editForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '职位名称',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort',
+        },
+        {
+          title: '备注',
+          dataIndex: 'remark',
+        },
+        {
+          title: '操作',
+          width: '200px',
+          dataIndex: 'action',
+          scopedSlots: {
+            customRender: 'action',
+          },
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .sysPosPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, 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.sysPosDelete(record).then(({ success, message }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/role/addForm.vue

@@ -0,0 +1,71 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen() {
+      this.visible = true;
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysRoleAdd(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              this.confirmLoading = false;
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/role/editForm.vue

@@ -0,0 +1,75 @@
+<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,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysRoleEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              this.confirmLoading = false;
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/role/form.vue

@@ -0,0 +1,70 @@
+<template>
+  <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>
+        <a-form-model-item
+          label="备注"
+          prop="remark"
+        >
+          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注"></a-textarea>
+        </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        active: 'N',
+      },
+      rules: {
+        name: [{ required: true, message: '请输入应用名称' }],
+        code: [{ required: true, message: '请输入唯一编码' }],
+      },
+    };
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,171 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <Auth auth="sysRole: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">
+        <Auth auth="sysRole: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="sysRole:edit">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysRole:delete">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <Auth :auth="{ sysRole: [['grantMenu'], ['grantData']] }">
+              <a-dropdown placement="bottomRight">
+                <a class="ant-dropdown-link">
+                  授权
+                  <a-icon type="down" />
+                </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysRole:grantMenu">
+                    <a-menu-item>
+                      <a @click="onOpen('menu-form', record)">授权菜单</a>
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysRole:grantData">
+                    <a-menu-item>
+                      <a @click="onOpen('org-form', record)">授权数据</a>
+                    </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+          </yo-table-actions>
+        </span>
+      </yo-table>
+    </a-card>
+    <br />
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+    <menu-form @ok="onReloadData" ref="menu-form" />
+    <org-form @ok="onReloadData" ref="org-form" />
+  </container>
+</template>
+<script>
+import AddForm from './addForm';
+import editForm from './editForm';
+import menuForm from './menuForm';
+import orgForm from './orgForm';
+export default {
+  components: {
+    AddForm,
+    editForm,
+    menuForm,
+    orgForm,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '角色名',
+          dataIndex: 'name',
+        },
+        {
+          title: '唯一编码',
+          dataIndex: 'code',
+        },
+        {
+          title: '排序',
+          dataIndex: 'sort',
+        },
+      ],
+    };
+  },
+  created() {
+    const flag = this.$auth({
+      sysRole: [['edit'], ['delete'], ['grantMenu'], ['grantData']],
+    });
+
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '200px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
+  },
+  methods: {
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getRolePage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, 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.sysRoleDel(record).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+  },
+};
+</script>

Web/src/pages/system/role/menuForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="1200"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="授权菜单"
+  >
+    <yo-authority-view
+      :auto-load="false"
+      :default-selected-keys="selectedKeys"
+      :load-data="loadData"
+      @select="onSelect"
+      ref="authority-view"
+    />
+  </a-modal>
+</template>
+
+<script>
+import YoAuthorityView from '@/components/yoAuthorityView';
+
+export default {
+  components: {
+    YoAuthorityView,
+  },
+
+  data() {
+    return {
+      visible: false,
+
+      record: {},
+      selectedKeys: [],
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.record = record;
+
+      this.$nextTick(async () => {
+        const view = this.$refs['authority-view'];
+        view.loading = true;
+        view.data = [];
+        this.selectedKeys = await this.onLoadRoleOwnMenu();
+        view.onReloadData();
+      });
+    },
+
+    loadData() {
+      return this.$api.SysMenuTreeForGrant().then((res) => {
+        return res.data;
+      });
+    },
+
+    /**
+     * 此角色已有菜单权限
+     */
+    onLoadRoleOwnMenu() {
+      return this.$api.sysRoleOwnMenu({ id: this.record.id }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    onSelect(a1, a2) {
+      this.selectedKeys = a2;
+    },
+
+    onOk() {
+      this.confirmLoading = true;
+
+      this.$api
+        .sysRoleGrantMenu({
+          id: this.record.id,
+          grantMenuIdList: this.selectedKeys,
+        })
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('授权成功');
+            this.$emit('ok');
+            this.onCancel();
+          }
+        })
+        .finally((res) => {
+          this.confirmLoading = false;
+        });
+    },
+
+    onCancel() {
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/role/orgForm.vue

@@ -0,0 +1,170 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="600"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="授权数据"
+  >
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+        <div class="yo-form-group">
+          <a-form-model-item has-feedback label="授权范围" prop="dataScopeType">
+            <a-select placeholder="请选择授权范围" v-model="form.dataScopeType">
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                @click="onChange(item.code)"
+                v-for="item in dataScopeTypeData"
+              >{{ item.value }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="选择机构" v-show="orgTreeShow">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="orgTreeData"
+              placeholder="请选择机构"
+              tree-checkable
+              v-model="checkedKeys"
+            />
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      loading: true,
+
+      record: {},
+
+      form: {
+        dataScopeType: '',
+      },
+      rules: {
+        dataScopeType: [{ required: true, message: '请选择授权范围' }],
+      },
+
+      SHOW_PARENT,
+      orgTreeData: [],
+
+      checkedKeys: [],
+      dataScopeTypeData: [],
+      orgTreeShow: false,
+      replaceFields: {
+        key: 'id',
+      },
+    };
+  },
+
+  methods: {
+    async onOpen(record) {
+      this.visible = true;
+      this.record = record;
+
+      this.loading = true;
+
+      await this.onLoadCodes();
+      this.form.dataScopeType = record.dataScopeType.toString();
+
+      await this.onChange(record.dataScopeType);
+
+      this.loading = false;
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      return this.$api
+        .$queue([this.$api.sysDictTypeDropDownWait({ code: 'data_scope_type' })])
+        .then(([dataScopeType]) => {
+          this.dataScopeTypeData = dataScopeType.data;
+        });
+    },
+
+    async onChange(value) {
+      if (value == '5') {
+        this.loading = true;
+        this.orgTreeShow = true;
+        // 获取机构树
+        this.orgTreeData = await this.onLoadTreeData();
+        // 已关联数据
+        this.checkedKeys = await this.onLoadRoleOwn();
+
+        this.loading = false;
+      } else {
+        this.orgTreeShow = false;
+        // 清理已选中机构
+        this.checkedKeys = [];
+      }
+    },
+
+    /**
+     * 获取机构树
+     */
+    onLoadTreeData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    /**
+     * 此角色已有数据列表
+     */
+    onLoadRoleOwn() {
+      return this.$api.sysRoleOwnData({ id: this.record.id }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    onOk() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysRoleGrantData({
+              id: this.record.id,
+              grantOrgIdList: this.checkedKeys,
+              dataScopeType: this.form.dataScopeType,
+            })
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('授权成功');
+                this.$emit('ok');
+                this.onCancel();
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+    onCancel() {
+      this.visible = false;
+
+      setTimeout(() => {
+        this.record = {};
+        this.checkedKeys = [];
+        this.dataScopeTypeData = [];
+        this.orgTreeShow = false;
+        this.form = {};
+
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+  },
+};
+</script>

Web/src/pages/system/user/addForm.vue

@@ -0,0 +1,88 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="1024"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="新增应用"
+  >
+    <FormBody mode="add" 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, id) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.formBody.onInit();
+
+        // 获取外部选中的部门id
+        this.formBody.onFillData({
+          sysEmpParam: {
+            orgId: id,
+          },
+        });
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.formBody.onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysUserAdd(this.formBody.form)
+            .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/src/pages/system/user/editForm.vue

@@ -0,0 +1,75 @@
+<template>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    :width="1024"
+    @cancel="onCancel"
+    @ok="onOk"
+    title="编辑用户"
+  >
+    <FormBody mode="eidt" ref="form-body" />
+  </a-modal>
+</template>
+<script>
+import FormBody from './form';
+
+export default {
+  components: {
+    FormBody,
+  },
+  data() {
+    return {
+      visible: false,
+
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口,并填充外部传入的数据
+     */
+    onOpen(record) {
+      this.visible = true;
+      this.$nextTick(async () => {
+        await this.$refs['form-body'].onInit();
+        this.$refs['form-body'].onFillData(record);
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.$refs['form-body'].onValidate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          this.$api
+            .sysUserEdit(this.$refs['form-body'].form)
+            .then(({ success }) => {
+              if (success) {
+                this.$message.success('编辑成功');
+                this.onCancel();
+                this.$emit('ok');
+              }
+            })
+            .finally(() => {
+              this.confirmLoading = false;
+            });
+        }
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.$refs['form-body'].onResetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>

Web/src/pages/system/user/form.vue

@@ -0,0 +1,279 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-row :gutter="16">
+        <a-col :span="10">
+          <h3>基本信息</h3>
+          <div class="yo-form-group">
+            <a-form-model-item label="账号" prop="account">
+              <a-input placeholder="请输入账号" v-model="form.account" />
+            </a-form-model-item>
+            <a-form-model-item label="姓名" prop="name">
+              <a-input placeholder="请输入姓名" v-model="form.name" />
+            </a-form-model-item>
+            <template v-if="mode == 'add'">
+              <a-form-model-item label="密码" prop="password">
+                <a-input-password placeholder="请输入密码" v-model="form.password" />
+              </a-form-model-item>
+              <a-form-model-item label="确认密码" prop="confirm">
+                <a-input-password placeholder="请确认密码" v-model="form.confirm" />
+              </a-form-model-item>
+            </template>
+            <a-form-model-item label="昵称">
+              <a-input placeholder="请输入昵称" v-model="form.nickName" />
+            </a-form-model-item>
+            <a-form-model-item label="生日">
+              <a-date-picker
+                @change="(date) => form.birthday = date ? moment(date).format('YYYY-MM-DD') : undefined"
+                class="w-100-p"
+                placeholder="请选择生日"
+                v-model="form.birthday"
+              />
+            </a-form-model-item>
+            <a-form-model-item label="性别" prop="sex">
+              <a-radio-group v-model="form.sex">
+                <a-radio-button :value="1">
+                  <a-icon :style="{ color: '#1890ff' }" type="man" />男
+                </a-radio-button>
+                <a-radio-button :value="2">
+                  <a-icon :style="{ color: '#eb2f96' }" type="woman" />女
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="邮箱" prop="email">
+              <a-input placeholder="请输入邮箱" v-model="form.email" />
+            </a-form-model-item>
+            <a-form-model-item label="手机号" prop="phone">
+              <a-input placeholder="请输入手机号" v-model="form.phone" />
+            </a-form-model-item>
+            <a-form-model-item label="电话" prop="tel">
+              <a-input placeholder="请输入电话" v-model="form.tel" />
+            </a-form-model-item>
+          </div>
+        </a-col>
+        <a-col :span="14">
+          <h3>员工信息</h3>
+          <div class="yo-form-group">
+            <a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
+              <a-tree-select
+                :tree-data="orgData"
+                placeholder="请选择所属组织机构"
+                treeDefaultExpandAll
+                v-model="form.sysEmpParam.orgId"
+              />
+            </a-form-model-item>
+            <a-form-model-item label="工号">
+              <a-input placeholder="请输入工号" v-model="form.sysEmpParam.jobNum" />
+            </a-form-model-item>
+            <a-form-model-item label="职位信息" prop="sysEmpParam.posIdList">
+              <a-select mode="multiple" placeholder="请选择职位信息" v-model="form.sysEmpParam.posIdList">
+                <a-select-option
+                  :key="i"
+                  :value="item.id"
+                  v-for="(item, i) in posData"
+                >{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </div>
+          <h4>附加信息</h4>
+          <a-table
+            :columns="extColumns"
+            :data-source="form.sysEmpParam.extIds"
+            :pagination="false"
+            size="small"
+          >
+            <template slot="footer">
+              <a-button @click="onAddExtData" block icon="plus" type="dashed">新增一项</a-button>
+            </template>
+            <template slot="orgId" slot-scope="text, record">
+              <a-tree-select
+                :default-value="text"
+                :tree-data="orgData"
+                @change="value => onChangeExtData(value, record, 'orgId')"
+                placeholder="请选择附加组织机构"
+                tree-default-expand-all
+              />
+            </template>
+            <template slot="posId" slot-scope="text, record">
+              <a-select
+                :default-value="text"
+                @change="value => onChangeExtData(value, record, 'posId')"
+                placeholder="请选择附加职位信息"
+              >
+                <a-select-option
+                  :key="i"
+                  :value="item.id"
+                  v-for="(item, i) in posData"
+                >{{ item.name }}</a-select-option>
+              </a-select>
+            </template>
+            <template slot="action" slot-scope="text, record">
+              <a-button @click="onRemoveExtData(record)" size="small" type="danger">删除</a-button>
+            </template>
+          </a-table>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+import moment from 'moment';
+
+const validateToNextPassword = (rule, value, callback) => {
+  callback();
+};
+const compareToFirstPassword = (rule, value, callback) => {
+  callback();
+};
+
+export default {
+  props: ['mode'],
+
+  data() {
+    return {
+      form: {
+        sysEmpParam: {},
+      },
+      rules: {
+        account: [{ required: true, min: 5, message: '请输入至少五个字符的账号' }],
+        name: [{ required: true, message: '请输入姓名' }],
+        password: [
+          { required: true, min: 5, message: '请输入至少五个字符的密码' },
+          { validator: validateToNextPassword },
+        ],
+        confirm: [{ required: true, message: '请确认密码' }, { validator: compareToFirstPassword }],
+        sex: [{ required: true, message: '请选择性别' }],
+        phone: [{ required: true, message: '请输入手机号' }],
+        'sysEmpParam.orgId': [{ required: true, message: '请选择所属组织机构' }],
+        'sysEmpParam.posIdList': [{ required: true, message: '请选择职位信息' }],
+      },
+
+      loading: false,
+
+      orgData: [],
+      posData: [],
+
+      extColumns: [
+        {
+          title: '附属机构',
+          dataIndex: 'orgId',
+          width: '45%',
+          scopedSlots: { customRender: 'orgId' },
+        },
+        {
+          title: '附属岗位',
+          dataIndex: 'posId',
+          width: '45%',
+          scopedSlots: { customRender: 'posId' },
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '70px',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+    };
+  },
+  methods: {
+    moment,
+
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      const form = this.$_.cloneDeep(record);
+      // 日期特殊处理
+      if (form.birthday) {
+        form.birthday = moment(form.birthday).format('YYYY-MM-DD');
+      }
+      // 提交的时候是"param",而获取下来却是"info",在这里转换一下
+      if (form.sysEmpInfo) {
+        form.sysEmpParam = form.sysEmpInfo;
+        delete form.sysEmpInfo;
+      } else if (!form.sysEmpParam) {
+        form.sysEmpParam = {
+          extIds: [],
+        };
+      }
+      // 转换职位信息列表
+      if (form.sysEmpParam.positions) {
+        form.sysEmpParam.posIdList = form.sysEmpParam.positions.map((p) => p.posId);
+      }
+      // 附加信息
+      if (form.sysEmpParam.extOrgPos) {
+        form.sysEmpParam.extIds = form.sysEmpParam.extOrgPos.map((p, i) => {
+          return {
+            key: i,
+            orgId: p.orgId,
+            posId: p.posId,
+          };
+        });
+      }
+      this.form = form;
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {
+          sysEmpParam: {},
+        };
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgData = await this.onLoadOrgData();
+      this.posData = await this.onLoadPosData();
+      this.loading = false;
+    },
+
+    onLoadOrgData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadPosData() {
+      return this.$api.sysPosList().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onAddExtData() {
+      this.form.sysEmpParam.extIds.push({
+        key: this.form.sysEmpParam.extIds.length,
+        orgId: undefined,
+        posId: undefined,
+      });
+    },
+
+    onRemoveExtData(record) {
+      const ext = this.form.sysEmpParam.extIds,
+        remove = ext.find((p) => p.key === record.key),
+        index = ext.indexOf(remove);
+
+      ext.splice(index, 1);
+    },
+
+    onChangeExtData(value, record, type) {
+      record[type] = value;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,280 @@
+<template>
+  <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
+    <container>
+      <br />
+      <a-alert closable type="error">
+        <template slot="message">
+          后端bug:生日不填写,在保存时会默认写入0001-01-01
+          <br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
+        </template>
+      </a-alert>
+      <br />
+      <a-alert closable type="warning">
+        <template slot="message">缺授权的两块功能</template>
+      </a-alert>
+      <br />
+      <a-card :bordered="false">
+        <Auth auth="sysUser:page">
+          <div class="yo-query-bar">
+            <a-form-model :model="query" layout="inline">
+              <a-form-model-item label="关键词">
+                <a-input allow-clear placeholder="请输入姓名、账号、手机号" v-model="query.searchValue" />
+              </a-form-model-item>
+              <a-form-model-item label="状态">
+                <a-select
+                  :style="{ width: '170px' }"
+                  allow-clear
+                  placeholder="请选择状态"
+                  v-model="query.searchStatus"
+                >
+                  <a-select-option
+                    :key="i"
+                    :value="item.code"
+                    v-for="(item, i) in codes.find(p => p.code === 'common_status').values"
+                  >{{ item.value }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <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>
+        </Auth>
+
+        <yo-list :load-data="loadData" item-layout="horizontal" ref="list" size="large">
+          <Auth auth="sysUser:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增用户</a-button>
+          </Auth>
+          <a-list-item key="record.id" slot="renderItem" slot-scope="record">
+            <Auth auth="sysUser:edit" slot="actions">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysUser:delete" slot="actions">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }" slot="actions">
+              <a-dropdown placement="bottomRight">
+                <a class="ant-dropdown-link">
+                  授权
+                  <a-icon type="down" />
+                </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysUser:grantRole">
+                    <a-menu-item>
+                      <a @click="onOpen('role-form', record)">授权角色</a>
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysUser:grantData">
+                    <a-menu-item>
+                      <a @click="onOpen('org-form', record)">授权数据</a>
+                    </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+            <a-list-item-meta>
+              <div slot="title">{{ record.nickName || record.name }}</div>
+              <div slot="description">{{ record.account }}</div>
+              <a-avatar :size="48" :src="record.avatar" icon="user" shape="square" slot="avatar" />
+            </a-list-item-meta>
+            <div class="yo-list-content--h">
+              <div class="yo-list-content--h--item">
+                <span>性别</span>
+                <p>{{ bindCodeValue(record.sex, 'sex') }}</p>
+              </div>
+              <div class="yo-list-content--h--item">
+                <span>手机</span>
+                <p>{{ record.phone }}</p>
+              </div>
+              <Auth auth="sysUser:changeStatus">
+                <div class="yo-list-content--h--item">
+                  <a-switch
+                    :checked="!record.status"
+                    :checked-children="bindCodeValue(0, 'common_status')"
+                    :loading="record.statusChanging"
+                    :un-checked-children="bindCodeValue(1, 'common_status')"
+                    @change="checked => onSetUserStatus(record, checked)"
+                  />
+                </div>
+              </Auth>
+            </div>
+          </a-list-item>
+        </yo-list>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
+</template>
+<script>
+import YoTreeLayout from '@/components/yoTreeLayout';
+import YoList from '@/components/yoList';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    YoTreeLayout,
+    YoList,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      codes: [
+        {
+          code: 'sex',
+          values: [],
+        },
+        {
+          code: 'common_status',
+          values: [],
+        },
+      ],
+    };
+  },
+
+  created() {
+    this.onLoadCodes();
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api.getOrgTree().then((res) => {
+        return res.data;
+      });
+    },
+
+    onSelect([id]) {
+      this.query = {
+        'sysEmpParam.orgId': id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getUserPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.list.onReloadData(true);
+    },
+
+    onReset() {
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'sysEmpParam.orgId') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.list.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'sex' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'common_status' }),
+        ])
+        .then(([sex, commonStatus]) => {
+          this.codes.find((p) => p.code === 'sex').values = sex.data;
+          this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['sysEmpParam.orgId']);
+    },
+
+    onSetUserStatus(record, checked) {
+      this.$set(record, 'statusChanging', true);
+      this.$api
+        .sysUserChangeStatus({
+          id: record.id,
+          status: +!checked,
+        })
+        .then(({ success, message }) => {
+          if (success) {
+            this.$message.success('操作成功');
+            this.onReloadData();
+          } else {
+            this.$message.error(message);
+          }
+        });
+    },
+
+    onResetPassword(record) {
+      this.$api
+        .sysUserResetPwd({
+          id: record.id,
+        })
+        .then(({ success, message }) => {
+          if (success) {
+            this.$message.success('重置成功');
+          } else {
+            this.$message.error(message);
+          }
+        });
+    },
+
+    onDelete(record) {
+      this.$api.sysUserDelete(record).then(({ success, message }) => {
+        if (success) {
+          this.$message.success('删除成功');
+          this.onReloadData();
+        } else {
+          this.$message.error(message);
+        }
+      });
+    },
+  },
+};
+</script>