还需要调整pinia实时数据显示，需要保存到localstorage中

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -34,6 +35,8 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    History: typeof import('./src/components/History.vue')['default']
+    HistoryList: typeof import('./src/components/HistoryList.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
     Layout: typeof import('./src/components/Layout.vue')['default']
     Login: typeof import('./src/components/Login.vue')['default']
@@ -41,6 +44,7 @@ declare module 'vue' {
     Register: typeof import('./src/components/Register.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TaskList: typeof import('./src/components/TaskList.vue')['default']
     TCFinalList: typeof import('./src/components/TCFinalList.vue')['default']
     TCList: typeof import('./src/components/TCList.vue')['default']
     Upload: typeof import('./src/components/Upload.vue')['default']

src/App.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
 </script>
 
 <template>
-  <router-view></router-view>
+  <router-view :key="route.fullPath" ></router-view>
 </template>
 
 <style scoped>

src/components/HistoryList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="my-page">
+    <el-row :gutter="20">
+      <el-col :span="6" v-for="(item, index) in items"  :key="index">
+        <el-card shadow="hover" :body-style="{ padding: '0' }"  v-if="item.tcFinalList.length!==0">
+          <div class="item" style="font-size: medium; background-color:lightskyblue ">{{ item.docxName }}</div>
+          <div style="margin: 15px">
+            <div><div class="card-label">创建人</div><span>{{username}}</span></div>
+            <div><div class="card-label">创建时间</div><span>{{ item.creatTime.substring(0,10) }}</span></div>
+            <div><div class="card-label">最新修改时间</div><span></span></div>
+            <div><div class="card-label">用例数量</div><span>{{ item.testCaseList.length }}</span></div>
+          </div>
+          <el-divider style="margin: 10px"></el-divider>
+          <el-button  @click="gototcFinalList(item)"> 查看完整用例列表</el-button>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import {useDocxStore} from "../pinia/docx";
+import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
+
+export default {
+  name: "History",
+  setup() {
+    const useStore = useDocxStore()
+    const items = ref([
+      {
+        testCaseListId: "",
+        docxName: "",
+        testCaseList: "",
+        actionList: "",
+        userId: "",
+        creatTime:"",
+        tcFinalList: ""
+      },
+      // ...其他项...
+    ]);
+    const username = ref()
+    const router = useRouter()
+    const hasFinalList = ref(true)
+
+    onMounted(() => {
+      console.log(useStore.taskList)
+      items.value = JSON.parse(sessionStorage.getItem('taskList'));
+      username.value = useStore.userInfo.username
+      console.log(username)
+    });
+
+
+    const gototestList = (item)=> {
+      console.log(item.testCaseListId)
+      router.push({
+        path: '/testcaseList',
+        query:{id:item.testCaseListId}
+      })
+    }
+
+    const gototcFinalList = (item)=>{
+      router.push({
+        path: '/tcFinalList',
+        query:{id:item.testCaseListId}
+      })
+    }
+
+    return {
+      items,
+      gototestList,
+      username,
+      gototcFinalList,
+      hasFinalList
+    };
+  }
+}
+</script>
+
+
+<style scoped>
+.my-page {
+  background-color: #f7f7f7;
+  width: 100%;
+  height: 100%;
+}
+
+.item {
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  font-size: 24px;
+}
+
+.card-label {
+  color: rgb(197, 197, 197);
+  margin-right: 8px;
+  width: 100px;
+  display: inline-block;
+  margin-bottom: 5px;
+}
+</style>
+

src/components/Home.vue

@@ -1,15 +1,23 @@
 <template>
 <!--  <div class="common-layout">-->
       <el-container class="container">
-        <el-header style="background-color: aliceblue;">
+        <el-header style="background-color: lightskyblue;">
            <div style="font-size: x-large;text-align: start">
              <span >测试用例生成系统</span>
            </div>
-            <el-icon size="40" ><Avatar/></el-icon>
+
+          <el-dropdown trigger="hover">
+            <span>欢迎 {{ userInfo.username }}!<el-icon size="40" class="el-dropdown-link"><Avatar/></el-icon></span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+          </el-dropdown>
         </el-header>
         <el-container>
           <!-- 侧边栏 -->
-          <el-aside :width="isCollapse ? '64px':'200px'">
+          <el-aside :width="'200px'">
             <!-- 侧边栏菜单区域 -->
             <!-- 侧边栏菜单区域 -->
             <el-menu
@@ -19,30 +27,30 @@
                 @close="handleClose"
                 router
             >
+              <el-menu-item index="taskList" >
+                <el-icon><House /></el-icon>
+                <span style="font-size: large">首页</span>
+              </el-menu-item>
+
               <el-menu-item index="upload">
-                <el-icon><Plus /></el-icon>
-                <span style="font-size: large">生成测试用例</span>
+                <el-icon><Plus/></el-icon>
+                <span style="font-size: large">新建任务</span>
               </el-menu-item>
-              <el-sub-menu index="">
+
+              <el-sub-menu index="taskList">
                 <template #title>
-                  <el-icon><Collection /></el-icon>
-                  <span style="font-size: large">当前任务列表</span>
+                  <el-icon><Collection /></el-icon><span  style="font-size: large">当前任务列表</span>
                 </template>
-                <el-menu-item-group title="新建挡板.txt" style="text-align: center">
-                  <el-menu-item index="testcaseList">用例列表展示</el-menu-item>
-                  <el-menu-item index="tcFinalList">生成完整测试用例</el-menu-item>
-                  <el-menu-item index="">知识图谱</el-menu-item>
-                </el-menu-item-group>
-<!--                <el-menu-item-group title="上传图片.txt">-->
-<!--                  <el-menu-item index="1-3">item three</el-menu-item>-->
-<!--                </el-menu-item-group>-->
-<!--                <el-sub-menu index="1-4">-->
-<!--                  <template #title>item four</template>-->
-<!--                  <el-menu-item index="1-4-1">item one</el-menu-item>-->
-<!--                </el-sub-menu>-->
-              </el-sub-menu>
 
-              <el-menu-item index="3">
+                  <el-menu v-for="(item, index) in items" :key="index">
+                    <el-sub-menu  v-if="item.tcFinalList.length===0" index="">
+                      <template #title>{{ item.docxName }}</template>
+                      <el-menu-item index="testcaseList" @click="gototestList(item)">用例列表展示</el-menu-item>
+                      <el-menu-item @click="gototcFinalList(item)">完整测试用例</el-menu-item>
+                    </el-sub-menu>
+                  </el-menu>
+              </el-sub-menu>
+              <el-menu-item index="historyList">
                 <el-icon><Collection /></el-icon>
                 <span style="font-size: large">历史任务</span>
               </el-menu-item>
@@ -54,55 +62,84 @@
             <router-view></router-view>
           </el-main>
         </el-container>
-<!--        <el-container>-->
-<!--          <el-aside width="200px" > Aside </el-aside>-->
-<!--          <el-main>Main</el-main>-->
-<!--        </el-container>-->
       </el-container>
-<!--  </div>-->
 </template>
 
 <script>
 
-export default {
-  data () {
-    return {
-      // 左侧菜单数据对象
-      menulist: [],
-      // 字体图标对象
-      iconsObj: {
-        125: 'iconfont icon-users',
-        103: 'iconfont icon-tijikongjian',
-        101: 'iconfont icon-shangpin',
-        102: 'iconfont icon-danju',
-        145: 'iconfont icon-baobiao'
+
+import { defineComponent, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import router from "../router";
+import {useDocxStore } from '../pinia/docx'
+
+
+export default defineComponent({
+
+  setup() {
+    const userInfo = ref({
+      user_id: '',
+      username: '',
+      password: '',
+      email: ''
+    });
+    const useStore = useDocxStore()
+    // const router = useRouter();
+    // 左侧列表数据对象
+    const items = ref([
+      {
+        testCaseListId: "",
+        docxName: "",
+        testCaseList: "",
+        actionList: "",
+        userId: "",
+        creatTime:"",
+        tcFinalList:""
       },
-      // 是否折叠
-      isCollapse: false
+      // ...其他项...
+    ]);
+
+    onMounted(() => {
+      userInfo.value = useStore.userInfo;
+      items.value = useStore.taskList;
+      console.log(userInfo.value)
+      console.log(useStore.taskList)
+      console.log(items.value)
+    });
+
+    function logout(){
+      window.localStorage.clear()
+      router.push('/login')
     }
-  },
-  created () {
-    this.getMenuList()
-  },
-  methods: {
-    logout () {
-      window.sessionStorage.clear()
-      this.$router.push('/login')
-    },
-    // 获取所有的菜单数据
-    async  getMenuList () {
-      const { data: res } = await this.$http.get('menus')
-      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
-      // 成功了，进行赋值
-      this.menulist = res.data
-      console.log(res)
-    },
-    // 点击按钮，切换菜单的折叠与展开
-    toggleCollapse () {
-      this.isCollapse = !this.isCollapse
+
+    const gototestList = (item)=> {
+      console.log(item.testCaseListId)
+      router.push({
+        path: '/testcaseList',
+        query:{id:item.testCaseListId}
+      })
     }
-  }
-}
+
+    const gototcFinalList = (item)=>{
+      router.push({
+        path: '/tcFinalList',
+        query:{id:item.testCaseListId}
+      })
+    }
+
+
+    return {
+      userInfo,
+      items,
+      gototestList,
+      gototcFinalList,
+      logout,
+    };
+  },
+});
+
+
 
 </script>
 

src/components/Login.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import router from "../router";
+
 import {ElButton, ElForm, ElFormItem, ElInput, ElMessage} from "element-plus";
 import axios from 'axios';
-// store 即 { token, saveToken }, 官网不建议直接解构使用
+import { useRouter,useRoute } from 'vue-router';
+
 
 export default defineComponent({
   name: 'Login',
@@ -13,7 +14,7 @@ export default defineComponent({
       username: '',
       password: ''
     });
-
+    const router = useRouter()
     const loginRules = ref({
       username: [
         { required: true, message: '用户名不能为空', trigger: 'blur' }
@@ -46,12 +47,27 @@ export default defineComponent({
         },
       }).then((res) => { // 当收到后端的响应时执行该括号内的代码，res 为响应信息，也就是后端返回的信息
         if (res.data.code === "0") {  // 当响应的编码为 0 时，说明登录成功
-          // 将用户信息存储到sessionStorage中
-          sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
-          // 跳转页面到首页
-          router.push('/home');
+          // 将用户信息存储到local中
+          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
+          const userId = JSON.parse(localStorage.getItem("userInfo")).user_id;
+          //根据用户信息获取该用户任务列表
+          axios({
+            url: "http://localhost:8081/testCaseList/testList",               // 请求地址
+            method: "get",                       // 请求方法
+            headers: {                            // 请求头
+              "Content-Type": "application/json",
+            },
+            params: {                             // 请求参数
+              user_id: userId
+            },
+          }).then((res) => {
+            localStorage.setItem("taskList", JSON.stringify(res.data.data));
+          });
+
           // 显示后端响应的成功信息
           ElMessage.success("登录成功！")
+          // 跳转页面到首页
+          router.push({path: '/taskList'});
         } else {  // 当响应的编码不为 0 时，说明登录失败
           // 显示后端响应的失败信息
           ElMessage.error({
@@ -64,8 +80,6 @@ export default defineComponent({
         console.log(res);
       });
     }
-
-
       const gotoRegister = () => {
       router.push('/register');
     };

src/components/Register.vue

@@ -23,9 +23,8 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus';
-import router from "../router";
 import axios from "axios";
-
+import router from "../router";
 export default defineComponent({
   name: 'Register',
   components: { ElForm, ElFormItem, ElInput, ElButton },

src/components/TCList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref,onMounted} from "vue";
-import { useRouter } from 'vue-router';
+import {ref, onMounted, defineProps} from "vue";
+import { useRouter,useRoute } from 'vue-router';
 import { DocxList,Action,useDocxStore } from '../pinia/docx'
 import axios, {AxiosResponse, AxiosError, AxiosRequestConfig} from 'axios';
 import {ElLoading, ElMessage} from 'element-plus'
@@ -12,29 +12,140 @@ const token = 'sk-HcDTZ2PXVVKd7wkLBGhaf2S3YxZ5Jr7G7SBO974cZdQ='
 
 //关于路由
 const router = useRouter();
-const gotoLastPage = () => {
-  router.push('/upload');
-};
-const gotoNextPage = () => {
-  router.push('/tcFinalList');
-};
+const route = useRoute();
+console.log(route.query.id)
+
+const temp1 = [
+  {
+    "编号": "TC001.1",
+    "用例标题": "用户未登录",
+    "简短描述": "验证用户未登录时无法访问新增挡板页面"
+  },
+  {
+    "编号": "TC002.1",
+    "用例标题": "用户登录",
+    "简短描述": "验证用户登录后能否访问挡板设置"
+  },
+  {
+    "编号": "TC003.1",
+    "用例标题": "访问挡板配置",
+    "简短描述": "验证登录用户能否进入挡板配置"
+  },
+  {
+    "编号": "TC004.1",
+    "用例标题": "新增挡板页面加载",
+    "简短描述": "验证用户点击新增挡板后页面是否正确加载"
+  },
+  {
+    "编号": "TC005.1",
+    "用例标题": "选择HTTP协议",
+    "简短描述": "验证用户在协议类型选择时，系统是否显示FORM选项"
+  },
+  {
+    "编号": "TC006.1",
+    "用例标题": "选择非HTTP协议",
+    "简短描述": "验证用户在非HTTP协议下，系统是否不显示FORM选项"
+  },
+  {
+    "编号": "TC007.1",
+    "用例标题": "选择FORM报文格式",
+    "简短描述": "验证用户在HTTP协议下，系统是否允许选择FORM报文格式"
+  },
+  {
+    "编号": "TC008.1",
+    "用例标题": "选择非FORM报文格式",
+    "简短描述": "验证用户在HTTP协议下，系统是否允许选择非FORM报文格式"
+  },
+  {
+    "编号": "TC009.1",
+    "用例标题": "输入服务方",
+    "简短描述": "验证用户输入服务方字段时，系统是否允许输入"
+  },
+  {
+    "编号": "TC010.1",
+    "用例标题": "输入消费方",
+    "简短描述": "验证用户输入消费方字段时，系统是否允许输入"
+  },
+  {
+    "编号": "TC011.1",
+    "用例标题": "输入URL前缀",
+    "简短描述": "验证用户输入URL前缀字段时，系统是否允许输入"
+  },
+  {
+    "编号": "TC012.1",
+    "用例标题": "输入挡板类型",
+    "简短描述": "验证用户输入挡板类型时，系统是否允许选择"
+  },
+  {
+    "编号": "TC013.1",
+    "用例标题": "输入挡板名称",
+    "简短描述": "验证用户输入挡板名称字段时，系统是否允许输入"
+  },
+  {
+    "编号": "TC014.1",
+    "用例标题": "选择测试环境",
+    "简短描述": "验证用户选择测试环境时，系统是否显示下拉选项"
+  },
+  {
+    "编号": "TC015.1",
+    "用例标题": "输入非法编码格式",
+    "简短描述": "验证用户输入非法编码格式时，系统是否显示错误提示"
+  },
+  {
+    "编号": "TC016.1",
+    "用例标题": "点击取消按钮",
+    "简短描述": "验证用户点击取消按钮时，是否返回上一级页面"
+  },
+  {
+    "编号": "TC017.1",
+    "用例标题": "点击确定按钮-正确输入",
+    "简短描述": "验证用户输入合法信息后点击确定，挡板是否成功保存"
+  },
+  {
+    "编号": "TC017.2",
+    "用例标题": "点击确定按钮-非法输入",
+    "简短描述": "验证用户输入非法信息后点击确定，系统是否显示错误提示"
+  }
+]
+
+//const temp2 = [{"description":"生成用例", "times":"2024-05-24"}]
+
+// //历史操作记录
+// const actionList = ref<Action[]>([])
+// // actionList.value = JSON.parse(useStore.taskList[itemIndex.value].actionList)
+// console.log(actionList.value)
+
+// let testCase: Array<any> = []
+// 默认展示第一个列表
+// testCase = (JSON.parse(useStore.taskList[itemIndex.value].testCaseList))
+function findById(i): any{
+  console.log(useStore.taskList)
+  for (let item of useStore.taskList){
+    console.log(item.testCaseListId)
+    if(item.testCaseListId == i){
+      console.log(item)
+      return item;
+    }
+  }
+}
+
+const testCase = ref<any>([])
+const actionList = ref<any>([])
+const itemIndex = ref(route.query.id)
+
+let res = findById(itemIndex.value)
+console.log(res)
+testCase.value = JSON.parse(res.testCaseList)
+actionList.value = JSON.parse(res.actionList)
+
+console.log(testCase)
+
 
 onMounted(()=>{
-  Showecharts()
 })
 
-const docxList = ref<DocxList[]>([])
-docxList.value = useStore.DocxList
-const itemIndex = ref(0)
 const textarea = ref('')
 
-//历史操作记录
-const actionList = ref<Action[]>([])
-console.log(useStore.DocxList[itemIndex.value])
-actionList.value = useStore.DocxList[itemIndex.value].actionList;
-console.log(actionList.value)
-
-
 function parseOutput(output: string): any[] {
   const leftIndex = output.indexOf("[")
   const rightIndex = output.lastIndexOf("]")
@@ -46,15 +157,6 @@ function parseOutput(output: string): any[] {
   return testCaseArray;
 }
 
-const testCase = ref<any>([]);
-// 默认展示第一个列表
-testCase.value = useStore.DocxList[itemIndex.value].docxMessageList
-console.log(testCase.value)
-console.log(actionList.value)
-const docxMessage = (index: number) => {
-  itemIndex.value = index
-  testCase.value = useStore.DocxList[itemIndex.value].docxMessageList
-}
 
 //细化用例
 const handleImproveButton = (p: { row: any }) => {
@@ -252,75 +354,62 @@ const addDocxList = () => {
   }
 }
 // echarts-bxo
-function Showecharts() {
-  var chartDom = document.getElementById('pt');
-  var myChart = echarts.init(chartDom);
-  var option;
-
-  option = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      top: '5%',
-      left: 'center',
-      textStyle:{
-        fontSize:8
-      }
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        padAngle: 5,
-        itemStyle: {
-          borderRadius: 10
-        },
-        label: {
-          show: false,
-          position: 'center',
-          fontSize:12
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 40,
-            fontWeight:700
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          { value:useStore.DocxList.length, name: '.docx文件'},
-          {value:5,name:'.excel文件'},
-          {value:6,name:'.ppt文件'}
-        ]
-      }
-    ]
-  };
-  option && myChart.setOption(option);
-}
+// function Showecharts() {
+//   var chartDom = document.getElementById('pt');
+//   var myChart = echarts.init(chartDom);
+//   var option;
+//
+//   option = {
+//     tooltip: {
+//       trigger: 'item'
+//     },
+//     legend: {
+//       top: '5%',
+//       left: 'center',
+//       textStyle:{
+//         fontSize:8
+//       }
+//     },
+//     series: [
+//       {
+//         name: 'Access From',
+//         type: 'pie',
+//         radius: ['40%', '70%'],
+//         avoidLabelOverlap: false,
+//         padAngle: 5,
+//         itemStyle: {
+//           borderRadius: 10
+//         },
+//         label: {
+//           show: false,
+//           position: 'center',
+//           fontSize:12
+//         },
+//         emphasis: {
+//           label: {
+//             show: true,
+//             fontSize: 40,
+//             fontWeight:700
+//           }
+//         },
+//         labelLine: {
+//           show: false
+//         },
+//         data: [
+//           { value:useStore.DocxList.length, name: '.docx文件'},
+//           {value:5,name:'.excel文件'},
+//           {value:6,name:'.ppt文件'}
+//         ]
+//       }
+//     ]
+//   };
+//   option && myChart.setOption(option);
+// }
 </script>
 
 <template>
+  <router-view :key="route.fullPath" />
   <el-container>
-<!--    <el-aside width="200px" style="overflow: hidden; margin-right:20px;">-->
-<!--      <el-card style="width:100%; border:0;" body-style="padding:0; margin:0;">-->
-<!--        <template #header>-->
-<!--          <div class="card-header">-->
-<!--            <span style ="font-size: 20px">文件名</span>-->
-<!--          </div>-->
-<!--        </template>-->
-<!--        <div class="card-item" v-for="(item, index) in docxList" :key="index" @click="docxMessage(index)"-->
-<!--          :class="{ active: index == itemIndex }">-->
-<!--          {{ item.docxName }}-->
-<!--        </div>-->
-<!--      </el-card>-->
-<!--    </el-aside>-->
-
     <el-container>
       <el-main style="display:flex; overflow: hidden; margin: 0; padding: 0;">
         <div class="root">

src/components/TaskList.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="my-page">
+    <el-row :gutter="20">
+      <el-col :span="6" v-for="(item, index) in items" :key="index">
+        <el-card shadow="hover" :body-style="{ padding: '0' }" >
+          <div class="item" style="font-size: medium; background-color:lightskyblue ">{{ item.docxName }}</div>
+          <div style="margin: 15px">
+            <div><div class="card-label">创建人</div><span>{{username}}</span></div>
+            <div><div class="card-label">创建时间</div><span>{{ item.creatTime.substring(0,10) }}</span></div>
+            <div><div class="card-label">最新修改时间</div><span></span></div>
+            <div><div class="card-label">用例数量</div><span>{{ item.testCaseList.length }}</span></div>
+          </div>
+          <el-divider style="margin: 10px"></el-divider>
+          <el-button @click="gototestList(item)" style="">用例列表</el-button>
+          <el-button  @click="gototcFinalList(item)" :style="{'background-color': item.tcFinalList.length!==0?'white':'lightskyblue'}"> {{item.tcFinalList.length!==0?"已生成完整用例列表":"生成完整用例列表"}}</el-button>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import {defineComponent, onMounted, ref} from "vue";
+import {useDocxStore } from '../pinia/docx'
+// import router from "../router";
+import { useRouter } from 'vue-router';
+import axios from "axios";
+
+export default defineComponent({
+  name: "TaskList",
+  setup() {
+    const useStore = useDocxStore()
+    const items = ref([
+      {
+        testCaseListId: "",
+        docxName: "",
+        testCaseList: "",
+        actionList: "",
+        userId: "",
+        creatTime:"",
+        tcFinalList: ""
+      },
+      // ...其他项...
+    ]);
+    const username = ref()
+    const router = useRouter()
+    const hasFinalList = ref(true)
+
+    onMounted(() => {
+      console.log(useStore.taskList)
+      items.value = useStore.taskList;
+      username.value = useStore.userInfo.username
+      console.log(username)
+    });
+
+
+      const gototestList = (item)=> {
+        console.log(item.testCaseListId)
+        router.push({
+          path: '/testcaseList',
+          query:{id:item.testCaseListId}
+        })
+      }
+
+      const gototcFinalList = (item)=>{
+        router.push({
+          path: '/tcFinalList',
+          query:{id:item.testCaseListId}
+        })
+      }
+
+    return {
+      items,
+      gototestList,
+      username,
+      gototcFinalList,
+      hasFinalList
+    };
+  }
+})
+
+
+</script>
+
+<style scoped>
+.my-page {
+  background-color: #f7f7f7;
+  width: 100%;
+  height: 100%;
+}
+
+.item {
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  font-size: 24px;
+}
+
+.card-label {
+  color: rgb(197, 197, 197);
+  margin-right: 8px;
+  width: 100px;
+  display: inline-block;
+  margin-bottom: 5px;
+}
+</style>

src/components/Upload.vue

@@ -1,24 +1,27 @@
 
 <template>
   <div class="common-layout">
-    <transition name="el-fade-in-linear">
-      <div  class="PrupBox">
+<!--    <transition name="el-fade-in-linear">-->
+     <div  class="PrupBox">
         <el-form label-width="80px" style="max-width:350px; margin:0 auto; margin-top:5vw;">
-          <el-form-item label="上传文件:">
+
+          <el-form-item label="上传文件:" style="white-space: pre-wrap; ">
             <div class="boxjia" @click="uploadDocx">
               <input ref='uploadInput' type="file" class="dl-none" name="icon" @change="dealfilechange"
                 style="display:none;" accept=".txt" multiple />
             </div>
           </el-form-item>
-          <el-button type="Primary" style="width:100%; color:#409eff; margin-top:1vw;" plain="true"
-            @click="closeShowBox">确定
-          </el-button>
+          <span>文件仅限txt格式<br/>这里应该还有点信息提示，暂时没想好写啥，或者配置</span>
+<!--          <el-button type="Primary" style="width:100%; color:#409eff; margin-top:1vw;" plain="true"-->
+<!--            @click="closeShowBox">确定-->
+<!--          </el-button>-->
         </el-form>
-      </div>
-    </transition>
+     </div>
+<!--    </transition>-->
     <el-container>
       <el-main>
         <span style="color:#020a13; font-size: x-large">新建生成测试用例任务</span>
+        <span style="white-space: pre-wrap"><br/>请上传需求文档</span>
 <!--        <el-icon class="el-icon&#45;&#45;upload"><upload-filled /></el-icon>-->
 <!--        <div class="el-upload__text">-->
 <!--          <em>Click to upload</em>-->
@@ -147,15 +150,49 @@ const dealfilechange = async (event: Event) => {
                      const parsedOutput = output.substring(leftIndex,rightIndex+1).replace(/\\n/g, '').replace(/\\/g, '').replace(/ /g,'')
 
                      console.log(parsedOutput)
-                     //const testCaseArray: TestCase[] = JSON.parse(parsedOutput) as TestCase[];
                      const testCaseArray = JSON.parse(parsedOutput);
                      console.log(testCaseArray)
                      useStore.DocxList.push({docxName: file.name, docxMessageList: testCaseArray, time: dayjs().format('YYYY-MM-DD HH:mm:ss'), actionList: [{description: "生成用例",time: dayjs().format('YYYY-MM-DD HH:mm:ss')}], testCaseList: []})
                      //持久化存储
                      useStore.saveDocxList()
+                     //添加进数据库
+                     axios({
+                       url: "http://localhost:8081/testCaseList/add",               // 请求地址
+                       method: "post",                       // 请求方法
+                       headers: {                            // 请求头
+                         "Content-Type": "application/json",
+                       },
+                       data: {                             // 请求参数
+                         userId: Number(useStore.userInfo.user_id),
+                         creatTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+                         docxName: file.name,
+                         testCaseList: parsedOutput,
+                         actionList: "[{description: '生成用例',time: dayjs().format('YYYY-MM-DD HH:mm:ss')}]"
+                       },
+                     }).then((res) => {
+                       if(res.data.msg !== "添加成功！"){
+                         ElMessage({
+                           message: '数据库出错',
+                           type: 'warning'
+                         });
+                       }else{
+                         axios({
+                           url: "http://localhost:8081/testCaseList/testList",               // 请求地址
+                           method: "post",                       // 请求方法
+                           headers: {                            // 请求头
+                             "Content-Type": "application/json",
+                           },
+                           params: {                             // 请求参数
+                             user_id: Number(useStore.userInfo.user_id)
+                           },
+                         }).then((res) => {
+                           sessionStorage.setItem("taskList", JSON.stringify(res.data.data));
+                         });
+                       }
+                     });
                      loadingInstance1.close()
                      ElMessage({
-                       message: '测试用例已生成，请点击确定跳转',
+                       message: '测试用例已生成，即将跳转',
                        type: 'success'
                      });
 
@@ -187,21 +224,6 @@ const dealfilechange = async (event: Event) => {
   }
 };
 
-
-function uploadFn() {
-  showBox.value = true
-}
-
-
-const gotoTargetPage = () => {
-  router.push('/testcaseList');
-};
-
-function closeShowBox() {
-
-  showBox.value = false
-}
-
 function uploadDocx() {
   uploadInput.value.click()
 }

src/pinia/docx.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia"
 import { ref } from 'vue'
 import dayjs from 'dayjs'
 import { ElMessage } from 'element-plus'
+import taskList from "../components/TaskList.vue";
 
 
 export interface Action {
@@ -23,27 +24,30 @@ export interface DocxList {
     testCaseList?: testCase[]
 }
 
-interface obj {
-    id: Number,
-    index: Number
-}
+
 export const useDocxStore = defineStore('docx',  {
 
     state: () => {
         let DocxList = ref<DocxList[]>([])
+        let taskList = ref<any>([])
+
+        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
         const storedDocxList = localStorage.getItem('docxList');
-        if (storedDocxList) {
-            DocxList = JSON.parse(storedDocxList);
-        }
-        return { DocxList };
+        DocxList = JSON.parse(storedDocxList);
+        taskList = JSON.parse(localStorage.getItem('taskList'))
+        return { DocxList,taskList,userInfo };
     },
-    persist: true,
-    actions: {
 
+    actions: {
         async saveDocxList() {
             localStorage.setItem('docxList', JSON.stringify(this.DocxList));
         },
+        async saveTaskList() {
+            localStorage.setItem('docxList', JSON.stringify(this.DocxList));
+        },
+
     },
+    persist: true
 
 
 });

src/router/index.ts

@@ -7,6 +7,8 @@ import RegisterVue from '../components/Register.vue'
 import UploadVue from '../components/Upload.vue'
 import TCListVue from '../components/TCList.vue'
 import TCFinalListVue from '../components/TCFinalList.vue'
+import TaskListVue from '../components/TaskList.vue'
+import HistoryListVue from '../components/HistoryList.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,16 +23,30 @@ const router = createRouter({
         path: '/home',
         name: 'home',
         component: HomeVue,
-        children: [{
-            path: '/upload',
-            component: UploadVue
-        },{
-            path: '/testcaseList',
-            component: TCListVue
-        },{
-            path: '/tcFinalList',
-            component: TCFinalListVue
-        }
+        children: [
+            {
+                path: '/upload',
+                name: 'upload',
+                component: UploadVue
+            },{
+                path: '/testcaseList',
+                name: 'testcaseList',
+                component: TCListVue
+            },{
+                path: '/tcFinalList',
+                name: 'tcFinalList',
+                component: TCFinalListVue
+            },
+            {
+                path: '/taskList',
+                name: 'taskList',
+                component: TaskListVue
+            },
+            {
+                path: '/historyList',
+                name: 'historyList',
+                component: HistoryListVue
+            }
         ]
     },
         {
@@ -44,38 +60,52 @@ const router = createRouter({
             name: 'login',
             component: LoginVue,
             children: []
-        }, {
-            path: '/upload',
-            name: 'upload',
-            component: LayoutVue,
-            children: [
-                {
-                    path: '',
-                    component: UploadVue
-                }
-            ]
-
-        }, {
-            path: '/testcaseList',
-            name: 'testcaseList',
-            component: LayoutVue,
-            children: [
-                {
-                    path: '',
-                    component: TCListVue
-                }
-            ]
-        }, {
-            path: '/tcFinalList',
-            name: 'tcFinalList',
-            component: LayoutVue,
-            children: [
-                {
-                    path: '',
-                    component: TCFinalListVue
-                }
-            ]
-        }
+         }
+        // {
+        //     path: '/upload',
+        //     name: 'upload',
+        //     component: UploadVue,
+        //     children: [
+        //         {
+        //             path: '',
+        //             component: UploadVue
+        //         }
+        //     ]
+        //
+        //  },
+        // {
+        //     path: '/testcaseList',
+        //     name: 'testcaseList',
+        //     component: TCListVue,
+        //     children: [
+        //         {
+        //             path: '',
+        //             component: TCListVue
+        //         }
+        //     ]
+        // },
+        //     {
+        //     path: '/tcFinalList',
+        //     name: 'tcFinalList',
+        //     component: LayoutVue,
+        //     children: [
+        //         {
+        //             path: '',
+        //             component: TCFinalListVue
+        //         }
+        //     ]
+        // },
+        //  {
+        //     path: '/taskList',
+        //     name: 'taskList',
+        //     component: TaskListVue,
+        //     children: [
+        //         {
+        //             path: '',
+        //             component: TCListVue
+        //         }
+        //     ]
+        // }
     ]
 })
 
@@ -84,7 +114,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     if (to.path === '/login') return next()
     // 获取token
-    const tokenStr = window.sessionStorage.getItem('userInfo')
+    const tokenStr = window.localStorage.getItem('userInfo')
     if (!tokenStr) return next('/login')
     next()
 })