fl-web-component 0.1.1 → 1.0.1

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

@@ -5,9 +5,7 @@
     <component
       :is="comTable.tableColumnName"
       v-if="comTable.tableOption.selection"
-      :fixed="
-        vaildData(comTable.tableOption.selectionFixed, config.selectionFixed)
-      "
+      :fixed="vaildData(comTable.tableOption.selectionFixed, config.selectionFixed)"
       type="selection"
       key="selection"
       :selectable="comTable.tableOption.selectable"
@@ -29,11 +27,11 @@
 </template>
 
 <script>
-import config from "./config.js";
-import base from "../../utils/base.js";
+import config from './config.js';
+import base from '../../utils/base.js';
 
 export default {
-  name: "comTable",
+  name: 'comTable',
   mixins: [base()],
   components: {},
   data() {
@@ -41,7 +39,7 @@ export default {
       config: config,
     };
   },
-  inject: ["comTable"],
+  inject: ['comTable'],
   mounted() {
     this.setSort();
   },
@@ -50,8 +48,7 @@ export default {
       return (
         index +
         1 +
-        ((this.comTable.page.currentPage || 1) - 1) *
-          (this.comTable.page.pageSize || 10)
+        ((this.comTable.page.currentPage || 1) - 1) * (this.comTable.page.pageSize || 10)
       );
     },
     setSort() {
@@ -59,15 +56,13 @@ export default {
     },
     rowDrop() {
       if (!this.comTable.$refs.table) return;
-      const el = this.comTable.$refs.table.$el.querySelectorAll(
-        this.config.dropRowClass
-      )[0];
-      this.comTable.tableDrop("row", el, (evt) => {
+      const el = this.comTable.$refs.table.$el.querySelectorAll(this.config.dropRowClass)[0];
+      this.comTable.tableDrop('row', el, (evt) => {
         const oldIndex = evt.oldIndex;
         const newIndex = evt.newIndex;
         const targetRow = this.comTable.list.splice(oldIndex, 1)[0];
         this.comTable.list.splice(newIndex, 0, targetRow);
-        this.comTable.$emit("sortable-change", oldIndex, newIndex);
+        this.comTable.$emit('sortable-change', oldIndex, newIndex);
         this.comTable.refreshTable(() => this.rowDrop());
       });
     },

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

@@ -14,24 +14,20 @@
         :columnOption="column"
       >
       </column-dynamic>
-      <column-slot
-        v-else
-        :column="column"
-        :column-option="columnOption.children"
-      >
+      <column-slot v-else :column="column" :column-option="columnOption.children" :key="column.id">
       </column-slot>
     </template>
   </component>
 </template>
 
 <script>
-import columnSlot from "./column-slot";
+import columnSlot from './column-slot';
 export default {
-  name: "column-dynamic",
+  name: 'column-dynamic',
   components: {
     columnSlot,
   },
-  inject: ["comTable"],
+  inject: ['comTable'],
   props: {
     columnOption: Object,
   },

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

@@ -11,8 +11,8 @@
     :header-align="comTable.tableOption.menuHeaderAlign || config.menuHeaderAlign"
     :width="comTable.tableOption.menuWidth || config.menuWidth"
   >
-    <template slot="header" slot-scope="scope">
-      <span>{{ comTable.tableOption.menuTitle || "操作" }}</span>
+    <template slot="header">
+      <span>{{ comTable.tableOption.menuTitle || '操作' }}</span>
     </template>
     <template slot-scope="{ row, column: tableColumn, $index }">
       <div>
@@ -25,7 +25,7 @@
             @click.stop="comTable.rowEdit(row, $index)"
             v-if="vaildData(comTable.tableOption.editBtn, config.editBtn)"
           >
-            {{ "编 辑" }}
+            {{ '编 辑' }}
           </el-button>
           <el-button
             :type="`text`"
@@ -35,7 +35,7 @@
             @click.stop="comTable.rowDel(row, $index)"
             v-if="vaildData(comTable.tableOption.delBtn, config.delBtn)"
           >
-            {{ "删 除" }}
+            {{ '删 除' }}
           </el-button>
         </template>
         <slot
@@ -53,11 +53,11 @@
 </template>
 
 <script>
-import config from "./config.js";
-import base from "../../utils/base.js";
+import config from './config.js';
+import base from '../../utils/base.js';
 
 export default {
-  name: "comTable",
+  name: 'comTable',
   mixins: [base()],
   components: {},
   data() {
@@ -65,7 +65,7 @@ export default {
       config: config,
     };
   },
-  inject: ["comTable"],
+  inject: ['comTable'],
   mounted: function () {},
 };
 </script>

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

@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import base from "../../utils/base.js";
-import config from "./config.js";
+import base from '../../utils/base.js';
+import config from './config.js';
 
 export default {
-  name: "column-slot",
+  name: 'column-slot',
   mixins: [base()],
-  inject: ["comTable"],
+  inject: ['comTable'],
   data: function () {
     return {
       config: config,

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

@@ -2,23 +2,15 @@
   <div>
     <slot name="header"></slot>
     <!-- 动态列 -->
-    <template v-for="(column, index) in columnOption">
+    <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"
-      >
-        <template
-          v-for="item in comTable.mainSlot"
-          slot-scope="scope"
-          :slot="item"
-        >
+      <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>
@@ -28,10 +20,10 @@
 </template>
 
 <script>
-import columnDynamic from "./column-dynamic";
-import columnSlot from "./column-slot";
+import columnDynamic from './column-dynamic';
+import columnSlot from './column-slot';
 export default {
-  name: "comTable",
+  name: 'comTable',
   data() {
     return {};
   },
@@ -39,7 +31,7 @@ export default {
     columnSlot,
     columnDynamic,
   },
-  inject: ["comTable"],
+  inject: ['comTable'],
   props: {
     columnOption: Array,
   },

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

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

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

@@ -6,16 +6,16 @@
       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-button
       >
     </el-tag>
     <!-- 表格主体 -->
@@ -61,17 +61,17 @@
   </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";
+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",
+  name: 'comTable',
   mixins: [init()],
   provide() {
     return {
@@ -110,13 +110,13 @@ export default {
       return this.tableOption.rowKey;
     },
     tableColumnName() {
-      return "elTableColumn";
+      return 'elTableColumn';
     },
     isRowSort() {
       return this.tableOption.rowSort;
     },
     isAutoHeight() {
-      return this.tableOption.height === "auto";
+      return this.tableOption.height === 'auto';
     },
     mainSlot() {
       let result = [];
@@ -205,7 +205,7 @@ export default {
     },
     // 刷新表格
     refreshTable(callback) {
-      console.log("refreshTable");
+      console.log('refreshTable');
       this.reload = Math.random();
       this.$nextTick(() => {
         callback && callback();
@@ -213,59 +213,59 @@ export default {
     },
     // 清除多选
     clearSelection() {
-      console.log("clearSelection");
-      this.$emit("selection-clear", this.deepClone(this.tableSelect));
+      console.log('clearSelection');
+      this.$emit('selection-clear', this.deepClone(this.tableSelect));
       this.$refs.table.clearSelection();
     },
     // 初始化
     dataInit() {
-      console.log("dataInit");
+      console.log('dataInit');
       this.list = this.data;
       this.list.forEach((ele, index) => {
-        this.$set(ele, "$index", index);
+        this.$set(ele, '$index', index);
       });
     },
     //设置单选
     currentRowChange(currentRow, oldCurrentRow) {
-      console.log("currentRowChange");
-      this.$emit("current-row-change", currentRow, oldCurrentRow);
+      console.log('currentRowChange');
+      this.$emit('current-row-change', currentRow, oldCurrentRow);
     },
     // 选择回调
     selectionChange(val) {
-      console.log("selectionChange");
+      console.log('selectionChange');
       this.tableSelect = val;
-      this.$emit("selection-change", this.tableSelect);
+      this.$emit('selection-change', this.tableSelect);
     },
     // 单个选择回调
     select(selection, row) {
-      console.log("select");
-      this.$emit("select", selection, row);
+      console.log('select');
+      this.$emit('select', selection, row);
     },
     // 点击勾选全选 Checkbox
     selectAll(selection) {
-      console.log("selectAll");
-      this.$emit("select-all", selection);
+      console.log('selectAll');
+      this.$emit('select-all', selection);
     },
     // 行点击
     rowClick(row, event, column) {
-      console.log("rowClick");
-      this.$emit("row-click", 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, () => {});
+      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, () => {});
+      console.log('rowDel', row, index);
+      this.$emit('row-del', row, index, () => {});
     },
     // 拖拽
     tableDrop(type, el, callback) {
-      console.log("tableDrop");
+      console.log('tableDrop');
       if (this.isSortable !== true) {
-        if (type == "row" && !this.isRowSort) {
+        if (type == 'row' && !this.isRowSort) {
           return;
         }
       }

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

@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import base from "../../utils/base.js";
+import base from '../../utils/base.js';
 
 export default {
-  name: "comTable",
-  inject: ["comTable"],
+  name: 'comTable',
+  inject: ['comTable'],
   mixins: [base()],
   data() {
     return {
@@ -35,17 +35,17 @@ export default {
         currentPage: 1, // 当前页数
         pageSize: 10, // 每页显示多少条
         pageSizes: [10, 20, 30, 40, 50, 100],
-        layout: "total, sizes, prev, pager, next, jumper",
+        layout: 'total, sizes, prev, pager, next, jumper',
         background: true, // 背景颜色
       },
     };
   },
   created() {
     this.pageInit();
-    this.comTable.$emit("on-load", this.defaultPage);
+    this.comTable.$emit('on-load', this.defaultPage);
   },
   watch: {
-    "comTable.page": {
+    'comTable.page': {
       handler() {
         this.pageInit();
       },
@@ -66,33 +66,33 @@ export default {
       this.updateValue();
     },
     updateValue() {
-      console.log("updateValue defaultPage", this.defaultPage);
-      this.comTable.$emit("update:page", this.defaultPage);
+      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);
+      console.log('nextClick', val);
+      this.comTable.$emit('next-click', val);
     },
     //上一页事件
     prevClick(val) {
-      console.log("prevClick", val);
-      this.comTable.$emit("prev-click", 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);
+      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);
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('current-change', val);
     },
   },
 };

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

@@ -1,24 +1,24 @@
 <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>
+  <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> 
+<script>
 export default {
-  name: "comTabs",
+  name: 'comTabs',
   props: {
     option: {
       type: Object,
@@ -30,12 +30,12 @@ export default {
   },
   data() {
     return {
-      active: "0",
+      active: '0',
     };
   },
   watch: {
     active() {
-      this.$emit("change", this.tabsObj);
+      this.$emit('change', this.tabsObj);
     },
   },
   computed: {