第二次提交

mh-two-thousand-and-two

2024-03-29 d27fbd63d7840787d7f3ca5333b6e24dc3a860d4

 pages/knowledgeBase/knowledgeBase.vue

@@ -3,48 +3,184 @@
      <!-- 顶部 -->
      <headNav />
      <!-- 搜索 -->
      <view class="" style="margin: 20rpx 0;">
      <view class="flex flex-center" style="margin: 20rpx 0;">
         <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search>
         <view class="" @click="isAvancedClick"
            style="color:#244A7B ;font-size: 20rpx;margin-left: 60rpx;cursor: pointer;">高级搜索 ﹀</view>
      </view>
      <view class="flex flex-center">
      <!-- 热门搜索 -->
      <view class="flex flex-center" style="font-size: 20rpx;margin: 10rpx 0;">
         热门搜索：
         <ul class="flex" style="margin-right: 10rpx;">
            <!-- 
            <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
               :style="{color:item.bgColor==true?'#5879a4':'#000'}">
                {{item.name}}
             </li>-->
            <li v-for="item in hot" :key="item.id" style="margin: 0 10rpx;color: #5879a4;font-size: 20rpx;">
               {{item.name}}
            </li>
         </ul>
      </view>
      <uni-row class="demo-uni-row" style="padding: 0 30rpx; ">
         <uni-col :span="5" >
            <view class="demo-uni-col dark" style="padding: 20rpx;border: 2px solid #e0e0e0;">
               <h3 style="padding-left: 20rpx;">{{profession.title}}</h3>
               <ul style="margin-top: 10rpx;">
      <!-- 高级搜索 -->
      <view class="" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: 10rpx;">
         <view style="background-color: #fff;padding: 20rpx;" class="">
            <h3>高级搜索</h3>
            <MyForm @submit="onSubmit" :from="from" />
         </view>
      </view>
      <uni-row class="demo-uni-row flex flex-items-start" style="padding: 0 230rpx; ">
         <uni-col :span="5" class="fbox">
            <!-- 职业 -->
            <view class="demo-uni-col dark box"
               style="margin-bottom: 40rpx;background-color: #fff; padding: 20rpx;border: 2rpx solid #e0e0e0;">
               <h3>{{profession.title}}</h3>
               <ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex" :style="{'background':profession.index === index ?  '#d6e3f4' :'','borderRadius': profession.index === index ?  '60rpx' :''}" v-for="(item,index) in profession.list"  :key="index" style="padding:0 20rpx;">
                  <li class="flex"
                     :style="{'background':profession.index === index ?  '#d6e3f4' :'','borderRadius': profession.index === index ?  '60rpx' :''}"
                     v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center">
                  <view class="" style="font-size: 25rpx;color: #C1D3EA;">收起 ^</view>
                  <!-- <view class="">更多</view> -->
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('a')">
                     {{ activeBox !== 'a' ? '更多  ﹀' : '收起  ︿' }}
               </view>
               </view>
            </view>
            <!-- 世代 -->
            <view class="demo-uni-col dark box"
               style="background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;" :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
               <h3>{{dynasty.title}}</h3>
               <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :style="{'background':dynasty.index === index ?  '#d6e3f4' :'','borderRadius': dynasty.index === index ?  '60rpx' :''}"
                     v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <view class="flex flex-center">
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </view>
            <!-- 来源 -->
            <view v-if="!isAdvancedSearch" class="demo-uni-col dark box"
               style="height: 250rpx;background-color: #fff;padding: 20rpx;border: 2rpx solid #e0e0e0;">
               <h3>{{source.title}}</h3>
               <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex" v-for="(item,index) in source.list" :key="index"
                     style="padding:0 20rpx;color: #244A7B;font-size: 24rpx;">
                     <view class="">{{ index+1 + '. '  +item.name}}</view>
                     <view class="">{{item.number}}</view>
                  </li>
               </ul>
               <!--    <view class="flex flex-center">
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}</view>
               </view> -->
            </view>
         </uni-col>
         <uni-col :span="19" style="padding-left: 20rpx;">
            <view class="demo-uni-col light" style="border: 1px solid #000;">
               bbb
            <view class="demo-uni-col light fbox1"
               style=" background-color: #fff;border: 1px solid   #e0e0e0;padding: 10rpx 20rpx;">
               <view class="flex" style="margin:10rpx 0">
                  <view class="" style="color: #2C2C2C;">共1374条</view>
                  <el-button size="mini">下载</el-button>
               </view>
               <el-table :data="tableData" size="mini" style="width: 100%">
                  <el-table-column prop="serialNumber" label="序号" width="70"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <el-table-column prop="another" label="别名"></el-table-column>
                  <el-table-column prop="gender" label="性别"></el-table-column>
                  <el-table-column prop="epoch" label="时代"></el-table-column>
                  <el-table-column prop="year" label="生年" width="70"></el-table-column>
                  <el-table-column prop="death" label="卒年" width="70"></el-table-column>
                  <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
                  <el-table-column prop="socialIdentity" label="社会身份"></el-table-column>
                  <el-table-column prop="officialPosition" label="官职"></el-table-column>
               </el-table>
            </view>
         </uni-col>
      </uni-row>
      <Footer1 />
   </view>
</template>

<script>
   import Footer1 from '@/components/footer/footer'
   import MyForm from '@/components/form/form.vue'
   export default {
      components: {
         Footer1,
         MyForm
      },
      data() {
         return {
            // 高级搜索显示
            isAdvancedSearch: false,
            // 高级搜索
            from: {
               from: [{
                     type: 'input',
                     label: '姓名',
                     name: 'name',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '性别',
                     value: '',
                     name: 'sex',
                     options: [{
                           label: '男',
                           value: '男'
                        },
                        {
                           label: '女',
                           value: '女'
                        }
                     ]
                  },
                  {
                     type: 'input',
                     label: '联系',
                     name: 'phone',
                     value: ''
                  },
                  {
                     type: 'input',
                     label: '证件',
                     name: 'idNumber',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '状态',
                     name: 'state',
                     value: '',
                     options: [{
                           label: '未申请',
                           value: '未申请'
                        },
                        {
                           label: '已申请',
                           value: '已申请'
                        },
                        {
                           label: '已删除',
                           value: '已删除'
                        }
                     ]
                  }
               ]
            },
            // 热门搜索
            hot: [{
               id: 1,
@@ -60,7 +196,6 @@
               bgColor: false
            }, ],
            // 职业
				
            profession: {
               title: '职业',
               index:0,
@@ -83,11 +218,107 @@
                     number:83
                  },
               ]
            }
            },
            // 展开和收缩的按钮需要
            activeBox: null,
            // 世代
            dynasty: {
               title: '世代',
               index: 0,
               list: [{
                     name: '全部',
                     id: 1,
                     number: 829
                  },
                  {
                     name: '唐',
                     id: 2,
                     number: 90
                  }, {
                     name: '宋',
                     id: 3,
                     number: 81
                  }, {
                     name: '元',
                     id: 4,
                     number: 83
                  },
               ]
            },
            // 来源
            source: {
               title: '来源',
               list: [{
                  name: '中国K小制应薛典',
                  id: 1
               }, {
                  name: '中医医事大会',
                  id: 2
               }, {
                  name: '中国医中制度研究',
                  id: 3
               }, ]
            },
            tableData: [{
               serialNumber: 1,
               name: '王小虎',
               another: '小虎',
               gender: '男',
               epoch: '唐代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }, {
               serialNumber: 2,
               name: '王w小虎',
               another: 'w小虎',
               gender: 'w男',
               epoch: '唐w代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }, {
               serialNumber: 1,
               name: '王小虎',
               another: '小虎',
               gender: '男',
               epoch: '唐代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }]
         }
      },
      mounted() {
         // 修改两次的高度保持一致
         var box1Height = document.querySelector('.fbox').offsetHeight;
         document.querySelector('.fbox1').style.height = box1Height + 'px';
      },
      methods: {
         isAvancedClick() {
            this.isAdvancedSearch = !this.isAdvancedSearch
            this.$nextTick(() => {

               var box1Height = document.querySelector('.fbox').offsetHeight;
               // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
               let box2Height = document.querySelector('.fbox1').offsetHeight
               console.log(box1Height, box2Height);
               if (box1Height <= box2Height) {
                  document.querySelector('.fbox1').style.height = box1Height + 'px';
               }
            })
         },
         onSubmit(val) {
            console.log(val);
         },
         onSearch(val) {

            console.log(val);
         },
         // 热门搜索
@@ -103,6 +334,15 @@
            })

         },
         // 展开收缩
         shrinkClick(box) {
            console.log(box);
            if (this.activeBox === box) {
               this.activeBox = null;
            } else {
               this.activeBox = box;
            }
         }
      }
   }
</script>
@@ -111,4 +351,29 @@
   * {
      box-sizing: border-box;
   }

   .a {
      height: 200px;
   }

   .b {
      height: 100px;
   }

   .box {
      transition: height 0.3s;
      /* 添加过渡效果 */
      overflow: hidden;
      /* 避免内容溢出 */

   }

   ::v-deep .el-table th,
   ::v-deep .el-table td {
      text-align: center;
   }

   ::v-deep .has-gutter tr>th {
      background-color: #DDE8F6 !important;
   }
</style>