feat(web): improve send record UX with dropdowns

admin-web/src/views/SendRecord.vue

@@ -2,21 +2,19 @@
   <div>
     <el-form :model="form" label-width="80px">
       <el-form-item label="目标类型">
-        <el-select v-model="form.targetType" placeholder="选择目标类型">
+        <el-select v-model="form.targetType">
           <el-option label="会话" value="conversation" />
           <el-option label="人员" value="person" />
-          <el-option label="人员列表" value="person_list" />
-          <el-option label="标签" value="tag" />
         </el-select>
       </el-form-item>
-      <el-form-item label="目标值">
+      <el-form-item label="目标" v-if="form.targetType === 'conversation'">
-        <el-input v-model="targetValueJson" type="textarea" :rows="3" placeholder='{"conversation_id": 1}' />
+        <el-select v-model="selectedConversationId" placeholder="选择会话">
-      </el-form-item>
+          <el-option v-for="c in conversations" :key="c.id" :label="c.conversationName" :value="c.id" />
-      <el-form-item label="内容类型">
+        </el-select>
-        <el-input v-model="form.contentType" placeholder="text" />
       </el-form-item>
+      <el-form-item label="内容类型"><el-input v-model="form.contentType" disabled /></el-form-item>
       <el-form-item label="内容">
-        <el-input v-model="contentJson" type="textarea" :rows="3" placeholder='{"text": "hello"}' />
+        <el-input v-model="textContent" type="textarea" :rows="3" placeholder="输入文本消息" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleTestSend">测试发送</el-button>
@@ -25,15 +23,6 @@
 
     <el-divider />
 
-    <el-form :model="query" inline>
-      <el-form-item label="任务ID">
-        <el-input v-model="query.taskId" placeholder="任务ID" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">查询记录</el-button>
-      </el-form-item>
-    </el-form>
-
     <el-table :data="records" border>
       <el-table-column prop="id" label="ID" width="80" />
       <el-table-column prop="taskId" label="任务ID" />
@@ -53,58 +42,52 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed } from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { testSendMessage, listSendRecords } from '@/api/send'
+import { listConversations } from '@/api/channel'
 
-const form = reactive({
+const form = reactive({ targetType: 'conversation', contentType: 'text', channelStrategy: { channel_type: 'wecom', strategy: 'primary' } })
-  targetType: 'conversation',
+const selectedConversationId = ref<number | null>(null)
-  targetValue: {} as any,
+const textContent = ref('')
-  contentType: 'text',
-  content: {} as any,
-})
-
-const targetValueJson = computed({
-  get: () => JSON.stringify(form.targetValue, null, 2),
-  set: (val) => {
-    try { form.targetValue = JSON.parse(val) } catch {}
-  },
-})
-
-const contentJson = computed({
-  get: () => JSON.stringify(form.content, null, 2),
-  set: (val) => {
-    try { form.content = JSON.parse(val) } catch {}
-  },
-})
-
-const query = reactive({ taskId: '' })
 const records = ref<any[]>([])
+const conversations = ref<any[]>([])
+
+const targetValue = computed(() => {
+  if (form.targetType === 'conversation' && selectedConversationId.value) {
+    return { conversation_id: selectedConversationId.value }
+  }
+  return {}
+})
+
+async function loadRecords() {
+  const res: any = await listSendRecords()
+  records.value = res.data || []
+}
+
+async function loadConversations() {
+  const res: any = await listConversations()
+  conversations.value = res.data || []
+}
 
 async function handleTestSend() {
   try {
-    const res: any = await testSendMessage({
+    await testSendMessage({
       targetType: form.targetType,
-      targetValue: form.targetValue,
+      targetValue: targetValue.value,
-      contentType: form.contentType,
+      contentType: 'text',
-      content: form.content,
+      content: { text: textContent.value },
-      channelStrategy: { channel_type: 'wecom', strategy: 'primary' },
+      channelStrategy: form.channelStrategy,
     })
-    query.taskId = res.data.taskId
     ElMessage.success('测试发送已提交')
-    await handleQuery()
+    await loadRecords()
   } catch (e: any) {
     ElMessage.error(e.message)
   }
 }
 
-async function handleQuery() {
+onMounted(() => {
-  if (!query.taskId) return
+  loadRecords()
-  try {
+  loadConversations()
-    const res: any = await listSendRecords(query.taskId)
+})
-    records.value = res.data || []
-  } catch (e: any) {
-    ElMessage.error(e.message)
-  }
-}
 </script>