ol-base-components 2.5.0 → 2.6.0

package/.eslintrc

@@ -1,8 +1,59 @@
-// {
-//   "rules": {
-//     "no-console": "off", // 关闭 console 相关的警告
-//     "no-unused-vars": "off", // 关闭未使用变量的警告
-//     "vue/no-mutating-props": "off", // 关闭对 props 的修改警告
-//     "no-undef": "off" // 关闭未定义变量的警告
-//   }
-// }
+{
+  "extends": [
+    "plugin:vue/essential", // Vue规则 官方 ESLint 插件 eslint-plugin-vue
+    "eslint:recommended", // 基础规则 ESLint 自带的推荐规则
+    "prettier", // 关闭所有和 Prettier 冲突的 ESLint 规则
+    "plugin:prettier/recommended" //启用 prettier 插件，让 ESLint 把 Prettier 的格式问题当成 ESLint 报错
+  ],
+  "parserOptions": {
+    "parser": "@babel/eslint-parser",
+    "requireConfigFile": false,
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "no-unused-vars": "warn",
+    "vue/no-unused-components": "warn",
+    "vue/no-unused-vars": "warn",
+    "vue/multi-word-component-names": "off",
+    "vue/no-v-html": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-prop-types": "off",
+    "vue/no-mutating-props": "warn",
+    "vue/no-side-effects-in-computed-properties": "warn",
+    "vue/valid-v-for": "error",
+    "vue/valid-v-if": "error",
+    "vue/valid-v-model": "error",
+    "vue/valid-template-root": "error",
+    "vue/no-duplicate-attributes": "error",
+    "vue/no-parsing-error": "error",
+    "vue/require-v-for-key": "error",
+    "vue/valid-v-bind": "error",
+    "vue/valid-v-on": "error",
+    "vue/valid-v-slot": "error",
+    "vue/valid-v-text": "error",
+    "vue/valid-v-html": "error",
+    "vue/valid-v-pre": "error",
+    "vue/valid-v-cloak": "error",
+    "vue/valid-v-once": "error",
+    "vue/valid-v-show": "error",
+    "vue/valid-v-else": "error",
+    "vue/valid-v-else-if": "error",
+    "prefer-const": "warn",
+    "no-var": "error",
+    "eqeqeq": "error",
+    "no-undef": "error",
+    "no-redeclare": "error",
+    "no-unreachable": "error",
+    "strict": ["error", "global"],
+    "no-implicit-globals": "error",
+    "no-unused-expressions": "error"
+  }
+}

package/.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.git
+*.min.js
+*.min.css
+package-lock.json

package/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": true,
+  "htmlWhitespaceSensitivity": "css",
+  "singleAttributePerLine": false,
+  "trimTrailingWhitespace": true
+}

package/README.md

@@ -35,7 +35,7 @@ import OlBaseComponents from "ol-base-components"; // 导入组件库
 Vue.use(OlBaseComponents);
 
 new Vue({
-  render: (h) => h(App),
+  render: h => h(App),
 }).$mount("#app");
 ```
 
@@ -52,11 +52,9 @@ Vue.use(OlBaseComponents);
 
 //安装，可以在登录
 import { swaggerInstall } from "ol-base-components";
-swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(
-  () => {
-    // 成功获取swagger数据后加载页面， 这里可以写登录接口成功后执行的逻辑
-  }
-);
+swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(() => {
+  // 成功获取swagger数据后加载页面， 这里可以写登录接口成功后执行的逻辑
+});
 
 // 卸载
 import { swaggerUnload } from "ol-base-components";
@@ -164,58 +162,58 @@ npx add aaa -p src/view -u /api/app/business-report/stock-bIPaged-result -e /api
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      formSearchData: {
-        reset: true,
-        expendShow: false,
-        value: {
-          WarehouseCode: null,
-          WarehouseName: null,
-        },
-        tableSearch: [
-          {
-            label: "仓库编码",
-            value: "WarehouseCode",
-            inputType: "text",
+  export default {
+    data() {
+      return {
+        formSearchData: {
+          reset: true,
+          expendShow: false,
+          value: {
+            WarehouseCode: null,
+            WarehouseName: null,
           },
-          {
-            label: "仓库名称",
-            value: "WarehouseName",
-            inputType: "text",
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    this.getTable();
-  },
-  method: {
-    getTable() {
-      //   this.get({
-      //     url: Basic.getWarehoseList,
-      //     isLoading: true,
-      //     data: Object.assign(this.formSearchData.value, {
-      //       Page: this.paginations.page,
-      //       MaxResultCount: this.paginations.limit,
-      //     }),
-      //   }).then((res) => {
-      //     this.tableData.rows = res.result.items;
-      //     this.paginations.total = res.result.totalCount;
-      //     this.tableData.emptyImg = true;
-      //   });
+          tableSearch: [
+            {
+              label: "仓库编码",
+              value: "WarehouseCode",
+              inputType: "text",
+            },
+            {
+              label: "仓库名称",
+              value: "WarehouseName",
+              inputType: "text",
+            },
+          ],
+        },
+      };
     },
-    handleSearch(from) {
-      var self = this;
-      self.formSearchData.value = { ...from };
-      self.paginations.page = 1;
-      this.getTable(); // 获取表格数据
+    mounted() {
+      this.getTable();
     },
-    handleReset() {},
-  },
-};
+    method: {
+      getTable() {
+        //   this.get({
+        //     url: Basic.getWarehoseList,
+        //     isLoading: true,
+        //     data: Object.assign(this.formSearchData.value, {
+        //       Page: this.paginations.page,
+        //       MaxResultCount: this.paginations.limit,
+        //     }),
+        //   }).then((res) => {
+        //     this.tableData.rows = res.result.items;
+        //     this.paginations.total = res.result.totalCount;
+        //     this.tableData.emptyImg = true;
+        //   });
+      },
+      handleSearch(from) {
+        var self = this;
+        self.formSearchData.value = { ...from };
+        self.paginations.page = 1;
+        this.getTable(); // 获取表格数据
+      },
+      handleReset() {},
+    },
+  };
 </script>
 ```
 
@@ -241,111 +239,109 @@ export default {
       @handleindexChange="handleindexChange"
     >
       <template slot="classes" slot-scope="scope">
-        <div style="color: #1682e6; cursor: pointer" @click="config(scope)">
-          设置
-        </div>
+        <div style="color: #1682e6; cursor: pointer" @click="config(scope)">设置</div>
       </template>
     </ol-table>
   </div>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      multipleSelection: [],
-      tableData: {
-        loading: false,
-        emptyImg: true,
-        options: {
-          selection: true, //多选框
-          index: null, //序号
-          headTool: true, //开启头部工具栏
-          refreshBtn: true, //开启表格头部刷新按钮
-          downloadBtn: true, //开启表格头部下载按钮
-        }, //序号和复选框
-        rows: [], //表数据
-        columns: [
-          {
-            label: "",
-            minWidth: "",
-            type: "selection",
-            show: true,
-          },
-          {
-            prop: "warehouseCode",
-            label: "仓库编码",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "warehouseName",
-            label: "仓库名称",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "enabledDesc",
-            label: "状态",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "createdUser",
-            label: "创建人",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "createTime",
-            label: "创建时间",
-            minWidth: "",
-            show: true,
-          },
-          {
-            prop: "classes",
-            label: "班次",
-            minWidth: "",
-            show: true,
-            renderSlot: true,
-          },
-          {
-            prop: "remark",
-            label: "备注",
-            minWidth: "",
-            show: true,
-          },
-        ], //表头
-        operates: [], //表格里面的操作按钮
-        tableHeightDiff: 300,
+  export default {
+    data() {
+      return {
+        multipleSelection: [],
+        tableData: {
+          loading: false,
+          emptyImg: true,
+          options: {
+            selection: true, //多选框
+            index: null, //序号
+            headTool: true, //开启头部工具栏
+            refreshBtn: true, //开启表格头部刷新按钮
+            downloadBtn: true, //开启表格头部下载按钮
+          }, //序号和复选框
+          rows: [], //表数据
+          columns: [
+            {
+              label: "",
+              minWidth: "",
+              type: "selection",
+              show: true,
+            },
+            {
+              prop: "warehouseCode",
+              label: "仓库编码",
+              minWidth: "",
+              sortable: false,
+              show: true,
+            },
+            {
+              prop: "warehouseName",
+              label: "仓库名称",
+              minWidth: "",
+              sortable: false,
+              show: true,
+            },
+            {
+              prop: "enabledDesc",
+              label: "状态",
+              minWidth: "",
+              sortable: false,
+              show: true,
+            },
+            {
+              prop: "createdUser",
+              label: "创建人",
+              minWidth: "",
+              sortable: false,
+              show: true,
+            },
+            {
+              prop: "createTime",
+              label: "创建时间",
+              minWidth: "",
+              show: true,
+            },
+            {
+              prop: "classes",
+              label: "班次",
+              minWidth: "",
+              show: true,
+              renderSlot: true,
+            },
+            {
+              prop: "remark",
+              label: "备注",
+              minWidth: "",
+              show: true,
+            },
+          ], //表头
+          operates: [], //表格里面的操作按钮
+          tableHeightDiff: 300,
+        },
+        paginations: {
+          page: 1, //当前位于那页面
+          total: 10, //总数
+          limit: 30, //一页显示多少条
+          pagetionShow: true,
+        },
+      };
+    },
+    methods: {
+      SelectionChange(row) {
+        this.multipleSelection = row;
       },
-      paginations: {
-        page: 1, //当前位于那页面
-        total: 10, //总数
-        limit: 30, //一页显示多少条
-        pagetionShow: true,
+      handleSizeChange(val) {
+        this.paginations.page = 1;
+        this.paginations.limit = val;
+        this.getTable();
+      },
+      handleindexChange(val) {
+        this.paginations.page = val;
+        this.getTable();
       },
-    };
-  },
-  methods: {
-    SelectionChange(row) {
-      this.multipleSelection = row;
-    },
-    handleSizeChange(val) {
-      this.paginations.page = 1;
-      this.paginations.limit = val;
-      this.getTable();
-    },
-    handleindexChange(val) {
-      this.paginations.page = val;
-      this.getTable();
     },
-  },
-};
+  };
 </script>
 ```
 
@@ -405,13 +401,90 @@ export default {
             url: PublicAggregate.dictionaries,
             fn: this.getTable,
         },
-      ,
+      }
     };
   },
 };
 </script>
 ```
 
+# 表格组件多级表头使用说明
+
+## 功能简介
+
+本表格组件基于 Element-UI，支持：
+
+- 多级表头（嵌套 children）
+- 多级表头顺序可通过 `beforeProp` 字段灵活控制
+- 表头字段顺序优先以 `columns` 配置为准，后补充 swagger 字段
+- 目前 `beforeProp` 仅支持多级表头，普通字段暂不支持
+
+#### 效果图
+
+![Local demo](./src/assets/duojibiaotou.png "Local demo")
+
+## 1. 多级表头配置方法
+
+### 基本结构
+
+```js
+tableData: {
+  columns: [
+    // 普通字段
+    { prop: "unit", show: false },
+    // 多级表头
+    {
+      label: "一级表头",
+      beforeProp: "qty", // 该多级表头会插入到 qty 字段之后
+      show: true,
+      children: [
+        {
+          label: "二级表头",
+          children: [
+            { prop: "creationTime" },
+            { prop: "orginalBillNo" }
+          ]
+        },
+        { prop: "tagNumber" },
+        { prop: "batch" }
+      ]
+    },
+    // 另一个多级表头
+    {
+      label: "一级表头-1",
+      beforeProp: "containerType", // 插入到 containerType 字段之后
+      children: [
+        { prop: "regionCode" },
+        { prop: "taskNo" }
+      ]
+    }
+    // ... 其它字段
+  ],
+  rows: [
+    // 数据行
+  ],
+  // 其它配置
+}
+```
+
+### 说明
+
+- **多级表头**通过 `children` 字段递归嵌套实现。
+- 每个多级表头对象可包含：
+  - `label`：表头名称
+  - `beforeProp`：插入到指定字段（prop）之后
+  - `show`：是否显示
+  - `children`：子表头数组
+- **beforeProp** 仅支持在多级表头对象上设置，用于指定该多级表头插入到哪个字段（prop）之后。
+- 普通字段（非多级表头）暂不支持 `beforeProp`，只能手动在 `columns` 中调整顺序。
+
+## 2. 字段顺序规则
+
+- 表头字段顺序优先以 `columns` 配置为准。
+- 如果有 swagger 字段未在 `columns` 中出现，会自动补充到表头最后。
+- 多级表头的位置可通过 `beforeProp` 字段灵活调整。
+- 普通字段顺序只能通过手动调整 `columns` 数组顺序实现。
+
 ## 贡献
 
 欢迎任何形式的贡献！如果您有建议或发现问题，请提交 issue 或 pull request。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": false,
   "main": "src/package/index.js",
   "bin": {
@@ -30,6 +30,9 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.8",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
     "vue-template-compiler": "^2.6.14"