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