From 9517da9a58e0415be4e5a3f1911cf86997ab74f8 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 20 May 2025 20:59:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=AE=9E=E9=AA=8C=E5=92=8C=E5=AE=9E?=
 =?UTF-8?q?=E9=AA=8C=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/home.ts                              |   9 +-
 src/assets/styles/element.scss                |   7 ++
 src/components/common/FTButton/index.vue      |   7 +-
 src/components/common/FTTable/index.vue       | 171 ++++++++++++++++++--------
 src/components/home/SetTemperature/index.vue  |   4 +-
 src/components/home/StartExperiment/index.vue |   6 +-
 src/components/home/Tube/index.vue            |   3 +-
 src/hooks/useActivateDebug.ts                 |   8 ++
 src/layouts/default.vue                       |  24 +++-
 src/router/index.ts                           |   4 +-
 src/router/routes.ts                          |   6 +-
 src/stores/systemStore.ts                     |   4 +-
 src/types/home.d.ts                           |   1 +
 src/types/system.d.ts                         |   2 +
 src/types/task.d.ts                           |  26 ++++
 src/types/user.d.ts                           |   4 +-
 src/views/debug/index.vue                     |   3 -
 src/views/home/index.vue                      |  17 ++-
 src/views/point/index.vue                     |   2 +-
 src/views/taskLog/index.vue                   |  81 ++++++++++++
 20 files changed, 314 insertions(+), 75 deletions(-)
 create mode 100644 src/types/task.d.ts
 create mode 100644 src/views/taskLog/index.vue

diff --git a/src/apis/home.ts b/src/apis/home.ts
index 1ac3c2b..37d729e 100644
--- a/src/apis/home.ts
+++ b/src/apis/home.ts
@@ -1,6 +1,11 @@
 import http from 'libs/http'
 
+const baseUrl = '/tasks/'
 export const setTargetTemperature = (params: Home.SetTargetTemperatureParams): Promise<null> => http.post('/heat/target-temperature', params)
-export const trayIn = (): Promise<null> => http.post('/tray/in')
-export const trayOut = (): Promise<null> => http.post('/tray/out')
 export const trayTube = (params: Home.TrayTubeParams): Promise<null> => http.post('/tray/out', params)
+export const addTask = (params: Task.TaskAdd): Promise<null> => http.post(baseUrl, params)
+export const stopTask = (): Promise<null> => http.post(`${baseUrl}stop`)
+export const getTask = (id: number): Promise<Task.Task> => http.get(`${baseUrl}${id}`)
+export const taskList = (params: Task.TaskQuery): Promise<Task.Task[]> => http.get(`${baseUrl}list`, { params })
+export const getTaskIng = (): Promise<null> => http.get(`${baseUrl}getIngTask`)
+export const delTask = (params: string): Promise<null> => http.delete(`${baseUrl}${params}`)
diff --git a/src/assets/styles/element.scss b/src/assets/styles/element.scss
index 443acf6..bd7bee3 100644
--- a/src/assets/styles/element.scss
+++ b/src/assets/styles/element.scss
@@ -34,4 +34,11 @@
   .el-dialog__footer {
     padding: 10px;
   }
+}
+
+.el-input-group__append {
+  padding: 0 10px;
+  .el-icon {
+    margin: 0;
+  }
 }
\ No newline at end of file
diff --git a/src/components/common/FTButton/index.vue b/src/components/common/FTButton/index.vue
index 7b79f02..73c391a 100644
--- a/src/components/common/FTButton/index.vue
+++ b/src/components/common/FTButton/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 
 interface FTButton {
-  type?: 'default' | 'primary' | 'info'
+  type?: 'default' | 'primary' | 'info' | 'danger'
   size?: 'small' | 'default' | 'large'
   disabled?: boolean
   loading?: boolean
@@ -128,6 +128,11 @@ defineExpose({
   color: #fff;
   border: 1px solid #335AA5;
 }
+.my-button-danger {
+  background: #e74444;
+  color: #fff;
+  border: 1px solid #e74444;
+}
 
 .rotate-loading {
   animation: spin 1s linear infinite;
diff --git a/src/components/common/FTTable/index.vue b/src/components/common/FTTable/index.vue
index 60a2ebb..b68cf18 100644
--- a/src/components/common/FTTable/index.vue
+++ b/src/components/common/FTTable/index.vue
@@ -9,10 +9,28 @@ defineOptions({
 const props = withDefaults(defineProps<TableProp>(), {
   columns: () => [],
   mustInit: true,
-  hasHeader: true,
+  hasHeader: false,
+  hasPage: false,
+  searchList: () => [],
   getDataFn: () => Promise.resolve([]),
 })
-const emits = defineEmits([])
+const emits = defineEmits([
+  'add',
+  'edit',
+  'detail',
+  'copy',
+  'sort',
+  'save',
+  'cancel',
+  'del',
+  'import',
+  'export',
+  'clickTreeNode',
+  'newTreeNode',
+  'editTreeNode',
+  'delTreeNode',
+  'rowClick',
+])
 enum ColumnType {
   index = 'index',
   selection = 'selection',
@@ -32,6 +50,15 @@ interface Btn {
   icon?: string
   type?: string
   serverUrl: string
+  serverCondition?: 0 | 1 | 2
+}
+
+interface Search {
+  name: string
+  icon?: string
+  key?: string
+  type?: string
+  serverUrl: string
 }
 
 interface TableProp {
@@ -39,14 +66,14 @@ interface TableProp {
   getDataFn: (params: any) => Promise<any> // 表格数据的接口
   mustInit?: boolean // 是否在mounted里执行getDataFn
   hasHeader?: boolean
+  hasPage?: boolean
   btnList?: Btn[]
+  searchList?: Search[]
 }
 
-// const attrs = useAttrs()
-
 async function methodParent(fn: any) {
   const newFn = fn[0] === '/' ? fn.slice(1) : fn
-  emits(newFn as never)
+  emits(newFn as never, state.selectedRows)
 }
 
 onMounted(() => {
@@ -59,85 +86,131 @@ const state = reactive({
   loading: false,
   dataTotal: 0,
   tableData: [],
+  selectedRows: [],
+  filterObj: { pageSize: 10, pageNum: 1 },
 })
 
 function initData() {
   state.loading = true
   props
-    .getDataFn({})
+    .getDataFn(state.filterObj)
     .then((data) => {
       console.log(data)
-      state.tableData = data
-      state.loading = false
+      state.tableData = props.hasPage ? data.list : data
+      state.dataTotal = data.total
     })
     .finally(() => {
       state.loading = false
     })
 }
+const handleSelectionChange = (val: any) => {
+  state.selectedRows = val
+}
+
+const rowClickHandle = (data: any) => {
+  emits('rowClick', data)
+}
 defineExpose({
   initData,
 })
 </script>
 
 <template>
-  <div v-if="hasHeader" class="header">
-    <div v-for="btn in btnList" :key="btn.serverUrl">
-      <el-button :icon="btn.icon" :type="btn.type" @click="methodParent(btn.serverUrl)">
-        {{ btn.name }}
-      </el-button>
+  <div class="ft-table">
+    <div v-if="hasHeader" class="header">
+      <div v-for="search in searchList" :key="search.key" class="search">
+        <el-input v-model="state.filterObj[search.key]" :placeholder="search.title" clearable>
+          <template #append>
+            <el-icon class="el-input__icon" @click="initData">
+              <Search />
+            </el-icon>
+          </template>
+        </el-input>
+      </div>
+      <div v-for="btn in btnList" :key="btn.serverUrl">
+        <ft-button
+          :icon="btn.icon"
+          :type="btn.type"
+          :disabled="
+            !btn.serverCondition
+              ? false
+              : btn.serverCondition === 1
+                ? state.selectedRows.length !== 1
+                : state.selectedRows.length < 1
+          "
+          @click="methodParent(btn.serverUrl)"
+        >
+          {{ btn.name }}
+        </ft-button>
+      </div>
     </div>
-    <div class="search">
-      <el-input>
-        <template #suffix>
-          <el-icon class="el-input__icon">
-            <search />
-          </el-icon>
+    <div class="table-main">
+      <el-table
+        v-loading="state.loading"
+        :="$attrs"
+        :data="state.tableData"
+        style="width: 100%"
+        height="100%"
+        :highlight-current-row="true"
+        class="container-table"
+        header-row-class-name="header-row-class"
+        @selection-change="handleSelectionChange"
+        @row-click="rowClickHandle"
+      >
+        <template v-for="(column, index) in columns" :key="column.key">
+          <el-table-column
+            show-overflow-tooltip
+            :prop="column.key"
+            :label="column.title"
+            :width="column.width"
+            :type="column.type"
+            :fixed="column.fixed"
+          >
+            <template v-if="column.render" #default="scope">
+              <Expand :column="column" :row="scope.row" :render="column.render" :index="index" />
+            </template>
+          </el-table-column>
         </template>
-      </el-input>
+      </el-table>
+    </div>
+    <div class="table-page">
+      <el-pagination v-model:current-page="state.filterObj.pageNum" v-model:page-size="state.filterObj.pageSize" size="small" background layout="sizes, prev, pager, next" :total="state.dataTotal" @change="initData" />
     </div>
   </div>
-  <el-table
-    v-loading="state.loading"
-    :="$attrs"
-    :data="state.tableData"
-    style="width: 100%"
-    height="100%"
-    :highlight-current-row="true"
-    class="container-table"
-    header-row-class-name="header-row-class"
-  >
-    <template v-for="(column, index) in columns" :key="column.key">
-      <el-table-column
-        show-overflow-tooltip
-        :prop="column.key"
-        :label="column.title"
-        :width="column.width"
-        :type="column.type"
-        :fixed="column.fixed"
-      >
-        <template v-if="column.render" #default="scope">
-          <Expand :column="column" :row="scope.row" :render="column.render" :index="index" />
-        </template>
-      </el-table-column>
-    </template>
-  </el-table>
 </template>
 
 <style lang="scss" scoped>
+.ft-table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
-  height: 40px;
+  margin-bottom: 10px;
   .search {
     width: 200px;
   }
 }
+.ft-button {
+  margin: 0 5px;
+}
+.table-main {
+  flex: 1;
+  overflow: auto;
+
+}
+.table-page {
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
 :deep(.header-row-class) {
   th {
     background-color: rgba(0,0,0,0.02 ) !important;
-    //font-weight: 500;
-    //border-bottom: none;
     color: rgba(0, 0, 0, 0.85)
   }
 }
diff --git a/src/components/home/SetTemperature/index.vue b/src/components/home/SetTemperature/index.vue
index 4de204e..5308583 100644
--- a/src/components/home/SetTemperature/index.vue
+++ b/src/components/home/SetTemperature/index.vue
@@ -27,7 +27,7 @@ const validateHandle = (rule: any, value: any, callback: any) => {
     callback(new Error('请输入目标温度'))
   }
   else if (value < 0 || value > 200) {
-    callback(new Error('目标温度范围0-200'))
+    callback(new Error('目标温度范围0℃-200℃'))
   }
   else {
     callback()
@@ -70,7 +70,7 @@ const getOres = async () => {
 </script>
 
 <template>
-  <FtDialog visible title="设置温度" width="40%" :ok-handle="okHandle" @cancel="cancel">
+  <FtDialog visible title="设置目标温度" width="40%" :ok-handle="okHandle" @cancel="cancel">
     <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
       <el-form-item label="目标温度" prop="temperature">
         <el-input v-model.number="form.temperature" type="number" placeholder="请输入温度">
diff --git a/src/components/home/StartExperiment/index.vue b/src/components/home/StartExperiment/index.vue
index 90aea61..44efe42 100644
--- a/src/components/home/StartExperiment/index.vue
+++ b/src/components/home/StartExperiment/index.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import { addTask } from 'apis/home'
 import { FtMessage } from 'libs/message'
 import { ref } from 'vue'
 
 const emits = defineEmits(['ok', 'cancel'])
 
 const form = ref({
-  name: undefined,
+  name: '',
 })
 const formRef = ref()
 
@@ -21,8 +22,7 @@ const okHandle = async () => {
     if (!valid) {
       return
     }
-    // TODO 调用开始实验接口
-    // await add(form.value)
+    await addTask(form.value)
     FtMessage.success('实验已开始')
     emits('ok')
   }
diff --git a/src/components/home/Tube/index.vue b/src/components/home/Tube/index.vue
index 7cee218..550142f 100644
--- a/src/components/home/Tube/index.vue
+++ b/src/components/home/Tube/index.vue
@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<{ data: System.HeatArea }>(), {
     moduleCode: 'heat_module_01',
     trayUp: 1,
     trayStatus: 0,
+    fanOpen: false,
     heating: false,
     capExist: false,
     temperature: 0,
@@ -151,7 +152,7 @@ defineExpose({
       点击设置目标温度
     </div>
     <div class="footer">
-      <span :class="{ 'active-footer': hearInfo?.selected }"> {{ data.temperature }}℃</span>
+      <span :class="{ 'active-footer': hearInfo?.selected }"> {{ data.temperature || '--' }}℃</span>
       <ft-button size="small" :type="hearInfo?.selected ? 'primary' : 'default'" @click="tubeSelect">
         选择
       </ft-button>
diff --git a/src/hooks/useActivateDebug.ts b/src/hooks/useActivateDebug.ts
index 9d1b77e..e44fda5 100644
--- a/src/hooks/useActivateDebug.ts
+++ b/src/hooks/useActivateDebug.ts
@@ -1,3 +1,4 @@
+import { FtMessage } from 'libs/message'
 import { useSystemStore } from 'stores/systemStore'
 import { ref } from 'vue'
 
@@ -12,8 +13,15 @@ export const useActivateDebug = () => {
     }
     logoClickCount.value++
     if (logoClickCount.value === 10) {
+      console.log('isDebug', systemStore.isDebug)
       systemStore.updateDebug()
       logoClickCount.value = 0 // 重置计数器
+      if (systemStore.isDebug) {
+        FtMessage.success('已开启调试模式')
+      }
+      else {
+        FtMessage.error('已关闭调试模式')
+      }
     }
     clickTimeout = setTimeout(() => {
       logoClickCount.value = 0 // 重置计数器
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index bb7d232..c99920a 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -7,7 +7,7 @@ import { isClose } from 'libs/socket'
 import { formatDateTime } from 'libs/utils'
 import { authRoutes } from 'router/routes'
 import { useSystemStore } from 'stores/systemStore'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { handleLogoClick } = useActivateDebug()
@@ -22,7 +22,7 @@ const timeInterval = setInterval(() => {
 }, 1000)
 
 onMounted(() => {
-  if (!systemStore.systemStatus.selfTest && systemStore.systemUser.username !== 'test') {
+  if (!systemStore.systemStatus.selfTest && systemStore.systemStatus.currentUser?.username !== 'test') {
     isCheck.value = true
   }
 })
@@ -30,6 +30,22 @@ onMounted(() => {
 onUnmounted(() => {
   clearInterval(timeInterval)
 })
+// meta的isDefault=true 并且 当isDebug=true时,把debug路由的页面也显示
+const menuList = computed(() => {
+  return authRoutes.filter((item) => {
+    if (item.meta?.isDefault) {
+      return true
+    }
+    return !!(item.path === '/debug' && systemStore.isDebug)
+  })
+})
+
+watch(() => systemStore.isDebug, () => {
+  console.log('isDebug', systemStore.isDebug)
+  if (!systemStore.isDebug && router.currentRoute.value.path === '/debug') {
+    router.push('/')
+  }
+})
 
 const isCheck = ref(false)
 </script>
@@ -67,7 +83,7 @@ const isCheck = ref(false)
           <el-dropdown class="user-dropdown" trigger="click">
             <div class="user-dropdown-item">
               <img src="../assets/images/user.svg" alt="">
-              <span>{{ systemStore.systemUser.username }}</span>
+              <span>{{ systemStore.systemStatus.currentUser?.nickname || systemStore.systemStatus.currentUser?.username }}</span>
             </div>
             <template #dropdown>
               <el-dropdown-menu>
@@ -86,7 +102,7 @@ const isCheck = ref(false)
     <el-container class="container">
       <el-aside class="aside" :class="{ 'aside-off': !systemStore.menuExpand }">
         <div
-          v-for="item in authRoutes.filter(item => item.meta!.isDefault)"
+          v-for="item in menuList"
           :key="item.path"
           class="aside-item"
           :class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
diff --git a/src/router/index.ts b/src/router/index.ts
index 4693f6c..e49beea 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 import { getToken } from '@/libs/token'
+import { useSystemStore } from 'stores/systemStore'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 
@@ -9,7 +10,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
-  if (getToken()) {
+  const systemStore = useSystemStore()
+  if (getToken() && systemStore.systemStatus.currentUser?.username) {
     next()
   }
   else {
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 43ff613..9769a3c 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -45,9 +45,9 @@ const authRoutes: RouteRecordRaw[] = [
   {
     path: '/experimentLog',
     name: 'experimentLog',
-    component: () => import('views/home/index.vue'),
+    component: () => import('views/taskLog/index.vue'),
     meta: {
-      isDefault: false,
+      isDefault: true,
       title: '实验记录',
       icon: n_expe,
       activeIcon: s_expe,
@@ -118,7 +118,7 @@ const authRoutes: RouteRecordRaw[] = [
     name: 'debug',
     component: () => import('views/debug/index.vue'),
     meta: {
-      isDefault: true,
+      isDefault: false,
       title: '调试',
       icon: n_debug,
       activeIcon: s_debug,
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index 681dd5a..3d2993d 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -10,6 +10,8 @@ export const useSystemStore = defineStore('system', {
       initComplete: true,
       selfTest: true,
       emergencyStop: false,
+      currentUser: null,
+      currentTasks: null,
       door: {
         open: false,
       },
@@ -82,7 +84,7 @@ export const useSystemStore = defineStore('system', {
         {
           moduleCode: 'heat_module_01',
           trayUp: 0,
-          trayStatus: 1,
+          trayStatus: 0,
           heating: false,
           fanOpen: true,
           capExist: false,
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
index a467d07..1b15c87 100644
--- a/src/types/home.d.ts
+++ b/src/types/home.d.ts
@@ -19,4 +19,5 @@ declare namespace Home {
       exists: boolean
     }[]
   }
+
 }
diff --git a/src/types/system.d.ts b/src/types/system.d.ts
index 19ebdab..2b74244 100644
--- a/src/types/system.d.ts
+++ b/src/types/system.d.ts
@@ -15,6 +15,8 @@ declare namespace System {
     initComplete: boolean
     selfTest: boolean
     emergencyStop: boolean
+    currentUser: User.User | null
+    currentTasks: Task.Task[] | null
     door: {
       open: boolean
     }
diff --git a/src/types/task.d.ts b/src/types/task.d.ts
new file mode 100644
index 0000000..a273163
--- /dev/null
+++ b/src/types/task.d.ts
@@ -0,0 +1,26 @@
+declare namespace Task {
+
+  interface TaskAdd {
+    name: string
+  }
+  interface TaskQuery extends System.Page {
+    name: string
+  }
+  interface Task {
+    id: number
+    name: string
+    status: 1 | 2
+    isDeleted: 0 | 1
+    createTime: string
+    startTime: string
+    endTime: string
+    updateTime: string
+    steps: Step[]
+  }
+  interface Step {
+    id: number
+    taskId: number
+    stepDescription: string
+    createTime: string
+  }
+}
diff --git a/src/types/user.d.ts b/src/types/user.d.ts
index 0ceac4f..349dbbf 100644
--- a/src/types/user.d.ts
+++ b/src/types/user.d.ts
@@ -6,8 +6,8 @@ declare namespace User {
     username: string
     nickname: string
     password?: string | null
-    role: string
-    deleted: string
+    role?: string
+    deleted?: string
     fixedUser?: string
   }
 
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index 4e65870..9f0a0e1 100644
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@@ -1255,9 +1255,6 @@ const savePositionVisible = ref(false)
   //align-items: center;
 }
 
-:deep(.el-input-group__append) {
-  padding: 0 10px;
-}
 :deep(.el-card__header) {
   background:rgba(0,0,0,0.03);
 }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ed207d7..ded3697 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { startCraft } from 'apis/crafts'
+import { stopTask } from 'apis/home'
 import AddLiquid from 'components/home/AddLiquid/index.vue'
 import FillSolution from 'components/home/FillSolution/index.vue'
 import SelectCraft from 'components/home/SelectCraft/index.vue'
@@ -34,10 +35,22 @@ const receiveMessage = (data: Socket.cmdData) => {
 const startVisible = ref(false)
 
 const startExperimentHandle = () => {
-  // TODO 需要判断有没有进行中的实验
+  if (systemStore.systemStatus.currentTasks) {
+    FtMessage.error('当前有实验正在进行')
+    return
+  }
   startVisible.value = true
 }
 
+const stopExperimentHandle = async () => {
+  if (!systemStore.systemStatus.currentTasks) {
+    FtMessage.error('当前没有实验正在进行')
+    return
+  }
+  await stopTask()
+  FtMessage.success('实验已停止')
+}
+
 const selectCraftVisible = ref(false)
 const selectCraft = () => {
   const count = homeStore.heatAreaList.filter(item => item.selected).length
@@ -496,7 +509,7 @@ const take_photo = async () => {
                 </ft-button>
               </el-col>
               <el-col :span="12">
-                <ft-button disabled>
+                <ft-button :click-handle="stopExperimentHandle">
                   停止实验
                 </ft-button>
               </el-col>
diff --git a/src/views/point/index.vue b/src/views/point/index.vue
index d37fb7a..19d3b7c 100644
--- a/src/views/point/index.vue
+++ b/src/views/point/index.vue
@@ -45,7 +45,7 @@ const columns = [
 
 <template>
   <div>
-    <FtTable :has-header="false" :columns="columns" :get-data-fn="getPointList" />
+    <FtTable :columns="columns" :get-data-fn="getPointList" />
     <Edit v-if="upDataVisible" @ok="upDataVisible = false" @cancel="upDataVisible = false" />
   </div>
 </template>
diff --git a/src/views/taskLog/index.vue b/src/views/taskLog/index.vue
new file mode 100644
index 0000000..1f2304c
--- /dev/null
+++ b/src/views/taskLog/index.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { delTask, taskList } from 'apis/home'
+import { ElMessageBox, ElTag } from 'element-plus'
+import { FtMessage } from 'libs/message'
+import { h, useTemplateRef } from 'vue'
+
+const searchList = [
+  {
+    title: '实验名称',
+    key: 'name',
+  },
+]
+const btnList = [
+  {
+    name: '删除',
+    type: 'danger',
+    serverUrl: 'del',
+    serverCondition: 2,
+  },
+]
+const columns = [
+  {
+    title: '实验名称',
+    type: 'selection',
+  },
+  {
+    title: '实验名称',
+    key: 'name',
+  },
+  {
+    title: '开始时间',
+    key: 'startTime',
+  },
+  {
+    title: '结束时间',
+    key: 'endTime',
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 120,
+    render: (row: any) => {
+      return h(
+        ElTag,
+        {
+          type: row.status === 1 ? 'primary' : 'success',
+        },
+        { default: () => row.status === 1 ? '执行中' : '执行完毕' },
+      )
+    },
+  },
+]
+
+const tableRef = useTemplateRef('tableRef')
+
+const del = async (selectedRows: any) => {
+  const ids = selectedRows.map((item: any) => item.id)
+  await ElMessageBox.confirm('确定删除当前选中的行?', '消息', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+  await delTask(ids)
+  FtMessage.success('删除成功')
+  tableRef.value?.initData()
+}
+
+const rowClickHandle = (data: Task.Task) => {
+  console.log(data)
+}
+</script>
+
+<template>
+  <div>
+    <FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :search-list="searchList" :get-data-fn="taskList" @del="del" @row-click="rowClickHandle" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>