fl-web-component 0.1.0 → 0.1.1

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>

package/packages/components/com-treeDynamic/Readme.md

@@ -0,0 +1,271 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_tree">
+    <TreeDynamic
+      :tree-data="treeData"
+      :tree-props="treeProps"
+      @treeNodeClick="treeNodeClick"
+    >
+      <template slot-scope="{ data }">
+        <span v-show="data.show" title="添加子级" class="el-icon-plus" />
+        <span v-show="data.show" title="编辑" class="el-icon-edit" />
+        <span v-show="data.show" title="删除" class="el-icon-close" />
+      </template>
+    </TreeDynamic>
+  </dev>
+</template>
+
+<script>
+export default {
+  name: 'TriggerDialog',
+  components: {
+    // 树结构引入，如注册全局组件则克直接使用
+    TreeDynamic: () => import('./TreeDynamic.vue')
+  },
+  props: {},
+  data() {
+    return {
+      // 树结构数据
+      treeData: [
+        {
+          'id': '1745253848118845442',
+          'name': '对象分类',
+          'value': 'objectClass',
+          'businessCode': 'objectClass',
+          'level': 1,
+          'children': [
+            {
+              'id': '12618484347122',
+              'name': '设备',
+              'value': 'shebei',
+              'level': 2,
+              'children': [
+                {
+                  'id': '12618485050290',
+                  'name': '容器类',
+                  'value': 'rongqilei',
+                  'level': 3,
+                  'children': [
+                    {
+                      'id': '12618485152250',
+                      'name': '分离器',
+                      'value': 'fenliqi',
+                      'level': 5
+                    },
+                    {
+                      'id': '12618484578645',
+                      'name': '过滤器',
+                      'value': 'guolu:qi',
+                      'level': 4
+                    },
+                    {
+                      'id': '12618485917543',
+                      'name': '容器',
+                      'value': 'rongqi',
+                      'level': 4
+                    },
+                    {
+                      'id': '1754016181494267905',
+                      'name': '篮式过滤器',
+                      'value': 'lanshiguolu:qi',
+                      'level': 4
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }, {
+          'id': '12618484760325',
+          'name': '电气',
+          'value': 'dianqi',
+          'level': 2,
+          'children': [
+            {
+              'id': '12618485975945',
+              'name': '变压器类',
+              'value': 'bianyaqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485384756',
+                  'name': '变压器',
+                  'value': 'bianyaqi',
+                  'level': 4
+                },
+                {
+                  'id': '12618485707383',
+                  'name': '箱式变电站',
+                  'value': 'xiangshibiandianzhan',
+                  'level': 4
+                },
+                {
+                  'id': '12618485371135',
+                  'name': '光伏电站',
+                  'value': 'guangfudianzhan',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485814127',
+              'name': '发电机',
+              'value': 'fadianji',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485358015',
+                  'name': '燃气轮发电机',
+                  'value': 'ranqilunfadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618483950122',
+                  'name': '燃气内燃发电机',
+                  'value': 'ranqineiranfadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618485975170',
+                  'name': '双燃料发电机',
+                  'value': 'shuangranliaofadianji',
+                  'level': 4
+                },
+                {
+                  'id': '12618485691024',
+                  'name': '应急柴油发电机',
+                  'value': 'yingjichaiyoufadianji',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485453906',
+              'name': '开关设备和控制设备',
+              'value': 'kaiguanshebeihekongzhishebei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618483905472',
+                  'name': '低压成套开关设备',
+                  'value': 'diyachengtaokaiguanshebei',
+                  'level': 4
+                },
+                {
+                  'id': '12618484387637',
+                  'name': '中压成套开关设备树结构长度测试',
+                  'value': 'zhongyachengtaokaiguanshebei',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618484918030',
+              'name': '电源装置',
+              'value': 'dianyuanzhuangzhi',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484390629',
+                  'name': 'AC UPS',
+                  'value': 'AC UPS',
+                  'level': 4
+                },
+                {
+                  'id': '12618484534407',
+                  'name': 'DC UPS',
+                  'value': 'DC UPS',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618484767931',
+              'name': '配电箱类',
+              'value': 'peidianxianglei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618485304400',
+                  'name': '配电箱',
+                  'value': 'peidianxiang',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485729502',
+              'name': '变频器类',
+              'value': 'bianpinqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618483944869',
+                  'name': '变频器',
+                  'value': 'bianpinqi',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485102937',
+              'name': '软起动器类',
+              'value': 'ruanqidongqilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484212277',
+                  'name': '软起动器',
+                  'value': 'ruanqidongqi',
+                  'level': 4
+                }
+              ]
+            },
+            {
+              'id': '12618485021977',
+              'name': '电机类',
+              'value': 'dianjilei',
+              'level': 3,
+              'children': [
+                {
+                  'id': '12618484664538',
+                  'name': '电机',
+                  'value': 'dianji',
+                  'level': 4
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      treeProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 点击树结构返回数据 */
+    treeNodeClick(node) {
+      console.log(node)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.trigger_tree {
+  height: 100%;
+  width: 300px;
+background-color: #fff;
+}
+.el-icon-plus, .el-icon-edit, .el-icon-close {
+  color: #1890ff;
+  text-align: right;
+  margin-right: 8px;
+  font-size: 14px;
+}
+</style>