#### Basic 列表页

:::demo

```html
<template>
  <div class="pages">
    <basic-page ref="pageContainer" v-model="selects" :search-model="searchModel" :table-model="tableModel" :table-options="tableOptions" :table-props="tableProps" :table-options-width="120" :api="api" v-on="events" @listAfter="listAfter">
      <template slot="BasicPageHeader">
        <el-button size="small" type="primary" icon="el-icon-upload"> tabs </el-button>
      </template>
      <template slot="FrActions">
        <el-button size="small" type="primary" icon="el-icon-upload"> 导出数据 </el-button>
      </template>
      <template slot="bottomBar">
        <el-button size="small" type="default"> 分佣方式调整 </el-button>
      </template>
    </basic-page>
  </div>
</template>

<script>
  import { dataExportList } from '@/api/export'
  import DemoDrawer from './dialogs/DemoDrawer/index.vue'
  let StartDay = null
  export default {
    name: 'BillsManage',
    components: {
      DemoDrawer
    },
    data() {
      const that = this
      return {
        selects: [],

        //api配置
        api: {
          list: dataExportList,
          listParams: {}
        },
        // 事件配置
        events: {
          down(row) {
            alert('操作回调')
          }
        },
        //表格配置
        tableOptions: [
          {
            eventName: 'down',
            label: '操作按钮'
          }
        ],
        tableModel: [
          {
            prop: 'createTime',
            label: '操作时间',
            width: 150,
            attrs: {
              fixed: true,
              'show-overflow-tooltip': true
            },
            permission: 'xxxx'
          },
          {
            prop: 'createBy',
            label: '操作人',
            width: 150,
            hidden: () => false
          },
          {
            prop: 'typeName',
            label: '导出类型'
          },
          {
            prop: 'billAmount',
            label: '操作内容',
            renderColumn: (row) => `￥${row.billAmount || 0}`
          },
          {
            prop: 'status',
            label: '状态',
            width: '180px',
            renderColumn: (row) => `自定义：${row.status || 0}`
          },
          {
            prop: 'fileExpireTime',
            label: '内容'
            // renderColumn: (row) => `￥${row.billAmount || 0}`
          }
        ],
        tableProps: {
          showSelect: true,
          rowKey: 'billId'
        },

        //搜索相关
        searchModel: [
          {
            type: 'daterange',
            prop: 'createTime',
            label: '创建时间：',
            value: ['2023-03-14', '2023-03-24'],
            attrs: {
              size: 'small',
              'start-placeholder': '创建开始日期',
              'end-placeholder': '创建结束日期',
              clearable: false,
              'picker-options': {
                disabledDate(row) {
                  if (!StartDay) return false
                  const des = row?.getTime() || 0
                  const star = StartDay?.getTime() || 0
                  // console.log(123, des, star)
                  const year = 366 * 24 * 60 * 60 * 1000
                  return Math.abs(des - star) > year ? true : false
                },
                onPick({ minDate, maxDate }) {
                  // console.log('k', k)
                  if (minDate && !maxDate) {
                    StartDay = minDate
                  } else if (!minDate && !maxDate) {
                    StartDay = null
                  }
                }
              }
            },
            rangeKeys: ['createBeginTime', 'createEndTime']
          },
          {
            label: '导出状态',
            type: 'select',
            attrs: { size: 'small', clearable: true },
            prop: 'status',
            optionAttrs: {
              labelKey: 'label',
              valueKey: 'key'
            },
            optionsPromise: () => {
              return new Promise((rol, rej) => {
                setTimeout(() => {
                  rol([
                    { label: 321, key: 1 },
                    { label: 654, key: 2 }
                  ])
                }, 1000)
              })
            }
          },
          {
            type: 'select',
            attrs: { size: 'small', clearable: true },
            prop: 'adjustType',
            options: [
              { label: 123, value: 1 },
              { label: 456, value: 2 }
            ],

            label: '导出类型'
          },
          {
            type: 'select',
            prop: 'remoteType',
            attrs: {
              size: 'small',
              remote: true,
              filterable: true,
              clearable: true,
              remoteMethods: (k, j) => {
                return new Promise((rol, rej) => {
                  setTimeout(() => {
                    rol([
                      { label: 321, key: 1 },
                      { label: 654, key: 2 }
                    ])
                  }, 1000)
                })
              }
            },
            label: '远程搜索类型'
          },
          {
            type: 'daterange',
            prop: 'settleTime',
            label: '结算时间',
            attrs: {
              size: 'small',
              'start-placeholder': '结算开始日期',
              'end-placeholder': '结算结束日期'
            }
          }
        ],
        //自定义相关
        loading: false
      }
    },
    computed: {
      // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
    },
    methods: {
      listAfter() {},
      //远程搜索
      // handlRemote({ k, type }) {
      //   const item = this.apiList.find((item) => item.key === this[type])
      //   return new Promise((resolve) => {
      //     this.$request(item.api, { keyword: k }).then(({ data }) => {
      //       resolve(data)
      //     })
      //   })
      // },
      // 下载文件
      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>
```

:::
