#### Basic 列表页

:::demo

```html
<template>
  <div class="pages">
    <gen-form ref="pageContainer" :inline="true" :form-data="formData" :form-model="searchModel" :show-condition-num="20" :show-more="true" :show-block-label="false">
      <el-form-item v-if="searchModel.length > 0" class="operation-item">
        <el-button type="primary" :size="$attrs.size || 'small'" @click="search"> 搜 索 </el-button>
        <el-button :size="$attrs.size || 'small'" @click="reset"> 重 置 </el-button>
      </el-form-item>
    </gen-form>
  </div>
</template>

<script>
  export default {
    name: 'BillsManage',
    components: {
      // DebitNoteDia: () => import('./dialogs/DebitNoteDia/index'),
      // BillsMethods: () => import('./dialogs/BillsMethods/index')
    },
    data() {
      return {
        formData: {
          status: 2,
          name: '123'
        },

        //搜索相关
        searchModel: [
          {
            type: 'date',
            prop: 'createTime',
            label: '导出时间',
            attrs: {
              size: 'small',
              'start-placeholder': '创建开始日期',
              'end-placeholder': '创建结束日期'
            }

            // rangeKeys: ['createBeginTime', 'createEndTime']
          },
          {
            label: '导出状态',
            type: 'select',
            attrs: { size: 'small', clearable: true },
            prop: 'status',
            optionAttrs: {
              labelKey: 'value',
              valueKey: 'key'
            },
            options: [
              {
                value: 123,
                key: 1
              },
              {
                value: 345,
                key: 2
              }
            ]
          },

          {
            type: 'input',
            attrs: { size: 'small', clearable: true },
            prop: 'name',
            options: () => new Promise.resolve(this.staticDicts.importOrExportSelection),

            label: '导出名称'
          }
        ],
        //自定义相关
        loading: false
      }
    },
    computed: {
      // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
    },
    methods: {
      listAfter() {},
      //远程搜索
      search() {
        console.log('formData', this.formData)
      },
      reset() {
        console.log('formData', this.formData)
        this.formData = {}
      },
      // 下载文件
      downFileBtn() {},
      // 操作回调
      refresh() {
        this.selects = []
        this.$refs.pageContainer?.handleReset()
        this.$refs.pageContainer?.clearSelection()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .numBars {
    width: 100%;
    height: 80px;
    box-shadow: 0 0 10px #ebebeb;
    border-radius: 15px;
    margin: 10px 0;
    padding: 10px;
    &__items {
      flex: 1;
      justify-content: flex-start;
    }
    &__items_icons {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 64px;
      height: 64px;
      border-radius: 10px;
      margin-right: 10px;
      color: #f1f1f1;
      font-size: 36px;
    }
  }
</style>
```

:::
