el-crud-page 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "el-crud-page",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A powerful CRUD page component library for Element UI v2",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -37,7 +37,8 @@
   "homepage": "https://github.com/tonwe/el-crud-page#readme",
   "peerDependencies": {
     "element-ui": "^2.x",
-    "vue": "^2.6.0"
+    "vue": "^2.6.0",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@babel/core": "^7.23.0",
@@ -54,5 +55,8 @@
     "sass": "^1.93.2",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.6.12"
+  },
+  "dependencies": {
+    "vuedraggable": "^2.24.3"
   }
 }

package/src/index.vue

@@ -41,7 +41,7 @@
                     </div>
                 </slot>
                 <slot name="toolbar" :columns="columns" :showSearch="showSearch">
-                    <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh" :columns="columns"
+                    <right-toolbar :showSearch.sync="showSearch" @queryTable="refresh" :columns.sync="columns"
                         :search="!!(queryItems && queryItems.length)"></right-toolbar>
                 </slot>
             </div>

package/src/rightToolbar.vue

@@ -1,172 +1,246 @@
 <template>
-    <div class="top-right-btn" :style="style">
-      <div class="flex flex-row items-center">
-        <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
-          <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
-        </el-tooltip>
-        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-          <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
-        </el-tooltip>
-        <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-          <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
-          <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
-            <el-button size="mini" circle icon="el-icon-menu" />
-            <el-dropdown-menu slot="dropdown">
-              <template >
-                <el-dropdown-item v-for="item in columns" :key="item.key" v-if="item.type!=`index` && item.type!=`selection` && (typeof item.visible) !== `undefined` ">
-                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item)" :label="item.label" />
-                </el-dropdown-item>
-              </template>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </el-tooltip>
-      </div>
-      <el-dialog :title="title" :visible.sync="open" append-to-body>
-        <el-transfer
-          :titles="['显示', '隐藏']"
-          v-model="value"
-          :data="columns"
-          @change="dataChange"
-        ></el-transfer>
-      </el-dialog>
+  <div class="top-right-btn" :style="style">
+    <div class="flex flex-row items-center">
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          v-model="popoverVisible"
+          popper-class="columns-popover"
+          v-if="showColumnsType == 'checkbox'"
+        >
+          <draggable
+            v-model="visibleColumnsList"
+            class="columns-list"
+            handle=".drag-handle"
+            animation="200"
+            @end="onDragEnd"
+          >
+            <div
+              v-for="item in visibleColumnsList"
+              :key="item.key"
+              class="column-item"
+            >
+              <i class="el-icon-rank drag-handle"></i>
+              <el-checkbox
+                v-model="item.visible"
+                @change="checkboxChange"
+              >
+                {{ item.label }}
+              </el-checkbox>
+            </div>
+          </draggable>
+          <el-button size="mini" circle icon="el-icon-menu" slot="reference" style="margin-left: 12px" />
+        </el-popover>
+      </el-tooltip>
     </div>
-  </template>
-  <script>
-  export default {
-    name: "RightToolbar",
-    inject: ["crud"],
-    data() {
-      return {
-        // 显隐数据
-        value: [],
-        // 弹出层标题
-        title: "显示/隐藏",
-        // 是否显示弹出层
-        open: false,
-        // 本地列数据副本（用于拖拽）
-        localColumns: [],
-      };
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+
+export default {
+  name: "RightToolbar",
+  inject: ["crud"],
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      value: [],
+      title: "显示/隐藏",
+      open: false,
+      popoverVisible: false,
+      localColumns: [],
+    };
+  },
+  props: {
+    showSearch: {
+      type: Boolean,
+      default: true,
     },
-    props: {
-      /* 是否显示检索条件 */
-      showSearch: {
-        type: Boolean,
-        default: true,
-      },
-      /* 显隐列信息 */
-      columns: {
-        type: Array,
-      },
-      /* 是否显示检索图标 */
-      search: {
-        type: Boolean,
-        default: true,
-      },
-      /* 显隐列类型（transfer穿梭框、checkbox复选框） */
-      showColumnsType: {
-        type: String,
-        default: "checkbox",
-      },
-      /* 右外边距 */
-      gutter: {
-        type: Number,
-        default: 10,
-      },
+    columns: {
+      type: Array,
     },
-    computed: {
-      style() {
-        const ret = {};
-        if (this.gutter) {
-          ret.marginRight = `${this.gutter / 2}px`;
-        }
-        return ret;
-      }
+    search: {
+      type: Boolean,
+      default: true,
     },
-    watch: {
-      columns: {
-        handler(newVal) {
-          // 当 columns prop 变化时，更新本地副本
-          this.localColumns = newVal ? [...newVal] : [];
-        },
-        immediate: true,
-        deep: true
-      }
+    showColumnsType: {
+      type: String,
+      default: "checkbox",
     },
-    created() {
-      if (this.showColumnsType == 'transfer') {
-        // 显隐列初始默认隐藏列
-        for (let item in this.columns) {
-          if (this.columns[item].visible === false) {
-            this.value.push(parseInt(item));
-          }
-        }
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginRight = `${this.gutter / 2}px`;
       }
+      return ret;
     },
-    methods: {
-      // 搜索
-      toggleSearch() {
-        this.$emit("update:showSearch", !this.showSearch);
+    visibleColumnsList: {
+      get() {
+        return this.localColumns.filter(item => {
+          return item.type !== 'index' && 
+                 item.type !== 'selection' && 
+                 typeof item.visible !== 'undefined';
+        });
       },
-      // 刷新
-      refresh() {
-        this.$emit("queryTable");
+      set(value) {
+        const visibleKeys = value.map(v => v.key);
+        const otherColumns = this.localColumns.filter(item => {
+          return item.type === 'index' || 
+                 item.type === 'selection' || 
+                 typeof item.visible === 'undefined';
+        });
+        this.localColumns = [...otherColumns, ...value];
+      }
+    }
+  },
+  watch: {
+    columns: {
+      handler(newVal) {
+        this.localColumns = newVal ? [...newVal] : [];
       },
-      // 右侧列表元素变化
-      dataChange(data) {
-        for (let item in this.columns) {
-          const key = this.columns[item].key;
-          this.columns[item].visible = !data.includes(key);
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    if (this.showColumnsType == 'transfer') {
+      for (let item in this.columns) {
+        if (this.columns[item].visible === false) {
+          this.value.push(parseInt(item));
         }
-      },
-      // 打开显隐列dialog
-      showColumn() {
-        this.open = true;
-      },
-      // 勾选
-      checkboxChange(event, item) {
-        item.visible = event;
-        // 通知父组件更新
-        this.$emit('update:columns', this.localColumns);
-      },
-      // 拖拽结束
-      onDragEnd(event) {
-        // 拖拽结束后，通知父组件列顺序已改变
-        this.$emit('update:columns', this.localColumns);
-        this.$emit('columns-order-changed', this.localColumns);
+      }
+    }
+  },
+  methods: {
+    toggleSearch() {
+      this.$emit("update:showSearch", !this.showSearch);
+    },
+    refresh() {
+      this.$emit("queryTable");
+    },
+    dataChange(data) {
+      for (let item in this.columns) {
+        const key = this.columns[item].key;
+        this.columns[item].visible = !data.includes(key);
       }
     },
-  };
-  </script>
-  <style lang="scss" scoped>
-  ::v-deep .el-transfer__button {
-    border-radius: 50%;
-    padding: 12px;
-    display: block;
-    margin-left: 0px;
+    showColumn() {
+      this.open = true;
+    },
+    checkboxChange() {
+      this.$emit('update:columns', this.localColumns);
+    },
+    onDragEnd() {
+      this.$emit('update:columns', this.localColumns);
+      this.$emit('columns-order-changed', this.localColumns);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+
+::v-deep .el-transfer__button:first-child {
+  margin-bottom: 10px;
+}
+
+.drag-item {
+  padding: 8px;
+  cursor: move;
+  border-bottom: 1px solid #ebeef5;
+  display: flex;
+  align-items: center;
+  
+  &:hover {
+    background-color: #f5f7fa;
   }
-  ::v-deep .el-transfer__button:first-child {
-    margin-bottom: 10px;
+}
+
+.drag-handle {
+  color: #909399;
+  
+  &:hover {
+    color: #409eff;
   }
+}
+</style>
+
+<style lang="scss">
+.columns-popover {
+  padding: 8px 0;
+  min-width: 200px;
+}
+
+.columns-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.column-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px 8px 10px;
+  user-select: none;
+  transition: background-color 0.2s;
   
-  .drag-item {
-    padding: 8px;
-    cursor: move;
-    border-bottom: 1px solid #ebeef5;
-    display: flex;
-    align-items: center;
-    
-    &:hover {
-      background-color: #f5f7fa;
-    }
+  &:hover {
+    background-color: #f5f7fa;
   }
   
   .drag-handle {
+    margin-right: 8px;
     color: #909399;
+    cursor: move;
     
     &:hover {
       color: #409eff;
     }
   }
   
-  </style>
-  
+  .el-checkbox {
+    flex: 1;
+  }
+}
+
+.sortable-ghost {
+  opacity: 0.4;
+  background-color: #ecf5ff;
+}
+
+.sortable-drag {
+  opacity: 0.8;
+  background-color: #ffffff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/table.vue

@@ -146,6 +146,7 @@ export default {
 <style scoped lang="scss">
 .crud-table {
     &::v-deep {
+        .el-table__fixed,
         .el-table__body-wrapper {
             .el-table__cell {
                 .cell:empty::after {