无用代码删除，代码更新

jinhui.wang
Commit e74b44cbb7522d3eb3f2f19adff09de012a7e512 e74b44cb 1 parent 5f8aedb7
Showing 4 changed files with 309 additions and 178 deletions
src/components/Table/index.vue
src/components/Table/info.vue
src/components/Table/item.vue
src/views/basicInformation/flightInformationMaintenance/index.vue
--- a/src/components/Table/index.vue
View file @e74b44c
+++ b/src/components/Table/index.vue
View file @e74b44c
 <template>
-  <div class="Tables">
+  <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }">
     <el-table
       :ref="tableName"
       :data="data"
-      :headerData="headerData"
       :border="border"
       :stripe="stripe"
       :size="size"
@@ -25,24 +24,33 @@
       @select-change="SelectChange"
     >
       <el-table-column
-        v-for="(item, index) in headerData"
+        v-for="(item, index) in newHeader"
-        :column-key="item.value"
         :type="item.type"
         :prop="item.value"
         :label="item.name"
         :width="item.width"
         :align="item.align"
         :fixed="item.fixed"
+        :column-key="index.toString()"
         :show-overflow-tooltip="showOverflowTooltip"
         :sortable="item.sorTable"
         :formatter="formatter"
         header-align="center"
         :sort-orders="['descending', 'ascending', null]"
         :slotHeader="slotHeader"
+        :render-header="renderHeader"
         :key="index"
+        v-if="item.disabled"
       >
-        <!-- <template v-if="item.slot" slot-scope="">
+        <!-- <template slot-scope="scope">
-          <Item :dom="item.slot" @change="itemChange"></Item>
+          <exSlot
+            v-if="item.render"
+            :render="item.render"
+            :row="scope.row"
+            :index="scope.$index"
+            :column="item"
+          ></exSlot>
+          <span v-else>{{ scope.row[item.value] || "" }}</span>
         </template> -->
       </el-table-column>
       <slot></slot>
@@ -52,41 +60,87 @@
       :page-size.sync="limitSize"
       :current-page.sync="pageNum"
       background
-      layout="prev, pager, next, jumper, ->, total, slot"
+      layout="prev, pager, next, jumper, ->, sizes, total"
       class="tablePagination"
+      @size-change="sizeChange"
       @next-click="nextClick"
       @prev-click="prevClick"
       @current-change="currentChange"
     >
     </el-pagination>
-    <!-- <infoTable
+    <div class="tableInfo" v-if="infoShow">
-      v-bind="$attrs"
+      <ul class="tableList" v-show="show">
-      @checkChange="checkChange"
+        <el-checkbox-group v-model="checkDisabled">
-      @top="top"
+          <li
-      @bottom="bottom"
+            class="flexList"
-    ></infoTable> -->
+            v-for="(item, index) in newHeader"
+            :key="index"
+            v-if="!item.type"
+            :title="item.name"
+          >
+            <div>
+              <el-checkbox
+                :label="item.name"
+                @change="newHeader[index].disabled = !item.disabled"
+                >{{ item.name }}</el-checkbox
+              >
+            </div>
+          </li>
+        </el-checkbox-group>
+      </ul>
+      <el-button
+        type="primary"
+        icon="el-icon-edit"
+        size="medium"
+        circle
+        @click="show = !show"
+      ></el-button>
+    </div>
   </div>
 </template>
 <script>
-// import infoTable from "./info.vue";
+let exSlot = {
-import Item from "./item.vue";
+  fucntional: true,
+  props: {
+    row: Object,
+    render: Function,
+    index: [Number, String],
+    column: {
+      type: Object,
+      default: null,
+    },
+  },
+  render: (h, data) => {
+    console.log(data);
+    if (data) {
+      const params = {
+        row: data.props.row,
+        index: data.props.index,
+      };
+      if (data.props.column) params.column = data.props.column;
+      return data.props.render(h, params);
+    }
+  },
+};
 import dictLabels from "../../assets/languages/dictLabels.js";
 import { scrollTo } from "@/utils/scroll-to";
 export default {
   name: "Table",
   components: {
-    // infoTable,
+    exSlot,
-    Item,
   },
   props: {
+    //dom名称
     tableName: { type: String, default: "tables" },
+    //表格数据
     data: {
       type: Array,
       default() {
         return [];
       },
     },
+    //表头数据
     headerData: {
       type: Array,
       default: null,
@@ -104,7 +158,7 @@ export default {
       default: "mini",
     },
     height: {
-      type: [String, Number],
+      type: [String,Number],
       default: "400",
     },
     fit: {
@@ -143,18 +197,26 @@ export default {
       type: Boolean,
       default: true,
     },
+    //shift键状态
     shiftKey: {
       type: Boolean,
       default: false,
     },
+    //页数
     page: {
       type: Number,
       default: 1,
     },
+    // pageSizes:{
+    //   type:Array,
+    //   default:[10, 20, 30, 40, 50, 100]
+    // },
+    //每页长度
     limitSize: {
       type: Number,
       default: 20,
     },
+    //开始位置
     limitStart: {
       type: Number,
       default: 0,
@@ -167,6 +229,7 @@ export default {
       type: Number,
       default: 20,
     },
+    //总数量
     totalCount: {
       type: Number,
       default: 0,
@@ -179,28 +242,43 @@ export default {
       type: Boolean,
       default: false,
     },
+    infoShow:{
+      type:Boolean,
+      default:false,
+    }
   },
   inheritAttrs: false,
   data() {
     return {
-      newHeader: [],
+      newHeader: this.headerData,
       selectTable: [],
+      checkDisabled: [],
       pageNum: 1,
       start: -1,
+      show: false,
+      dragState: {
+        start: -9, // 起始元素的 index
+        end: -9, // 移动鼠标时所覆盖的元素 index
+        dragging: false, // 是否正在拖动
+        direction: undefined, // 拖动方向
+      },
+      //表头数据格式
       // {
-      //   type: "selection",
+      //   type: "",
       //   name: "",
       //   value: "",
-      //   slot: null,
       //   width: "",
       //   align: "center",
       //   sorTable: false,
       //   fixed:false,
+      //   disabled:true,
       // },
     };
   },
   created() {
-    this.newHeader = this.headerData;
+    this.newHeader.map((item) => {
+      this.checkDisabled.push(item.name);
+    });
   },
   watch: {
     page() {
@@ -214,9 +292,15 @@ export default {
         this.$refs.tables.doLayout()
       })
     },
+    headerData(val, oldVal) {
+      this.newHeader = val;
+    },
   },
-  mounted() {},
   methods: {
+    sizeChange(val){
+      this.$emit("sizeChange",val)
+    },
+    //下一页
     nextClick() {
       this.$emit("currentChange", {
         page: this.pageNum + 1,
@@ -224,6 +308,7 @@ export default {
       });
       scrollTo(0, 800);
     },
+    //上一页
     prevClick() {
       this.$emit("currentChange", {
         page: this.pageNum - 1,
@@ -231,6 +316,7 @@ export default {
       });
       scrollTo(0, 800);
     },
+    //某页
     currentChange(val) {
       this.$emit("currentChange", {
         page: val,
@@ -238,6 +324,7 @@ export default {
       });
       scrollTo(0, 800);
     },
+    //表格多选，shift连续选择
     tableSelect(selection, row) {
       let end = row.index;
       if (this.shiftKey) {
@@ -285,18 +372,23 @@ export default {
       selection = this.selectTable.sort(this.compare("index", "ascending"));
       this.$emit("tableSelect", { selection, row });
     },
+    //表格全选
     tableSelectAll(selection) {
       this.selectTable = selection;
       this.$emit("tableSelectAll", selection);
     },
+    //多选框改变
     SelectChange(selection) {
       this.$emit("SelectChange", selection);
     },
+    //表格选择清空
     clearTable() {
       this.selectTable = [];
       this.$refs.tables.clearSelection();
     },
+    //排序
     sortChange({ column, prop, order }) {
+      this.selectTable = [];
       this.$emit("sortChange", { prop: prop, order: order });
     },
     compare(propertyName, sort) {
@@ -315,6 +407,105 @@ export default {
         }
       };
     },
+    //自定义表头
+    renderHeader(createElement, { column }) {
+      return createElement(
+        "div",
+        {
+          class: ["thead-cell"],
+          // on: {
+          //   mousedown: ($event) => {
+          //     this.handleMouseDown($event, column);
+          //   },
+          //   mousemove: ($event) => {
+          //     this.handleMouseMove($event, column);
+          //   },
+          // },
+        },
+        [
+          // 添加 <a> 用于显示表头 label
+          createElement("a", column.label),
+          // 添加一个空标签用于显示拖动动画
+          createElement("span", {
+            class: ["virtual"],
+          }),
+        ]
+      );
+    },
+
+    // 按下鼠标开始拖动
+    // handleMouseDown(e, column) {
+    //   this.dragState.dragging = true;
+    //   this.dragState.start = parseInt(column.columnKey);
+    //   // 给拖动时的虚拟容器添加宽高
+    //   let table = document.getElementsByClassName("w-table")[0];
+    //   let virtual = document.getElementsByClassName("virtual");
+    //   for (let item of virtual) {
+    //     item.style.height = table.clientHeight - 1 + "px";
+    //     item.style.width = item.parentElement.parentElement.clientWidth + "px";
+    //   }
+    //   document.addEventListener("mouseup", this.handleMouseUp);
+    // },
+
+    // 鼠标放开结束拖动
+    // handleMouseUp() {
+    //   this.dragColumn(this.dragState);
+    //   // 初始化拖动状态
+    //   this.dragState = {
+    //     start: -9,
+    //     end: -9,
+    //     dragging: false,
+    //     direction: undefined,
+    //   };
+    //   document.removeEventListener("mouseup", this.handleMouseUp);
+    // },
+
+    // 拖动中
+    // handleMouseMove(e, column) {
+    //   if (this.dragState.dragging) {
+    //     let index = parseInt(column.columnKey); // 记录起始列
+    //     if (index - this.dragState.start !== 0) {
+    //       this.dragState.direction =
+    //         index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向
+    //       this.dragState.end = parseInt(column.columnKey);
+    //     } else {
+    //       this.dragState.direction = undefined;
+    //     }
+    //   } else {
+    //     return false;
+    //   }
+    // },
+
+    // 拖动易位
+    // dragColumn({ start, end, direction }) {
+    //   let tempData = [];
+    //   let left = direction === "left";
+    //   let min = left ? end : start - 1;
+    //   let max = left ? start + 1 : end;
+    //   for (let i = 0; i < this.newHeader.length; i++) {
+    //     if (i === end) {
+    //       tempData.push(this.newHeader[start]);
+    //     } else if (i > min && i < max) {
+    //       tempData.push(this.newHeader[left ? i - 1 : i + 1]);
+    //     } else {
+    //       tempData.push(this.newHeader[i]);
+    //     }
+    //   }
+    //   this.newHeader = tempData;
+    // },
+    // headerCellClassName({ column, columnIndex }) {
+    //   let active =
+    //     columnIndex - 1 === this.dragState.end
+    //       ? `darg_active_${this.dragState.direction}`
+    //       : "";
+    //   let start = columnIndex - 1 === this.dragState.start ? `darg_start` : "";
+    //   return `${active} ${start}`;
+    // },
+
+    // cellClassName({ column, columnIndex }) {
+    //   return columnIndex - 1 === this.dragState.start ? `darg_start` : "";
+    // },
+    //数据格式化
     formatter(row, column, cellValue, index) {
       if (dictLabels[column.property]) {
         if (dictLabels[column.property][cellValue]) {
@@ -330,14 +521,104 @@ export default {
 };
 </script>
-<style>
+<style lang="scss">
-.Tables {
-  width: 100%;
-  margin-top: 20px;
-}
 .tablePagination {
   margin-top: 40px;
   text-align: right;
 }
+.w-table {
+    height:100%;
+  　.el-table .darg_start {
+    background-color: #f3f3f3;
+  }
+  .el-table th {
+    padding: 0;
+    .virtual {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      top: 0px;
+      left: 0px;
+      background: none;
+      border: none;
+    }
+    &.darg_active_left {
+      .virtual {
+        border-left: 2px dotted #666;
+        z-index: 99;
+      }
+    }
+    &.darg_active_right {
+      .virtual {
+        border-right: 2px dotted #666;
+        z-index: 99;
+      }
+    }
+  }
+  .thead-cell {
+    padding: 0;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: left;
+    cursor: pointer;
+    overflow: initial;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+  }
+  &.w-table_moving {
+    .el-table th .thead-cell {
+      cursor: move !important;
+    }
+    .el-table__fixed {
+      cursor: not-allowed;
+    }
+  }
+}
+.tableInfo {
+  position: fixed;
+  right: 30px;
+  bottom: 100px;
+  z-index: 99999999;
+}
+.tableList {
+  width: 200px;
+  max-height: 500px;
+  padding: 5px;
+  margin: 0;
+  position: absolute;
+  bottom: 35px;
+  right: 0px;
+  border: 1px solid #ccc;
+  border-radius: 3%;
+  background: #fff;
+  overflow-y: scroll;
+}
+.tableList::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.tableList::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+.tableList::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.2);
+}
+.flexList {
+  width: 100%;
+  display: flex;
+  height: 20px;
+  line-height: 20px;
+}
 </style>
--- a/src/components/Table/info.vue deleted 100644 → 0
View file @5f8aedb
+++ b/src/components/Table/info.vue deleted 100644 → 0
View file @5f8aedb
-<template>
-  <div class="tableInfo">
-    <el-dropdown trigger="click" :hide-on-click="false">
-      <el-button
-        type="primary"
-        icon="el-icon-edit"
-        size="medium"
-        circle
-      ></el-button>
-      <el-dropdown-menu slot="dropdown">
-        <el-checkbox-group v-model="checkList">
-          <el-dropdown-item
-            v-for="(item, index) in infoData"
-            :key="index"
-            v-if="!item.type"
-            class="dropItem"
-          >
-            <el-checkbox
-              :label="item.name"
-              :checked="true"
-              @change="checkChange"
-            ></el-checkbox>
-            <span class="itemRight">
-              <i class="el-icon-caret-top" @click.stop="top(index)"></i>
-              <i class="el-icon-caret-bottom" @click.stop="bottom(index)"></i>
-            </span>
-          </el-dropdown-item>
-        </el-checkbox-group>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </div>
-</template>
-
-<script>
-export default {
-  props: { infoData: { type: Array, default: null } },
-  inheritAttrs: false,
-  data() {
-    return {
-      checkList: [],
-    };
-  },
-  methods: {
-    checkChange(val) {
-      this.$emit("checkChange", { type: val });
-    },
-    top(val) {
-      this.$emit("top", val);
-    },
-    bottom(val) {
-      this.$emit("bottom", val);
-    },
-  },
-  created() {},
-};
-</script>
-
-<style scope lang="scss">
-.itemRight {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  height: 34px;
-  width: 24px;
-  vertical-align: middle;
-  cursor: pointer;
-  overflow: initial;
-  position: relative;
-  .el-icon-caret-bottom,
-  .el-icon-caret-top {
-    width: 0;
-    height: 0;
-    border: solid 5px transparent;
-    position: absolute;
-    left: 10px;
-  }
-  .el-icon-caret-bottom {
-    bottom: 12px;
-  }
-  .el-icon-caret-top {
-    top: 5px;
-  }
-}
-.dropItem {
-  display: flex;
-  justify-content: space-between;
-}
-</style>
-
-<style>
-.tableInfo {
-  position: fixed;
-  right: 30px;
-  bottom: 40px;
-  z-index: 99999999;
-}
-</style>
\ No newline at end of file
--- a/src/components/Table/item.vue deleted 100644 → 0
View file @5f8aedb
+++ b/src/components/Table/item.vue deleted 100644 → 0
View file @5f8aedb
-<script>
-export default {
-  name: "Item",
-  inheritAttrs: false,
-  props: {
-    dom: {
-      type: Object,
-      default: null,
-    },
-  },
-  render() {
-    let newDom = [];
-    newDom.push(this.dom);
-    return newDom;
-  },
-  methods: {
-      change(val){
-          this.$emit('change',val)
-      }
-  },
-};
-</script>
--- a/src/views/basicInformation/flightInformationMaintenance/index.vue
View file @e74b44c
+++ b/src/views/basicInformation/flightInformationMaintenance/index.vue
View file @e74b44c
@@ -138,8 +138,6 @@
         v-hasPermi="['base:flightInfo:close']"
         >自动配舱关闭</el-button
       >
-      <!-- <el-button type="primary" icon="el-icon-circle-check" size="mini">自动推送开启</el-button>
-        <el-button type="primary" icon="el-icon-circle-close" size="mini">自动推送关闭</el-button> -->
     </el-form>
     <Tables
       ref="flightInfoTable"
@@ -222,18 +220,6 @@
               </el-date-picker>
             </el-form-item>
           </el-col>
-          <!-- <el-col :span="12">
-            <el-form-item label="cutOff时间" prop="cutOffTime">
-              <el-select v-model="form.cutOffTime" clearable placeholder="选择时间" type="string">
-                <el-option
-                  v-for="item in selectOption.cutOffTime"
-                  :key="item"
-                  :label="item"
-                  :value="item">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col> -->
           <el-col :span="12">
             <el-form-item label="航班路线" prop="route">
               <el-input
@@ -536,16 +522,6 @@ export default {
           fixed: false,
           disabled: true,
         },
-        // {
-        //   type: "",
-        //   name: "cutOff时间",
-        //   value: "cutOffTime",
-        //   width: "110",
-        //   align: "center",
-        //   sorTable: false,
-        //   fixed: false,
-        //   disabled:true
-        // },
         {
           type: "",
           name: "航班号",