zhywpt-web/src/views/messagePush/pushManagement/wechatOfficialAccounts/components/addOrEditDialog.vue

<template>
  <el-dialog v-model="isShow" width="50%" :title="title" @closed="closed">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="选择客户端" />
      <el-step title="选择模板" />
      <el-step title="其他数据填写" />
    </el-steps>
    <div style="margin-top: 15px" v-loading="isLoading">
      <oneBasicInformation
        v-show="active === 0"
        @handleTem="handleTem"
        :dataList="currentData"
        @oneNextHandle="nextHandle($event, 1)"
        :userList="userList"
        :isShow="isShow"
      />
      <twoBasicInformation
        v-show="active === 1"
        :temData="temData"
        :dataList="currentData"
        @twoNextHandle="nextHandle($event, 2)"
        :isShow="isShow"
        @backStep="backStep"
      />
      <threeBasicInformation
        v-show="active === 2"
        :dataList="currentData"
        @submitHandle="submitHandle"
        :isShow="isShow"
        @backStep="backStep"
      />
    </div>
  </el-dialog>
</template>

<!-- web端信息推送 -->
<script lang="ts" setup>
// 请求函数
// @ts-ignore
import BaseService from '@/utils/baseService'
import { computed, ref } from 'vue'
import oneBasicInformation from './stepFrom/oneBasicInformation.vue'
import twoBasicInformation from './stepFrom/twoBasicInformation.vue'
import threeBasicInformation from './stepFrom/threeBasicInformation.vue'
import { ElMessage } from 'element-plus'

const active = ref(0)

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '微信公众号信息推送',
  },
  dataList: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits([
  'update:modelValue',
  'handleSendSuccess',
  'handleClose',
])
const isShow = computed({
  get: function () {
    if (props.modelValue && props.dataList.id) {
      getList() //获取详情数据回填
    }
    return props.modelValue
  },
  set: function (newValue) {
    emit('update:modelValue', newValue)
  },
})

const closed = () => {
  emit('handleClose')
}
// 模板数据
const temData = ref<any>([])

let ruleForm: any = ref({})
// 下一步
const nextHandle = (data, step) => {
  ruleForm.value = {
    ...ruleForm.value,
    ...data,
  }
  active.value = step
}
// 上一步
const backStep = () => {
  active.value--
}

// 提交处理
const submitHandle = (data) => {
  ruleForm.value = {
    ...ruleForm.value,
    ...data,
  }
  let ifcode = ''
  let text = ''
  if (currentData.value.clientId) {
    ruleForm.value = {
      ...ruleForm.value,
      id: props.dataList.id,
    }
    ifcode = '/msgw/channel/wxmpsendmessageedit'
    text = '编辑'
  } else {
    ifcode = '/msgw/channel/wxmpsendmessage'
    text = '推送'
  }
  isLoading.value = true
  console.log(ruleForm.value)

  BaseService.post(ifcode, {
    ...ruleForm.value,
  })
    .then((res: any) => {
      isShow.value = false
      emit('handleSendSuccess')
      if (res && res.statusCode === 0) {
        console.log(res)
        ElMessage.success(`消息${text}成功`)
      } else {
        ElMessage.error(`消息${text}失败,原因：${res.message}`)
      }
    })
    .finally(() => {
      isLoading.value = false
    })
}

const isLoading = ref(false)
const currentData = ref<any>({})
const getList = () => {
  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 || []
      currentData.value = data
      Promise.allSettled([
        handleTem(data.clientId),
        getUserInfo(
          data.openIdList,
          data.registrationIdList,
          data.wxOpenidList,
          data.mobileList,
          data.mpOpenidList
        ),
      ]).then(() => {
        isLoading.value = false
      })
    } else {
      ElMessage.error(res.message)
    }
  })
}
const userList = ref<any>([])
// 获取公众号模板
const handleTem = async (clientId) => {
  await BaseService.post('/msgw/channel/wxmpmessagelist', { clientId }).then(
    (res: any) => {
      if (res && res.statusCode === 0) {
        const bizContent = res.data
        console.log(bizContent)

        let data = bizContent.data || []
        data = data.filter((item) => {
          return item.example !== ''
        })
        temData.value = [...data]
      } else {
        ElMessage.error(res.message)
      }
    }
  )
}

// 获取用户信息
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
    } else {
      ElMessage.error(res.message)
    }
  })
}
</script>