eoss-mobiles 0.1.13

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

@@ -0,0 +1,742 @@
+<template>
+  <el-table-column
+    v-if="showTemplate(item) && show"
+    v-show="!item.hide"
+    :label="item.title || item.label"
+    :prop="item.field || item.prop"
+    :fixed="item.fixed"
+    :sortable="item.sortable || item.sort"
+    :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"
+    :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>
+          <em-picker
+            v-if="item.type === 'select'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            :sysAppCode="
+              item.sysAppCode && scope.$index == 0 ? item.sysAppCode : ''
+            "
+            :url="item.url && scope.$index == 0 ? item.url : ''"
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            v-model="scope.row[item.field]"
+            isTable
+            hideLabel
+            :ajax="false"
+            :columns="
+              item.optionData
+                ? scope.row[item.optionData]
+                : newOptionData[item.field || item.prop]
+            "
+            @confirm="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <template
+            v-else-if="
+              item.type === 'text' ||
+                item.type === 'textarea' ||
+                item.type == 'number' ||
+                item.type == 'digit'
+            "
+          >
+            <template v-if="item.lazy">
+              <input
+                v-if="item.type === 'text'"
+                class="el-input__inner"
+                :label="item.title"
+                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({
+                      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({
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              ></textarea>
+            </template>
+            <em-input
+              v-else
+              class="em-table-input"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :label="item.title"
+              hideLabel
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></em-input>
+          </template>
+          <em-date
+            v-else-if="
+              item.date ||
+                item.type == 'date' ||
+                item.type == 'year' ||
+                item.type == 'year-month' ||
+                item.type == 'month-day' ||
+                item.type == 'time' ||
+                item.type == 'datetimeSecond' ||
+                item.type == 'datetime' ||
+                item.type == 'datehour'
+            "
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            hideLabel
+            :joinStr="item.joinStr || '-'"
+            @confirm="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <em-radio-group
+            v-else-if="item.type === 'radio'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="newOptionData[item.field || item.prop]"
+            isTable
+            :ajax="false"
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  type: item.type
+                });
+              }
+            "
+          />
+          <em-checkbox-group
+            v-else-if="item.type === 'checkbox'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :data="newOptionData[item.field || item.prop]"
+            :ajax="false"
+            isTable
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  type: item.type
+                });
+              }
+            "
+          />
+          <em-switch
+            v-else-if="item.type === 'switch'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <em-selector
+            v-else-if="item.type == 'selector'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.field]"
+            :label="item.title"
+            hide-label
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value.list,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <!-- <el-form-item
+            :name="name"
+            :prop="item.field"
+            :rules="item.rules"
+            :index="scope.$index"
+            v-else
+          >
+            
+            <es-cascader
+              v-else-if="item.type == 'cascader'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="
+                item.optionData
+                  ? scope.row[item.optionData]
+                  : optionData[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({
+                    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' })"
+              v-model="scope.row[item.field]"
+              :data="
+                item.optionData
+                  ? scope.row[item.optionData]
+                  : optionData[item.field || item.prop]
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-select-ganged>
+            <es-checkbox-group
+              v-else-if="item.type === 'checkbox'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="optionData[item.field || item.prop]"
+              :ajax="false"
+              @change="
+                value => {
+                  handleChange({
+                    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="optionData[item.field || item.prop]"
+              @change="
+                value => {
+                  handleChange({
+                    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({
+                    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({
+                    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({
+                    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({
+                        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({
+                        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({
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              ></es-input>
+            </template>
+          </el-form-item> -->
+        </template>
+      </template>
+      <!-- 按钮区域 -->
+      <em-button-group
+        v-if="item.type === 'handle' && !scope.row.hideHandle"
+        :size="item.size"
+        :contents="item.contents || item.events"
+        :data="scope.row"
+        @click="handleClick"
+      ></em-button-group>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="show"
+    v-show="!item.hide"
+    :key="index"
+    :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"
+      >
+        <!-- {{ item.render(scope.row) }} -->
+      </expand-dom>
+      <template v-else>{{
+        item.formatDate
+          ? formatDate(scope.row[item.field || item.prop], item.formatDate)
+          : getValue(scope.row)
+      }}</template>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import { TableColumn } from 'element-ui';
+import util from 'eoss-mobile/src/utils/util';
+import tableMixin from './mixins/table';
+export default {
+  name: 'EmTableColumn',
+  components: { TableColumn },
+  inheritAttrs: false,
+  mixins: [tableMixin],
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    readonly: Boolean,
+    index: Number,
+    form: {
+      type: Boolean,
+      default: false
+    },
+    optionData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      show: true
+    };
+  },
+
+  computed: {
+    newOptionData(field) {
+      let data = JSON.parse(JSON.stringify(this.optionData));
+      // if (field) return this.optionData[field] || [];
+
+      return data;
+    }
+  },
+  methods: {
+    getValue(row) {
+      // [item.field || item.prop]
+      let str;
+      const { field, prop, valueKey, labelKey } = this.item;
+      if (this.newOptionData[field || prop]) {
+        if (Array.isArray(row[field || prop])) {
+          let val = [];
+          this.newOptionData[field || prop].map(x => {
+            row[field || prop].filter(j => {
+              if (typeof j == 'object') {
+                if (j[valueKey || 'value'] == x[valueKey || 'value']) {
+                  val.push(x[labelKey || 'name']);
+                }
+              } else {
+                if (j == x[valueKey || 'value']) {
+                  val.push(x[labelKey || 'name']);
+                }
+              }
+            });
+          });
+          str = val.join(',');
+        } else {
+          let val = this.newOptionData[field || prop].filter(
+            x => row[field || prop] == x[valueKey || 'value']
+          );
+          if (val.length > 0) {
+            str = val[0][labelKey || 'name'];
+          }
+        }
+      } else if (typeof row[field || prop] == 'string') {
+        str = row[field || prop];
+      } else {
+        if (
+          Array.isArray(row[field || prop]) &&
+          row[field || prop].length == 0
+        ) {
+          str = '';
+        } else {
+          str = row[field || prop] ? '是' : '否';
+        }
+      }
+      return str;
+    },
+    formatDate(date, fmt) {
+      return util.formatDate(date, fmt);
+    },
+    getTableColumns(info, name) {
+      if (this.newOptionData[name]) return;
+      this.show = false;
+      this.newOptionData[name] = info;
+      setTimeout(() => {
+        this.show = true;
+      }, 0);
+    },
+    handleBlur(data) {
+      this.$emit('formBlur', data);
+    },
+    handleFocus(data) {
+      this.$emit('formFocus', data);
+    },
+    handleChange(data) {
+      let newData;
+      if (typeof data.value == 'object' && data.value.srcElement) {
+        newData = data.value.srcElement._value;
+        data.value = newData;
+      }
+      this.$emit('formChange', data);
+    },
+    handleClick(data) {
+      this.$emit('handleClick', data);
+    },
+    exclAttribute({ data, attrs }) {
+      return util.exclAttribute({ data, attrs });
+    },
+    handleClick(res) {
+      this.$emit('handleClick', res);
+    },
+    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
+      );
+    },
+    format(rows, col) {
+      const field = col.field || col.prop;
+      if (util.isObject(rows[field])) {
+        return (
+          rows[field][col.labelKey] ||
+          rows[field]['name'] ||
+          rows[field]['label']
+        );
+      }
+      if (Array.isArray(rows[field])) {
+        const vals = rows[field].map(item => {
+          if (util.isObject(item)) {
+            return item[col.labelKey || 'name' || 'label'];
+          } else {
+            return item;
+          }
+        });
+        return vals.join(col.symbol ? col.symbol : '-');
+      }
+      return rows[field];
+    }
+  }
+};
+</script>
+
+<style></style>