.

src/router/index.js

@@ -61,6 +61,11 @@ const router = createRouter({
                     meta: {
                         title: '任务列表'
                     }
+                },
+                {
+                    path: '/device',
+                    name: 'device',
+                    component: () => import('../views/DeviceView.vue')
                 }
             ]
         }

src/views/DeviceView.vue

@@ -0,0 +1,50 @@
+<template>
+    <PagingTable url="/rcs/device" :where="where" ref="table">
+        <template #filter>
+            <ElButton :icon="Refresh" @click="table.refresh()"></ElButton>
+        </template>
+        <ElTableColumn prop="id" label="#" width="200" />
+        <ElTableColumn prop="model" label="型号" />
+        <ElTableColumn prop="online" label="在线" align="center">
+            <template #default="{ row }">
+                <ElTag type="success" v-if="row.online">在线</ElTag>
+                <ElTag type="danger" v-else>离线</ElTag>
+            </template>
+        </ElTableColumn>
+        <ElTableColumn prop="canSend" label="可发送" align="center">
+            <template #default="{ row }">
+                <ElTag type="success" v-if="row.canSend">可以发送</ElTag>
+                <ElTag type="danger" v-else>不可发送</ElTag>
+            </template>
+        </ElTableColumn>
+        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
+        <ElTableColumn label="操作" align="center" width="100">
+            <template #default="{ row }">
+                <ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
+            </template>
+        </ElTableColumn>
+    </PagingTable>
+</template>
+<script setup>
+import { ref } from 'vue'
+import PagingTable from '@/components/PagingTable.vue'
+import { useTimeFormatter } from '@/utils/formatter'
+import { Plus, Refresh } from '@vicons/tabler'
+import EditDialog from '@/components/EditDialog.vue'
+import { setupEditDialog } from '@/utils/editDialog'
+import EnumSelect from '@/components/EnumSelect.vue'
+import { UserRole } from '@/enums'
+import { http } from '@/plugins/http'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useClipboard } from '@vueuse/core'
+
+const where = ref({})
+const timeFormatter = useTimeFormatter()
+const table = ref(null)
+const model = ref({})
+const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }]
+}
+const { showEditDialog, onEdit } = setupEditDialog(model)
+</script>

src/views/MainView.vue

@@ -81,6 +81,10 @@ const menus = [
             {
                 name: '/task',
                 title: '任务列表'
+            },
+            {
+                name: '/device',
+                title: '设备列表'
             }
         ]
     },

src/views/PhoneListView.vue

@@ -27,6 +27,7 @@
         <PagingTable url="/rcs/phone" :where="{ listId: (selectedRow || {}).id }" ref="phoneTable" height="50vh">
             <template #filter>
                 <ElButton :icon="Plus" @click="onPhoneEdit()">添加</ElButton>
+                <ElButton :icon="Plus" @click="importList()">导入</ElButton>
             </template>
             <ElTableColumn prop="id" label="#" width="80" />
             <ElTableColumn prop="number" label="号码" min-width="120" />
@@ -122,4 +123,18 @@ function delPhone(row) {
         })
     })
 }
+function importList() {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.txt'
+    input.onchange = async () => {
+        const file = input.files[0]
+        const formData = new FormData()
+        formData.append('file', file)
+        await http.post(`/rcs/phone-list/${selectedRow.value.id}/import`, formData)
+        ElMessage.success('导入成功')
+        phoneTable.value.refresh()
+    }
+    input.click()
+}
 </script>

src/views/TaskView.vue

@@ -7,17 +7,19 @@
         <ElTableColumn prop="name" label="名称" min-width="120" />
         <ElTableColumn prop="remark" label="备注" show-overflow-tooltip />
         <ElTableColumn prop="listId" label="发送列表" :formatter="phoneListFormatter" />
+        <ElTableColumn prop="status" label="状态" :formatter="statusFormatter" />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
         <ElTableColumn label="操作" align="center" width="200">
             <template #default="{ row }">
                 <ElButton type="primary" size="small" @click="detail(row)">详情</ElButton>
-                <ElButton type="danger" size="small" @click="del(row)">删除</ElButton>
+                <ElButton type="primary" size="small" @click="start(row)" v-if="row.status==='idle'">开始</ElButton>
+                <ElButton type="danger" size="small" @click="del(row)" v-if="row.status==='idle'">删除</ElButton>
             </template>
         </ElTableColumn>
     </PagingTable>
     <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
-        <ElFormItem prop="name" label="昵称">
-            <ElInput v-model="model.name" placeholder="请输入昵称" />
+        <ElFormItem prop="name" label="名称">
+            <ElInput v-model="model.name" placeholder="请输入名称" />
         </ElFormItem>
         <ElFormItem prop="remark" label="备注">
             <ElInput v-model="model.remark" placeholder="请输入备注" />
@@ -27,12 +29,16 @@
                 <ElOption v-for="item in phoneList" :key="item.id" :label="item.name" :value="item.id" />
             </ElSelect>
         </ElFormItem>
+        <ElFormItem prop="message" label="内容">
+            <ElInput v-model="model.message" placeholder="请输入内容" />
+        </ElFormItem>
     </EditDialog>
 
     <ElDialog v-model="showDetailDialog" title="详情" width="800px">
         <PagingTable url="/rcs/task-item" :where="{ taskId: (selectedRow || {}).id }" ref="phoneTable" height="50vh">
             <ElTableColumn prop="id" label="#" width="80" />
             <ElTableColumn prop="number" label="号码" min-width="120" />
+            <ElTableColumn prop="status" label="状态" :formatter="statusFormatter" />
         </PagingTable>
     </ElDialog>
 
@@ -67,7 +73,8 @@ const table = ref(null)
 const model = ref({})
 const rules = {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-    listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }]
+    listId: [{ required: true, message: '请选择发送列表', trigger: 'blur' }],
+    message: [{ required: true, message: '请输入内容', trigger: 'blur' }]
 }
 const { showEditDialog, onEdit } = setupEditDialog(model)
 async function submit() {
@@ -106,4 +113,25 @@ const phoneRules = {
     number: [{ required: true, message: '请输入号码', trigger: 'blur' }]
 }
 const { showEditDialog: showPhoneEditDialog, onEdit: onPhoneEdit } = setupEditDialog(phoneModel)
+function statusFormatter(row, column, cellValue, index) {
+    switch (cellValue) {
+        case 'idle':
+            return '未发送'
+        case 'pending':
+            return '发送中'
+        case 'completed':
+            return '已发送'
+        case 'error':
+            return '错误'
+        default:
+            return '未知'
+    }
+}
+async function start(row) {
+    await ElMessageBox.confirm('确定开始发送吗？', '提示', {
+        type: 'warning'
+    })
+    await http.post(`/rcs/task/${row.id}/start`)
+    table.value.refresh()
+}
 </script>