simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdTable/src/EdTable.vue

@@ -0,0 +1,240 @@
+<template>
+  <div v-loading="loading">
+    <el-table ref="ElTable" style="width: 100%" v-bind="bindTableProps()" v-on="$listeners"
+              @row-click="handlerRowClick">
+      <!-- 索引列 -->
+      <slot name="indexColumn">
+        <!-- 索引列 - 单选 -->
+        <el-table-column v-if="isRadio" :type="indexType" align="center" width="50">
+          <template v-slot:default="scope">
+            <el-radio v-model="radioVal" :label="scope.row"></el-radio>
+          </template>
+        </el-table-column>
+
+        <!-- 索引列 - 多选、索引值 -->
+        <el-table-column v-if="isDefault" :type="indexType" align="center" width="50"></el-table-column>
+
+        <!-- 索引列 - 自定义 -->
+        <el-table-column v-if="isCustom" :type="indexType" align="center" width="50">
+          <template v-slot:default="scope">
+            <slot name="customRow" v-bind="scope"></slot>
+          </template>
+        </el-table-column>
+      </slot>
+
+      <!-- 默认列 -->
+      <el-table-column v-for="(column, index) in tableColumns" :key="index" v-bind="column">
+        <template v-slot:default="scope">
+          <slot :name="slotName(column)" v-bind="scope">
+            <table-column-item :scope="scope"></table-column-item>
+          </slot>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列 -->
+      <el-table-column v-if="$scopedSlots.hasOwnProperty('operate') && isOperate" :fixed="operateFixed"
+                       :minWidth="minWidth" align="center" label="操作">
+        <template v-slot:default="scope">
+          <slot name="operate" v-bind="scope"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <table-pagination v-if="pagination" ref="TablePagination" :pagination.sync="pagination"
+                      @change="handlePaginationChange"></table-pagination>
+  </div>
+</template>
+
+<script>
+import props, {TableProps} from './Props'
+import TablePagination     from "./components/TablePagination";
+import TableColumnItem     from "./components/TableColumnItem";
+
+/**
+ * 统一的表格组件
+ * - 示例
+ *
+ * ```vue
+ * <ed-table ref="ElsTable" v-model="elsTableData" :columns="elsTableColumns" :pagination="elsTablePagination">
+ * </ed-table>
+ * ```
+ *
+ * [](./EdTableProps.md ':include')
+ *
+ * [](./EdTableBasicProps.md ':include')
+ */
+export default {
+  name: "EdTable",
+  components: {TablePagination, TableColumnItem},
+  props: props,
+  data() {
+    return {
+      // 查询条件参数
+      tableColumns: [],
+      radioVal: "",
+      minWidth: this.operateWidth
+    }
+  },
+  watch: {
+    columns: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          //在最后添加操作栏列
+          this.tableColumns = newVal.map(t => this.bindTableColumnProps(t));
+        }
+      }
+    },
+    data: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal && newVal !== oldVal && newVal.length === 0) {
+          this.$emit('update:loading', false)
+        }
+        if (newVal && newVal !== oldVal && newVal.length > 0) {
+          this.$emit('update:loading', false)
+
+          // 主动设置操作栏宽度
+          this.$nextTick(() => {
+            this.$refs.ElTable.doLayout()
+            if (this.operateWidth === 140) {
+              let dom = this.$el.querySelectorAll('.operation')[0]
+              if (dom && Object.prototype.hasOwnProperty.call(dom.dataset, 'width')) {
+                this.minWidth = dom.dataset.width
+              }
+            }
+          })
+        }
+      }
+    },
+  },
+  computed: {
+    /**
+     * @private
+     * 处理索引列的类型
+     * @returns {string}
+     */
+    indexType() {
+      return this.columnType === 'radio' ? 'index' : this.columnType
+    },
+    // 是否单选
+    isRadio() {
+      return this.columnType && this.columnType === 'radio'
+    },
+    // 是否多选，索引
+    isDefault() {
+      return this.columnType && (this.columnType === 'index' || this.columnType === "selection")
+    },
+    // 是否使用索引列插槽
+    isCustom() {
+      let slots = Object.assign({}, this.$slots, this.$scopedSlots)
+      return this.columnType && Object.keys(slots).includes("customRow")
+    },
+  },
+  methods: {
+    /**
+     * @private
+     * 动态插槽
+     * @returns {function(*): *}
+     */
+    slotName(column) {
+      const name = column.prop.includes('.') ? column.prop.split('.').pop() : column.prop;
+      return Object.prototype.hasOwnProperty.call(column, 'scopedSlots') ? column.scopedSlots : name + 'Column';
+    },
+
+    /**
+     * @name bindTableProps
+     * @return {{}}
+     * @private
+     */
+    bindTableProps() {
+      let props = {}
+      let $props = Object.assign({}, this.$attrs, this.$props);
+      Object.keys($props).map(key => {
+        if (Object.prototype.hasOwnProperty.call(TableProps, key)) {
+          props[key] = $props[key]
+        }
+      })
+      props.data = this.data;
+      return props
+    },
+
+    /**
+     * @name bindTableColumnProps
+     * @param col
+     * @return Object
+     * @private
+     */
+    bindTableColumnProps(col) {
+      return {
+        align: 'center',
+        minWidth: 120,
+        showOverflowTooltip: true,
+        ...col,
+      }
+    },
+
+    /**
+     * @name handlePaginationChange
+     * @param e
+     * @description 页码改变
+     * @private
+     */
+    handlePaginationChange(e) {
+      this.$emit('change', {pagination: e})
+    },
+
+
+    /**
+     * @name handlerRowClick
+     * @param row
+     * @param column
+     * @param event
+     * @description 当某一行被点击时会触发该事件
+     */
+    handlerRowClick(row, column, event) {
+      this.radioVal = row
+      this.$emit('row-click', row, column, event)
+    },
+
+    /**
+     * @name setCurrentRow
+     * @param row
+     * @desc 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。
+     */
+    setCurrentRow(row) {
+      this.radioVal = row
+      this.$refs.ElTable.setCurrentRow(row);
+    },
+
+    /**
+     * @name toggleRowSelection
+     * @param row
+     * @param selected
+     * @desc 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+     */
+    toggleRowSelection(row, selected) {
+      this.$refs.ElTable.toggleRowSelection(row, selected);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+
+  .el-radio {
+    margin-left: 6px;
+  }
+
+  .el-radio .el-radio__label {
+    display: none;
+  }
+}
+
+</style>
+

package/src/components/ed-base-vue/package/EdTable/src/Props.js

@@ -0,0 +1,97 @@
+/**
+ * EdTable通用属性
+ */
+/**
+ * EdTable通用属性
+ */
+export const TableProps = {
+    // table 数据数组
+    data: {type: Array, default: () => []},
+    // 列的宽度是否自撑开
+    fit: {type: Boolean, default: true},
+    // table 高度
+    height: {type: [String, Number]},
+    // 是否带有纵向边框
+    border: {type: Boolean, default: true},
+    // Table 的尺寸 medium / small / mini
+    size: {type: String},
+    // 是否要高亮当前行
+    highlightCurrentRow: {type: Boolean, default: true},
+    // 是否为斑马纹 table
+    stripe: {type: Boolean, default: false},
+    // Table 的最大高度。合法的值为数字或者单位为 px 的高度。
+    maxHeight: {type: [String, Number]},
+    // 是否显示表头
+    showHeader: {type: Boolean, default: true},
+    // 当前行的 key，只写属性
+    currentRowKey: {type: [String, Number]},
+    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
+    rowClassName: { type: Function },
+    // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
+    rowStyle: { type: [Function, Object] },
+    // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
+    cellClassName: { type: [Function, String] },
+    // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
+    cellStyle: { type: [Function, Object] },
+    // 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
+    headerRowClassName: { type: [Function, String] },
+    // 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
+    headerRowStyle: {type: [Function, Object]},
+    // 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
+    headerCellClassName: {type: [Function, String]},
+    // 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
+    headerCellStyle: {type: [Function, Object]},
+    // 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
+    rowKey: {type: [Function, String]},
+    // 空数据时显示的文本内容，也可以通过 slot="empty" 设置
+    emptyText: {type: String},
+    // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
+    defaultExpandAll: {type: Boolean, default: false},
+    // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+    expandRowKeys: { type: Array },
+    // 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序
+    defaultSort: { type: Object },
+    // tooltip effect 属性 | dark/light
+    tooltipEffect: { type: String },
+    // 是否在表尾显示合计行
+    showSummary: {type: Boolean, default: false},
+    // 合计行第一列的文本
+    sumText: {type: String},
+    // 自定义的合计计算方法
+    summaryMethod: { type: Function },
+    // 合并行或列的计算方法
+    spanMethod: { type: Function },
+    // 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行
+    selectOnIndeterminate: {type: Boolean, default: true},
+    // 展示树形数据时，树节点的缩进
+    indent: {type: Number, default: 16},
+    // 是否懒加载子节点数据
+    lazy: {type: Boolean, default: true},
+    // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
+    load: { type: Function },
+    // 渲染嵌套数据的配置选项
+    treeProps: {type: Object}
+}
+
+/**
+ * EdTable组件属性
+ */
+export default {
+    // 是否显示操作区域
+    isOperate: {type: Boolean, default: true},
+    // 操作区域宽度
+    operateWidth: {type: [String, Number], default: 140},
+    // 对应列的类型 selection 多选 | index 索引值 | expand 可展开 | radio 单选
+    columnType: {type: String},
+    // 表格列的配置描述
+    columns: {type: Array, default: () => []},
+    // 分页数据
+    pagination: {type: [Boolean, Object]},
+    //加载进度
+    loading: {type: Boolean, default: true},
+    // 操作栏是否固定
+    operateFixed: {type: [Boolean, String], default: false},
+
+    // element table props
+    ...TableProps
+}

package/src/components/ed-base-vue/package/EdTable/src/components/TableColumnItem.js

@@ -0,0 +1,24 @@
+import lodashGet from 'lodash/get'
+import {isVNode} from "../../../../tools/utils";
+export default {
+  props: {
+    scope: {
+      type: Object,
+      require: true
+    }
+  },
+  render(h, context) {
+    let {row, $index, column} = this.scope
+    let value = lodashGet(row, column.property)
+    if(value === undefined || value === null){
+      value = ""
+    }
+    if(column.formatter){
+      // 获取值
+      const VNode = column.formatter(row, column, value, $index)
+      return isVNode(this, VNode) ? VNode : h('span', VNode);
+    }else {
+      return h('span', value)
+    }
+  }
+}

package/src/components/ed-base-vue/package/EdTable/src/components/TablePagination.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="pagination">
+    <el-pagination :current-page="pagination.current"
+                   :page-size="pagination.pageSize"
+                   :page-sizes="pagination.pageSizes"
+                   :total="pagination.total"
+                   layout="total, sizes, prev, pager, next, jumper"
+                   @size-change="handleSizeChange"
+                   @current-change="handleCurrentChange"
+                   @prev-click="handlePrevClick"
+                   @next-click="handleNextClick"></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TablePagination",
+  data() {
+    return {}
+  },
+  props: {
+    pagination: {
+      type: Object,
+      default: () => {
+        return {
+          current: 1,
+          pageSize: 10,
+          total: 0,
+          pageSizes: [10, 20, 30]
+        }
+      }
+    }
+  },
+  methods: {
+    // pageSize 改变时会触发
+    handleSizeChange(e) {
+      this.pagination.pageSize = e
+      console.log(e)
+      this.$emit('update:pagination', this.pagination)
+      this.$emit('change', this.pagination)
+    },
+
+    // 页码
+    handleCurrentChange(e) {
+      this.pagination.current = e
+      this.$emit('update:pagination', this.pagination)
+      this.$emit('change', this.pagination)
+    },
+
+    // 上一页
+    handlePrevClick(e) {
+      console.log(e)
+      this.pagination.current = e
+      this.$emit('update:pagination', this.pagination)
+      this.$emit('change', this.pagination)
+    },
+
+    // 下一页
+    handleNextClick(e) {
+      this.pagination.current = e
+      this.$emit('update:pagination', this.pagination)
+      this.$emit('change', this.pagination)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/src/components/ed-base-vue/package/EdTableEditor/index.js

@@ -0,0 +1,8 @@
+import EdTableEditor from './src/EdTableEditor.vue';
+
+/* istanbul ignore next */
+EdTableEditor.install = function (Vue) {
+  Vue.component(EdTableEditor.name, EdTableEditor)
+}
+
+export default EdTableEditor;