23 changed files with 462 additions and 67 deletions
@ -0,0 +1,3 @@ |
|||
import CollectionTable from './src/CollectionTable.vue' |
|||
|
|||
export { CollectionTable } |
|||
@ -0,0 +1,219 @@ |
|||
<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> |
|||
<!-- v-clientTableForm="{ |
|||
isShowPagination:false, |
|||
isShowButton: false, |
|||
isFullscreen:isFullscreen |
|||
}" --> |
|||
<el-table 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]; |
|||
// checkBoxOption：在checkbox的列表中 |
|||
// 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…
Reference in new issue