resource-admin/src/views/message/message-record/sms-record.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue'
import SaveForm from '@components/save-form'
import {
  DataTableRowKey,
  NButton,
  NDataTable,
  NDatePicker,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  useDialog,
  useMessage
} from 'naive-ui'
import Pagination from '@components/pagination'
import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
import { clientType, messageSenderFunctionModule, messageSendStatus } from '@/utils/constant'
import { getTimes } from '@/utils/dateUtil'
import { sysMessagePage } from '@views/message/api'
import TheTooltip from '@components/TheTooltip'

export default defineComponent({
  name: 'sms-record',
  props: {
    appKey: {
      type: String,
      required: true
    }
  },

  setup(props) {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      appId: null as any,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        title: null, //消息名称
        clientId: null, //客户端
        group: null, // 功能模块
        sendTime: null, // 发送时间
        status: null, // 发送状态
        receiver: null // 接收人手机号
      },
      dataList: []
    })

    onMounted(async () => {
      getList()
    })

    const saveForm = ref()

    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const checkedRowKeysRef = ref<DataTableRowKey[]>([])
    const handleCheck = (rowKeys: DataTableRowKey[]) => {
      checkedRowKeysRef.value = rowKeys
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await sysMessagePage({
          ...state.pagination,
          ...state.searchForm,
          appKey: props.appKey,
          sendMode: 'SMS',
          ...getTimes(state.searchForm.sendTime, ['sendTimeStart', 'sendTimeEnd'])
        })
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {}
      state.loading = false
    }

    const columns = (): any => {
      return [
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '消息内容',
          key: 'content',
          render: (row: any) => {
            return <TheTooltip showContentWidth={400} content={row.content} />
          }
        },
        {
          title: '发送时间',
          key: 'sendTime'
        },
        {
          title: '发送对象',
          key: 'clientId',
          render: (row: any) => {
            return <div>{getMapValueByKey(row.clientId, new Map(Object.entries(clientType)))}</div>
          }
        },
        {
          title: '接收人姓名',
          key: 'username'
        },
        {
          title: '接收人手机号',
          key: 'receiver'
        },
        {
          title: '发送平台',
          key: 'senderName'
        },
        {
          title: '发送状态',
          key: 'status',
          render: (row: any) => {
            return (
              <div>{getMapValueByKey(row.status, new Map(Object.entries(messageSendStatus)))}</div>
            )
          }
        },
        {
          title: '读取状态',
          key: 'readStatus',
          render: (row: any) => {
            return <div>{row.readStatus ? '已读' : '未读'}</div>
          }
        },
        {
          title: '功能模块',
          key: 'group',
          render: (row: any) => {
            return (
              <div>
                {getMapValueByKey(row.group, new Map(Object.entries(messageSenderFunctionModule)))}
              </div>
            )
          }
        },
        {
          title: '触发条件',
          key: 'triggerCondition'
        },
        {
          title: '错误信息',
          key: 'errorMsg',
          render: (row: any) => {
            return <TheTooltip content={row.errorMsg} />
          }
        }
      ]
    }

    return () => {
      return (
        <div class="system-menu-container">
          <SaveForm
            ref={saveForm}
            model={state.searchForm}
            onSubmit={onSubmit}
            saveKey="sms-record"
            onSetModel={(val: any) => (state.searchForm = val)}
          >
            <NFormItem label="标题" path="title">
              <NInput placeholder="请输入标题" v-model:value={state.searchForm.title} clearable />
            </NFormItem>
            <NFormItem label="接收人手机号" path="receiver">
              <NInput
                placeholder="请输入接收人手机号"
                v-model:value={state.searchForm.receiver}
                clearable
              />
            </NFormItem>
            <NFormItem label="发送对象" path="clientId">
              <NSelect
                placeholder="全部发送对象"
                v-model:value={state.searchForm.clientId}
                options={getSelectDataFromObj(clientType)}
                clearable
              />
            </NFormItem>
            <NFormItem label="发送状态" path="status">
              <NSelect
                placeholder="全部发送对象"
                v-model:value={state.searchForm.status}
                options={getSelectDataFromObj(messageSendStatus)}
                clearable
              />
            </NFormItem>
            <NFormItem label="功能模块" path="group">
              <NSelect
                filterable
                placeholder="全部功能模块"
                v-model:value={state.searchForm.group}
                options={getSelectDataFromObj(messageSenderFunctionModule)}
                clearable
              ></NSelect>
            </NFormItem>
            <NFormItem label="发送时间" path="sendTime">
              <NDatePicker
                v-model:value={state.searchForm.sendTime}
                type="daterange"
                clearable
                value-format="yyyy.MM.dd"
                startPlaceholder="开始时间"
                endPlaceholder="结束时间"
              />
            </NFormItem>

            <NFormItem>
              <NSpace>
                <NButton type="primary" onClick={onSearch}>
                  搜索
                </NButton>
                <NButton type="default" onClick={onBtnReset}>
                  重置
                </NButton>
              </NSpace>
            </NFormItem>
          </SaveForm>

          <div class={['section-container']}>
            <NDataTable
              loading={state.loading}
              columns={columns()}
              data={state.dataList}
              rowKey={(row: any) => row.id}
              scrollX={'1400'}
            ></NDataTable>

            <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
              sync
              saveKey="sms-record"
            ></Pagination>
          </div>
        </div>
      )
    }
  }
})