@v2coding/ui 0.1.7 → 0.1.8

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

@@ -1,202 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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

@@ -1,117 +0,0 @@
-<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

@@ -1,233 +0,0 @@
-<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

@@ -1,134 +0,0 @@
-<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>