任务中心table

src/api/task.js

@@ -0,0 +1,9 @@
+import request from '@/service'
+
+export const createTaskApi = data => {
+  return request({
+    url: '/task/create',
+    method: 'POST',
+    data,
+  })
+}

src/components/Publish.vue

@@ -9,22 +9,22 @@
     <t-form-item
       label="任务名称"
       help="任务名称用来直观的说明本次操作"
-      name="taskname"
+      name="taskName"
     >
       <t-input
-        v-model="formData.taskname"
+        v-model="formData.taskName"
         placeholder="请输入任务名称"
       ></t-input>
     </t-form-item>
-    <t-form-item label="核查顺序" name="order">
-      <t-radio-group v-model="formData.order">
+    <t-form-item label="核查顺序" name="checkOrder">
+      <t-radio-group v-model="formData.checkOrder">
         <t-radio value="0">横向</t-radio>
         <t-radio value="1">纵向</t-radio>
       </t-radio-group>
     </t-form-item>
-    <t-form-item label="核电站" name="nuclear_station">
+    <t-form-item label="核电站" name="nuclearStationId">
       <t-select
-        v-model="formData.nuclear_station"
+        v-model="formData.nuclearStationId"
         class="demo-select-base"
         clearable
         filterable
@@ -41,9 +41,9 @@
         </t-option>
       </t-select>
     </t-form-item>
-    <t-form-item label="核芯堆" name="nuclear_core">
+    <t-form-item label="核芯堆" name="nuclearCoreId">
       <t-select
-        v-model="formData.nuclear_core"
+        v-model="formData.nuclearCoreId"
         class="demo-select-base"
         clearable
         filterable
@@ -60,9 +60,9 @@
       </t-select>
     </t-form-item>
 
-    <t-form-item label="操作员" name="operator_id">
+    <t-form-item label="操作员" name="operatorId">
       <t-select
-        v-model="formData.operator_id"
+        v-model="formData.operatorId"
         class="demo-select-base"
         clearable
         filterable
@@ -89,13 +89,16 @@
 </template>
 <script>
 import { allOperatorApi } from '@/api/publish'
+import { createTaskApi } from '@/api/task'
+import { useAccountStore } from '@/store'
 import { stationListApi, coreListByStationIdApi } from '@/api/info'
+const accountStore = useAccountStore()
 const INITIAL_DATA = {
-  taskname: '',
-  order: '',
-  nuclear_station: '',
-  nuclear_core: '',
-  operator_id: '',
+  taskName: '',
+  checkOrder: '',
+  nuclearStationId: '',
+  nuclearCoreId: '',
+  operatorId: '',
 }
 export default {
   data() {
@@ -151,9 +154,15 @@ export default {
     onReset() {
       this.$message.success('重置成功')
     },
-    onSubmit({ validateResult, firstError }) {
+    async onSubmit({ validateResult, firstError }) {
       if (validateResult === true) {
-        this.$message.success('提交成功')
+        const res = await createTaskApi(this.formData)
+        if (res?.code == 200) {
+          if (res?.data?.result) {
+            this.$message.success('创建任务成功')
+            accountStore.changePage(1)
+          }
+        }
       } else {
         this.$message.warning(firstError)
       }

src/components/Task.vue

@@ -19,196 +19,73 @@
         :columns="columns"
         resizable
       />
-      <t-pagination class="page" :total="30" />
     </t-card>
   </div>
 </template>
 
 <script lang="jsx">
-import { MessagePlugin } from 'tdesign-vue-next'
-import {
-  FileCopyIcon,
-  ErrorCircleFilledIcon,
-  CheckCircleFilledIcon,
-  CloseCircleFilledIcon,
-} from 'tdesign-icons-vue-next'
-function copyToClipboard(text) {
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(text)
-  } else {
-    const textarea = document.createElement('textarea')
-    document.body.appendChild(textarea)
-    textarea.style.position = 'fixed'
-    textarea.style.clip = 'rect(0 0 0 0)'
-    textarea.style.top = '10px'
-    textarea.value = text
-    textarea.select()
-    document.execCommand('copy', true)
-    document.body.removeChild(textarea)
-  }
-  MessagePlugin.success('文本复制成功')
-}
-
-const data = []
-const total = 5
-for (let i = 0; i < total; i++) {
-  data.push({
-    id: i + 1,
-    applicant: ['贾明（kyrieJia）', '张三（threeZhang)', '王芳（fangWang)'][
-      i % 3
-    ],
-    status: i % 3,
-    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
-    desc: ['单元格文本超出省略设置', '这是普通文本的超出省略'][i % 2],
-    link: '点击查看审批详情',
-    something: '仅标题省略',
-    // 透传 Tooltip Props 到浮层组件
-    ellipsisProps: [
-      'w.cezkdudy@lhll.au',
-      'r.nmgw@peurezgn.sl',
-      'p.cumx@rampblpa.ru',
-    ][i % 3],
-    // 完全自定义超出省略的 Tips 内容
-    ellipsisContent: [
-      '宣传物料制作费用',
-      'algolia 服务报销',
-      '相关周边制作费',
-      '激励奖品快递费',
-    ][i % 4],
-    propsAndContent1: [
-      '2021-11-01',
-      '2021-12-01',
-      '2022-01-01',
-      '2022-02-01',
-      '2022-03-01',
-    ][i % 4],
-    propsAndContent2: [2, 3, 1, 4][i % 4],
-  })
-}
-
 export default {
   data() {
     return {
-      data,
+      data: [],
       columns: [
         {
-          colKey: 'applicant',
-          title: '申请人',
-          ellipsis: true,
+          colKey: 'username',
+          title: '操作员',
         },
         {
-          colKey: 'status',
-          title: '审批状态',
-          width: 120,
-          cell: (h, { row }) => {
-            const statusNameListMap = {
-              0: {
-                label: '审批通过',
-                theme: 'success',
-                icon: <CheckCircleFilledIcon />,
-              },
-              1: {
-                label: '审批失败',
-                theme: 'danger',
-                icon: <CloseCircleFilledIcon />,
-              },
-              2: {
-                label: '审批过期',
-                theme: 'warning',
-                icon: <ErrorCircleFilledIcon />,
-              },
-            }
-            return (
-              <t-tag
-                shape="round"
-                theme={statusNameListMap[row.status].theme}
-                variant="light-outline"
-              >
-                {statusNameListMap[row.status].icon}
-                {statusNameListMap[row.status].label}
-              </t-tag>
-            )
-          },
+          colKey: 'publishTime',
+          title: '发布时间',
         },
         {
-          title: '签署方式（超长标题示例）',
-          colKey: 'channel',
-          width: 120,
-          ellipsisTitle: true,
+          colKey: 'stationName',
+          title: '核电站名称',
+          ellipsis: true,
         },
         {
-          title: '邮箱地址',
-          colKey: 'ellipsisProps',
-          // 浮层浅色背景，方向默认朝下出现
-          ellipsis: {
-            theme: 'light',
-            placement: 'bottom',
-          },
+          colKey: 'coreName',
+          title: '核反应堆',
         },
         {
-          title: '申请事项',
-          colKey: 'ellipsisContent',
-          // ellipsis 定义超出省略的浮层内容，cell 定义单元格内容
-          ellipsis: (h, { row }) => (
-            <div>
-              {row.ellipsisContent}
-              <FileCopyIcon
-                style={{ cursor: 'pointer', marginLeft: '4px' }}
-                onClick={() => copyToClipboard(row.ellipsisContent)}
-              />
-            </div>
-          ),
+          colKey: 'status',
+          title: '任务状态',
+        },
+        {
+          colKey: 'startTime',
+          title: '开始时间',
         },
         {
-          title: '审核时间',
-          colKey: 'propsAndContent1',
-          // 支持同时设置 tooltipProps 和 浮层内容,
-          width: 100,
-          ellipsis: {
-            props: {
-              theme: 'light',
-              placement: 'bottom-right',
-            },
-            content: (h, { row }) => (
-              <div>
-                <p>
-                  <b>创建日期:</b> {row.propsAndContent1}
-                </p>
-                <p>
-                  <b>审核时长(天):</b> {row.propsAndContent2}
-                </p>
-              </div>
-            ),
-          },
+          colKey: 'endTime',
+          title: '完成时间',
         },
         {
           title: '操作',
-          colKey: 'link',
-          // 超出省略的内容显示纯文本，不带任何样式和元素
-          ellipsis: (h, { row }) => row.link,
-          // 注意这种 JSX 写法需设置 <script lang="jsx" setup>
           cell: (h, { row }) => (
-            <a href="/vue-next/components/table" target="_blank">
-              {row.link}
-            </a>
+            <div>
+              <t-button theme="danger" onClick={() => this.delTask(row.id)}>
+                删除任务
+              </t-button>
+              <t-button theme="danger" onClick={() => this.delExcel(row.id)}>
+                删除excel
+              </t-button>
+              <t-button theme="danger" onClick={() => this.uploadExcel(row.id)}>
+                上传Excel
+              </t-button>
+            </div>
           ),
         },
       ],
     }
   },
-
-  // methods: {
-  //   getAttach() {
-  //     return document.body;
-  //   },
-  // },
+  methods: {
+    delTask(taskId) {},
+    delExcel(taskId) {},
+    uploadExcel(taskId) {},
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .task_component {
-  .page {
-    margin-top: 30px;
-  }
 }
 </style>

src/pages/index.vue

@@ -2,7 +2,7 @@
   <div class="home_container">
     <div class="header_container">
       <svg
-        @click="changePage(0)"
+        @click="accountStore.changePage(0)"
         class="logo"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -43,7 +43,7 @@
         </g>
       </svg>
       <div class="menu_list">
-        <div class="menu" @click="changePage(1)">
+        <div class="menu" @click="accountStore.changePage(1)">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -64,7 +64,11 @@
           </svg>
           <p class="title">任务管理中心</p>
         </div>
-        <div class="menu" @click="changePage(2)" v-if="role == 'ROLE_ADMIN'">
+        <div
+          class="menu"
+          @click="accountStore.changePage(2)"
+          v-if="role == 'ROLE_ADMIN'"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -85,7 +89,11 @@
           </svg>
           <p class="title">发布任务</p>
         </div>
-        <div class="menu" @click="changePage(3)" v-if="role == 'ROLE_ADMIN'">
+        <div
+          class="menu"
+          @click="accountStore.changePage(3)"
+          v-if="role == 'ROLE_ADMIN'"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -106,7 +114,7 @@
           </svg>
           <p class="title">用户管理</p>
         </div>
-        <!-- <div class="menu" @click="changePage(4)" v-if="role == 'ROLE_ADMIN'">
+        <!-- <div class="menu" @click="accountStore.changePage(4)" v-if="role == 'ROLE_ADMIN'">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -127,7 +135,11 @@
           </svg>
           <p class="title">相机调试</p>
         </div> -->
-        <div class="menu" @click="changePage(5)" v-if="role == 'ROLE_ADMIN'">
+        <div
+          class="menu"
+          @click="accountStore.changePage(5)"
+          v-if="role == 'ROLE_ADMIN'"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -176,29 +188,38 @@
         </div>
       </t-popup>
     </div>
-    <div class="main_content" v-if="activePage == 0">
+    <div class="main_content" v-if="accountStore.activePage == 0">
       <div class="two_content_container">
         <Image />
         <Excel :excelData="excelData" />
       </div>
       <div class="bottom_operation_container"></div>
     </div>
-    <div class="task_container" v-if="activePage == 1">
+    <div class="task_container" v-if="accountStore.activePage == 1">
       <Task />
     </div>
     <div
       class="publish_container"
-      v-if="activePage == 2 && role == 'ROLE_ADMIN'"
+      v-if="accountStore.activePage == 2 && role == 'ROLE_ADMIN'"
     >
       <Publish />
     </div>
-    <div class="task_container" v-if="activePage == 3 && role == 'ROLE_ADMIN'">
+    <div
+      class="task_container"
+      v-if="accountStore.activePage == 3 && role == 'ROLE_ADMIN'"
+    >
       <User />
     </div>
-    <div class="task_container" v-if="activePage == 4 && role == 'ROLE_ADMIN'">
+    <div
+      class="task_container"
+      v-if="accountStore.activePage == 4 && role == 'ROLE_ADMIN'"
+    >
       <Debug />
     </div>
-    <div class="task_container" v-if="activePage == 5 && role == 'ROLE_ADMIN'">
+    <div
+      class="task_container"
+      v-if="accountStore.activePage == 5 && role == 'ROLE_ADMIN'"
+    >
       <Nuclear />
     </div>
   </div>
@@ -222,11 +243,6 @@ const role = computed(() => {
   return Cookie.getCookie('r')
 })
 
-const activePage = ref(0)
-
-const changePage = pageIndex => {
-  activePage.value = pageIndex
-}
 const logout = () => {
   accountStore.clearLoginInfo()
   Cookie.clearAllCookie()

src/store/modules/account.js

@@ -7,10 +7,14 @@ export const useAccountStore = defineStore({
       token: null,
       username: '',
       role: '',
+      activePage: 0,
     }
   },
   // actions
   actions: {
+    changePage(index) {
+      this.activePage = index
+    },
     updateToken(token) {
       this.token = token
     },