修改页面逻辑

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

@@ -20,8 +20,8 @@
     <!-- 页面表格内容 -->
     <div style="min-height: calc(100vh - 305px)">
       <!-- 表格行 -->
-			<a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination"
+      <a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination" :loading="loading"
-				:loading="loading" row-key="key">
+        row-key="key">
 
       </a-table>
     </div>

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

@@ -16,9 +16,8 @@
         <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="请选择入库物料"
+        <a-select v-model:value="formData.slectedList" mode="multiple" bordered placeholder="请选择入库物料" style="width: 40%;"
-					style="width: 40%;" showArrow :options="options" @deselect="removeEvent" 
+          showArrow :options="options" @deselect="removeEvent" @select="insertEvent"></a-select>
-					@select="insertEvent"></a-select>
       </a-form-item>
     </a-form>
   </div>
@@ -58,6 +57,13 @@ import api from '@/api'
 import { useUserStore } from '@/stores/user'
 import dayjs, { Dayjs } from 'dayjs';
 
+// 和外层界面的数据交互 
+const getTableData = () => {
+  const $table = tableRef.value
+  return $table?.getTableData().fullData;
+}
+
+defineExpose({ getTableData})
 
 interface FormData {
   applicant: string; // 申请人
@@ -108,7 +114,7 @@ getMaterialList()
 
 // 选中时在末尾新增一行
 // value: number, option: { label: string, value: number }
-const insertEvent = (value: string) => {
+const insertEvent = (value: any) => {
   // 根据value找到对应的物料信息
   const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
   if (m) {
@@ -126,16 +132,13 @@ const insertEvent = (value: string) => {
     const $table = tableRef.value
     if ($table) {
       $table.insertAt(row, -1)
-			window.console.log('表数据1：', tableData.value)
-			window.console.log('表数据2：', $table.getTableData().fullData)
-
     }
   }
 
 }
 
 // 取消选中时，删除table中的行
-const removeEvent = (value: string) => {
+const removeEvent = (value: any) => {
   const $table = tableRef.value
   // 根据value找到对应的行
   if ($table) {

src/views/stock/component/applyModal.vue

@@ -5,27 +5,51 @@
   </div>
   <a-divider style="height: 2px; background-color: #7cb305" />
   <!-- step1 -->
-	<div class="step-1" v-if="current === 0">
+
-		<!--第一步 -->
+  <div class="step-1" v-show="current === 0">
-		<apply-form></apply-form>
+    <apply-form ref="applyFormRef"></apply-form>
   </div>
-	<!-- step2 -->
+
-	<div class="step-2" v-if="current === 1">
+  <div class="step-2" v-show="current === 1">
-		<scan-form></scan-form>
+    <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>

src/views/stock/component/scanForm.vue

@@ -1,11 +1,19 @@
 <template>
   <a-button type="primary" @click="beiginScan">开始扫码</a-button>
   <a-button type="primary" danger style="left: 20px;">重新扫码</a-button>
-	<a-input bordered size="large" 
+  <a-input bordered size="large" ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow"
-	ref="snInput" v-model:value="value" placeholder="输入条形码" @pressEnter="autoInsertOneRow" style="margin-top: 20px; margin-bottom: 20px;"/>
+    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"
+  <vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500" :column-config="{ resizable: true }"
-		:column-config="{ resizable: true }" :keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码"
+    :keyboard-config="{ isEsc: true }" size="medium" empty-text="请先扫码物料体条码"
     :edit-config="{ trigger: 'click', mode: 'cell' }">
 
     <vxe-column type="seq" title="序号" width="60"></vxe-column>
@@ -15,6 +23,7 @@
     <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>
@@ -27,23 +36,51 @@
 <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 {
+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: Date
+  times: string
 }
+
 // 扫码点货的table对象
-const applyDetailTableRef = ref<VxeTableInstance<Step2RowVO>>()
+const applyDetailTableRef = ref<VxeTableInstance<TableRowVO>>()
 
 // 移除table中的行
-const removeStep2Row = async (row: Step2RowVO) => {
+const removeStep2Row = async (row: TableRowVO) => {
   const $table = applyDetailTableRef.value
   if ($table) {
     $table.remove(row)
@@ -58,26 +95,40 @@ function beiginScan() {
 const autoInsertOneRow = async () => {
   const $table = applyDetailTableRef.value
   const sn = value.value.trim();
+
+
   /**
    * 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: Step2RowVO = {
+    const row: TableRowVO = {
       barcode: sn,
       name: '',
       code: '',
       spec: '',
       type: '',
-			times: new Date()
+      times: new Date().toLocaleString()
     }
-		$table.insert(row)
+
+
+    $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>