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

bug: 提交物料申请

Browse Source
This commit is contained in:
my_ong 2024-12-05 21:28:24 +08:00
parent 94d825fa2d
commit b2efb54608
3 changed files with 234 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/views/stock/component/applyConfirm.vue
View File

@ -1,79 +1,109 @@
<template> <template>
<div> <div>
<vxe-table border show-overflow ref="tableRef" max-height="500" size="medium" <vxe-table
:edit-config="{ trigger: 'manual', mode: 'cell' }" v-model:data="tableData"> ref="tableRef"
<vxe-column type="seq" width="70" /> border
<vxe-column field="name" title="物料名称" /> show-overflow
<vxe-column field="scan" title="是否扫码" /> max-height="500"
<vxe-column field="applyNum" title="申请数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" /> size="medium"
<vxe-column field="scanNum" title="扫码数量" :edit-render="{ name: 'VxeInput', props: { type: 'integer' } }" /> :edit-config="{ trigger: 'manual', mode: 'cell' }"
<vxe-column field="remark" title="备注" :edit-render="{ name: 'VxeInput' }" /> :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="操作"> <vxe-column title="操作">
<template #default="{ row }"> <template #default="{ row }">
<template v-if="hasEditStatus(row)"> <template v-if="hasEditStatus(row)">
<vxe-button @click="saveRowEvent(row)">保存</vxe-button> <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
<vxe-button @click="cancelRowEvent()">取消</vxe-button> <vxe-button @click="cancelRowEvent()">取消</vxe-button>
</template> </template>
<template v-else> <template v-else>
<vxe-button @click="editRowEvent(row)">编辑</vxe-button> <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { VxeUI, VxeTableInstance } from 'vxe-table' 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 { defineExpose({ getTableData })
id: number
name: string
scan: string
applyNum: number
scanNum: number
remark: string
}
const tableRef = ref<VxeTableInstance<RowVO>>() interface RowVO {
id: number
name: string
scan: string
applyNum: number
scanNum: number
remark: string
}
const loading = ref(false) const tableRef = ref<VxeTableInstance<RowVO>>()
const tableData = ref<RowVO[]>()
const hasEditStatus = (row: RowVO) => { const loading = ref(false)
const $table = tableRef.value
if ($table) {
return $table.isEditByRow(row)
}
}
const editRowEvent = (row: RowVO) => { const hasEditStatus = (row: RowVO) => {
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
$table.setEditRow(row) return $table.isEditByRow(row)
} }
} }
const saveRowEvent = (row: RowVO) => { const editRowEvent = (row: RowVO) => {
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
$table.clearEdit().then(() => { $table.setEditRow(row)
loading.value = true }
setTimeout(() => { }
loading.value = false
VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
}, 300)
})
}
}
const cancelRowEvent = () => { const saveRowEvent = (row: RowVO) => {
const $table = tableRef.value const $table = tableRef.value
if ($table) { if ($table) {
$table.clearEdit() $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> </script>

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

@ -1,136 +1,136 @@
<template> <template>
<!-- steps --> <!-- steps -->
<div v-show="current != 3"> <div v-show="current != 3">
<a-steps v-model:current="current" :items="items"></a-steps> <a-steps v-model:current="current" :items="items"></a-steps>
<a-divider style="height: 2px; background-color: #7cb305" /> <a-divider style="height: 2px; background-color: #7cb305" />
</div> </div>
<!-- step1 --> <!-- step1 -->
<div class="step-1" v-show="current === 0"> <div v-show="current === 0" class="step-1">
<apply-form :apply-type="applyType" ref="applyFormRef"></apply-form> <apply-form ref="applyFormRef" :apply-type="applyType"></apply-form>
</div> </div>
<div class="step-2" v-show="current === 1"> <div v-show="current === 1" class="step-2">
<scan-form :total-value="totalValue" ref="scanFormRef"></scan-form> <scan-form ref="scanFormRef" :total-value="totalValue"></scan-form>
</div> </div>
<div class="step-3" v-show="current === 2"> <div v-show="current === 2" class="step-3">
<apply-confirm :table-data="conformData" ref="applyConfirmRef"></apply-confirm> <apply-confirm ref="applyConfirmRef" :table-data="conformData"></apply-confirm>
</div> </div>
<div class="step-4" v-show="current === 3"> <div v-show="current === 3" class="step-4">
<successResul></successResul> <successResul></successResul>
</div> </div>
<!-- 按钮 -->
<!-- 按钮 --> <a-space v-show="current != 3" wrap class="fixed-button-container">
<a-space wrap class="fixed-button-container"> <a-button v-if="current != 0" type="dashed" @click="current--">上一步</a-button>
<a-button type="dashed" v-if="current != 0" @click="current--">上一步</a-button> <a-button v-if="current != 2" type="primary" @click="nextStep">下一步</a-button>
<a-button type="primary" v-if="current != 2" @click="nextStep">下一步</a-button> <a-button v-if="current === 2" type="primary" :loading="loading" @click="submit">提交申请</a-button>
<a-button type="primary" :loading="loading" v-if="current === 2" @click="submit">提交申请</a-button> </a-space>
</a-space>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import applyForm from '../component/applyForm.vue' import applyForm from '../component/applyForm.vue'
import scanForm from '../component/scanForm.vue'; import scanForm from '../component/scanForm.vue'
import applyConfirm from '../component/applyConfirm.vue'; import applyConfirm from '../component/applyConfirm.vue'
import successResul from '../component/successResul.vue'; import successResul from '../component/successResul.vue'
import api from '@/api' import api from '@/api'
// 和外层界面的数据交互 // 和外层界面的数据交互
defineProps( defineProps(
{ {
applyType: { applyType: {
type: String, type: String,
default: '', default: '',
} },
} // 申请类型 applyType页面传值的使用1和2，1: 采购入库 和 归还入库 2: 出库外借 }, // 申请类型 applyType页面传值的使用1和2，1: 采购入库 和 归还入库 2: 出库外借
) )
// steps // steps
const current = ref<number>(0) // 翻页的引用 const current = ref<number>(0) // 翻页的引用
const applyFormRef = ref(); // step1表单引用 const applyFormRef = ref() // step1表单引用
const scanFormRef = ref(); // step2表单引用 const scanFormRef = ref() // step2表单引用
const applyConfirmRef = ref(); // step3表单引用 const applyConfirmRef = ref() // step3表单引用
const selectData = ref(); // step1中用户申请选择的物料数据,存的原始数据 const selectData = ref() // step1中用户申请选择的物料数据,存的原始数据
const scanData = ref(); // step2中用户扫码的物料数据 const scanData = ref() // step2中用户扫码的物料数据
const totalValue = ref(0); // 传给扫码页面的合计数值 const totalValue = ref(0) // 传给扫码页面的合计数值
const conformData = ref<Array<object>>([]); // step3中的待确认数据 const conformData = ref<Array<object>>([]) // step3中的待确认数据
const loading = ref(false); // 提交按钮的loading状态 const loading = ref(false) // 提交按钮的loading状态
const items = [{ title: '录入申请' }, { title: '扫码点货' }, { title: '人工确认' }] 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 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> </script>
<style scoped> <style scoped>
/* 固定按钮容器样式 */ /* 固定按钮容器样式 */
.fixed-button-container { .fixed-button-container {
position: fixed; position: fixed;
bottom: 80px;
/* 距离底部的距离 */ /* 距离底部的距离 */
right: 30px; right: 30px;
/* 距离右侧的距离 */ bottom: 80px;
z-index: 1000;
/* 确保按钮在其他内容之上 */ /* 距离右侧的距离 */
} z-index: 1000;
/* 确保按钮在其他内容之上 */
}
</style> </style>

27
src/views/stock/component/successResul.vue
View File

@ -1,11 +1,24 @@
<template> <template>
<a-result status="success" title="Successfully Purchased Cloud Server ECS!" <a-result
sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."> status="success"
<template #extra> title="Successfully Purchased Cloud Server ECS!"
<a-button key="console" type="primary">查询申请</a-button> sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
<a-button key="buy">继续提交申请</a-button> >
</template> <template #extra>
</a-result> <a-button type="primary" @click="select">查询申请</a-button>
<a-button @click="again">继续提交申请</a-button>
</template>
</a-result>
</template> </template>
<script lang="ts" setup>
import router from '@/router'
const select = () => {
router.push({ path: '/statistic/inbound' }) // 未生效
}
const again = () => {
router.push({ path: '/stock/inbound' })
}
</script>