Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

杨磊

2024-05-16 4469428bfec368ea9c735303ff9ad4ed25f5b762

 src/components/advancedSearch/advancedSearch.vue

@@ -1,198 +1,227 @@
<template>
   <view style="height: 100% ;">
      <view class="flex flex-center" style="margin: 20rpx 0;">
         <luanqing-search class="search_bar" @onSearch="onSearch" :buttonText="buttonText"
            :isSearchTrue="isSearchTrue" :placehold="placehold"></luanqing-search>
         <view class="advancedSea" v-if="isAvancedTrue" @click="isAvancedClick"
            style="color:#244A7B ;font-size: .12rem;margin-left: .31rem;cursor: pointer;">高级搜索 ﹀</view>
      </view>
      <!-- 高级搜索 -->
      <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 1.24rem; margin-bottom: .18rem;">
         <view style="background-color: #fff;padding: .29rem;" class="">
            <h3>高级搜索</h3>
            <MyForm @submit="onSubmit" :from="from" />
         </view>
      </view>
   </view>
  <view style="height: 100%">
    <view class="flex flex-center" style="margin: 20rpx 0">
      <luanqing-search
        class="search_bar"
        @onSearch="onSearch"
        :buttonText="buttonText"
        :isSearchTrue="isSearchTrue"
        :placehold="placehold"
        :keyword="keyword"
      ></luanqing-search>
      <view
        class="advancedSea"
        v-if="isAvancedTrue"
        @click="isAvancedClick"
        style="
          color: #244a7b;
          font-size: 0.12rem;
          margin-left: 0.31rem;
          cursor: pointer;
        "
        >高级搜索 ﹀</view
      >
    </view>
    <!-- 高级搜索 -->
    <view
      class="advancedSeaTrue"
      v-if="isAdvancedSearch"
      style="padding: 0 1.24rem; margin-bottom: 0.18rem"
    >
      <view style="background-color: #fff; padding: 0.29rem" class="">
        <h3>高级搜索</h3>
        <MyForm @submit="onSubmit" :from="from" />
      </view>
    </view>
  </view>
</template>

<script>
   import MyForm from '@/components/form/form.vue'
   export default {
      props: {
         isAvancedTrue: {
            type: Boolean,
            default () {
               return true
            }
         },
         isSearchTrue: {
            type: Boolean,
            default () {
               return true
            }
         },
         buttonText: {
            type: String,
            default () {
               return '搜索'
            }
         },
         placehold: {
            type: String
         },
         from: {
            type: Object,
            default () {
               return {
                  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: '已删除'
                           }
                        ]
                     }
                  ]
               }
            }
         }
      },
      components: {
         MyForm
      },
      name: "advancedSearch",
      data() {
         return {
            // 高级搜索显示
            isAdvancedSearch: false,
            // 高级搜索
				
import MyForm from "@/components/form/form.vue";
export default {
  props: {
    isAvancedTrue: {
      type: Boolean,
      default() {
        return true;
      }
    },
    advancedSearchBack: {
      type: Function
    },
    isSearchTrue: {
      type: Boolean,
      default() {
        return true;
      }
    },
    buttonText: {
      type: String,
      default() {
        return "搜索";
      }
    },
    placehold: {
      type: String
    },
    keyword: {
      type: String
    },
    from: {
      type: Object,
      default() {
        return {
          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: "已删除"
                }
              ]
            }
          ]
        };
      }
    }
  },
  components: {
    MyForm
  },
  name: "advancedSearch",
  data() {
    return {
      // 高级搜索显示
      isAdvancedSearch: false
      // 高级搜索
    };
  },
  methods: {
    isAvancedClick() {
      if (this.advancedSearchBack) {
        this.advancedSearchBack();
      } else {
        this.isAdvancedSearch = !this.isAdvancedSearch;
      }
      //    this.$nextTick(() => {

         };
      },
      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';
            //       }
            //    })
         },
         onSearch(val) {
            this.$emit('onSearch', val)
            // console.log(val);
         },
         onSubmit(val) {
            this.$emit('onSubmit', val)
            // console.log(val);
         },
      }
   }
      //       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';
      //       }
      //    })
    },
    onSearch(val) {
      this.$emit("onSearch", val);
    },
    onSubmit(val) {
      this.$emit("onSubmit", val);
      // console.log(val);
    }
  }
};
</script>

<style>
   .advancedSeaTrue,
   .zhushuju {
      padding: 0 1.24rem !important;
   }
.advancedSeaTrue,
.zhushuju {
  padding: 0 1.24rem !important;
}

   .advancedSeaTrue1 {
      padding: .08rem .19rem !important;
      font-size: .14rem !important;
   }
.advancedSeaTrue1 {
  padding: 0.08rem 0.19rem !important;
  font-size: 0.14rem !important;
}

   /* Form组件里面的样式 */
   ::v-deep .el-row {
      display: flex;
      flex-wrap: wrap;
      margin-top: .1rem !important;
   }
/* Form组件里面的样式 */
::v-deep .el-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.1rem !important;
}

   ::v-deep .el-form-item {
      display: flex !important;
      flex-wrap: wrap !important;
      margin-bottom: .18rem !important;
   }
::v-deep .el-form-item {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.18rem !important;
}

   ::v-deep .el-form-item__label {
      font-size: .14rem !important;
      height: .3rem !important;
      display: flex !important;
      align-items: center !important;
   }
::v-deep .el-form-item__label {
  font-size: 0.14rem !important;
  height: 0.3rem !important;
  display: flex !important;
  align-items: center !important;
}

   ::v-deep .el-input__inner {
      font-size: .14rem !important;
      height: .3rem !important;
   }
::v-deep .el-input__inner {
  font-size: 0.14rem !important;
  height: 0.3rem !important;
}

   ::v-deep .Formbtn {
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
::v-deep .Formbtn {
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;

      .el-button {
         width: .7rem !important;
         height: .3rem !important;
         font-size: .12rem;
  .el-button {
    width: 0.7rem !important;
    height: 0.3rem !important;
    font-size: 0.12rem;
  }
}

      }
   }

   .search_bar {
      width: 5rem;
      height: .36rem;
   }
</style>
.search_bar {
  width: 5rem;
  height: 0.36rem;
}
</style>