diantou/src_product/iam/components/audit-advanced-query.vue

<template>
  <div :class="$style.searchdiv">
    <a-card
      :style="{
        height: expand ? searchStyle.height : '0px',
        left: searchStyle.left,
        top: searchStyle.top,
        width: searchStyle.width,
        margin: searchStyle.margin,
      }"
      :class="[$style.searchcard, { [$style.notBorder]: !expand }]"
    >
      <a-form-model :ref="refName" :model="searchData" layout="inline" :class="$style.searchform">
        <a-row :gutter="24">
          <!-- 查询表匿名插槽 -->
          <slot></slot>
          <a-col :class="$style.searchbutton" :span="24">
            <!-- 前置按钮插槽 -->
            <slot name="beforebtn"></slot>
            <a-button @click="handleReset">
              重置
            </a-button>
            <a-button type="primary" @click="handleSearch">
              查询
            </a-button>
            <!-- 后置按钮插槽 -->
            <slot name="afterbtn"></slot>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import components from './_import-components/audit-advanced-query-import'

export default {
  name: 'AuditAdvancedQuery',
  metaInfo: {
    title: 'AuditAdvancedQuery',
  },
  components,
  props: {
    /**
     * 高级搜索组件展示隐藏
     * true 展示
     * false 隐藏
     */
    expand: {
      type: Boolean,
      default: false,
    },
    /**
     * 高级查询组件搜索数据源
     */
    searchData: {
      type: Object,
      default: null,
    },
    /**
     * 高级查询组件名
     */
    refName: {
      type: String,
      default: 'searchform',
    },
    /**
     * 过滤条件
     */
    expressions: {
      type: Array,
      default: null,
    },
    /**
     * 搜索页面的样式
     *
     */
    searchStyle: {
      type: Object,
      default: () => {
        return {
          top: '150px',
          left: '0px',
          height: '150px',
        }
      },
    },
    /**
     * 搜索执行的方法
     */
    searchFun: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {}
  },
  methods: {
    handleReset() {
      this.$refs[this.refName].resetFields()
      this.$parent.expressions = []
      this.$emit('resetForm')
      if (this.searchFun) {
        this.searchFun()
      }
    },
    handleSearch() {
      if (this.searchFun) {
        this.searchFun()
      }
      this.$emit('searchedClick')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.searchdiv {
  .searchcard {
    position: absolute;
    top: 65px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 888;
    width: calc(100% - 40px) !important;
    margin: auto 20px;
    overflow: hidden;
    transition: all 0.3s ease-out;
    border: 1px solid #d7d7d7;
    box-shadow: 0px 0px 6px #cbcbcb;
    :global(.ant-card-body) {
      padding: 16px !important;
    }
  }
  .searchform {
    padding-top: 10px;
    :global(.ant-row .ant-form-item) {
      width: 100%;
    }
    :global(.ant-form-item-control-wrapper) {
      width: calc(100% - 120px);
    }
    :global(.ant-row) {
      margin: 0 !important;
    }
  }
  .searchbutton {
    min-height: 40px;
    text-align: right;
    margin-top: 10px;
    border-top: 1px solid #e5e5e5;
    padding-top: 5px;
    :global(.ant-btn) {
      margin: 4px 4px;
    }
  }
  :global(.sd-has-table.ant-card) {
    min-height: 100%;
  }
  .not-border {
    border: none !important;
  }
}
:global(.ant-tabs) {
  .searchcard {
    top: 45px !important;
    width: calc(100% - 5px) !important;
    margin: auto !important;
  }
}
</style>