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="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.usingTime')"
              name="username"
              style="width: 350px"
            >
              <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">
                {{ 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
          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(';').length > 200
                  ? text.join(';').substr(0, 200) + '...'
                  : text.join(';')
              }}
            </template>
          </template>
        </a-table>
      </div>
    </a-row>
  </div>
</template>

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

const { t } = useI18n()
const statisticStore = useStatisticStore()

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

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

console.log('msgList', msgList)

interface FormState {
  roomTitle: string
  userTime: string[]
}
const formState: UnwrapRef<FormState> = reactive({
  roomTitle: '',
  userTime: []
})
const columns: TableColumnProps[] = [
  {
    title: t('room.form.nickname'),
    dataIndex: 'nickName',
    width: 120
  },
  {
    title: t('room.form.phoneNumber'),
    // className: 'column-money',
    dataIndex: 'phoneNumber',
    width: 120
  },
  {
    title: t('room.roomTitle'),
    dataIndex: 'roomTitle',
    width: 120
  },
  {
    title: t('statistic.duration'),
    dataIndex: 'onlineTime',
    width: 120
  },
  {
    title: t('statistic.firstEnter'),
    dataIndex: 'firstInRoomTime',
    width: 160
  },
  {
    title: t('statistic.departure'),
    dataIndex: 'lastOutRoomTime',
    width: 160
  },
  {
    title: t('statistic.amount'),
    dataIndex: 'textCount',
    width: 80
  },
  {
    title: t('statistic.message'),
    dataIndex: 'texts',
    width: 140
  }
]

const pagination = computed(() => {
  return {
    current: statisticStore.roomMsg.pageNum,
    total: statisticStore.roomMsg.total,
    pageSize: statisticStore.roomMsg.pageSize, //每页中显示10条数据
    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) //分页中显示总的数据
  }
})

const fetchList = () => {
  try {
    console.log('formState-userTime', formState.userTime)
    statisticStore.fetchRoomMsglist({
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
      // startTime: formState.userTime?.length ? formState.userTime[0] : '',
      // endTime: formState.userTime?.length ? formState.userTime[1] : '',
      timeList: formState.userTime
      ? formState.userTime.map(item => item.toString())
      : [],
      roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
    })
  } catch (error) {
    console.error('error', error)
  }
}
const exportList = () => {
  try {
    statisticStore.exportRoomMsgList({
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
      // startTime: formState.userTime?.length ? formState.userTime[0] : '',
      // endTime: formState.userTime?.length ? formState.userTime[1] : '',
      timeList: formState.userTime
      ? formState.userTime.map(item => item.toString())
      : [],
      roomTitle: formState.roomTitle?.length ? formState.roomTitle : ''
    })
  } catch (error) {
    console.error('error', error)
  }
}
watch(
  () => props.current,
  val => {
    if (Number(unref(val)) === 3) {
      statisticStore.setRoomMsgPage()
      fetchList()
    } else {
      formState.roomTitle = ''
      formState.userTime = []
    }
  },
  {
    immediate: true
  }
)

const handleFinish = async () => {
  try {
    statisticStore.setRoomMsgPage()
    await fetchList()
  } catch (error) {
    console.error('error', error)
  }
}
const handleFinishFailed = () => {}
</script>
<style lang="less">
.container {
  background-color: #fff;
  padding: 25px;
  width: 100%;
  margin-bottom: 25px;
  min-width: 875px;
}
</style>