eoss-ui 0.5.12 → 0.5.13

package/packages/data-table/src/column copy.vue

@@ -0,0 +1,977 @@
+<template>
+  <el-table-column
+    v-if="childrens.length"
+    :key="index"
+    v-bind="config"
+    :filter-icon="icon"
+  >
+    <template v-for="(item, inx) in childrens">
+      <column
+        v-if="item.hide !== true"
+        v-bind="{
+          index: inx,
+          ...item
+        }"
+        v-on="$listeners"
+      ></column>
+    </template>
+  </el-table-column>
+  <el-table-column v-else-if="type === 'handle'" :key="index" v-bind="config">
+    <template slot-scope="scope">
+      <es-button-group
+        v-else-if="type === 'handle' && !scope.row.hideHandle"
+        v-bind="
+          exclAttribute({
+            data: { ...config, prop: this.prop, field: this.field },
+            attrs: ['contents', 'events', 'type', 'width', 'template', 'title']
+          })
+        "
+        stop
+        :contents="contents || events"
+        :data="scope.row"
+        @handleClick="handleClick"
+        v-model="btnWidth"
+      ></es-button-group>
+    </template>
+  </el-table-column>
+  <el-table-column v-else-if="isForm || render" :key="index" v-bind="config">
+    <template slot-scope="scope">
+      {{ type }}
+      <template v-if="isForm && !isReadOnly(scope)">
+        <el-form-item
+          :name="name"
+          :prop="item.field"
+          :rules="isNotRule(item, scope) ? [] : item.rules"
+          :index="scope.$index"
+        >
+          <es-select
+            v-if="item.type === 'select'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :ajax="false"
+            :data="
+              item.data
+                ? item.data
+                : item.optionData
+                ? scope.row[item.optionData]
+                : optionDatas[item.field || item.prop]
+            "
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-select>
+          <es-cascader
+            v-else-if="item.type == 'cascader'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="
+              item.data
+                ? item.data
+                : item.optionData
+                ? scope.row[item.optionData]
+                : optionDatas[item.field || item.prop]
+            "
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          >
+          </es-cascader>
+          <es-select-ganged
+            v-else-if="item.type === 'ganged'"
+            v-bind="
+              exclAttribute({
+                data: item,
+                attrs: ['width', 'url', 'sysCode']
+              })
+            "
+            v-model="scope.row[item.field]"
+            :data="
+              init(
+                item.data
+                  ? item.data
+                  : item.optionData
+                  ? scope.row[item.optionData]
+                  : optionDatas[item.field || item.prop],
+                scope.row[item.field],
+                item
+              )
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  item: item
+                });
+              }
+            "
+          ></es-select-ganged>
+          <es-radio-group
+            v-else-if="item.type === 'radio'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="
+              item.data
+                ? item.data
+                : item.optionData
+                ? scope.row[item.optionData]
+                : optionDatas[item.field || item.prop]
+            "
+            :ajax="false"
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-radio-group>
+          <es-checkbox-group
+            v-else-if="item.type === 'checkbox'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="
+              item.data
+                ? item.data
+                : item.optionData
+                ? scope.row[item.optionData]
+                : optionDatas[item.field || item.prop]
+            "
+            :ajax="false"
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-checkbox-group>
+          <es-switch
+            v-else-if="item.type === 'switch'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="
+              item.data
+                ? item.data
+                : item.optionData
+                ? scope.row[item.optionData]
+                : optionDatas[item.field || item.prop]
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-switch>
+          <es-date-picker
+            v-else-if="
+              item.date ||
+              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'
+            "
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-date-picker>
+          <es-input-number
+            v-else-if="item.type == 'number'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: item,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-input-number>
+          <es-selector
+            v-else-if="item.type == 'selector'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            v-on="
+              exclAttribute({
+                data: item.events,
+                attrs: 'change'
+              })
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: item,
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-selector>
+          <template
+            v-else-if="item.type === 'text' || item.type === 'textarea'"
+          >
+            <template v-if="item.lazy">
+              <input
+                v-if="item.type === 'text'"
+                class="el-input__inner"
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model.lazy="scope.row[item.field]"
+                @blur="
+                  (event) => {
+                    handleBlur({
+                      item: item,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @focus="
+                  (event) => {
+                    handleFocus({
+                      item: item,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @change="
+                  (value) => {
+                    handleChange({
+                      item: item,
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+              />
+              <textarea
+                v-else
+                class="el-textarea__inner"
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model.lazy="scope.row[item.field]"
+                @blur="
+                  (event) => {
+                    handleBlur({
+                      item: item,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @focus="
+                  (event) => {
+                    handleFocus({
+                      item: item,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @change="
+                  (value) => {
+                    handleChange({
+                      item: item,
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+              ></textarea>
+            </template>
+            <es-input
+              v-else
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              :scope="scope"
+              v-model="scope.row[item.field]"
+              @blur="
+                (event) => {
+                  handleBlur({
+                    item: item,
+                    event: event,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+              @focus="
+                (event) => {
+                  handleFocus({
+                    item: item,
+                    event: event,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+              @change="
+                (value) => {
+                  handleChange({
+                    item: item,
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+            ></es-input>
+          </template>
+        </el-form-item>
+      </template>
+      <!-- <es-button-group
+        v-else-if="type === 'handle' && !scope.row.hideHandle"
+        v-bind="
+          exclAttribute({
+            data: { ...config, prop: this.prop, field: this.field },
+            attrs: ['contents', 'events', 'type', 'width', 'template', 'title']
+          })
+        "
+        stop
+        :contents="contents || events"
+        :data="scope.row"
+        @handleClick="handleClick"
+        v-model="btnWidth"
+      ></es-button-group> -->
+      <expand-dom
+        v-else-if="render"
+        :column="{ ...config, prop: this.prop, field: this.field }"
+        :row="scope.row"
+        :render="render"
+        :index="index"
+      >
+      </expand-dom>
+      <template v-else-if="formatDate">
+        {{ formatDate(scope.row[field || prop], dateFormat) }}
+      </template>
+      <span v-else :style="styles ? styles[scope.row[prop]] : {}">{{
+        format(scope.row, { ...config, prop: this.prop, field: this.field })
+      }}</span>
+    </template>
+  </el-table-column>
+  <el-table-column v-else :key="index" v-bind="config"></el-table-column>
+</template>
+
+<script type="text/babel">
+import { findSysCode } from 'eoss-ui/src/config/api.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'Column',
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        row: Object,
+        render: [Function, String],
+        index: Number,
+        column: {
+          type: Object,
+          default: null
+        }
+      },
+      render: (h, ctx) => {
+        console.log(ctx, 333);
+        const params = {
+          row: ctx.props.row,
+          index: ctx.props.index
+        };
+        if (ctx.props.column) {
+          params.column = ctx.props.column;
+        }
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, params);
+      }
+    }
+  },
+  inject: {
+    elForm: {
+      default: ''
+    },
+    tableReload: {
+      default: ''
+    },
+    table: {
+      default: ''
+    }
+  },
+  props: {
+    readonly: Boolean,
+    name: String,
+    filterIcon: [Boolean, String],
+    title: String,
+    label: String,
+    field: String,
+    prop: String,
+    sortable: [Boolean, String],
+    sort: [Boolean, String],
+    className: String,
+    labelClassName: String,
+    type: String,
+    required: Boolean,
+    width: String,
+    minWidth: String,
+    children: Array,
+    childHead: Array,
+    hide: Boolean,
+    showOverflowTooltip: Boolean,
+    render: [Function, String],
+    contents: Array,
+    events: Array,
+    dateFormat: String,
+    styles: [Array, Object],
+    index: {
+      type: Number,
+      default: null
+    },
+    optionData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  watch: {
+    optionData: {
+      deep: true,
+      handler(val) {
+        this.optionDatas = val;
+      }
+    },
+    width: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.btnWidth = parseInt(val, 10) + 'px';
+        }
+      }
+    }
+  },
+  computed: {
+    childrens() {
+      return this.children || this.childHead || [];
+    },
+    config() {
+      console.log(11212);
+      let config = { label: this.label || this.title };
+      if (this.childrens.length) {
+        return config;
+      }
+      let minWidth =
+        this.label || this.title
+          ? (this.label || this.title).length * 14 + 20
+          : '180px';
+      config = {
+        ...config,
+        sortable: this.sortable || this.sort,
+        width: this.btnWidth || this.width,
+        minWidth: this.minWidth || this.table.minWidth || minWidth,
+        className: [
+          this.className ? this.className : '',
+          this.type ? ' es-table-' + this.type + '-box' : '',
+          this.showOverflowTooltip ? ' es-text-ellipsis' : ''
+        ].join(' '),
+        labelClassName: [
+          this.labelClassName ? this.labelClassName : '',
+          this.required ? 'es-required' : ''
+        ].join(' '),
+        ...this.$attrs
+      };
+      if (this.isForm || this.render) {
+        console.log(config, 222);
+        return config;
+      }
+      console.log(config, 333);
+      return { ...config, prop: this.field || this.prop };
+    },
+    icon() {
+      if (this.filterIcon === true) {
+        return 'es-icon-biao';
+      }
+      return false;
+    },
+    isForm() {
+      let type = this.type ? this.type.toLowerCase() : '';
+      return (
+        (this.table.form &&
+          [
+            'text',
+            'textarea',
+            'checkbox',
+            'radio',
+            'select',
+            'handle',
+            'date',
+            'year',
+            'month',
+            'date',
+            'dates',
+            'week',
+            'datetime',
+            'datetimerange',
+            'daterange',
+            'monthrange',
+            'quarter',
+            'halfyear',
+            'switch',
+            'selector',
+            'ganged',
+            'number'
+          ].indexOf(type) > -1) ||
+        ['space', 'slot'].indexOf(type) > -1
+      );
+    }
+  },
+  data() {
+    return {
+      btnWidth: '',
+      searchs: [],
+      optionDatas: this.optionData
+    };
+  },
+  mounted() {},
+  methods: {
+    init(data, value, item) {
+      if (data && value) {
+        if (Array.isArray(value) && value.length) {
+          if (item.url || item.sysCode) {
+            value.forEach(async (val, index) => {
+              if (
+                val.hasSub == false ||
+                this.searchs.indexOf(val[item.valueKey] || val.value) > -1
+              ) {
+                return;
+              }
+              this.searchs.push(val[item.valueKey] || val.value);
+              if ((item.ganged && index < item.ganged - 1) || val.hasSub) {
+                let option = data[index + 1];
+                let lists = [];
+                if (option) {
+                  let v = val[item.valueKey] || val.value;
+                  lists = option.filter((list) => {
+                    return list[item.filtrateKey] == v;
+                  });
+                }
+                if (lists.length == 0) {
+                  let queryKey = item.queryKey;
+                  let param = {};
+                  if (queryKey) {
+                    for (let i in queryKey) {
+                      param[i] = val[queryKey[i]];
+                    }
+                  }
+                  let params = util.extend(
+                    true,
+                    item.sysCode ? { sysAppCode: item.sysCode } : {},
+                    item.param ? item.param : {},
+                    param
+                  );
+                  await util
+                    .ajax({
+                      url: item.sysCode ? findSysCode : item.url,
+                      method: this.method,
+                      params: params,
+                      data: params
+                    })
+                    .then((res) => {
+                      if (res.rCode === 0) {
+                        let options = JSON.parse(JSON.stringify(data));
+                        if (options[index + 1]) {
+                          this.$set(
+                            data,
+                            index + 1,
+                            options[index + 1].concat(
+                              JSON.parse(JSON.stringify(res.results))
+                            )
+                          );
+                        } else {
+                          this.$set(
+                            data,
+                            index + 1,
+                            JSON.parse(JSON.stringify(res.results))
+                          );
+                        }
+                      } else {
+                        let msg = res.msg || '系统错误，请联系管理员！';
+                        this.$message.error(msg);
+                      }
+                    })
+                    .catch((err) => {
+                      if (err.message && err.message !== 'canceled') {
+                        this.$message.error(err.message);
+                      }
+                    });
+                }
+              }
+            });
+          }
+        }
+      }
+      return data;
+    },
+    showForm(item) {
+      if (item.type) {
+        item.type.toLowerCase();
+      }
+    },
+    getProps(item) {
+      let {
+        title,
+        label,
+        field,
+        prop,
+        sortable,
+        sort,
+        className,
+        labelClassName,
+        type,
+        required,
+        width,
+        minWidth,
+        children,
+        childHead,
+        ...other
+      } = item;
+      if (width) {
+        this.width = parseInt(width, 10) + 'px';
+      }
+      if (children || childHead) {
+        return {
+          label: label || title
+        };
+      }
+      return {
+        label: label || title,
+        prop: field || prop,
+        sortable: sortable || sort,
+        width: this.width,
+        minWidth: minWidth || this.minWidth,
+        filterIcon: this.filterIcon,
+        className: [
+          className ? className : '',
+          type ? ' es-table-' + type + '-box' : '',
+          item.showOverflowTooltip ? ' es-text-ellipsis' : ''
+        ].join(' '),
+        labelClassName: [
+          labelClassName ? labelClassName : '',
+          required ? 'es-required' : ''
+        ].join(' '),
+        ...other
+      };
+    },
+    exclAttribute({ data, attrs }) {
+      return util.exclAttribute({ data, attrs });
+    },
+    format(rows, col) {
+      const field = col.field || col.prop;
+      let data = col.data
+        ? col.data
+        : col.optionData
+        ? rows[col.optionData]
+        : this.optionDatas[field];
+      if (util.isObject(rows[field])) {
+        return (
+          rows[field][col.labelKey] ||
+          rows[field]['name'] ||
+          rows[field]['label'] ||
+          rows[field]['shortName']
+        );
+      } else if (Array.isArray(rows[field])) {
+        const vals = rows[field].map((item) => {
+          if (util.isObject(item)) {
+            return (
+              item[col.labelKey] ||
+              item['name'] ||
+              item['label'] ||
+              item['shortName']
+            );
+          } else {
+            if (data && data.length && util.isObject(data[0])) {
+              return this.getLabel(data, item, col);
+            }
+            return item;
+          }
+        });
+        return vals.join(col.symbol ? col.symbol : '-');
+      } else {
+        if (col.valueToString || col['value-to-string']) {
+          const vals = rows[field].split(',').map((item) => {
+            if (data && data.length && util.isObject(data[0])) {
+              return this.getLabel(data, item, col);
+            }
+            return item;
+          });
+          return vals.join(col.symbol ? col.symbol : '-');
+        } else {
+          if (data && data.length && util.isObject(data[0])) {
+            return this.getLabel(data, rows[field], col);
+          }
+          return rows[field];
+        }
+      }
+    },
+    getLabel(obj, val, col) {
+      for (let i = 0; i < obj.length; i++) {
+        let item = obj[i];
+        let value = item[col.valueKey || 'cciValue'] || item['value'];
+        if (value == val) {
+          return (
+            item[col.labelKey] ||
+            item['name'] ||
+            item['label'] ||
+            item['shortName']
+          );
+        } else if (item.children && item.children.length) {
+          return this.getLabel(item.children, val, col);
+        }
+      }
+    },
+    isReadOnly(scope) {
+      return (
+        scope.row.canEdit === false ||
+        this.readonly ||
+        this.$attrs.editable === false ||
+        (scope.row.cantEditKey &&
+          scope.row.cantEditKey.indexOf(this.field || this.prop) > -1)
+      );
+    },
+    isNotRule(item, scope) {
+      if (
+        scope.row.canRule === false ||
+        (scope.row.notRules &&
+          scope.row.notRules.indexOf(item.field || item.prop) > -1)
+      ) {
+        this.elForm && this.elForm.clearValidate(item.field || item.prop);
+        return true;
+      }
+      return false;
+    },
+    handleBlur(data) {
+      let { item } = data;
+      item.events && item.events.blur && item.events.blur(data);
+      this.$emit('formBlur', data);
+    },
+    handleFocus(data) {
+      let { item } = data;
+      item.events && item.events.focus && item.events.focus(data);
+      this.$emit('formFocus', data);
+    },
+    handleChange(data) {
+      let { item } = data;
+      if (item && item.type == 'ganged') {
+        let { index, value } = data.value;
+        if (
+          (item.url || item.sysCode) &&
+          ((item.ganged && index > item.ganged - 1) || value.hasSub)
+        ) {
+          let filte = value[item.valueKey] || value.value;
+          let datas = [];
+          if (this.optionDatas[item.field || item.prop][index + 1]) {
+            datas = this.optionDatas[item.field || item.prop][index + 1].filter(
+              (items) => {
+                return filte == items[item.filtrateKey];
+              }
+            );
+          }
+          if (datas.length == 0) {
+            let queryKey = item.queryKey;
+            let param = {};
+            if (queryKey) {
+              for (let i in queryKey) {
+                param[i] = value[queryKey[i]];
+              }
+            }
+            let params = util.extend(
+              true,
+              item.sysCode ? { sysAppCode: item.sysCode } : {},
+              item.param ? item.param : {},
+              param
+            );
+            util
+              .ajax({
+                url: item.sysCode ? findSysCode : item.url,
+                method: this.method,
+                params: params,
+                data: params
+              })
+              .then((res) => {
+                if (res.rCode === 0) {
+                  let options = JSON.parse(
+                    JSON.stringify(this.optionDatas[item.field || item.prop])
+                  );
+                  if (options[index + 1]) {
+                    options[index + 1] = options[index + 1].concat(
+                      JSON.parse(JSON.stringify(res.results))
+                    );
+                  } else {
+                    options.push(JSON.parse(JSON.stringify(res.results)));
+                  }
+                  this.$set(this.optionDatas, item.field || item.prop, options);
+                } else {
+                  let msg = res.msg || '系统错误，请联系管理员！';
+                  this.$message.error(msg);
+                }
+              })
+              .catch((err) => {
+                if (err.message && err.message !== 'canceled') {
+                  this.$message.error(err.message);
+                }
+              });
+          }
+        }
+      }
+      item.events && item.events.change && item.events.change(data);
+      this.$emit('formChange', data);
+    },
+    handleClick(data) {
+      this.$emit('handleClick', data);
+    },
+    formatDate(date, fmt) {
+      return util.formatDate(date, fmt);
+    }
+  }
+};
+</script>