完善弹框详情页显示

hookehuyr
Commit 1da6df1573b05282a5d1d6691662419da93b1fcb 1da6df15 1 parent 4fc3e791
Showing 3 changed files with 279 additions and 96 deletions
package.json
src/views/index.vue
yarn.lock
--- a/package.json
View file @1da6df1
+++ b/package.json
View file @1da6df1
@@ -41,7 +41,7 @@
     "@vant/area-data": "^1.3.1",
     "@vant/touch-emulator": "^1.4.0",
     "@vitejs/plugin-legacy": "^1.8.2",
-    "@vueuse/core": "^8.5.0",
+    "@vueuse/core": "^11.0.3",
     "@wsfe/vue-tree": "^3.2.0",
     "animate.css": "^4.1.1",
     "browser-md5-file": "^1.1.1",
--- a/src/views/index.vue
View file @1da6df1
+++ b/src/views/index.vue
View file @1da6df1
 <!--
  * @Date: 2024-07-23 10:34:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-09 13:57:21
+ * @LastEditTime: 2024-09-10 15:21:17
  * @FilePath: /custom_table/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div style="padding: 1rem;">
+  <div class="table-container">
     <el-row justify="space-between">
       <el-col :span="12">
-        <div>
+        <div class="table-tools">
           <el-button type="primary" :icon="Plus">添加</el-button>&nbsp;
-          <el-icon style="vertical-align: middle"><Download /></el-icon>&nbsp;<span style="vertical-align: middle">导入</span>&nbsp;
+          <div class="table-tools-item">
-          <el-icon style="vertical-align: middle"><Upload /></el-icon>&nbsp;<span style="vertical-align: middle">导出</span>&nbsp;
+            <el-icon style="vertical-align: middle"><Download /></el-icon>
-          <el-icon style="vertical-align: middle"><Delete /></el-icon>&nbsp;<span style="vertical-align: middle">删除</span>
+            <span class="table-tools-item-text">导入</span>
+          </div>
+          <div class="table-tools-item">
+            <el-icon style="vertical-align: middle"><Upload /></el-icon>
+            <span class="table-tools-item-text">导出</span>
+          </div>
+          <div class="table-tools-item">
+            <el-icon style="vertical-align: middle"><Delete /></el-icon>
+            <span class="table-tools-item-text">删除</span>
+          </div>
         </div>
       </el-col>
       <el-col :span="12" style="text-align: right;">
           <el-input
             v-model="input3"
-            style="width: 200px"
+            style="width: 200px; margin-right: 1rem;"
             placeholder="搜索数据"
             :prefix-icon="Search"
           />
-          &nbsp;
+          <el-popover :visible="filter_visible" :width="400" placement="bottom-end">
-          <el-popover :visible="visible" placement="bottom">
-            123
-            <span @click="visible = false">关闭</span>
             <template #reference>
               <div class="tooltip-container">
-                <el-icon style="vertical-align: middle" @click="visible = true"><Filter /></el-icon>
+                <el-icon style="vertical-align: middle" @click="filter_visible=true"><Filter /></el-icon>
                 <span class="tooltip-text">筛选条件</span>
               </div>
             </template>
+            <el-form ref="filter_target" :model="form" label-width="auto" style="max-width: 600px">
+              <el-form-item label="字段状态">
+                <el-select v-model="form.status" @visible-change="handleVisibleChange" placeholder="请选择">
+                  <el-option label="状态1" value="type1" />
+                  <el-option label="状态2" value="type2" />
+                </el-select>
+              </el-form-item>
+            </el-form>
           </el-popover>
           &nbsp;
-          <el-tooltip
+          <el-popover trigger="click" placement="bottom-end">
-            class="box-item"
+            <template #reference>
-            effect="dark"
+              <div class="tooltip-container">
-            content="显示字段"
+                <el-icon style="vertical-align: middle"><Operation /></el-icon>
-            placement="bottom"
+                <span class="tooltip-text">显示字段</span>
-          >
+              </div>
-            <el-icon style="vertical-align: middle"><Operation /></el-icon>
+            </template>
-          </el-tooltip>
+            <div>
+              <el-checkbox-group v-model="checkList">
+                <el-checkbox label="全选" value="全选" />
+                <el-checkbox label="Option A" value="Value A" />
+                <el-checkbox label="Option B" value="Value B" />
+                <el-checkbox label="Option C" value="Value C" />
+              </el-checkbox-group>
+            </div>
+          </el-popover>
           &nbsp;
-          <el-tooltip
+          <el-popover trigger="click" :width="400" placement="bottom-end">
-            class="box-item"
+            <template #reference>
-            effect="dark"
+              <div class="tooltip-container">
-            content="排序"
+                <el-icon style="vertical-align: middle"><Sort /></el-icon>
-            placement="bottom"
+                <span class="tooltip-text">排序</span>
-          >
+              </div>
-            <el-icon style="vertical-align: middle"><Sort /></el-icon>
+            </template>
-          </el-tooltip>
+            <div>
+              <div>
+                日期
+                <el-button type="primary" plain size="small" @click="sortBy('asc')">升序</el-button>
+                <el-button type="primary" plain size="small" @click="sortBy('desc')">降序</el-button>
+              </div>
+            </div>
+          </el-popover>
           &nbsp;
-          <el-tooltip
+          <div class="tooltip-container">
-            class="box-item"
+            <el-icon style="vertical-align: middle" @click="refresh"><Refresh /></el-icon>
-            effect="dark"
+            <span class="tooltip-text">刷新</span>
-            content="刷新"
+          </div>
-            placement="bottom"
-          >
-            <el-icon style="vertical-align: middle"><Refresh /></el-icon>
-          </el-tooltip>
           &nbsp;
       </el-col>
     </el-row>
@@ -68,11 +93,18 @@
       :data="tableData" stripe border height="780"
       style="width: 100%; margin: 1rem 0;"
       @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
     >
-      <el-table-column type="selection" width="55" />
+      <el-table-column type="selection" fixed width="55" />
       <el-table-column prop="date" label="Date" width="180" />
       <el-table-column prop="name" label="Name" width="180" />
-      <el-table-column prop="address" label="Address" />
+      <el-table-column prop="address" label="Address" width="380" />
+      <el-table-column prop="text1" label="text1" width="380" />
+      <el-table-column prop="text2" label="text2" width="380" />
+      <el-table-column prop="text3" label="text3" width="380" />
+      <el-table-column prop="text4" label="text4" width="380" />
+      <el-table-column prop="text5" label="text5" width="380" />
     </el-table>
     <el-row justify="space-between">
       <el-col :span="8">
@@ -96,6 +128,7 @@
           :total="400"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
+          style="display: flex; justify-content: center;"
         />
       </el-col>
       <el-col :span="8">
@@ -112,12 +145,42 @@
       </el-col>
     </el-row>
   </div>
+
+  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="70%" modal-class="drawer-modal">
+    <el-row class="drawer-header" style="border-bottom: 1px solid #eee; padding: 1rem;">
+      <el-col :span="12">
+        <span>一行的数据详情页</span>
+      </el-col>
+      <el-col :span="12" style="text-align: right;">
+        <el-icon @click="drawer = false"><Close /></el-icon>
+      </el-col>
+    </el-row>
+    <div class="drawer-tools">
+      <div class="drawer-tools-item">
+        <el-icon style="vertical-align: middle"><CopyDocument /></el-icon>
+        <span class="drawer-tools-item-text">复制</span>
+      </div>
+      <div class="drawer-tools-item">
+        <el-icon style="vertical-align: middle"><Edit /></el-icon>
+        <span class="drawer-tools-item-text">编辑</span>
+      </div>
+      <div class="drawer-tools-item">
+        <el-icon style="vertical-align: middle"><Delete /></el-icon>
+        <span class="drawer-tools-item-text">删除</span>
+      </div>
+    </div>
+    <div class="drawer-iframe">
+      <iframe :src="iframe_src" frameborder="0" class="my_iframe" id="_iframe"></iframe>
+    </div>
+  </el-drawer>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Plus, Download, Upload, Search } from '@element-plus/icons-vue'
+// import { ClickOutside as vClickOutside } from 'element-plus'
+import { onClickOutside } from '@vueuse/core'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -128,8 +191,6 @@ useTitle($route.meta.title);
 const tableData = ref([])
-const visible = ref(false);
-
 const multipleSelection = ref([])
 const handleSelectionChange = (val) => {
   multipleSelection.value = val
@@ -143,9 +204,15 @@ onMounted(() => {
       date: '2016-05-01',
       name: 'Tom',
       address: 'No. 189, Grove St, Los Angeles',
+      text1: '2016-05-01',
+      text2: 'Tom',
+      text3: 'No. 189, Grove St, Los Angeles',
+      text4: 'No. 189, Grove St, Los Angeles',
+      text5: 'No. 189, Grove St, Los Angeles',
     })
   }
-})
+
+});
 const currentPage4 = ref(4)
 const pageSize4 = ref(100)
@@ -157,45 +224,156 @@ const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
 }
-</script>
+const handleCellClick = (row, column, cell, event) => { // 点击单元格
+  // console.warn(row, column, cell, event);
+}
+const handleRowClick = (row, event, column) => {
+  console.warn(row, event, column);
+  drawer.value = true;
+}
+
+const form = ref({
+  status: ''
+})
+
+const filter_visible = ref(false);
+const buttonRef = ref(null);
+const popoverRef = ref(null);
+
+const filter_target = ref(null);
+
+onClickOutside(filter_target, event => {
+  filter_visible.value = false;
+});
+
+const handleVisibleChange = (v) => { // 下拉框出现/隐藏时触发, 不让弹窗消失
+  filter_visible.value = true;
+}
+
+const checkList = ref([]);
-<style lang="less" scoped>
+const refresh = () => {
-.tooltip-container {
+  location.reload();
-  position: relative;
-  display: inline-block;
-  cursor: pointer; /* 悬停时显示手形指针 */
 }
-.tooltip-text {
+const drawer = ref(false);
-  font-size: 0.8rem;
+const iframe_src = ref('https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=16178737121463290737&channelId=1119&toc_style_id=feeds_default&share_to=wechat&track_id=cbcca7b0-6de2-4474-9a9f-96902fbaea50');
-  visibility: hidden;
+
-  background-color: black;
+
-  color: #fff;
+watchEffect(() => {
-  text-align: center;
+  if (drawer.value) {
-  border-radius: 5px;
+    // 强制刷新iframe
-  padding: 5px 10px;
+    nextTick(() => {
-  position: absolute;
+      document.getElementById('_iframe').contentWindow.location.reload(true);
-  z-index: 10;
+      let height = $('.drawer-modal').height();
-  top: 125%; /* 使 tooltip 位于触发元素下方 */
+      let header_height = $('.drawer-header').height();
-  left: 50%;
+      let tools_height = $('.drawer-tools').height();
-  transform: translateX(-50%);
+      // 动态计算高度
-  opacity: 0;
+      $('.drawer-iframe').height(height - header_height - tools_height);
-  transition: opacity 0.3s;
+      $('#_iframe').height(height - header_height - tools_height);
-  white-space: nowrap; /* 防止文字换行 */
+    });
-  &::after {
+  }
-    content: "";
+})
+</script>
+
+<style lang="less">
+.table-container {
+  padding: 1rem;
+  .table-tools {
+    display: flex;
+    .table-tools-item {
+      margin-right: 0.5rem;
+      padding: 0.25rem 0.5rem;
+      &:hover {
+        cursor: pointer;
+        background-color: #eee;
+        padding: 0.25rem 0.5rem;
+        border-radius: 5px;
+      }
+      .table-tools-item-text {
+        vertical-align: middle;
+        font-size: 0.85rem;
+        margin-left: 0.25rem;
+      }
+    }
+  }
+  .tooltip-container {
+    position: relative;
+    display: inline-block;
+    cursor: pointer; /* 悬停时显示手形指针 */
+    margin: 0 0.25rem;
+  }
+
+  .tooltip-text {
+    font-size: 0.8rem;
+    visibility: hidden;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px 10px;
     position: absolute;
-    top: -10px; /* 三角形放在 Tooltip 上方 */
+    z-index: 100;
+    top: 125%; /* 使 tooltip 位于触发元素下方 */
     left: 50%;
     transform: translateX(-50%);
-    border-width: 5px;
+    opacity: 0;
-    border-style: solid;
+    transition: opacity 0.3s;
-    border-color: transparent transparent black transparent; /* 创建黑色的小三角形 */
+    white-space: nowrap; /* 防止文字换行 */
+    &::after {
+      content: "";
+      position: absolute;
+      top: -10px; /* 三角形放在 Tooltip 上方 */
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent transparent black transparent; /* 创建黑色的小三角形 */
+    }
   }
+
+  .tooltip-container:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+  }
+
 }
-.tooltip-container:hover .tooltip-text {
+.my_iframe {
-  visibility: visible;
+  width: 70%;
-  opacity: 1;
+}
+
+.drawer-modal {
+  .el-drawer__body {
+    padding: 0 !important;
+  }
+  .drawer-header {
+  }
+  .drawer-tools {
+    border-bottom: 1px solid #eee;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    display: flex;
+    .drawer-tools-item {
+      margin-right: 0.5rem;
+      padding: 0.25rem 0.5rem;
+      &:hover {
+        cursor: pointer;
+        background-color: #eee;
+        padding: 0.25rem 0.5rem;
+        border-radius: 5px;
+      }
+      .drawer-tools-item-text {
+        vertical-align: middle;
+        font-size: 0.85rem;
+        margin-left: 0.25rem;
+      }
+    }
+  }
+  .drawer-iframe {
+    height: 100vh;
+    position: fixed;
+    width: 100%;
+  }
 }
 </style>
--- a/yarn.lock
View file @1da6df1
+++ b/yarn.lock
View file @1da6df1
@@ -468,16 +468,16 @@
   resolved "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz"
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
-"@types/web-bluetooth@^0.0.14":
-  version "0.0.14"
-  resolved "https://mirrors.cloud.tencent.com/npm/@types%2fweb-bluetooth/-/web-bluetooth-0.0.14.tgz"
-  integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
-
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
   resolved "https://mirrors.cloud.tencent.com/npm/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@types/yauzl@^2.9.1":
   version "2.10.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@types%2fyauzl/-/yauzl-2.10.0.tgz"
@@ -737,15 +737,15 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.4.29.tgz"
   integrity sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==
-"@vueuse/core@^8.5.0":
+"@vueuse/core@^11.0.3":
-  version "8.9.4"
+  version "11.0.3"
-  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse%2fcore/-/core-8.9.4.tgz"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/core/-/core-11.0.3.tgz#e5fb5aa6580c6e505cecea43518fcb66cb56a3ef"
-  integrity sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==
+  integrity sha512-RENlh64+SYA9XMExmmH1a3TPqeIuJBNNB/63GT35MZI+zpru3oMRUA6cEFr9HmGqEgUisurwGwnIieF6qu3aXw==
   dependencies:
-    "@types/web-bluetooth" "^0.0.14"
+    "@types/web-bluetooth" "^0.0.20"
-    "@vueuse/metadata" "8.9.4"
+    "@vueuse/metadata" "11.0.3"
-    "@vueuse/shared" "8.9.4"
+    "@vueuse/shared" "11.0.3"
-    vue-demi "*"
+    vue-demi ">=0.14.10"
 "@vueuse/core@^9.1.0":
   version "9.13.0"
@@ -757,22 +757,22 @@
     "@vueuse/shared" "9.13.0"
     vue-demi "*"
-"@vueuse/metadata@8.9.4":
+"@vueuse/metadata@11.0.3":
-  version "8.9.4"
+  version "11.0.3"
-  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse%2fmetadata/-/metadata-8.9.4.tgz"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/metadata/-/metadata-11.0.3.tgz#f3f20066fb5217df24614de92162b65c24475e1b"
-  integrity sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==
+  integrity sha512-+FtbO4SD5WpsOcQTcC0hAhNlOid6QNLzqedtquTtQ+CRNBoAt9GuV07c6KNHK1wCmlq8DFPwgiLF2rXwgSHX5Q==
 "@vueuse/metadata@9.13.0":
   version "9.13.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
   integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
-"@vueuse/shared@8.9.4":
+"@vueuse/shared@11.0.3":
-  version "8.9.4"
+  version "11.0.3"
-  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse%2fshared/-/shared-8.9.4.tgz"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/shared/-/shared-11.0.3.tgz#0e5519dcdc9ac0c6fc831c105a9e7ba7bda98628"
-  integrity sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==
+  integrity sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==
   dependencies:
-    vue-demi "*"
+    vue-demi ">=0.14.10"
 "@vueuse/shared@9.13.0":
   version "9.13.0"
@@ -3930,6 +3930,11 @@ vue-demi@*, vue-demi@latest:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.4.tgz"
   integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
+vue-demi@>=0.14.10:
+  version "0.14.10"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
+
 vue-esign@^1.1.4:
   version "1.1.4"
   resolved "https://mirrors.cloud.tencent.com/npm/vue-esign/-/vue-esign-1.1.4.tgz"