数据录入 ​

<MobileStage title="新建报销单">
  <div class="mb-page">
    <eb-form label-position="top">
      <eb-form-item label="报销类型"><eb-segmented v-model="draft.type" block :options="['差旅', '招待', '办公']" /></eb-form-item>
      <eb-form-item label="金额（元）"><eb-input v-model="draft.amount" placeholder="0.00" inputmode="decimal" /></eb-form-item>
      <eb-form-item label="所属项目">
        <div class="mb-field" @click="projectOpen = true">
          <span :class="['mb-field__value', { 'is-placeholder': !draft.project }]">{{ draft.project || '请选择项目' }}</span>
          <BdIcon name="arrow-right" :size="14" class="mb-field__arrow" />
        </div>
      </eb-form-item>
      <eb-form-item label="发生日期">
        <div class="mb-field" @click="dateOpen = true">
          <span :class="['mb-field__value', { 'is-placeholder': !draft.date }]">{{ draft.date || '请选择日期' }}</span>
          <BdIcon name="arrow-right" :size="14" class="mb-field__arrow" />
        </div>
      </eb-form-item>
      <eb-form-item label="事由"><eb-input v-model="draft.reason" type="textarea" :rows="3" placeholder="简要说明报销事由，方便审批人理解" /></eb-form-item>
    </eb-form>
  </div>
  <template #bottom>
    <div class="mb-submit">
      <eb-button type="primary" @click="onSubmit">提交审批</eb-button>
    </div>
  </template>
  <eb-drawer v-model="projectOpen" direction="btt" size="320px" :append-to-body="false" :lock-scroll="false" title="选择项目">
    <div class="mb-picker">
      <div v-for="p in projects" :key="p" :class="['mb-picker__item', { 'is-active': draft.project === p }]" @click="draft.project = p; projectOpen = false">
        <span>{{ p }}</span>
        <BdIcon v-if="draft.project === p" name="check" :size="16" />
      </div>
    </div>
  </eb-drawer>
  <eb-drawer v-model="dateOpen" direction="btt" size="300px" :append-to-body="false" :lock-scroll="false" title="发生日期">
    <div class="mb-picker">
      <div v-for="d in dateOptions" :key="d" :class="['mb-picker__item', { 'is-active': draft.date === d }]" @click="draft.date = d; dateOpen = false">
        <span>{{ d }}</span>
        <BdIcon v-if="draft.date === d" name="check" :size="16" />
      </div>
    </div>
  </eb-drawer>
</MobileStage>

<MobileStage title="报销单">
  <div class="mb-page">
    <eb-input v-model="keyword" placeholder="搜索单号或申请人" clearable>
      <template #prefix><BdIcon name="search" :size="14" /></template>
    </eb-input>
    <eb-segmented v-model="tab" block :options="['全部', '审批中', '已通过', '已驳回']" />
    <div class="mb-divider-text" style="padding: 0;">共 {{ filtered.length }} 条结果</div>
    <div class="mb-list-gap">
      <div v-for="o in filtered" :key="o.id" class="mb-card mb-card--pad">
        <div class="mb-card__head">
          <span class="mb-card__title">{{ o.id }}</span>
          <eb-status-tag :value="o.status" :statuses="statuses" />
        </div>
        <div class="mb-card__rows">
          <div><div class="mb-card__label">申请人</div><div class="mb-card__value">{{ o.owner }}</div></div>
          <div><div class="mb-card__label">金额</div><div class="mb-card__value">¥{{ o.amount.toLocaleString() }}</div></div>
        </div>
      </div>
    </div>
    <div v-if="!filtered.length" class="mb-divider-text">没有匹配的报销单，换个关键词试试</div>
  </div>
</MobileStage>