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>