字段设置组件修改

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,

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">
+    <template #footer>
-      <el-button size="mini" @click="reset">重置</el-button>
+      <el-button size="small" @click="reset">重置</el-button>
-      <el-button size="mini" @click="closeRowDrop">关闭</el-button>
+      <el-button size="small" @click="closeRowDrop">关闭</el-button>
-    </div>
+    </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) => {
-  allData.value.forEach((item,index) => {
+    const _item:any = tableColumnsFun[props.routeName].allSchemas.tableColumns.find(itemColumns => (itemColumns.label == item ))
-    const _item = 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) => {
+const dragenter = (e) => {
-  // this.newData = value
-  console.log('2222222',value)
-  
   e.preventDefault()
 }
 
 // 拖拽最终操作
-const dragend = (value, e) => {
+const dragend = ( e) => {
-  
-  console.log('3333333',allData)
   sort(checkedDataList.value,allData.value)
-  console.log(143,checkedDataList )
   save()
-  // if (this.oldData !== this.newData) {
+  e.preventDefault()
-  //   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()
-  // }
 }
 
 // 数组排序 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') {
+          if (myTableItem.field != 'action') {
-            allData.value.push(item.label)
+            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>
-
+// .buttonsBox {
-.rowDropContain {
+//   text-align: center;
- 
+//   margin: 0;
-
+//   padding: 15px;
-  .el-popover {
+//   border-top: #eee solid 1px;
-    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;
-    }
-  }
-}
 </style>