shu-c-view/packages/select-checkbox/index.js

rollup 打包vue@2.7组件库框架

/**
 * @desc BaseColorCard 色卡
 */
// import _isArray from 'lodash/isArray';
// import _isEmpty from 'lodash/isEmpty';
// import _merge from 'lodash/merge';
// import { devConsole } from '../helper/util.js';

const BaseSelectCheckbox = {
  name: 'BaseSelectCheckbox',
  props: {
    // 展示数据
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 面板的长度
    panelWidth: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number, Array],
      required: true
    },
    // 展示的字段
    displayValue: {
      type: String,
      default: 'name'
    },
    // 绑定的值
    bindValue: {
      type: String,
      default: 'id'
    },
    // 最多可选择的数量
    maxChoiceNum: {
      type: [String, Number],
      default: 1000
    },

    // 子应用字段绑定的属性值
    bindChildren: {
      type: String,
      default: 'children'
    }
  },
  model: {
    prop: 'value',
    event: 'selectChange'
  },
  watch: {
    value: {
      handler() {
        //
      },
      deep: true
    }
  },
  computed: {},
  mounted() {
    setTimeout(() => {
      this.initParams();
    }, 1500);
  },
  data() {
    this.h = this.$createElement;
    return {
      value1: [],
      checkedCities: []
    };
  },
  methods: {
    // 初始化参数
    initParams() {
      this.checkedCities = [];
      this.value.forEach(k => {
        this.recursionCom(this.data, k, this.bindValue);
      });
      if (this.recursionCom.length) {
        this.value1 = this.checkedCities.map(v => v[this.displayValue]);
      }
      this.$emit('returnparam', this.checkedCities);
    },
    // 递归参数
    recursionCom(data, id, key) {
      data.forEach(v => {
        if (v[key] === id) {
          this.checkedCities.push(v);
        }
        if (v[this.bindChildren]) {
          this.recursionCom(v[this.bindChildren], id, key);
        }
      });
    },
    /**
     * @description 生成面板
     * @date 2022-03-23
     * @returns {any}
     */
    createCheckGroup() {
      return this.h(
        'el-checkbox-group',
        {
          props: {
            value: this.checkedCities,
            max: this.maxChoiceNum
          },
          on: {
            change: k => {
              this.value1 = this.checkedCities.map(v => v[this.displayValue]);
              const value = this.checkedCities.map(v => v[this.bindValue]);
              this.$emit('selectChange', value);
              this.$emit('returnparam', k);
            },
            input: v => {
              this.checkedCities = v;
            }
          }
        },
        this.createCheckBox()
      );
    },
    // 生成内容
    createCheckBox() {
      return this.data.map(v =>
        this.h('div', {}, [
          this.h(
            'div',
            {
              style: {
                fontSize: '16px',
                margin: '8px 0'
              }
            },
            [v[this.displayValue]]
          ),

          this.h('div', {}, [
            v.children.map(k =>
              this.h(
                'el-checkbox',
                {
                  props: {
                    label: k
                  }
                },
                [k[this.displayValue]]
              )
            )
          ])
        ])
      );
    }
  },
  render(h) {
    return h('div', {}, [
      h(
        'el-select',
        {
          props: {
            value: this.value1,
            multiple: true,
            clearable: true
          },
          on: {
            clear: () => {
              this.value1 = [];
              this.checkedCities = [];
              this.$emit('selectChange', []);
              this.$emit('returnparam', []);
            },
            'remove-tag': v => {
              this.checkedCities = [];
              this.value1 = this.value1.filter(k => k !== v);
              this.value1.forEach(k => {
                this.recursionCom(this.data, k, this.displayValue);
              });
              const value = this.checkedCities.map(v => v[this.bindValue]);
              this.$emit('selectChange', value);
              this.$emit('returnparam', this.checkedCities);
            }
          }
        },
        [
          h(
            'div',
            {
              slot: 'empty',
              style: {
                width: this.panelWidth ? this.panelWidth : '100%',
                height: '280px',
                padding: '10px'
              }
            },
            [
              h(
                'div',
                {
                  style: {
                    width: '100%',
                    height: this.$slots.default ? '20px' : 0
                  }
                },
                this.$slots.default
              ),
              h(
                'div',
                {
                  style: {
                    width: '100%',
                    height: this.$slots.default ? 'calc(100% - 20px)' : '100%',
                    overflow: 'auto'
                  }
                },
                [this.createCheckGroup()]
              )
            ]
          )
        ]
      )
    ]);
  }
};

export { BaseSelectCheckbox };