backend-management-ui 1.7.11 → 1.7.13

package/README.md

@@ -10,7 +10,7 @@
 - 极简配置化开发：表格 / 表单 / 按钮组等组件通过 JSON 配置快速生成，无需重复写模板
 - 高频业务场景全覆盖：内置配置化表格、表单、按钮组、虚拟滚动下拉框等核心组件
 - 轻量无冗余：仅依赖 Vue2 + ElementUI + vue-virtual-scroll-list，无第三方冗余依赖，兼容低版本Node环境
-- 基于 ElSelect + vue-virtual-scroll-list 实现海量数据下拉选择，解决大数据渲染卡顿问题
+- 基于 ElSelect + vue-virtual-scroll-list 实现海量数据下拉选择，解决大量数据渲染卡顿问题
 
 ## 安装
 
@@ -42,7 +42,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import BackendManagementUI from 'backend-management-ui'
 
 Vue.use(ElementUI)
-Vue.use(BackendManagementUI) // 全局注册所有组件
+Vue.use(BackendManagementUI) // 全局注册所有组件，放在elementUI后面
 ```
 
 按需引入
@@ -378,7 +378,7 @@ export default {
                     label: "测试5-可点击的单元格", // 默认active样式
                     prop: "test5",
                     width: 100,
-                    clickable: true, // 一直可点击
+                    clickable: true, // 一直可点击 render形式、组件形式和插槽形式时不生效
 
                     {/* 或者使用条件判断
                     clickableClass: ({row}, col) => row[col.prop] > 0  */}

package/index.common.js

@@ -28,7 +28,6 @@ var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable
 var _endsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
 var _toConsumableArray = require('@babel/runtime-corejs3/helpers/esm/toConsumableArray');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 var _findIndexInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find-index');
 var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
 var VueVirtualScrollList = require('vue-virtual-scroll-list');
@@ -61,7 +60,6 @@ var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefaultLegacy(_s
 var _endsWithInstanceProperty__default = /*#__PURE__*/_interopDefaultLegacy(_endsWithInstanceProperty);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefaultLegacy(_concatInstanceProperty);
-var _JSON$stringify__default = /*#__PURE__*/_interopDefaultLegacy(_JSON$stringify);
 var _findIndexInstanceProperty__default = /*#__PURE__*/_interopDefaultLegacy(_findIndexInstanceProperty);
 var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefaultLegacy(_spliceInstanceProperty);
 var VueVirtualScrollList__default = /*#__PURE__*/_interopDefaultLegacy(VueVirtualScrollList);
@@ -86,15 +84,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { var _context0; if ("string
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys$2(Object(t), !0)).call(_context8, function (r) { _defineProperty__default["default"](e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys$2(Object(t))).call(_context9, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-/**
- * @desc 表单组件
- * @params formRef ref
- * @params model modelForm
- * @params formConfig
- * @params formConfig
- * @params formConfig
- * @params formConfig
- */
 var componentMap = {
   input: "el-input",
   select: "el-select",
@@ -188,7 +177,8 @@ var script$6 = {
           options: item.options || [],
           fields: item.fields || {
             label: 'label',
-            value: 'value'
+            value: 'value',
+            rightLabel: ''
           }
         });
       }
@@ -512,10 +502,6 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _
 //
 //
 
-/**
- * @desc 基础表格: 多选列、序号和操作列分开配置，也可以在tableColumns配置，这时需要插槽
- * @params
- */
 var renderNode = {
   functional: true,
   props: {
@@ -539,8 +525,9 @@ var renderNode = {
   },
   render: function render(h, ctx) {
     try {
-      var render = ctx.render,
-        params = ctx.params;
+      var _ctx$props = ctx.props,
+        render = _ctx$props.render,
+        params = _ctx$props.params;
       var vnode = render(params);
       return vnode || h('span', '');
     } catch (error) {
@@ -666,13 +653,14 @@ var script$5 = {
     },
     getRenderParams: function getRenderParams(scope) {
       return {
-        row: scope.row,
+        row: scope.row || {},
         column: scope.column,
         $h: this.$createElement,
-        index: scope.$index
+        index: scope.$index || 0
       };
     },
     getCellActiveClass: function getCellActiveClass(scope, col) {
+      if (col.clickable) return true;
       if (typeof col.clickableClass === "function") {
         return col.clickableClass(scope, col);
       }
@@ -875,14 +863,14 @@ var __vue_staticRenderFns__$5 = [];
 /* style */
 var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-071ee91e_0", {
-    source: ".bm-table-container[data-v-071ee91e]{box-sizing:border-box}.bm-table-container .bm-pagination[data-v-071ee91e]{display:flex;justify-content:flex-end;margin-top:20px}.bm-table-container .bm-table-cell[data-v-071ee91e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bm-table-container .bm-cell-active[data-v-071ee91e]{color:#02a7f0;cursor:pointer}.bm-table-container[data-v-071ee91e] :deep(.el-tablethead){color:#606266}",
+  inject("data-v-516b74f6_0", {
+    source: ".bm-table-container[data-v-516b74f6]{box-sizing:border-box}.bm-table-container .bm-pagination[data-v-516b74f6]{display:flex;justify-content:flex-end;margin-top:20px}.bm-table-container .bm-table-cell[data-v-516b74f6]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bm-table-container .bm-cell-active[data-v-516b74f6]{color:#1890ff;cursor:pointer}.bm-table-container[data-v-516b74f6] :deep(.el-tablethead){color:#606266}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__$5 = "data-v-071ee91e";
+var __vue_scope_id__$5 = "data-v-516b74f6";
 /* module identifier */
 var __vue_module_identifier__$5 = undefined;
 /* functional template */
@@ -1273,6 +1261,11 @@ var __vue_component__$2 = /*#__PURE__*/normalizeComponent({
 //
 //
 //
+//
+//
+//
+//
+//
 
 var script$1 = {
   name: 'UiVirtualSelectItem',
@@ -1281,6 +1274,9 @@ var script$1 = {
       type: Object,
       "default": function _default() {
         return {};
+      },
+      validator: function validator(val) {
+        return _typeof__default["default"](val) === 'object' && val !== null && !_Array$isArray__default["default"](val);
       }
     },
     label: {
@@ -1296,11 +1292,17 @@ var script$1 = {
       "default": ''
     }
   },
+  computed: {
+    // 判断 source 是否有效（非空+包含必要属性）
+    isValidSource: function isValidSource() {
+      if (!this.source) return false;
+      return this.label in this.source && this.value in this.source;
+    }
+  },
   methods: {
-    // 核心：点击选项时，向上传递选中值
     handleItemClick: function handleItemClick() {
-      var selectedValue = this.source[this.value];
-      // 触发自定义事件，将选中值传递给父组件
+      if (!this.isValidSource) return;
+      var selectedValue = this.source[this.value] || '';
       this.$emit('item-click', selectedValue);
     }
   }
@@ -1314,34 +1316,42 @@ var __vue_render__$1 = function __vue_render__() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c('el-option', {
+  return _c('div', {
+    staticClass: "virtual-select-item-wrap"
+  }, [_vm.isValidSource ? _c('el-option', {
     staticClass: "item",
     attrs: {
-      "label": _vm.source[_vm.label],
-      "value": _vm.source[_vm.value]
+      "label": _vm.source[_vm.label] || '',
+      "value": _vm.source[_vm.value] || ''
     },
     on: {
       "click": _vm.handleItemClick
     }
   }, [_c('span', {
     staticClass: "left-text"
-  }, [_vm._v(_vm._s(_vm.source[_vm.label]))]), _vm._v(" "), _vm.rightLabel ? _c('span', {
+  }, [_vm._v(_vm._s(_vm.source[_vm.label] || ''))]), _vm._v(" "), _vm.rightLabel && _vm.source[_vm.rightLabel] ? _c('span', {
     staticClass: "right-text"
-  }, [_vm._v(_vm._s(_vm.source[_vm.rightLabel]))]) : _vm._e()]);
+  }, [_vm._v(_vm._s(_vm.source[_vm.rightLabel] || ''))]) : _vm._e()]) : _c('el-option', {
+    staticClass: "item empty-item",
+    attrs: {
+      "label": "",
+      "value": ""
+    }
+  })], 1);
 };
 var __vue_staticRenderFns__$1 = [];
 
 /* style */
 var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-d0b52dea_0", {
-    source: ".left-text[data-v-d0b52dea]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.right-text[data-v-d0b52dea]{margin-left:10px;color:#939393;white-space:nowrap}",
+  inject("data-v-fa4fd644_0", {
+    source: ".virtual-select-item-wrap[data-v-fa4fd644]{display:inline-block;width:100%;height:100%;box-sizing:border-box}.left-text[data-v-fa4fd644]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.right-text[data-v-fa4fd644]{margin-left:10px;color:#939393;white-space:nowrap}.empty-item[data-v-fa4fd644]{height:34px;line-height:34px}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__$1 = "data-v-d0b52dea";
+var __vue_scope_id__$1 = "data-v-fa4fd644";
 /* module identifier */
 var __vue_module_identifier__$1 = undefined;
 /* functional template */
@@ -1356,9 +1366,9 @@ var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined);
 
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty__default["default"](e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty__default["default"](e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 var isEmptyObject = function isEmptyObject(obj) {
-  if (!obj || _typeof__default["default"](obj) !== 'object' || _Array$isArray__default["default"](obj)) return false;
+  if (!obj || _typeof__default["default"](obj) !== 'object' || _Array$isArray__default["default"](obj)) return true;
   return _Object$keys__default["default"](obj).length === 0;
 };
 var script = {
@@ -1381,6 +1391,9 @@ var script = {
           value: 'value',
           rightLabel: ''
         };
+      },
+      validator: function validator(val) {
+        return _typeof__default["default"](val) === 'object' && val !== null && 'label' in val && 'value' in val;
       }
     },
     keeps: {
@@ -1412,7 +1425,7 @@ var script = {
   },
   data: function data() {
     return {
-      filteredData: _toConsumableArray__default["default"](this.options),
+      filteredData: [],
       maxItemWidth: 0,
       itemComponent: __vue_component__$1,
       innerValue: this.initInnerValue() // 内部维护选中值，避免直接修改props
@@ -1420,19 +1433,24 @@ var script = {
   },
   computed: {
     computedExtraProps: function computedExtraProps() {
-      var emptyObject = isEmptyObject(this.extraProps);
-      if (emptyObject) {
+      if (isEmptyObject(this.extraProps)) {
         return this.fields;
-      } else {
-        var _this$extraProps = this.extraProps,
-          label = _this$extraProps.label,
-          value = _this$extraProps.value,
-          rightLabel = _this$extraProps.rightLabel;
-        if (!label || !value || !rightLabel) {
-          return this.fields;
-        }
-        return _objectSpread(_objectSpread({}, this.fields), this.extraProps);
       }
+      var _this$extraProps = this.extraProps,
+        _this$extraProps$labe = _this$extraProps.label,
+        label = _this$extraProps$labe === void 0 ? this.fields.label : _this$extraProps$labe,
+        _this$extraProps$valu = _this$extraProps.value,
+        value = _this$extraProps$valu === void 0 ? this.fields.value : _this$extraProps$valu,
+        _this$extraProps$righ = _this$extraProps.rightLabel,
+        rightLabel = _this$extraProps$righ === void 0 ? this.fields.rightLabel : _this$extraProps$righ;
+      if (label && value) {
+        return _objectSpread(_objectSpread({}, this.fields), {}, {
+          label: label,
+          value: value,
+          rightLabel: rightLabel
+        });
+      }
+      return this.fields;
     }
   },
   watch: {
@@ -1448,7 +1466,8 @@ var script = {
       deep: true,
       immediate: true,
       handler: function handler(val) {
-        this.filteredData = _toConsumableArray__default["default"](val);
+        var validOptions = _Array$isArray__default["default"](val) ? val : [];
+        this.filteredData = _toConsumableArray__default["default"](validOptions);
         this.calcMaxItemWidth();
       }
     }
@@ -1475,18 +1494,18 @@ var script = {
       return val === undefined ? null : val;
     },
     calcMaxItemWidth: function calcMaxItemWidth() {
-      var _context,
-        _this = this;
-      if (!this.options.length) return;
+      var _this = this;
+      var validOptions = _Array$isArray__default["default"](this.options) ? this.options : [];
+      if (!validOptions.length) return;
       var temp = document.createElement('div');
       temp.style.cssText = "\n                position: absolute;\n                top: -9999px;\n                left: -9999px;\n                white-space: nowrap;\n                padding: 0 20px;\n                font-size: 14px;\n                box-sizing: border-box;\n            ";
       document.body.appendChild(temp);
       var maxWidth = 0;
-      _forEachInstanceProperty__default["default"](_context = this.options).call(_context, function (item) {
-        var _context2;
-        var label = item[_this.fields.label] || '';
+      _forEachInstanceProperty__default["default"](validOptions).call(validOptions, function (item) {
+        var _context;
+        var label = (item === null || item === void 0 ? void 0 : item[_this.fields.label]) || '';
         var rightLabel = item[_this.fields.rightLabel] || '';
-        temp.innerHTML = _concatInstanceProperty__default["default"](_context2 = "<span>".concat(label, "</span><span style=\"margin-left:10px;color:#939393\">")).call(_context2, rightLabel, "</span>");
+        temp.innerHTML = _concatInstanceProperty__default["default"](_context = "<span>".concat(label, "</span><span style=\"margin-left:10px;color:#939393\">")).call(_context, rightLabel, "</span>");
         maxWidth = Math.max(maxWidth, temp.offsetWidth);
       });
       this.maxItemWidth = maxWidth + 6;
@@ -1507,14 +1526,15 @@ var script = {
       });
     },
     filterMethod: function filterMethod(query) {
-      var _context3,
-        _this3 = this;
+      var _this3 = this;
+      var validOptions = _Array$isArray__default["default"](this.options) ? this.options : [];
       var lowerQuery = (query === null || query === void 0 ? void 0 : query.toLowerCase()) || '';
-      this.filteredData = lowerQuery ? _filterInstanceProperty__default["default"](_context3 = this.options).call(_context3, function (item) {
+      this.filteredData = lowerQuery ? _filterInstanceProperty__default["default"](validOptions).call(validOptions, function (item) {
+        if (!item) return false;
         var label = (item[_this3.fields.label] || '').toLowerCase();
         var rightLabel = _this3.fields.rightLabel ? (item[_this3.fields.rightLabel] || '').toLowerCase() : '';
         return _includesInstanceProperty__default["default"](label).call(label, lowerQuery) || _includesInstanceProperty__default["default"](rightLabel).call(rightLabel, lowerQuery);
-      }) : JSON.parse(_JSON$stringify__default["default"](this.options)); // 深拷贝避免引用污染
+      }) : _toConsumableArray__default["default"](validOptions); // 深拷贝避免引用污染
       this.$nextTick(function () {
         var _this3$$refs$virtualL;
         return (_this3$$refs$virtualL = _this3.$refs.virtualList) === null || _this3$$refs$virtualL === void 0 ? void 0 : _this3$$refs$virtualL.scrollToIndex(0);
@@ -1537,14 +1557,14 @@ var script = {
       var isMultiple = (_this$$attrs2 = this.$attrs) === null || _this$$attrs2 === void 0 ? void 0 : _this$$attrs2.multiple; // 判断是否为多选模式
       var normalizedValue = this.normalizeValue(selectedValue);
       if (isMultiple) {
-        var _context4;
+        var _context2;
         // 多选：切换选中状态（存在则移除，不存在则添加）
-        var valueIndex = _findIndexInstanceProperty__default["default"](_context4 = this.innerValue).call(_context4, function (val) {
+        var valueIndex = _findIndexInstanceProperty__default["default"](_context2 = this.innerValue).call(_context2, function (val) {
           return val === selectedValue;
         });
         if (valueIndex > -1) {
-          var _context5;
-          _spliceInstanceProperty__default["default"](_context5 = this.innerValue).call(_context5, valueIndex, 1);
+          var _context3;
+          _spliceInstanceProperty__default["default"](_context3 = this.innerValue).call(_context3, valueIndex, 1);
         } else {
           this.innerValue.push(selectedValue);
         }
@@ -1600,7 +1620,7 @@ var __vue_render__ = function __vue_render__() {
       "data-sources": _vm.filteredData,
       "data-component": _vm.itemComponent,
       "keeps": _vm.keeps,
-      "extra-props": _vm.computedExtraProps,
+      "extra-props": _vm.computedExtraProps || {},
       "estimate-size": _vm.estimateSize
     },
     on: {
@@ -1613,14 +1633,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-4ce656fa_0", {
-    source: ".select-wrap[data-v-4ce656fa]{position:relative}.select-wrap .bm-select[data-v-4ce656fa]{width:100%}.virtual-select-popper[data-v-4ce656fa]{padding:0!important;border:1px solid #e4e7ed!important;border-radius:4px!important}.virtual-list[data-v-4ce656fa]{max-height:245px;overflow-y:auto;overflow-x:hidden!important;scrollbar-width:thin;scrollbar-color:#e4e7ed #f5f7fa}.virtual-list[data-v-4ce656fa]::-webkit-scrollbar{width:6px!important;display:block!important}.virtual-list[data-v-4ce656fa]::-webkit-scrollbar-thumb{background-color:#e4e7ed;border-radius:3px}.virtual-list[data-v-4ce656fa]::-webkit-scrollbar-track{background-color:#f5f7fa}[data-v-4ce656fa]:deep(.el-scrollbar__bar.is-vertical){display:none!important}",
+  inject("data-v-09366db6_0", {
+    source: ".select-wrap[data-v-09366db6]{position:relative}.select-wrap .bm-select[data-v-09366db6]{width:100%}.virtual-select-popper[data-v-09366db6]{padding:0!important;border:1px solid #e4e7ed!important;border-radius:4px!important}.virtual-list[data-v-09366db6]{max-height:245px;overflow-y:auto;overflow-x:hidden!important;scrollbar-width:thin;scrollbar-color:#e4e7ed #f5f7fa}.virtual-list[data-v-09366db6]::-webkit-scrollbar{width:6px!important;display:block!important}.virtual-list[data-v-09366db6]::-webkit-scrollbar-thumb{background-color:#e4e7ed;border-radius:3px}.virtual-list[data-v-09366db6]::-webkit-scrollbar-track{background-color:#f5f7fa}[data-v-09366db6]:deep(.el-scrollbar__bar.is-vertical){display:none!important}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-var __vue_scope_id__ = "data-v-4ce656fa";
+var __vue_scope_id__ = "data-v-09366db6";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend-management-ui",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "description": "一个基于Vue+ElementUI封装的后台管理仓库，包含表格、表单、弹窗、按钮组、虚拟下拉框等常用组件",
   "author": {
     "name": "adolf3",