From 4dde7663ad1af938d8a954a025fbe94ace7207df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=96=AA=E5=90=8D?= <942005050@qq.com>
Date: Mon, 23 Oct 2023 19:37:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E6=AE=B5=E8=AE=BE=E7=BD=AE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHead/src/TableHead.vue |   7 -
 src/components/rowDrop/index.vue           | 214 +++++----------------
 2 files changed, 44 insertions(+), 177 deletions(-)

diff --git a/src/components/TableHead/src/TableHead.vue b/src/components/TableHead/src/TableHead.vue
index 4e8c4c5c7..a70026bd0 100644
--- a/src/components/TableHead/src/TableHead.vue
+++ b/src/components/TableHead/src/TableHead.vue
@@ -26,7 +26,6 @@
   <!-- 字段设置弹窗 -->
   <rowDrop 
     ref="rowDropRef"
-    :tableColumns="tableColumns" 
     :routeName="routeName"
     @updataTableColumns="updataTableColumns"
   />
@@ -46,12 +45,6 @@ import rowDrop from "@/components/rowDrop/index.vue"
         return []
       }
     },
-    tableColumns: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
     // 主组件name值
     routeName: {
       type: String,
diff --git a/src/components/rowDrop/index.vue b/src/components/rowDrop/index.vue
index 4a05cf525..471cf8c29 100644
--- a/src/components/rowDrop/index.vue
+++ b/src/components/rowDrop/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="字段设置"  width="270" v-model="popoverVisible">
+  <Dialog title="字段设置"  width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500">
     <div class="test_wrapper" @dragover="dragover($event)">
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handlecheckallchange">全部</el-checkbox>
         <el-checkbox-group v-model="checkedDataList" @change="handlecheckedchange">
@@ -10,18 +10,16 @@
           </draggable>
         </el-checkbox-group>
     </div>
-    <div class="buttonsBox">
-      <el-button size="mini" @click="reset">重置</el-button>
-      <el-button size="mini" @click="closeRowDrop">关闭</el-button>
-    </div>
+    <template #footer>
+      <el-button size="small" @click="reset">重置</el-button>
+      <el-button size="small" @click="closeRowDrop">关闭</el-button>
+    </template>
   </Dialog>
 </template>
 <script setup lang="ts">
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import * as tableColumnsFun from '@/utils/disposition/tableColumns'
 import * as RedisApi from '@/api/redis'
-import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
-import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import draggable from "vuedraggable";
 
 defineOptions({ name: 'RowDrop' })
@@ -36,19 +34,8 @@ const props = defineProps({
   routeName: {
     type: String,
     default: null
-  },
-  tableColumns: {
-    type: Array,
-    default: () => {
-      return []
-    }
   }
 })
-const oldData = ref()
-const newData = ref()
-const dataList = ref([])
-const allSeletType = ref('NoSelect')
-const buttonsData = ref([defaultButtons.defaultSetBtn(null)])
 const popoverVisible = ref(false)
 
 const isIndeterminate = ref(true)
@@ -73,7 +60,7 @@ const reset = () => {
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    RedisApi.deleteRedis(props.routeName).then(res => {
+    RedisApi.deleteRedis(props.routeName).then(() => {
       initSelectSta()
       closeRowDrop()
     }).catch(err => {
@@ -86,77 +73,40 @@ const reset = () => {
 const closeRowDrop = () => {
   popoverVisible.value = false
 }
-  
-// 格式化表头数据
-const formatData = (val) => {
-  dataList.value = JSON.parse(JSON.stringify(val))
-}
 
 // 保存
 const save = () => {
-  let saveDate = []
+  let saveDate:any[] = []
   // 默认列表第一列（弹出详情用）
   saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[0])
-  console.log(101, allData.value)
-  allData.value.forEach((item,index) => {
-    const _item = tableColumnsFun[props.routeName].allSchemas.tableColumns.find(itemColumns => (itemColumns.label == item ))
+  allData.value.forEach((item) => {
+    const _item:any = tableColumnsFun[props.routeName].allSchemas.tableColumns.find(itemColumns => (itemColumns.label == item ))
     _item.isTable = false
-    if (checkedDataList.value.indexOf(_item.label) > 0) {
+    if (checkedDataList.value.indexOf(_item.label) > -1) {
       _item.isTable = true
+      saveDate.push(_item)
     }
-    saveDate.push(_item)
   })
   // 默认操作列
   saveDate.push(tableColumnsFun[props.routeName].allSchemas.tableColumns[tableColumnsFun[props.routeName].allSchemas.tableColumns.length-1])
-  console.log(115,saveDate)
-  // tableColumnsFun[props.routeName].allSchemas.tableColumns.forEach((item,index) => {
-  //   if (index == 0) {
-  //     saveDate.push(item)
-  //   }
-  //   if ((tableColumnsFun[props.routeName].allSchemas.tableColumns.length - 1) == index) {
-  //     saveDate.push(item)
-  //   } else {
-  //     item.isTable = false
-  //     if (checkedDataList.value.indexOf(item.label) > 0) {
-  //       item.isTable = true
-  //       saveDate.push(item)
-  //     }
-  //   }
-  // })
-
   updataTableColumns(saveDate)
-  RedisApi.addRedis({key: props.routeName,value: JSON.stringify(saveDate)}).then(res => {
+  console.log(99, saveDate)
+  RedisApi.addRedis({key: props.routeName,value: JSON.stringify(saveDate)}).then(() => {
   }).catch(err => {
     console.log(err)
   })
 }
 
 // 记录移动过程中信息
-const dragenter = (value, e) => {
-  // this.newData = value
-  console.log('2222222',value)
-  
+const dragenter = (e) => {
   e.preventDefault()
 }
 
 // 拖拽最终操作
-const dragend = (value, e) => {
-  
-  console.log('3333333',allData)
+const dragend = ( e) => {
   sort(checkedDataList.value,allData.value)
-  console.log(143,checkedDataList )
   save()
-  // if (this.oldData !== this.newData) {
-  //   let oldIndex = this.dataList.indexOf(this.oldData)
-  //   let newIndex = this.dataList.indexOf(this.newData)
-  //   let newItems = [...this.dataList]
-  //   // 删除老的节点
-  //   newItems.splice(oldIndex, 1)
-  //   // 在列表中目标位置增加新的节点
-  //   newItems.splice(newIndex, 0, this.oldData)
-  //   this.dataList = [...newItems]
-  //   this.save()
-  // }
+  e.preventDefault()
 }
 
 // 数组排序 arr1 按照 arr2 排序
@@ -172,33 +122,47 @@ const dragover = (e) => {
 // 初始化当前全选状态
 const initSelectSta = () => {
   RedisApi.getRedis(props.routeName).then(res => {
+    const _myTableColumns = tableColumnsFun[props.routeName].allSchemas.tableColumns
+    // 有缓存
     if (res) {
       checkedDataList.value = []
       allData.value = []
-      updataTableColumns(JSON.parse(res))
+      // 缓存回显临时变量
+      const _showTableColumns = []
+      _showTableColumns.push(_myTableColumns[0])
       // 显示缓存中的字段
       JSON.parse(res).forEach((item, index) => {
         // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        // 列表字段操作列不能参与排序及显隐操作
         if (index != 0) {
           if (item.field != 'action') {
             checkedDataList.value.push(item.label)
+            _showTableColumns.push(_myTableColumns.find(myItem => (myItem.label == item.label)))
+            allData.value.push(item.label)
           }
         }
       })
       // 字段设置 显示全部字段
-      dataList.value.forEach((item, index) => {
+      _myTableColumns.forEach((myTableItem, index) => {
         // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        // 列表字段操作列不能参与排序及显隐操作
         if (index != 0) {
-          if (item.field != 'action') {
-            allData.value.push(item.label)
+          if (myTableItem.field != 'action') {
+            if (allData.value.indexOf(myTableItem.label) == -1) {
+              allData.value.push(myTableItem.label)
+            }
           }
         }
       })
-    } else {
+      
+      _showTableColumns.push(_myTableColumns[_myTableColumns.length-1])
+      updataTableColumns(_showTableColumns)
+    } else { // 无缓存
       checkedDataList.value = []
       allData.value = []
-      dataList.value.forEach((item, index) => {
+      _myTableColumns.forEach((item, index) => {
         // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
+        // 列表字段操作列不能参与排序及显隐操作
         if (index != 0) {
           if (item.field != 'action') {
             checkedDataList.value.push(item.label)
@@ -207,25 +171,11 @@ const initSelectSta = () => {
         }
       })
       checkAll.value = true
-      updataTableColumns(dataList.value)
+      updataTableColumns(_myTableColumns)
     }
   }).catch(err => {
     console.log(err)
-    checkedDataList.value = []
-      allData.value = []
-      dataList.value.forEach((item, index) => {
-        // 列表字段第一个不能参与排序及显隐操作（详情弹窗必备）
-        if (index != 0) {
-          if (item.field != 'action') {
-            checkedDataList.value.push(item.label)
-            allData.value.push(item.label)
-          }
-        }
-      })
-      checkAll.value = true
-      updataTableColumns(dataList.value)
   })
-  
 }
 
 // 更新主列表字段
@@ -240,7 +190,6 @@ const emit = defineEmits([
 
 /** 初始化 **/
 onMounted(() => {
-  formatData(props.tableColumns)
   initSelectSta()
 })
 
@@ -250,85 +199,10 @@ defineExpose({
 
 </script>
 <style lang="scss" scoped>
-
-.rowDropContain {
- 
-
-  .el-popover {
-    position: fixed !important;
-    right: 30px !important;
-    padding: 0 !important;
-    .el-popper {
-      left: 85% !important;
-    }
-    
-  }
-  
-
-  .transition-wrapper {
-    display: block;
-    max-height: calc(90vh - 280px);
-    overflow: auto;
-    padding: 0 0 20px 20px;
-
-    .sort-item {
-      margin-bottom: 6px;
-      display: flex;
-      cursor: grab;
-      align-items: center;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .lable {
-        padding: 0 15px 0 10px;
-      }
-    }
-  }
-
-  .el-divider--horizontal {
-    margin: 20px;
-    width: calc(100% - 40px);
-  }
-
-  .text {
-    color: #333;
-    font-weight: bold;
-    padding: 20px 0 0 20px;
-  }
-
-  .allSelectContent {
-    user-select: none;
-    cursor: pointer;
-    padding: 0 0 10px 20px;
-
-    .icon {
-      font-size: 18px;
-      vertical-align: middle;
-      color: #409EFF;
-      margin-right: 5px;
-    }
-  }
-
-  .buttonsBox {
-    text-align: center;
-    margin: 0;
-    padding: 15px;
-    border-top: #eee solid 1px;
-  }
-
-  .checkbox-svg {
-    width: 20px;
-    flex-shrink: 0;
-    fill: currentColor;
-    color: #999;
-    font-size: 18px;
-    cursor: pointer;
-
-    &.show {
-      color: #409EFF;
-    }
-  }
-}
+// .buttonsBox {
+//   text-align: center;
+//   margin: 0;
+//   padding: 15px;
+//   border-top: #eee solid 1px;
+// }
 </style>
\ No newline at end of file