6 changed files with 552 additions and 19 deletions
@ -0,0 +1,3 @@ |
|||
import TableFormAdjustment from './src/TableFormAdjustment.vue' |
|||
|
|||
export { TableFormAdjustment } |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<Dialog |
|||
title="询证函调节表" |
|||
:width="960" |
|||
v-model="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<TableFormAdjustment ref="tableFormAdjustment" :rowData="rowData" :isDetail="false" @updateList="updateList"/> |
|||
<template #footer> |
|||
<slot name="foorter"></slot> |
|||
<ButtonBase :Butttondata="[ |
|||
defaultButtons.formSaveBtn(null), // 保存 |
|||
defaultButtons.formCloseBtn(null) // 关闭 |
|||
]" @button-base-click="buttonBaseClick" /> |
|||
</template> |
|||
|
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|||
import TableFormAdjustment from './TableFormAdjustment.vue' |
|||
|
|||
|
|||
|
|||
const dialogVisible = ref(false) |
|||
const rowData = ref({}) |
|||
const open = (row)=>{ |
|||
dialogVisible.value = true |
|||
nextTick(()=>{ |
|||
rowData.value = row |
|||
}) |
|||
} |
|||
|
|||
const tableFormAdjustment = ref() |
|||
/** 按钮事件 */ |
|||
const buttonBaseClick = (val) => { |
|||
if (val == 'save') { |
|||
// 保存 |
|||
tableFormAdjustment.value.saveData() |
|||
} else if (val == 'close') { |
|||
// 关闭 |
|||
dialogVisible.value = false |
|||
} |
|||
} |
|||
|
|||
const updateList = ()=>{ |
|||
dialogVisible.value = false |
|||
emit('updateList') |
|||
} |
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'updateList', |
|||
]) |
|||
defineExpose({open}) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.top{ |
|||
margin-bottom: 20px |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,442 @@ |
|||
<template> |
|||
<!-- <Dialog |
|||
title="询证函调节表" |
|||
:width="960" |
|||
v-model="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
> --> |
|||
<div> |
|||
<!-- 顶部 --> |
|||
<div class="top" style="display: flex; flex-direction: row;"> |
|||
<div style="margin-right:5px"> |
|||
<el-table border class="top-table" :data="topTableData"> |
|||
<el-table-column |
|||
:label="headerItem.label" |
|||
:prop="headerItem.field" |
|||
:width="headerItem.width" |
|||
align="center" |
|||
v-for="headerItem in topHeader" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
<div> |
|||
<el-table border class="top-table" :data="topTableData"> |
|||
<el-table-column |
|||
:label="headerItem.label" |
|||
:prop="headerItem.field" |
|||
:width="headerItem.width" |
|||
align="center" |
|||
v-for="headerItem in topHeader" |
|||
/> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部 --> |
|||
<div class="bottom" style="display: flex; flex-direction: row;"> |
|||
<!-- 下-左 --> |
|||
<div style="margin-right:5px"> |
|||
<el-button type="info" link>调整事项（减项以负数列示）：</el-button> |
|||
<el-table border class="top-table" :data="[...bottomLeftTableData,...bottomLeftSumTableData]"> |
|||
<el-table-column |
|||
:label="headerItem.label" |
|||
:prop="headerItem.field" |
|||
:width="headerItem.width" |
|||
align="center" |
|||
v-for="headerItem in bottomLeftHeader" |
|||
> |
|||
<template #default="scope"> |
|||
<el-input :disabled="isDetail" v-if="!scope.row.isSum&&headerItem.type=='input'" v-model="scope.row[headerItem.field]" :placeholder="`请输入${headerItem.label}`"/> |
|||
<el-input-number :disabled="isDetail" v-else-if="!scope.row.disabled&&headerItem.type=='inputnumber'" v-model="scope.row[headerItem.field]" :placeholder="`请输入${headerItem.label}`"/> |
|||
|
|||
<span v-else>{{ scope.row[headerItem.field] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-form style="margin-top:20px;width:460px" :model="leftForm" :label-width="300" > |
|||
<el-form-item label="经办人"> |
|||
<el-input :disabled="isDetail" v-model="leftForm.name" placeholder="请输入经办人"/> |
|||
</el-form-item> |
|||
<el-form-item label="对账日期"> |
|||
<el-date-picker :disabled="isDetail" value-format="YYYY-MM-DD HH:mm:ss" |
|||
v-model="leftForm.date" |
|||
type="datetime" |
|||
placeholder="请选择对账日期" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<!-- 下-右 --> |
|||
<div> |
|||
<el-button type="info" link>调整事项（减项以负数列示）：</el-button> |
|||
<el-table border class="top-table" :data="[...bottomRightTableData,...bottomRightSumTableData]"> |
|||
<el-table-column |
|||
:label="headerItem.label" |
|||
:prop="headerItem.field" |
|||
:width="headerItem.width" |
|||
align="center" |
|||
v-for="headerItem in bottomRightHeader" |
|||
> |
|||
<template #default="scope"> |
|||
<el-input :disabled="isDetail" v-if="!scope.row.isSum&&headerItem.type=='input'" v-model="scope.row[headerItem.field]" :placeholder="`请输入${headerItem.label}`"/> |
|||
<el-input-number :disabled="isDetail" v-else-if="!scope.row.disabled&&headerItem.type=='inputnumber'" v-model="scope.row[headerItem.field]" :placeholder="`请输入${headerItem.label}`"/> |
|||
|
|||
<span v-else>{{ scope.row[headerItem.field] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-form style="margin-top:20px;width:460px" :model="rightForm" :label-width="300" > |
|||
<el-form-item label="经办人"> |
|||
<el-input :disabled="isDetail" v-model="rightForm.name" placeholder="请输入经办人"/> |
|||
</el-form-item> |
|||
<el-form-item label="对账日期"> |
|||
<el-date-picker :disabled="isDetail" value-format="YYYY-MM-DD HH:mm:ss" |
|||
v-model="rightForm.date" |
|||
type="datetime" |
|||
placeholder="请选择对账日期" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- <template #footer> |
|||
<slot name="foorter"></slot> |
|||
<ButtonBase :Butttondata="[ |
|||
defaultButtons.formSaveBtn(null), // 保存 |
|||
defaultButtons.formCloseBtn(null) // 关闭 |
|||
]" @button-base-click="buttonBaseClick" /> |
|||
</template> |
|||
|
|||
</Dialog> --> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as SupplierApbalanceMainApi from '@/api/wms/supplierApbalanceMain' |
|||
import dayjs from 'dayjs' |
|||
|
|||
// import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|||
const { t } = useI18n() // 国际化 |
|||
const message = useMessage() // 消息弹窗 |
|||
|
|||
const props = defineProps({ |
|||
rowData: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
adjustmentData: { |
|||
type: Object, |
|||
required: true, |
|||
default: null |
|||
}, |
|||
isDetail: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
onMounted(()=>{ |
|||
console.log('rowData',props.rowData) |
|||
nextTick(()=>{ |
|||
setTopHeaderData() |
|||
}) |
|||
|
|||
}) |
|||
watch( |
|||
() => props.rowData, |
|||
() => { |
|||
console.log('rowData',props.rowData) |
|||
nextTick(()=>{ |
|||
setTopHeaderData() |
|||
}) |
|||
}, |
|||
{ |
|||
deep: true |
|||
} |
|||
) |
|||
|
|||
// 顶部单位名称 |
|||
const topHeader = ref<any>([]) |
|||
const topTableData = ref<any>([]) |
|||
|
|||
const setTopHeaderData = ()=>{ |
|||
let myData = unref(props.rowData) |
|||
console.log('myData',myData) |
|||
topHeader.value = [{ |
|||
label:`单位名称:${myData?.ttSupplierName}`, |
|||
field:'name1', |
|||
width:260 |
|||
},{ |
|||
label:'金额', |
|||
field:'price1', |
|||
width:100 |
|||
},{ |
|||
label:'备注', |
|||
field:'remark1', |
|||
width:100 |
|||
}] |
|||
|
|||
topTableData.value = [{ |
|||
name1:`截止${dayjs(myData?.ttGenerateTime).year()}年${dayjs(myData?.ttGenerateTime).month()}月${dayjs(myData?.ttGenerateTime).day()}日账面金额如下`, |
|||
price1:Number(myData?.ttAccountAp)+Number(myData?.ttAccountOthap), |
|||
remark1:myData?.remark, |
|||
name2:'截止年月日账面金额如下', |
|||
price2:Number(myData?.ttAccountAp)+Number(myData?.ttAccountOthap), |
|||
remark2:myData?.remark, |
|||
}] |
|||
|
|||
if(props.isDetail){ |
|||
//详情数据 |
|||
setDetailData() |
|||
} |
|||
} |
|||
const setDetailData = ()=>{ |
|||
// 摘要表格数据 |
|||
let adjustmentData = unref(props.adjustmentData) |
|||
if(adjustmentData?.subList){ |
|||
bottomLeftTableData.value = adjustmentData?.subList?.map((item,index) => ({ |
|||
index:index+1, |
|||
ttAbstractLeft:item?.ttAbstractLeft, |
|||
ttBalanceLeft:item?.ttBalanceLeft, |
|||
remark:item?.remark |
|||
})); |
|||
bottomRightTableData.value = adjustmentData?.subList?.map((item,index) => ({ |
|||
index:index+1, |
|||
ttAbstractRight:item?.ttAbstractRight, |
|||
ttBalanceRight:item?.ttBalanceRight, |
|||
remark:item?.remark |
|||
})); |
|||
} |
|||
|
|||
// 经办人.对账日期 |
|||
leftForm.value = { |
|||
name:adjustmentData?.ttOperatorLeft, |
|||
date:adjustmentData?.ttDzDateLeft |
|||
} |
|||
rightForm.value = { |
|||
name:adjustmentData?.ttOperatorRight, |
|||
date:adjustmentData?.ttDzDateRight |
|||
} |
|||
} |
|||
|
|||
//摘要表格左侧 |
|||
const bottomLeftHeader = ref([{ |
|||
label:'序号', |
|||
field:'index', |
|||
width:80 |
|||
},{ |
|||
label:'摘要', |
|||
field:'ttAbstractLeft', |
|||
width:180, |
|||
type:'input' |
|||
},{ |
|||
label:'金额', |
|||
field:'ttBalanceLeft', |
|||
width:200, |
|||
type:'inputnumber' |
|||
}]) |
|||
const bottomRightHeader = ref([{ |
|||
label:'序号', |
|||
field:'index', |
|||
width:80 |
|||
},{ |
|||
label:'摘要', |
|||
field:'ttAbstractRight', |
|||
width:180, |
|||
type:'input' |
|||
},{ |
|||
label:'金额', |
|||
field:'ttBalanceRight', |
|||
width:200, |
|||
type:'inputnumber' |
|||
}]) |
|||
|
|||
const bottomLeftTableData = ref([{ |
|||
index:'1', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'2', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'3', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'4', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'5', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'6', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'7', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
},{ |
|||
index:'8', |
|||
ttAbstractLeft:'', |
|||
ttBalanceLeft:'', |
|||
remark:'' |
|||
}]) |
|||
|
|||
const bottomRightTableData = ref([{ |
|||
index:'1', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'2', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'3', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'4', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'5', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'6', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'7', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
},{ |
|||
index:'8', |
|||
ttAbstractRight:'', |
|||
ttBalanceRight:'', |
|||
remark:'' |
|||
}]) |
|||
// 调整事项合计 、调整后余额 |
|||
const bottomLeftSumTableData = ref([{ |
|||
index:'', |
|||
ttAbstractLeft:'调整事项合计', |
|||
ttBalanceLeft:'', |
|||
remark:'', |
|||
isSum:true, |
|||
disabled:true |
|||
},{ |
|||
index:'', |
|||
ttAbstractLeft:'调整后余额', |
|||
ttBalanceLeft:'', |
|||
remark:'', |
|||
isSum:true |
|||
}]) |
|||
watch( |
|||
() => bottomLeftTableData.value, |
|||
() => { |
|||
//调整事项合计左 |
|||
bottomLeftSumTableData.value[0].ttBalanceLeft = bottomLeftTableData.value.reduce((prev, item1) => prev + Number(item1['ttBalanceLeft']),0) |
|||
console.log('调整事项合计左',bottomLeftTableData) |
|||
//调整后余额左 |
|||
// bottomLeftSumTableData.value[0].ttBalanceLeft = |
|||
|
|||
}, |
|||
{ |
|||
deep: true |
|||
} |
|||
) |
|||
const bottomRightSumTableData = ref([{ |
|||
index:'', |
|||
ttAbstractRight:'调整事项合计', |
|||
ttBalanceRight:'', |
|||
remark:'', |
|||
isSum:true, |
|||
disabled:true |
|||
},{ |
|||
index:'', |
|||
ttAbstractRight:'调整后余额', |
|||
ttBalanceRight:'', |
|||
remark:'', |
|||
isSum:true |
|||
}]) |
|||
const leftForm = ref({ |
|||
name:'', |
|||
date:'' |
|||
}) |
|||
const rightForm = ref({ |
|||
name:'', |
|||
date:'' |
|||
}) |
|||
|
|||
const dialogVisible = ref(false) |
|||
const open = ()=>{ |
|||
dialogVisible.value = true |
|||
} |
|||
const saveData = async ()=>{ |
|||
// 保存 |
|||
let myData = unref(props.rowData) |
|||
// [ |
|||
// { |
|||
// masterId:myData.masterId, |
|||
// ttAbstractLeft:'摘要左',//摘要左 |
|||
// ttBalanceLeft:'金额左',//金额左 |
|||
// ttAbstractRight:'摘要右',//摘要右 |
|||
// ttBalanceRight:'金额右',//金额右 |
|||
// } |
|||
// ] |
|||
let subList = bottomLeftTableData.value.map((item,index)=>({ |
|||
masterId:myData.id, |
|||
ttAbstractLeft:item.ttAbstractLeft, |
|||
ttBalanceLeft:item.ttBalanceLeft, |
|||
ttAbstractRight:bottomRightTableData.value[index].ttAbstractRight, |
|||
ttBalanceRight:bottomRightTableData.value[index].ttBalanceRight, |
|||
})) |
|||
let data = { |
|||
id:myData.id, |
|||
subList, |
|||
ttAdjustmentTotalLeft:bottomLeftSumTableData.value[0].ttBalanceLeft,//调整事项合计左 |
|||
ttAdjustmentBalLeft:bottomLeftSumTableData.value[1].ttBalanceLeft,//调整后余额左 |
|||
ttOperatorLeft:leftForm.value.name,//经办人左 |
|||
ttDzDateLeft:leftForm.value.date,//对账日期左 |
|||
ttAdjustmentTotalRight:bottomRightSumTableData.value[0].ttBalanceRight,//调整事项合计右 |
|||
ttAdjustmentBalRight:bottomRightSumTableData.value[1].ttBalanceRight,//调整后余额右 |
|||
ttOperatorRight:rightForm.value.name,//经办人右 |
|||
ttDzDateRight:rightForm.value.date,//对账日期右 |
|||
} |
|||
await SupplierApbalanceMainApi.updateSupplierApbalanceMain(data) |
|||
message.success(t('common.updateSuccess')) |
|||
console.log('保存数据',saveData) |
|||
emit('updateList') |
|||
} |
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'updateList', |
|||
]) |
|||
defineExpose({open,saveData}) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.top{ |
|||
margin-bottom: 20px |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue