eoss-ui 0.3.97

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

@@ -0,0 +1,796 @@
+<template>
+  <el-table-column
+    v-if="showTemplate(item)"
+    v-show="!item.hide"
+    :filter-icon="filterIcon"
+    :label="item.title || item.label"
+    :prop="item.field || item.prop"
+    :fixed="item.fixed"
+    :sortable="item.sortable || item.sort"
+    :column-key="item.columnKey"
+    :width="width"
+    :min-width="item.minWidth"
+    :render-header="item.renderHeader"
+    :sort-method="item.sortMethod"
+    :sort-by="item.sortBy"
+    :sort-orders="item.sortOrders"
+    :resizable="item.resizable"
+    :formatter="item.formatter"
+    :show-overflow-tooltip="item.showOverflowTooltip"
+    :align="item.align"
+    :header-align="item.headerAlign"
+    :class-name="
+      (item.className
+        ? item.className + (item.type ? ' es-table-' + item.type + '-box' : '')
+        : item.type
+        ? 'es-table-' + item.type + '-box'
+        : '') + (item.showOverflowTooltip ? ' es-text-ellipsis' : '')
+    "
+    :label-class-name="
+      item.required
+        ? 'es-required' + (item.labelClassName ? ' ' + item.labelClassName : '')
+        : item.labelClassName
+    "
+    :selectable="item.selectable"
+    :reserve-selection="item.reserveSelection"
+    :filters="item.filters"
+    :filter-placement="item.filterPlacement"
+    :filter-multiple="item.filterMultiple"
+    :filter-method="item.filterMethod"
+    :filtered-value="item.filteredValue"
+    :colspan="item.colspan"
+    :rowspan="item.rowspan"
+    :total="item.total"
+  >
+    <template slot-scope="scope">
+      <template v-if="form && item.type !== 'handle'">
+        <template v-if="isReadOnly(item, scope)">
+          <expand-dom
+            v-if="item.render"
+            :column="item"
+            :row="scope.row"
+            :render="item.render"
+            :index="index"
+          >
+          </expand-dom>
+          <template v-else>{{ format(scope.row, item) }}</template>
+        </template>
+        <template v-else>
+          <section v-if="item.type === 'slot'">
+            <slot :name="item.prop"></slot>
+          </section>
+          <el-form-item
+            :name="name"
+            :prop="item.field"
+            :rules="item.rules"
+            :index="scope.$index"
+            v-else
+          >
+            <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 });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    item: item,
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></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 });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    item: item,
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            >
+            </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 });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    item: item,
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></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 });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    item: item,
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-input-number>
+            <es-selector
+              v-else-if="item.type == 'selector'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              @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 });
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus({
+                        item: item,
+                        event: event,
+                        data: scope.row
+                      });
+                    }
+                  "
+                  @change="
+                    value => {
+                      handleChange({
+                        item: item,
+                        name: item.field || item.prop,
+                        value: value,
+                        data: scope.row
+                      });
+                    }
+                  "
+                />
+                <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 });
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus({
+                        item: item,
+                        event: event,
+                        data: scope.row
+                      });
+                    }
+                  "
+                  @change="
+                    value => {
+                      handleChange({
+                        item: item,
+                        name: item.field || item.prop,
+                        value: value,
+                        data: scope.row
+                      });
+                    }
+                  "
+                ></textarea>
+              </template>
+              <es-input
+                v-else
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model="scope.row[item.field]"
+                @blur="
+                  event => {
+                    handleBlur({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @focus="
+                  event => {
+                    handleFocus({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @change="
+                  value => {
+                    handleChange({
+                      item: item,
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              ></es-input>
+            </template>
+          </el-form-item>
+        </template>
+      </template>
+      <!-- 按钮区域 -->
+      <es-button-group
+        v-if="item.type === 'handle' && !scope.row.hideHandle"
+        :contents="item.contents || item.events"
+        :data="scope.row"
+        @handleClick="handleClick"
+        v-model="width"
+      ></es-button-group>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else
+    v-show="!item.hide"
+    :key="index"
+    :filter-icon="filterIcon"
+    :label="item.title || item.label"
+    :prop="item.field || item.prop"
+    :fixed="item.fixed"
+    :sortable="item.sortable || item.sort"
+    :index="item.index"
+    :column-key="item.columnKey"
+    :width="item.width"
+    :min-width="item.minWidth"
+    :render-header="item.renderHeader"
+    :sort-method="item.sortMethod"
+    :sort-by="item.sortBy"
+    :sort-orders="item.sortOrders"
+    :resizable="item.resizable"
+    :formatter="item.formatter"
+    :show-overflow-tooltip="item.showOverflowTooltip"
+    :align="item.align"
+    :header-align="item.headerAlign"
+    :class-name="item.className"
+    :label-class-name="item.labelClassName"
+    :selectable="item.selectable"
+    :reserve-selection="item.reserveSelection"
+    :filters="item.filters"
+    :filter-placement="item.filterPlacement"
+    :filter-multiple="item.filterMultiple"
+    :filter-method="item.filterMethod"
+    :filtered-value="item.filteredValue"
+    :colspan="item.colspan"
+    :rowspan="item.rowspan"
+    :total="item.total"
+  >
+    <slot></slot>
+    <template slot-scope="scope">
+      <expand-dom
+        v-if="item.render"
+        :column="item"
+        :row="scope.row"
+        :render="item.render"
+        :index="index"
+      >
+      </expand-dom>
+      <template v-else>{{
+        item.formatDate
+          ? formatDate(scope.row[item.field || item.prop], item.formatDate)
+          : format(scope.row, item)
+      }}</template>
+    </template>
+  </el-table-column>
+</template>
+
+<script type="text/babel">
+import { findSysCode } from 'eoss-ui/src/config/api.js';
+import tableMixin from './mixins/table';
+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) => {
+        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: {
+    tableReload: {
+      default: ''
+    }
+  },
+  mixins: [tableMixin],
+  props: {
+    readonly: Boolean,
+    name: String,
+    filterIcon: [Boolean, String],
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    index: {
+      type: Number,
+      default: null
+    },
+    minWidth: {
+      type: String,
+      default() {
+        return this.form ? '180px' : undefined;
+      }
+    },
+    optionData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    form: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    optionData: {
+      deep: true,
+      handler(val) {
+        this.optionDatas = val;
+      }
+    }
+  },
+  computed: {},
+  data() {
+    return {
+      width: Object.prototype.hasOwnProperty.call(this.item, 'width')
+        ? parseInt(this.item.width, 10) + 'px'
+        : undefined,
+      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;
+    },
+    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']
+        );
+      }
+      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 : '-');
+      }
+
+      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(item, scope) {
+      return (
+        scope.row.canEdit === false ||
+        this.readonly ||
+        item.editable === false ||
+        (scope.row.cantEditKey &&
+          scope.row.cantEditKey.indexOf(item.field || item.prop) > -1) ||
+        item.readonly
+      );
+    },
+    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>