fix sortable bug

Author: jxl

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 2023-3-1(v: 3.0.0)
+
+- 升级：全新升级登录页面和首页面UI
+
+- 修复：全新设计并修复 `SortableTable.vue` 组件报错问题。
+  涉及文件如下：
+    - src/components/SortableTable.vue
+    - src/types/components.ts
+    - package.json （新增第三方依赖：sortablejs 声明依赖：@types/sortablejs）
+
+- 修复：添加 `@typescript-eslint/parser` eslint 依赖，修复在某些情况下报错信息：
+    `Parsing error: Cannot find module '@typescript-eslint/parser'`
+
 ## 2023-2-20(v: 2.1.0)
 
 - 优化：优化`路由` 以 `fullPath` 字段为主键，以支持相同路由，query参数不一致时导致路由参数缺失 

package.json

@@ -24,6 +24,7 @@
     "qrcode": "^1.5.0",
     "qs": "^6.10.1",
     "quill": "^1.3.7",
+    "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.31",
     "vue-router": "^4.0.14",
@@ -39,7 +40,9 @@
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/quill": "^2.0.9",
+    "@types/sortablejs": "^1.15.0",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.54.1",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "autoprefixer": "^10.4.0",

pnpm-lock.yaml

@@ -1,27 +1,19 @@
 <template>
-  <a-popover :style="{ width: '200px' }" trigger="click">
+  <a-popover :style="{ width: '200px' }" trigger="click" @popup-visible-change="onPopVisibleChange">
     <template #content>
       <div style="border-bottom: 1px solid #f5f5f5" class="flex items-center justify-between">
         <a-checkbox v-model="allChecked" @change="onAllChange"> 全选 </a-checkbox>
         <a-button type="text" class="text-right" @click="onReset"> 重置 </a-button>
       </div>
-      <draggable
-        :list="innerTableProps"
-        animation="500"
-        tag="transition-group"
-        item-key="key"
-        @end="onUpdateValue"
-      >
-        <template #item="{ element }">
-          <div class="flex pt-2 pb-2">
-            <a-checkbox v-model="element.checked" :label="element.prop" @change="onChange">
-              {{ element.title }}
-            </a-checkbox>
-            <div class="flex-1"></div>
-            <icon-menu />
-          </div>
-        </template>
-      </draggable>
+      <div class="pt-2 pb-2" id="sortColumnWrapper">
+        <div class="column-item" v-for="item of innerTableProps" :key="item.key">
+          <a-checkbox v-model="item.checked" :label="item.title" @change="onChange">
+            {{ item.title }}
+          </a-checkbox>
+          <div class="flex-1"></div>
+          <icon-menu class="handle-icon" />
+        </div>
+      </div>
     </template>
     <a-button type="primary" size="small" shape="circle">
       <template #icon>
@@ -33,11 +25,11 @@
 
 <script lang="ts">
   import { TablePropsType } from '@/types/components'
-  import { defineComponent, PropType, reactive, ref, toRef } from 'vue'
-  import draggable from 'vuedraggable'
+  import { defineComponent, PropType, reactive, ref, toRef, nextTick } from 'vue'
+  import Sortable from 'sortablejs'
+  import { cloneDeep, isUndefined } from 'lodash-es'
   export default defineComponent({
     name: 'SortableTable',
-    components: { draggable },
     props: {
       columns: {
         type: Array as PropType<TablePropsType[]>,
@@ -47,40 +39,66 @@
     emits: ['update'],
     setup(props, { emit }) {
       const tempTableProps = toRef(props, 'columns')
+      const originColumns = cloneDeep<TablePropsType[]>(tempTableProps.value!)
       const tempArray =
         tempTableProps.value
           ?.filter((it) => !!it.key)
           .map((it) => {
             return {
               ...it,
-              checked: ref(true),
+              checked: true,
             } as TablePropsType
           }) || []
-      const innerTableProps = reactive(tempArray)
+      const innerTableProps = reactive<TablePropsType[]>(tempArray)
       const isIndeterminate = ref(
         innerTableProps.filter((it) => it.checked).length !== innerTableProps.length
       )
       const allChecked = ref(innerTableProps.every((it) => it.checked))
       function onAllChange(value: any) {
-        innerTableProps.forEach((it) => (it.checked = value?.target?.checked))
-        emit(
-          'update',
-          innerTableProps.filter((it) => it.checked)
-        )
+        innerTableProps.forEach((it) => (it.checked = value))
+        onUpdateValue(innerTableProps.filter((it) => it.checked))
       }
       const onChange = () => {
         const checkedItems = innerTableProps.filter((it) => it.checked)
         allChecked.value = checkedItems.length === innerTableProps.length
         isIndeterminate.value =
           checkedItems.length > 0 && checkedItems.length !== innerTableProps.length
-        emit('update', checkedItems)
+        onUpdateValue(checkedItems)
       }
       const onReset = () => {
+        innerTableProps.length = 0
+        innerTableProps.push(...originColumns)
         innerTableProps.forEach((it) => (it.checked = true))
-        onChange()
+        allChecked.value = true
+        onUpdateValue(innerTableProps)
+      }
+      function onUpdateValue(columns: TablePropsType[]) {
+        emit('update', columns)
       }
-      function onUpdateValue() {
-        emit('update', innerTableProps)
+      function onPopVisibleChange(visible: boolean) {
+        if (visible) {
+          nextTick(() => {
+            new Sortable(document.getElementById('sortColumnWrapper') as HTMLElement, {
+              handle: '.handle-icon',
+              animation: 150,
+              dataIdAttr: '',
+              onEnd({ newIndex, oldIndex }) {
+                if (isUndefined(newIndex) || isUndefined(oldIndex)) {
+                  return
+                }
+                const originItem = innerTableProps[oldIndex]
+                if (newIndex > oldIndex) {
+                  innerTableProps.splice(newIndex + 1, 0, originItem)
+                  innerTableProps.splice(oldIndex, 1)
+                } else {
+                  innerTableProps.splice(newIndex, 0, originItem)
+                  innerTableProps.splice(oldIndex + 1, 1)
+                }
+                onUpdateValue(innerTableProps)
+              },
+            })
+          })
+        }
       }
       return {
         innerTableProps,
@@ -90,7 +108,21 @@
         onChange,
         onReset,
         onUpdateValue,
+        onPopVisibleChange,
       }
     },
   })
 </script>
+
+<style lang="less" scoped>
+  .column-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    .handle-icon {
+      &:hover {
+        cursor: move;
+      }
+    }
+  }
+</style>

src/components/SortableTable.vue

@@ -54,7 +54,7 @@ export interface TablePropsType {
   title: string
   key: string
   sortIndex: number
-  checked: Ref<boolean>
+  checked: boolean
 }
 
 // export type ModalDialogType = InstanceType<typeof ModalDialog>