add.try

index.html

@@ -11,3 +11,4 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+

package.json

@@ -10,9 +10,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.5.0",
     "element-plus": "^2.6.0",
+    "mammoth": "^1.7.1",
+    "pinia": "^2.1.7",
     "vue": "^3.4.19",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -23,3 +28,5 @@
     "vue-tsc": "^1.8.27"
   }
 }
+
+

src/components/Layout.vue

@@ -3,10 +3,9 @@
       <main><router-view /></main>
     </div>
   </template>
-  
   <script lang="ts" setup>
   </script>
-  
+
   <style scoped>
   /* 添加共享布局样式 */
   .main {
@@ -20,4 +19,3 @@
     /* background-color: red; */
   }
   </style>
-  

src/components/TCFinalList.vue

@@ -1,120 +1,140 @@
 <template>
-    <el-container>
-      <el-main>
-        <el-card class="card">
-            <el-table :data="tableData" border height="300" style="width: 100%">
-            <el-table-column prop="编号" label="编号" width="100" />
-            <el-table-column prop="用例标题" label="用例标题" width="180" />
-            <el-table-column prop="前置条件" label="前置条件" width="180" />
-            <el-table-column prop="步骤描述" label="步骤描述" width="180" />
-            <el-table-column prop="预期结果" label="预期结果" width="180" />
-            </el-table>
-        </el-card>
-      </el-main>
-      <el-footer>
-        <div class="button-container">
-            <el-button type="primary" class="custom-button" @click="gotoLastPage">上一步</el-button>
-            <el-button type="primary" class="custom-button" @click="exportTestCase">导出</el-button>
-        </div>
-      </el-footer>
-    </el-container>
-  </template>
+  <el-container>
+    <el-main>
+      <el-card class="card">
+        <el-table :data="tableData" border height="300" style="width: 100%">
+          <el-table-column prop="编号" label="编号" width="100" />
+          <el-table-column prop="用例标题" label="用例标题" width="180" />
+          <el-table-column prop="前置条件" label="前置条件" width="180" />
+          <el-table-column prop="步骤描述" label="步骤描述" width="180" />
+          <el-table-column prop="预期结果" label="预期结果" width="180" />
+        </el-table>
+      </el-card>
+    </el-main>
+    <el-footer>
+      <div class="button-container">
+        <el-button type="primary" class="custom-button" @click="gotoLastPage">上一步</el-button>
+        <el-button type="primary" class="custom-button" @click="exportTestCase">导出</el-button>
+      </div>
+    </el-footer>
+  </el-container>
+</template>
 
 <style scoped>
 .button-container {
-    display: flex;
-    justify-content: flex-end; /* 让按钮之间的空间均匀分布 */
+  display: flex;
+  justify-content: flex-end;
+  /* 让按钮之间的空间均匀分布 */
 }
 
 .custom-button {
-  width: 100px; /* 设置按钮的宽度为相同的固定值 */
+  width: 100px;
+  /* 设置按钮的宽度为相同的固定值 */
 }
-
 </style>
-  
-  <script lang="ts" setup>
-  const tableData = [
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-    {
-      编号: '2016',
-      用例标题: 'Tom',
-      前置条件: 'No. 189, Grove St, Los Angeles',
-      步骤描述: 'aaaaaa',
-      预期结果: 'aaaa',
-    },
-  ]
 
-  import { useRouter } from 'vue-router';
+<script lang="ts" setup>
+import * as XLSX from 'xlsx'
+import { useRouter } from 'vue-router';
+const tableData = [
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+  {
+    编号: '2016',
+    用例标题: 'Tom',
+    前置条件: 'No. 189, Grove St, Los Angeles',
+    步骤描述: 'aaaaaa',
+    预期结果: 'aaaa',
+  },
+]
+const router = useRouter();
+const gotoLastPage = () => {
+  router.push('/testcaseList');
+};
+
+const exportTestCase = async () => {
+
 
-  const router = useRouter();
-  const gotoLastPage = () => {
-    router.push('/testcaseList');
-  };
 
-  const exportTestCase = () => {
-    
-  }
-  </script>
-  
+  // 导出 工作簿
+  // 创建一个新的工作簿
+   const wb = XLSX.utils.book_new();
+  // 将表格数据转换为工作表
+  const ws = XLSX.utils.json_to_sheet(tableData);
+  // 将工作表添加到工作簿中
+  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+  // 将工作簿写入一个数组
+  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+  // 创建一个blob对象，用于下载
+  const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
+
+  // 创建一个链接元素并模拟点击进行下载
+  const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = 'exported_data.xlsx';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+}
+</script>

src/components/TCList.vue

@@ -1,184 +1,293 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref,onMounted} from "vue";
 import { useRouter } from 'vue-router';
+import { useDocxStore } from '../pinia/docx'
 
+import { ElMessage } from 'element-plus'
+import * as echarts from 'echarts';
+const useStore = useDocxStore()
+
+
+onMounted(()=>{
+  Showecharts()
+})
+
+type docxList = {
+  docxName: String,
+  docxMessageList?: Array<object>
+}
+const docxList = ref<docxList[]>([])
+docxList.value = useStore.DocxList
+const itemIndex = ref(0)
 const textarea = ref('')
+const titles = ref('')
+ type ActionList = {
+   docxName: String;
+   description: string;
+ };
 
-type TestCase = {
-  id: number;
-  title: string;
-  description: string;
-};
-const testCase = ref<TestCase[]>([]);
-testCase.value = [
-  {
-    id: 1,
-    title: "这是标题这是标题这是标题这是标题这是标题这是标题",
-    description:
-      "娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸娇地方废物放假哦对司机发票的撒娇阿佛i额欸",
-  },
-  {
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },
-  {
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },{
-    id: 1,
-    title: "这是标题",
-    description: "这是描述",
-  },
+//历史操作记录，还要调整，最好能做到单个文件展示，我再调调
+var actionList = ref<ActionList[]>([]);
+actionList.value = [
+    {
+      docxName: "文件名",
+      description: "操作记录",
+
+}
 ];
 
+const testCase = ref<any>([]);
+// 默认展示第一个列表
+testCase.value = useStore.DocxList[itemIndex.value].docxMessageList
+
 const handleImproveButton = (p: { row: any }) => {
   console.log(p.row);
+  actionList.value.push({
+    docxName: "文件名",
+    description: "细化用例",
+
+  })
 };
 
 const router = useRouter();
 const gotoLastPage = () => {
-    router.push('/upload');
-  };
+  router.push('/upload');
+};
 const gotoNextPage = () => {
-    router.push('/tcFinalList');
+  router.push('/tcFinalList');
+};
+
+const docxMessage = (index: number) => {
+  itemIndex.value = index
+  testCase.value = useStore.DocxList[itemIndex.value].docxMessageList
+}
+
+
+// 删除列表
+const deteleList = (scope: any) => {
+  const obj: any = {
+    id: scope.row.id,
+    index: itemIndex.value
+  }
+  useStore.DeteleDocxList(obj)
+  actionList.value.push({
+    docxName: "文件名",
+    description: "删除用例",
+
+  })
+  testCase.value = useStore.DocxList[itemIndex.value].docxMessageList
+}
+
+const addDocxList = () => {
+  if (textarea.value !== '') {
+    let ids: any = useStore.DocxList[itemIndex.value].docxMessageList?.length
+    useStore.DocxList[itemIndex.value].docxMessageList?.unshift({
+      id: ids + 1,
+      description: textarea.value
+    })
+    actionList.value.push({
+      docxName: "文件名",
+      description: "新增用例",
+
+    })
+    ElMessage({
+      message: '添加成功',
+      type: 'success'
+    })
+    textarea.value = ''
+  } else {
+    ElMessage({
+      message: '用例描述不能为空',
+      type: 'error'
+    })
+  }
+}
+
+// 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:'.ppd文件'}
+        ]
+      }
+    ]
   };
+
+  option && myChart.setOption(option);
+
+}
 </script>
 
 <template>
   <el-container>
-    <el-main>
-      <div class="root">
-        <el-card class="card">
-          <el-scrollbar class="scrollbar">
-            <el-row class="titleTagRow">
-              <el-tag
-                class="titleTag"
-                type="primary"
-                effect="light"
-                size="large"
-                round
-                >当前用例列表</el-tag
-              >
+    <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>文件名</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">
+          <el-card class="card">
+            <el-scrollbar class="scrollbar">
+              <el-row class="titleTagRow">
+                <el-tag class="titleTag" type="primary" effect="light" size="large" round>当前用例列表</el-tag>
+              </el-row>
+              <el-col class="container">
+                <el-table :data="testCase" style="width: 100%" border>
+                  <el-table-column label="编号" type="index" width="60" />
+                  <el-table-column label="用例标题" prop="title" min-width="200" />
+                  <el-table-column show-overflow-tooltip label="用例描述" prop="description" min-width="150" />
+                  <el-table-column width="60">
+                    <template #default="scope">
+                      <el-button type="primary" link size="small" @click="handleImproveButton(scope)">细化</el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column width="60">
+                    <template #default="scope">
+                      <el-button type="primary" link size="small" @click="deteleList(scope)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-col>
+            </el-scrollbar>
+            <div class="Pop-upBox">
+
+            </div>
+            <el-row class="input-row">
+              <div style="min-width: 400px; width: 100%;">
+                <el-input v-model="textarea" style="min-width: 400px; width: 100%;" :rows="4" type="textarea"
+                  placeholder="请输入要补充的待测功能" />
+                <div>
+                  <el-button type="primary" class="add-button" style="margin-top:2vw;"
+                    @click="addDocxList">增加</el-button>
+                </div>
+              </div>
             </el-row>
-            <el-col class="container">
-              <el-table :data="testCase" style="width: 100%" border>
-                <el-table-column label="编号" prop="id" width="60" />
-                <el-table-column
-                  label="用例标题"
-                  prop="title"
-                  min-width="200"
-                />
-                <el-table-column
-                  show-overflow-tooltip
-                  label="用例描述"
-                  prop="description"
-                  min-width="150"
-                />
-                <el-table-column width="60">
-                  <template #default="scope">
-                    <el-button
-                      type="primary"
-                      link
-                      size="small"
-                      @click="handleImproveButton(scope)"
-                      >细化</el-button
-                    >
-                  </template>
-                </el-table-column>
-                <el-table-column width="60">
-                  <el-button type="primary" link size="small" @click=""
-                    >删除</el-button
-                  ></el-table-column
-                >
-              </el-table>
-            </el-col>
-          </el-scrollbar>
-          <el-row class = "input-row">
-          <div style="min-width: 400px; width: 100%;">
-          <el-input
-            v-model="textarea"
-            style="min-width: 400px; width: 100%;"
-            :rows="4"
-            type="textarea"
-            placeholder="请输入要补充的待测功能"
-          />
+          </el-card>
+        </div>
+        <div class="timeline">
+          <div class="header-Box">
+            <el-timeline>
+              <el-timeline-item v-for="(activity, index) in actionList" :key="index" :timestamp="activity.time"
+                size="large">
+                {{ activity.description }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+
+          <div class="charts-box">
+            <div id="pt" style="width:100%; height:100%;"></div>
+          </div>
         </div>
-        <div>
-          <el-button type="primary" class="add-button" @click=""
-          >增加</el-button
-        >
+      </el-main>
+      <el-footer>
+        <div class="button-container">
+          <el-button type="primary" class="custom-button" @click="gotoLastPage">上一步</el-button>
+          <el-button type="primary" class="custom-button" @click="gotoNextPage">下一步</el-button>
         </div>
-        </el-row>
-        </el-card>
-      </div>
-    </el-main>
-    <el-footer>
-      <div class="button-container">        
-        <el-button type="primary" class="custom-button" @click="gotoLastPage">上一步</el-button>
-        <el-button type="primary" class="custom-button" @click="gotoNextPage">下一步</el-button>
-      </div>
-    </el-footer>
+      </el-footer>
+    </el-container>
   </el-container>
 </template>
 
 <style scoped>
 .button-container {
-    display: flex;
-    justify-content: flex-end; /* 让按钮之间的空间均匀分布 */
+  margin-top: 2vw;
+  display: flex;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  /* 让按钮之间的空间均匀分布 */
 }
 
 .custom-button {
-  width: 100px; /* 设置按钮的宽度为相同的固定值 */
+  width: 100px;
+  /* 设置按钮的宽度为相同的固定值 */
 }
 
-.input-row{
+.input-row {
   padding: 1em 3em;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-.add-button{
+
+.add-button {
   margin: auto 2em;
 
 }
+
 .titleTag {
   height: 2em;
   width: 8em;
   margin-left: 3em;
   font-size: large;
 }
+
 .container {
   width: 60vw;
   padding: 1em 3em;
 }
+
 .rowContainer {
   display: flex;
   justify-content: center;
   margin: 1em 0;
 }
+
 .root {
   display: flex;
   justify-content: center;
@@ -189,11 +298,13 @@ const gotoNextPage = () => {
   flex-direction: row-reverse;
   align-items: flex-start;
 }
+
 .customerMessage {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 }
+
 .textArea {
   display: inline-block;
   width: 300px;
@@ -202,9 +313,70 @@ const gotoNextPage = () => {
 .card {
   margin: auto;
 }
+
 .scrollbar {
   height: 400px;
   width: fit-content;
 }
+
+.card-item {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 10vh;
+  line-height: 10vh;
+  text-align: center;
+  background-color: #fcfcfc;
+  cursor: pointer;
+}
+
+
+.Pop-upBox {
+  z-index: 999;
+  position: absolute;
+}
+
+.active {
+  background-color: #409eff;
+  color: #fff;
+}
+
+.timeline {
+  width: 15vw;
+  height: 100vh;
+}
+
+.header-Box {
+  width: 100%;
+  height: 50vh;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.charts-box {
+  width: 100%;
+  height: 50vh;
+  background-color:#fff;
+}
+
+/* 启用滚动条样式化，需要在浏览器设置中启用 */
+::-webkit-scrollbar {
+    width: 10px; /* 滚动条的宽度 */
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+    background: #f0f0f0; /* 滚动条轨道背景颜色 */
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    background: #696969; /* 滚动条滑块颜色 */
+    border-radius: 10px; /* 滑块边角弧度 */
+}
+
+/* 滑块悬停状态 */
+::-webkit-scrollbar-thumb:hover {
+    background: #555; /* 鼠标悬停在滑块上时的颜色 */
+}
 </style>
- 

src/components/Upload.vue

@@ -1,23 +1,33 @@
 <template>
   <div class="common-layout">
+    <transition name="el-fade-in-linear">
+      <div v-if="showBox" class="PrupBox">
+        <el-form label-width="80px" style="max-width:350px; margin:0 auto; margin-top:5vw;">
+
+          <el-form-item label="上传文件:">
+            <div class="boxjia" @click="uploadDocx">
+              <input ref='uploadInput' type="file" class="dl-none" name="icon" @change="dealfilechange"
+                style="display:none;" accept=".docx" multiple />
+            </div>
+          </el-form-item>
+          <el-button type="Primary" style="width:100%; color:#409eff; margin-top:1vw;" plain="true"
+            @click="closeShowBox">确定
+          </el-button>
+        </el-form>
+      </div>
+    </transition>
     <el-container>
       <el-main>
-        <el-upload
-      class="upload-demo"
-      drag
-      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-      multiple
-    >
-      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-      <div class="el-upload__text">
-        Drop file here or <em>click to upload</em>
-      </div>
-      <template #tip>
-        <div class="el-upload__tip">
-          word files with a size less than 500kb
+        <span style="color:#409eff; cursor:pointer" @click="uploadFn">上传文件</span>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          Drop file here or <em>click to upload</em>
         </div>
-      </template>
-    </el-upload>
+        <template #tip>
+          <div class="el-upload__tip">
+            word files with a size less than 500kb
+          </div>
+        </template>
       </el-main>
       <el-footer>
         <el-button type="primary" @click="gotoTargetPage">下一步
@@ -28,17 +38,119 @@
       </el-footer>
     </el-container>
   </div>
-    
-    
-  </template>
-  
-  <script setup lang="ts">
-  import {ArrowRight} from '@element-plus/icons-vue';
-  import { useRouter } from 'vue-router';
-
-  const router = useRouter();
-
-  const gotoTargetPage = () => {
-    router.push('/testcaseList');
-  };
-  </script>
+</template>
+
+<script setup lang="ts">
+// import mammoth from "mammoth";
+import dayjs from 'dayjs'
+import { ArrowRight } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue'
+import { useDocxStore } from '../pinia/docx'
+import { ElMessage } from 'element-plus';
+const useStore = useDocxStore()
+// const parsedContent = ref('')
+const router = useRouter()
+const uploadInput = ref<HTMLDivElement | null>(null);
+const showBox = ref(false)
+
+// const form = reactive({
+//   title: '',
+//   message: ''
+// })
+const dealfilechange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+  if (files && files.length > 0) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      // 检查文件扩展名是否以 .docx 结尾
+      const fileExtension = file.name.toLowerCase().split('.').pop();
+      if (fileExtension === 'docx') {
+        console.log(file.name);
+        useStore.DocxList.unshift({ docxName: file.name, docxMessageList: [], time: dayjs().format('YYYY-MM-DD HH:mm:ss') })
+        ElMessage({
+          message: '上传文件成功',
+          type: 'success'
+        })
+      } else {
+        ElMessage({
+          message: '请上传.docx文件',
+          type: 'warning'
+        })
+      }
+      // if (fileExtension === 'docx') {
+      //   const reader = new FileReader();
+      //   reader.onload = (e: ProgressEvent<FileReader>) => {
+      //     const arrayBuffer = e.target?.result as ArrayBuffer;
+      //     mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
+      //       .then((result) => {
+      //         console.log(result.value);
+      //         parsedContent.value = result.value; // 得到的 HTML 内容
+      //         console.log(result.messages); // 解析过程中的消息
+      //       })
+      //       .catch((error) => {
+      //         console.error('解析错误:', error);
+      //       });
+      //   };
+      //   reader.readAsArrayBuffer(file);
+      // } else {
+      //   alert('请选择一个 .docx 文件');
+      // }
+    }
+  } else {
+    ElMessage({
+      message: '你还没有选择文件',
+      type: 'error'
+    })
+  }
+};
+
+
+function uploadFn() {
+  showBox.value = true
+}
+
+
+const gotoTargetPage = () => {
+  router.push('/testcaseList');
+};
+
+function closeShowBox() {
+  showBox.value = false
+}
+
+function uploadDocx() {
+  uploadInput.value.click()
+}
+
+</script>
+
+
+<style scoped>
+.common-layout {
+  position: relative;
+}
+
+.PrupBox {
+  z-index: 999;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50vw;
+  height: 50vh;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 1px solid #efefef;
+}
+
+.boxjia {
+  position: relative;
+  width: 8vw;
+  height: 8vw;
+  background: url(/public/tj.png) no-repeat center center;
+  background-size: 50%;
+  border: 1px solid #efefef;
+}
+</style>

src/main.ts

@@ -4,8 +4,12 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import router from './router'
-
+import { createPinia } from 'pinia'
+const pinia = createPinia()
 const app = createApp(App)
+app.use(pinia)
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')
+
+

src/pinia/docx.ts

@@ -0,0 +1,60 @@
+import { defineStore } from "pinia"
+import { ref } from 'vue'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+interface DocxList {
+    docxName: String,
+    time?:String,
+    docxMessageList?: Array<object>
+}
+
+interface obj {
+    id: Number,
+    index: Number
+}
+export const useDocxStore = defineStore('docx', () => {
+    const DocxList = ref<DocxList[]>([{
+        docxName: '文件名1',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    }, {
+        docxName: '文件名2',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    }, {
+        docxName: '文件名3',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    }, {
+        docxName: '文件名4',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    }, {
+        docxName: '文件名5',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    },
+    {
+        docxName: '文件名6',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    },{
+        docxName: '文件名7',
+        time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        docxMessageList: []
+    }])
+
+
+    const DeteleDocxList = (obj: obj) => {
+        // 删除列表
+        DocxList.value[obj.index].docxMessageList= DocxList.value[obj.index].docxMessageList.filter(item => {
+            return item.id !== obj.id
+        })
+       ElMessage({
+        type:'success',
+        message:'删除成功'
+       })
+    }
+
+    return { DocxList, DeteleDocxList }
+})

src/router/index.ts

@@ -19,28 +19,34 @@ const router = createRouter({
             name: 'upload',
             component: LayoutVue,
             children: [
-                {path: '', 
-                component: UploadVue}
+                {
+                    path: '',
+                    component: UploadVue
+                }
             ]
-            
+
         }, {
             path: '/testcaseList',
             name: 'testcaseList',
             component: LayoutVue,
             children: [
-                {path: '', 
-                component: TCListVue}
+                {
+                    path: '',
+                    component: TCListVue
+                }
             ]
         }, {
             path: '/tcFinalList',
             name: 'tcFinalList',
             component: LayoutVue,
             children: [
-                {path: '', 
-                component: TCFinalListVue}
+                {
+                    path: '',
+                    component: TCFinalListVue
+                }
             ]
         }
     ]
 })
 
-export default router
+export default router

src/style.css

@@ -26,8 +26,9 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
+  min-width:320px;
   min-height: 100vh;
+  /* max-width:100vw; */
 }
 
 h1 {
@@ -59,9 +60,9 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
+  max-width:100%;
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
 }
 
@@ -77,3 +78,5 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+

src/vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+