From 1d662c1648aeeff4b1bfdadb619cdba922740348 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 28 九月 2022 15:14:26 +0800
Subject: [PATCH] 1.头部搜索栏、下拉箭头优化

---
 src/views/xtsz/cjgg.vue |   64 +++++++++++++++++++-------------
 1 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/views/xtsz/cjgg.vue b/src/views/xtsz/cjgg.vue
index 337d2d1..23fa776 100644
--- a/src/views/xtsz/cjgg.vue
+++ b/src/views/xtsz/cjgg.vue
@@ -10,12 +10,12 @@
         <el-form
           ref="form"
           :model="form"
-          label-width="80px"
+          label-width="100px"
           inline
           style="display: flex;justify-content: space-between"
         >
           <div class="elForm">
-            <el-form-item label="鎵ц杞﹂棿" style=" display: flex;">
+            <el-form-item label="鎵ц杞﹂棿" label-width="70px" style=" display: flex;">
               <el-select v-model="form.wkspcode" style="width: 200px" placeholder="璇烽�夋嫨">
                 <el-option
                   v-for="item in wkspSelectArr"
@@ -41,7 +41,7 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="鍏憡绛夌骇" style=" display: flex;">
+            <el-form-item v-show="isExpandForm" label-width="70px" label="鍏憡绛夌骇" style=" display: flex;">
               <el-select v-model="form.level" style="width: 200px" placeholder="璇烽�夋嫨">
                 <el-option
                   v-for="item in levelSelectArr"
@@ -52,20 +52,39 @@
               </el-select>
             </el-form-item>
           </div>
-          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
+          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened?'5%':'10%'}">
             <el-button type="primary" icon="el-icon-search" @click="search">鏌ヨ</el-button>
             <el-button type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button>
           </div>
         </el-form>
+        <div
+          class="bodyTopFormExpand"
+        >
+          <svg-icon
+            v-show="mouseHoverType==='mouseout'"
+            style="cursor: pointer"
+            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
+            @mouseenter="mouseHoverType=$event.type"
+          />
+          <svg-icon
+            v-show="mouseHoverType==='mouseenter'"
+            style="cursor: pointer"
+            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
+            @click="isExpandForm=!isExpandForm"
+            @mouseout="mouseHoverType=$event.type"
+          />
+        </div>
       </div>
 
       <div class="elTableDiv">
         <el-table
+          ref="tableDataRef"
+          class="tableFixed"
           :data="tableData"
-          :height="tableHeight+'px'"
+          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
           border
           :row-class-name="tableRowClassName"
-          :style="{width: 100+'%',height:tableHeight+'px',}"
+          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
           highlight-current-row
           :header-cell-style="this.$headerCellStyle"
           :cell-style="this.$cellStyle"
@@ -240,32 +259,15 @@
 import { SystemAnnouncementAddUpdate, SystemAnnouncementDelete, SystemAnnouncementSearch } from '@/api/xtsz'
 import { ShopSearch } from '@/api/dzkb'
 
-const SER_HZ = /^[\u4e00-\u9fa5]+$/
 export default {
   name: 'Zzjg',
   components: {
     Pagination, ImportPicker
   },
   data() {
-    const validateName = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error('璇疯緭鍏ョ紪鐮�'))
-      } else {
-        if (SER_HZ.test(value)) {
-          return callback(new Error('缂栫爜涓嶈兘涓轰腑鏂�'))
-        } else {
-          callback()
-        }
-      }
-    }
-    const validateTypeCode = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error('璇烽�夋嫨涓婄骇'))
-      } else {
-        callback()
-      }
-    }
     return {
+      mouseHoverType: 'mouseout',
+      isExpandForm: false,
       mainHeight: 0,
       tableHeight: 0,
       form: {
@@ -476,7 +478,8 @@
     getHeight() {
       this.$nextTick(() => {
         this.mainHeight = window.innerHeight - 85
-        this.tableHeight = this.mainHeight - 200
+        this.tableHeight = this.mainHeight - 255
+        this.$refs.tableDataRef.doLayout()
       })
     },
     tableRowClassName({ row, rowIndex }) {
@@ -585,6 +588,15 @@
   align-items: center;
   justify-content: center;
 }
+
+.tableFixed{
+  ::v-deep .el-table__fixed-right{
+    height: 100% !important;
+  }
+  ::v-deep .el-table__fixed{
+    height: 100% !important;
+  }
+}
 </style>
 <style>
 

--
Gitblit v1.9.3