添加移除切换按钮

src/views/modules/other-transaction/scrap.vue

@@ -27,7 +27,21 @@
         prefix-icon="el-icon-scan"
         @keyup.enter.native="handleScan"
         ref="scanInput"
+        inputmode="none"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
       />
+      <div class="mode-switch">
+        <el-switch
+          class="custom-switch"
+          v-model="isRemoveMode"
+          active-color="#ff4949"
+          inactive-color="#13ce66">
+        </el-switch>
+        <span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span>
+        <span v-else class="switch-text2">{{ '添加' }}</span>
+      </div>
     </div>
 
     <!-- 标签列表 -->
@@ -115,6 +129,7 @@ export default {
   data() {
     return {
       scanCode: '',
+      isRemoveMode: false, // 默认为添加模式
       labelList: [],
       selectedReason: '',
       scrapReasons: [
@@ -131,7 +146,11 @@ export default {
         return;
       }
 
-      this.validateAndAddLabel(this.scanCode.trim());
+      if (this.isRemoveMode) {
+        this.removeLabelByCode(this.scanCode.trim());
+      } else {
+        this.validateAndAddLabel(this.scanCode.trim());
+      }
       this.scanCode = '';
     },
 
@@ -180,6 +199,17 @@ export default {
       });
     },
 
+    // 通过条码移除标签
+    removeLabelByCode(labelCode) {
+      const index = this.labelList.findIndex(item => item.labelCode === labelCode);
+      if (index !== -1) {
+        this.labelList.splice(index, 1);
+        this.$message.success('移除成功');
+      } else {
+        this.$message.warning('未找到该标签');
+      }
+    },
+
     // 处理报废原因选择
     handleReasonChange(value) {
       this.selectedReason = value;
@@ -309,9 +339,16 @@ export default {
   border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 /* 紧凑型输入框样式 */
+.compact-input {
+  flex: 1;
+}
+
 .compact-input ::v-deep .el-input__inner {
   height: 36px;
   padding: 0 12px 0 35px;
@@ -334,6 +371,49 @@ export default {
   right: 30px;
 }
 
+/* 模式切换开关 */
+.mode-switch {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-switch {
+  transform: scale(1.3);
+}
+
+/* 中间文字 */
+.switch-text {
+  position: absolute;
+  left: 25%;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.switch-text2 {
+  position: absolute;
+  left: 75%;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 调整 switch 尺寸以便容纳文字 */
+.custom-switch ::v-deep .el-switch__core {
+  width: 60px;
+  height: 28px;
+}
+
 /* 区域标题 */
 .section-title {
   display: flex;