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

import {defineComponent, onMounted, reactive, ref} from "vue";
import {NButton, NForm, NFormItemGi, NGrid, NInput, NInputNumber, NSelect, NSpace, useMessage} from "naive-ui";
import {getSelectDataFromObj} from "@/utils/objectUtil";
import {clientType, deviceType} from "@/utils/constant";
import {appSendConfigSave, appSendConfigUpdate} from "@views/message/api";

export default defineComponent({
  name: 'push-config-edit',
  props: {
    editMode: {
      type: String,
      required: true
    },
    rowData: {
      type: Object,
      required: false
    },
    appData: {
      type: [] as any,
      required: true
    },
  },
  emits: ['close', 'getList'],
  setup(props, {slots, attrs, emit}) {
    const message = useMessage()
    const btnLoading = ref(false)
    const forms = reactive<any>({
      name: null, // 平台名称
      sender: null, // 平台标识
      appKey: null, // 应用端
      accessUrl: null, // 接入地址
      clientId: null, // 客户端
      apnsProduction: null as any, // 推送环境
      account: null, // 接入账号
      password: null, // 接入密码
      timeToLive: null as any, // 离线保存时长
      extendData: null, // 扩展参数
      thirdPartyChannel: null, // 三方渠道参数
      deviceType: null, // 设备类型
    })
    const formsRef = ref()

    const state = reactive({
      rowData: null as any,
      musicSheetCategories: [] as any,
      appData: [] as any,
    })

    onMounted(async () => {
      state.rowData = props.rowData
      if (props.editMode == 'edit' && props.rowData) {
        forms.name = state.rowData.name
        forms.sender = state.rowData.sender
        forms.appKey = state.rowData.appKey
        forms.clientId = state.rowData.clientId
        forms.apnsProduction = state.rowData.apnsProduction
        forms.account = state.rowData.account
        forms.password = state.rowData.password
        forms.timeToLive = Number.parseFloat(state.rowData.timeToLive)/3600
        forms.accessUrl = state.rowData.accessUrl
        forms.extendData = state.rowData.extendData
        forms.thirdPartyChannel = state.rowData.thirdPartyChannel
        forms.deviceType = state.rowData.deviceType
      }
      // 客户端


      // 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.id + ''})
      //   })
      // }
    })

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        btnLoading.value = true
        try {
          let res;
          if (props.editMode == 'add') {
            res = await appSendConfigSave(
                {
                  ...forms,
                  timeToLive: Number.parseFloat(forms.timeToLive) * 3600
                }
            ) as any;
          } else {
            res = await appSendConfigUpdate(
                {
                  ...forms,
                  id: state.rowData.id,
                  timeToLive: Number.parseFloat(forms.timeToLive) * 3600
                }
            ) as any;
          }
          if (res && res.code === 200) {
            emit('close')
            emit('getList')
          }
        } catch (error) {
        }
        btnLoading.value = false
      })
    }

    return () => {
      return (
          <div style="background: #fff; padding-top: 12px">
            <NForm
                ref={formsRef}
                labelPlacement="top"
                model={forms}
                label-placement="left"
                label-width="100"
            >
              <NGrid cols={2}>
                <NFormItemGi
                    label="平台名称"
                    path="name"
                    rule={[
                      {
                        required: true,
                        message: '请输入平台名称'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.name}
                      placeholder="请输入平台名称"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="平台标识"
                    path="sender"
                    rule={[
                      {
                        required: true,
                        message: '请输入平台标识'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.sender}
                      placeholder="请输入平台标识"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="接入应用"
                    path="appKey"
                    rule={[
                      {
                        required: true,
                        message: '请输入接入应用'
                      }
                    ]}
                >
                  <NSelect
                      v-model:value={forms.appKey}
                      placeholder="请输入接入应用"
                      options={props.appData}
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="客户端"
                    path="clientId"
                    rule={[
                      {
                        required: true,
                        message: '请选择客户端'
                      }
                    ]}
                >
                  <NSelect
                      v-model:value={forms.clientId}
                      options={getSelectDataFromObj(clientType)}
                      placeholder="请选择客户端"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="接入地址"
                    path="accessUrl"
                    rule={[
                      {
                        required: true,
                        message: '请输入接入地址'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.accessUrl}
                      placeholder="请输入接入地址"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="推送环境"
                    path="apnsProduction"
                    rule={[
                      {
                        required: true,
                        message: '请输入推送环境',
                        type: 'boolean'
                      }
                    ]}
                >
                  <NSelect
                      v-model:value={forms.apnsProduction}
                      placeholder="请输入推送环境"
                      options={[
                        {
                          label: '线上',
                          value: true
                        }, {
                          label: '开发',
                          value: false
                        }

                      ] as any}
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="接入key"
                    path="account"
                    rule={[
                      {
                        required: true,
                        message: '请输入接入key'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.account}
                      placeholder="请输入接入key"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="接入密钥"
                    path="password"
                    rule={[
                      {
                        required: true,
                        message: '请输入接入密钥'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.password}
                      placeholder="请输入接入密码"
                      clearable
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="离线保留时长(小时)"
                    path="timeToLive"
                    rule={[
                      {
                        required: true,
                        message: '请输入离线保留时长(小时)'
                      }
                    ]}
                >
                  <NInputNumber
                      v-model:value={forms.timeToLive}
                      placeholder="请输入离线保留时长(小时)"
                      min={0}
                  />
                </NFormItemGi>
                <NFormItemGi
                    label="设备类型"
                    path="deviceType"
                    rule={[
                      {
                        required: false,
                        message: '请选择设备类型'
                      }
                    ]}
                >
                  <NSelect
                      placeholder="请选择设备类型"
                      v-model:value={forms.deviceType}
                      options={getSelectDataFromObj(deviceType)}
                      clearable
                  />
                </NFormItemGi>
              </NGrid>
              <NGrid cols={1}>
                <NFormItemGi
                    label="拓展参数"
                    path="extendData"
                    rule={[
                      {
                        required: false,
                        message: '请输入拓展参数'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.extendData}
                      placeholder="请输入拓展参数"
                      autosize={{minRows: 3}}
                      type={'textarea'}
                  />
                </NFormItemGi>
              </NGrid>
              <NGrid cols={1}>
                <NFormItemGi
                    label="三方渠道参数"
                    path="thirdPartyChannel"
                    rule={[
                      {
                        required: false,
                        message: '请输入三方渠道参数'
                      }
                    ]}
                >
                  <NInput
                      v-model:value={forms.thirdPartyChannel}
                      placeholder="请输入三方渠道参数"
                      autosize={{minRows: 3}}
                      type={'textarea'}
                  />
                </NFormItemGi>
              </NGrid>
            </NForm>

            <NSpace justify="end">
              <NButton onClick={() => emit('close')}>取消</NButton>
              <NButton type="primary" onClick={onSubmit}
                       loading={btnLoading.value}
                       disabled={btnLoading.value}
              >
                保存
              </NButton>
            </NSpace>
          </div>
      )
    }
  }
})