修改页面逻辑

src/components.d.ts

@@ -9,21 +9,14 @@ declare module 'vue' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
-    ABadge: typeof import('ant-design-vue/es')['Badge']
-    ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
-    ACardGrid: typeof import('ant-design-vue/es')['CardGrid']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
-    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
-    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    AFlex: typeof import('ant-design-vue/es')['Flex']
     AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -48,9 +41,7 @@ declare module 'vue' {
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
-    ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpace: typeof import('ant-design-vue/es')['Space']
-    ASpin: typeof import('ant-design-vue/es')['Spin']
     AStatistic: typeof import('ant-design-vue/es')['Statistic']
     ASteps: typeof import('ant-design-vue/es')['Steps']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
@@ -61,7 +52,6 @@ declare module 'vue' {
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATransfer: typeof import('ant-design-vue/es')['Transfer']
-    ATree: typeof import('ant-design-vue/es')['Tree']
     ATypographyLink: typeof import('ant-design-vue/es')['TypographyLink']
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
@@ -91,8 +81,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RowComponentItem: typeof import('./components/form-designer/component-container/row-component-item.vue')['default']
-    SearchTree: typeof import('./components/search-tree.vue')['default']
-    SelectedTree: typeof import('./components/search-tree.vue')['default']
     TreeDataTable: typeof import('./components/form-designer/config-panel/tree-data-table.vue')['default']
     ValidateRuleConfig: typeof import('./components/form-designer/config-panel/validate-rule-config.vue')['default']
   }

src/views/stock/component/apply-page.vue

@@ -1,36 +1,36 @@
 <template>
-	<page-container>
-		<!-- 页面操作栏 -->
-		<template #ops>
-			<a-row>
-				<a-col :span="18">
-					<a-input-search v-model:value="searchKey" :placeholder="`请输入`" allow-clear enter-button
-						@search="loadData()"></a-input-search>
-				</a-col>
-				<a-col :span="6">
-					<a-button type="primary" style="margin-left: 10px" @click="showModal">
-						<template #icon>
-							<icon-font type="icon-plus" />
-						</template>
-						{{ pageType === '1'? '申请入库' : '申请出库' }}
-					</a-button>
-				</a-col>
-			</a-row>
-		</template>
-		<!-- 页面表格内容 -->
-		<div style="min-height: calc(100vh - 305px)">
-			<!-- 表格行 -->
-			<a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination"
-				:loading="loading" row-key="key">
+  <page-container>
+    <!-- 页面操作栏 -->
+    <template #ops>
+      <a-row>
+        <a-col :span="18">
+          <a-input-search v-model:value="searchKey" :placeholder="`请输入`" allow-clear enter-button
+            @search="loadData()"></a-input-search>
+        </a-col>
+        <a-col :span="6">
+          <a-button type="primary" style="margin-left: 10px" @click="showModal">
+            <template #icon>
+              <icon-font type="icon-plus" />
+            </template>
+            {{ pageType === '1' ? '申请入库' : '申请出库' }}
+          </a-button>
+        </a-col>
+      </a-row>
+    </template>
+    <!-- 页面表格内容 -->
+    <div style="min-height: calc(100vh - 305px)">
+      <!-- 表格行 -->
+      <a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination" :loading="loading"
+        row-key="key">
 
-			</a-table>
-		</div>
-	</page-container>
+      </a-table>
+    </div>
+  </page-container>
 
-	<!-- 弹窗 -->
-	<a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
-		<apply></apply>
-	</a-modal>
+  <!-- 弹窗 -->
+  <a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
+    <apply></apply>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
@@ -41,14 +41,14 @@ import apply from './applyModal.vue';
 
 
 const props = defineProps({
-	pageType: {
-		type: String as PropType<'1' | '2' >, // 1 入库 2 出库 
-		required: false,
-		default: '1'
-	}
+  pageType: {
+    type: String as PropType<'1' | '2'>, // 1 入库 2 出库
+    required: false,
+    default: '1'
+  }
 })
 
-const { pageType} = toRefs(props)
+const { pageType } = toRefs(props)
 
 const searchKey = ref('')
 const pagedata = ref<IPage<material.ApplyForm>>()
@@ -58,89 +58,89 @@ const loading = ref(false)
 
 // 加载数据的方法
 const loadData = async (page = 1, size = 10) => {
-	loading.value = true
-	api.materialApi.apply.applies(
-		//1: 采购入库 2: 归还入库 3: 出库外借
-		{ type: 1, page: page || pagedata.value?.current, size: size || pagedata.value?.size, key: searchKey.value },
-		(data) => {
-			loading.value = false
-			pagedata.value = data
-		},
-	)
+  loading.value = true
+  api.materialApi.apply.applies(
+    //1: 采购入库 2: 归还入库 3: 出库外借
+    { type: 1, page: page || pagedata.value?.current, size: size || pagedata.value?.size, key: searchKey.value },
+    (data) => {
+      loading.value = false
+      pagedata.value = data
+    },
+  )
 }
 //初始加载
 loadData()
 
 //表格列
 const columns = [
-	{
-		title: '类型',
-		dataIndex: 'type',
-	},
-	{
-		title: '申请人',
-		dataIndex: 'applicant',
-	},
-	{
-		title: '申请日期',
-		dataIndex: 'applyDate',
-	},
-	{
-		title: '是否确认',
-		dataIndex: 'isConfirm',
-	},
-	{
-		title: '创建人',
-		dataIndex: 'createdBy',
-	},
-	{
-		title: '创建时间',
-		dataIndex: 'createdTime',
-	}
+  {
+    title: '类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '申请人',
+    dataIndex: 'applicant',
+  },
+  {
+    title: '申请日期',
+    dataIndex: 'applyDate',
+  },
+  {
+    title: '是否确认',
+    dataIndex: 'isConfirm',
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createdBy',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdTime',
+  }
 ]
 
 //分页信息
 const pagination = computed(() => {
-	return {
-		current: pagedata.value?.current,
-		pageSize: pagedata.value?.size,
-		total: pagedata.value?.total,
-		onChange: (page: number, pageSize: number) => {
-			loadData(page, pageSize)
-		},
-	}
+  return {
+    current: pagedata.value?.current,
+    pageSize: pagedata.value?.size,
+    total: pagedata.value?.total,
+    onChange: (page: number, pageSize: number) => {
+      loadData(page, pageSize)
+    },
+  }
 })
 
 const open = ref<boolean>(false);
 
 const showModal = () => {
-	open.value = true;
+  open.value = true;
 };
 
 const handleOk = (e: MouseEvent) => {
-	console.log(e);
-	open.value = false;
+  console.log(e);
+  open.value = false;
 };
 
 </script>
 
 <style lang="less">
 .full-modal {
-	.ant-modal {
-		max-width: 100%;
-		top: 0;
-		padding-bottom: 0;
-		margin: 0;
-	}
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
 
-	.ant-modal-content {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh);
-	}
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
 
-	.ant-modal-body {
-		flex: 1;
-	}
+  .ant-modal-body {
+    flex: 1;
+  }
 }
 </style>

src/views/stock/component/applyConfirm.vue

@@ -0,0 +1,79 @@
+<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' }" />
+
+      <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'
+
+
+interface RowVO {
+  id: number
+  name: string
+  scan: string
+  applyNum: number
+  scanNum: number
+  remark: string
+}
+
+const tableRef = ref<VxeTableInstance<RowVO>>()
+
+const loading = ref(false)
+const tableData = ref<RowVO[]>()
+
+const hasEditStatus = (row: RowVO) => {
+  const $table = tableRef.value
+  if ($table) {
+    return $table.isEditByRow(row)
+  }
+}
+
+const editRowEvent = (row: RowVO) => {
+  const $table = tableRef.value
+  if ($table) {
+    $table.setEditRow(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 cancelRowEvent = () => {
+  const $table = tableRef.value
+  if ($table) {
+    $table.clearEdit()
+  }
+}
+</script>

src/views/stock/component/applyForm.vue

@@ -1,92 +1,98 @@
 <template>
-	<!-- 基本信息的表单 -->
-	<div>
-		<a-form :model="formData" name="basic" layout="horizontal" labelWrap>
-			<a-form-item label="申请人" name="applicant">
-				<a-input :value="formData.applicant" style="width: 40%;" />
-			</a-form-item>
+  <!-- 基本信息的表单 -->
+  <div>
+    <a-form :model="formData" name="basic" layout="horizontal" labelWrap>
+      <a-form-item label="申请人" name="applicant">
+        <a-input :value="formData.applicant" style="width: 40%;" />
+      </a-form-item>
 
-			<a-form-item label="申请类型" name="applyType">
-				<a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%;">
-					<a-radio-button value='1'>采购入库</a-radio-button>
-					<a-radio-button value='2'>归还入库</a-radio-button>
-				</a-radio-group>
-			</a-form-item>
-			<a-form-item label="申请日期" name="applyDate" style="width: 40%;" >
-				<a-date-picker v-model:value="formData.applyDate"  />
-			</a-form-item>
-			<a-form-item label="入库物料" name="selected">
-				<a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料"
-					style="width: 40%;" showArrow :options="options" @deselect="removeEvent" 
-					@select="insertEvent"></a-select>
-			</a-form-item>
-		</a-form>
-	</div>
+      <a-form-item label="申请类型" name="applyType">
+        <a-radio-group v-model:value="formData.applyType" button-style="solid" style="width: 40%;">
+          <a-radio-button value='1'>采购入库</a-radio-button>
+          <a-radio-button value='2'>归还入库</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="申请日期" name="applyDate" style="width: 40%;">
+        <a-date-picker v-model:value="formData.applyDate" />
+      </a-form-item>
+      <a-form-item label="入库物料" name="selected">
+        <a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料" style="width: 40%;"
+          showArrow :options="options" @deselect="removeEvent" @select="insertEvent"></a-select>
+      </a-form-item>
+    </a-form>
+  </div>
 
-	<!-- vxe-table -->
-	<div>
-		<vxe-table border show-overflow ref="tableRef" max-height="500" size="medium" v-model:data="tableData"
-			empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true }">
+  <!-- vxe-table -->
+  <div>
+    <vxe-table border show-overflow ref="tableRef" max-height="500" size="medium" v-model:data="tableData"
+      empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true }">
 
-			<vxe-column type="seq" title="序号" width="60" />
-			<vxe-column field="id" title="物料id" :visible="false" />
-			<vxe-column field="name" title="物料名称" />
-			<vxe-column field="code" title="编码" />
-			<vxe-column field="spec" title="规格" />
-			<vxe-column field="type" title="类型" />
-			<vxe-column field="assignRule" title="赋码规则" />
-			<vxe-column field="quantity" title="申请数量(点击修改)" :edit-render="{ name: 'input', autoSelect: true }"
-				keyboard-config="{edit: true, del: true}" cell-type="number">
-				<template #edit="{ row }">
-					<vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input>
-				</template>
-			</vxe-column>
+      <vxe-column type="seq" title="序号" width="60" />
+      <vxe-column field="id" title="物料id" :visible="false" />
+      <vxe-column field="name" title="物料名称" />
+      <vxe-column field="code" title="编码" />
+      <vxe-column field="spec" title="规格" />
+      <vxe-column field="type" title="类型" />
+      <vxe-column field="assignRule" title="赋码规则" />
+      <vxe-column field="quantity" title="申请数量(点击修改)" :edit-render="{ name: 'input', autoSelect: true }"
+        keyboard-config="{edit: true, del: true}" cell-type="number">
+        <template #edit="{ row }">
+          <vxe-number-input v-model="row.quantity" type="integer"></vxe-number-input>
+        </template>
+      </vxe-column>
 
-			<vxe-column field="oprator" title="操作">
-				<template #default="{ row }">
-					<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
-				</template>
-			</vxe-column>
+      <vxe-column field="oprator" title="操作">
+        <template #default="{ row }">
+          <vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
+        </template>
+      </vxe-column>
 
-		</vxe-table>
-	</div>
+    </vxe-table>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { VxeTableInstance } from 'vxe-table'
 import api from '@/api'
 import { useUserStore } from '@/stores/user'
-import  dayjs,{Dayjs}  from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 
+// 和外层界面的数据交互 
+const getTableData = () => {
+  const $table = tableRef.value
+  return $table?.getTableData().fullData;
+}
+
+defineExpose({ getTableData})
 
 interface FormData {
-	applicant: string; // 申请人
-	applyDate: Dayjs; // 申请日期
-	applyType: string; // 申请类型
-	slectedList: number[]; // 入库物料
+  applicant: string; // 申请人
+  applyDate: Dayjs; // 申请日期
+  applyType: string; // 申请类型
+  slectedList: number[]; // 入库物料
 }
 
 const userStore = useUserStore()
 const formData = ref<FormData>({
-	applicant: userStore.userName,
-	applyDate:  dayjs(),
-	applyType: '1', // 1: 采购入库 2: 归还入库 3: 出库外借
-	slectedList: []
+  applicant: userStore.userName,
+  applyDate: dayjs(),
+  applyType: '1', // 1: 采购入库 2: 归还入库 3: 出库外借
+  slectedList: []
 
 });
 
 
 // vxe-table相关的设置
 interface RowVO {
-	id: number
-	name: string
-	code: string
-	spec: string
-	type: string
-	quantity: number
-	disabled: boolean
-	checked: boolean
-	assignRule: number
+  id: number
+  name: string
+  code: string
+  spec: string
+  type: string
+  quantity: number
+  disabled: boolean
+  checked: boolean
+  assignRule: number
 }
 const tableRef = ref<VxeTableInstance<RowVO>>()
 // vxe-table 数据结果
@@ -95,12 +101,12 @@ const tableData = ref<Array<RowVO>>([])
 const options = ref<{ label: string, value: number }[]>([])
 const materialList = ref<material.Material[]>([])
 const getMaterialList = async () => {
-	await api.materialApi.material.all((data) => {
-		materialList.value = data
-	})
-	options.value = materialList.value.map((item) => {
-		return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 }
-	})
+  await api.materialApi.material.all((data) => {
+    materialList.value = data
+  })
+  options.value = materialList.value.map((item) => {
+    return { label: item.name ? item.name : '未知', value: item.id ? item.id : -1 }
+  })
 }
 getMaterialList()
 
@@ -108,59 +114,56 @@ getMaterialList()
 
 // 选中时在末尾新增一行
 // value: number, option: { label: string, value: number }
-const insertEvent = (value: string) => {
-	// 根据value找到对应的物料信息
-	const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
-	if (m) {
-		const row: RowVO = {
-			id: m.id ? m.id : -1,
-			name: m.name ? m.name : '未知',
-			code: m.code ? m.code : '未知',
-			spec: m.spec ? m.spec : '未知',
-			type: m.type ? m.type : '未知',
-			quantity: 1,
-			assignRule: m.assignRule ? m.assignRule : 1,
-			disabled: false,
-			checked: false
-		}
-		const $table = tableRef.value
-		if ($table) {
-			$table.insertAt(row, -1)
-			window.console.log('表数据1：', tableData.value)
-			window.console.log('表数据2：', $table.getTableData().fullData)
+const insertEvent = (value: any) => {
+  // 根据value找到对应的物料信息
+  const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
+  if (m) {
+    const row: RowVO = {
+      id: m.id ? m.id : -1,
+      name: m.name ? m.name : '未知',
+      code: m.code ? m.code : '未知',
+      spec: m.spec ? m.spec : '未知',
+      type: m.type ? m.type : '未知',
+      quantity: 1,
+      assignRule: m.assignRule ? m.assignRule : 1,
+      disabled: false,
+      checked: false
+    }
+    const $table = tableRef.value
+    if ($table) {
+      $table.insertAt(row, -1)
+    }
+  }
 
-		}
-	}
-	
 }
 
 // 取消选中时，删除table中的行
-const removeEvent = (value: string) => {
-	const $table = tableRef.value
-	// 根据value找到对应的行
-	if ($table) {
-		$table.getTableData().fullData.forEach((item) => {
-			if (item.id === (value ? parseInt(value) : -1)) {
-				$table.remove(item)
-			}
-		})
-	}
+const removeEvent = (value: any) => {
+  const $table = tableRef.value
+  // 根据value找到对应的行
+  if ($table) {
+    $table.getTableData().fullData.forEach((item) => {
+      if (item.id === (value ? parseInt(value) : -1)) {
+        $table.remove(item)
+      }
+    })
+  }
 }
 
 // 手动删除table中的行
 const removeRow = async (row: RowVO) => {
-	//打印tableData数组
-	const $table = tableRef.value
-	if ($table) {
-		// 根据row.id找到对应选中列表中的数据
-		formData.value.slectedList.forEach((item, index) => {
-			if (item.toString() === row.id.toString()) {
-				formData.value.slectedList.splice(index, 1)
-			}
-		})
+  //打印tableData数组
+  const $table = tableRef.value
+  if ($table) {
+    // 根据row.id找到对应选中列表中的数据
+    formData.value.slectedList.forEach((item, index) => {
+      if (item.toString() === row.id.toString()) {
+        formData.value.slectedList.splice(index, 1)
+      }
+    })
 
-		$table.remove(row)
-	}
+    $table.remove(row)
+  }
 }
 
 </script>

src/views/stock/component/applyModal.vue

@@ -1,42 +1,66 @@
 <template>
-	<!-- steps -->
-	<div>
-		<a-steps v-model:current="current" :items="items"></a-steps>
-	</div>
-	<a-divider style="height: 2px; background-color: #7cb305" />
-	<!-- step1 -->
-	<div class="step-1" v-if="current === 0">
-		<!--第一步 -->
-		<apply-form></apply-form>
-	</div>
-	<!-- step2 -->
-	<div class="step-2" v-if="current === 1">
-		<scan-form></scan-form>
-	</div>
-	<!-- 按钮 -->
+  <!-- steps -->
+  <div>
+    <a-steps v-model:current="current" :items="items"></a-steps>
+  </div>
+  <a-divider style="height: 2px; background-color: #7cb305" />
+  <!-- step1 -->
+
+  <div class="step-1" v-show="current === 0">
+    <apply-form ref="applyFormRef"></apply-form>
+  </div>
+
+  <div class="step-2" v-show="current === 1">
+    <scan-form :total-value="totalValue"></scan-form>
+  </div>
+  <div class="step-3" v-show="current === 2">
+    <apply-confirm></apply-confirm>
+  </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" v-if="current === 2">提交申请</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';
 
 
 // steps
-const current = ref<number>(0)
+const current = ref<number>(0) // 翻页的引用
+const applyFormRef = ref(); // step1表单引用
+const selectData = ref();
+
+const totalValue = ref(199);
+
+
 const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
 
+
+const nextStep = () => {
+  if (applyFormRef.value) {
+    selectData.value = applyFormRef.value.getTableData();
+  }
+  current.value++
+}
+
 </script>
 
 <style scoped>
 /* 固定按钮容器样式 */
 .fixed-button-container {
-	position: fixed;
-	bottom: 80px;
-	/* 距离底部的距离 */
-	right: 30px;
-	/* 距离右侧的距离 */
-	z-index: 1000;
-	/* 确保按钮在其他内容之上 */
+  position: fixed;
+  bottom: 80px;
+  /* 距离底部的距离 */
+  right: 30px;
+  /* 距离右侧的距离 */
+  z-index: 1000;
+  /* 确保按钮在其他内容之上 */
 }
-</style>
+</style>

src/views/stock/component/scanForm.vue

@@ -1,83 +1,134 @@
 <template>
-	<a-button type="primary" @click="beiginScan">开始扫码</a-button>
-	<a-button type="primary" danger style="left: 20px;">重新扫码</a-button>
-	<a-input bordered size="large" 
-	ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow" style="margin-top: 20px; margin-bottom: 20px;"/>
-	<!-- Esc键退出编辑功能 -->
-	<vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500"
-		:column-config="{ resizable: true }" :keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码"
-		:edit-config="{ trigger: 'click', mode: 'cell' }">
+  <a-button type="primary" @click="beiginScan">开始扫码</a-button>
+  <a-button type="primary" danger style="left: 20px;">重新扫码</a-button>
+  <a-input bordered size="large" ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow"
+    style="margin-top: 20px; margin-bottom: 20px;" />
+  <a-row style="margin-bottom: 20px;">
+    <a-col :span="12">
+      <a-statistic title="总共扫码数量" :value="totalValue" style="margin-right: 50px" />
+    </a-col>
+    <a-col :span="12">
+      <a-statistic title="待扫码数量" :value="remainderValue" />
+    </a-col>
+  </a-row>
+  <!-- Esc键退出编辑功能 -->
+  <vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500" :column-config="{ resizable: true }"
+    :keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码"
+    :edit-config="{ trigger: 'click', mode: 'cell' }">
 
-		<vxe-column type="seq" title="序号" width="60"></vxe-column>
-		<vxe-column field="id" title="物料id" :visible="false"></vxe-column>
-		<vxe-column field="barcode" title="物料条码"  :edit-render="{ name: 'input', autoFocus: true, immediate: true }" />
-		<vxe-column field="role" title="物料名称" />
-		<vxe-column field="code" title="编码" />
-		<vxe-column field="spec" title="规格" />
-		<vxe-column field="type" title="类型" />
-		<vxe-column field="oprator" title="操作">
-			<template #default="{ row }">
-				<vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button>
-			</template>
-		</vxe-column>
+    <vxe-column type="seq" title="序号" width="60"></vxe-column>
+    <vxe-column field="id" title="物料id" :visible="false"></vxe-column>
+    <vxe-column field="barcode" title="物料条码" :edit-render="{ name: 'input', autoFocus: true, immediate: true }" />
+    <vxe-column field="role" title="物料名称" />
+    <vxe-column field="code" title="编码" />
+    <vxe-column field="spec" title="规格" />
+    <vxe-column field="type" title="类型" />
+    <vxe-column field="times" title="扫码时间" />
+    <vxe-column field="oprator" title="操作">
+      <template #default="{ row }">
+        <vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button>
+      </template>
+    </vxe-column>
 
-	</vxe-table>
+  </vxe-table>
 </template>
 
 <script lang="ts" setup>
 import { VxeTableInstance } from 'vxe-table'
 import { useTemplateRef } from 'vue'
+import api from '@/api/index';
+import { message } from 'ant-design-vue';
+
+// 父组件数据交互
+defineProps(
+  { totalValue: Number }
+)
+
+const remainderValue = ref(100) // 上一步传递过来
+
 //扫码的条形码字符串
 const value = ref('')
 const input = useTemplateRef('snInput');
 
-interface Step2RowVO {
-	barcode: string
-	name: string
-	code: string
-	spec: string
-	type: string
-	times: Date
+const snListCache = ref<string[]>([]) // 缓存扫码的条形码列表
+// 定义一个map缓存物料信息
+const materialMapCache = ref<Map<string, material.Material>>(new Map<string, material.Material>()) // 缓存物料信息,key是code
+
+// 请求接口获取缓存数据
+const getCache = () => {
+
+  api.materialApi.material.all((data) => {
+    data.forEach(item => {
+      if (item.code) {
+        materialMapCache.value.set(item.code, item)
+      }
+    })
+  })
 }
+getCache();
+
+interface TableRowVO {
+  barcode: string
+  name: string
+  code: string
+  spec: string
+  type: string
+  times: string
+}
+
 // 扫码点货的table对象
-const applyDetailTableRef = ref<VxeTableInstance<Step2RowVO>>()
+const applyDetailTableRef = ref<VxeTableInstance<TableRowVO>>()
 
 // 移除table中的行
-const removeStep2Row = async (row: Step2RowVO) => {
-	const $table = applyDetailTableRef.value
-	if ($table) {
-		$table.remove(row)
-	}
+const removeStep2Row = async (row: TableRowVO) => {
+  const $table = applyDetailTableRef.value
+  if ($table) {
+    $table.remove(row)
+  }
 }
 
 function beiginScan() {
-	input.value?.focus()
+  input.value?.focus()
 }
 
 // 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行
 const autoInsertOneRow = async () => {
-	const $table = applyDetailTableRef.value
-	const sn = value.value.trim();
-	/**
-	 * 1. 判断sn是否合法
-	 * 2. 判断sn是否已经存在于表格中，需要缓存sn列表
-	 * 3. 根据sn获取物料信息，并新增一行到表格中,需要缓存物料信息
-	 */
+  const $table = applyDetailTableRef.value
+  const sn = value.value.trim();
 
 
-	// // 获取表格的最后一行，判断是否有数据
-	if ($table) {
-		const row: Step2RowVO = {
-			barcode: sn,
-			name: '',
-			code: '',
-			spec: '',
-			type: '',
-			times: new Date()
-		}
-		$table.insert(row)
-		// 添加后就清空输入框
-		value.value = ''
-	}
+  /**
+   * 1. 判断sn是否合法
+   * 2. 判断sn是否已经存在于表格中，需要缓存sn列表
+   * 3. 根据sn获取物料信息，并新增一行到表格中,需要缓存物料信息
+   * 4. 插入成功后缓存sn
+   */
+  if (sn.length === 0 || snListCache.value.includes(sn)) {
+    value.value = ''
+    message.warning('【' + sn + '】条形码重复或为空，请重新扫码', 5)
+    return;
+  }
+
+  if ($table) {
+    const row: TableRowVO = {
+      barcode: sn,
+      name: '',
+      code: '',
+      spec: '',
+      type: '',
+      times: new Date().toLocaleString()
+    }
+
+
+    $table.insertAt(row, null)
+    // 缓存sn
+    snListCache.value.push(sn)
+    //待扫码数量减一
+
+    remainderValue.value = remainderValue.value - 1
+    // 添加后就清空输入框
+    value.value = ''
+  }
 }
+
 </script>

src/views/stock/component/successResul.vue

@@ -0,0 +1,11 @@
+<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>
+</template>
+
+

src/views/stock/inboud/inboud-page.vue

@@ -1,8 +1,8 @@
 <template>
-	<apply-page pageType='1'></apply-page>
+  <apply-modal></apply-modal>
 </template>
 
 <script setup lang="ts">
-	import applyPage from '../component/apply-page.vue';
+import applyModal from "@/views/stock/component/applyModal.vue";
 
-</script>
+</script>