@v2coding/ui 0.1.0

package/src/components/form/form.item.vue

@@ -0,0 +1,213 @@
+<template>
+  <el-form-item v-bind="$attrs" :prop="name" :rules="realRules" class="ui-form-item" ref="formItem" :class="{'hidden-item': type === 'hidden'}">
+    <div v-if="$scopedSlots.prefix" class="ui-form-item-prefix">
+      <slot name="prefix"></slot>
+    </div>
+    <template slot="label" v-if="showLabel && label">
+      {{ label }}
+      <el-tooltip effect="dark" :content="info">
+        <i v-if="info" class="el-icon-info info"></i>
+      </el-tooltip>
+      {{realColon ? ':' : ''}}
+    </template>
+    <form-field v-bind="$attrs" :name="name" v-model="fieldValue" :locked-value.sync="lockedValue" :type="type" :disabled="realDisabled" :placeholder="realPlaceHolder" :ignore="ignore" v-on="listeners">
+      <slot></slot>
+    </form-field>
+    <div v-if="$scopedSlots.suffix" class="ui-form-item-suffix">
+      <slot name="suffix"></slot>
+    </div>
+  </el-form-item>
+</template>
+
+<script>
+import VType, { getInputTypeText } from './vtype';
+import FormField from './form.field';
+
+export default {
+  name: 'ui-form-item',
+  inheritAttrs: false,
+  inject: ['uiForm'],
+  components: { FormField },
+  props: {
+    value: null,
+    defaultValue: {
+      default: undefined,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    prop: String, // ignore prop. 强制要求使用 name 配置
+    label: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    showLabel: {
+      type: Boolean,
+      default: true,
+    },
+    placeholder: String,
+    vtype: [String, Array, Function],
+    info: String,
+    rules: null,
+    /**
+     * 是否显示 label 后面的冒号
+     * 默认显示
+     */
+    colon: {
+      type: Boolean,
+      default: undefined,
+    },
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    ignore: {
+      type: Boolean,
+      default: false,
+    },
+    message: String,
+  },
+  data () {
+    return {
+      fieldValue: this.defaultValue,
+      lockedValue: this.defaultValue,
+    };
+  },
+  computed: {
+    realRules () {
+      if (this.ignore) {
+        return null;
+      }
+      if (this.rules) {
+        return this.rules;
+      }
+      if (typeof this.vtype === 'function') {
+        // this.vtype(rule, value, callback)
+        return { validator: this.vtype };
+      }
+      let vtypes = [];
+      if (typeof this.vtype === 'string') {
+        vtypes = this.vtype.replace(/\s/g, '').split(',').filter(Boolean);
+      } else if (Array.isArray(this.vtype) && this.vtype.length) {
+        vtypes = this.vtype.filter(Boolean);
+      }
+      return vtypes.reduce((rules, vtype) => {
+        let rule = vtype;
+        if (typeof vtype === 'string') {
+          const [type, ...args] = vtype.split(':');
+          rule = VType[type](this.$props, ...args);
+        }
+        rule && rules.push(rule);
+        return rules;
+      }, []);
+    },
+    realPlaceHolder () {
+      if (this.placeholder) {
+        return this.placeholder;
+      }
+      let input = getInputTypeText(this.type);
+      return `请${input}${this.label}`;
+    },
+    realColon () {
+      if (!this.label) {
+        return false;
+      }
+      if (!Object.is(undefined, this.colon)) {
+        return this.colon;
+      }
+      if (!Object.is(undefined, this.uiForm.colon)) {
+        return this.uiForm.colon;
+      }
+      return true;
+    },
+    realDisabled () {
+      if (this.uiForm) {
+        return this.uiForm.disabled || this.disabled;
+      }
+      return this.disabled;
+    },
+    listeners () {
+      // eslint-disable-next-line
+      const { change, input, ...listeners } = this.$listeners;
+      return listeners;
+    },
+  },
+  watch: {
+    value (v) {
+      this.fieldValue = v;
+    },
+    fieldValue (v) {
+      this.uiForm.trigger('change', this.name, v, this);
+      this.$emit('input', v);
+      this.$emit('change', v);
+    },
+  },
+  created () {
+    this.registeredField();
+  },
+  methods: {
+    registeredField () {
+      if (this.ignore) {
+        return;
+      }
+      this.uiForm.addField(this.name, this.fieldValue, this);
+    },
+    resetField (...args) {
+      if (args.length > 0) {
+        this.fieldValue = args[0];
+      } else if (this.fieldValue !== this.defaultValue) {
+        this.fieldValue = this.defaultValue;
+      }
+      this.lockedValue = this.fieldValue;
+      this.$refs.formItem && this.$refs.formItem.$once('el.form.change', () => {
+        this.$refs.formItem && this.$refs.formItem.clearValidate();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ui-form-item {
+  ::v-deep .el-form-item__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    > div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .ui-form-item-prefix,
+    .ui-form-item-suffix {
+      flex: none;
+    }
+  }
+
+  .info {
+    color: #909399;
+    cursor: pointer;
+    margin-left: 4px;
+  }
+
+  &.hidden-item {
+    display: none;
+  }
+}
+
+.el-form--inline .ui-form-item ::v-deep .el-form-item__label {
+  flex: none;
+  white-space: nowrap;
+}
+
+.el-form--inline .ui-form-item ::v-deep .el-form-item__content {
+  display: inline-flex;
+}
+</style>

package/src/components/form/form.vue

@@ -0,0 +1,293 @@
+<template>
+  <el-form v-bind="$attrs" ref="form" :model="model" :label-width="labelWidth" v-on="listeners" @submit.native.prevent="onSubmit">
+    <component v-for="(field, i) in fields" v-bind="field" v-on="field.listeners" :key="i" :is="field.componentName || 'ui-form-item'"></component>
+    <slot></slot>
+  </el-form>
+</template>
+
+<script>
+  import throttle from 'lodash.throttle';
+  import Objects from '../../util/objects';
+
+  export default {
+    name: 'ui-form',
+    inheritAttrs: false,
+    provide() {
+      return {
+        uiForm: this,
+      };
+    },
+    props: {
+      disabled: Boolean,
+      labelWidth: {
+        type: String,
+        default: '105px',
+      },
+      fields: Array,
+      url: String,
+      method: {
+        type: String,
+        validator: (val) => ['get', 'post', 'put'].includes(val),
+        default: 'post',
+      },
+      /**
+       * 是否显示 label 后面的冒号
+       */
+      colon: {
+        type: Boolean,
+        default: undefined,
+      },
+      beforeSubmit: {
+        type: Function,
+        default: () => void 0,
+      },
+      submitting: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * listeners:
+       *   ready 所有表单项都准备好后触发
+       *   submit 触发提交事件
+       *   after-submit  配置 url 后触发submit事件时触发提交数据完成事件
+       *   validate  任一表单项被校验后触发
+       **/
+    },
+    data() {
+      this.fieldStatus = []; // [{name,status,componentInstance}, ...]
+      return {
+        fieldList: [],// [[name, value], ...]
+      };
+    },
+    created() {
+    },
+    computed: {
+      model() {
+        return Object.fromEntries(this.fieldList);
+      },
+      listeners() {
+        // eslint-disable-next-line
+        const {submit, ready, ...listeners} = this.$listeners;
+        return listeners;
+      },
+    },
+    mounted() {
+      this.$el.addEventListener('reset', this.onReset);
+      this.checkFieldsReady();
+    },
+    beforeDestroy() {
+      this.$el.removeEventListener('reset', this.onReset);
+    },
+    methods: {
+      /**
+       * @public
+       */
+      validate(...args) {
+        return this.$refs.form.validate(...args);
+      },
+      /**
+       * @public
+       */
+      validateField(...args) {
+        return this.$refs.form.validateField(...args);
+      },
+      /**
+       * @public
+       */
+      clearValidate(...args) {
+        return this.$refs.form.clearValidate(...args);
+      },
+      /**
+       * @public
+       */
+      resetValues(values) {
+        if (!Objects.isObject(values)) {
+          values = {};
+        }
+        this.fieldList.slice().forEach(([name, , field]) => {
+          if (Object.prototype.hasOwnProperty.call(values, name)) {
+            field.resetField(values[name]);
+          } else {
+            field.resetField();
+          }
+        });
+      },
+      /**
+       * @public
+       */
+      setValues(values) {
+        if (!values || !Objects.isObject(values)) {
+          return;
+        }
+        Object.entries(values).forEach(([fieldName, fieldValue]) => {
+          const fieldItem = this.fieldList.find(([name]) => name === fieldName);
+          if (!fieldItem) {
+            return;
+          }
+          fieldItem[2].fieldValue = fieldValue;
+        });
+      },
+      /**
+       * @public
+       */
+      getValues() {
+        return Object.fromEntries(this.fieldList);
+      },
+      /**
+       * @private
+       */
+      addField(name, defaultValue = '', instance) {
+        if (!Object.hasOwnProperty.call(this.model, name)) {
+          this.onFieldChange(name, defaultValue, instance);
+        }
+      },
+
+      /**
+       * (函数节流. 600ms内只执行一次, 防止 form 表单多次提交)
+       * @private
+       */
+      onSubmit: throttle(
+        function() {
+          let formData = this.getValues();
+          const allow = this.beforeSubmit(formData);
+          if (typeof allow === 'boolean' && allow === false) {
+            return;
+          }
+          if (typeof allow === 'object') {
+            formData = allow;
+          }
+          this.validate((valid) => {
+            if (!valid) {
+              return;
+            }
+            this.$emit('submit', formData);
+            this.doAction(formData);
+          });
+        },
+        600,
+        {trailing: false},
+      ),
+      doAction(data) {
+        if (!this.url) {
+          return;
+        }
+        let def;
+        this.$emit('update:submitting', true);
+        if (this.method === 'get') {
+          def = this.getWithMessage(this.url, {params: data});
+        } else {
+          def = this.postWithMessage(this.url, data);
+        }
+        def.then((...args) => {
+          this.$emit('update:submitting', false);
+          this.$emit('after-submit', ...args);
+        }).catch((...args) => {
+          this.$emit('update:submitting', false);
+          return Promise.reject(...args);
+        });
+      },
+      /**
+       * @private
+       */
+      onReset(e) {
+        e.preventDefault();
+        this.resetValues();
+        this.$emit('reset');
+      },
+      /**
+       * @private
+       */
+      trigger(event, ...args) {
+        if (typeof event !== 'string') {
+          return;
+        }
+        const e = event.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+        if (!this[`onField${e}`]) {
+          return;
+        }
+        this[`onField${e}`](...args);
+      },
+      getAllFields() {
+        const getFormFields = (components) => {
+          if (!Array.isArray(components) || !components.length) {
+            return [];
+          }
+          return components.reduce((total, component) => {
+            // ui-table-select-item mixins ui-form-item
+            if (['ui-form-item', 'ui-table-select-item'].includes(component.$options.name)) {
+              !component.ignore && component.name && total.push(component.name);
+            } else {
+              total.push(...getFormFields(component.$children));
+            }
+            return total;
+          }, []);
+        };
+        this.formFields = getFormFields(this.$children);
+        return this.formFields;
+      },
+      /**
+       * @private
+       */
+      onFieldPending(component) {
+        if(component.name) {
+          this.fieldStatus.push({name: component.name, status: false, instance: component});
+        }
+      },
+      /**
+       * @private
+       */
+      onFieldDestroy(component) {
+        if (component.name) {
+          const index = this.fieldStatus.findIndex(item => item.name === component.name);
+          index !== -1 && this.fieldStatus.splice(index, 1);
+
+          const i = this.fieldList.findIndex(item => item[0] === component.name);
+          this.fieldList.splice(i, 1);
+        }
+        const formFields = this.getAllFields();
+        if (formFields.length === this.fieldStatus.length) {
+          this.checkFieldsReady();
+        }
+      },
+      /**
+       * @private
+       */
+      onFieldDone(component) {
+        if (!component.name) {
+          return;
+        }
+        const index = this.fieldStatus.findIndex(item => item.name === component.name);
+        if (index === -1) {
+          this.fieldStatus.push({name: component.name, status: true, instance: component});
+        } else {
+          this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
+        }
+        const formFields = this.getAllFields();
+        if (formFields.length === this.fieldStatus.length) {
+          this.checkFieldsReady();
+        }
+      },
+      onFieldChange(fieldName, fieldValue, instance) {
+        const index = this.fieldList.findIndex(item => item[0] === fieldName);
+        const current = Object.freeze([fieldName, fieldValue, instance]);
+        if (index === -1) {
+          this.fieldList.push(current);
+        } else {
+          this.fieldList.splice(index, 1, current);
+        }
+      },
+      checkFieldsReady() {
+        const isPending = this.fieldStatus.some(item => !item.status);
+        if (!isPending) {
+          this.$emit('ready');
+        }
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .el-form--inline ::v-deep .el-form-item {
+    display: inline-flex;
+  }
+</style>

package/src/components/head-menu/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-menu
+    class="head-menu"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :mode="mode"
+    :router="router"
+    :default-active="active"
+  >
+    <menu-item v-for="item in displayMenus" :item="item" :key="item.id"/>
+  </el-menu>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+  import MenuItem from './menu-item';
+
+  export default {
+    name: 'head-menu',
+    components: {MenuItem},
+    provide() {
+      return {
+        headMenu: this,
+      };
+    },
+    props: {
+      router: {
+        type: Boolean,
+        default: true,
+      },
+      defaultActive: String,
+      mode: {
+        default: 'horizontal',
+      },
+    },
+    data() {
+      return {
+        packUpWidth: 0,
+      };
+    },
+    computed: {
+      ...mapState(['menus']),
+      headMenu() {
+        // eslint-disable-next-line
+        return this.menus.filter(menu => [1, 2].includes(menu.type)).map(({children, ...menu}) => menu);
+      },
+      active() {
+        if (!this.router) {
+          return this.defaultActive;
+        }
+        const currentPath = this.$route.path;
+        const isHeadRoute = this.headMenu.some(menu => menu.url === currentPath);
+        if (isHeadRoute) {
+          return currentPath;
+        }
+        const currentHeadMenu = this.getCurrentHeadMenu(currentPath, this.menus);
+        return currentHeadMenu && (currentHeadMenu.path || currentHeadMenu.url);
+      },
+      menuWidth() {
+        return this.headMenu.reduce((total, item) => {
+          return total + (item.name || '').split('').length * 16 + 25 * 2; // 16:字体大小值; 25:左右padding/margin值
+        }, 60); // 100:菜单左边的margin值
+      },
+      packUpIndex() {
+        if (this.packUpWidth <= 0) {
+          return -1;
+        }
+        let index = -1;
+        let width = this.packUpWidth + 130; // 50:更多下拉菜单所占宽度
+        for(let i = this.headMenu.length - 1; i >= 0; i--) {
+          const item = this.headMenu[i];
+          const currentWidth = (item.name || '').split('').length * 16 + 25 * 2;
+          if (currentWidth >= width) {
+            index = i - 1;
+            break;
+          }
+          width = width - currentWidth;
+        }
+        return Math.max(0, index);
+      },
+      displayMenus() {
+        if (this.packUpIndex === -1) {
+          return this.headMenu;
+        }
+        const menus = this.headMenu.slice(0, this.packUpIndex);
+        const moreMenus = this.headMenu.slice(this.packUpIndex);
+        menus.push({
+          id: 'more',
+          name: '更多菜单',
+          children: moreMenus,
+        });
+        return menus;
+      },
+    },
+    mounted() {
+      window.addEventListener('resize', this.onResize);
+      this.onResize();
+
+      const logo = document.querySelector('.page-header > .logo');
+      logo && logo.addEventListener('load', () => this.onResize());
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.onResize);
+    },
+    methods: {
+      onResize() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          const headerWidth = document.documentElement.clientWidth;
+          const logoEl = document.querySelector('.page-header > .logo');
+          const titleEl = document.querySelector('.page-header > .title');
+          const messageEl = document.querySelector('.page-header > .screen');
+          const usernameEl = document.querySelector('.page-header > .username');
+          const logoWidth = (logoEl && logoEl.offsetWidth || 0) + 20; // 20 margin
+          const titleWidth = titleEl && titleEl.offsetWidth || 0;
+          const messageElWidth = messageEl && messageEl.offsetWidth || 0;
+          const usernameWidth = usernameEl && usernameEl.offsetWidth || 0;
+          const allowedMenuWidth = headerWidth - 60 - logoWidth - titleWidth - messageElWidth - usernameWidth;
+          this.packUpWidth = Math.max(0, this.menuWidth - allowedMenuWidth);
+        }, 50);
+      },
+      getCurrentHeadMenu(path, menus) {
+        if (!Array.isArray(menus) || menus.length <= 0) {
+          return undefined;
+        }
+        return menus.find(menu => {
+          const isMatched = (menu.children || []).some(childMenu => (childMenu.path || childMenu.url) === path);
+          if (isMatched) {
+            return true;
+          }
+          return this.getCurrentHeadMenu(path, menu.children);
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+
+  .head-menu.el-menu {
+    background-color: transparent;
+    border-bottom: none;
+
+    > .el-menu-item,
+    > .el-submenu .el-submenu__title {
+      font-size: 16px;
+      font-weight: 400;
+      color: inherit;
+      height: var(--header-height);
+      line-height: var(--header-height);
+      padding: 0 25px;
+      border: none;
+      box-sizing: border-box;
+      transition: all 0.2s ease-in-out;
+
+      span {
+        vertical-align: unset;
+      }
+
+      i {
+        width: 20px;
+        font-size: 14px;
+      }
+    }
+
+    > .el-menu-item:not(.is-disabled):not(.is-active):hover,
+    > .el-menu-item:not(.is-disabled):not(.is-active):focus,
+    > .el-submenu:not(.is-disabled):not(.is-active):hover .el-submenu__title,
+    > .el-submenu:not(.is-disabled):not(.is-active):focus .el-submenu__title {
+      color: inherit;
+      background-color: rgba(0, 146, 63, 0.3);
+    }
+
+    > .el-menu-item.is-active,
+    > .el-submenu.is-active .el-submenu__title {
+      color: inherit;
+      background-color: rgba(0, 146, 63, 0.6);
+    }
+
+    .el-submenu__title i {
+      color: inherit;
+    }
+
+    .el-menu--popup {
+
+    }
+  }
+</style>