@weitutech/by-components 1.1.132 → 1.1.134

package/lib/by-components.common.js

@@ -60514,6 +60514,7 @@ __webpack_require__.d(__webpack_exports__, {
   ByForm: function() { return /* reexport */ form_form; },
   ByPageSearch: function() { return /* reexport */ page_search; },
   ByPager: function() { return /* reexport */ pager; },
+  ByPopoverSelector: function() { return /* reexport */ ByPopoverSelector; },
   BySelect: function() { return /* reexport */ comps_select; },
   ByTable: function() { return /* reexport */ table; },
   ByToolBar: function() { return /* reexport */ ByToolBar; },
@@ -80274,6 +80275,420 @@ var ByFloatingMenu_component = normalizeComponent(
 )
 
 /* harmony default export */ var ByFloatingMenu = (ByFloatingMenu_component.exports);
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"ffbc40de-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/popover-selector/ByPopoverSelector.vue?vue&type=template&id=686db86e&scoped=true
+var ByPopoverSelectorvue_type_template_id_686db86e_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "by-popover-selector"
+  }, [_c('el-popover', {
+    ref: "popover",
+    attrs: {
+      "placement": _vm.placement,
+      "width": _vm.popoverWidth,
+      "trigger": "click",
+      "disabled": _vm.disabled,
+      "popper-class": "by-popover-selector-popover"
+    },
+    on: {
+      "show": _vm.handleShow,
+      "hide": _vm.handleHide
+    },
+    model: {
+      value: _vm.visible,
+      callback: function ($$v) {
+        _vm.visible = $$v;
+      },
+      expression: "visible"
+    }
+  }, [_c('div', {
+    staticClass: "popover-content"
+  }, [_vm.title ? _c('div', {
+    staticClass: "popover-title"
+  }, [_vm._v(" " + _vm._s(_vm.title) + " ")]) : _vm._e(), _c('div', {
+    staticClass: "options-container",
+    class: {
+      'multi-column': _vm.isMultiColumn
+    }
+  }, [!_vm.multiple ? _c('el-radio-group', {
+    staticClass: "options-group",
+    on: {
+      "change": _vm.handleSingleChange
+    },
+    model: {
+      value: _vm.selectedValue,
+      callback: function ($$v) {
+        _vm.selectedValue = $$v;
+      },
+      expression: "selectedValue"
+    }
+  }, _vm._l(_vm.displayOptions, function (item, index) {
+    return _c('div', {
+      key: item.id || item.value || index,
+      staticClass: "option-item",
+      class: {
+        'disabled': item.disabled
+      }
+    }, [_c('el-radio', {
+      staticClass: "option-radio",
+      attrs: {
+        "label": item.id || item.value,
+        "disabled": item.disabled
+      }
+    }, [_vm._v(" " + _vm._s(item.name || item.label) + " ")])], 1);
+  }), 0) : _c('el-checkbox-group', {
+    staticClass: "options-group",
+    on: {
+      "change": _vm.handleMultipleChange
+    },
+    model: {
+      value: _vm.selectedValues,
+      callback: function ($$v) {
+        _vm.selectedValues = $$v;
+      },
+      expression: "selectedValues"
+    }
+  }, _vm._l(_vm.displayOptions, function (item, index) {
+    return _c('div', {
+      key: item.id || item.value || index,
+      staticClass: "option-item",
+      class: {
+        'disabled': item.disabled
+      }
+    }, [_c('el-checkbox', {
+      staticClass: "option-checkbox",
+      attrs: {
+        "label": item.id || item.value,
+        "disabled": item.disabled
+      }
+    }, [_vm._v(" " + _vm._s(item.name || item.label) + " ")])], 1);
+  }), 0)], 1), _c('div', {
+    staticClass: "popover-footer"
+  }, [_c('el-button', {
+    attrs: {
+      "size": "small"
+    },
+    on: {
+      "click": _vm.handleCancel
+    }
+  }, [_vm._v(" " + _vm._s(_vm.cancelText) + " ")]), _c('el-button', {
+    staticClass: "confirm-button",
+    staticStyle: {
+      "min-width": "60px !important",
+      "height": "32px !important",
+      "visibility": "visible !important",
+      "display": "inline-block !important",
+      "opacity": "1 !important",
+      "background-color": "#409eff !important",
+      "border-color": "#409eff !important",
+      "color": "#ffffff !important"
+    },
+    attrs: {
+      "type": _vm.hasSelection ? 'primary' : 'default',
+      "size": "small",
+      "disabled": !_vm.hasSelection
+    },
+    on: {
+      "click": _vm.handleConfirm
+    }
+  }, [_vm._v(" " + _vm._s(_vm.confirmText) + " ")])], 1)]), _c('el-button', {
+    class: ['trigger-button', {
+      'tiny-button': _vm.tiny
+    }],
+    attrs: {
+      "slot": "reference",
+      "type": _vm.buttonType,
+      "plain": "",
+      "size": _vm.tiny ? 'mini' : _vm.buttonSize,
+      "disabled": _vm.disabled,
+      "loading": _vm.loading
+    },
+    slot: "reference"
+  }, [_vm._v(" " + _vm._s(_vm.dynamicButtonText) + " ")])], 1)], 1);
+};
+var ByPopoverSelectorvue_type_template_id_686db86e_scoped_true_staticRenderFns = [];
+
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/popover-selector/ByPopoverSelector.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var ByPopoverSelectorvue_type_script_lang_js = ({
+  name: 'ByPopoverSelector',
+  props: {
+    // 数据源
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的值（单选）
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    // 当前选中的值（多选）
+    values: {
+      type: Array,
+      default: () => []
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 弹出层标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 按钮文本
+    buttonText: {
+      type: String,
+      default: '选择'
+    },
+    // 按钮类型
+    buttonType: {
+      type: String,
+      default: 'default'
+    },
+    // 按钮尺寸
+    buttonSize: {
+      type: String,
+      default: 'small'
+    },
+    // 是否使用超小按钮
+    tiny: {
+      type: Boolean,
+      default: false
+    },
+    // 弹出层位置
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    // 弹出层宽度
+    popoverWidth: {
+      type: [String, Number],
+      default: 300
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 确认按钮文本
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    // 取消按钮文本
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    // 选项的键名配置
+    optionProps: {
+      type: Object,
+      default: () => ({
+        label: 'name',
+        value: 'id',
+        disabled: 'disabled'
+      })
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      selectedValue: null,
+      selectedValues: [],
+      tempSelectedValue: null,
+      tempSelectedValues: []
+    };
+  },
+  computed: {
+    // 处理后的选项数据
+    processedOptions() {
+      return this.options.map(item => {
+        if (typeof item === 'string') {
+          return {
+            id: item,
+            name: item,
+            disabled: false
+          };
+        }
+        return {
+          id: item[this.optionProps.value] || item.id,
+          name: item[this.optionProps.label] || item.name || item.label,
+          disabled: item[this.optionProps.disabled] || item.disabled || false
+        };
+      });
+    },
+    // 显示的选项
+    displayOptions() {
+      return this.processedOptions;
+    },
+    // 是否多列显示
+    isMultiColumn() {
+      return false; // 不再使用多列布局
+    },
+    // 是否有选中项
+    hasSelection() {
+      if (this.multiple) {
+        return this.tempSelectedValues.length > 0;
+      } else {
+        return this.tempSelectedValue !== null && this.tempSelectedValue !== undefined;
+      }
+    },
+    // 当前选中的选项
+    selectedOptions() {
+      if (this.multiple) {
+        return this.processedOptions.filter(option => this.selectedValues.includes(option.id));
+      } else {
+        return this.processedOptions.find(option => option.id === this.selectedValue);
+      }
+    },
+    // 动态按钮文本
+    dynamicButtonText() {
+      if (this.multiple) {
+        // 多选模式保持默认文本
+        return this.buttonText;
+      } else {
+        // 单选模式显示选中项名称
+        const selectedOption = this.selectedOptions;
+        return selectedOption ? selectedOption.name : this.buttonText;
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        this.selectedValue = newVal;
+        this.tempSelectedValue = newVal;
+      },
+      immediate: true
+    },
+    values: {
+      handler(newVal) {
+        this.selectedValues = [...newVal];
+        this.tempSelectedValues = [...newVal];
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // 处理弹出层显示
+    handleShow() {
+      // 重置临时选择
+      this.tempSelectedValue = this.selectedValue;
+      this.tempSelectedValues = [...this.selectedValues];
+      this.$emit('show');
+    },
+    // 处理弹出层隐藏
+    handleHide() {
+      this.$emit('hide');
+    },
+    // 处理单选变化
+    handleSingleChange(value) {
+      this.tempSelectedValue = value;
+    },
+    // 处理多选变化
+    handleMultipleChange(values) {
+      this.tempSelectedValues = [...values];
+    },
+    // 处理确认
+    handleConfirm() {
+      if (this.multiple) {
+        this.selectedValues = [...this.tempSelectedValues];
+        this.$emit('input', this.selectedValues);
+        this.$emit('change', this.selectedValues, this.getSelectedOptions(this.selectedValues));
+      } else {
+        this.selectedValue = this.tempSelectedValue;
+        this.$emit('input', this.selectedValue);
+        this.$emit('change', this.selectedValue, this.getSelectedOption(this.selectedValue));
+      }
+      this.visible = false;
+      this.$emit('confirm', this.multiple ? this.selectedValues : this.selectedValue);
+    },
+    // 处理取消
+    handleCancel() {
+      // 恢复临时选择
+      this.tempSelectedValue = this.selectedValue;
+      this.tempSelectedValues = [...this.selectedValues];
+      this.visible = false;
+      this.$emit('cancel');
+    },
+    // 获取选中的选项对象（单选）
+    getSelectedOption(value) {
+      return this.processedOptions.find(option => option.id === value);
+    },
+    // 获取选中的选项对象（多选）
+    getSelectedOptions(values) {
+      return this.processedOptions.filter(option => values.includes(option.id));
+    },
+    // 清空选择
+    clear() {
+      if (this.multiple) {
+        this.selectedValues = [];
+        this.tempSelectedValues = [];
+        this.$emit('input', []);
+        this.$emit('change', [], []);
+      } else {
+        this.selectedValue = null;
+        this.tempSelectedValue = null;
+        this.$emit('input', null);
+        this.$emit('change', null, null);
+      }
+    },
+    // 设置选择
+    setSelection(value) {
+      if (this.multiple) {
+        const values = Array.isArray(value) ? value : [value];
+        this.selectedValues = [...values];
+        this.tempSelectedValues = [...values];
+        this.$emit('input', values);
+        this.$emit('change', values, this.getSelectedOptions(values));
+      } else {
+        this.selectedValue = value;
+        this.tempSelectedValue = value;
+        this.$emit('input', value);
+        this.$emit('change', value, this.getSelectedOption(value));
+      }
+    }
+  }
+});
+;// ./src/components/popover-selector/ByPopoverSelector.vue?vue&type=script&lang=js
+ /* harmony default export */ var popover_selector_ByPopoverSelectorvue_type_script_lang_js = (ByPopoverSelectorvue_type_script_lang_js); 
+;// ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[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/popover-selector/ByPopoverSelector.vue?vue&type=style&index=0&id=686db86e&prod&lang=scss&scoped=true
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/popover-selector/ByPopoverSelector.vue?vue&type=style&index=0&id=686db86e&prod&lang=scss&scoped=true
+
+;// ./src/components/popover-selector/ByPopoverSelector.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var ByPopoverSelector_component = normalizeComponent(
+  popover_selector_ByPopoverSelectorvue_type_script_lang_js,
+  ByPopoverSelectorvue_type_template_id_686db86e_scoped_true_render,
+  ByPopoverSelectorvue_type_template_id_686db86e_scoped_true_staticRenderFns,
+  false,
+  null,
+  "686db86e",
+  null
+  
+)
+
+/* harmony default export */ var ByPopoverSelector = (ByPopoverSelector_component.exports);
 ;// ./src/index.js
 
 
@@ -80294,6 +80709,7 @@ var ByFloatingMenu_component = normalizeComponent(
 
 
 
+
 
 const components = {
   ByPager: pager,
@@ -80310,7 +80726,8 @@ const components = {
   ByTreeSearch: ByTreeSearch,
   ByDialog: ByDialog,
   ByCascaderPanel: ByCascaderPanel,
-  ByFloatingMenu: ByFloatingMenu
+  ByFloatingMenu: ByFloatingMenu,
+  ByPopoverSelector: ByPopoverSelector
 };
 
 // 设置当前 z-index 起始值

package/lib/by-components.css

@@ -1 +1 @@
-.b-form .header[data-v-04400171]{margin-bottom:20px}.b-form .footer[data-v-04400171]{margin-top:20px}
+.b-form .header[data-v-04400171]{margin-bottom:20px}.b-form .footer[data-v-04400171]{margin-top:20px}.by-popover-selector[data-v-686db86e]{display:inline-block}.by-popover-selector .trigger-button[data-v-686db86e]{min-width:80px}[data-v-686db86e] .by-popover-selector-popover{padding:0!important}[data-v-686db86e] .by-popover-selector-popover .popover-content{padding:16px;min-width:200px}[data-v-686db86e] .by-popover-selector-popover .popover-content .popover-title{font-size:16px;font-weight:600;color:#303133;margin-bottom:16px;text-align:left;border-bottom:1px solid #ebeef5;padding-bottom:8px}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container{margin-bottom:16px}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container.multi-column{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group{width:100%}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item{margin-bottom:8px}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item.disabled{opacity:.6;cursor:not-allowed}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-checkbox,[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-radio{width:100%;margin-right:0}[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-checkbox :deep(.el-checkbox__label),[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-checkbox :deep(.el-radio__label),[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-radio :deep(.el-checkbox__label),[data-v-686db86e] .by-popover-selector-popover .popover-content .options-container .options-group .option-item .option-radio :deep(.el-radio__label){font-size:14px;color:#606266;padding-left:8px}[data-v-686db86e] .by-popover-selector-popover .popover-content .popover-footer{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #ebeef5;padding-top:12px}[data-v-686db86e] .by-popover-selector-popover .popover-content .popover-footer .el-button{min-width:60px}