调整boss页面展示

2026-03-01 23:00:17 +08:00
parent 094dde13d5
commit 9113051182
4 changed files with 143 additions and 62 deletions
--- a/src/api/TaskManagement/index.ts
+++ b/src/api/TaskManagement/index.ts
@@ -5,9 +5,9 @@ import request from '@/utils/request'
 * */

 // 查询任务列表
-export const ApiTasks = () => {
+export const ApiTasks = (boss_id: string) => {
  return request({
-    url: `/api/tasks`,
+    url: `/api/tasks/${boss_id}`,
    method: 'get'
  })
 }
--- a/src/utils/functionDialogBox/index.ts
+++ b/src/utils/functionDialogBox/index.ts
@@ -4,6 +4,7 @@ import { h, createApp } from 'vue'
 import { throttle } from '@/utils/auxiliaryFunction'
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 // 定义模态框属性接口
 interface ModalProps {
@@ -73,6 +74,10 @@ export const functionDialogBox = (

  const div = document.createElement('div')
  document.body.appendChild(div)
+
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
  app.use(ElementPlus, {
    locale: zhCn
  })
--- a/src/views/BoosAccountManagement/components/ViewTheTaskListDetails.vue
+++ b/src/views/BoosAccountManagement/components/ViewTheTaskListDetails.vue
@@ -1,38 +1,68 @@
 <template>
-  <el-table
-    ref="dataTableRef"
-    :data="roleList"
-    highlight-current-row
-    border
-    class="data-table__content"
-  >
-    <el-table-column label="任务类型" prop="task_type">
-      <template #default="scope">
-        <span>{{ scope.row.task_type === 'check_login' ? '检查登录' : '招聘' }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column label="指定电脑" prop="worker_id" />
-    <el-table-column label="环境名称" prop="account_name" />
-    <!--    <el-table-column label="任务参数" prop="progress" />-->
-    <el-table-column label="任务状态" prop="status">
-      <template #default="scope">
-        <el-tag v-if="scope.row.status === 'success'" type="success">成功</el-tag>
-        <el-tag v-else-if="scope.row.status === 'failed'" type="danger">失败</el-tag>
-      </template>
-    </el-table-column>
-    <el-table-column label="创建时间" prop="created_at" />
-  </el-table>
+  <div style="padding: 10px; display: flex; flex-direction: column; align-items: end">
+    <div style="display: flex; align-items: center; gap: 10px">
+      <el-tag type="info">任务数 {{ roleList?.length }}</el-tag>
+      <el-button type="primary" link icon="refresh" @click="fetchData">刷新任务</el-button>
+    </div>
+    <el-table
+      ref="dataTableRef"
+      :data="roleList"
+      highlight-current-row
+      border
+      show-overflow-tooltip
+      class="data-table__content"
+    >
+      <el-table-column label="任务类型" prop="task_type">
+        <template #default="scope">
+          <span>{{ scope.row.task_type === 'check_login' ? '检查登录' : '招聘' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="指定电脑" prop="worker_id" />
+      <el-table-column label="环境名称" prop="account_name" />
+      <el-table-column label="任务进度" prop="progress" />
+      <el-table-column
+        label="任务状态"
+        prop="status"
+        width="90px"
+        align="center"
+        header-align="center"
+      >
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 'success'" type="success">成功</el-tag>
+          <el-tag v-else-if="scope.row.status === 'failed'" type="danger">失败</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="created_at">
+        <template #default="scope">
+          {{ formatISOToDateTime(scope.row?.created_at || '') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="完成时间" prop="updated_at">
+        <template #default="scope">
+          {{ formatISOToDateTime(scope.row?.updated_at || '') }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>

 <script setup lang="ts">
 // 表格数据
 import { ApiTasks } from '@/api/TaskManagement'
+import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
+
+const props = defineProps({
+  bossId: {
+    type: String,
+    default: ''
+  }
+})

 const roleList = ref<any[]>()

 // 获取数据
 function fetchData() {
-  ApiTasks().then((res: any) => {
+  ApiTasks(props.bossId).then((res: any) => {
    roleList.value = res.data
  })
 }
--- a/src/views/BoosAccountManagement/index.vue
+++ b/src/views/BoosAccountManagement/index.vue
@@ -47,10 +47,20 @@
        v-loading="loading"
        :data="roleList"
        highlight-current-row
+        row-key="id"
        border
+        :expanded-row-keys="expandedRowKeys"
        class="data-table__content"
-        @selection-change="handleSelectionChange"
+        @expand-change="handleExpandChange"
      >
+        <el-table-column type="expand">
+          <template #default="scope">
+            <ViewTheTaskListDetails
+              v-if="expandedRowKeys.includes(scope.row.id)"
+              :boss-id="scope.row.id"
+            ></ViewTheTaskListDetails>
+          </template>
+        </el-table-column>
        <el-table-column label="环境名称" prop="browser_name" />
        <el-table-column label="电脑标识" prop="worker_id" />
        <el-table-column label="浏览器环境名称" prop="browser_name" />
@@ -63,7 +73,13 @@
            <span v-else>--</span>
          </template>
        </el-table-column>
-        <el-table-column label="否已登录 BOSS" prop="is_logged_in">
+        <el-table-column
+          label="否已登录 BOSS"
+          prop="is_logged_in"
+          width="140"
+          align="center"
+          header-align="center"
+        >
          <template #default="scope">
            <el-tag v-if="scope.row.worker_online" type="success">
              {{ '在线' }}
@@ -73,7 +89,13 @@
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column label="Worker 是否在线" prop="worker_online">
+        <el-table-column
+          label="Worker 是否在线"
+          prop="worker_online"
+          width="140"
+          align="center"
+          header-align="center"
+        >
          <template #default="scope">
            <el-tag v-if="scope.row.worker_online" type="success">
              {{ '在线' }}
@@ -83,7 +105,13 @@
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column label="任务状态" prop="current_task_status">
+        <el-table-column
+          label="任务状态"
+          prop="current_task_status"
+          width="100"
+          align="center"
+          header-align="center"
+        >
          <template #default="scope">
            <el-tag v-if="scope.row.current_task_status === 'pending'" type="primary">
              {{ '待派发' }}
@@ -108,7 +136,7 @@
            {{ formatISOToDateTime(scope.row?.updated_at || '') }}
          </template>
        </el-table-column>
-        <el-table-column fixed="right" label="操作" width="250">
+        <el-table-column fixed="right" label="操作" width="300">
          <template #default="scope">
            <!--            <el-button-->
            <!--              type="primary"-->
@@ -119,14 +147,28 @@
            <!--            >-->
            <!--              详情-->
            <!--            </el-button>-->
+            <!--            <el-button-->
+            <!--              type="primary"-->
+            <!--              size="small"-->
+            <!--              link-->
+            <!--              icon="edit"-->
+            <!--              @click="onApiTasksAdd(scope.row.id)"-->
+            <!--            >-->
+            <!--              发布任务-->
+            <!--            </el-button>-->
            <el-button
              type="primary"
              size="small"
-              link
-              icon="edit"
-              @click="onApiTasksAdd(scope.row.id)"
+              @click="onApiTasksAdd(scope.row.id, 'check_login', '')"
            >
-              发布任务
+              检查登录
+            </el-button>
+            <el-button
+              type="success"
+              size="small"
+              @click="onApiTasksAdd(scope.row.id, 'boss_recruit', '')"
+            >
+              招聘
            </el-button>
            <el-button
              type="primary"
@@ -169,7 +211,7 @@ import { BusinessEditApplication } from '@/api/calibration/applicationForSealApp
 import { ApiAccounts, ApiAccountsAdd, ApiAccountsDelete } from '@/api/BoosAccountManagement'
 import ViewTheTaskListDetails from './components/ViewTheTaskListDetails.vue'
 import { ApiTasksAdd } from '@/api/TaskManagement'
-import TaskForm from '@/views/TaskManagement/components/TaskForm.vue'
+// import TaskForm from '@/views/TaskManagement/components/TaskForm.vue'
 import { formatISOToDateTime } from '@/utils/auxiliaryFunction'
 import { createTimer } from '@/utils/TimerManager'

@@ -183,7 +225,6 @@ const { startTimer, stopTimer } = createTimer()
 const queryFormRef = ref()

 const loading = ref(false)
-const ids = ref<number[]>([])
 const total = ref(0)

 const queryParams = reactive<any>({
@@ -196,7 +237,7 @@ const queryParams = reactive<any>({

 // 表格数据
 const roleList = ref<RolePageVO[]>()
-
+const expandedRowKeys = ref<string[]>([])
 // 弹窗
 const dialog = reactive({
  title: '',
@@ -229,11 +270,6 @@ function handleResetQuery() {
  fetchData()
 }

-// 行复选框选中
-function handleSelectionChange(selection: any) {
-  ids.value = selection.map((item: any) => item.id)
-}
-
 // 打开角色弹窗
 function handleOpenDialog(data: any = null) {
  dialog.visible = true
@@ -312,33 +348,43 @@ const onDetails = (id: string) => {
  functionDialogBox(
    ViewTheTaskListDetails,
    {
-      boss_id: id
+      bossId: id
    },
    {
      title: '任务列表',
-      width: '900',
+      width: '1200',
      footerVisible: false
    }
  )
 }

-const onApiTasksAdd = (id: string) => {
-  functionDialogBox(
-    TaskForm,
-    {},
-    {
-      title: '提交新任务',
-      width: '900',
-      ok(value: any) {
-        ApiTasksAdd({ ...value, boss_id: id })
-          .then(() => {
-            ElMessage.success('提交成功')
-            handleResetQuery()
-          })
-          .finally(() => (loading.value = false))
-      }
-    }
-  )
+const onApiTasksAdd = (id: string, task_type: string, params: string) => {
+  // functionDialogBox(
+  //   TaskForm,
+  //   {},
+  //   {
+  //     title: '提交新任务',
+  //     width: '900',
+  //     ok(value: any) {
+  //       ApiTasksAdd({ ...value, boss_id: id })
+  //         .then(() => {
+  //           ElMessage.success('提交成功')
+  //           handleResetQuery()
+  //         })
+  //         .finally(() => (loading.value = false))
+  //     }
+  //   }
+  // )
+
+  ApiTasksAdd({ params, task_type, boss_id: id })
+    .then(() => {
+      ElMessage.success('提交成功')
+      handleResetQuery()
+    })
+    .finally(() => (loading.value = false))
+}
+function handleExpandChange(row: any, expandedRows: any[]) {
+  expandedRowKeys.value = expandedRows.map((item) => item.id)
 }

 // const onApiTasksTaskId = (task_id: string) => {