bug: 提交物料申请
This commit is contained in:
my_ong
parent
94d825fa2d
commit
b2efb54608
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user