shop-back/src/views/statistic/tab/tab3.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="房间名称" name="roomTitle">
              <a-input
                v-model:value="formState.roomTitle"
                placeholder="房间名称"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="使用时间" name="username">
              <a-range-picker
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                style="width: 80%"
                v-model:value="formState.userTime"
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit"> 确定 </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <div class="container">
        <a-table
          align="center"
          :columns="columns"
          :data-source="msgList"
          :pagination="pagination"
          bordered
        >
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'firstInRoomTime'">
              {{ dayjs(text).format('YYYY-MM-DD HH:mm') }}
            </template>
            <template v-if="column.dataIndex === 'lastOutRoomTime'">
              {{ dayjs(text).format('YYYY-MM-DD HH:mm') }}
            </template>
            <template v-if="column.dataIndex === 'texts'">
              {{ text.join(';') }}
            </template>
          </template>
        </a-table>
      </div>
    </a-row>
  </div>
</template>

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

const statisticStore = useStatisticStore()

const msgList = computed(() => statisticStore.roomMsg.list)

const pagination = reactive({
  current: 1,
  total: statisticStore.roomMsg.total,
  pageSize: 20, //每页中显示10条数据
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据
  showTotal: (total: string) => `共有 ${total} 条数据` //分页中显示总的数据
})

console.log('msgList', msgList)

interface FormState {
  roomTitle: string
  userTime: string[]
}
const formState: UnwrapRef<FormState> = reactive({
  roomTitle: '',
  userTime: []
})
const columns: TableColumnProps[] = [
  {
    title: '昵称',
    dataIndex: 'nickName'
  },
  {
    title: '手机号',
    // className: 'column-money',
    dataIndex: 'phoneNumber'
  },
  {
    title: '房间名称',
    dataIndex: 'roomTitle'
  },
  {
    title: '时长/分',
    dataIndex: 'onlineTime',
    width: 120
  },
  {
    title: '初次进入房间',
    dataIndex: 'firstInRoomTime',
    width: 200
  },
  {
    title: '最后离开房间',
    dataIndex: 'lastOutRoomTime',
    width: 200
  },
  {
    title: '数量',
    dataIndex: 'textCount',
    width: 80
  },
  {
    title: '留言内容',
    dataIndex: 'texts',
    width: 140
  }
]

onMounted(async () => {
  await statisticStore.fetchRoomMsglist({
    pageNum: 1,
    pageSize: 20,
    startTime: '',
    endTime: ''
  })

})
const handleFinish = () => {
  try {
    statisticStore.fetchRoomMsglist({
      startTime: formState.userTime ? formState.userTime[0] : '',
      endTime: formState.userTime ? formState.userTime[1] : '',
      pageNum: 1,
      pageSize: 20,
      roomTitle: formState.roomTitle
    })
  } catch (error) {
    console.error('error', error)
  }
}
const handleFinishFailed = () => {}
</script>
<style lang="less">
.container {
  background-color: #fff;
  padding: 25px;
  width: 100%;
  margin-bottom: 25px;
}
</style>