小程序

src/views/messagePush/pushManagement/wechatApplet/components/stepFrom/oneBasicInformation.vue

@@ -14,8 +14,15 @@
       </el-form-item>
     </div>
     <el-form-item label="用户选择" style="width: 100%" prop="userInfo">
-      <selectUserId v-model="ruleForm.userInfo" :width="clientMessWidth" :userList="userList" type="MINI_PROGRAM"
-        @handleUserId="handleUserId" />
+      <div style="display: flex; align-items: center; gap: 10px;width: 100%;">
+        <selectUserId v-model="ruleForm.userInfo" :width="clientMessWidth" :userList="userList" type="MINI_PROGRAM"
+          @handleUserId="handleUserId" style="flex: 1;" :disabled="isFileUploaded" />
+        <el-upload ref="uploadRef" v-model:file-list="fileList" :on-exceed="handleExceed" :action="BaseService.getFileUploadUrl()"
+          @success="handleSuccess" accept=".xls, .xlsx" :limit="1" :multiple="false" :auto-upload="true"
+          style="display: inline-block;" :disabled="isUserSelected">
+          <el-button type="primary" icon="Upload" :disabled="isUserSelected">文件导入</el-button>
+        </el-upload>
+      </div>
     </el-form-item>
     <el-form-item label="消息标题" prop="title">
       <div class="clientId-content" ref="clientIdRef">
@@ -33,6 +40,8 @@
   // 请求函数
   import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
   import type { FormInstance } from 'element-plus'
+  import { ElMessage } from 'element-plus'
+  import BaseService from '@/utils/baseService'
   // @ts-ignore
   import selectClientMessage from '@/views/messagePush/pushManagement/components/selectClientMessage/index.vue'
   // @ts-ignore
@@ -54,6 +63,14 @@
   const isLoading = ref(false) //加载效果
   const clientIdRef = ref()
   const clientMessWidth = ref(400)
+  const uploadRef = ref()
+  const fileList = ref([])
+  const isUserSelected = ref(false)
+  const isFileUploaded = ref(false)
+  const uploadedFileInfo = ref({
+    attachmentName: '',
+    attachmentUrl: ''
+  })
   const ruleForm = reactive<RuleForm>({
     title: '',
     userInfo: [], //用户信息
@@ -79,11 +96,46 @@
       })
     }
   })
+
+  // 监听用户选择状态
+  watchEffect(() => {
+    isUserSelected.value = ruleForm.userInfo && ruleForm.userInfo.length > 0
+    if (isUserSelected.value && isFileUploaded.value) {
+      // 如果用户选择了用户，清空文件列表并重置文件上传状态
+      fileList.value = []
+      isFileUploaded.value = false
+      uploadedFileInfo.value = {
+        attachmentName: '',
+        attachmentUrl: ''
+      }
+    }
+  })
+
+  // 监听文件上传状态
+  watchEffect(() => {
+    isFileUploaded.value = fileList.value && fileList.value.length > 0
+    if (isFileUploaded.value && isUserSelected.value) {
+      // 如果上传了文件，清空用户选择并重置用户选择状态
+      ruleForm.userInfo = []
+      ruleForm.wxOpenidList = []
+      isUserSelected.value = false
+    }
+  })
   const rules = reactive<any>({
     title: [{ required: true, message: '请输入消息标题', trigger: 'blur' }],
     clientId: [{ required: true, message: '请选择消息标题', trigger: 'blur' }],
     userInfo: [
-      { required: true, message: '请选择接收信息的用户', trigger: 'blur' },
+      { 
+        required: true, 
+        validator: (rule, value, callback) => {
+          if (!isUserSelected.value && !isFileUploaded.value) {
+            callback(new Error('请选择接收信息的用户或上传用户文件'))
+          } else {
+            callback()
+          }
+        }, 
+        trigger: 'blur' 
+      },
     ],
   })
 
@@ -92,6 +144,25 @@
     // console.log(row)
     ruleForm.wxOpenidList = row.map((item) => item.wxOpenid)
   }
+
+  // 文件上传相关方法
+  const handleExceed = (files) => {
+    ElMessage.warning(`最多只能上传1个文件`)
+  }
+
+  const handleSuccess = (response, file) => {
+    if (response && response.statusCode === 0) {
+      ElMessage.success('文件上传成功')
+      // 保存文件上传返回的信息
+      uploadedFileInfo.value = {
+        attachmentName: response.data?.attachmentName || file.name,
+        attachmentUrl: response.data?.attachmentUrl || response.data?.url || ''
+      }
+      console.log('上传成功', response)
+    } else {
+      ElMessage.error('文件上传失败')
+    }
+  }
   const emits = defineEmits(['handleTem', 'oneNextHandle'])
   // 获取小程序模板
   const getTemData = (clientId) => {
@@ -109,6 +180,19 @@
         params[key] = data[key]
       }
     }
+    
+    // 根据是否上传文件来决定传递哪些参数
+    if (isFileUploaded.value && uploadedFileInfo.value.attachmentName && uploadedFileInfo.value.attachmentUrl) {
+      // 如果是文件导入，传递文件信息，不传递receiverIdList
+      params.attachmentName = uploadedFileInfo.value.attachmentName
+      params.attachmentUrl = uploadedFileInfo.value.attachmentUrl
+      // 确保不传递receiverIdList
+      delete params.wxOpenidList
+    } else if (isUserSelected.value && ruleForm.wxOpenidList && ruleForm.wxOpenidList.length > 0) {
+      // 如果是用户选择，传递receiverIdList
+      params.receiverIdList = ruleForm.wxOpenidList
+    }
+    
     return params
   }
   // 消息推送
@@ -135,4 +219,7 @@
 .user-select-content {
   display: flex;
 }
+::v-deep .el-upload-list{
+  margin:0!important;
+}
 </style>

src/views/messagePush/pushManagement/wechatApplet/index.vue

@@ -16,9 +16,9 @@
         </el-select>
       </template>
       <template #searchCustomButton>
-        <el-button type="primary" icon="Upload" @click="isUploadShow = true">
+        <!-- <el-button type="primary" icon="Upload" @click="isUploadShow = true">
           导入
-        </el-button>
+        </el-button> -->
       </template>
       <template #CustomButton>
         <el-button type="primary" @click="handleAdd">小程序信息推送</el-button>