fl-web-component 0.1.0 → 1.0.0

package/packages/components/com-table/column-dynamic.vue

@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="comTable.tableColumnName"
+    :prop="columnOption.prop"
+    :key="columnOption.prop"
+    :label="columnOption.label"
+    :show-overflow-tooltip="columnOption.overHidden"
+    :align="columnOption.align || comTable.tableOption.align"
+  >
+    <template v-for="column in columnOption.children">
+      <column-dynamic
+        v-if="column.children && column.children.length > 0"
+        :key="column.label"
+        :columnOption="column"
+      >
+      </column-dynamic>
+      <column-slot v-else :column="column" :column-option="columnOption.children" :key="column.id">
+      </column-slot>
+    </template>
+  </component>
+</template>
+
+<script>
+import columnSlot from './column-slot';
+export default {
+  name: 'column-dynamic',
+  components: {
+    columnSlot,
+  },
+  inject: ['comTable'],
+  props: {
+    columnOption: Object,
+  },
+  created() {},
+};
+</script>

package/packages/components/com-table/column-menu.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- 操作栏 -->
+  <component
+    :is="comTable.tableColumnName"
+    prop="menu"
+    key="menu"
+    :fixed="vaildData(comTable.tableOption.menuFixed, config.menuFixed)"
+    v-if="vaildData(comTable.tableOption.menu, config.menu)"
+    :label="comTable.tableOption.menuTitle || '操作'"
+    :align="comTable.tableOption.menuAlign || config.menuAlign"
+    :header-align="comTable.tableOption.menuHeaderAlign || config.menuHeaderAlign"
+    :width="comTable.tableOption.menuWidth || config.menuWidth"
+  >
+    <template slot="header">
+      <span>{{ comTable.tableOption.menuTitle || '操作' }}</span>
+    </template>
+    <template slot-scope="{ row, column: tableColumn, $index }">
+      <div>
+        <template>
+          <el-button
+            :type="`text`"
+            :icon="`el-icon-edit`"
+            :size="comTable.isMediumSize"
+            :disabled="comTable.btnDisabled"
+            @click.stop="comTable.rowEdit(row, $index)"
+            v-if="vaildData(comTable.tableOption.editBtn, config.editBtn)"
+          >
+            {{ '编 辑' }}
+          </el-button>
+          <el-button
+            :type="`text`"
+            :icon="`el-icon-delete`"
+            :size="comTable.isMediumSize"
+            :disabled="comTable.btnDisabled"
+            @click.stop="comTable.rowDel(row, $index)"
+            v-if="vaildData(comTable.tableOption.delBtn, config.delBtn)"
+          >
+            {{ '删 除' }}
+          </el-button>
+        </template>
+        <slot
+          name="menu"
+          :row="row"
+          :column="tableColumn"
+          :type="`text`"
+          :disabled="comTable.btnDisabled"
+          :size="comTable.isMediumSize"
+          :index="$index"
+        ></slot>
+      </div>
+    </template>
+  </component>
+</template>
+
+<script>
+import config from './config.js';
+import base from '../../utils/base.js';
+
+export default {
+  name: 'comTable',
+  mixins: [base()],
+  components: {},
+  data() {
+    return {
+      config: config,
+    };
+  },
+  inject: ['comTable'],
+  mounted: function () {},
+};
+</script>

package/packages/components/com-table/column-slot.vue

@@ -0,0 +1,53 @@
+<template>
+  <component
+    :is="comTable.tableColumnName"
+    :key="column.prop"
+    :prop="column.prop"
+    :label="column.label"
+    :column-key="column.prop"
+    :show-overflow-tooltip="column.showOverflowTooltip || column.overHidden"
+    :align="column.align || comTable.tableOption.align"
+    :header-align="column.headerAlign || comTable.tableOption.headerAlign"
+    :fixed="vaildData(column.fixed, config.columnFixed)"
+  >
+    <template slot-scope="{ row, column: tableColumn, $index }">
+      <slot
+        :row="row"
+        :tableColumn="tableColumn"
+        :column="column"
+        :index="$index"
+        :size="comTable.isMediumSize"
+        :label="row[column.prop]"
+        :name="column.prop"
+        v-if="comTable.$scopedSlots[column.prop]"
+      ></slot>
+      <template v-else>
+        <span v-text="row[column.prop]"></span>
+      </template>
+    </template>
+  </component>
+</template>
+
+<script>
+import base from '../../utils/base.js';
+import config from './config.js';
+
+export default {
+  name: 'column-slot',
+  mixins: [base()],
+  inject: ['comTable'],
+  data: function () {
+    return {
+      config: config,
+    };
+  },
+  components: {},
+  props: {
+    column: Object,
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style></style>

package/packages/components/com-table/column.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+    <!-- 动态列 -->
+    <template v-for="column in columnOption">
+      <column-dynamic
+        v-if="column.children && column.children.length > 0"
+        :columnOption="column"
+        :key="column.label"
+      >
+      </column-dynamic>
+      <column-slot v-else :column="column" :column-option="columnOption" :key="column.id">
+        <template v-for="item in comTable.mainSlot" slot-scope="scope" :slot="item">
+          <slot v-bind="scope" :name="item"></slot>
+        </template>
+      </column-slot>
+    </template>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+import columnDynamic from './column-dynamic';
+import columnSlot from './column-slot';
+export default {
+  name: 'comTable',
+  data() {
+    return {};
+  },
+  components: {
+    columnSlot,
+    columnDynamic,
+  },
+  inject: ['comTable'],
+  props: {
+    columnOption: Array,
+  },
+  computed: {},
+  methods: {},
+};
+</script>

package/packages/components/com-table/config.js

@@ -0,0 +1,21 @@
+// 配置文件
+export default {
+  menuWidth: 220,
+  menuFixed: 'right',
+  menuAlign: 'center',
+  menuHeaderAlign: 'center',
+  // 显隐
+  editBtn: true,
+  delBtn: true,
+  selectClearBtn: true,
+  tip: true,
+  menu: true,
+  indexLabel: '#',
+  indexFixed: 'left',
+  selectionFixed: 'left',
+  columnFixed: null,
+  width: '100%',
+  dropRowClass: '.el-table__body-wrapper > table > tbody',
+  showOverflowTooltip: true,
+  rowKey: 'id',
+};

package/packages/components/com-table/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <!-- 统计 -->
+    <el-tag
+      class="com-table__tip"
+      v-if="vaildData(tableOption.tip, config.tip) && tableOption.selection"
+    >
+      <span class="com-table__tip-name">
+        {{ '当前表格已选择' }}
+        <span class="com-table__tip-count">{{ selectLen }}</span>
+        {{ '项' }}
+      </span>
+      <el-button
+        type="text"
+        size="small"
+        @click="clearSelection"
+        v-if="vaildData(tableOption.selectClearBtn, config.selectClearBtn) && tableOption.selection"
+        >{{ '清 空' }}</el-button
+      >
+    </el-tag>
+    <!-- 表格主体 -->
+    <el-table
+      :key="reload"
+      :data="list"
+      :row-key="vaildData(tableOption.rowKey, config.rowKey)"
+      @current-change="currentRowChange"
+      @row-click="rowClick"
+      :height="tableHeight"
+      ref="table"
+      v-loading="tableLoading"
+      @selection-change="selectionChange"
+      @select="select"
+      @select-all="selectAll"
+    >
+      <template slot="empty">
+        <slot name="empty" v-if="$slots.empty"></slot>
+        <el-empty
+          v-else
+          :image-size="100"
+          :description="tableOption.emptyText || '暂无数据'"
+        ></el-empty>
+      </template>
+      <column :columnOption="columnOption">
+        <column-default ref="columnDefault" slot="header">
+          <template slot-scope="{ row, index }" slot="expand">
+            <slot :row="row" :index="index" name="expand"></slot>
+          </template>
+        </column-default>
+        <template v-for="item in mainSlot" slot-scope="scope" :slot="item">
+          <slot v-bind="scope" :name="item"></slot>
+        </template>
+        <column-menu slot="footer">
+          <template slot="menu" slot-scope="scope">
+            <slot name="menu" v-bind="scope"></slot>
+          </template>
+        </column-menu>
+      </column>
+    </el-table>
+    <!-- 分页 -->
+    <table-page ref="tablePage"> </table-page>
+  </div>
+</template>
+<script>
+import init from '../../utils/init.js';
+import tablePage from './table-page';
+import column from './column';
+import columnMenu from './column-menu';
+import columnDefault from './column-default';
+import config from './config.js';
+import { getColumn } from '../../utils/util.js';
+import sortable from 'sortablejs';
+
+export default {
+  name: 'comTable',
+  mixins: [init()],
+  provide() {
+    return {
+      comTable: this,
+    };
+  },
+  components: {
+    column, // 数据列
+    columnDefault, // 其它列,
+    columnMenu, // 操作栏，
+    tablePage, // 分页
+  },
+  data() {
+    return {
+      reload: Math.random(),
+      config: config,
+      list: [],
+      listError: {},
+      tableHeight: undefined,
+      tableIndex: -1,
+      tableSelect: [],
+      sumsList: {},
+      btnDisabledList: {},
+      btnDisabled: false,
+      default: {},
+    };
+  },
+  created() {},
+  mounted() {
+    this.dataInit();
+    // this.getTableHeight();
+    this.refreshTable();
+  },
+  computed: {
+    rowKey() {
+      return this.tableOption.rowKey;
+    },
+    tableColumnName() {
+      return 'elTableColumn';
+    },
+    isRowSort() {
+      return this.tableOption.rowSort;
+    },
+    isAutoHeight() {
+      return this.tableOption.height === 'auto';
+    },
+    mainSlot() {
+      let result = [];
+
+      this.propOption.forEach((item) => {
+        if (this.$scopedSlots[item.prop]) result.push(item.prop);
+      });
+
+      return result;
+    },
+    calcHeight() {
+      return this.tableOption.calcHeight || 0;
+    },
+    propOption() {
+      let result = [];
+      function findProp(list = []) {
+        if (!Array.isArray(list)) return;
+        list.forEach((ele) => {
+          if (Array.isArray(ele.children)) findProp(ele.children);
+          else result.push(ele);
+        });
+      }
+      findProp(this.columnOption);
+      return result;
+    },
+    columnOption() {
+      let tableOption = this.deepClone(this.tableOption);
+      return getColumn(tableOption.column);
+    },
+    selectLen() {
+      return this.tableSelect ? this.tableSelect.length : 0;
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.dataInit();
+      },
+      deep: true,
+    },
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    page: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    tableLoading: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Array,
+      required: true,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  methods: {
+    // 计算表格高度
+    getTableHeight() {
+      if (this.isAutoHeight) {
+        this.$nextTick(() => {
+          const tableRef = this.$refs.table;
+          const tablePageRef = this.$refs.tablePage;
+          if (!tableRef) return;
+          const tableStyle = tableRef.$el;
+          const pageStyle = tablePageRef.$el.offsetHeight || 20;
+          this.tableHeight =
+            document.documentElement.clientHeight -
+            tableStyle.offsetTop -
+            pageStyle -
+            this.calcHeight;
+        });
+      } else {
+        this.tableHeight = this.tableOption.height;
+      }
+    },
+    // 刷新表格
+    refreshTable(callback) {
+      console.log('refreshTable');
+      this.reload = Math.random();
+      this.$nextTick(() => {
+        callback && callback();
+      });
+    },
+    // 清除多选
+    clearSelection() {
+      console.log('clearSelection');
+      this.$emit('selection-clear', this.deepClone(this.tableSelect));
+      this.$refs.table.clearSelection();
+    },
+    // 初始化
+    dataInit() {
+      console.log('dataInit');
+      this.list = this.data;
+      this.list.forEach((ele, index) => {
+        this.$set(ele, '$index', index);
+      });
+    },
+    //设置单选
+    currentRowChange(currentRow, oldCurrentRow) {
+      console.log('currentRowChange');
+      this.$emit('current-row-change', currentRow, oldCurrentRow);
+    },
+    // 选择回调
+    selectionChange(val) {
+      console.log('selectionChange');
+      this.tableSelect = val;
+      this.$emit('selection-change', this.tableSelect);
+    },
+    // 单个选择回调
+    select(selection, row) {
+      console.log('select');
+      this.$emit('select', selection, row);
+    },
+    // 点击勾选全选 Checkbox
+    selectAll(selection) {
+      console.log('selectAll');
+      this.$emit('select-all', selection);
+    },
+    // 行点击
+    rowClick(row, event, column) {
+      console.log('rowClick');
+      this.$emit('row-click', row, event, column);
+    },
+    // 编辑
+    rowEdit(row, index) {
+      console.log('rowEdit', row, index);
+      this.$emit('row-edit', row, index, () => {});
+    },
+    // 删除
+    rowDel(row, index) {
+      console.log('rowDel', row, index);
+      this.$emit('row-del', row, index, () => {});
+    },
+    // 拖拽
+    tableDrop(type, el, callback) {
+      console.log('tableDrop');
+      if (this.isSortable !== true) {
+        if (type == 'row' && !this.isRowSort) {
+          return;
+        }
+      }
+      sortable &&
+        sortable.create(el, {
+          animation: 500,
+          delay: 0,
+          onEnd: (evt) => callback(evt),
+        });
+    },
+  },
+};
+</script>

package/packages/components/com-table/table-page.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-card v-if="pageFlag && vaildData(comTable.tableOption.page, true)">
+    <el-pagination
+      :small="comTable.size == 'mini'"
+      :disabled="defaultPage.disabled"
+      :hide-on-single-page="defaultPage.single"
+      :pager-count="defaultPage.pagerCount"
+      :current-page.sync="defaultPage.currentPage"
+      :background="defaultPage.background"
+      :page-size="defaultPage.pageSize"
+      :page-sizes="defaultPage.pageSizes"
+      @size-change="sizeChange"
+      @prev-click="prevClick"
+      @next-click="nextClick"
+      @current-change="currentChange"
+      :layout="defaultPage.layout"
+      :total="defaultPage.total"
+    ></el-pagination>
+  </el-card>
+</template>
+
+<script>
+import base from '../../utils/base.js';
+
+export default {
+  name: 'comTable',
+  inject: ['comTable'],
+  mixins: [base()],
+  data() {
+    return {
+      defaultPage: {
+        single: false,
+        total: 0, // 总页数
+        pagerCount: 7, //超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true, // 背景颜色
+      },
+    };
+  },
+  created() {
+    this.pageInit();
+    this.comTable.$emit('on-load', this.defaultPage);
+  },
+  watch: {
+    'comTable.page': {
+      handler() {
+        this.pageInit();
+      },
+      deep: true,
+    },
+    pageFlag() {
+      this.comTable.getTableHeight();
+    },
+  },
+  computed: {
+    pageFlag() {
+      return this.defaultPage.total != 0;
+    },
+  },
+  methods: {
+    pageInit() {
+      this.defaultPage = Object.assign(this.defaultPage, this.comTable.page);
+      this.updateValue();
+    },
+    updateValue() {
+      console.log('updateValue defaultPage', this.defaultPage);
+      this.comTable.$emit('update:page', this.defaultPage);
+    },
+    //下一页事件
+    nextClick(val) {
+      console.log('nextClick', val);
+      this.comTable.$emit('next-click', val);
+    },
+    //上一页事件
+    prevClick(val) {
+      console.log('prevClick', val);
+      this.comTable.$emit('prev-click', val);
+    },
+    // 页大小回调
+    sizeChange(val) {
+      this.defaultPage.currentPage = 1;
+      this.defaultPage.pageSize = val;
+      this.updateValue();
+      console.log('sizeChange', val);
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('size-change', val);
+    },
+    // 页码回调
+    currentChange(val) {
+      this.updateValue();
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('current-change', val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-pagination {
+  text-align: right;
+  padding: 15px 10px 15px 20px !important;
+}
+</style>

package/packages/components/com-tabs/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-tabs
+    v-model="active"
+    :before-leave="option.beforeLeave"
+    :tab-position="option.position"
+    :type="option.type"
+  >
+    <el-tab-pane
+      :name="index + ''"
+      :disabled="column.disabled"
+      :label="column.label"
+      v-for="(column, index) in columnOption"
+      :key="index"
+    >
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+export default {
+  name: 'comTabs',
+  props: {
+    option: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      active: '0',
+    };
+  },
+  watch: {
+    active() {
+      this.$emit('change', this.tabsObj);
+    },
+  },
+  computed: {
+    tabsObj() {
+      return this.columnOption[this.active];
+    },
+    columnOption() {
+      return this.option.column || [];
+    },
+  },
+};
+</script>