@wakaka1/adaptive-page 1.0.4 → 1.1.0

package/README.md

@@ -1 +1,159 @@
-ui for table data.
+adaptive-page，
+表格数组展示控件，
+在 umy-ui 基础上进行扩展。
+
+## 使用
+
+安装element-ui@2.15.6，
+element-resize-detector@1.2.4，
+umy-ui@1.1.6，
+@wakaka1/adaptive-page@1.1.0，
+在 main.js 中，
+添加如下代码：
+
+```
+import { UTable, UTableColumn } from "umy-ui";
+import "umy-ui/lib/theme-chalk/index.css"; // 引入样式
+Vue.use(UTable);
+Vue.use(UTableColumn);
+import "@/styles/index.scss";
+import "@/styles/element-ui_2.15.6.css";
+import AdaptivePage from "@wakaka1/adaptive-page";
+Vue.use(AdaptivePage);
+```
+
+## 多语言
+
+在主项目中，提供以下多语言选项：
+
+```
+  button: {
+    search: "搜索",
+  },
+  tagsView: {
+    clear: "清空",
+    input: "请输入",
+    choose: "请选择",
+    handle: "操作",
+    Single_Select: "单选",
+    order: "排序",
+    noData: "暂无数据",
+    Header_Set:"列设置",
+  },
+  components: {
+    shrink: "收起",
+    unfold: "展开",
+  },
+```
+
+## 列设置
+
+在 adaptive-page 组件上，
+打开 columnSetting 开关。
+
+在`@/api/index.js`中，
+增加列配置接口访问方法：
+
+```
+// 根据参数查询用户菜单的列表信息
+export function querySysTableRecord(data) {
+  return request({
+    url: "/component/sysTableRecord/querySysTableRecord",
+    method: "post",
+    data,
+  });
+}
+
+// 新增或者修改用户的菜单信息
+export function addOrUpdateSysTableRecord(data) {
+  return request({
+    url: "/component/sysTableRecord/addOrUpdateSysTableRecord",
+    method: "post",
+    data,
+  });
+}
+```
+
+在`@/store/modules/user.js`中，
+进行如下改动：
+
+从`@/api`中引入 querySysTableRecord、addOrUpdateSysTableRecord 方法：
+
+```
+import {
+  querySysTableRecord,
+  addOrUpdateSysTableRecord,
+} from "@/api";
+```
+
+getDefaultState 中增加 tableColumn 字段：
+
+```
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    user: {},
+    roles: [],
+    tenants: [],
+    tableColumn: [], // 表格列
+  };
+};
+```
+
+在 mutations 中增加 SET_TABLE_COLUMN 方法：
+
+```
+const mutations = {
+  ...
+
+  // 设置表格列
+  SET_TABLE_COLUMN: (state, payload) => {
+    state.tableColumn = payload;
+  },
+};
+```
+
+在 actions 中增加 querySysTableRecord、saveTableColumn 方法：
+
+```
+const actions = {
+  ...
+
+  // 查询表格列
+  querySysTableRecord({ commit }) {
+    return new Promise((resolve, reject) => {
+      console.log(state, "state-----------");
+      querySysTableRecord({
+        queryDefaultFlag: state.menuListConfig,
+      })
+        .then((res) => {
+          // 先根据系统配置是否为1，1表列名为defaultConfigList，否则为userConfigList，当配置为用户时并且userConfigList为空，表列名为defaultConfigList
+          const tableColumn =
+            state.menuListConfig === "1"
+              ? res.data.defaultConfigList
+              : res.data.userConfigList.length
+              ? res.data.userConfigList
+              : res.data.defaultConfigList;
+          commit("SET_TABLE_COLUMN", tableColumn);
+          resolve(res.data);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  },
+  // 保存表格列
+  saveTableColumn({ commit }, params) {
+    return addOrUpdateSysTableRecord({ ...params });
+  },
+};
+```
+
+在`@/store/getters.js`的 getters 中，
+添加 tableColumn：
+
+```
+const getters = {
+  tableColumn: (state) => state.user.tableColumn,
+};
+```