tms-erp-web/src/views/payment/components/bill-ledger-search.vue

<template>
  <section class="bill-ledger-search">
    <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
      <div class="bill-ledger-search__grid">
        <el-form-item label="票据编号">
          <el-input v-model="query.billNo" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="出票日期">
          <el-date-picker
            v-model="query.issueDateRange"
            type="daterange"
            unlink-panels
            clearable
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="出票单位">
          <el-input v-model="query.issuerName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="收票单位">
          <el-input v-model="query.receiverName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="expanded" label="汇票类型">
          <el-select v-model="query.billType" clearable placeholder="请选择">
            <el-option
              v-for="item in billTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="expanded" label="到期状态">
          <el-select v-model="query.maturityStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in maturityStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="bill-ledger-search__actions-buttons">
        <el-button type="primary" :loading="loading" @click="$emit('search')">
          <el-icon><Search /></el-icon>
          <span>搜索</span>
        </el-button>
        <el-button @click="$emit('reset')">
          <el-icon><Delete /></el-icon>
          <span>重置</span>
        </el-button>
        <el-button
          v-if="showSearchToggle"
          text
          :icon="expanded ? ArrowUp : ArrowDown"
          @click="expanded = !expanded"
          >{{ expanded ? '收起' : '展开' }}</el-button
        >
      </div>
    </el-form>
  </section>
</template>

<script>
import { ArrowDown, ArrowUp, Delete, Search } from '@element-plus/icons-vue';
import { billTypeOptions, maturityStatusOptions } from '@/api/payment/billLedger';

export default {
  name: 'BillLedgerSearch',
  props: {
    query: { type: Object, required: true },
    loading: { type: Boolean, default: false },
  },
  emits: ['search', 'reset'],
  data() {
    return {
      ArrowDown,
      ArrowUp,
      Delete,
      Search,
      expanded: false,
      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
      searchIndex: 4,
      searchItemCount: 6,
      billTypeOptions,
      maturityStatusOptions,
    };
  },
  computed: {
    showSearchToggle() {
      return this.searchItemCount > this.searchIndex;
    },
  },
};
</script>

<style scoped lang="scss">
.bill-ledger-search {
  padding: 12px 12px 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.bill-ledger-search__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 24px;
}
.bill-ledger-search :deep(.el-form-item) {
  margin-bottom: 8px;
}
.bill-ledger-search :deep(.el-input),
.bill-ledger-search :deep(.el-select),
.bill-ledger-search :deep(.el-date-editor) {
  width: 100%;
}
.bill-ledger-search__actions-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 1200px) {
  .bill-ledger-search__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>