meixioacomponent 0.3.28 → 0.3.31

package/packages/components/proPageTable/oa_pro_table.vue

@@ -53,6 +53,7 @@
         :class="{
           'no-row-bordel': !borderRow,
         }"
+        @sort-change="sortChange"
         @cell-mouse-enter="cellMouseEnter"
         @cell-mouse-leave="cellMouseLeave"
         @selection-change="handleSelectionChange"
@@ -88,13 +89,13 @@
         <el-table-column
           :key="index"
           :align="align"
+          sortable="custom"
           :fixed="item.lock"
           v-show="item.show"
           :prop="item.key"
           :label="item.label"
           :width="isAverageWidth ? '' : item.width"
           v-for="(item, index) in showTableHeader"
-          sortable
         >
           <template slot="header" slot-scope="scope">
             <oaProtableHeader
@@ -109,8 +110,11 @@
           </template>
 
           <template slot-scope="scope">
-            <slot :name="item.key" :scope="scope.row" v-if="item.template">
-            </slot>
+            <slot
+              :name="item.key"
+              :scope="scope.row"
+              v-if="item.template"
+            ></slot>
 
             <span
               v-else
@@ -120,8 +124,9 @@
                   : `cell-content-text ${item.color}`
               "
               @click="rowClick(item, scope.row)"
-              >{{ scope.row[`${item.key}`] }}</span
             >
+              {{ scope.row[`${item.key}`] }}
+            </span>
           </template>
         </el-table-column>
       </el-table>
@@ -143,7 +148,7 @@
         :visible-arrow="false"
         :content="`${tooltip.content}`"
       >
-        <span class="table-tooltip-wrap" :style="toolTipsStyle"> </span>
+        <span class="table-tooltip-wrap" :style="toolTipsStyle"></span>
       </el-tooltip>
     </div>
 
@@ -185,20 +190,20 @@
 </template>
 
 <script>
-import oaProHeader from "./oa_pro_header.vue"; //表格头部
-import oa_pro_footerVue from "./oa_pro_footer.vue"; //表格尾部
-import oa_pro_screenVue from "./oa_pro_screen.vue"; //表格高级搜索组件
-import oaProtableHeader from "./oa_pro_table-header.vue"; //表格自定义列表头组件
-import oa_pro_table_searchVue from "./oa_pro-table-search.vue"; //表格搜索组件
-import oa_pro_colum_configVue from "./oa_pro_colum_config.vue"; //表格列配置组件
-import oa_pro_table_skeletonVue from "./oa_pro_table_skeleton.vue"; //表格骨架屏
-import baseDefaultSvgVue from "../base/baseDefaultSvg/baseDefaultSvg.vue"; //缺省页组件
-import baseButtonHandle from "../base/baseButtonHandle/baseButtonHandle.vue"; //通用组件 排列尾部按钮的组件
+import oaProHeader from './oa_pro_header.vue' //表格头部
+import oa_pro_footerVue from './oa_pro_footer.vue' //表格尾部
+import oa_pro_screenVue from './oa_pro_screen.vue' //表格高级搜索组件
+import oaProtableHeader from './oa_pro_table-header.vue' //表格自定义列表头组件
+import oa_pro_table_searchVue from './oa_pro-table-search.vue' //表格搜索组件
+import oa_pro_colum_configVue from './oa_pro_colum_config.vue' //表格列配置组件
+import oa_pro_table_skeletonVue from './oa_pro_table_skeleton.vue' //表格骨架屏
+import baseDefaultSvgVue from '../base/baseDefaultSvg/baseDefaultSvg.vue' //缺省页组件
+import baseButtonHandle from '../base/baseButtonHandle/baseButtonHandle.vue' //通用组件 排列尾部按钮的组件
 
 //
-import componentConfig from "../../config/componentConfig";
+import componentConfig from '../../config/componentConfig'
 export default {
-  name: "baseProTable",
+  name: 'baseProTable',
   data() {
     return {
       /* 表格数据 */
@@ -223,7 +228,7 @@ export default {
         width: null,
         height: null,
         show: false,
-        content: "",
+        content: '',
       },
       /* 单选表格  记录之前选择的表格数据 */
       preSingleTableValue: null,
@@ -238,18 +243,18 @@ export default {
 
       // 倒计时
       triggerDown: null,
-    };
+    }
   },
   created() {
-    this.init();
-    componentConfig.eventBus.$on("handleTableBorder", this.handleTableBorder);
+    this.init()
+    componentConfig.eventBus.$on('handleTableBorder', this.handleTableBorder)
   },
   mounted() {
     // this.init();
   },
   beforeDestroy() {
-    componentConfig.eventBus.$off("handleTableBorder", this.handleTableBorder);
-    clearTimeout(this.triggerDown);
+    componentConfig.eventBus.$off('handleTableBorder', this.handleTableBorder)
+    clearTimeout(this.triggerDown)
   },
   computed: {
     config() {
@@ -257,7 +262,7 @@ export default {
         footHeight: 60,
         headerHeight: this.headerConfig ? 36 : 0,
         searchContentHeight: this.searchContentHeight,
-      };
+      }
     },
 
     tableHeight() {
@@ -266,27 +271,27 @@ export default {
         this.config.footHeight -
         this.config.headerHeight -
         this.config.searchContentHeight
-      );
+      )
     },
     fixedList() {
       return this.$props.tableConfig.filter((item) => {
-        return item.lock;
-      });
+        return item.lock
+      })
     },
 
     module: {
       get() {
-        return this.$props.value;
+        return this.$props.value
       },
       set(val) {
-        this.$emit("input", val);
+        this.$emit('input', val)
       },
     },
 
     showTableHeader() {
       return this.$props.tableConfig.filter((item) => {
-        return item.show;
-      });
+        return item.show
+      })
     },
 
     toolTipsStyle() {
@@ -295,7 +300,7 @@ export default {
         left: `${this.tooltip.left}px`,
         width: `${this.tooltip.width}px`,
         height: `${this.tooltip.height}px`,
-      };
+      }
     },
   },
   props: {
@@ -308,9 +313,9 @@ export default {
       type: Object,
       default: () => {
         return {
-          children: "children",
-          hasChildren: "hasChildren",
-        };
+          children: 'children',
+          hasChildren: 'hasChildren',
+        }
       },
     },
 
@@ -347,13 +352,13 @@ export default {
     align: {
       type: String,
       require: false,
-      default: "left",
+      default: 'left',
     },
     // 宽度
     width: {
       type: String,
       require: false,
-      default: "100%",
+      default: '100%',
     },
     // 宽度
     height: {
@@ -365,7 +370,7 @@ export default {
     */
     placeholder: {
       type: String,
-      default: "回车键进行搜索",
+      default: '回车键进行搜索',
     },
     /*
          快捷筛选的列表
@@ -398,11 +403,11 @@ export default {
       default: () => {
         return {
           value: [],
-          type: "single",
+          type: 'single',
           canSelected: () => {
-            return true;
+            return true
           },
-        };
+        }
       },
     },
 
@@ -425,375 +430,402 @@ export default {
   },
   methods: {
     init() {
-      this.initProScreenConfig();
-      this.initFooterHandleConfig();
+      this.initProScreenConfig()
+      this.initFooterHandleConfig()
       this.$props.tableConfig.forEach((item, index) => {
-        item.preIndex = index;
-        this.$set(item, "show", true);
+        item.preIndex = index
+        this.$set(item, 'show', true)
         if (!item.width || item.width < 100) {
-          item.width = 100;
+          item.width = 100
         }
-      });
+      })
 
       if (!this.isAverageWidth) {
         this.$props.tableConfig.push({
-          label: "",
-          key: "noData",
+          label: '',
+          key: 'noData',
           lock: false,
           width: 30,
           show: true,
           template: false,
-        });
+        })
       }
 
-      this.refreshData();
+      this.refreshData()
     },
     searchContentHeightChange(height) {
-      this.searchContentHeight = height;
+      this.searchContentHeight = height
     },
 
     cellMouseEnter(row, column, cell, event) {
-      let content = row[`${column.property}`];
-      this.tooltip.show = false;
-      if (typeof content == "number" || typeof content == "string") {
-        const { tooltip } = this;
-        let style = event.target;
-        let position = style.getBoundingClientRect();
-        const { top, left } = position;
-        const { clientWidth, clientHeight } = style;
-        tooltip.width = clientWidth;
-        tooltip.height = clientHeight;
-        tooltip.top = top;
-        tooltip.left = left;
-        tooltip.content = content;
+      let content = row[`${column.property}`]
+      this.tooltip.show = false
+      if (typeof content == 'number' || typeof content == 'string') {
+        const { tooltip } = this
+        let style = event.target
+        let position = style.getBoundingClientRect()
+        const { top, left } = position
+        const { clientWidth, clientHeight } = style
+        tooltip.width = clientWidth
+        tooltip.height = clientHeight
+        tooltip.top = top
+        tooltip.left = left
+        tooltip.content = content
         this.$nextTick(() => {
-          tooltip.show = true;
-        });
+          tooltip.show = true
+        })
       }
     },
 
     cellMouseLeave() {
-      this.tooltip.show = false;
+      this.tooltip.show = false
     },
     headerItemLock(params) {
-      let { preIndex, index } = { ...params };
-      let tableConfig = this.$props.tableConfig;
-      tableConfig[index].lock = true;
+      let { preIndex, index } = { ...params }
+      let tableConfig = this.$props.tableConfig
+      tableConfig[index].lock = true
       if (tableConfig[index].preIndex == undefined) {
-        tableConfig[index].preIndex = preIndex;
+        tableConfig[index].preIndex = preIndex
       }
       if (this.fixedList.length == 0) {
-        tableConfig.unshift(tableConfig[index]);
+        tableConfig.unshift(tableConfig[index])
       } else {
-        const _fixedList = this.fixedList;
+        const _fixedList = this.fixedList
         for (let i = 0; i < _fixedList.length; i++) {
           if (tableConfig[index].preIndex < _fixedList[i].preIndex) {
-            tableConfig.splice(i, 0, tableConfig[index]);
-            break;
+            tableConfig.splice(i, 0, tableConfig[index])
+            break
           } else if (i == _fixedList.length - 1) {
-            tableConfig.splice(_fixedList.length - 1, 0, tableConfig[index]);
-            break;
+            tableConfig.splice(_fixedList.length - 1, 0, tableConfig[index])
+            break
           }
         }
       }
-      tableConfig.splice(index + 1, 1);
+      tableConfig.splice(index + 1, 1)
     },
     headerItemUnlock(params) {
-      let { preIndex, index } = { ...params };
-      let tableConfig = this.$props.tableConfig;
-      tableConfig[index].lock = false;
+      let { preIndex, index } = { ...params }
+      let tableConfig = this.$props.tableConfig
+      tableConfig[index].lock = false
 
       tableConfig.splice(
         preIndex - index + this.fixedList.length,
         0,
-        tableConfig.splice(index, 1)[0]
-      );
+        tableConfig.splice(index, 1)[0],
+      )
     },
     rowClick(config, row) {
-      if (!config.fun) return;
-      config.fun(row);
+      if (!config.fun) return
+      config.fun(row)
     },
     // 计算左下角的统计
     computedTotalList() {
-      this.totalList = [];
-      this.totalList = this.$props.totalPropsList;
+      this.totalList = []
+      this.totalList = this.$props.totalPropsList
       if (this.totalList.length > 0 && this.tableData.length > 0) {
         for (let i = 0; i < this.totalList.length; i++) {
           if (
-            typeof this.tableData[0][`${this.totalList[i].value}`] == "number"
+            typeof this.tableData[0][`${this.totalList[i].value}`] == 'number'
           ) {
             let total = this.tableData.reduce(
               (preTotal, currentItem) =>
                 preTotal + currentItem[`${this.totalList[i].value}`],
-              0
-            );
+              0,
+            )
 
-            this.totalList[i].total = total;
+            this.totalList[i].total = total
           }
         }
       }
     },
     /* 当快捷筛选的按钮被点击后 */
     handleScreen(index) {
-      this.$props.screenList.index = index;
-      this.refreshData();
+      this.$props.screenList.index = index
+      this.refreshData()
     },
     // 初始化高级筛选
     initProScreenConfig() {
-      let proScreenConfig = this.$props.proScreenConfig;
+      let proScreenConfig = this.$props.proScreenConfig
       if (proScreenConfig.length > 0) {
         this._proScreenConfig = proScreenConfig.map((item) => {
           let index = this.$props.tableConfig.findIndex((citem) => {
             //console.log(citem);
-            return citem.key == item.key;
-          });
+            return citem.key == item.key
+          })
 
           if (index > -1) {
-            this.$set(item, "label", this.$props.tableConfig[index].label);
-            this.$set(item, "isCheck", false);
-            return item;
+            this.$set(item, 'label', this.$props.tableConfig[index].label)
+            this.$set(item, 'isCheck', false)
+            return item
           }
-        });
+        })
 
         //console.log(this._proScreenConfig);
       }
     },
     // 打开高级筛选
     handleOpenProScreen() {
-      this.$refs.dialog.showDialog();
+      this.$refs.dialog.showDialog()
     },
     // 插入默认的高级筛选item
     insertDefaultItem() {
       let obj = {
-        key: "",
-        value: "",
+        key: '',
+        value: '',
         exposed: false,
         type: undefined,
-      };
-      this.proScreenList.push(obj);
+      }
+      this.proScreenList.push(obj)
     },
 
     handleScreenItem(config) {
       //console.log(config);
 
       let index = this.proScreenList.findIndex((item) => {
-        return item.key == config.value;
-      });
+        return item.key == config.value
+      })
 
       if (index < 0) {
         let _configIndex = this.$props.proScreenConfig.findIndex((item) => {
-          return item.key == config.value;
-        });
+          return item.key == config.value
+        })
 
         if (_configIndex >= 0) {
-          let _configItem = this.$props.proScreenConfig[_configIndex];
+          let _configItem = this.$props.proScreenConfig[_configIndex]
           this.proScreenList.push({
             key: _configItem.key,
-            value: "",
+            value: '',
             exposed: false,
             type: _configItem.type,
             configIndex: _configIndex,
-          });
+          })
         }
       }
 
       this.$nextTick(() => {
-        this.$refs.dialog.showDialog();
-      });
+        this.$refs.dialog.showDialog()
+      })
     },
     // 删除高级筛选的item
     deleteProscreenItem(index) {
-      this.proScreenList[index].isCheck = false;
-      this.proScreenList.splice(index, 1);
+      this.proScreenList[index].isCheck = false
+      this.proScreenList.splice(index, 1)
     },
     // 弹框确定的按钮
     dialogProscreenConfirm(type) {
       if (type) {
-        this.refreshData();
+        this.refreshData()
       }
-      this.$refs.dialog.closeDialog();
+      this.$refs.dialog.closeDialog()
     },
     // 初始化对话框尾部按钮
     initFooterHandleConfig() {
       this.footerHandleConfig = [
         {
-          text: "取消",
-          type: "info",
+          text: '取消',
+          type: 'info',
           plain: true,
           click: () => {
-            this.dialogProscreenConfirm(false);
+            this.dialogProscreenConfirm(false)
           },
         },
         {
-          text: "确定",
-          type: "primary",
+          text: '确定',
+          type: 'primary',
           plain: false,
           click: () => {
-            this.dialogProscreenConfirm(true);
-            this.$refs.oaProTableSearch.handleProScreenList(true);
+            this.dialogProscreenConfirm(true)
+            this.$refs.oaProTableSearch.handleProScreenList(true)
           },
         },
-      ];
+      ]
     },
     // 返回筛选条件的
     returnProScreenResult() {
-      let result = {};
+      let result = {}
       if (this.$props.screenList) {
-        let _screenListIndexItem =
-          this.$props.screenList.list[this.$props.screenList.index];
-        result[`${_screenListIndexItem.key}`] = _screenListIndexItem.value;
+        let _screenListIndexItem = this.$props.screenList.list[
+          this.$props.screenList.index
+        ]
+        result[`${_screenListIndexItem.key}`] = _screenListIndexItem.value
       }
-      result[`keyword`] = this.module;
+      result[`keyword`] = this.module
       this.proScreenList.forEach((item) => {
-        const { key, value } = item;
+        const { key, value } = item
         if (typeof value == Number || typeof value == Boolean || value) {
-          result[`${key}`] = value;
+          result[`${key}`] = value
         }
-      });
-      result = Object.assign(result, this.$props.pageProps);
-      return result;
+      })
+      result = Object.assign(result, this.$props.pageProps)
+      return result
     },
     // 开始调用http请求
     async refreshData(init = true) {
-      this.loading = true;
-      this.defaultSvg = false;
-      this.cleanCheckValue();
-      clearTimeout(this.triggerDown);
+      this.loading = true
+      this.defaultSvg = false
+      this.cleanCheckValue()
+      clearTimeout(this.triggerDown)
       if (init) {
-        this.$props.pageProps[this.$props.pageConfig.page] = 1;
+        this.$props.pageProps[this.$props.pageConfig.page] = 1
       }
 
-      let screenResult = this.returnProScreenResult();
+      let screenResult = this.returnProScreenResult()
       this.$props.httpRequire(screenResult).then((res) => {
-        this.setTableData(res);
-      });
+        this.setTableData(res)
+      })
     },
     // 设置表格数据
     setTableData(data, immediately = true) {
-      this.tableData = [];
-      this.tableData = data;
+      this.tableData = []
+      this.tableData = data
       if (immediately) {
-        this.tableDataCompleted();
+        this.tableDataCompleted()
       } else {
-        this.setTriggerDown();
+        this.setTriggerDown()
       }
     },
 
     // 表格如果有滚动条将滚动条拉到顶部
     scrollToTop() {
-      let elTable = this.$refs.elTable.$el;
-      let target = elTable.querySelector(".el-table__body-wrapper");
+      let elTable = this.$refs.elTable.$el
+      let target = elTable.querySelector('.el-table__body-wrapper')
       if (target) {
-        target.scrollTop = 0;
+        target.scrollTop = 0
       }
     },
     // element表格的重新渲染方法
     daLayoutTable() {
       this.$nextTick(() => {
-        this.$refs.elTable.doLayout();
-      });
+        this.$refs.elTable.doLayout()
+      })
     },
     // 清空高级筛选的条件
     cleanProscreenCondition(flag = false) {
-      if (this.proScreenList.length <= 0) return;
+      if (this.proScreenList.length <= 0) return
       this.proScreenList.forEach((item) => {
-        item.value = null;
-      });
+        item.value = null
+      })
       if (flag) {
-        this.refreshData(true);
+        this.refreshData(true)
       }
     },
     // 自定义表格的列
     setTableHeaderConfig(configList) {
       //console.log(configList);
       const index = this.$props.tableConfig.filter((item) => {
-        return item.lock;
-      }).length;
-      this.$props.tableConfig.splice(index, configList.length + 1);
+        return item.lock
+      }).length
+      this.$props.tableConfig.splice(index, configList.length + 1)
       this.$nextTick(() => {
         configList.forEach((item) => {
-          this.$props.tableConfig.push(item);
-        });
+          this.$props.tableConfig.push(item)
+        })
         this.$props.tableConfig.push({
-          label: "",
-          key: "noData",
+          label: '',
+          key: 'noData',
           lock: false,
           width: 30,
           show: true,
           template: false,
-        });
-      });
+        })
+      })
     },
     // 表格行被选中时
     handleSelectionChange(val) {
-      let tableCheckboxConfig = this.$props.tableCheckboxConfig;
-      if (tableCheckboxConfig.type == "single") {
+      let tableCheckboxConfig = this.$props.tableCheckboxConfig
+      if (tableCheckboxConfig.type == 'single') {
         if (!this.preSingleTableValue) {
-          this.preSingleTableValue = val[0];
-          tableCheckboxConfig.value = val;
+          this.preSingleTableValue = val[0]
+          tableCheckboxConfig.value = val
         } else {
           let index = val.findIndex((item) => {
-            return item == this.preSingleTableValue;
-          });
+            return item == this.preSingleTableValue
+          })
           if (index > -1) {
             this.$refs.elTable.toggleRowSelection(
               tableCheckboxConfig.value[index],
-              false
-            );
-            val.splice(index, 1);
-            tableCheckboxConfig.value = val;
-            this.preSingleTableValue = val[0];
+              false,
+            )
+            val.splice(index, 1)
+            tableCheckboxConfig.value = val
+            this.preSingleTableValue = val[0]
           }
         }
       } else {
-        tableCheckboxConfig.value = val;
+        tableCheckboxConfig.value = val
       }
       //console.log(tableCheckboxConfig.value);
     },
 
     // 返回被选中的值
     returnCheckValue() {
-      return this.$props.tableCheckboxConfig.value;
+      return this.$props.tableCheckboxConfig.value
     },
 
     // 清空被单选框选中的值
     cleanCheckValue() {
-      this.preSingleTableValue = null;
-      this.tableCheckboxConfig.value = [];
-      this.$refs.elTable?.clearSelection();
+      this.preSingleTableValue = null
+      this.tableCheckboxConfig.value = []
+      this.$refs.elTable?.clearSelection()
     },
     // 判断表格的行能否点击
     selected(row, index) {
-      let _tableCheckboxConfig = this.$props.tableCheckboxConfig;
-      if (!_tableCheckboxConfig.canSelected) return true;
+      let _tableCheckboxConfig = this.$props.tableCheckboxConfig
+      if (!_tableCheckboxConfig.canSelected) return true
 
-      return _tableCheckboxConfig.canSelected(row, index);
+      return _tableCheckboxConfig.canSelected(row, index)
     },
 
     handleTableBorder(params) {
-      this[`${params.key}`] = params.value;
+      this[`${params.key}`] = params.value
     },
 
     setTriggerDown() {
-      clearTimeout(this.triggerDown);
+      clearTimeout(this.triggerDown)
       this.triggerDown = setTimeout(() => {
-        this.tableDataCompleted();
-      }, 1000);
+        this.tableDataCompleted()
+      }, 1000)
     },
 
     tableDataCompleted() {
       if (this.tableData.length == 0) {
-        this.defaultSvg = true;
+        this.defaultSvg = true
       }
-      this.loading = false;
-      this.computedTotalList();
+      this.loading = false
+      this.computedTotalList()
       this.$nextTick(() => {
-        this.scrollToTop();
-      });
+        this.scrollToTop()
+      })
+    },
+    sortChange(column) {
+      this.tableData = this.tableData.sort(
+        this.sortFun(
+          column.prop,
+          column.order ? column.order == 'descending' : undefined,
+        ),
+      )
+    },
+    sortFun(attr, rev) {
+      if (rev == undefined) {
+        rev = 1
+      } else {
+        rev = rev ? 1 : -1
+      }
+      return function (a, b) {
+        a = a[attr]
+        b = b[attr]
+        if (a < b) {
+          return rev * -1
+        }
+        if (a > b) {
+          return rev * 1
+        }
+        return 0
+      }
     },
   },
   watch: {},
-};
+}
 </script>
 
 <style lang="less" scoped>