eoss-ui 0.3.97

package/packages/data-table-form/src/tbody.vue

@@ -0,0 +1,219 @@
+<template>
+  <tbody class="es-data-form-body">
+    <tr v-for="(items, indexs) in data" :key="indexs">
+      <td class="numbers" v-if="numbers">{{ indexs + 1 }}</td>
+      <td v-for="(item, index) in cols" :align="item.align">
+        <template
+          v-if="
+            readonly ||
+              items.canEdit === false ||
+              (items.cantEditKey &&
+                items.cantEditKey.indexOf(item.field || item.prop) > -1)
+          "
+        >
+          <expand-dom
+            v-if="item.render"
+            :key="index"
+            :item="item"
+            :row="items"
+            :render="item.render"
+          ></expand-dom>
+          <div
+            class="cell"
+            :class="{ 'is-textarea': item.type === 'textarea' }"
+            :key="index"
+            v-else
+          >
+            {{ getLabels(items, item) }}
+          </div>
+        </template>
+        <template v-else>
+          <textarea
+            v-if="item.type === 'textarea'"
+            class="el-textarea__inner"
+            v-model.lazy="items[item.field]"
+            @blur="
+              event => {
+                handleBlur({ item: item, event: event, data: items });
+              }
+            "
+            @focus="
+              event => {
+                handleFocus({
+                  item: item,
+                  event: event,
+                  data: items
+                });
+              }
+            "
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: items
+                });
+              }
+            "
+          ></textarea>
+          <div v-else class="es-input-box">
+            <div
+              v-if="item.type === 'select'"
+              class="el-input__inner input-label"
+            >
+              {{ getLabels(items, item) }}
+            </div>
+            <input
+              class="el-input__inner"
+              :readonly="item.type && item.type !== 'text'"
+              v-model.lazy="items[item.field]"
+              @click="
+                event => {
+                  handeClick({ item: item, event: event, data: items });
+                }
+              "
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: items });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({
+                    item: item,
+                    event: event,
+                    data: items
+                  });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: items
+                  });
+                }
+              "
+            />
+          </div>
+        </template>
+      </td>
+    </tr>
+  </tbody>
+</template>
+<script>
+// import rules from 'eoss-ui/src/utils/rules.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EoTbody',
+  inject: ['eoTable'],
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        item: Object,
+        row: Object,
+        render: [Function, String]
+      },
+      render: (h, ctx) => {
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, ctx.props.item, ctx.props.row);
+      }
+    }
+  },
+  props: {
+    numbers: Boolean,
+    readonly: Boolean,
+    cols: Array,
+    data: Array,
+    options: Object
+  },
+  methods: {
+    handleBlur(data) {
+      this.$emit('formBlur', data);
+    },
+    handleFocus(data) {
+      this.$emit('formFocus', data);
+    },
+    handleChange(data) {
+      this.$emit('formChange', data);
+    },
+    handeClick(res) {
+      let { item, data, event } = res;
+      let style = event.target.getBoundingClientRect();
+      this.eoTable.setStyle(style, data, item.field || item.prop);
+      let type =
+        item.type == 'date' ||
+        item.type == 'year' ||
+        item.type == 'month' ||
+        item.type == 'date' ||
+        item.type == 'dates' ||
+        item.type == 'week' ||
+        item.type == 'datetime' ||
+        item.type == 'datetimerange' ||
+        item.type == 'daterange' ||
+        item.type == 'monthrange' ||
+        item.type == 'quarter' ||
+        item.type == 'halfyear'
+          ? 'date'
+          : item.type;
+      this.eoTable.changeData(type, data[item.field || item.prop]);
+    },
+    getLabels(data, col) {
+      let value = data[col.field || col.prop];
+      if (col.label === false) {
+        return Array.isArray(value) ? value.join(',') : value;
+      }
+      let option = this.options[col.field || col.prop];
+      if (util.isObject(value)) {
+        return (
+          data[col.field][col.labelKey] ||
+          data[col.field]['name'] ||
+          data[col.field]['label']
+        );
+      } else if (Array.isArray(value)) {
+        let label = value.map(item => {
+          if (util.isObject(item)) {
+            return item[col.labelKey] || item.name || item.label;
+          } else {
+            if (option) {
+              let str = this.getLabel(item, option, col);
+              if (str) {
+                return str;
+              }
+            } else {
+              return item;
+            }
+          }
+        });
+        return label.join(',');
+      } else {
+        if (option) {
+          return this.getLabel(value, option, col);
+        } else {
+          return value;
+        }
+      }
+    },
+    getLabel(value, option, col) {
+      for (let i = 0; i < option.length; i++) {
+        let item = option[i];
+        if (value == item) {
+          return value;
+        }
+        if (value == item[col.valueKey] || value == item.value) {
+          return item[col.labelKey] || item.name || item.label;
+        }
+      }
+      return '';
+    }
+  }
+};
+</script>

package/packages/data-table-form/src/thead.vue

@@ -0,0 +1,68 @@
+<template>
+  <thead class="es-data-form-head">
+    <tr v-for="(items, indexs) in thead">
+      <th v-if="numbers" :colspan="thead.length">序号</th>
+      <th v-for="(item, index) in items" :key="index">
+        <expand-dom
+          v-if="item.render"
+          class="cell"
+          :key="index"
+          :item="item"
+          :render="item.render"
+        ></expand-dom>
+        <div
+          v-else
+          class="cell"
+          :class="{ 'es-required': required(item.rules) }"
+        >
+          {{ item.title || item.label || item.text }}
+        </div>
+      </th>
+    </tr>
+  </thead>
+</template>
+<script>
+// import rules from 'eoss-ui/src/utils/rules.js';
+//import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EoThead',
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        item: Object,
+        render: [Function, String]
+      },
+      render: (h, ctx) => {
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, ctx.props.item);
+      }
+    }
+  },
+  props: {
+    numbers: Boolean,
+    thead: Array
+  },
+  methods: {
+    required(rules) {
+      if (!rules) {
+        return false;
+      }
+      if (Array.isArray(rules)) {
+        for (let i = 0; i < rules.length; i++) {
+          if (rules[i].required) {
+            return true;
+          }
+        }
+      }
+      return rules.required;
+    }
+  }
+};
+</script>

package/packages/date-picker/index.js

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

package/packages/date-picker/src/main.vue

@@ -0,0 +1,185 @@
+<script>
+import util from 'eoss-ui/src/utils/util';
+const formats = {
+  date: 'yyyy-MM-dd',
+  month: 'yyyy-MM',
+  datetime: 'yyyy-MM-dd HH:mm:ss',
+  time: 'HH:mm:ss',
+  week: 'yyyy年第WW周',
+  timerange: 'HH:mm:ss',
+  daterange: 'yyyy-MM-dd',
+  monthrange: 'yyyy-MM',
+  datetimerange: 'yyyy-MM-dd HH:mm:ss',
+  year: 'yyyy',
+  halfyear: 'bb',
+  quarter: 'qq'
+};
+export default {
+  name: 'EsDatePicker',
+  inheritAttrs: false,
+  props: {
+    value: [String, Array, Number, Date],
+    display: {
+      type: Boolean,
+      default: true
+    },
+    hide: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    // 提交数据时是否转成时间戳
+    timestamp: {
+      type: Boolean,
+      default: false
+    },
+    unlinkPanels: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'date'
+    },
+    rangeSeparator: {
+      type: String,
+      default: '-'
+    },
+    format: String,
+    readonly: Boolean,
+    plain: Boolean,
+    default: Boolean
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    models: {
+      get() {
+        return this.value ? this.value : '';
+      },
+      set(val) {
+        return val;
+      }
+    },
+    formats() {
+      return this.format ? this.format : formats[this.dateType];
+    },
+    dateType() {
+      return (this.type === 'datetime' ||
+        this.type === 'dater' ||
+        this.type === 'month') &&
+        this.range
+        ? this.type + 'range'
+        : this.type;
+    },
+    config() {
+      return this.range ||
+        this.type === 'datetimerange' ||
+        this.type === 'daterange' ||
+        this.type === 'monthrange'
+        ? {
+            startPlaceholder: '开始时间',
+            endPlaceholder: '结束时间',
+            unlinkPanels: this.unlinkPanels
+          }
+        : {};
+    },
+    class() {
+      return this.range ||
+        this.type === 'datetimerange' ||
+        this.type === 'daterange' ||
+        this.type === 'monthrange'
+        ? 'es-date-picker-range'
+        : '';
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    getData(val) {
+      if (typeof val === 'number') {
+        return this.dateFormat(val);
+      }
+      if (Array.isArray(val)) {
+        val
+          .map(item => {
+            if (typeof item === 'string') {
+              return item;
+            } else if (typeof item === 'number') {
+              return this.dateFormat(item);
+            }
+          })
+          .join(this.rangeSeparator);
+      }
+      return val;
+    },
+    dateFormat(date) {
+      let newDate = '';
+      switch (this.dateType) {
+        case 'year':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        case 'halfyear':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        case 'month':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        case 'time':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        case 'datetime':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        case 'quarter':
+          newDate = util.formatDate(date, this.formats);
+          break;
+        default:
+          newDate = util.formatDate(date, this.formats);
+      }
+      return newDate;
+    },
+    showPicker() {
+      this.$refs.elDate.showPicker();
+    }
+  },
+  render(h) {
+    if (!this.hide) {
+      if (this.readonly) {
+        return h(
+          'div',
+          { class: ['es-input__inner', { 'es-plain': this.plain }] },
+          [this.getData(this.models)]
+        );
+      }
+      return h('el-date-picker', {
+        class: ['es-date-picker', this.class],
+        attrs: {
+          ...this.$attrs,
+          ...this.config,
+          type: this.dateType,
+          valueFormat: this.timestamp ? 'timestamp' : this.formats,
+          rangeSeparator: this.rangeSeparator,
+          format: this.formats,
+          editable: false,
+          value: this.models
+        },
+        ref: 'elDate',
+        on: this.$listeners,
+        directives: [
+          {
+            name: 'show',
+            value: this.display
+          }
+        ]
+      });
+    } else {
+      return '';
+    }
+  }
+};
+</script>

package/packages/dialog/index.js

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