zhywpt-web/src/views/messagePush/pushManagement/sendingInformationApp/components/editDialog.vue

<template>
  <el-dialog v-model="isShow" width="50%" :title="title">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm" status-icon
      size="large" v-loading="isLoading">
      <div class="user-select-content">
        <el-form-item label="消息客户端" prop="clientId" style="width: 50%">
          <selectClientMessage v-model="ruleForm.clientId" messageType="APP" />
        </el-form-item>
        <el-form-item label="推送时间" prop="sendTime" style="width: 50%">
          <el-date-picker unlink-panels v-model="ruleForm.sendTime" type="datetime" placeholder="请选择推送时间，不选择则立即发送"
            :default-time="new Date()" style="width: 100%" value-format="YYYY-MM-DDTHH:mm:ss" :disabled-date="(time) => {
    return time.getTime() + 86400000 < Date.now() //禁止选择今天以前的时间
  }
    " />
        </el-form-item>
      </div>

      <div class="user-select-content">
        <el-form-item label="用户选择" style="width: 50%" prop="userInfo">
          <selectUserId v-model="extras.userInfo" :width="clientMessWidth" :userList="userList"
            @handleUserId="handleUserId" type="JPUSH" />
        </el-form-item>
        <el-form-item label="用户组选择" style="width: 50%" prop="staffIdentityTypes">
          <selectGroup v-model="ruleForm.userGroupInfo" :width="clientMessWidth" @handleUserGroupId="handleUserGroupId"
            type="JPUSH" />
        </el-form-item>
      </div>
      <el-form-item label="消息标题" prop="title" v-if="isStatus == 'all'">
        <el-input maxlength="60" v-trim clearable v-model="ruleForm.title" placeholder="请输入消息标题" />
      </el-form-item>
      <el-form-item label="通知栏标题" prop="title" v-if="isStatus == 'notifications'">
        <el-input maxlength="60" v-trim clearable v-model="ruleForm.title" placeholder="请输入通知栏标题" />
      </el-form-item>
      <el-form-item label="通知栏标题" prop="notificationTitle" v-if="isStatus == 'all'">
        <el-input maxlength="60" v-trim clearable v-model="ruleForm.notificationTitle" placeholder="请输入通知栏标题" />
      </el-form-item>

      <template v-if="isStatus == 'all' || isStatus == 'notifications'">
        <el-form-item label="通知栏内容" prop="notificationContent">
          <el-input maxlength="60" v-trim clearable placeholder="请输入通知栏内容" v-model="ruleForm.notificationContent" />
        </el-form-item>
        <el-form-item label="通知栏额外信息" prop="notificationExtras">
          <el-input maxlength="60" v-trim clearable placeholder="请输入通知栏额外信息" v-model="ruleForm.notificationExtras" />
        </el-form-item>
      </template>
      <el-form-item label="自定义消息标题" prop="msgTitle" v-if="isStatus == 'all'">
        <el-input maxlength="60" v-trim clearable placeholder="请输入自定义消息标题" v-model="ruleForm.msgTitle" />
      </el-form-item>
      <el-form-item label="自定义消息标题" prop="title" v-if="isStatus == 'custom'">
        <el-input maxlength="60" v-trim clearable placeholder="请输入自定义消息标题" v-model="ruleForm.title" />
      </el-form-item>
      <template v-if="isStatus == 'all' || isStatus == 'custom'">
        <el-form-item label="自定义消息内容" prop="msgContent">
          <el-input maxlength="200" v-trim clearable placeholder="请输入自定义消息内容" v-model="ruleForm.msgContent"
            type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
        </el-form-item>
        <el-form-item label="自定义额外信息" prop="msgExtra">
          <el-input maxlength="200" v-trim clearable placeholder="请输入自定义消息额外信息" v-model="ruleForm.msgExtra"
            type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" />
        </el-form-item>
      </template>
      <el-form-item>
        <div style="width: 100%" ref="inputRef">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            推送消息
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<!-- web端信息推送 -->
<script lang="ts" setup>
  import { ElMessage } from 'element-plus'

  // 请求函数
  // @ts-ignore
  import BaseService from '@/utils/baseService'
  import { computed, nextTick, onMounted, reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import selectClientMessage from '@/views/messagePush/pushManagement/components/selectClientMessage/index.vue'
  import selectUserId from '@/views/messagePush/pushManagement/components/selectUserId/index.vue'
  import selectGroup from '@/views/messagePush/pushManagement/components/selectGroup/index.vue'
  interface PropsType {
    modelValue: any
    dataList: any
  }
  const props = defineProps<PropsType>()
  const isStatus = ref('all')
  const title = computed(() => {
    let text: any = ''
    let description = props.dataList.description
    if (description) {
      description = description.split('-')
      text = description[description.length - 1]
    }

    return text
  })
  const emit = defineEmits(['update:modelValue', 'handleSendSuccess'])
  const isShow = computed({
    get: function () {
      if (props.modelValue) {
        getList() //获取详情数据回填
        nextTick(() => {
          clientMessWidth.value = inputRef.value.clientWidth
        })
      }
      return props.modelValue
    },
    set: function (newValue) {
      emit('update:modelValue', newValue)
    },
  })
  const getList = () => {
    // 重置
    ruleForm.value = {
      notificationTitle: '',
      notificationContent: '',
      title: '', //消息标题
      clientId: '',
      sendTime: '', //发送时间
      // registrationIdList: ['170976fa8b9699c5b8b'],
      registrationIdList: [],
      notificationExtras: '',
      msgTitle: '',
      msgContent: '',
      msgExtra: '',
      userGroupInfo: [], //用户组信息
    }
    isLoading.value = true
    BaseService.post('/msgw/message/view', {
      id: props.dataList.id,
    }).then((res: any) => {
      if (res && res.statusCode === 0) {
        let bizContent = res.data
        let data = bizContent.data || []
        for (const key in ruleForm.value) {
          ruleForm.value[key] = data[key]
        }
        console.log(data)
        const keys = Object.keys(data)
        console.log(keys)
        if (!keys.includes('notificationContent')) {
          isStatus.value = 'custom'
        }
        if (!keys.includes('msgContent')) {
          isStatus.value = 'notifications'
        }
        getUserInfo(
          data.openIdList,
          data.registrationIdList,
          data.wxOpenidList,
          data.mobileList,
          data.mpOpenidList
        )
      } else {
        ElMessage.error(res.message)
      }
    })
  }
  const userList = ref<any>([])
  // 获取用户信息
  const getUserInfo = async (
    openIdList,
    ridList,
    wxOpenidList,
    mobileList,
    mpOpenidList
  ) => {
    if (
      !openIdList &&
      !ridList &&
      !wxOpenidList &&
      !mobileList &&
      !mpOpenidList
    ) {
      return
    }
    await BaseService.post('/msgw/push/getbyconditionlist', {
      openIdList,
      ridList,
      wxOpenidList,
      mobileList,
      mpOpenidList,
    })
      .then((res: any) => {
        if (res && res.statusCode === 0) {
          let bizContent = res.data
          let data = bizContent.data || []
          userList.value = data
          console.log(data)
        } else {
          ElMessage.error(res.message)
        }
      })
      .finally(() => {
        isLoading.value = false
      })
  }
  interface RuleForm {
    notificationTitle: string
    notificationContent: string
    clientId: string
    registrationIdList: any
    sendTime: string
    notificationExtras: string
    msgTitle: string
    title: string
    msgContent: string
    msgExtra: string
    userGroupInfo: any
  }
  const ruleFormRef = ref<FormInstance>()
  const isLoading = ref(false) //加载效果
  let inputRef = ref()
  const clientMessWidth = ref(400)

  const extras: any = reactive({
    userInfo: [], //用户信息
    staffIdentityTypes: [], //用户组
  })
  const ruleForm = ref<RuleForm>({
    notificationTitle: '',
    notificationContent: '',
    title: '', //消息标题
    clientId: '',
    sendTime: '', //发送时间
    // registrationIdList: ['170976fa8b9699c5b8b'],
    registrationIdList: [],
    notificationExtras: '',
    msgTitle: '',
    msgContent: '',
    msgExtra: '',
    userGroupInfo: [], //用户组信息
  })
  const checkOpenIdList = (rule: any, value: any, callback: any) => {
    if (
      !ruleForm.value.registrationIdList.length &&
      !userGroupList.value.length
    ) {
      // callback(new Error('请至少选择一个用户或用户组'))
      callback()
    } else {
      callback()
    }
  }

  const rules = reactive<any>({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    notificationTitle: [
      { required: true, message: '请输入消息标题', trigger: 'blur' },
    ],
    notificationContent: [
      { required: true, message: '请输入消息内容', trigger: 'blur' },
    ],
    clientId: [{ required: true, message: '请选择消息标题', trigger: 'blur' }],
    msgTitle: [
      { required: true, message: '请输入自定义消息标题', trigger: 'blur' },
    ],
    msgContent: [
      { required: true, message: '请输入自定义消息内容', trigger: 'blur' },
    ],
    userInfo: [{ validator: checkOpenIdList, trigger: 'blur' }],
    staffIdentityTypes: [{ validator: checkOpenIdList, trigger: 'blur' }],
  })

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }

  // 用户组所有的id
  const userGroupList = ref<any>([])
  // 当前选择的用户端数据
  const handleUserId = (row) => {
    console.log(row)
    ruleForm.value.registrationIdList = row.map((item) => item.registrationId)
  }
  const handleUserGroupId = (row) => {
    userGroupList.value = row
  }

  const submitCode = {
    allUser: {
      //发送给所有用户
      all: '/msgw/channel/jpushallappnmedit',
      notifications: '/msgw/channel/jpushallappnedit', //通知栏
      custom: '/msgw/channel/jpushallappmedit',
    },
    appointUser: {
      //发送给指定用户
      all: '/msgw/channel/jpushallridnmedit',
      notifications: '/msgw/channel/jpushallridnedit',
      custom: '/msgw/channel/jpushallridmedit',
    },
  }
  // 请求参数处理
  const handleParams = () => {
    let params: any = {}
    // 参数处理
    for (const key in ruleForm.value) {
      // 需要跳过的
      if (['userGroupInfo'].includes(key)) continue
      const element = ruleForm.value[key]
      if (element || element === 0) {
        if (Array.isArray(element) && element.length === 0) {
          continue
        } else {
          params[key] = element
        }
      }
    }
    params.id = props.dataList.id
    return params
  }
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        let params: any = handleParams()
        let ifcodeObj: any = {}
        if (params.registrationIdList) {
          ifcodeObj = submitCode.appointUser
        } else {
          ifcodeObj = submitCode.allUser
        }
        submitHandle(ifcodeObj[isStatus.value], params, formEl)
      }
    })
  }
  // 消息推送
  const submitHandle = async (ifcode, params: any, formEl: FormInstance) => {
    isLoading.value = true
    console.log(ifcode, params)
    BaseService.post(ifcode, params)
      .then((res: any) => {
        isShow.value = false
        emit('handleSendSuccess')
        if (res && res.statusCode === 0) {
          ElMessage.success('消息修改成功')
        } else {
          ElMessage.error(`消息修改失败,原因：${res.message}`)
        }
      })
      .finally(() => {
        isLoading.value = false
      })
  }
</script>
<style scoped lang="less">
.user-select-content {
  display: flex;
}
</style>