多维查询折叠展开

src/assets/styles/form.scss

@@ -81,6 +81,7 @@
 }
 .formWrap{
   width:70%;
+  transition: width 0.3s ease-out;
   background: #FFFFFF;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
   opacity: 1;

src/components/dwcx/form_components.vue

 <template>
   <div style="width: 100%">
-    <div class="formWrap">
+    <div class="formWrap" :style="{width: isClose ? '70%' : '95%' }">
       <div>
         <span
           style="
@@ -189,14 +189,16 @@
       element-loading-background="rgba(0,0,0,.8)"
       style="
         position: fixed;
-        right: 20px;
-        width: 370px;
+        right: 0px;
+        width: 438px;
         z-index: 999;
         width: 23%;
+        transition: width 0.3s ease-out
       "
-      :style="{ top: marginTop + 'px' }"
+      :style="{ top: marginTop + 'px',width: isClose ? '438px' : 0 }"
     >
-      <el-card class="box-card">
+      <div class="tizi" @click="handleCollapse"><i :class="isClose ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></div>
+      <el-card class="box-card" style="height: 600px">
         <div slot="header" class="clearfix">
           <el-badge :value="total" class="item">
             <span>模型列表</span>
@@ -353,9 +355,14 @@ export default {
       waitXyrxxField: [],
       waitFlxxField: [],
       type: this.fieldType,
+      isClose:true
     };
   },
   methods: {
+    handleCollapse(){
+      this.isClose = !this.isClose
+      this.$emit('handleCollapse',this.isClose)
+    },
     handleCurrentChange(val) {
       this.page = val;
       this.getCx();
@@ -824,4 +831,46 @@ export default {
 .cardClass:hover {
   /*border: 1px solid #055fe7;*/
 }
+.tizi {
+  width: 80px;
+  height: 20px;
+  background-color: #fff;
+  box-shadow: 0 2px -1px 0 rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 50%;
+  transform: rotate(-90deg) translateX(50%);
+  left: -48px;
+  i {
+    position: absolute;
+    font-size: 20px;
+    left: 36%;
+    top: 2px;
+  }
+}
+.tizi::before {
+  content: "";
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  left: -20px;
+  top: -20px;
+  border-top: 20px solid rgba(0, 0, 0, 0);
+  border-left: 20px solid rgba(0, 0, 0, 0);
+  border-right: 20px solid rgba(0, 0, 0, 0);
+  border-bottom: 20px solid #fff;
+  border-radius: 5px;
+}
+.tizi::after {
+  content: "";
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  right: -20px;
+  top: -20px;
+  border-top: 20px solid rgba(0, 0, 0, 0);
+  border-left: 20px solid rgba(0, 0, 0, 0);
+  border-right: 20px solid rgba(0, 0, 0, 0);
+  border-bottom: 20px solid #fff;
+  border-radius: 5px;
+}
 </style>

src/components/dwcx/table_components.vue

 <template>
   <div class="tableList">
-    <div class="formWrap"
+    <div class="formWrap" :style="{width: isClose ? '70%' : '95%' }"
          v-show="flxxList.length!=0">
       <div class="sxWrap">
         <div class="cxjgsxTitle">查询结果筛选</div>
@@ -117,7 +117,7 @@
         </div>
       </div>
     </div>
-    <div class="formWrap">
+    <div class="formWrap" :style="{width: isClose ? '70%' : '95%' }">
       <el-row>
         <el-col :span="24">
           <span class="flTtitle">{{listTitle}}查询结果</span>
@@ -418,7 +418,8 @@ export default {
     tPages: Number,
     tableType: String,
     pageNum: Number,
-    tableLoadingEmit: Boolean
+    tableLoadingEmit: Boolean,
+    isClose: Boolean
   },
   data() {
     return {

src/views/dwcx/index.vue

@@ -37,6 +37,7 @@
         @closeLoading="closeLoading"
         @closeInitLoading="closeInitLoading"
         @getselectList="getselectList"
+        @handleCollapse='handleCollapse'
       ></list-form>
       <list-table
         ref="listTable"
@@ -60,6 +61,7 @@
         :radioFZt="radioFZt"
         :radioSZt="radioSZt"
         :radioTZt="radioTZt"
+        :isClose='isClose'
         @getLoading="getLoading"
         @getPage="getPage"
         @getSort="getSort"
@@ -130,6 +132,7 @@ export default {
   },
   data() {
     return {
+      isClose:true, //是否折叠
       tPage: null,
       resultLoading: true,
       deleteId: "",
@@ -272,6 +275,9 @@ export default {
     },
   },
   methods: {
+    handleCollapse(){
+      this.isClose = !this.isClose
+    },
     getselectList(data) {
       this.selectList = data;
     },