Merge branch 'master' of https://gitlink.org.cn/SheYuWu03/front

推送前的合并

src/views/CluesPage.vue

@@ -43,47 +43,18 @@
                     @confirm = 'handleSearchDialogConfirm'
                     />
 				</el-button>
-
-
-                <el-button class = 'btnPlus' @click="addOneClue">
-                    <el-tooltip content = '添加'>
-                        <el-icon><Plus /></el-icon>
-                    </el-tooltip>
-				</el-button>
-                <AddDialog 
-                    ref="addDialog"
-                    :addClueCols="clueCols"
-                    :id="MaxId"
-                    :tableId="clueId"
-                >
-
-                </AddDialog>
-
-
-
-
-                <el-button class = 'btnPlus' @click="addOneClue">
-                    <el-tooltip content = '添加'>
-                        <el-icon><Plus /></el-icon>
-                    </el-tooltip>
-				</el-button>
-                <AddDialog 
-                    ref="addDialog"
-                    :addClueCols="clueCols"
-                    :id="MaxId"
-                    :tableId="clueId"
-                >
-
-                </AddDialog>
-
-
 				<el-button class = 'btnMore' @click="dochart">
                     <el-tooltip content = '更多'>
                         <el-icon><More /></el-icon>
                     </el-tooltip>
 				</el-button>
 			</el-header>
-            <EditDialog :columns="cols" ref="editDialog" :editDataID="currentEditDataID"></EditDialog>
+            <!-- 编辑线索的对话框 -->
+            <EditDialog 
+                :columns="cols" 
+                ref="editDialog" 
+                :editDataID="currentEditDataID"
+            />
 			<el-main class = 'containerMain'>
 				<el-table 
                     class = 'containerTable' 
@@ -114,17 +85,17 @@
 			<!-- </el-main> -->
             <el-footer>
                 <el-button class = 'btnPlus' @click="addOneClue">
-                    <el-tooltip content = '添加'>
+                    <el-tooltip content = '添加一条线索'>
                         <el-icon><Plus /></el-icon>
                     </el-tooltip>
 				</el-button>
+                <!-- 添加线索的对话框 -->
                 <AddDialog 
                     ref="addDialog"
                     :addClueCols="clueCols"
                     :id="MaxId"
                     :tableId="clueId"
-                >
-                </AddDialog>
+                />
             </el-footer>
 		</el-main>
 	</el-container>

src/views/WithDraw.vue

@@ -1,18 +1,44 @@
 <template>
-  <el-table :data="tableData" style="width: 100%">
-    <!-- 动态生成表格列 -->
-    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
-      <template v-slot="scope">
-        <span>{{ formatValue(scope.row,column.prop) }}</span>
-      </template>
-    </el-table-column>
-    <!-- 添加删除按钮 -->
-    <el-table-column label="操作">
-      <template v-slot:default="scope">
-        <el-button type="text" @click="withdrawRow(scope.row)">撤销</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <el-container>
+    <el-header class="withrawHeader">
+      <h1 class="headerText">回收站</h1>
+    </el-header>
+    <el-main>
+      <!-- 工具栏 -->
+      <el-header class="toolbar">
+        <el-tooltip class="withdrawToolTip" content="撤销对选中线索的删除">
+          <el-button class='btnWithdraw' @click="withdrawSelected">
+            <el-icon><Delete /></el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip class="deleteToolTip" content = '彻底删除选中线索'>
+          <el-button class = 'btnDelete' @click="deleteSelected">
+            <el-icon><DeleteFilled /></el-icon>
+          </el-button>
+        </el-tooltip>
+      </el-header>
+      <el-table 
+        :data="tableData" 
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" class="withdrawSelectionCol"></el-table-column>
+        <!-- 动态生成表格列 -->
+        <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
+          <template v-slot="scope">
+            <span>{{ formatValue(scope.row,column.prop) }}</span>
+          </template>
+        </el-table-column>
+        <!-- 添加删除按钮 -->
+        <el-table-column label="操作">
+          <template v-slot:default="scope">
+            <el-button type="text" @click="withdrawRow(scope.row)">撤销</el-button>
+            <el-button type="text" @click="deleteClue(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
@@ -30,44 +56,12 @@ export default {
         { prop: "table_id", label: "表ID" },
         { prop: "clue_id", label: "线索ID" },
         { prop: "del_time", label: "时间" }
-      ] // 表格列配置
+      ], // 表格列配置
+      deleteClues:[], // 选中的数据行
     };
   },
   methods: {
-    
-    getDelete() {
-      // 获取表格数据
-      axios.get('http://localhost:8000/showDelRecords/')
-        .then(res => {
-          console.log(res.data)
-          if(res.data.message=='没有删除记录')
-          {
-            return
-          }
-          this.tableData = res.data; // 将接口返回的数据赋值给表格数据
-        })
-        .catch(error => {
-          console.error(error);
-        });
-    },
-    withdrawRow(row) {
-      const index = this.tableData.indexOf(row);
-      if (index !== -1) {
-        // 发送请求到后端，传输撤销的行的 ID
-        axios.post('http://localhost:8000/withDraw/', { id: row.id })
-          .then(response => {
-            
-            console.log('撤销成功:', response.data);
-            // 从表格数据中移除指定行
-            this.tableData.splice(index, 1);
-          })
-          .catch(error => {
-            console.error('撤销失败:', error);
-          });
-      }
-    }
-  },
-  formatValue(row, prop) {
+    formatValue(row, prop) {
       // 针对 type 字段进行特殊处理
       if (prop === 'type' && row[prop] === '0') {
         if (row['clue_id']) {
@@ -79,12 +73,161 @@ export default {
         return '线索'
       return row[prop];
     },
+    getDelete() {
+      // 获取表格数据
+      axios.get('http://localhost:8000/showDelRecords/').then(res => {
+        if(res.data.message=='没有删除记录')
+        {
+          return
+        }
+        this.tableData = res.data.data; // 这里要注意，最后一个data需要和后端返回的键名对应
+      })
+      .catch(error => {
+        this.$handleNetError(error); // 处理网络错误
+      });
+    },
+    withdrawRow(row) {
+      const index = this.tableData.indexOf(row);
+      if (index !== -1) {
+        // 发送请求到后端，传输撤销的行的 ID
+        axios.post('http://localhost:8000/withDraw/', { id: row.id }).then(response => {
+          console.log('撤销成功:', response.data);
+          // 从表格数据中移除指定行
+          this.tableData.splice(index, 1);
+        })
+        .catch(error => {
+          this.$handleNetError(error);
+        });
+      }
+    },
+    handleSelectionChange(selection){
+      this.deleteClues = selection; // 获取选中的数据
+    },
+    // 批量撤销
+    withdrawSelected(){
+      // 如果没有选择数据，抛出警告并终止
+      if(this.deleteClues.length == 0){
+        this.$message({
+          type: 'warning',
+          message: '请选择要撤销的线索'
+        });
+        return;
+      }
+
+      for(let i = 0;i < this.deleteClues.length;i++){
+        this.$axios.post('http://localhost:8000/withDraw/',{ id:this.deleteClues[i].id })
+        .catch(error => {
+          this.$handleNetError(error);
+          return;
+        });
+      }
+      this.$message({
+        type: 'success',
+        message: '撤销成功，即将刷新界面'
+      });
+      // 撤销成功后，更新表格数据
+      location.reload();
+    },
+    // 删除单条线索
+    deleteClue(row){
+      const deleteItem = {
+        table_id: row.table_id,
+        clue_id: row.clue_id
+      }
+      this.$axios.post('http:localhosat:8000/deleteSelected/',{deleteData:deleteItem}).then(response=>{
+        if(response.data.message == '删除成功'){
+          // 弹窗提示
+          this.$message({
+            type: 'success',
+            message: '删除成功，即将刷新界面'
+          });
+          
+          location.reload(); // 刷新页面
+        }else{
+          this.$message({
+            type: 'error',
+            message: '删除失败'
+          });
+        }
+      })
+      .catch(error=>{
+        this.$handleNetError(error); // 处理网络请求错误
+      })
+    },
+    // 删除选中的线索
+    deleteSelected(){
+      // 如果没有选择数据，抛出警告
+      if(this.deleteClues.length == 0){
+        this.$message({
+          type: 'warning',
+          message: '请选择要删除的线索'
+        });
+        return;
+      }
+
+      // 遍历选中的数据行，将要删除的数据存入 deleteItems 数组
+      const deleteItems = this.deleteClues.map(row => ({
+        table_id: row.table_id, // 注意命名要与后端保持一致
+        clue_id: row.clue_id,
+      }));
+
+      // 循环发送删除请求
+      for(let i = 0; i < deleteItems.length; i++){
+        this.$axios.post('http://localhost:8000/deleteSelected/',
+          {table_id:deleteItems[i].table_id, clue_id:deleteItems[i].clue_id}).then(response=>{
+          if(response.data.message == '删除成功'){
+            // 弹窗提示
+            this.$message({
+              type: 'success',
+              message: '删除成功'
+            });
+          }else{
+            this.$message({
+              type: 'error',
+              message: '删除失败'
+            });
+          }
+        })
+        .catch(error=>{
+          this.$handleNetError(error); // 处理网络错误
+          return;
+        })
+      }
+      this.$message({
+        type: 'success',
+        message: '删除成功，即将刷新界面'
+      });
+      // 撤销成功后，更新表格数据
+      location.reload();
+    }
+  },
   mounted() {
     this.getDelete(); // 在组件挂载后调用获取数据的方法
   }
 };
 </script>
 
-<style>
-/* 可以添加一些自定义样式 */
+<style scoped>
+.withdrawSelectionCol{
+  width: 50px;
+}
+.headerText{
+  font-size: 24px;
+  text-align: center;
+}
+.toolbar{
+  height:6%;
+	padding:2%;
+	display:flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+.btnDelete, .btnWithdraw{
+  text-align: start;
+  padding: 0.6%;
+  margin: 0;
+}
+.deleteToolTip, .withdrawToolTip .el-tooltip__content{
+  color: red !important;
+}
 </style>