lw-cdp-ui 1.2.21 → 1.2.23

package/dist/components/lwTable/index.js

@@ -3,379 +3,283 @@ import { onBeforeMount, reactive, ref, watch, toRefs, getCurrentInstance } from
 import dayjs from 'dayjs'
 
 export default {
-	name: 'lwTable',
-	props: {
-		refName: { type: String, default: 'multipleTableRef' },
-		tableName: { type: String, default: '' },
-		isRadio: { type: Boolean, default: false },
-		bordered: { type: Boolean, default: true },
-		stripe: { type: Boolean, default: false },
-		summaryMethod: { type: Function, default: () => [] },
-		rowKey: { type: String, default: 'id' },
-		defaultSelectData: { type: Array, default: () => [] },
-		searchParams: { type: Object, default: () => ({ page: 1, size: 20 }) },
-		selectStatus: { type: Function, default: () => true },
-		pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
-		isShowPagination: { type: Boolean, default: true },
-		tableData: { type: Array, default: [] },
-		totalCount: { type: Number, default: 0 },
-		tableColumns: { type: Array, default: [] },
-		hoverable: { type: Boolean, default: true },
-		defaultExpandAll: { type: Boolean, default: false },
-		isSetting: { type: Boolean, default: false },
-		saveKey: { type: String, default: '' },
-		orderPage: { type: Boolean, default: false },
-		tableSize: { type: String, default: 'large' },
-		loading: { type: Boolean, default: false },
-		rowSelection: {  type: Boolean, default: false },
-		selectedKeys: { type: Array },
-		selectDatas: { type: Array },
-		hideTool: { type: Boolean, default: true },
-		virtualListProps: { type: Object, default: undefined },
-		draggable: { type: Object },
-		maxHeight: { type: String, default: 'calc(100vh - 270px)' }
-	},
-	setup(props, context) {
-		const multipleTable = ref()
-		const {
-			proxy: { $bus, $tool }
-		} = getCurrentInstance()
-		const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
-		const state = reactive({
-			dialogVisible: false,
-			tableSettingTitle: '选择字段',
-
-			tableHeaderListAll: [],
-			checkedList: [],
-			defaultProps: {
-				children: 'children',
-				label: 'label'
-			},
-			num: 0,
-			endFixed: false,
-			filterHeader: [],
-			tableSize: props.tableSize,
-
-			checkedKeys: [],
-			treeData: [],
-			allCheck: true,
-			lastColumsFixed: true,
-			tableHeaders: [],
-			fixNum: 0
-		})
-
-		// 处理数据
-		const filterData = () => {
-			let list = props.tableColumns
-
-			state.checkedKeys = []
-			let arr = []
-			list.forEach((item, index) => {
-				if (!item.key) {
-					item.key = $tool.getUUID()
-				}
-				if (!!item.checked || item.checked == undefined) {
-					state.checkedKeys.push(item.key)
-					arr.push(item)
-				}
-			})
-			state.treeData = list
-			state.tableHeaders = arr
-		}
-
-		onBeforeMount(async () => {
-			window.addEventListener('resize', () => {
-				let isFull =
-					document.mozFullScreen || document.fullScreen || document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled
-				if (isFull === undefined) {
-					isFull = false
-				}
-				if (isFull == false) {
-					$bus.$emit('tableFullScreen', false)
-				}
-			})
-		})
-
-		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.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) => {
-			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) => {
-					if (!item.key) {
-						item.key = $tool.getUUID()
-					}
-					state.checkedKeys.push(item.key)
-				})
-			} else {
-				state.tableHeaders = []
-				state.checkedKeys = []
-			}
-
-			state.treeData.forEach((item) => {
-				item.checked = selected
-			})
-		}
-
-		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) {
-				state.tableHeaders.forEach((item, index) => {
-					if (index < num) {
-						item.fixed = 'left'
-						item.width = item.width ?? '120'
-					}
-				})
-			} else {
-				state.tableHeaders.forEach((item) => {
-					if (item.fixed === 'left') {
-						delete item.fixed
-					}
-				})
-			}
-		}
-
-		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 }) => {}
-
-		return {
-			...toRefs(state),
-			refresh,
-			dayjs,
-			handleChange,
-			handleSelectionChange,
-			handleCurrentChange,
-			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
-		}
-	}
-}
+  name: 'lwTable',
+
+  // 组件属性定义
+  props: {
+    refName: { type: String, default: 'multipleTableRef' }, // 表格ref名称
+    tableName: { type: String, default: '' }, // 表格名称
+    isRadio: { type: Boolean, default: false }, // 是否单选
+    bordered: { type: Boolean, default: true }, // 是否显示边框
+    stripe: { type: Boolean, default: false }, // 是否显示斑马纹
+    summaryMethod: { type: Function, default: () => [] }, // 合计行计算方法
+    rowKey: { type: String, default: 'id' }, // 行数据的唯一标识
+    defaultSelectData: { type: Array, default: () => [] }, // 默认选中的数据
+    searchParams: { type: Object, default: () => ({ page: 1, size: 20 }) }, // 查询参数
+    selectStatus: { type: Function, default: () => true }, // 选择状态判断函数
+    pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] }, // 分页大小选项
+    isShowPagination: { type: Boolean, default: true }, // 是否显示分页
+    tableData: { type: Array, default: [] }, // 表格数据
+    totalCount: { type: Number, default: 0 }, // 数据总数
+    tableColumns: { type: Array, default: [] }, // 表格列配置
+    hoverable: { type: Boolean, default: true }, // 是否启用悬停效果
+    defaultExpandAll: { type: Boolean, default: false }, // 是否默认展开所有行
+    isSetting: { type: Boolean, default: false }, // 是否启用设置功能
+    saveKey: { type: String, default: '' }, // 保存设置的键名
+    orderPage: { type: Boolean, default: false }, // 是否为订单页面
+    tableSize: { type: String, default: 'large' }, // 表格大小 
+    loading: { type: Boolean, default: false }, // 加载状态
+    rowSelection: { type: Boolean, default: false }, // 是否可选择行
+    selectedKeys: { type: Array }, // 选中的键值数组
+    selectDatas: { type: Array }, // 选中的数据数组
+    hideTool: { type: Boolean, default: true }, // 是否隐藏工具栏
+    virtualListProps: { type: Object, default: undefined }, // 虚拟列表属性
+    draggable: { type: Object }, // 拖拽配置
+    maxHeight: { type: String, default: 'calc(100vh - 270px)' } // 最大高度
+  },
+
+  setup(props, context) {
+    // 表格引用
+    const multipleTable = ref()
+
+    // 获取全局实例
+    const { proxy: { $bus, $tool } } = getCurrentInstance()
+
+    // 全屏相关状态
+    const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
+
+    // 响应式状态
+    const state = reactive({
+      dialogVisible: false, // 对话框可见性
+      tableSettingTitle: '选择字段', // 表格设置标题
+      tableHeaderListAll: [], // 所有表头列表
+      checkedList: [], // 已选中列表
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      num: 0, // 计数器
+      endFixed: false, // 是否固定末尾
+      filterHeader: [], // 过滤后的表头
+      tableSize: props.tableSize, // 表格大小
+      checkedKeys: [], // 选中的键
+      treeData: [], // 树形数据
+      allCheck: true, // 是否全选
+      lastColumsFixed: true, // 最后一列是否固定
+      tableHeaders: [], // 表格表头
+      fixNum: 0 // 固定列数量
+    })
+
+    // 过滤数据处理
+    const filterData = () => {
+      let list = props.tableColumns
+      state.checkedKeys = []
+      let arr = []
+      list.forEach((item, index) => {
+        if (!item.key) {
+          item.key = $tool.getUUID()
+        }
+        if (!!item.checked || item.checked == undefined) {
+          state.checkedKeys.push(item.key)
+          arr.push(item)
+        }
+      })
+      state.treeData = list
+      state.tableHeaders = arr
+    }
+
+    // 组件挂载前
+    onBeforeMount(async () => {
+      // 监听窗口大小变化
+      window.addEventListener('resize', () => {
+        let isFull = document.mozFullScreen ||
+          document.fullScreen ||
+          document.webkitIsFullScreen ||
+          document.webkitRequestFullScreen ||
+          document.mozRequestFullScreen ||
+          document.msFullscreenEnabled
+        if (isFull === undefined) {
+          isFull = false
+        }
+        if (isFull == false) {
+          $bus.$emit('tableFullScreen', false)
+        }
+      })
+    })
+
+    // 监听表格列变化
+    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.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 = () => {
+      multipleTable.value.clearSelection()
+    }
+
+    // 表格设置相关方法
+    const handleSelect = (v) => {
+      state.tableSize = v
+    }
+
+    const checkAll = (selected) => {
+      if (selected) {
+        state.tableHeaders = JSON.parse(JSON.stringify(props.tableColumns))
+        state.tableHeaders.forEach((item) => {
+          if (!item.key) {
+            item.key = $tool.getUUID()
+          }
+          state.checkedKeys.push(item.key)
+        })
+      } else {
+        state.tableHeaders = []
+        state.checkedKeys = []
+      }
+
+      state.treeData.forEach((item) => {
+        item.checked = selected
+      })
+    }
+
+    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) {
+        state.tableHeaders.forEach((item, index) => {
+          if (index < num) {
+            item.fixed = 'left'
+            item.width = item.width ?? '120'
+          }
+        })
+      } else {
+        state.tableHeaders.forEach((item) => {
+          if (item.fixed === 'left') {
+            delete item.fixed
+          }
+        })
+      }
+    }
+
+    // 权限检查
+    const checkAuth = (auth) => {
+      const data = JSON.parse(localStorage.getItem('userAuthInfo'))
+      const { menus, authorities } = data
+      if (!auth) return true
+      if (Array.isArray(auth)) {
+        return auth.some((permission) => [...menus, ...authorities].includes(permission))
+      } else if (typeof auth === 'string') {
+        return [...menus, ...authorities].includes(auth)
+      }
+      return false
+    }
+
+    // 操作按钮过滤
+    const filterOperations = (operations, row) => {
+      return operations.filter((o) => (!o?.isShow || o.isShow(row)) && checkAuth(o.auth))
+    }
+
+    return {
+      ...toRefs(state),
+      checkAuth,
+      filterOperations,
+      refresh,
+      dayjs,
+      handleChange,
+      handleSelectionChange,
+      handleCurrentChange,
+      sizeChange,
+      currentChange,
+      multipleTable,
+      toggleRowChange,
+      clearTableSelection,
+      handleSelect,
+      checkAll,
+      tableToggleFullScreen,
+      isFullscreen,
+      treeCheck,
+      fixNumChange,
+      selectedKeysForm,
+      selectGoodsDatas
+    }
+  }
+}