IOT/ims-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

扫码枪对接

Browse Source
This commit is contained in:
my_ong 2024-12-03 21:45:30 +08:00
parent 73df90e8ae
commit b9fefb123a
6 changed files with 82 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/stock/component/applyForm.vue
View File

@ -3,21 +3,21 @@
<div>
<a-form :model="formData" name="basic" layout="horizontal" labelWrap>
<a-form-item label="申请人" name="applicant">
<a-input v-model:value="formData.applicant" style="width: 40%;" />
<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-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 />
<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"
style="width: 40%;" showArrow :options="options" @deselect="removeEvent"
@select="insertEvent"></a-select>
</a-form-item>
</a-form>
@ -25,45 +25,24 @@
<!-- vxe-table -->
<div>
<vxe-table border show-overflow ref="tableRef" max-height="500" :column-config="{ resizable: true }"
size="medium" :data="tableData" empty-text="请先选择入库物料" :edit-config="{ trigger: 'click', mode: 'cell' }"
:checkbox-config="{ trigger: 'row', highlight: true }">
<vxe-column type="seq" title="序号" width="60"></vxe-column>
<vxe-column field="id" title="物料id" :visible="false"></vxe-column>
<vxe-column field="role" title="物料名称" beforeEditMethod="false">
<template #default="{ row }">
<span>{{ row.name }}</span>
</template>
</vxe-column>
<vxe-column field="code" title="编码" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.code" type="text"></vxe-input>
</template>
</vxe-column>
<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 field="spec" title="规格" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.spec" type="text" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="type" title="类型" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.type" type="text" transfer>
</vxe-input>
</template>
</vxe-column>
<vxe-column field="assignRule" title="赋码规则" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.assignRule" type="text" transfer>
</vxe-input>
</template>
</vxe-column>
<vxe-column field="quantity" title="申请数量" :edit-render="{}">
<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="操作" beforeEditMethod="false">
<vxe-column field="oprator" title="操作">
<template #default="{ row }">
<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
</template>
@ -77,19 +56,21 @@
import { VxeTableInstance } from 'vxe-table'
import api from '@/api'
import { useUserStore } from '@/stores/user'
import dayjs,{Dayjs} from 'dayjs';
interface FormData {
applicant: string; // 申请人
applyDate: Date; // 申请日期
applyType: number; // 申请类型
slectedList: string[]; // 入库物料
applyDate: Dayjs; // 申请日期
applyType: string; // 申请类型
slectedList: number[]; // 入库物料
}
const userStore = useUserStore()
const formData = ref<FormData>({
applicant: userStore.userName,
applyDate: new Date(),
applyType: 1, // 1: 采购入库 2: 归还入库 3: 出库外借
applyDate: dayjs(),
applyType: '1', // 1: 采购入库 2: 归还入库 3: 出库外借
slectedList: []
});
@ -124,33 +105,33 @@ const getMaterialList = async () => {
getMaterialList()
// 选中时在末尾新增一行
// value: number, option: { label: string, value: number }
const insertEvent = (value: string) => {
window.console.log('insertEvent', tableData.value)
// 根据value找到对应的物料信息
const material = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
if (material) {
const m = materialList.value.find((item) => item.id === (value ? parseInt(value) : -1))
if (m) {
const row: RowVO = {
id: material.id ? material.id : -1,
name: material.name ? material.name : '未知',
code: material.code ? material.code : '未知',
spec: material.spec ? material.spec : '未知',
type: material.type ? material.type : '未知',
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: material.assignRule ? material.assignRule : 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)
}
}
}
// 取消选中时，删除table中的行
@ -183,4 +164,3 @@ const removeRow = async (row: RowVO) => {
}
</script>

8
src/views/stock/component/applyModal.vue
View File

@ -14,11 +14,6 @@
<scan-form></scan-form>
</div>
<!-- 按钮 -->
<a-space wrap class="fixed-button-container">
<a-button type="default" @click="current = current - 1" v-if="current > 0">上一步</a-button>
<a-button type="primary" @click="current = current + 1" v-if="current < 2">下一步</a-button>
<a-button type="primary" @click="btnClick" v-if="current === 2">提交</a-button>
</a-space>
</template>
<script setup lang="ts">
@ -31,9 +26,6 @@ import scanForm from '../component/scanForm.vue';
const current = ref<number>(0)
const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
const btnClick = () => {
console.log('提交')
}
</script>
<style scoped>

90
src/views/stock/component/scanForm.vue
View File

@ -1,51 +1,35 @@
<template>
<a-button type="primary" @click="autoInsertOneRow">开始扫码</a-button>
<a-button type="primary" danger style="left: 20px;">重新扫码</a-button>
<vxe-table border stripe show-overflow ref="applyDetailTableRef" max-height="500"
:column-config="{ resizable: true }" :keyboard-config="{ isEsc: true, isEnter: true }" size="medium"
empty-text="请先扫码物料体条码" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true}">
<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' }">
<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', autoSelect: true }">
<template #edit="{ row }">
<vxe-input v-model="row.barcode" type="text" class="my-input" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="role" title="物料名称" beforeEditMethod="false">
<template #default="{ row }">
<span>{{ row.name }}</span>
</template>
</vxe-column>
<vxe-column field="code" title="编码" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.code" type="text"></vxe-input>
</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="oprator" title="操作">
<template #default="{ row }">
<vxe-button mode="text" status="error" @click="removeStep2Row(row)">删除</vxe-button>
</template>
</vxe-column>
<vxe-column field="spec" title="规格" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.spec" type="text" transfer></vxe-input>
</template>
</vxe-column>
<vxe-column field="type" title="类型" beforeEditMethod="false">
<template #edit="{ row }">
<vxe-input v-model="row.type" type="text" transfer>
</vxe-input>
</template>
</vxe-column>
<vxe-column field="oprator" title="操作" beforeEditMethod="false">
<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'
//扫码的条形码字符串
const value = ref('')
const input = useTemplateRef('snInput');
interface Step2RowVO {
barcode: string
@ -66,26 +50,34 @@ const removeStep2Row = async (row: Step2RowVO) => {
}
}
function beiginScan() {
input.value?.focus()
}
// 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行
const autoInsertOneRow = async () => {
const $table = applyDetailTableRef.value
const sn = value.value.trim();
/**
* 1. 判断sn是否合法
* 2. 判断sn是否已经存在于表格中，需要缓存sn列表
* 3. 根据sn获取物料信息，并新增一行到表格中,需要缓存物料信息
*/
// // 获取表格的最后一行，判断是否有数据
// const fullData = $table?.getTableData().fullData;
if ($table) {
const row: Step2RowVO = {
barcode: '',
barcode: sn,
name: '',
code: '',
spec: '',
type: '',
times: new Date()
}
$table.insertAt(row, -1)
$table.insert(row)
// 添加后就清空输入框
value.value = ''
}
}
</script>

6
src/views/stock/report/outboundReport-page.vue
View File

@ -25,16 +25,10 @@
import api from '@/api'
import { IPage } from '@/api/api'
const searchKey = ref('')
const pagedata = ref<IPage<material.ApplyForm>>()
const loading = ref(false)
// 加载数据的方法
const loadData = async (page = 1, size = 10) => {
loading.value = true

2
tsconfig.app.tsbuildinfo
View File

File diff suppressed because one or more lines are too long

2
tsconfig.node.tsbuildinfo
View File

File diff suppressed because one or more lines are too long