lw-cdp-ui 1.2.34 → 1.2.35

package/dist/components/lwSearch/select/select.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-select :disabled="item.disabled" :placeholder="item.label || '请选择'" :popper-append-to-body="item.appendToBody" v-model="value" clearable filterable :multiple="item.multiple" collapse-tags allow-search size="" style="width: 100%;">
+    <el-select :disabled="item.disabled" :placeholder="item.label || '请选择'" :popper-append-to-body="item.appendToBody" v-model="value" clearable filterable :multiple="item.multiple" collapse-tags allow-search size="" style="width: 100%;" :allow-create="item.allowCreate">
       <el-option v-for="(items, index) in item.options" :disabled="items.disabled" :key="item.key ? item.key : item.valueKey ? items[item.valueKey] + items[item.labelKey] + index : items.code + items.name + index" :label="item.isCodeAndName ? ((item.valueKey ? items[item.valueKey] : items.code) + ' - ' + (item.labelKey ? items[item.labelKey] : items.name)) : (item.labelKey ? items[item.labelKey] : items.name)" :value="item.valueKey ? items[item.valueKey] : items.code">
         <el-tooltip :content="item.isCodeAndName ? ((item.valueKey ? items[item.valueKey] : items.code) + ' - ' + (item.labelKey ? items[item.labelKey] : items.name)) : (item.labelKey ? items[item.labelKey] : items.name)">
           <span>{{ item.isCodeAndName ? ((item.valueKey ? items[item.valueKey] : items.code) + ' - ' + (item.labelKey ? items[item.labelKey] : items.name)) : (item.labelKey ? items[item.labelKey] : items.name) }}</span>

package/dist/components/lwTable/index.js

@@ -1,285 +1,273 @@
-import { useFullscreen } from './useFullscreen'
-import { onBeforeMount, reactive, ref, watch, toRefs, getCurrentInstance } from 'vue'
-import dayjs from 'dayjs'
-
 export default {
   name: 'lwTable',
-
-  // 组件属性定义
   props: {
-    refName: { type: String, default: 'multipleTableRef' }, // 表格ref名称
+    // 表格基础配置
+    refName: { type: String, default: 'multipleTableRef' }, // 表格的 ref 名称
     tableName: { type: String, default: '' }, // 表格名称
-    isRadio: { type: Boolean, default: false }, // 是否单选
+    tableData: { type: Array, default: () => [] }, // 表格数据
+    tableColumns: { type: Array, default: () => [] }, // 表格列配置
+    loading: { type: Boolean, default: false }, // 加载状态
+    tableSize: { type: String, default: 'large' }, // 表格尺寸
+
+    // 表格样式配置
     bordered: { type: Boolean, default: true }, // 是否显示边框
     stripe: { type: Boolean, default: false }, // 是否显示斑马纹
-    summaryMethod: { type: Function, default: () => [] }, // 合计行计算方法
-    rowKey: { type: String, default: 'id' }, // 行数据的唯一标识
+    hoverable: { type: Boolean, default: true }, // 是否启用鼠标悬停效果
+    maxHeight: { type: String, default: 'calc(100vh - 270px)' }, // 表格最大高度
+
+    // 选择功能配置
+    rowSelection: { type: Boolean, default: false }, // 是否可选择行
+    isRadio: { type: Boolean, default: false }, // 是否为单选模式
+    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] }, // 分页大小选项
+    selectedKeys: { type: Array }, // 选中的行 key 值
+    selectDatas: { type: Array }, // 选中的行数据
+    selectStatus: { type: Function, default: () => true }, // 选择状态回调
+
+    // 分页配置
     isShowPagination: { type: Boolean, default: true }, // 是否显示分页
-    tableData: { type: Array, default: [] }, // 表格数据
-    totalCount: { type: Number, default: 0 }, // 数据总数
-    tableColumns: { type: Array, default: [] }, // 表格列配置
-    hoverable: { type: Boolean, default: true }, // 是否启用悬停效果
+    searchParams: { type: Object, default: () => ({ page: 1, size: 20 }) }, // 查询参数
+    totalCount: { type: Number, default: 0 }, // 总数据条数
+    pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] }, // 分页可选条数
+
+    // 高级功能配置
     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 }, // 选中的数据数组
+    virtualListProps: { type: Object, default: undefined }, // 虚拟滚动配置
+    summaryMethod: { type: Function, default: () => [] }, // 自定义合计方法
     hideTool: { type: Boolean, default: true }, // 是否隐藏工具栏
-    virtualListProps: { type: Object, default: undefined }, // 虚拟列表属性
-    draggable: { type: Object }, // 拖拽配置
-    maxHeight: { type: String, default: 'calc(100vh - 270px)' } // 最大高度
+    isSetting: { type: Boolean, default: false }, // 是否显示列设置
+    saveKey: { type: String, default: '' }, // 本地存储 key，用于保存表格配置
+    draggable: { type: Object } // 是否可拖拽列配置
   },
 
-  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: [], // 树形数据
+  data() {
+    return {
+      // 表格基础状态
+      tableHeaders: [], // 表格列配置
+      localTableSize: this.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
-    }
+      fixNum: 0, // 固定列数量
 
-    // 组件挂载前
-    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 })
+      // 选择相关
+      selectedKeysForm: [], // 选中的键
+      selectGoodsDatas: [], // 选中的数据
+      selectAllGoods: [], // 所有可选数据
 
-    // 表格功能方法
-    const handleChange = (currentData) => {
-      context.emit('draggable', currentData)
+      // 全屏相关
+      isFullscreen: false
     }
+  },
 
-    const handleSelectionChange = (val) => {
-      context.emit('multipleSelection', val)
-    }
+  watch: {
+    tableColumns: {
+      handler() {
+        this.filterData()
+      },
+      deep: true,
+      immediate: true
+    },
 
-    const handleCurrentChange = (val) => {
-      context.emit('currentChange', val)
-    }
+    tableData: {
+      handler(newVal) {
+        // 合并去重数据
+        const mergedData = [...newVal, ...this.selectAllGoods]
+        const uniqueData = Array.from(new Set(mergedData.map(item => item[this.rowKey])))
+          .map(id => mergedData.find(item => item[this.rowKey] === id))
+        this.selectAllGoods = uniqueData
+      },
+      deep: true,
+      immediate: true
+    },
 
-    const sizeChange = (val) => {
-      props.searchParams.size = val
-      context.emit('getTableData')
-    }
+    selectedKeys: {
+      handler(newVal) {
+        if (!newVal) return
 
-    const currentChange = (page) => {
-      props.searchParams.page = page - 1
-      context.emit('getTableData', props.searchParams.page)
-    }
+        this.selectedKeysForm = newVal
+        this.selectGoodsDatas = []
 
-    const refresh = () => {
-      currentChange(1)
-    }
+        if (this.selectAllGoods.length) {
+          const selectedData = this.selectAllGoods.filter(item => newVal.includes(item[this.rowKey]))
+          const mergedData = [...selectedData, ...this.selectGoodsDatas]
+          const uniqueData = Array.from(new Set(mergedData.map(item => item[this.rowKey])))
+            .map(id => mergedData.find(item => item[this.rowKey] === id))
 
-    // 表格行选择方法
-    const toggleRowChange = (row, status) => {
-      multipleTable.value.toggleRowSelection(row, status)
+          this.selectGoodsDatas = uniqueData
+          this.$emit('update:selectDatas', uniqueData)
+        }
+      },
+      deep: true,
+      immediate: true
     }
+  },
 
-    const clearTableSelection = () => {
-      multipleTable.value.clearSelection()
-    }
+  created() {
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize)
+  },
 
-    // 表格设置相关方法
-    const handleSelect = (v) => {
-      state.tableSize = v
-    }
+  beforeDestroy() {
+    // 移除事件监听
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    /**
+     * 过滤和处理表格列配置
+     */
+    filterData() {
+      const columns = this.tableColumns
+      this.checkedKeys = []
+      const visibleColumns = []
+
+      columns.forEach(column => {
+        if (!column.key) {
+          column.key = this.$tool.getUUID()
+        }
+
+        if (column.checked === undefined || column.checked) {
+          this.checkedKeys.push(column.key)
+          visibleColumns.push(column)
+        }
+      })
+
+      this.treeData = columns
+      this.tableHeaders = visibleColumns
+    },
 
-    const checkAll = (selected) => {
+    /**
+     * 全选/取消全选所有列
+     */
+    checkAll(selected) {
       if (selected) {
-        state.tableHeaders = JSON.parse(JSON.stringify(props.tableColumns))
-        state.tableHeaders.forEach((item) => {
-          if (!item.key) {
-            item.key = $tool.getUUID()
+        this.tableHeaders = JSON.parse(JSON.stringify(this.tableColumns))
+        this.checkedKeys = this.tableHeaders.map(col => {
+          if (!col.key) {
+            col.key = this.$tool.getUUID()
           }
-          state.checkedKeys.push(item.key)
+          return col.key
         })
       } else {
-        state.tableHeaders = []
-        state.checkedKeys = []
+        this.tableHeaders = []
+        this.checkedKeys = []
       }
 
-      state.treeData.forEach((item) => {
-        item.checked = selected
+      this.treeData.forEach(col => {
+        col.checked = selected
       })
-    }
+    },
 
-    const treeCheck = () => {
-      let list = state.treeData.filter((t) => state.checkedKeys.includes(t.key))
-      state.tableHeaders = list
-    }
+    /**
+     * 更新列的选中状态
+     */
+    treeCheck() {
+      this.tableHeaders = this.treeData.filter(col =>
+        this.checkedKeys.includes(col.key)
+      )
+    },
 
-    // 全屏切换
-    const tableToggleFullScreen = () => {
-      $bus.$emit('tableFullScreen', !isFullscreen.value)
-      toggleFullScreen()
-    }
+    /**
+     * 处理行变化
+     */
+    handleChange(currentData) {
+      this.$emit('draggable', currentData)
+    },
 
-    // 固定列设置
-    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
-          }
-        })
+    /**
+     * 处理选择变化
+     */
+    handleSelectionChange(val) {
+      this.$emit('multipleSelection', val)
+    },
+
+    /**
+     * 处理当前行变化
+     */
+    handleCurrentChange(val) {
+      this.$emit('currentChange', val)
+    },
+
+    /**
+     * 处理每页条数变化
+     */
+    sizeChange(val) {
+      this.searchParams.size = val
+      this.$emit('getTableData')
+    },
+
+    /**
+     * 处理页码变化
+     */
+    currentChange(page) {
+      this.searchParams.page = page - 1
+      this.$emit('getTableData', this.searchParams.page)
+    },
+
+    /**
+     * 刷新表格数据
+     */
+    refresh() {
+      this.currentChange(1)
+    },
+
+    /**
+     * 处理表格大小变化
+     */
+    handleSelect(v) {
+      this.localTableSize = v
+    },
+
+    /**
+     * 切换全屏显示
+     */
+    tableToggleFullScreen() {
+      this.$bus.$emit('tableFullScreen', !this.isFullscreen)
+      this.isFullscreen = !this.isFullscreen
+      // 这里需要实现具体的全屏切换逻辑
+    },
+
+    /**
+     * 处理窗口大小变化
+     */
+    handleResize() {
+      const isFull = document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+
+      if (!isFull) {
+        this.$bus.$emit('tableFullScreen', false)
+        this.isFullscreen = false
       }
-    }
+    },
+
+    /**
+     * 过滤列表操作按钮
+     */
+    filterOperations(operations, row) {
+      return operations?.filter(o => {
+        const hasAuth = !o.auth || this.checkAuth(o.auth)
+        const isVisible = !o.isShow || o.isShow(row)
+        return hasAuth && isVisible
+      }) || []
+    },
+
+    /**
+     * 检查权限
+     */
+    checkAuth(auth) {
+      const { menus = [], authorities = [] } = JSON.parse(localStorage.getItem('userAuthInfo') || '{}')
+      const allPermissions = [...menus, ...authorities]
 
-    // 权限检查
-    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 auth.some(permission => allPermissions.includes(permission))
       }
-      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
+      return allPermissions.includes(auth)
     }
   }
 }

package/dist/components/lwTable/index.scss

@@ -10,6 +10,7 @@
 	.tool-block {
 		display: flex;
 		gap: 10px;
+		margin-top: 10px;
 		.icon-sync {
 			font-size: 20px;
 			vertical-align: middle;