ol-base-components 2.5.1 → 2.6.0

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.1",
+  "version": "2.6.0",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/App.vue

@@ -84,12 +84,12 @@
               show: false,
             },
             {
-              label: "多级表头",
+              label: "一级表头",
               beforeProp: "qty", // 位置
               show: true,
               children: [
                 {
-                  label: "999",
+                  label: "二级表头",
                   children: [
                     {
                       prop: "creationTime",
@@ -100,7 +100,7 @@
                   ],
                 },
                 {
-                  prop: "tagNumber",
+                  prop: "roadWayCode",
                 },
                 {
                   prop: "batch",
@@ -108,7 +108,7 @@
               ],
             },
             {
-              label: "2222",
+              label: "一级表头-1",
               beforeProp: "containerType", // 位置
               children: [
                 {

package/src/package/form/index.js

@@ -0,0 +1,7 @@
+import Form from "./src/index.vue";
+
+Form.install = function (Vue) {
+  Vue.component("ol-form ", Form);
+};
+
+export default Form;

package/src/package/form/src/index.vue

@@ -0,0 +1,384 @@
+<template>
+  <div>
+    <el-form
+      ref="formRef"
+      :model="form.value"
+      :rules="form.rules"
+      style="display: flex; flex-wrap: wrap"
+      v-bind="{
+        labelWidth: '130px',
+        disabled: !form.type,
+        ...$attrs,
+        ...form.attrs,
+      }"
+      v-on="$listeners"
+    >
+      <template v-for="(item, index) in form.model">
+        <el-form-item
+          v-if="!item.hidden"
+          :key="index"
+          :label="item.label"
+          :prop="item.prop"
+          :required="item.required || false"
+          :style="{ width: width(item) }"
+        >
+          <el-input
+            v-if="item.type == 'input'"
+            v-model="form.value[item.prop]"
+            :placeholder="
+              item.readonly
+                ? item.placeholder || item.label
+                : `请输入${item.placeholder || item.label}`
+            "
+            :clearable="item.clearable || true"
+            :readonly="item.readonly || false"
+            :show-password="item.showPassword || false"
+            v-bind="{
+              ...item.props,
+              disabled: inputDisabled(item),
+            }"
+          />
+          <el-input-number
+            v-else-if="item.type == 'number'"
+            v-model="form.value[item.prop]"
+            :placeholder="`请输入${item.placeholder || item.label}`"
+            :clearable="item.clearable || true"
+            :readonly="item.readonly || false"
+            v-bind="{ min: 0, ...item.props }"
+          />
+          <el-input
+            v-else-if="item.type == 'textarea'"
+            v-model="form.value[item.prop]"
+            type="textarea"
+            :placeholder="`请输入${item.placeholder || item.label}`"
+            :autosize="item.autosize"
+            :readonly="item.readonly || false"
+            :clearable="item.clearable || true"
+            :maxlength="item.length || ''"
+          />
+          <el-switch
+            v-else-if="item.type == 'switch'"
+            v-model="form.value[item.prop]"
+            class="switchStyle"
+            active-text="启用"
+            inactive-text="禁用"
+            v-bind="item.props || {}"
+          />
+          <el-radio-group v-else-if="item.type == 'radio'" v-model="form.value[item.prop]">
+            <el-radio v-for="ctem in item.child" :key="ctem.key" :label="ctem.key">{{
+              ctem.value
+            }}</el-radio>
+          </el-radio-group>
+          <!-- v-bind="item.props || { type: 'date' }" -->
+          <el-date-picker
+            v-else-if="item.type == 'date'"
+            v-model="form.value[item.prop]"
+            :placeholder="item.placeholder || '请选择日期'"
+            style="width: 100%"
+            v-bind="{ type: 'date', ...item.props }"
+            :clearable="item.clearable || true"
+            v-on="{
+              ...item.listeners,
+              change: event => changeHandle(event, item),
+            }"
+          />
+          <Tree-select
+            v-else-if="item.type == 'treeSelect'"
+            v-model="form.value[item.prop]"
+            v-bind="item.props || {}"
+            :options="item.child"
+            @getValue="item.change && item.change(form.value[item.prop])"
+          />
+          <!-- <el-select v-else-if="item.type == 'select'" v-model="form.value[item.prop]"
+                  :placeholder="`请选择${item.placeholder || item.label}`"
+                  :clearable="'clearable' in item ? item.clearable : true" :disabled="item.disabled || false"
+                  v-bind="item.props || {}" v-on="{ ...item.listeners, change: selectChangeHandle(item) }">
+                  <el-option v-for="(jtem, jindex) in item.child" :key="jindex" :label="jtem.value"
+                      :value="jtem.key"></el-option>
+              </el-select> -->
+          <!-- v-on="{ ...item.listeners, change: (event) => selectChangeHandle(event,
+          item), }" -->
+          <el-select
+            v-else-if="item.type == 'select'"
+            v-model="form.value[item.prop]"
+            :placeholder="`请选择${item.placeholder || item.label}`"
+            :clearable="'clearable' in item ? item.clearable : true"
+            v-bind="{ disabled: !!item.disabled, ...(item.props || {}) }"
+            v-on="{
+              ...item.listeners,
+              change: event => selectChangeHandle(event, item),
+            }"
+            @keyup.native="
+              $event =>
+                item.keyup({
+                  event: $event,
+                  item,
+                  form: form.value,
+                })
+            "
+          >
+            <el-option
+              v-for="(jtem, jindex) in item.child"
+              :key="jindex"
+              :label="jtem.value"
+              :value="jtem.key"
+            />
+          </el-select>
+          <div v-else-if="item.type == 'inputSpecial'">
+            <el-col :span="6">
+              <el-form-item :prop="item.layerprop">
+                <el-input
+                  v-model="form.value[item.layerprop]"
+                  :clearable="item.clearable || true"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col class="line" style="text-align: center" :span="3">- </el-col>
+            <el-col :span="6">
+              <el-form-item :prop="item.rowprop">
+                <el-input v-model="form.value[item.rowprop]" :clearable="item.clearable || true" />
+              </el-form-item>
+            </el-col>
+            <el-col class="line" style="text-align: center" :span="3">- </el-col>
+            <el-col :span="6">
+              <el-form-item :prop="item.columnprop">
+                <el-input
+                  v-model="form.value[item.columnprop]"
+                  :clearable="item.clearable || true"
+                />
+              </el-form-item>
+            </el-col>
+          </div>
+          <!-- 自定义输入框插槽 -->
+          <template v-else-if="item.type == 'slot'">
+            <slot :name="item.name" :item="item" />
+          </template>
+        </el-form-item>
+      </template>
+    </el-form>
+    <div v-if="showBtn" slot="footer" class="dialog-footer">
+      <slot v-if="$slots.btnSlot" name="btnSlot" :form="form" />
+      <template v-else>
+        <el-button @click="onCancel">取消</el-button>
+        <el-button v-if="form.type" type="primary" @click="onConfirm">确定</el-button>
+      </template>
+      <slot name="btnAfterSlot" />
+    </div>
+  </div>
+</template>
+  <!--
+  # BaseForm 基础表单组件
+  
+  ## Props 属性
+  | 属性名        | 类型      | 默认值  | 必填  | 说明          |
+  |-------------|----------|---------|------|--------------|
+  | form        | Object   | -       | 是    | 表单配置对象    |
+  | defaultValue| Object   | {}      | 否    | 表单默认值      |
+  | showBtn     | Boolean  | true    | 否    | 是否显示底部按钮 |
+  
+  ## form 对象结构
+  {
+    type: Number,      // 表单类型：0-详情，1-新建，2-编辑
+    title: String,     // 表单标题（会根据type自动设置）
+    value: Object,     // 表单数据对象
+    rules: Object,     // 表单验证规则
+    attrs: Object,     // el-form的属性配置
+    model: Array       // 表单项配置数组
+  }
+  
+  ## model 项配置
+  | 字段         | 类型            | 说明    |
+  |-------------|----------------|---------|
+  | type        | String         | 表单项类型：input/number/textarea/switch/radio/date/treeSelect/select/projectCodeSelect/inputSpecial/slot |
+  | label       | String         | 表单项标签 |
+  | prop        | String         | 表单项字段名 |
+  | placeholder | String         | 占位文本 |
+  | required    | Boolean        | 是否必填 |
+  | hidden      | Boolean        | 是否隐藏 |
+  | clearable   | Boolean        | 是否可清空 |
+  | readonly    | Boolean        | 是否只读 |
+  | disabled    | Boolean/Function| 是否禁用 |
+  | props       | Object         | 对应表单控件的属性配置 |
+  | listeners   | Object         | 事件监听器配置 |
+  
+  ## Events 事件
+  | 事件名        | 说明          | 回调参数 |
+  |-------------|---------------|---------|
+  | onSubmit    | 表单提交事件    | {form: 表单配置, data: 表单数据} |
+  | onCancel    | 取消按钮点击事件 | - |
+  | selectChange| 选择器值变化事件 | {obj: 当前项配置, val: 变化后的值} |
+  -->
+  <script>
+// interface FormItem {
+//   type: Number;
+//   title?: String;
+//   model: IModelItem[]; //src\utils\interface\dialogInterface.ts
+//   rules:Form.rules;
+//   attrs: Form; //import { Form } from "element-ui";
+// }
+export default {
+  name: "form",
+  props: {
+    form: Object,
+    // 默认值
+    defaultValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    showBtn: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      // model: [],
+      formInit: {}, // 初始化表单，用于重置表单用
+      // formValue: {}, // 表单数据
+    };
+  },
+  computed: {
+    width() {
+      return function (item) {
+        if (this.form.model.length > 18 && item.type != "textarea") {
+          return "25%";
+        } else if (
+          this.form.model.length > 10 &&
+          this.form.model.length <= 18 &&
+          item.type != "textarea"
+        ) {
+          return "calc(100% / 3)";
+        } else if (
+          this.form.model.length > 6 &&
+          this.form.model.length <= 10 &&
+          item.type != "textarea"
+        ) {
+          return "50%";
+        } else {
+          return item.type == "textarea" && item.width ? item.width : "100%";
+        }
+      };
+    },
+  },
+  watch: {
+    // 副作用以便父级直接使用
+    "form.type": {
+      handler(newValue) {
+        // 如果没有type则默认值为1
+        if (!Object.keys(this.form).includes("type")) {
+          this.$set(this.form, "type", 1);
+        }
+        let result;
+        switch (newValue) {
+          case 0:
+            result = "详情"; // 当 newValue 为 0 时，标题为 "详情"
+            break;
+          case 1:
+            result = "新建";
+            break;
+          case 2:
+            result = "编辑";
+            break;
+          default:
+            result = "弹框";
+            break;
+        }
+        this.form.title = result;
+      },
+      immediate: true,
+    },
+    // "form.model": {
+    //   handler() {
+
+    //   },
+    //   immediate: true,
+    //   deep: true
+    // }
+  },
+  created() {
+    // 默认值复制
+    if (Object.keys(this.defaultValue)?.length) {
+      Object.keys(this.defaultValue).forEach(key => {
+        form.value[key] = this.defaultValue[key];
+      });
+    }
+    this.init();
+  },
+  // beforeDestroy() {},
+  methods: {
+    init() {},
+    // 保留之前的change调用方式，并添扩展新的
+    selectChangeHandle(val, item) {
+      (item &&
+        item.listeners &&
+        item.listeners.change &&
+        item.listeners.change(item, this.form.value[item.prop])) ||
+      item.change
+        ? item.change(val)
+        : this.selectChange(item, val);
+    },
+    changeHandle(val, item) {
+      if (
+        item &&
+        item.listeners &&
+        item.listeners.change &&
+        item.listeners.change(item, this.form.value[item.prop])
+      ) {
+        this.selectChange(item, val);
+      }
+    },
+    selectChange(obj, val) {
+      let temp = {
+        obj: obj,
+        val: val,
+      };
+      this.$emit("selectChange", temp);
+    },
+    inputDisabled(item) {
+      if (!item.props) return false;
+      if (!Object.keys(item.props).includes("disabled")) return false;
+      // disabled是函数还是Boolean值，如果boolean值直接返回，如果是函数执行函数并返回boolean
+      return typeof item.props.disabled === "function"
+        ? item.props.disabled({ item, form: this.form })
+        : item.props.disabled;
+    },
+    validate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.formRef.validate(valid => {
+          if (valid) {
+            resolve({
+              valid,
+              formData: this.form?.value || {},
+            });
+          } else {
+            reject("表单验证失败");
+          }
+        });
+      });
+    },
+    onCancel() {
+      this.$refs.formRef.resetFields();
+      this.$refs.formRef.clearValidate();
+      this.$emit("onCancel");
+    },
+    onConfirm() {
+      console.log("BaseForm数据", this.form);
+      this.validate()
+        .then(() => {
+          this.$emit("onSubmit", { form: this.form, data: this.form.value });
+        })
+        .catch(err => {
+          console.log("校验失败", err);
+        });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+  

package/src/package/index.js

@@ -1,6 +1,7 @@
 import OlTable from "./table";
 import OlSearch from "./formSearch";
 import Dialog from "./dialog";
+import Form from "./form";
 import SwaggerClient from "swagger-client";
 
 const consoleTooltip = () => {
@@ -212,5 +213,5 @@ const install = async function (Vue) {
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog };
+export { OlTable, OlSearch, Dialog, Form };
 export { swaggerInstall, swaggerUnload };