shop-back/src/views/statistic/tab/tab2.vue

<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="container search-container">
          <a-form
            layout="inline"
            :model="formState"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed"
          >
            <a-form-item
              :label="t('room.roomTitle')"
              name="roomTitle"
              style="width: 250px"
            >
              <a-input
                v-model:value="formState.roomTitle"
                :placeholder="t('room.roomTitle')"
              >
              </a-input>
            </a-form-item>
            <a-form-item
              :label="t('room.usingTime2')"
              name="username"
              style="width: 350px"
            >
              <a-range-picker
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                style="width: 80%"
                allowClear
                v-model:value="formState.userTime"
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">
                {{ t('base.confirm') }}
              </a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="exportList">
                {{ t('base.export') }}
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <div class="container">
        <a-table
          :columns="columns"
          :data-source="roomList"
          :pagination="pagination"
          bordered
        >
          <template #bodyCell="{ column, text }">
            <!-- <template v-if="column.dataIndex === 'sceneNameList'">
              {{ text[0] }}
            </template> -->
            <template v-if="column.dataIndex === 'roomStatus'">
              <span v-if="text == 0">未开始</span>
              <span v-if="text == 1">带看中</span>
              <span v-if="text == 2">已结束</span>
            </template>
          </template>
        </a-table>
      </div>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, UnwrapRef, watch, reactive, unref } from 'vue'
import { TableColumnProps, TablePaginationConfig } from 'ant-design-vue'
import { useStatisticStore } from '@/store/modules/statistic'
import { useI18n } from '@/hook/useI18n'

const { t } = useI18n()
const props = defineProps<{
  current: string
}>()

const statisticStore = useStatisticStore()
// const total = computed(() => statisticStore.allRoom.total)
const pagination = computed<TablePaginationConfig>(() => {
  return {
    current: statisticStore.allRoom.pageNum,
    total: statisticStore.allRoom.total,
    pageSize: statisticStore.allRoom.pageSize,
    showSizeChanger: true,
    onChange: (current: number, page: any) => {
      console.log('page', current, page)
      pagination.value.current = current
      pagination.value.pageSize = page
      fetchList()
    },
    pageSizeOptions: ['10', '20', '50', '100'],
    showTotal: (total: string) => t('statistic.pageCount').replace('%N%', total) //分页中显示总的数据
  } as unknown as TablePaginationConfig
})

const roomList = computed(() => statisticStore.allRoom.list)
interface FormState {
  roomTitle: string
  userTime: [string, string]
}
const formState: UnwrapRef<FormState> = reactive({
  roomTitle: '',
  userTime: ['', '']
})

const columns: TableColumnProps[] = [
  // {
  //   title: '房间id',
  //   dataIndex: 'roomId'
  // },
  {
    title: t('room.roomTitle'),
    dataIndex: 'roomTitle',
    width: 130
  },
  {
    title: t('statistic.relatedScenes'),
    dataIndex: 'sceneNameListStr'
  },
  {
    title: t('statistic.duration'),
    dataIndex: 'lookTime',
    width: 100
  },
  {
    title: t('statistic.createTime'),
    dataIndex: 'createTime',
    width: 130
  },
  {
    title: t('statistic.status'),
    dataIndex: 'roomStatus',
    width: 80
  },
  {
    title: t('statistic.watch'),
    dataIndex: 'lookManCount',
    width: 70
  },
  {
    title: t('statistic.share'),
    dataIndex: 'shareCount',
    width: 70
  }
]

const fetchList = () => {
  statisticStore.fetchAllRoomList({
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    timeList: formState.userTime
      ? formState.userTime.filter(i => i).map(item => item.toString())
      : [],
    roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
  })
}
const exportList = () => {
  statisticStore.exportAllRoomList({
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    timeList: formState.userTime
      ? formState.userTime.filter(i => i).map(item => item.toString())
      : [],
    roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
  })
}

watch(
  () => props.current,
  val => {
    console.log('current,', unref(val))
    if (Number(unref(val)) === 2) {
      statisticStore.setAllRoomListPage()
      fetchList()
    } else {
      formState.roomTitle = ''
      formState.userTime = ['', '']
    }
  },
  {
    immediate: true
  }
)

const handleFinish = () => {
  statisticStore.setAllRoomListPage()
  fetchList()
}
const handleFinishFailed = () => {}
</script>
<style lang="less">
.container {
  background-color: #fff;
  padding: 25px;
  width: 100%;
  margin-bottom: 25px;
  min-width: 875px;
}
</style>