medical_lab_ui_mobil/src/components/ibps-more-search/index.vue

<template>
  <van-popup
    v-model="popupShow"
    get-container="body"
    position="right"
    class="more-search-popup"
    :style="{ width: '80%' }"
    @close="close"
  >
    <van-nav-bar
      :title="title"
      fixed
    />
    <div class="ibps-fixed-navbar-toolbar ibps-fixed-top">
      <van-cell-group>
        <search-field
          ref="searchForm"
          :forms="searchForms.forms"
          :input-align="searchForms.inputAlign"
        >
        <!-- 默认只有 文本 下拉 日期 其余走插槽-->
          <div
            v-for="(form,i) in slotForms()"
            :key="form.slotName+i"
            :slot="form.slotName"
          >
            <slot :name="form.slotName" :item="form" />
          </div>
        </search-field>
      </van-cell-group>
      <!-- 操作按钮-->
      <slot name="toolbar">
        <ibps-toolbar
          v-if="actions && actions.length >0"
          ref="toolbar"
          :actions="actions"
        />
      </slot>
    </div>
  </van-popup>
</template>
<script>
import IbpsToolbar from '@/components/ibps-toolbar'// 工具栏
import searchField from './search-field'

export default {
  name: 'ibps-more-search',
  components: {
    searchField,
    IbpsToolbar
  },
  props: {
    show: Boolean,
    searchForms: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: '高级搜索'
    }
  },
  data() {
    return {
      popupShow: this.show,
      actions: [
        {
          name: '取消',
          type: 'default',
          callback: this.cancel
        },
        {
          name: '重置',
          type: 'warning',
          callback: this.reset
        },
        {
          name: '确定',
          type: 'primary',
          callback: this.confirm
        }
      ]
      // slotNameForm: this.slotForms()
    }
  },
  watch: {
    show: {
      handler: function(val, oldVal) {
        this.popupShow = val
      },
      immediate: true
    }
  },
  methods: {
    slotForms() {
      const forms = this.searchForms ? this.searchForms.forms || [] : []
      return forms.filter((form) => form.slotName)
    },
    cancel() {
      this.close()
    },
    reset() {
      this.$refs['searchForm'].resetSearchForm()
      this.$emit('reset-form')
    },
    confirm() {
      const data = this.$refs['searchForm'].getData()
      this.close()
      this.$emit('callback', data)
    },
    close() {
      this.popupShow = false
      this.$emit('close', this.popupShow)
    }
  }
}
</script>
<style lang="scss">
.more-search-popup {
  width: 60%;
  height: 100%;

  .ibps-search-field__label{
    padding: 10px 16px 0 16px;
    font-size: 12px;
    // color: #969799;
  }
  .ibps-checker{
    width: 100%;
  }
}
</style>