From b2efb5460864118d706cdfdaf0b052eb1da4cf15 Mon Sep 17 00:00:00 2001
From: my_ong <429426262@qq.com>
Date: Thu, 5 Dec 2024 21:28:24 +0800
Subject: [PATCH] =?UTF-8?q?bug:=20=E6=8F=90=E4=BA=A4=E7=89=A9=E6=96=99?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/stock/component/applyConfirm.vue | 160 ++++++++------
 src/views/stock/component/applyModal.vue   | 238 ++++++++++-----------
 src/views/stock/component/successResul.vue |  27 ++-
 3 files changed, 234 insertions(+), 191 deletions(-)

diff --git a/src/views/stock/component/applyConfirm.vue b/src/views/stock/component/applyConfirm.vue
index d0d7838..4358e1e 100644
--- a/src/views/stock/component/applyConfirm.vue
+++ b/src/views/stock/component/applyConfirm.vue
@@ -1,79 +1,109 @@
 <template>
-  <div>
-    <vxe-table border show-overflow ref="tableRef" max-height="500" size="medium"
-      :edit-config="{ trigger: 'manual', mode: 'cell' }" v-model:data="tableData">
-      <vxe-column type="seq" width="70" />
-      <vxe-column field="name" title="物料名称" />
-      <vxe-column field="scan" title="是否扫码" />
-      <vxe-column field="applyNum" title="申请数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
-      <vxe-column field="scanNum" title="扫码数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
-      <vxe-column field="remark" title="备注" :edit-render="{ name: 'VxeInput' }" />
+	<div>
+		<vxe-table
+			ref="tableRef"
+			border
+			show-overflow
+			max-height="500"
+			size="medium"
+			:edit-config="{ trigger: 'manual', mode: 'cell' }"
+			:data="tableData"
+		>
+			<vxe-column type="seq" width="70" />
+			<vxe-column field="id" title="物料id" :visible="false" />
+			<vxe-column field="name" title="物料名称" />
+			<vxe-column field="scan" title="是否扫码" />
+			<vxe-column field="applyNum" title="申请数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
+			<vxe-column field="scanNum" title="扫码数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" />
+			<vxe-column field="remark" title="备注" :edit-render="{ name: 'VxeInput' }" />
 
-      <vxe-column title="操作">
-        <template #default="{ row }">
-          <template v-if="hasEditStatus(row)">
-            <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
-            <vxe-button @click="cancelRowEvent()">取消</vxe-button>
-          </template>
-          <template v-else>
-            <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
-          </template>
-        </template>
-      </vxe-column>
-    </vxe-table>
-  </div>
+			<vxe-column title="操作">
+				<template #default="{ row }">
+					<template v-if="hasEditStatus(row)">
+						<vxe-button @click="saveRowEvent(row)">保存</vxe-button>
+						<vxe-button @click="cancelRowEvent()">取消</vxe-button>
+					</template>
+					<template v-else>
+						<vxe-button @click="editRowEvent(row)">编辑</vxe-button>
+					</template>
+				</template>
+			</vxe-column>
+		</vxe-table>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { VxeUI, VxeTableInstance } from 'vxe-table'
+	import { ref } from 'vue'
+	import { VxeUI, VxeTableInstance } from 'vxe-table'
 
+	// 和父组件的数据交互
+	defineProps({
+		tableData: {
+			type: Array as PropType<Array<object>>,
+			default: () => [],
+		},
+	})
+	const getTableData = () => {
+		const $table = tableRef.value
+		if ($table) {
+			return $table.getTableData().fullData.map((row) => {
+				return {
+					materialId: row.id,
+					quantity: row.applyNum,
+					confirmQuantity: row.scanNum,
+					exceptionRemark: row.remark,
+				}
+			})
+		}
+		return []
+	}
 
-interface RowVO {
-  id: number
-  name: string
-  scan: string
-  applyNum: number
-  scanNum: number
-  remark: string
-}
+	defineExpose({ getTableData })
 
-const tableRef = ref<VxeTableInstance<RowVO>>()
+	interface RowVO {
+		id: number
+		name: string
+		scan: string
+		applyNum: number
+		scanNum: number
+		remark: string
+	}
 
-const loading = ref(false)
-const tableData = ref<RowVO[]>()
+	const tableRef = ref<VxeTableInstance<RowVO>>()
 
-const hasEditStatus = (row: RowVO) => {
-  const $table = tableRef.value
-  if ($table) {
-    return $table.isEditByRow(row)
-  }
-}
+	const loading = ref(false)
 
-const editRowEvent = (row: RowVO) => {
-  const $table = tableRef.value
-  if ($table) {
-    $table.setEditRow(row)
-  }
-}
+	const hasEditStatus = (row: RowVO) => {
+		const $table = tableRef.value
+		if ($table) {
+			return $table.isEditByRow(row)
+		}
+	}
 
-const saveRowEvent = (row: RowVO) => {
-  const $table = tableRef.value
-  if ($table) {
-    $table.clearEdit().then(() => {
-      loading.value = true
-      setTimeout(() => {
-        loading.value = false
-        VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
-      }, 300)
-    })
-  }
-}
+	const editRowEvent = (row: RowVO) => {
+		const $table = tableRef.value
+		if ($table) {
+			$table.setEditRow(row)
+		}
+	}
 
-const cancelRowEvent = () => {
-  const $table = tableRef.value
-  if ($table) {
-    $table.clearEdit()
-  }
-}
+	const saveRowEvent = (row: RowVO) => {
+		const $table = tableRef.value
+		if ($table) {
+			$table.clearEdit().then(() => {
+				loading.value = true
+				setTimeout(() => {
+					loading.value = false
+					VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
+				}, 300)
+			})
+		}
+	}
+
+	const cancelRowEvent = () => {
+		const $table = tableRef.value
+		if ($table) {
+			$table.clearEdit()
+		}
+	}
 </script>
diff --git a/src/views/stock/component/applyModal.vue b/src/views/stock/component/applyModal.vue
index bd04ea9..4f798ec 100644
--- a/src/views/stock/component/applyModal.vue
+++ b/src/views/stock/component/applyModal.vue
@@ -1,136 +1,136 @@
 <template>
-  <!-- steps -->
-  <div v-show="current != 3">
-    <a-steps v-model:current="current" :items="items"></a-steps>
-    <a-divider style="height: 2px; background-color: #7cb305" />
-  </div>
+	<!-- steps -->
+	<div v-show="current != 3">
+		<a-steps v-model:current="current" :items="items"></a-steps>
+		<a-divider style="height: 2px; background-color: #7cb305" />
+	</div>
 
-  <!-- step1 -->
+	<!-- step1 -->
 
-  <div class="step-1" v-show="current === 0">
-    <apply-form :apply-type="applyType" ref="applyFormRef"></apply-form>
-  </div>
+	<div v-show="current === 0" class="step-1">
+		<apply-form ref="applyFormRef" :apply-type="applyType"></apply-form>
+	</div>
 
-  <div class="step-2" v-show="current === 1">
-    <scan-form :total-value="totalValue" ref="scanFormRef"></scan-form>
-  </div>
-  <div class="step-3" v-show="current === 2">
-    <apply-confirm :table-data="conformData" ref="applyConfirmRef"></apply-confirm>
-  </div>
-  <div class="step-4" v-show="current === 3">
-    <successResul></successResul>
-  </div>
+	<div v-show="current === 1" class="step-2">
+		<scan-form ref="scanFormRef" :total-value="totalValue"></scan-form>
+	</div>
+	<div v-show="current === 2" class="step-3">
+		<apply-confirm ref="applyConfirmRef" :table-data="conformData"></apply-confirm>
+	</div>
+	<div v-show="current === 3" class="step-4">
+		<successResul></successResul>
+	</div>
 
-
-  <!-- 按钮 -->
-  <a-space wrap class="fixed-button-container">
-    <a-button type="dashed" v-if="current != 0" @click="current--">上一步</a-button>
-    <a-button type="primary" v-if="current != 2" @click="nextStep">下一步</a-button>
-    <a-button type="primary" :loading="loading" v-if="current === 2" @click="submit">提交申请</a-button>
-  </a-space>
+	<!-- 按钮 -->
+	<a-space v-show="current != 3" wrap class="fixed-button-container">
+		<a-button v-if="current != 0" type="dashed" @click="current--">上一步</a-button>
+		<a-button v-if="current != 2" type="primary" @click="nextStep">下一步</a-button>
+		<a-button v-if="current === 2" type="primary" :loading="loading" @click="submit">提交申请</a-button>
+	</a-space>
 </template>
 
 <script setup lang="ts">
-import applyForm from '../component/applyForm.vue'
-import scanForm from '../component/scanForm.vue';
-import applyConfirm from '../component/applyConfirm.vue';
-import successResul from '../component/successResul.vue';
-import api from '@/api'
+	import applyForm from '../component/applyForm.vue'
+	import scanForm from '../component/scanForm.vue'
+	import applyConfirm from '../component/applyConfirm.vue'
+	import successResul from '../component/successResul.vue'
+	import api from '@/api'
 
-// 和外层界面的数据交互
-defineProps(
-  {
-    applyType: {
-      type: String,
-      default: '',
-    }
-  } // 申请类型 applyType页面传值的使用1和2，1: 采购入库 和 归还入库 2: 出库外借
-)
-// steps
-const current = ref<number>(0) // 翻页的引用
-const applyFormRef = ref(); // step1表单引用
-const scanFormRef = ref(); // step2表单引用
-const applyConfirmRef = ref(); // step3表单引用
+	// 和外层界面的数据交互
+	defineProps(
+		{
+			applyType: {
+				type: String,
+				default: '',
+			},
+		}, // 申请类型 applyType页面传值的使用1和2，1: 采购入库 和 归还入库 2: 出库外借
+	)
+	// steps
+	const current = ref<number>(0) // 翻页的引用
+	const applyFormRef = ref() // step1表单引用
+	const scanFormRef = ref() // step2表单引用
+	const applyConfirmRef = ref() // step3表单引用
 
-const selectData = ref(); // step1中用户申请选择的物料数据,存的原始数据
-const scanData = ref(); // step2中用户扫码的物料数据
-const totalValue = ref(0); // 传给扫码页面的合计数值
-const conformData = ref<Array<object>>([]); // step3中的待确认数据
-const loading = ref(false); // 提交按钮的loading状态
+	const selectData = ref() // step1中用户申请选择的物料数据,存的原始数据
+	const scanData = ref() // step2中用户扫码的物料数据
+	const totalValue = ref(0) // 传给扫码页面的合计数值
+	const conformData = ref<Array<object>>([]) // step3中的待确认数据
+	const loading = ref(false) // 提交按钮的loading状态
 
-const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
-
-/**
- * 点击下一步
- */
-const nextStep = () => {
-
-  if (applyFormRef.value && current.value === 0) {  // 再step1中点击下一步的时候，就去获取step1中的表单数据
-    selectData.value = applyFormRef.value.getTableData();
-    selectData.value.forEach((item) => {
-      if (item.assignRule === 1) {
-        totalValue.value += item.quantity
-      }
-    })
-  }
-  if (scanFormRef.value && current.value === 1) { // 再step2中点击下一步的时候，就去获取step2中的表单数据
-    const items = scanFormRef.value.getTableData();
-    const groupedSums = items.reduce((acc, item) => {
-      if (!acc[item.code]) {
-        acc[item.code] = 0;
-      }
-      acc[item.code]++;
-      return acc;
-    }, {});
-    scanData.value = items
-    // 组装步骤三的原始数据
-    conformData.value = selectData.value.map(item => {
-      return {
-        id: item.id,
-        name: item.name,
-        code: item.code,
-        applyNum: item.quantity,
-        scan: item.assignRule,
-        scanNum: groupedSums[item.code] || 0,
-        remark: item.quantity != groupedSums[item.code] ? `实际扫码数量与申请数量不一致` : '',
-      }
-    });
-  }
-  // 切换到下一步
-  current.value++
-}
-
-/**
- * 提交申请
- */
-const submit = () => {
-  loading.value = true;
-  // 提交申请
-  console.log('提交申请')
-  // 获取用户最终确认的数据
-  const applyDetails = applyConfirmRef.value.getTableData(); // 申请明细数据
-  const applyForm = applyFormRef.value.getApplyForm(); // 申请表单数据
-
-  api.materialApi.apply.saveOrUpdateApply({ applyForm: applyForm, applyDetails: applyDetails }, () => {
-    console.log('申请成功')
-    // 清理缓存数据
-    loading.value = false;
-    current.value = 3;
-  });
-}
+	const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
 
+	/**
+	 * 点击下一步
+	 */
+	const nextStep = () => {
+		if (applyFormRef.value && current.value === 0) {
+			// 再step1中点击下一步的时候，就去获取step1中的表单数据
+			selectData.value = applyFormRef.value.getTableData()
+			selectData.value.forEach((item) => {
+				if (item.assignRule === 1) {
+					totalValue.value += item.quantity
+				}
+			})
+		}
+		if (scanFormRef.value && current.value === 1) {
+			// 再step2中点击下一步的时候，就去获取step2中的表单数据
+			const items = scanFormRef.value.getTableData()
+			const groupedSums = items.reduce((acc, item) => {
+				if (!acc[item.code]) {
+					acc[item.code] = 0
+				}
+				acc[item.code]++
+				return acc
+			}, {})
+			scanData.value = items
+			// 组装步骤三的原始数据
+			conformData.value = selectData.value.map((item) => {
+				return {
+					id: item.id,
+					name: item.name,
+					code: item.code,
+					applyNum: item.quantity,
+					scan: item.assignRule,
+					scanNum: groupedSums[item.code] || 0,
+					remark: item.quantity != groupedSums[item.code] ? `实际扫码数量与申请数量不一致` : '',
+				}
+			})
+		}
+		// 切换到下一步
+		current.value++
+	}
 
+	/**
+	 * 提交申请
+	 */
+	const submit = () => {
+		loading.value = true
+		// 提交申请
+		console.log('提交申请')
+		// 获取用户最终确认的数据
+		const applyDetails = applyConfirmRef.value.getTableData() // 申请明细数据
+		const applyForm = applyFormRef.value.getApplyForm() // 申请表单数据
+		api.materialApi.apply.saveOrUpdateApply({ applyForm: applyForm, applyDetails: applyDetails }, () => {
+			console.log('申请成功')
+			// 清理缓存数据
+			loading.value = false
+			current.value = 3
+		})
+	}
 </script>
 
 <style scoped>
-/* 固定按钮容器样式 */
-.fixed-button-container {
-  position: fixed;
-  bottom: 80px;
-  /* 距离底部的距离 */
-  right: 30px;
-  /* 距离右侧的距离 */
-  z-index: 1000;
-  /* 确保按钮在其他内容之上 */
-}
+	/* 固定按钮容器样式 */
+	.fixed-button-container {
+		position: fixed;
+
+		/* 距离底部的距离 */
+		right: 30px;
+		bottom: 80px;
+
+		/* 距离右侧的距离 */
+		z-index: 1000;
+
+		/* 确保按钮在其他内容之上 */
+	}
 </style>
diff --git a/src/views/stock/component/successResul.vue b/src/views/stock/component/successResul.vue
index 288c2e9..c7addaf 100644
--- a/src/views/stock/component/successResul.vue
+++ b/src/views/stock/component/successResul.vue
@@ -1,11 +1,24 @@
 <template>
-  <a-result status="success" title="Successfully Purchased Cloud Server ECS!"
-    sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.">
-    <template #extra>
-      <a-button key="console" type="primary">查询申请</a-button>
-      <a-button key="buy">继续提交申请</a-button>
-    </template>
-  </a-result>
+	<a-result
+		status="success"
+		title="Successfully Purchased Cloud Server ECS!"
+		sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+	>
+		<template #extra>
+			<a-button type="primary" @click="select">查询申请</a-button>
+			<a-button @click="again">继续提交申请</a-button>
+		</template>
+	</a-result>
 </template>
 
+<script lang="ts" setup>
+	import router from '@/router'
 
+	const select = () => {
+		router.push({ path: '/statistic/inbound' }) // 未生效
+	}
+
+	const again = () => {
+		router.push({ path: '/stock/inbound' })
+	}
+</script>