优化销售退货使用体验

src/views/erp/purchase/return/PurchaseReturnForm.vue

@@ -302,8 +302,8 @@ const submitForm = async () => {
     if (item.ifQr) {
       continue;
     }
-    if (item.qrCodeLineCount !== item.count) {
-      message.error(`第 ${i + 1} 行的入库数量和码的数量不同`)
+    if (item.qrcodes.split('\n').length !== item.count) {
+      message.error(`第 ${i + 1} 行的退货数量和码的数量不同`)
       return
     }
   }

src/views/erp/purchase/return/components/PurchaseReturnItemForm.vue

@@ -14,30 +14,6 @@
                 </el-select>
               </el-form-item>
             </template>
-          </el-table-column>
-          <el-table-column label="货位" min-width="125">
-        <template #default="{ row, $index }">
-          <el-form-item
-            :prop="`${$index}.warehouseLocationId`"
-            :rules="formRules.warehouseLocationId"
-            class="mb-0px!"
-          >
-            <el-select
-              v-model="row.warehouseLocationId"
-              clearable
-              filterable
-              placeholder="请选择货位"
-            
-            >
-              <el-option
-                v-for="item in locationList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </template>
           </el-table-column>
           <el-table-column label="产品名称" min-width="180">
             <template #default="{ row }">
@@ -85,9 +61,13 @@
           <el-table-column label="码" fixed="right" min-width="40">
             <template #default="{ row ,$index}">
               <el-form-item class="mb-0px!">
-                <el-button :disabled="row.ifQr" @click="openQrDialog($index)" link>
+               
+                <el-button :disabled="row.ifQr" @click="openQrTable($index,row)" link>
                   <Icon icon="fa:qrcode" />
                 </el-button>
+                <!-- <el-button :disabled="row.ifQr" @click="openQrDialog($index)" link>
+                  <Icon icon="fa:qrcode" />
+                </el-button> -->
               </el-form-item>
             </template>
           </el-table-column>
@@ -172,10 +152,14 @@
           </template>
         </Dialog>
       </div>
+      <PurchaseReturnItemQrForm ref="qrCodeTableDialogRef" :currentRowIndex="currentRowIndex" :currentRow="currentRow" @close="onQrDialogClose" @submit-data="onQrCodeList" />
+ 
   </div>
 </template>
 <script setup lang="ts">
 import { WarehouseApi as WarehouseLocactionApi, WarehouseLocationVO } from '@/api/erp/warehouse'
+import PurchaseReturnItemQrForm from './PurchaseReturnItemQrForm.vue';
+
 
 import { StockApi } from '@/api/erp/stock/stock'
 import {
@@ -188,8 +172,6 @@ import {
 } from '@/utils'
 import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 
-const locationList = ref<WarehouseLocationVO[]>([]) // 仓库列表
-
 const props = defineProps<{
   items: undefined
   disabled: false
@@ -197,11 +179,11 @@ const props = defineProps<{
 const formLoading = ref(false) // 表单的加载中
 const formData = ref([])
 const formRules = reactive({
-  warehouseLocationId: [{ required: true, message: '货位不能为空', trigger: 'blur' }],
   warehouseId: [{ required: true, message: '仓库不能为空', trigger: 'blur' }],
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
   count: [{ required: true, message: '产品数量不能为空', trigger: 'blur' }]
 })
+
 const formRef = ref([]) // 表单 Ref
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const defaultWarehouse = ref<WarehouseVO>(undefined) // 默认仓库
@@ -212,17 +194,48 @@ const qrCodes = ref('')
 // 当前点击行
 const currentRow = ref<typeof props.items[0]>(undefined)
 // 当前行号
-const currentRowIndex = ref(-1)
+const currentRowIndex = ref()
 // 一物一码弹窗名
 const productName = ref('')
 // 记录二维码文本域中的有效行数
 const qrCodeLineCount = ref(0);
 const message = useMessage() // 消息弹窗
+
+// 引用二维码表格弹窗组件
+const qrCodeTableDialogRef = ref();
+
+//接收子组件传过来的数据
+const onQrCodeList = (qrCodeList, index) => {
+  //判断qrCodeList是否为空
+  if (qrCodeList.length === 0) {
+    return
+  }
+  //遍历qrCodeList转为qrcodes字符串
+  let qrcodes = ''
+  qrCodeList.forEach((item) => {
+    qrcodes += item.qr + '\n'
+  })
+  //去掉末尾的换行符
+  qrcodes = qrcodes.slice(0, -1)
+  //更新formData中对应行的qrcodes值
+  formData.value[index].qrcodes = qrcodes
+}
+
+// 打开二维码表格弹窗
+const openQrTable = (index:number,row) => {
+  currentRow.value =row;
+  currentRowIndex.value = index;
+  qrCodeTableDialogRef.value.open(row,index);
+};
+
+// 处理二维码表格弹窗关闭事件
+const onQrDialogClose = () => {
+  // 可在这里添加一些关闭弹窗后的逻辑
+};
 // 需要扫描二维码个数
 const qrNeedCount = computed(() => {
   return currentRow.value?.count
 })
-
 // 监听二维码文本域内容的变化
 const onQrCodeChange = () => {
   // 检查 qrCode.value 是否为 undefined 或 null
@@ -345,11 +358,7 @@ const getSummaries = (param: SummaryMethodProps) => {
 
   return sums
 }
-const queryLocationParams = reactive({
-  pageNo: 1,
-  pageSize: 100,
-  warehouseId: undefined as unknown
-})
+
 
 //仓库变更，同步变更货位列表
 const onChangeWarehouse = async (row: typeof props.items[0]) => {
@@ -423,6 +432,5 @@ defineExpose({ validate })
 onMounted(async () => {
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
   defaultWarehouse.value = warehouseList.value.find((item) => item.defaultStatus)
-  locationList.value = onChangeWarehouse({pageNo: 1,pageSize: 100,warehouseId: defaultWarehouse.value?.id})
 })
 </script>

src/views/erp/purchase/return/components/PurchaseReturnItemQrForm.vue

@@ -0,0 +1,147 @@
+<template>
+  <Dialog v-model="dialogVisible" title="二维码列表" width="60%">
+
+    <el-form ref="formRef" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="20">
+          <el-form-item label="二维码" prop="no">
+            <el-input v-model="qr" ref="qrInputRef" placeholder="扫描二维码" @keyup.enter="handleQrEnter" />
+          </el-form-item>
+        </el-col>
+        <el-form-item v-show="false" label="隐藏字段">
+          <el-input v-model="qrHiden" placeholder="隐藏字段" @keyup.enter="handleQrEnter" />
+        </el-form-item>
+      </el-row>
+
+      <ContentWrap>
+        <el-table :data="qrCodeRowList">
+          <!-- 序号 -->
+          <el-table-column label="序号" type="index" align="center" width="60" />
+          <el-table-column prop="qr" label="二维码" />
+          <el-table-column prop="warehouseName" label="仓库" />
+          <el-table-column prop="warehouseLocationName" label="货位" />
+          <el-table-column prop="productName" label="产品名称" />
+          <el-table-column prop="productUnitName" label="产品单位" />
+          <!-- 操作列 -->
+          <el-table-column label="操作">
+            <template #default="scope">
+              <el-button @click="deleteRow(scope.$index)" link>
+                —
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </ContentWrap>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="submitQr">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits } from 'vue';
+import {
+  matchRulesFromDictOptions
+} from '@/utils'
+import { PurchaseReturnItemsQrApi } from '@/api/erp/purchase/return/purchasereturnitemsqr/index';
+
+const props = defineProps({
+  currentRow: {
+    type: Object,
+    required: true
+  },
+  currentRowIndex: {
+    type: Number,
+    required: true
+  }
+});
+// 监听 currentRowIndex 的变化
+watch(() => props.currentRowIndex, (newIndex) => {
+  // 在这里处理 currentRowIndex 变化的逻辑
+  console.log('currentRowIndex 已更新为:', newIndex);
+});
+
+const formRef = ref();
+const qr = ref('');
+const qrHiden = ref('');
+// 新增 ref 用于获取输入框 DOM 元素
+const qrInputRef = ref(null);
+
+const emits = defineEmits(['submit-data', 'close']);
+
+const dialogVisible = ref(false);
+const qrCodeRowList = ref([]);
+const message = useMessage() // 消息弹窗
+
+
+const open =  async (row,index)=>{
+  // 当 currentRow 变化时，更新 qrCodeRowList
+  qrCodeRowList.value = [];
+  if (row.qrcodes) {
+    row.qrcodes.split('\n').forEach((item) => {
+      const newRow = { ...row, qr: item };
+      qrCodeRowList.value.push(newRow);
+    });
+  }
+
+  dialogVisible.value = true;
+};
+
+const close = () => {
+  dialogVisible.value = false;
+  emits('close');
+};
+
+/** 提交扫码 */
+const submitQr = async () => {
+  // 扫码内容不能为空
+  if (qrCodeRowList.value.length === 0) {
+    message.warning('请扫描二维码');
+    return;
+  }
+  //判断二维码数与数量是否一致
+  if (qrCodeRowList.value.length !== props.currentRow.count) {
+    message.warning('扫码数量与数量不一致');
+    return;
+  }
+  // 找到当前行在 formData 中的索引
+  const index = props.currentRowIndex; // 获取当前行的索引
+  // 触发自定义事件 'submit-data' 并传递 qrCodeRowList 数据
+  emits('submit-data', qrCodeRowList.value, index);
+  dialogVisible.value = false;
+
+
+};
+
+// 处理二维码输入
+const handleQrEnter = () => {
+
+  if (!matchRulesFromDictOptions(qr.value)) {
+    // 提示用户输入的二维码格式不正确
+    message.warning('二维码格式不正确');
+
+    return;
+  }
+  //将二维码填充到传入的当行数据中，并作为元素添加到列表中
+  const newRow = { ...props.currentRow, qr: qr.value };
+  qrCodeRowList.value.push(newRow);
+  // 清空输入框
+  qr.value = '';
+  // 让光标聚焦到输入框
+  if (qrInputRef.value) {
+    qrInputRef.value.focus();
+  }
+};
+
+// 删除行的方法
+const deleteRow = (index: number) => {
+  qrCodeRowList.value.splice(index, 1);
+};
+
+defineExpose({
+  open,
+  close
+});
+</script>

src/views/erp/sale/out/SaleOutForm.vue

@@ -303,6 +303,19 @@ const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
   await itemFormRef.value.validate()
+  //校验每行的码的数量和入库数量是否一致
+  const items = formData.value.items
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    //先判断本行是否需要一物一码
+    if (item.ifQr) {
+      continue;
+    }
+    if (item.qrCodeLineCount !== item.count) {
+      message.error(`第 ${i + 1} 行的入库数量和码的数量不同`)
+      return
+    }
+  }
   // 提交请求
   formLoading.value = true
   try {

src/views/erp/sale/out/components/SaleOutItemForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div><div>
   <el-form
     ref="formRef"
     :model="formData"
@@ -10,30 +11,6 @@
   >
     <el-table :data="formData" show-summary :summary-method="getSummaries" class="-mt-10px">
       <el-table-column label="序号" type="index" align="center" width="60" />
-      <el-table-column label="仓库名称" min-width="125">
-        <template #default="{ row, $index }">
-          <el-form-item
-            :prop="`${$index}.warehouseId`"
-            :rules="formRules.warehouseId"
-            class="mb-0px!"
-          >
-            <el-select
-              v-model="row.warehouseId"
-              clearable
-              filterable
-              placeholder="请选择仓库"
-              @change="onChangeWarehouse($event, row)"
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </template>
-      </el-table-column>
    <el-table-column label="产品名称" min-width="180">
         <template #default="{ row }">
           <el-form-item class="mb-0px!">
@@ -62,6 +39,15 @@
           </el-form-item>
         </template>
       </el-table-column>
+      <el-table-column label="码" fixed="right" min-width="40">
+            <template #default="{ row, $index }">
+              <el-form-item class="mb-0px!">
+                <el-button :disabled="row.ifQr" @click="openQrDialog($index)" link>
+                  <Icon icon="fa:qrcode" />
+                </el-button>
+              </el-form-item>
+            </template>
+          </el-table-column>
       <el-table-column
         label="原数量"
         fixed="right"
@@ -168,6 +154,24 @@
       </el-table-column>
     </el-table>
   </el-form>
+</div>
+  <div>
+        <!-- 一物一码扫码弹窗 -->
+        <Dialog :title="productName" v-model="qrDialogVisible" :appendToBody="true">
+          <!-- 显示有效行数 -->
+          <div>输入的有效行数: {{ qrCodeLineCount }}</div>
+          <div>需要扫描数: {{ qrNeedCount }}</div>
+
+          <el-input type="textarea" v-model="qrCodes" :rows="10" @input="onQrCodeChange" />
+          <template #footer>
+            <el-button @click="submitQr" type="primary">
+              确 定
+            </el-button>
+            <el-button @click="qrDialogVisible = false">取 消</el-button>
+          </template>
+        </Dialog>
+      </div>
+    </div>
 </template>
 <script setup lang="ts">
 import { StockApi } from '@/api/erp/stock/stock'
@@ -175,7 +179,9 @@ import {
   erpCountInputFormatter,
   erpPriceInputFormatter,
   erpPriceMultiply,
-  getSumValue
+  getSumValue,
+  matchRulesFromDictOptions
+
 } from '@/utils'
 import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 
@@ -193,6 +199,86 @@ const formRules = reactive({
 const formRef = ref([]) // 表单 Ref
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const defaultWarehouse = ref<WarehouseVO>(undefined) // 默认仓库
+//一物一码弹窗
+const qrDialogVisible = ref(false)
+// 扫码内容
+const qrCodes = ref('')
+// 当前点击行
+const currentRow = ref<typeof props.items[0]>(undefined)
+// 当前行号
+const currentRowIndex = ref(-1)
+// 一物一码弹窗名
+const productName = ref('')
+// 记录二维码文本域中的有效行数
+const qrCodeLineCount = ref(0);
+const message = useMessage() // 消息弹窗
+// 需要扫描二维码个数
+const qrNeedCount = computed(() => {
+  return currentRow.value?.count
+})
+
+// 监听二维码文本域内容的变化
+const onQrCodeChange = () => {
+  // 检查 qrCode.value 是否为 undefined 或 null
+  if (qrCodes.value) {
+    const lines = qrCodes.value.split('\n');
+    // 先将每一行去除首尾空格
+    const trimmedLines = lines.map(line => line.trim());
+    const validLines = trimmedLines.filter(line =>{ 
+       return matchRulesFromDictOptions(line)  
+    });
+    // 去重
+    const uniqueLines = [...new Set(validLines)];
+    qrCodeLineCount.value = uniqueLines.length;
+
+    // 检查有效行数是否超过 row.count
+    if (currentRow.value && qrCodeLineCount.value > currentRow.value.count) {
+      message.warning('输入的有效行数不能超过该产品的数量！');
+      // 截取多余的行数
+      qrCodes.value = validLines.slice(0, currentRow.value.count).join('\n');
+      qrCodeLineCount.value = currentRow.value.count;
+    }
+  } else {
+    qrCodeLineCount.value = 0;
+  }
+};
+
+/** 提交扫码 */
+const submitQr = async () => {
+  // 扫码内容不能为空
+  if (qrCodes.value == null || qrCodes.value == undefined || qrCodes.value === '') {
+    return;
+  }
+  // 找到当前行在 formData 中的索引
+  const index = currentRowIndex.value; // 获取当前行的索引
+  if (index !== -1 && formData.value[index]) { // 确保索引有效且对应行存在
+    // 更新 formData 中对应行的 qrcode 值
+    formData.value[index].qrcodes = qrCodes.value;
+    //更新有效行数
+    formData.value[index].qrCodeLineCount = qrCodeLineCount.value;
+  }
+  // 关闭弹窗
+  qrDialogVisible.value = false;
+};
+
+// 控制一物一码弹窗
+const openQrDialog = (index: number) => {
+  // 确保 currentRow 更新为当前点击的行
+  currentRow.value = formData.value[index]; // 使用解构赋值确保创建一个新对象
+  currentRowIndex.value = index;
+  // 检查当前行是否有二维码数据
+  if (currentRow.value.qrcodes) {
+    qrCodes.value = currentRow.value.qrcodes;
+  } else {
+    qrCodes.value = ''; // 如果没有二维码数据，清空文本域
+  }
+  // 更新弹窗标题
+  productName.value = currentRow.value.productName;
+  // 重新计算有效行数
+  onQrCodeChange();
+  // 显示弹窗
+  qrDialogVisible.value = true;
+};
 
 /** 初始化设置出库项 */
 watch(