323 lines
9.5 KiB
Vue
323 lines
9.5 KiB
Vue
<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">
|
||
<!-- 基本信息的表单 -->
|
||
<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-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 />
|
||
</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" :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-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="{}">
|
||
<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">
|
||
<template #default="{ row }">
|
||
<vxe-button mode="text" status="error" @click="removeRow(row)">删除</vxe-button>
|
||
</template>
|
||
</vxe-column>
|
||
|
||
</vxe-table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- step2 -->
|
||
|
||
<div class="step-2" v-if="current === 1">
|
||
<a-button type="primary" @click="autoInsertOneRow">开始扫码</a-button>
|
||
<a-button type="primary" danger @click="" 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"
|
||
:data="tableData" empty-text="请先扫码物料体条码" :edit-config="{ trigger: 'click', mode: 'cell', autoFocus: true}">
|
||
|
||
<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 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>
|
||
</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="btnClick" 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">
|
||
import { VxeTableInstance } from 'vxe-table'
|
||
import api from '@/api'
|
||
import { useUserStore } from '@/stores/user'
|
||
// steps
|
||
const current = ref<number>(0)
|
||
const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }]
|
||
|
||
|
||
|
||
// 表单数据
|
||
|
||
|
||
interface FormData {
|
||
applicant: string; // 申请人
|
||
applyDate: Date; // 申请日期
|
||
applyType: number; // 申请类型
|
||
slectedList: string[]; // 入库物料
|
||
}
|
||
|
||
const userStore = useUserStore()
|
||
const formData = ref<FormData>({
|
||
applicant: userStore.userName,
|
||
applyDate: new Date(),
|
||
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
|
||
}
|
||
const tableRef = ref<VxeTableInstance<RowVO>>()
|
||
// vxe-table 数据结果
|
||
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 }
|
||
})
|
||
}
|
||
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 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 : '未知',
|
||
quantity: 1,
|
||
assignRule: material.assignRule ? material.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)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 手动删除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)
|
||
}
|
||
})
|
||
|
||
$table.remove(row)
|
||
}
|
||
}
|
||
|
||
// 点击下一步按钮
|
||
const btnClick = () => {
|
||
// 在这里添加您想要执行的逻辑
|
||
current.value = current.value + 1; // 跳转到下一步
|
||
};
|
||
|
||
|
||
// step2相关的逻辑
|
||
|
||
interface Step2RowVO {
|
||
barcode: string
|
||
name: string
|
||
code: string
|
||
spec: string
|
||
type: string
|
||
times: Date
|
||
}
|
||
// 扫码点货的table对象
|
||
const applyDetailTableRef = ref<VxeTableInstance<Step2RowVO>>()
|
||
|
||
// 移除table中的行
|
||
const removeStep2Row = async (row: Step2RowVO) => {
|
||
const $table = applyDetailTableRef.value
|
||
if ($table) {
|
||
$table.remove(row)
|
||
}
|
||
}
|
||
|
||
// 点击开始扫码按钮，自动新增一行 或者 扫码结束后也自动新增一行
|
||
const autoInsertOneRow = async () => {
|
||
const $table = applyDetailTableRef.value
|
||
// // 获取表格的最后一行，判断是否有数据
|
||
// const fullData = $table?.getTableData().fullData;
|
||
|
||
|
||
|
||
if ($table) {
|
||
const row: Step2RowVO = {
|
||
barcode: '',
|
||
name: '',
|
||
code: '',
|
||
spec: '',
|
||
type: '',
|
||
times: new Date()
|
||
}
|
||
$table.insertAt(row, -1)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 固定按钮容器样式 */
|
||
.fixed-button-container {
|
||
position: fixed;
|
||
bottom: 80px;
|
||
/* 距离底部的距离 */
|
||
right: 30px;
|
||
/* 距离右侧的距离 */
|
||
z-index: 1000;
|
||
/* 确保按钮在其他内容之上 */
|
||
}
|
||
</style>
|