feat: table-pro 放大功能

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./logo.ico">
-    <link rel="manifest" href="/manifest.json">
+    <!-- <link rel="manifest" href="/manifest.json"> -->
     <title>蛟龙云联</title>
     <style type="text/css">
       .icon {
@@ -16,6 +16,7 @@
          /* background-color: azure; */
       }
       #app {
+
         /* width: 100vw;
         height: 100vh;
         display: flex;
@@ -38,13 +39,13 @@
 
     <script>
 
-      if ('serviceWorker' in navigator && 'PushManager' in window) {
-        navigator.serviceWorker.register('/path/to/service-worker.js').then(function(registration) {
-          console.log('Service Worker 注册成功:', registration);
-        }).catch(function(error) {
-          console.error('Service Worker 注册失败:', error);
-        });
-      }
+      // if ('serviceWorker' in navigator && 'PushManager' in window) {
+      //   navigator.serviceWorker.register('/path/to/service-worker.js').then(function(registration) {
+      //     console.log('Service Worker 注册成功:', registration);
+      //   }).catch(function(error) {
+      //     console.error('Service Worker 注册失败:', error);
+      //   });
+      // }
 
     </script>
   </body>

src/App.vue

@@ -7,6 +7,9 @@
     >
       <router-view/>
     </a-config-provider>
+    <div id="teleport-full-container" >
+
+    </div>
 </template>
 <script setup lang="ts" >
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
@@ -19,10 +22,28 @@ dayjs.locale('zh-cn')
 
 const designStore = useDesignStore()
 
+function closeTeleport () {
+  // console.log(this)
+}
 // theme.defaultAlgorithm
 
 </script>
 <style lang="less">
 @import '~@/styles/theme.less';
 
+#teleport-full-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+    pointer-events: 'none'
+
+}
+
 </style>

src/components/TableProV2/index.tsx

@@ -1,13 +1,10 @@
 import {
-  TableColumnProps, Table, Row, Col, Space, Tooltip, Dropdown, Menu,
-  Button, DropdownButton, PaginationProps
+  TableColumnProps, Table, Row, Col, Space, Dropdown, Menu,
+  Button, DropdownButton
 } from 'ant-design-vue'
 import { DownOutlined, CheckOutlined } from '@ant-design/icons-vue'
 import {
-  PropType, computed, defineComponent, reactive, ref, defineEmits, FunctionalComponent,
-  onMounted,
-  toRefs,
-  watch
+  PropType, computed, defineComponent, ref, onMounted, toRefs, Teleport, cloneVNode
 } from 'vue'
 
 /**
@@ -84,17 +81,29 @@ const TablePro = defineComponent({
       paginationRef.value.pageSize = pageSize
     }
 
-    const changeColumnActive = (index: number) => {
-      columnsPro.value[index]._active = !columnsPro.value[index]._active
-    }
+    const pureVisible = ref(true)
 
     onMounted(() => {
       service && dispatchRequest()
     })
 
+    const pure = () => {
+      pureVisible.value = false
+
+      const pureNode = document.getElementById('teleport-full-container')
+      pureNode!.style.zIndex = '1000'
+      const close = () => {
+        pureVisible.value = true
+        pureNode!.style.zIndex = '-1'
+        pureNode?.removeEventListener('click', close)
+      }
+      pureNode?.addEventListener('click', close)
+    }
+
     const opraMeun = (
       <Menu>
         <Menu.Item key={0} onClick={() => ctx.emit('add')} > 新增 </Menu.Item>
+        <Menu.Item key={1} onClick={() => pure()} > 放大 </Menu.Item>
       </Menu>
     )
 
@@ -102,61 +111,64 @@ const TablePro = defineComponent({
 
     return () => (
 
-      <Row style={{ width: '100%' }} >
-        <Col span={24} >
-          <Row style={{ width: '100%' }} >
-            <Col span={12} >
-              {ctx.slots.search?.()}
-            </Col>
-            <Col span={12} style={{ display: 'flex', justifyContent: 'end' }} >
-              <Space>
-              <Dropdown
-                  onUpdate:open={ () => columnsProPlanVisible.value = !columnsProPlanVisible.value }
-                  open={ columnsProPlanVisible.value}
-                  overlay={
-                    <Menu
-                    >
-                      {
-                        columnsPro.value.map((column, index) =>
-                        <Menu.Item key={column.key} onClick={ () => column._active = !column._active } >
-                          <Row gutter={[8, 8]} justify='space-between' >
-                            <Col>{column.title}</Col>
-                            <Col>{column._active ? <CheckOutlined /> : null}</Col>
-                          </Row>
-                        </Menu.Item>
-                        )
-                      }
-                    </Menu>
-                  }
-                >
-                  <Button type={ hiddenMeunKeys.value.length !== 1 ? 'default' : 'primary'} >筛选 { hiddenMeunKeys.value.length !== 1 ? <DownOutlined /> : null }</Button>
-              </Dropdown>
-              <Dropdown
-                  trigger={['click', 'hover']}
-                  overlay={ hiddenMeunKeys.value.length !== 1 ? opraMeun : null}
-                >
-                  <Button onClick={() => reload()} type={ hiddenMeunKeys.value.length !== 1 ? 'default' : 'primary'} >刷新 { hiddenMeunKeys.value.length !== 1 ? <DownOutlined /> : null }</Button>
-              </Dropdown>
-              </Space>
-            </Col>
-          </Row>
-        </Col>
-        <Col span={24} >
-          <Table
-            style={{ marginTop: '20px' }}
-            columns={columnsPro.value.filter(item => item._active)}
-            loading={loading.value}
-            pagination={ typeof pagination === 'boolean' ? pagination : { ...paginationRef.value, onChange: onChangePage }}
-            dataSource={dataSource.value}
-            v-slots={{
-              bodyCell (scope) {
-                return ctx.slots.render?.({ column: scope.column, record: scope.record })
-              }
-            }}
-          >
-          </Table>
-        </Col>
-      </Row>
+        <Row style={{ width: '100%' }} >
+          <Col span={24} >
+            <Row style={{ width: '100%' }} >
+              <Col span={12} >
+                {ctx.slots.search?.()}
+              </Col>
+              <Col span={12} style={{ display: 'flex', justifyContent: 'end' }} >
+                <Space>
+                <DropdownButton
+                    onUpdate:open={ () => columnsProPlanVisible.value = !columnsProPlanVisible.value }
+                    open={ columnsProPlanVisible.value}
+                    overlay={
+                      <Menu
+                      >
+                        {
+                          columnsPro.value.map(column =>
+                          <Menu.Item key={column.key} onClick={ () => column._active = !column._active } >
+                            <Row gutter={[8, 8]} justify='space-between' >
+                              <Col>{column.title}</Col>
+                              <Col>{column._active ? <CheckOutlined /> : null}</Col>
+                            </Row>
+                          </Menu.Item>
+                          )
+                        }
+                      </Menu>
+                    }
+                  >
+                  筛选
+                </DropdownButton>
+                <DropdownButton
+                    trigger={['click', 'hover']}
+                    overlay={ hiddenMeunKeys.value.length !== 1 ? opraMeun : null}
+                  >
+                    <div onClick={() => reload()} >刷新 </div>
+                </DropdownButton>
+                </Space>
+              </Col>
+            </Row>
+          </Col>
+          <Col span={24} >
+
+          <Teleport disabled={pureVisible.value} to="#teleport-full-container" >
+            <Table
+              style={{ marginTop: '20px', width: pureVisible.value ? '100%' : '100vw', cursor: 'not-allowed' }}
+              columns={columnsPro.value.filter(item => item._active)}
+              loading={loading.value}
+              pagination={ typeof pagination === 'boolean' ? pagination : { ...paginationRef.value, onChange: onChangePage }}
+              dataSource={columnsPro.value.filter(item => item._active).length ? dataSource.value : []}
+              v-slots={{
+                bodyCell (scope) {
+                  return ctx.slots.render?.({ column: scope.column, record: scope.record })
+                }
+              }}
+            >
+            </Table>
+            </Teleport>
+          </Col>
+        </Row>
 
     )
   }