lw-cdp-ui 1.2.22 → 1.2.23

package/dist/components/lwTable/index.js

@@ -4,6 +4,7 @@ import dayjs from 'dayjs'
 
 export default {
   name: 'lwTable',
+
   // 组件属性定义
   props: {
     refName: { type: String, default: 'multipleTableRef' }, // 表格ref名称
@@ -26,7 +27,7 @@ export default {
     isSetting: { type: Boolean, default: false }, // 是否启用设置功能
     saveKey: { type: String, default: '' }, // 保存设置的键名
     orderPage: { type: Boolean, default: false }, // 是否为订单页面
-    tableSize: { type: String, default: 'large' }, // 表格大小
+    tableSize: { type: String, default: 'large' }, // 表格大小 
     loading: { type: Boolean, default: false }, // 加载状态
     rowSelection: { type: Boolean, default: false }, // 是否可选择行
     selectedKeys: { type: Array }, // 选中的键值数组
@@ -40,16 +41,14 @@ export default {
   setup(props, context) {
     // 表格引用
     const multipleTable = ref()
-    
+
     // 获取全局实例
-    const {
-      proxy: { $bus, $tool }
-    } = getCurrentInstance()
+    const { proxy: { $bus, $tool } } = getCurrentInstance()
 
     // 全屏相关状态
     const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
 
-    // 响应式状态数据
+    // 响应式状态
     const state = reactive({
       dialogVisible: false, // 对话框可见性
       tableSettingTitle: '选择字段', // 表格设置标题
@@ -91,14 +90,13 @@ export default {
 
     // 组件挂载前
     onBeforeMount(async () => {
-      // 监听窗口大小变化，处理全屏状态
+      // 监听窗口大小变化
       window.addEventListener('resize', () => {
-        let isFull =
-          document.mozFullScreen || 
-          document.fullScreen || 
-          document.webkitIsFullScreen || 
-          document.webkitRequestFullScreen || 
-          document.mozRequestFullScreen || 
+        let isFull = document.mozFullScreen ||
+          document.fullScreen ||
+          document.webkitIsFullScreen ||
+          document.webkitRequestFullScreen ||
+          document.mozRequestFullScreen ||
           document.msFullscreenEnabled
         if (isFull === undefined) {
           isFull = false
@@ -110,213 +108,93 @@ export default {
     })
 
     // 监听表格列变化
-    watch(
-      () => props.tableColumns,
-      (newVal) => {
-        filterData()
-      },
-      { deep: true, immediate: true }
-    )
+    watch(() => props.tableColumns, (newVal) => {
+      filterData()
+    }, { deep: true, immediate: true })
 
-    // 选择相关的响应式引用
+    // 选择相关的响应式引用  
     const selectedKeysForm = ref([])
     const selectGoodsDatas = ref([])
     const selectAllGoods = ref([])
 
     // 监听表格数据变化
-    watch(
-      () => props.tableData,
-      (newVal) => {
-        // 合并并去重数据
-        const allArr = [...newVal, ...selectAllGoods.value]
-        const allObj = {}
-        const newAllArr = allArr.reduce((cur, next) => {
-          allObj[next[props.rowKey]] ? '' : (allObj[next[props.rowKey]] = true && cur.push(next))
-          return cur
-        }, [])
-        selectAllGoods.value = newAllArr || []
-      },
-      { deep: true, immediate: true }
-    )
+    watch(() => props.tableData, (newVal) => {
+      // 合并并去重数据
+      const allArr = [...newVal, ...selectAllGoods.value]
+      const allObj = {}
+      const newAllArr = allArr.reduce((cur, next) => {
+        allObj[next[props.rowKey]] ? '' : (allObj[next[props.rowKey]] = true && cur.push(next))
+        return cur
+      }, [])
+      selectAllGoods.value = newAllArr || []
+    }, { deep: true, immediate: true })
 
     // 监听选中键变化
-    watch(
-      () => props.selectedKeys,
-      (newVal) => {
-        selectedKeysForm.value = newVal
-        selectGoodsDatas.value = []
-
-        if (selectAllGoods.value.length && !!newVal) {
-          // 过滤并合并选中数据
-          const data = selectAllGoods.value.filter((item) => {
-            return newVal.includes(item[props.rowKey])
-          })
-          const arr = [...data, ...selectGoodsDatas.value]
-          const obj = {}
-          const newArr = arr.reduce((cur, next) => {
-            obj[next[props.rowKey]] ? '' : (obj[next[props.rowKey]] = true && cur.push(next))
-            return cur
-          }, [])
-          selectGoodsDatas.value = newArr || []
-          context.emit('update:selectDatas', newArr)
-        }
-      },
-      { deep: true, immediate: true }
-    )
+    watch(() => props.selectedKeys, (newVal) => {
+      selectedKeysForm.value = newVal
+      selectGoodsDatas.value = []
+
+      if (selectAllGoods.value.length && !!newVal) {
+        // 过滤并合并选中数据
+        const data = selectAllGoods.value.filter((item) => {
+          return newVal.includes(item[props.rowKey])
+        })
+        const arr = [...data, ...selectGoodsDatas.value]
+        const obj = {}
+        const newArr = arr.reduce((cur, next) => {
+          obj[next[props.rowKey]] ? '' : (obj[next[props.rowKey]] = true && cur.push(next))
+          return cur
+        }, [])
+        selectGoodsDatas.value = newArr || []
+        context.emit('update:selectDatas', newArr)
+      }
+    }, { deep: true, immediate: true })
 
-    // 拖拽处理函数
+    // 表格功能方法
     const handleChange = (currentData) => {
       context.emit('draggable', currentData)
     }
 
-    // 选择变化处理函数
     const handleSelectionChange = (val) => {
       context.emit('multipleSelection', val)
     }
 
-    // 当前项变化处理函数
     const handleCurrentChange = (val) => {
       context.emit('currentChange', val)
     }
 
-    // 分页大小变化处理函数
     const sizeChange = (val) => {
       props.searchParams.size = val
       context.emit('getTableData')
     }
 
-    // 页码变化处理函数
     const currentChange = (page) => {
       props.searchParams.page = page - 1
       context.emit('getTableData', props.searchParams.page)
     }
 
-    // 刷新处理函数
     const refresh = () => {
       currentChange(1)
     }
 
-    // 切换行选择状态
+    // 表格行选择方法
     const toggleRowChange = (row, status) => {
       multipleTable.value.toggleRowSelection(row, status)
     }
 
-    // 清除表格选择
-    const clearTableSelection = (row, status) => {
+    const clearTableSelection = () => {
       multipleTable.value.clearSelection()
     }
 
-    // 允许拖拽放置判断
-    const allowDrop = (draggingNode, dropNode, type) => {
-      return type !== 'inner'
-    }
-
-    // 允许拖拽判断
-    const allowDrag = (draggingNode) => {
-      return draggingNode.data.label.indexOf('Level three 3-1-1') === -1
-    }
-
-    // 表格设置处理函数
-    const tableSetting = () => {
-      state.tableSettingTitle = '选择字段'
-      state.dialogVisible = true
-    }
-
-    // 下一步处理函数
-    const next = () => {
-      if (state.checkedList.length === 0) {
-        Message.error('选择字段不可以为空！')
-        return
-      }
-      state.tableSettingTitle = '排序'
-
-      state.treeData = []
-      let num = 0
-      let list = JSON.parse(JSON.stringify(state.checkedList))
-      list.forEach((item, index) => {
-        props.tableHeader.forEach((it) => {
-          if (item === it.label) {
-            let obj = {
-              label: item,
-              children: [],
-              index: index,
-              fixed: it.fixed ? it.fixed : ''
-            }
-            state.treeData.push(obj)
-            if (it.fixed === 'left') {
-              num++
-            } else if (it.fixed === 'right') {
-              state.endFixed = true
-            }
-          }
-        })
-
-        state.num = num
-      })
-    }
-
-    // 上一步处理函数
-    const prev = () => {
-      state.tableSettingTitle = '选择字段'
-    }
-
-    // 表头确认处理函数
-    const tableHeaderConfirm = () => {
-      if ((state.num > 2 && state.endFixed) || (state.num > 3 && !state.endFixed)) {
-        Message.error('固定列最多只能选择3列！')
-        return
-      }
-      state.tableHeaderList = []
-      state.treeData.forEach((item, index) => {
-        if (state.num > 0 && state.num > index) {
-          item.fixed = 'left'
-        } else if (state.endFixed && index === state.treeData.length - 1) {
-          item.fixed = 'right'
-        } else {
-          item.fixed = ''
-        }
-        state.tableHeaderList.push(item)
-      })
-      state.dialogVisible = false
-      let obj = {
-        userId: 1,
-        json: state.tableHeaderList
-      }
-      localStorage.setItem('userTable', JSON.stringify(obj))
-    }
-
-    // 下载处理函数
-    const download = (url) => {
-      let fileUrl =
-        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && location.hostname !== 'localhost' 
-          ? location.origin + url 
-          : 'http://dev.yihai.lianwei.com.cn' + url
-      window.open(fileUrl, '_blank')
-    }
-
-    // 排序变化处理函数
-    const sortChange = ({ column, prop, order }) => {
-      props.searchParams.sortField = prop?.split(',')[0]
-      props.searchParams.sortType = order
-      const data = { ...props.searchParams }
-      context.emit('getTableData', data)
-    }
-
-    // 获取表头处理函数
-    const getHeader = (header) => {
-      context.emit('getHeader', header)
-    }
-
-    // 选择处理函数
+    // 表格设置相关方法
     const handleSelect = (v) => {
       state.tableSize = v
     }
 
-    // 全选处理函数
     const checkAll = (selected) => {
       if (selected) {
         state.tableHeaders = JSON.parse(JSON.stringify(props.tableColumns))
-        state.tableHeaders.forEach((item, index) => {
+        state.tableHeaders.forEach((item) => {
           if (!item.key) {
             item.key = $tool.getUUID()
           }
@@ -332,19 +210,18 @@ export default {
       })
     }
 
-    // 树形选择处理函数
     const treeCheck = () => {
       let list = state.treeData.filter((t) => state.checkedKeys.includes(t.key))
       state.tableHeaders = list
     }
 
-    // 表格全屏切换处理函数
+    // 全屏切换
     const tableToggleFullScreen = () => {
       $bus.$emit('tableFullScreen', !isFullscreen.value)
       toggleFullScreen()
     }
 
-    // 固定列数量变化处理函数
+    // 固定列设置
     const fixNumChange = () => {
       let num = state.fixNum
       if (num > 0) {
@@ -363,33 +240,7 @@ export default {
       }
     }
 
-    // 设置全选处理函数
-    const setSelectAll = (status) => {
-      multipleTable.value.selectAll(status)
-      context.emit('update:selectedKeys', status ? props.tableData.map((item) => item.id) : [])
-    }
-
-    // 设置选择处理函数
-    const setSelect = (rowKey, status) => {
-      multipleTable.value.select(rowKey, status)
-      const selectedKeys = [...props.selectedKeys]
-      context.emit('update:selectedKeys', status ? selectedKeys.push(rowKey) : selectedKeys.filter((item) => item !== rowKey))
-    }
-
-    // 全选处理函数
-    const selectAll = (status) => {
-      context.emit('update:selectedKeys', status ? props.tableData.map((item) => item[props.rowKey]) : [])
-    }
-
-    // 选择处理函数
-    const select = (rowKeys, rowKey, record) => {
-      context.emit('update:selectedKeys', rowKeys)
-    }
-
-    // 列宽变化处理函数
-    const changeColWidth = (newWidth, oldWidth, { property }) => {}
-
-    // 权限检查函数
+    // 权限检查
     const checkAuth = (auth) => {
       const data = JSON.parse(localStorage.getItem('userAuthInfo'))
       const { menus, authorities } = data
@@ -402,12 +253,11 @@ export default {
       return false
     }
 
-    // 操作过滤函数
+    // 操作按钮过滤
     const filterOperations = (operations, row) => {
       return operations.filter((o) => (!o?.isShow || o.isShow(row)) && checkAuth(o.auth))
     }
 
-    // 返回所有需要暴露的属性和方法
     return {
       ...toRefs(state),
       checkAuth,
@@ -420,30 +270,16 @@ export default {
       sizeChange,
       currentChange,
       multipleTable,
-      allowDrop,
-      allowDrag,
-      tableSetting,
-      next,
-      prev,
-      tableHeaderConfirm,
       toggleRowChange,
       clearTableSelection,
-      download,
-      sortChange,
-      getHeader,
       handleSelect,
       checkAll,
       tableToggleFullScreen,
       isFullscreen,
       treeCheck,
       fixNumChange,
-      setSelectAll,
-      setSelect,
       selectedKeysForm,
-      selectGoodsDatas,
-      selectAll,
-      select,
-      changeColWidth
+      selectGoodsDatas
     }
   }
 }