eoss-ui 0.3.97

package/packages/select/src/main.vue

@@ -0,0 +1,683 @@
+<script>
+import { findSysCode } from 'eoss-ui/src/config/api.js';
+import store from 'eoss-ui/src/utils/store';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsSelect',
+  componentName: 'EsSelect',
+  inheritAttrs: false,
+  provide() {
+    return {
+      esSelect: this
+    };
+  },
+  props: {
+    value: [String, Array, Object, Number],
+    method: {
+      type: String,
+      default: 'get'
+    },
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 显示隐藏组件
+    display: {
+      type: Boolean,
+      default: true
+    },
+    // 	是否不渲染组件
+    hide: {
+      type: Boolean,
+      default: false
+    },
+    valueType: String,
+    // 选择项的值字段
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    // 指定选择项显示值的键名，data元素是对象类型时必填
+    labelKey: {
+      type: String,
+      default: 'name'
+    },
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 远程搜索
+    remote: Boolean,
+    remoteKey: {
+      type: String,
+      default: 'searchKey'
+    },
+    remoteMethod: Function,
+    // 选择项远程地址
+    url: String,
+    wait: {
+      type: Boolean,
+      default: true
+    },
+    // 选择项获取代码表数据(优先级大于url)
+    sysCode: String,
+    filtrate: [String, Object, Array],
+    filtrateKey: {
+      type: String,
+      default: 'pid'
+    },
+    readonly: Boolean,
+    separator: {
+      type: String,
+      default: '-'
+    },
+    symbol: {
+      type: String,
+      default: '，'
+    },
+    plain: Boolean,
+    where: Object,
+    parseData: Function,
+    disabled: Boolean,
+    // 是否下拉树选择
+    tree: {
+      type: [Boolean, Object],
+      default: false
+    },
+    // 父级是否可选
+    parentCheck: {
+      type: Boolean,
+      default: true
+    },
+    // 父级可选时父级是否作为单独的值
+    parentAsValue: {
+      type: Boolean,
+      default: true
+    },
+    group: Boolean,
+    multiple: Boolean,
+    defaultValue: Boolean,
+    onExpand: Function,
+    onLoadsub: Function,
+    subParamKey: Object,
+    lazy: Boolean,
+    //是否请求代码表
+    ajax: {
+      type: Boolean,
+      default: true
+    },
+    isNoParamRequest: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      options: '',
+      valKey: this.valueKey,
+      label: this.labelKey,
+      hidden: false
+    };
+  },
+  computed: {
+    isObject() {
+      if (this.valueType === 'object') {
+        return true;
+      }
+      if (
+        util.isObject(this.value) ||
+        (this.value && this.value[0] && util.isObject(this.value[0]))
+      ) {
+        return true;
+      }
+      return false;
+    },
+    isRemote() {
+      return new Boolean(this.remote);
+    },
+    results() {
+      if (this.options.length) {
+        return this.options;
+      }
+      if (this.filtrate) {
+        if (Array.isArray(this.filtrate) && this.filtrate.length) {
+          let ary = [];
+          this.filtrate.forEach(items => {
+            let val = typeof items === 'string' ? items : items[this.valKey];
+            ary.concat(
+              this.data.filter(item => {
+                return item[this.filtrateKey] == val;
+              })
+            );
+          });
+        } else {
+          let val =
+            typeof this.filtrate === 'string'
+              ? this.filtrate
+              : this.filtrate[this.valKey];
+          return this.data.filter(item => {
+            return item[this.filtrateKey] == val;
+          });
+        }
+      }
+      return this.data;
+    },
+    models: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  watch: {
+    sysCode: {
+      immediate: true,
+      handler(val, old) {
+        if (val && val !== old) {
+          this.label = 'shortName';
+          this.valKey = 'cciValue';
+          const options = store.get(val);
+          if (options) {
+            this.options = JSON.parse(JSON.stringify(options));
+          } else {
+            this.getData(val);
+          }
+        }
+      }
+    },
+    url: {
+      handler(val, old) {
+        if (val && old !== val && !this.sysCode) {
+          this.getData();
+        }
+      }
+    },
+    param: {
+      deep: true,
+      handler(val, old) {
+        if (this.url && JSON.stringify(val) !== JSON.stringify(old)) {
+          this.options = [];
+          this.getData(this.sysCode);
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.wait) {
+      this.getData();
+    }
+  },
+  methods: {
+    createOption({ filtrate, data, readonly = false, h }) {
+      let filte =
+        filtrate && util.isObject(filtrate) ? filtrate[this.valKey] : filtrate;
+      let eles = [];
+      data.forEach(item => {
+        if (this.models === undefined && item.selected) {
+          this.$emit(
+            'input',
+            this.valueType === 'object' ? item : item[this.valKey]
+          );
+        }
+        if (
+          (Object.prototype.hasOwnProperty.call(item, 'children') ||
+            Object.prototype.hasOwnProperty.call(item, 'options')) &&
+          (item.children || item.options)
+        ) {
+          const children = item.children || item.options;
+          if (readonly) {
+            eles.push(
+              this.createOption({ filtrate, data: children, readonly, h })
+            );
+          } else {
+            eles.push(
+              h(
+                'el-option-group',
+                { attrs: { label: item[this.label] || item.label } },
+                this.createOption({ filtrate, data: children, readonly, h })
+              )
+            );
+          }
+        } else {
+          if (readonly) {
+            if (item[this.valKey] === filte) {
+              eles.push(item[this.label] || item.label);
+            }
+          } else {
+            if (
+              filte === null ||
+              filte === undefined ||
+              filte === '' ||
+              filte === item[this.filtrateKey]
+            ) {
+              if (typeof item === 'string') {
+                eles.push(
+                  h('el-option', {
+                    attrs: {
+                      label: item,
+                      value: item
+                    }
+                  })
+                );
+              } else {
+                eles.push(
+                  h('el-option', {
+                    attrs: {
+                      label: item[this.label] || item.label,
+                      value: this.isObject ? item : item[this.valKey]
+                    }
+                  })
+                );
+              }
+            }
+          }
+        }
+      });
+      return eles;
+    },
+    getData(sysCode, param) {
+      if (
+        !this.ajax ||
+        (!this.isNoParamRequest && Object.keys(this.param).length == 0)
+      ) {
+        return false;
+      }
+      let params = {};
+      if (this.results.length === 0) {
+        params = util.extend(
+          {},
+          this.param,
+          sysCode ? { sysAppCode: sysCode } : {},
+          param ? param : {}
+        );
+      } else {
+        return false;
+      }
+      if (!sysCode && !this.url) {
+        return false;
+      }
+      this.loading = true;
+      util
+        .ajax({
+          url: sysCode ? findSysCode : this.url,
+          method: this.method,
+          params: params,
+          data: params
+        })
+        .then(res => {
+          this.loading = false;
+          if (res.rCode === 0) {
+            if (this.parseData) {
+              this.options = this.parseData(res.results);
+            } else {
+              this.options = JSON.parse(JSON.stringify(res.results));
+            }
+            if (sysCode) {
+              store.set(sysCode, JSON.parse(JSON.stringify(this.options)));
+            }
+          }
+        })
+        .catch(err => {
+          this.loading = false;
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    search(query) {
+      if (query !== '') {
+        if (this.url !== '') {
+          this.loading = true;
+          let params = {};
+          params[this.remoteKey] = query;
+          params = util.extend({}, this.param, params);
+          util
+            .ajax({
+              url: this.url,
+              method: this.method,
+              params: params,
+              data: params
+            })
+            .then(res => {
+              this.loading = false;
+              if (res.rCode === 0) {
+                this.options = res.results.filter(item => {
+                  if (item[this.label]) {
+                    return (
+                      item[this.label]
+                        .toLowerCase()
+                        .indexOf(query.toLowerCase()) > -1
+                    );
+                  } else {
+                    return (
+                      item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
+                    );
+                  }
+                });
+              }
+            })
+            .catch(err => {
+              this.loading = false;
+              if (err.message && err.message !== 'canceled') {
+                this.$message.error(err.message);
+              }
+            });
+        } else {
+          this.options = [];
+        }
+      } else {
+        this.options = this.data;
+      }
+    },
+    renderd(doms, h, type) {
+      if (typeof this.$attrs[type] === 'boolean') {
+        if (this.$attrs.render) {
+          if (typeof this.$attrs.render == 'string') {
+            try {
+              doms.push(
+                h(
+                  'template',
+                  { slot: type },
+                  util.toFunction(this.$attrs.render)(h, this)
+                )
+              );
+            } catch (error) {
+              throw error;
+            }
+          } else {
+            doms.push(
+              h('template', { slot: type }, this.$attrs.render(h, this))
+            );
+          }
+        }
+      } else if (typeof this.$attrs[type] === 'object') {
+        doms.push(
+          h(
+            'es-button',
+            {
+              slot: type,
+              class: ['el-primeval', this.$attrs[type].class],
+              props: {
+                ...this.$attrs[type].props,
+                size: this.$attrs[type].size
+                  ? this.$attrs[type].size
+                  : type === 'prefix' || type === 'suffix'
+                  ? 'small'
+                  : '',
+                type: 'primary'
+              },
+              domProps: this.$attrs[type].icon
+                ? { innerHTML: this.$attrs[type].icon }
+                : {},
+              on: {
+                click: e => {
+                  this.$attrs[type].click &&
+                    this.$attrs[type].click(this, this.model);
+                  this.$attrs[type].event &&
+                    this.$attrs[type].event(this, this.model);
+                }
+              },
+              ref: 'selectBtn'
+            },
+            [this.$attrs[type].text]
+          )
+        );
+      } else {
+        doms.push(h('template', { slot: type }, [this.$attrs[type]]));
+      }
+    },
+    getLabel(value, data) {
+      if (value && data) {
+        if (util.isObject(data)) {
+          if (value === data[this.valKey]) {
+            return data[this.label];
+          } else if (value === data[this.label]) {
+            return value;
+          } else if (
+            Object.prototype.hasOwnProperty.call(data, 'children') &&
+            data.children &&
+            data.children.length
+          ) {
+            let val = this.getLabel(value, data.children);
+            if (val) {
+              return val;
+            }
+          }
+        } else {
+          if (typeof data === 'string' || !data.length) {
+            return value;
+          }
+          if (Array.isArray(data) && data.length) {
+            for (let i = 0; i < data.length; i++) {
+              let val = this.getLabel(value, data[i]);
+              if (val) {
+                return val;
+              }
+            }
+          }
+        }
+      }
+      return '';
+    },
+    reload(param) {
+      this.getData(null, param);
+    },
+    handleExpand(data, node) {
+      if (this.onExpand) {
+        this.onExpand(data, node);
+      } else {
+        if (this.lazy) {
+          this.loadsub(data, node);
+        }
+        this.$emit('node-expand', data, node);
+      }
+    },
+    //请求子节点数据
+    loadsub(data, node) {
+      if (data.state !== '' && (!data.children || data.children.length === 0)) {
+        let param = {};
+        if (this.subParamKey) {
+          for (let i in this.subParamKey) {
+            param[i] = data[this.subParamKey[i]];
+          }
+        } else {
+          param[this.valKey] = data[this.valKey];
+        }
+        let params = util.extend({}, this.param, this.where, param);
+        if (this.parseParams) {
+          params = this.parseParams({ data, params, node });
+        }
+        if (this.onLoadsub) {
+          this.onLoadsub({ data, params, node })
+            .then(res => {
+              this.loading = false;
+              this.$set(data, 'children', JSON.parse(JSON.stringify(res)));
+            })
+            .catch(e => {
+              this.loading = false;
+            });
+        } else {
+          util
+            .ajax({
+              method: this.method,
+              url: this.url,
+              data: params,
+              params: params
+            })
+            .then(res => {
+              if (res.rCode === 0) {
+                this.loading = false;
+                let results = JSON.parse(JSON.stringify(res.results));
+                if (Array.isArray(results)) {
+                  if (data.id === results[0].id) {
+                    this.$set(data, 'children', results[0].children);
+                  } else {
+                    this.$set(data, 'children', results);
+                  }
+                } else if (data.id === results.id) {
+                  this.$set(data, 'children', results.children);
+                } else {
+                  console.error('tree数据格式错误');
+                }
+              }
+            })
+            .catch(err => {
+              this.loading = false;
+              if (err.message && err.message !== 'canceled') {
+                this.$message.error(err.message);
+              }
+            });
+        }
+      }
+    },
+    toggleMenu() {
+      this.$refs.elSelect.toggleMenu();
+    }
+  },
+  render(h) {
+    if (!this.hide) {
+      if (this.readonly) {
+        let dom = [];
+        if (Array.isArray(this.models)) {
+          dom = this.models.map(item => {
+            if (util.isObject(item)) {
+              if (!item[this.label] && !item.label) {
+                return this.getLabel(value[this.valKey], data);
+              }
+              return item[this.label] || item.label;
+            }
+            return this.getLabel(item, this.results);
+          });
+        } else if (util.isObject(this.models)) {
+          if (!this.models[this.label] && !this.models.label) {
+            dom = [this.getLabel(this.models[this.valKey], this.results)];
+          } else {
+            dom = [this.models[this.label] || this.models.label];
+          }
+        } else {
+          dom = [this.getLabel(this.models, this.results)];
+        }
+        return h(
+          'div',
+          {
+            class: [
+              {
+                'es-plain': this.plain,
+                'es-textarea__inner el-textarea__inner': this.multiple,
+                'el-input__inner es-input__inner': !this.multiple
+              }
+            ]
+          },
+          [dom.join(this.symbol)]
+        );
+      }
+      let doms = [];
+      let cls = [];
+      if (this.results.length && !this.tree) {
+        if (this.filtrate && Array.isArray(this.filtrate)) {
+          doms = this.filtrate.map(item => {
+            return h(
+              'el-option-group',
+              {
+                attrs: {
+                  label: item[this.label] || item.label,
+                  key: item[this.valKey]
+                }
+              },
+              this.createOption({ filtrate: item, data: this.results, h })
+            );
+          });
+        } else {
+          doms = this.createOption({
+            filtrate: this.filtrate,
+            data: this.results,
+            h
+          });
+        }
+      }
+      if (this.$slots.prefix) {
+        doms.push(h('template', { slot: 'prefix' }, this.$slots.prefix));
+      } else if (this.$attrs.prefix) {
+        this.renderd(doms, h, 'prefix');
+        cls.push('es-select-button-prefix');
+      }
+      if (this.$slots.suffix) {
+        doms.push(h('template', { slot: 'suffix' }, this.$slots.suffix));
+      } else if (this.$attrs.suffix) {
+        this.renderd(doms, h, 'suffix');
+        cls.push('es-select-button-suffix');
+      }
+      if (this.$slots.prepend) {
+        doms.push(h('template', { slot: 'prepend' }, this.$slots.prepend));
+      } else if (this.$attrs.prepend) {
+        this.renderd(doms, h, 'prepend');
+      }
+      if (this.$slots.append) {
+        doms.push(h('template', { slot: 'append' }, this.$slots.append));
+      } else if (this.$attrs.append) {
+        this.renderd(doms, h, 'append');
+      }
+      if (!this.models && this.results.length && this.defaultValue) {
+        if (this.valueType === 'object') {
+          this.models = this.results[0];
+          //this.$emit('input', this.results[0]);
+        } else {
+          this.models = this.results[0][this.valKey];
+          //this.$emit('input', this.results[0][this.valKey]);
+        }
+        this.$emit('change', this.results[0], 0);
+      }
+      return h(
+        'el-select',
+        {
+          class: cls,
+          ref: 'elSelect',
+          directives: [
+            {
+              name: 'show',
+              value: this.display
+            }
+          ],
+          props: {
+            ...this.$attrs,
+            multiple: this.multiple,
+            valueType: this.valueType,
+            valueKey: this.valKey,
+            labelKey: this.label,
+            loading: this.loading,
+            disabled: this.disabled,
+            tree:
+              typeof this.tree === 'boolean'
+                ? this.tree
+                : { ...this.tree, lazy: this.label },
+            data: this.results,
+            // 父级是否可选
+            parentCheck: this.parentCheck,
+            // 父级可选时父级是否作为单独的值
+            parentAsValue: this.parentAsValue,
+            value: this.models
+          },
+          attrs: {
+            remoteMethod: !this.remoteMethod ? this.search : this.remoteMethod,
+            remote: this.remote
+          },
+          on: {
+            ...this.$listeners,
+            'node-expand': this.handleExpand
+          }
+        },
+        this.$slots.default ? this.$slots.default : doms
+      );
+    } else {
+      return '';
+    }
+  }
+};
+</script>

package/packages/select-ganged/index.js

@@ -0,0 +1,5 @@
+import EsSelectGanged from './src/main';
+
+EsSelectGanged.install = Vue => Vue.component(EsSelectGanged.name, EsSelectGanged);
+
+export default EsSelectGanged;