@v2coding/ui 0.1.0

package/src/components/exports/remote-exports-dialog.vue

@@ -0,0 +1,202 @@
+<template>
+  <ui-dialog :visible="visible" @update:visible="updateVisible" :title="dialogTitle" :buttons="buttons">
+    <div class="exports-dialog-wrapper">
+      <div v-show="!selectExportsColumn">
+        <h3>共{{validTotalPage}}页查询结果，当前第{{validCurrentPage}}页</h3>
+        <el-form inline :model="params" @submit.native.prevent="handleConfirm" class="exports-from" size="mini" :rules="rules">
+          <el-form-item prop="start">
+            <el-input v-model="params.start" class="start-input">
+              <template slot="prepend">导出第</template>
+              <template slot="append">页到</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="end">
+            <el-input v-model="params.end" class="end-input">
+              <template slot="append">页</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item style="display: block; text-align: center;">
+            <el-button type="text" @click="resetSelectPage">选择当前页</el-button>
+            <el-divider direction="vertical"/>
+            <el-button type="text" @click="toggleColumnConfig(true)">选择导出列</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-show="selectExportsColumn">
+        <el-checkbox-group v-model="selColumns" :min="1">
+          <el-row>
+            <el-col v-for="column in allColumns" :key="column.key" :span="12">
+              <el-checkbox :label="column.key">{{column.title}}</el-checkbox>
+            </el-col>
+          </el-row>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </ui-dialog>
+</template>
+
+<script>
+
+  export default {
+    name: 'remote-exports-dialog',
+    props: {
+      visible: Boolean,
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      totalPage: {
+        type: Number,
+        default: 1,
+      },
+    },
+    data() {
+      return {
+        params: {
+          start: 1,
+          end: 1,
+        },
+        type: 1, // 1:
+        selColumns: [],
+        columns: [],
+        rules: {
+          start: {validator: this.validateStart, trigger: 'blur'},
+          end: {validator: this.validateEnd, trigger: 'blur'},
+        },
+        allColumns: [],
+      };
+    },
+    computed: {
+      dialogTitle() {
+        if (this.selectExportsColumn) {
+          return '选择导出列';
+        }
+        return '导出数据';
+      },
+      buttons() {
+        if (this.selectExportsColumn) {
+          return [
+            {text: '取消', icon: 'el-icon-error', handle: this.handleColumnCancel},
+            {text: '确定', icon: 'el-icon-s-tools', type: 'primary', handle: this.handleColumnConfig},
+          ];
+        }
+        return [
+          {text: '取消', icon: 'el-icon-error', handle: this.handleClose},
+          {text: '导出', icon: 'el-icon-download', type: 'primary', handle: this.handleConfirm},
+        ];
+      },
+      selectExportsColumn() {
+        return this.type === 2;
+      },
+      validTotalPage() {
+        return Math.max(1, this.totalPage);
+      },
+      validCurrentPage() {
+        return Math.min(Math.max(1, this.currentPage), this.validTotalPage);
+      },
+    },
+    mounted() {
+      this.init();
+    },
+    methods: {
+      init() {
+        this.initColumns();
+        this.resetSelectPage();
+      },
+      initColumns() {
+        this.allColumns = this.table.columns.filter(column => column.type === 'default' && column.className !== 'ui-table-column-action').map(({label, property}) => ({key: property, title: label}));
+        this.columns = this.allColumns;
+        this.initSelect();
+      },
+      initSelect() {
+        this.selColumns = this.columns.map(column => column.key);
+      },
+      handleClose() {
+        this.updateVisible(false);
+      },
+      handleConfirm() {
+        this.updateVisible(false);
+        this.$emit('exports', {...this.params, columns: this.columns});
+      },
+      handleColumnCancel() {
+        this.toggleColumnConfig(false);
+        this.initSelect();
+      },
+      handleColumnConfig() {
+        this.toggleColumnConfig(false);
+        this.columns = this.allColumns.filter(column => this.selColumns.includes(column.key));
+      },
+      resetSelectPage() {
+        this.params.start = this.validCurrentPage;
+        this.params.end = this.validCurrentPage;
+      },
+      toggleColumnConfig(show) {
+        this.type = show ? 2 : 1;
+      },
+      updateVisible(visible) {
+        this.$emit('update:visible', visible);
+      },
+      validateStart(rules, value, callback) {
+        if (!value) {
+          value = this.validCurrentPage;
+        }
+        let validVal = String(value).replace(/[^0-9]/ig, '').replace(/^0/, '');
+        validVal = Math.min(this.validTotalPage, Math.max(1, +validVal));
+        const {end} = this.params;
+        if (end && validVal > end) {
+          validVal = end;
+        }
+        this.params.start = validVal;
+        callback();
+      },
+      validateEnd(rules, value, callback) {
+        if (!value) {
+          value = this.validCurrentPage;
+        }
+        let validVal = String(value).replace(/[^0-9]/ig, '').replace(/^0/, '');
+        validVal = Math.min(this.validTotalPage, Math.max(1, +validVal));
+        const {start} = this.params;
+        if (start && validVal < start) {
+          validVal = start;
+        }
+        this.params.end = validVal;
+        callback();
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .exports-dialog-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    max-height: 320px;
+    overflow: auto;
+
+    h3 {
+      text-align: center;
+      margin-bottom: 15px;
+    }
+
+    .exports-from {
+      ::v-deep .el-form-item {
+        margin-right: 0;
+
+        .el-input__inner {
+          width: 60px;
+          text-align: center;
+        }
+      }
+    }
+
+    .start-input ::v-deep .el-input-group__append {
+      border-radius: 0;
+      border-right: 0;
+    }
+
+    .end-input ::v-deep .el-input__inner {
+      border-radius: 0;
+    }
+  }
+</style>

package/src/components/field/field.autocomplete.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-autocomplete
+    v-bind="$attrs"
+    v-on="$listeners"
+    :value="value"
+  />
+</template>
+
+<script>
+  import FieldMixin from './field.mixin';
+
+  export default {
+    name: 'ui-field-autocomplete',
+    inheritAttrs: false,
+    mixins: [FieldMixin],
+  };
+</script>
+
+<style lang="less">
+
+</style>

package/src/components/field/field.calendar.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="flex-row">
+    <div class="calendar flex-row">
+        <span
+        v-for="(item, index) in dateType" 
+        :key="item.name" 
+        class="calendarItem" 
+        @click="activeIndex=index"
+        :class="{
+          'calendar-active': activeIndex === index
+        }">{{ item.name }}</span>
+    </div>
+      <el-date-picker
+        v-model="dateVal"
+        align="right"
+        :type="datePickerType"
+        :format="valueFormat"
+        placeholder="请选择时间"
+        :value-format="valueFormat"
+        :picker-options="pickerOptions"
+        @input="changeHandle">
+    </el-date-picker>
+  </div>
+  
+</template>
+
+<script>
+  import FieldMixin from './field.mixin';
+
+  Date.prototype.calendar = function() {
+    const month = this.getMonth() +1;
+    return [this.getFullYear(), month< 10 ? "0"+month : month, this.getDate()].join("-")
+  }
+  
+  export default {
+  name: 'ui-field-datse',
+  mixins: [FieldMixin],
+  props: {
+    changeFunc: {
+      type: Function,
+    }
+  },
+  data() {
+    return {
+      activeIndex: 0,
+      dateType: [
+        {name: "日", type: 1},
+        {name: "月", type: 2},
+      ],
+      dateVal: '',
+       pickerOptions: {
+            disabledDate: (time) => {
+              return  time.getTime() > Date.now()
+            },
+        },
+    }
+  },
+  watch: {
+    activeIndex() {
+      this.tempDate = "";
+      this.dateVal = ""
+    }
+  },
+  computed: {
+    datePickerType() {
+      return this.activeIndex === 0 ?  "date" :  "month"
+    },
+     valueFormat() {
+      return this.activeIndex === 0 ?  "yyyy-MM-dd" :  "yyyy-MM"
+    }
+  },
+  methods: {
+    changeHandle(val) {
+      this.emitChange(val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ui-date-field.el-date-editor {
+  width: 100%;
+}
+.calendar {
+  margin-right: 20px;
+  .calendarItem {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 45px;
+    height: 35px;
+    cursor: pointer;
+    border-right: 1px solid #e3e3ee;
+    text-align: center;
+    border: 1px solid #e3e3e3;
+    font-size: 14px;
+    &:first-of-type{
+      border-right: none;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+     &:last-of-type{
+      border-left: none;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+  }
+  .calendar-active{
+    color: #1890FF;
+    background: #e3e3e3;
+  }
+}
+.separator{
+  margin-right: 10px;
+  color: #333;
+}
+
+</style>

package/src/components/field/field.cascade.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <el-cascader
+        v-if="!hasRefresh"
+        v-bind="$attrs"
+        v-on="_listeners"
+        :key="key"
+        :value="pickerValue"
+        :props="realProps"
+        :options="realData"
+        :filterable="filterable"
+        :show-all-levels="showAllLevels"
+        :show-word-limit="showWordLimit"
+        @change="onChange"
+        class="ui-cascade-field"
+        popper-class="ui-cascade-field-popper"
+        v-loading="realLoading"
+        element-loading-spinner="el-icon-loading"
+    >
+    </el-cascader>
+    <div v-if="hasRefresh" class="el-input-group el-input-group--append">
+      <el-cascader
+          v-bind="$attrs"
+          v-on="_listeners"
+          :key="key"
+          :value="pickerValue"
+          :props="realProps"
+          :options="realData"
+          :filterable="filterable"
+          :show-all-levels="showAllLevels"
+          @change="onChange"
+          class="ui-cascade-field"
+          popper-class="ui-cascade-field-popper"
+          v-loading="realLoading"
+          element-loading-spinner="el-icon-loading"
+      >
+      </el-cascader>
+      <div class="el-input-group__append">
+        <el-button @click="init" icon="el-icon-refresh"></el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import FieldMixin from './field.mixin';
+  import DataMixin from './field.data.mixin';
+  import Objects from '../../util/objects';
+  import Strings from '../../util/strings';
+
+  export default {
+    name: 'ui-field-cascade',
+    mixins: [FieldMixin, DataMixin],
+    props: {
+      // 是否初始选中
+      startNull: {
+        type: Boolean,
+        default: false,
+      },
+      filterable: {
+        type: Boolean,
+        default: true,
+      },
+      showAllLevels: {
+        type: Boolean,
+        default: false,
+      },
+      showWordLimit: {
+        type: Boolean,
+        default: false,
+      },
+      allValue: {
+        type: Boolean,
+        default: true,
+      },
+      refresh: Boolean,
+    },
+    data() {
+      return {
+        key: Strings.random(32),
+      };
+    },
+    computed: {
+      pickerValue() {
+        return this.matchValue(this.realData, this.value);
+      },
+      hasRefresh() {
+        return this.refresh && this.isRemote;
+      },
+      realProps() {
+        return Object.assign({
+          value: 'value',
+          label: 'label',
+          checkStrictly: true,
+          disabled: 'disabled',
+        }, this.props || {});
+      },
+      expandMap() {
+        return this.getExpandMap(this.realData);
+      },
+    },
+    watch: {
+      pickerValue() {
+        if (this.pickerValue.length) {
+          return;
+        }
+        this.initDefaultValue(this.realData);
+      },
+      realData(data, o) {
+        if (!Objects.isEquals(data, o)) {
+          this.key = Strings.random(32);
+          this.initDefaultValue(data);
+        }
+      },
+    },
+    methods: {
+      async init() {
+        if (this.startNull) {
+          this.done();
+        }
+        const data = await this.getData();
+        if (!this.startNull) {
+          this.initDefaultValue(data);
+          await this.$nextTick();
+          this.done();
+        }
+      },
+      initDefaultValue(data) {
+        if (this.value || !data.length || this.startNull) {
+          return;
+        }
+        const {value, disabled} = this.realProps;
+        const firstOption = this.getFirstOption(data, disabled)
+        if (!firstOption) {
+          return;
+        }
+        this.onChange([firstOption[value]]);
+      },
+      getFirstOption(data, disabledProp) {
+        if (!Array.isArray(data) || data.length <= 0) {
+          return null;
+        }
+        return data.reduce((result, item) => {
+          if (result) {
+            return result;
+          }
+          if (item[disabledProp] !== true) {
+            return item;
+          }
+          return this.getFirstOption(item.children, disabledProp);
+        }, null);
+      },
+      matchValue(data, value) {
+        if (!value) {
+          return [];
+        }
+        if (!this.allValue) {
+          const fullValues = this.expandMap[value] || [];
+          return [...fullValues].reverse();
+        }
+        return value.split(',');
+      },
+      /**
+       * 展开有层级关系的 list
+       */
+      getExpandList(data, valueKey, upValue) {
+        return data.reduce((prev, {children, ...item}) => {
+          prev.push({...item, $upValue: upValue});
+          if (Array.isArray(children) && children.length) {
+            prev.push(...this.getExpandList(children, valueKey, item[valueKey]));
+          }
+          return prev;
+        }, []);
+      },
+      /**
+       * 返回
+       * {
+       *   child1: [father1,grandfather1,...],
+       *   child2: [father2,grandfather2,...],
+       *   ...
+       * }
+       */
+      getExpandMap(data) {
+        const {value: key} = this.realProps;
+        const expandList = this.getExpandList(data, key);
+        const listUpper = (list) => {
+          const last = list[list.length - 1];
+          const up = expandList.filter((d) => d[key] === last.$upValue);
+          if (!up.length) {
+            return list;
+          }
+          return listUpper([...list, ...up]);
+        };
+        return expandList.reduce((acc, item) => {
+          acc[item[key]] = listUpper([item]).map((d) => d[key]);
+          return acc;
+        }, {});
+      },
+      onChange(value) {
+        const lastVal = value.length ? value[value.length - 1] : '';
+        if (!lastVal) {
+          this.emitChange(undefined);
+          return;
+        }
+        if (!this.allValue) {
+          this.emitChange(lastVal);
+          return;
+        }
+        const _value = Array.from(this.expandMap[lastVal] || []).reverse().join(',');
+        this.emitChange(_value);
+      },
+      resetValue() {
+        this.onChange([]);
+      },
+    },
+  };
+</script>
+<style lang="less" scoped>
+  .ui-cascade-field {
+    width: 100%;
+  }
+
+  .ui-cascade-field-popper {
+    z-index: 99999 !important;
+  }
+
+  .ui-cascade-field-popper .el-cascader-menu__item {
+    padding-right: 30px;
+  }
+
+  ::v-deep .el-loading-mask .el-loading-spinner {
+    margin-top: -14px;
+  }
+</style>

package/src/components/field/field.checkbox.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="ui-field-checkbox" v-loading="realLoading" element-loading-spinner="el-icon-loading">
+    <el-checkbox-group v-show="all && realData.length" class="all" :value="checkAll">
+      <component :is="optionComponent" :indeterminate="indeterminate" @change="onCheckAllChange" :border="ui === 'border'">全选</component>
+    </el-checkbox-group>
+    <el-divider v-show="all && realData.length" direction="vertical"></el-divider>
+    <el-checkbox-group v-bind="$attrs" :value="pickerValue" @input="onChange" class="options">
+      <component
+        :is="optionComponent"
+        v-for="item in realData"
+        :key="item.value"
+        :label="item.value"
+        :border="ui === 'border'"
+        :checked="item.checked"
+        :disabled="item.disabled"
+        :true-label="item.trueLabel"
+        :false-label="item.falseLabel"
+      >
+        {{ item.label }}
+      </component>
+    </el-checkbox-group>
+    <div v-if="isEmpty" class="empty">暂无数据!&emsp;<el-button v-show="realError" type="text" @click="init">重新加载</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import FieldMixin from './field.mixin';
+  import DataMixin from './field.data.mixin';
+
+  export default {
+    name: 'ui-field-checkbox',
+    mixins: [FieldMixin, DataMixin],
+    props: {
+      ui: {
+        type: String,
+        validator: (val) => ['default', 'border', 'button'].includes(val),
+      },
+      all: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      pickerValue() {
+        return this.valueToArr(this.value);
+      },
+      optionComponent() {
+        if (this.ui === 'button') {
+          return 'el-checkbox-button';
+        }
+        return 'el-checkbox';
+      },
+      checkAll() {
+        const valueArr = this.value ? this.value.split(',') : [];
+        return !this.realData.some((item) => !valueArr.includes(String(item.value)));
+      },
+      indeterminate() {
+        if (this.checkAll) {
+          return false;
+        }
+        return !!this.pickerValue.length;
+      },
+      isEmpty() {
+        return !this.realData.length;
+      },
+    },
+    methods: {
+      init() {
+        this.getData().then(() => {
+          this.done();
+        });
+      },
+      valueToArr(value) {
+        return value ? value.split(',') : [];
+      },
+      onCheckAllChange(checkAll) {
+        if (checkAll) {
+          const vals = this.realData.map(({value}) => value);
+          this.onChange(vals);
+        } else {
+          this.onChange([]);
+        }
+      },
+      onChange(val) {
+        this.emitChange(val.join(','));
+      },
+      resetValue() {
+        this.onChange([]);
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  .ui-field-checkbox {
+    .all {
+      display: flex;
+
+      > .el-checkbox {
+        margin-right: 0;
+      }
+    }
+
+    .options {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .empty {
+      display: inline-flex;
+      align-items: center;
+      font-size: 12px;
+      color: #909399;
+    }
+
+    ::v-deep .el-checkbox {
+      margin: 0 8px 0 0;
+    }
+
+    ::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
+      margin-left: 0;
+    }
+
+    ::v-deep .el-divider {
+      margin: 0 10px;
+    }
+  }
+
+  ::v-deep .el-loading-mask .el-loading-spinner {
+    margin-top: -14px;
+  }
+</style>