Browse Source

HL-5421 修改物料隔离申请的新增表单,增加汇总页,以便于快速查看已选择的明细库存的汇总数量

hella_online_20240821
wangyufei 3 months ago
parent
commit
757333f658
  1. 81
      src/components/BasicForm/src/BasicForm.vue
  2. 218
      src/components/CollectionTable/src/CollectionTable.vue

81
src/components/BasicForm/src/BasicForm.vue

@ -7,7 +7,7 @@
:vLoading="formLoading"
@updateFullscreen="updateFullscreen"
>
<div style="overflow-y: auto" :style="{ 'max-height': formHeight }">
<div style="overflow-y: auto" :style="formHeight">
<Form
ref="formRef"
:rules="rules"
@ -78,11 +78,17 @@
<el-input v-model="formSchema.value" v-if="isDetail && formTypeDetail == 'InputString'" />
</template>
</Form>
<div class="table" v-if="(isBusiness && formType == 'create' && fromeWhere != 'countPlan')||(isBusiness && formType == 'update' && updateTypeEdiltSubList && fromeWhere != 'countPlan')">
<Tabs ref="tabRef" v-if="tableAllSchemas&&tableAllSchemas.tableFormColumns.find(item=>item.field == 'itemCode')" :tabsList="[{
label: '明细',
prop: 'TableForm'
},{
label: '汇总',
prop: 'CollectionTable'
}]" v-model="tabSheet" @change="tabChange"/>
<div class="table" v-if="(tabSheet=='TableForm'&&isBusiness && formType == 'create' && fromeWhere != 'countPlan')||(tabSheet=='TableForm'&&isBusiness && formType == 'update' && updateTypeEdiltSubList && fromeWhere != 'countPlan')">
<TableForm
ref="tableFormRef"
class="w-[100%]"
:maxHeight="490"
:tableFields="tableAllSchemas.tableFormColumns"
:tableData="tableData"
:tableFormRules="tableFormRules"
@ -117,7 +123,7 @@
</template>
</TableForm>
</div>
<div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
<div v-if="tabSheet=='TableForm'&&isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
<TableFormCountPlan
:tableFields="tableAllSchemas.tableFormColumns"
:tableData="tableData"
@ -129,6 +135,12 @@
@handleDeleteTable="handleDeleteTable"
/>
</div>
<div v-if="tableAllSchemas&&tableAllSchemas.tableFormColumns.find(item=>item.field == 'itemCode')" v-show="tabSheet=='CollectionTable'">
<CollectionTable
:tableFields="tableAllSchemas?tableAllSchemas.tableFormColumns:[]"
:tableData="tableData"
></CollectionTable>
</div>
</div>
<template #footer>
<slot name="foorter"></slot>
@ -154,6 +166,7 @@ import TableForm from '@/components/TableForm/src/TableForm.vue'
import TableFormCountPlan from '@/components/TableFormCountPlan/src/TableFormCountPlan.vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { tableFormBlurVer, FormBlur, getListByBottonInput } from '@/api/wms/business/inputBlur'
import CollectionTable from '@/components/CollectionTable/src/CollectionTable.vue'
import { isString } from 'min-dash'
const count = ref(0)
@ -367,9 +380,23 @@ if (props.basicFormWidth) {
} else {
dialogWidth.value = props.isBusiness ? '60%' : '40%'
}
const formHeight = ref('60vh')
const formHeight = ref({
height:'60vh'
})
if(!props.tableAllSchemas){
formHeight.value = {
height:'auto'
}
}
const collectionRef = ref()
const updateFullscreen = (isFullscreen) => {
formHeight.value = isFullscreen ? 'auto' : '60vh'
formHeight.value.height = isFullscreen ? 'auto' : '60vh'
nextTick(()=>{
tableFormRef.value?.reloadFullscreen(isFullscreen)
collectionRef.value?.reloadFullscreen(isFullscreen)
})
}
const dialogVisible = ref(false) //
@ -384,8 +411,11 @@ const tableFormRules = ref(props.tableFormRules)
const route = useRoute() //
const routeName = ref('')
const sureDisabled = ref(false)
const tabSheet = ref('TableForm')
routeName.value = route.name
const tabChange = (item) => {
tabSheet.value = item.prop
}
// -
// const buttondata = [
// defaultButtons.mainListEditBtn(null), //
@ -622,6 +652,7 @@ const open = async (
titleName?: any,
alltitleName?: any
) => {
tabSheet.value = "TableForm"
dialogVisible.value = true
if (alltitleName) {
dialogTitle.value = alltitleName
@ -1059,26 +1090,26 @@ defineExpose({
padding: 10px;
width: calc(100% - 32px);
display: flex;
}
::v-deep(.el-table__body) {
padding: 10px 0px;
}
::v-deep(.el-table--default .el-table__cell) {
padding: 2px 0px;
border: none;
}
::v-deep(.el-table__body) {
padding: 10px 0px;
}
::v-deep(.el-table--default .el-table__cell) {
padding: 2px 0px;
border: none;
}
::v-deep(.el-table td.el-table__cell .el-form-item__content) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
::v-deep(.el-table td.el-table__cell div) {
overflow: visible;
}
::v-deep(.el-table td.el-table__cell .el-form-item__content) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
::v-deep(.el-table td.el-table__cell div) {
overflow: visible;
}
::v-deep(.el-icon) {
display: block;
::v-deep(.el-icon) {
display: block;
}
}
button .button {
> div {

218
src/components/CollectionTable/src/CollectionTable.vue

@ -0,0 +1,218 @@
<template>
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox v-for="item in fields.filter(item=>item.checkBoxOption)" :label="item.label" :value="item.label" :disabled="item.checkedDisabled"/>
</el-checkbox-group>
<el-table v-clientTableForm="{
isShowPagination:false,
isShowButton: false,
isFullscreen:isFullscreen
}" class="collection" :data="showList" border :style="{width:tableWidth+'px'}">
<el-table-column type="index" width="60" label="序号" align="center"/>
<el-table-column border row-key="id"
v-for="headerItem in fields.filter((item) => !!item.checked)"
:label="headerItem.label"
:prop="headerItem.field"
align="center"
:width="headerItem.width"
>
<template v-if="headerItem.label=='状态'" #default="scope">
<span>{{ getStatus(scope.row,headerItem.field) }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
const { t } = useI18n() //
const props = defineProps({
//
tableData: {
type: Array,
default: () => {
return []
}
},
//
tableFields: {
type: Array,
default: () => {
return []
}
}
})
const fields = ref([{
field: 'itemCode',
label:'物料',
checkBoxOption:true, // checkbox
checked:true, //checkbox
checkedDisabled:true, // checkbox
width:200
},{
field: 'batch',
label:'批次',
checkBoxOption:true, // checkbox
checked:false, //checkbox
checkedDisabled:false, // checkbox
width:100
},{
field: 'locationCode',
label:'库位',
checkBoxOption:true, // checkbox
checked:false, //checkbox
checkedDisabled:false, // checkbox
width:150
},{
field: 'inventoryStatus',
label:'状态',
dictType: DICT_TYPE.INVENTORY_STATUS,
checkBoxOption:true, // checkbox
checked:false, //checkbox
checkedDisabled:false, // checkbox
width:100,
},{
field: 'totalCount',
label:'数量',
checkBoxOption:false, // checkbox
checked:true,
width:100
}])
const inventoryStatusList = getStrDictOptions(DICT_TYPE.INVENTORY_STATUS)
const getStatus = (row,field)=>{
let findStatus = inventoryStatusList.find(item=>item.value == row[field])
if(findStatus){
return findStatus.label
}else{
return row[field]
}
}
//
let batchField = props.tableFields.find(item=>item.field=='fromBatch'||item.field=='batch')
if(batchField){//使
fields.value[1].field = batchField.field
fields.value[1].checkBoxOption = true
}else{//
fields.value[1].checkBoxOption = false
}
//
let locationField = props.tableFields.find(item=>item.field=='fromLocationCode'||item.field=='locationCode')
if(locationField){//使
fields.value[2].field = locationField.field
fields.value[2].checkBoxOption = true
}else{//
fields.value[2].checkBoxOption = false
}
//
let inventoryStatusField = props.tableFields.find(item=>item.field=='fromInventoryStatus'||item.field=='inventoryStatus')
if(inventoryStatusField){//使
fields.value[3].field = inventoryStatusField.field
fields.value[3].checkBoxOption = true
}else{//
fields.value[3].checkBoxOption = false
}
console.log('fields',fields.value)
const tableWidth = ref(360)
const checkList = ref(['物料'])
const checkChange = (value)=>{
console.log('checkChange',value)
let width = 0
fields.value.forEach(item=>{
if(value.includes(item.label) || item.field=='totalCount'){
item.checked = true
width += item.width
}else{
item.checked = false
}
})
tableWidth.value = width + 60
nextTick(()=>{
updateShowList()
})
}
const showList = ref([])
const updateShowList = ()=>{
showList.value = []
//field
const qtyField = props.tableFields.find(item=>item['field']=='qty')
//
let tableData = JSON.parse(JSON.stringify(props.tableData))
//index
let removeIndexs = []
for(let i=0;i<tableData.length;i++){
//
if(removeIndexs.indexOf(i)>-1){
continue
}
let tableItem = tableData[i]
//ts
if(!tableItem['qty']){
tableItem['totalCount'] =Number(qtyField.min)
}else{
tableItem['totalCount'] = Number(tableItem['qty'])
}
//
for(let j=i+1;j<tableData.length;j++){
let tempItem = tableData[j]
if(!tempItem['qty']){
//
tempItem['qty'] = Number( qtyField.min) || 0
}
//
let equal = true;
for (let k = 0; k < fields.value.length; k++) {
const fieldItem = fields.value[k];
// checkBoxOptioncheckbox
// checked
if(fieldItem.checkBoxOption&&fieldItem.checked){
if(tableItem[fieldItem['field']]+''!==tempItem[fieldItem['field']]+''){
equal = false
break
}
}
}
//removeIndexs
if(equal){
removeIndexs.push(j)
tableItem['totalCount'] = Number(tableItem['totalCount'])+Number(tempItem['qty'])
}
}
showList.value.push(tableItem)
}
console.log('汇总showList',showList.value)
}
updateShowList()
watch(
() => props.tableData,
() => {
console.log('汇总props.tableData',props.tableData)
updateShowList()
},
{
deep: true
}
)
const isFullscreen = ref(false)
const reloadFullscreen = (fullscreen)=>{
isFullscreen.value = fullscreen
}
defineExpose({
reloadFullscreen
})
</script>
<style lang="scss" scoped>
</style>
Loading…
Cancel
Save