eoss-ui 0.5.13 → 0.5.14

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

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