resource-admin/src/views/message/message-config/push/push-config.tsx

import {
  NButton,
  NDataTable,
  NFormItem,
  NInput,
  NModal,
  NSelect,
  NSpace,
  NTag,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTabsViewStore } from '@/store/modules/tabsView'
import SaveForm from '@components/save-form'
import Pagination from '@components/pagination'
import PushConfigEdit from '@views/message/message-config/push/modal/push-config-edit'
import TheTooltip from '@components/TheTooltip'
import { getMapValueByKey, getSelectDataFromObj } from '@/utils/objectUtil'
import { appKey, clientType, deviceType } from '@/utils/constant'
import deepClone from '@/utils/deep.clone'
import { sysApplicationPage } from '@views/menu-manage/api'
import { appSendConfigPage, appSendConfigRemove, appSendConfigStatus } from '@views/message/api'

export default defineComponent({
  name: 'push-config',
  setup(props, ctx) {
    const route = useRoute()
    const router = useRouter()
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      appId: null as any,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null, //关键字
        status: null, // 状态
        appKey: null, // 应用
        clientId: null // 客户端
      },
      name: null as any,
      smsConfigId: null as any,
      dataList: [],
      showEdit: false,
      editMode: 'add',
      editRowData: {} as any,
      appData: [] as any
    })
    const tabsViewStore = useTabsViewStore()
    const gotoBack = () => {
      tabsViewStore.closeCurrentTab(route)
      router.push({
        path: '/message/messageConfig'
      })
    }

    onMounted(async () => {
      state.appData = []
      const { data } = await sysApplicationPage({ page: 1, rows: 999 })
      if (data && data.rows) {
        data.rows.forEach((item: any) => {
          state.appData.push({ label: item.appName, value: item.appKey })
        })
      }
      getList()
    })

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

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

    const getList = async () => {
      state.loading = true
      try {
        const { data } = await appSendConfigPage({
          ...state.pagination,
          ...state.searchForm
        })
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {}
      state.loading = false
    }

    const onChangeStatus = (row: any) => {
      const statusStr = row.status ? '停用' : '启用'
      dialog.warning({
        title: '提示',
        content: `是否${statusStr}？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await appSendConfigStatus({
              id: row.id,
              status: !row.status
            })
            getList()
            message.success(`${statusStr}成功`)
          } catch {}
        }
      })
    }

    const onRmove = (row: any): void => {
      dialog.warning({
        title: '提示',
        content: `删除"${row.name}"，是否继续？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await appSendConfigRemove(row.id)
            getList()
            message.success('删除成功')
          } catch {}
        }
      })
    }

    const columns = (): any => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '平台名称',
          key: 'name'
        },
        {
          title: '平台标识',
          key: 'sender'
        },
        {
          title: '应用',
          key: 'appKey',
          render(row: any) {
            return <div>{getMapValueByKey(row.appKey, new Map(Object.entries(appKey)))}</div>
          }
        },
        {
          title: '客户端',
          key: 'clientId',
          render(row: any) {
            return <div>{getMapValueByKey(row.clientId, new Map(Object.entries(clientType)))}</div>
          }
        },
        {
          title: '设备类型',
          key: 'deviceType',
          render(row: any) {
            return (
              <div>{getMapValueByKey(row.deviceType, new Map(Object.entries(deviceType)))}</div>
            )
          }
        },
        {
          title: '接入地址',
          key: 'accessUrl'
        },
        {
          title: '离线保留时长(小时)',
          key: 'timeToLive',
          render(row: any) {
            return row.timeToLive / 3600
          }
        },
        {
          title: '推送环境',
          key: 'apnsProduction',
          render(row: any) {
            return row.apnsProduction ? '线上' : '开发'
          }
        },
        {
          title: '接入key',
          key: 'account'
        },
        {
          title: '接入秘匙',
          key: 'password'
        },
        {
          title: '拓展参数',
          key: 'extendData',
          render(row: any) {
            return <TheTooltip content={row.extendData} />
          }
        },
        {
          title: '状态',
          key: 'status',
          render(row: any) {
            return (
              <NTag type={row.status ? 'primary' : 'default'}>{row.status ? '启用' : '停用'}</NTag>
            )
          }
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          minWidth: '180px',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="appSendConfig/status1790933632397938690"
                  onClick={() => {
                    onChangeStatus(row)
                  }}
                >
                  {row.status ? '停用' : '启用'}
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="appSendConfig/update1790933865680932866"
                  onClick={() => {
                    state.showEdit = true
                    state.editRowData = deepClone(row)
                    state.editMode = 'edit'
                  }}
                >
                  修改
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="appSendConfig/remove1790933707882827777"
                  disabled={!!row.status}
                  onClick={() => {
                    onRmove(row)
                  }}
                >
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    return () => (
      <div class="system-menu-container">
        <div class={['section-container']}>
          <div class="system-menu-container">
            <SaveForm
              ref={saveForm}
              model={state.searchForm}
              onSubmit={onSubmit}
              saveKey="push-config-app"
              onSetModel={(val: any) => (state.searchForm = val)}
            >
              <NFormItem label="关键字" path="keyword">
                <NInput
                  placeholder="应用编号/名称"
                  v-model:value={state.searchForm.keyword}
                  clearable
                />
              </NFormItem>
              <NFormItem label="应用" path="appKey">
                <NSelect
                  placeholder="请选择应用"
                  v-model:value={state.searchForm.appKey}
                  options={state.appData}
                  clearable
                />
              </NFormItem>
              <NFormItem label="客户端" path="clientId">
                <NSelect
                  placeholder="请选择客户端"
                  v-model:value={state.searchForm.clientId}
                  options={getSelectDataFromObj(clientType)}
                  clearable
                />
              </NFormItem>
              <NFormItem label="状态" path="status">
                <NSelect
                  v-model:value={state.searchForm.status}
                  clearable
                  options={
                    [
                      {
                        label: '启用',
                        value: 1
                      },
                      {
                        label: '停用',
                        value: 0
                      }
                    ] as any
                  }
                  placeholder="全部状态"
                />
              </NFormItem>
              <NFormItem>
                <NSpace>
                  <NButton type="primary" onClick={onSearch}>
                    搜索
                  </NButton>
                  <NButton type="default" onClick={onBtnReset}>
                    重置
                  </NButton>
                </NSpace>
              </NFormItem>
            </SaveForm>

            <NSpace style={{ paddingBottom: '12px' }}>
              <NButton
                type="primary"
                v-auth="appSendConfig/save1790933794033831937"
                onClick={() => {
                  state.showEdit = true
                  state.editMode = 'add'
                }}
              >
                新增推送平台
              </NButton>
            </NSpace>

            <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="push-config-app"
              ></Pagination>
            </div>
            <NModal
              blockScroll={true}
              v-model:show={state.showEdit}
              preset="dialog"
              showIcon={false}
              title={(state.editMode == 'add' ? '新增' : '编辑') + '推送平台'}
              // style={{width: 'auto'}}
              style={{ width: '700px' }}
            >
              <PushConfigEdit
                editMode={state.editMode}
                rowData={state.editRowData}
                appData={state.appData}
                onClose={() => (state.showEdit = false)}
                onGetList={() => {
                  state.pagination.page = 1
                  getList()
                }}
              />
            </NModal>
          </div>
        </div>
      </div>
    )
  }
})