lw-cdp-ui 1.3.3-ui → 1.3.3-ui-beta

package/dist/components/lwSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="search-wrap">
+  <div class="lw-search-card">
     <div class="search-content">
       <el-form ref="searchForm"
                :model="form"
@@ -54,8 +54,7 @@
           </template>
         </el-row>
 
-        <div class="control"
-             :style="{bottom: ((options.length%columnNumber === 0) ? '0px' : '10px')}">
+        <div class="control">
           <el-button class="reset"
                      @click="resetForm('searchForm')">
             {{$t('btn.reset')}}
@@ -344,7 +343,7 @@ export default {
   }
 }
 
-#search-wrap {
+.lw-search-card {
   width: 100%;
   background: var(--color-bg-2);
   // position: relative;
@@ -403,7 +402,7 @@ export default {
     .control {
       position: absolute;
       right: 0;
-      bottom: 0;
+      bottom: 10px;
       z-index: 9;
       display: flex;
       justify-content: flex-end;

package/dist/components/lwTable/index.js

@@ -1,6 +1,8 @@
 import { VueSelecto } from 'vue3-selecto'
 import TableColumn from './components/TableColumn.vue'
 import empty from '@/assets/images/empty.jpg'
+import { useFullscreen } from './useFullscreen'
+const { isFullscreen, toggle: toggleFullScreen } = useFullscreen()
 export default {
 	name: 'lwTable',
 	components: { VueSelecto, TableColumn },
@@ -18,6 +20,7 @@ export default {
 		stripe: { type: Boolean, default: false }, // 是否显示斑马纹
 		hoverable: { type: Boolean, default: true }, // 是否启用鼠标悬停效果
 		maxHeight: { type: String, default: 'calc(100vh - 270px)' }, // 表格最大高度
+		height: { type: String, default: '' }, // 表格高度
 
 		// 选择功能配置
 		rowSelection: { type: Boolean, default: false }, // 是否可选择行
@@ -51,6 +54,7 @@ export default {
 			// 表格基础状态
 			tableHeaders: [], // 表格列配置
 			localTableSize: this.tableSize, // 表格大小
+			tableHeight: this.tableSize, // 表格高度
 
 			// 列设置相关
 			checkedKeys: [], // 选中的列
@@ -109,10 +113,13 @@ export default {
 			immediate: true
 		}
 	},
-
 	created() {
 		// 监听窗口大小变化
 		window.addEventListener('resize', this.handleResize)
+
+    this.$nextTick(() => {
+      this.handleResize()
+    })
 	},
 
 	beforeDestroy() {
@@ -228,9 +235,8 @@ export default {
 		 * 切换全屏显示
 		 */
 		tableToggleFullScreen() {
-			this.$bus.$emit('tableFullScreen', !this.isFullscreen)
 			this.isFullscreen = !this.isFullscreen
-			// 这里需要实现具体的全屏切换逻辑
+			toggleFullScreen()
 		},
 
 		/**
@@ -240,9 +246,15 @@ export default {
 			const isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
 
 			if (!isFull) {
-				this.$bus.$emit('tableFullScreen', false)
 				this.isFullscreen = false
 			}
+
+      // 自动计算稿表格高度
+      const container = document.querySelector('.adminui-main > .el-container')
+			const searchCard = document.querySelector('.lw-search-card')
+			if (container && searchCard) {
+				this.tableHeight =  container.clientHeight - searchCard.clientHeight - 160
+			}
 		},
 		// 拖动选中
 		onSelect({ selected }) {

package/dist/components/lwTable/index.scss

@@ -1,4 +1,4 @@
-.baseTablePage-wrap {
+.lw-table-page {
 	position: relative;
 
 	.icon-more {

package/dist/components/lwTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="baseTablePage-wrap">
+  <div class="lw-table-page">
     <!-- 表格主体 -->
     <el-table v-if="!isCard"
               ref="multipleTable"
@@ -8,7 +8,8 @@
               :data="tableData"
               :row-key="rowKey"
               :max-height="maxHeight"
-              :size="tableSize"
+              :height="height || tableHeight"
+              :size="localTableSize"
               :stripe="stripe"
               :hoverable="hoverable"
               highlight-current-row

package/dist/components/lwTable/useFullscreen.js

@@ -38,16 +38,19 @@ export function useFullscreen() {
 
 	// 全屏切换
 	const toggleFullScreen = () => {
+    console.log(isFullscreen.value)
 		if (isFullscreen.value) {
 			exitFullscreen()
 		} else {
 			enterFullscreen(document.documentElement)
 		}
+    isFullscreen.value = !isFullscreen.value
 	}
 
 	// 检查全屏状态
 	const handleFullscreenChange = () => {
 		isFullscreen.value = Boolean(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+    console.log('--------', isFullscreen.value)
 	}
 
 	// 监听全屏状态变化