@weitutech/by-components 1.1.50 → 1.1.52

package/lib/by-components.umd.js

@@ -60520,6 +60520,8 @@ __webpack_require__.d(__webpack_exports__, {
   ByPager: function() { return /* reexport */ pager; },
   BySelect: function() { return /* reexport */ comps_select; },
   ByTable: function() { return /* reexport */ table; },
+  ByToolBar: function() { return /* reexport */ ByToolBar; },
+  ToolBarItemType: function() { return /* reexport */ ToolBarItemType; },
   "default": function() { return /* binding */ entry_lib; }
 });
 
@@ -60752,8 +60754,8 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var pager = (component.exports);
-;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"268ca57a-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/table/index.vue?vue&type=template&id=470bed02
-var tablevue_type_template_id_470bed02_render = function render() {
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"268ca57a-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/table/index.vue?vue&type=template&id=d8304908
+var tablevue_type_template_id_d8304908_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', [_c('vxe-grid', _vm._g(_vm._b({
@@ -60827,7 +60829,7 @@ var tablevue_type_template_id_470bed02_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var tablevue_type_template_id_470bed02_staticRenderFns = [];
+var tablevue_type_template_id_d8304908_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -61912,15 +61914,23 @@ var custom_column_component = normalizeComponent(
       }) => {
         return specialFirstRow ? rowIndex : rowIndex + 1;
       };
+
+      //需注意：this.autoHeight和this.gridOptions.autoHeight的区别
       return {
         border: true,
+        round: true,
         resizable: true,
         showOverflow: !this.autoHeight,
-        height: 550,
+        // height: 720,
+        ...(this.gridOptions.autoHeight ? {
+          minHeight: 150,
+          maxHeight: 720
+        } : {
+          height: 720
+        }),
         align: 'left',
-        copyFields: [],
-        // pagerConfig: pagerConfig,
-        emptyText: '暂无数据',
+        copyFields: this.gridOptions.copyFields || [],
+        emptyText: this.gridOptions.emptyText || '暂无数据',
         loading: this.loading,
         loadingConfig: {
           text: '加载中...'
@@ -62314,8 +62324,8 @@ var custom_column_component = normalizeComponent(
 ;
 var table_component = normalizeComponent(
   components_tablevue_type_script_lang_js,
-  tablevue_type_template_id_470bed02_render,
-  tablevue_type_template_id_470bed02_staticRenderFns,
+  tablevue_type_template_id_d8304908_render,
+  tablevue_type_template_id_d8304908_staticRenderFns,
   false,
   null,
   null,
@@ -63723,6 +63733,361 @@ var date_picker_range_component = normalizeComponent(
 )
 
 /* harmony default export */ var date_picker_range = (date_picker_range_component.exports);
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"268ca57a-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tool-bar/ByToolBar.vue?vue&type=template&id=a297ff24
+var ByToolBarvue_type_template_id_a297ff24_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "by-tool-bar"
+  }, [_c('div', {
+    staticClass: "by-tool-bar__left"
+  }, [_vm._l(_vm.leftItemsComputed, function (item, idx) {
+    return [!item.slot && !item.hidden ? _c(_vm.getComponentType(item), _vm._b({
+      key: 'left-' + idx,
+      tag: "component",
+      style: _vm.getComponentStyle(item),
+      attrs: {
+        "disabled": item.disabled
+      },
+      on: {
+        "click": e => _vm.handleEvent('click', item, e),
+        "input": val => _vm.handleEvent('input', item, val),
+        "change": val => _vm.handleEvent('change', item, val)
+      },
+      scopedSlots: _vm._u([item.type === _vm.ToolBarItemType.Button && item.props && item.props.icon ? {
+        key: "icon",
+        fn: function () {
+          return [_c('i', {
+            class: item.props.icon
+          })];
+        },
+        proxy: true
+      } : null], null, true)
+    }, 'component', _vm.getComponentProps(item), false), [item.type === _vm.ToolBarItemType.Button && item.label ? _c('span', [_vm._v(_vm._s(item.label))]) : _vm._e(), item.type === _vm.ToolBarItemType.Text ? _c('span', [_vm._v(" " + _vm._s(item.label) + _vm._s(item.props && (item.props.children || item.props.innerHTML)) + " ")]) : _vm._e(), item.type === _vm.ToolBarItemType.Select ? _vm._l(item.asyncOptions || item.props.options || [], function (opt) {
+      return _c('el-option', {
+        key: opt.value,
+        attrs: {
+          "label": opt.label,
+          "value": opt.value
+        }
+      });
+    }) : _vm._e(), item.type === _vm.ToolBarItemType.RadioGroup ? _vm._l(item.radios || [], function (opt) {
+      return _c('el-radio-button', {
+        key: opt.value,
+        attrs: {
+          "label": opt.value
+        }
+      }, [_vm._v(" " + _vm._s(opt.label) + " ")]);
+    }) : _vm._e()], 2) : !item.hidden ? _c('div', {
+      key: 'left-slot-' + idx
+    }, [_vm._t(item.slot)], 2) : _vm._e()];
+  })], 2), _c('div', {
+    staticClass: "by-tool-bar__right"
+  }, [_vm._l(_vm.rightItemsComputed, function (item, idx) {
+    return [!item.slot && !item.hidden ? _c(_vm.getComponentType(item), _vm._b({
+      key: 'right-' + idx,
+      tag: "component",
+      style: _vm.getComponentStyle(item),
+      attrs: {
+        "disabled": item.disabled
+      },
+      on: {
+        "click": e => _vm.handleEvent('click', item, e),
+        "input": val => _vm.handleEvent('input', item, val),
+        "change": val => _vm.handleEvent('change', item, val)
+      },
+      scopedSlots: _vm._u([item.type === _vm.ToolBarItemType.Button && item.props && item.props.icon ? {
+        key: "icon",
+        fn: function () {
+          return [_c('i', {
+            class: item.props.icon
+          })];
+        },
+        proxy: true
+      } : null], null, true)
+    }, 'component', _vm.getComponentProps(item), false), [item.type === _vm.ToolBarItemType.Button && item.label ? _c('span', [_vm._v(_vm._s(item.label))]) : _vm._e(), item.type === _vm.ToolBarItemType.Text ? _c('span', [_vm._v(" " + _vm._s(item.label) + _vm._s(item.props && (item.props.children || item.props.innerHTML)) + " ")]) : _vm._e(), item.type === _vm.ToolBarItemType.Select ? _vm._l(item.asyncOptions || item.props.options || [], function (opt) {
+      return _c('el-option', {
+        key: opt.value,
+        attrs: {
+          "label": opt.label,
+          "value": opt.value
+        }
+      });
+    }) : _vm._e(), item.type === _vm.ToolBarItemType.RadioGroup ? _vm._l(item.radios || [], function (opt) {
+      return _c('el-radio-button', {
+        key: opt.value,
+        attrs: {
+          "label": opt.value
+        }
+      }, [_vm._v(" " + _vm._s(opt.label) + " ")]);
+    }) : _vm._e()], 2) : !item.hidden ? _c('div', {
+      key: 'right-slot-' + idx
+    }, [_vm._t(item.slot)], 2) : _vm._e()];
+  })], 2)]);
+};
+var ByToolBarvue_type_template_id_a297ff24_staticRenderFns = [];
+
+;// ./src/components/tool-bar/ToolBarItemType.js
+const ToolBarItemType = Object.freeze({
+  Text: 'text',
+  Button: 'button',
+  RadioGroup: 'radio-group',
+  Select: 'select',
+  Input: 'input'
+});
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tool-bar/ByToolBar.vue?vue&type=script&lang=js
+
+
+
+
+
+/* harmony default export */ var ByToolBarvue_type_script_lang_js = ({
+  name: 'ByToolBar',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      ToolBarItemType: ToolBarItemType,
+      loadedOptions: {}
+    };
+  },
+  watch: {
+    items: {
+      handler() {
+        this.loadSelectOptions();
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 处理异步选项和默认属性
+    itemsWithAsyncOptions() {
+      return this.items.map(item => {
+        // 给组件添加默认属性
+        let newItem = this.addDefaultProps(item);
+
+        // 处理异步选项
+        if (item.type === ToolBarItemType.Select && item.name && this.loadedOptions[item.name]) {
+          newItem = {
+            ...newItem,
+            props: {
+              ...newItem.props,
+              loading: this.loadedOptions[item.name].loading
+            },
+            asyncOptions: this.loadedOptions[item.name].options
+          };
+        }
+        return newItem;
+      });
+    },
+    /**
+     * 左侧items
+     * 没有设置 position 或 position 不是 'right'，都放左侧
+     */
+    leftItemsComputed() {
+      return this.itemsWithAsyncOptions.filter(item => item.position !== 'right' && !item.hidden);
+    },
+    /**
+     * 右侧items
+     * 设置 position 为 'right' 的放右侧
+     */
+    rightItemsComputed() {
+      return this.itemsWithAsyncOptions.filter(item => item.position === 'right' && !item.hidden);
+    }
+  },
+  methods: {
+    /**
+     * 为组件添加默认属性
+     * @param {Object} item - 工具栏项
+     * @returns {Object} 添加了默认属性的项
+     */
+    addDefaultProps(item) {
+      let newItem = {
+        ...item
+      };
+
+      // 需要 size 属性的组件类型
+      const needsSize = [ToolBarItemType.Button, ToolBarItemType.Select, ToolBarItemType.Input, ToolBarItemType.RadioGroup];
+
+      // 处理 size 属性
+      if (needsSize.includes(item.type)) {
+        if (item.props) {
+          newItem = {
+            ...item,
+            props: {
+              size: 'small',
+              ...item.props
+            }
+          };
+        } else {
+          newItem = {
+            ...item,
+            props: {
+              size: 'small'
+            }
+          };
+        }
+      }
+
+      // 处理 Text 组件的默认样式
+      if (item.type === ToolBarItemType.Text) {
+        const defaultTextStyle = {
+          fontSize: '16px',
+          color: '#333333'
+        };
+        if (item.props) {
+          newItem = {
+            ...item,
+            props: {
+              ...defaultTextStyle,
+              ...item.props
+            }
+          };
+        } else {
+          newItem = {
+            ...item,
+            props: defaultTextStyle
+          };
+        }
+      }
+      return newItem;
+    },
+    /**
+     *  如果是loadOptions函数，则获取表单数据
+     */
+    loadSelectOptions() {
+      this.items.forEach(item => {
+        if (item.type === ToolBarItemType.Select && item.props && typeof item.props.loadOptions === 'function') {
+          const {
+            name
+          } = item;
+          if (!name) {
+            console.error('[ByToolBar] 下拉框使用异步加载loadOptions时，必须设置name属性.');
+            return;
+          }
+          this.$set(this.loadedOptions, name, {
+            loading: true,
+            options: []
+          });
+          item.props.loadOptions().then(options => {
+            this.$set(this.loadedOptions[name], 'options', options);
+          }).finally(() => {
+            this.$set(this.loadedOptions[name], 'loading', false);
+          });
+        }
+      });
+    },
+    /**
+     * 根据item的type返回对应的组件
+     * @param item
+     * @returns {string}
+     */
+    getComponentType(item) {
+      const map = {
+        [ToolBarItemType.Text]: 'span',
+        [ToolBarItemType.Button]: 'el-button',
+        [ToolBarItemType.RadioGroup]: 'el-radio-group',
+        [ToolBarItemType.Select]: 'el-select',
+        [ToolBarItemType.Input]: 'el-input'
+      };
+      return map[item.type] || 'div';
+    },
+    /**
+     * 获取组件props
+     * 处理组件的特殊配置属性
+     */
+    getComponentProps(item) {
+      const props = {
+        ...item.props
+      };
+
+      // 处理select组件的onlyShowPlaceholder配置
+      if (item.type === ToolBarItemType.Select && props.onlyShowPlaceholder === true) {
+        // 当onlyShowPlaceholder为true时，不显示选中的值，只显示placeholder
+        props.value = undefined;
+        props.modelValue = undefined;
+      }
+      return props;
+    },
+    /**
+     * 获取组件style
+     * 给单个组件增加宽度限制和样式
+     */
+    getComponentStyle(item) {
+      const style = {};
+      switch (item.type) {
+        case ToolBarItemType.Text:
+          // 重新配置 Text 组件样式
+          style.maxWidth = '300px';
+          style.overflow = 'hidden';
+          style.textOverflow = 'ellipsis';
+          style.whiteSpace = 'nowrap';
+          // 处理 Text 组件的样式属性
+          if (item.props) {
+            var _item$props, _item$props2, _item$props3, _item$props4;
+            if ((_item$props = item.props) !== null && _item$props !== void 0 && _item$props.fontSize) {
+              style.fontSize = item.props.fontSize;
+            }
+            if ((_item$props2 = item.props) !== null && _item$props2 !== void 0 && _item$props2.color) {
+              style.color = item.props.color;
+            }
+            if ((_item$props3 = item.props) !== null && _item$props3 !== void 0 && _item$props3.maxWidth) {
+              style.maxWidth = item.props.maxWidth;
+            }
+            if ((_item$props4 = item.props) !== null && _item$props4 !== void 0 && _item$props4.width) {
+              style.width = item.props.width;
+            }
+          }
+          break;
+        case ToolBarItemType.Input:
+        case ToolBarItemType.Select:
+          style.maxWidth = '200px';
+          break;
+        case ToolBarItemType.Button:
+        case ToolBarItemType.RadioGroup:
+          style.maxWidth = '400px';
+          break;
+      }
+      return style;
+    },
+    /**
+     * 统一事件分发，带上item的name或key作为唯一标识
+     */
+    handleEvent(eventType, item, payload) {
+      this.$emit('action', {
+        type: eventType,
+        item: item,
+        payload: payload
+      });
+    }
+  }
+});
+;// ./src/components/tool-bar/ByToolBar.vue?vue&type=script&lang=js
+ /* harmony default export */ var tool_bar_ByToolBarvue_type_script_lang_js = (ByToolBarvue_type_script_lang_js); 
+;// ./src/components/tool-bar/ByToolBar.vue
+
+
+
+
+
+/* normalize component */
+;
+var ByToolBar_component = normalizeComponent(
+  tool_bar_ByToolBarvue_type_script_lang_js,
+  ByToolBarvue_type_template_id_a297ff24_render,
+  ByToolBarvue_type_template_id_a297ff24_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ByToolBar = (ByToolBar_component.exports);
 ;// ./node_modules/dom-zindex/es/index.esm.js
 var winDom = null;
 var bodyEl = null;
@@ -63892,6 +64257,8 @@ updateVar();
 
 
 
+
+
 const components = {
   ByPager: pager,
   ByTable: table,
@@ -63900,7 +64267,8 @@ const components = {
   ByFoldSearch: fold_search,
   BySelect: comps_select,
   ByDatePickerRange: date_picker_range,
-  ByCustomDatePicker: custom_date_picker
+  ByCustomDatePicker: custom_date_picker,
+  ByToolBar: ByToolBar
 };
 
 // 设置当前 z-index 起始值