<template>
<div >
<EdaSearch
v-show="showSearch"
:SeacrhConditions="searchOptions"
@onSubmit="handleQuery"
@onReset="resetQuery"
style="margin-bottom: 16px;"
>
</EdaSearch>
<EdaCard >
<!-- <EdaOptTool>
<template v-slot:btns>
<el-button type="primary" class="btn" @click="handleAdd">
{{$t('common.add')}}
</el-button>
</template>
</EdaOptTool> -->
<el-table v-loading="loading" :data="configList">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="账单编号" align="left" prop="soNo" width="100">
<template #default="scope">
<el-popover
trigger="hover"
:content="scope.row.soNo"
>
<template #reference>
<el-button type="text" @click="handleDetail(scope.row)"> {{filter(scope.row.soNo)}}</el-button>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="供应商" align="left" width="120">
<template #default="scope">
{{ scope.row.supplierName || "-"}}
</template>
</el-table-column>
<el-table-column label="服务类型" align="left" prop="currency" width="100">
<template #default="scope">
{{ scope.row.shipName || "-"}}
</template>
</el-table-column>
<el-table-column label="账单周期" align="left" prop="startRegionName" width="100">
<template #default="scope">
{{scope.row.startRegionName }}
</template>
</el-table-column>
<el-table-column label="时间范围" align="left" prop="endRegionName">
<template #default="scope">
{{scope.row.endRegionName || "-"}}
</template>
</el-table-column>
<el-table-column label="已确认|总明细" align="left" width="120">
<template #default="scope">
<div>{{ scope.row.supplierName || "-"}}</div>
<div>{{ scope.row.shipownerName || "-"}}</div>
</template>
</el-table-column>
<el-table-column label="账单金额" align="left" width="100">
<template #default="scope">
{{ scope.row.shipownerName || "-"}}
</template>
</el-table-column>
<el-table-column label="已核销金额" align="left" prop="currency" width="100">
<template #default="scope">
{{ scope.row.supplierName || "-"}}
</template>
</el-table-column>
<el-table-column label="待付款金额" align="left" prop="endRegionName" width="100">
<template #default="scope">
{{ scope.row.supplierName || "-"}}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="currency">
<template #default="scope">
{{ scope.row.supplierName || "-"}}
</template>
</el-table-column>
<el-table-column label="应付日期" align="center" prop="currency">
<template #default="scope">
{{ scope.row.supplierName || "-"}}
</template>
</el-table-column>
<el-table-column :label="$t('common.status')" align="center" prop="status">
<template #default="scope">
<dict-tag :options="resource_pool_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column :label="$t('common.operation')" fixed="right" align="left" width="150" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
type="text"
@click="handleEdit(scope.row)"
v-hasPermi="['system:post:edit']"
>{{$t('common.edit')}}</el-button>
<el-button
type="text"
@click="handleOffer(scope.row)"
v-hasPermi="['system:post:edit']"
>申请付款</el-button>
<el-button
type="text"
v-hasPermi="['system:post:edit']"
>导出</el-button>
<el-button
type="text"
v-hasPermi="['system:post:edit']"
>回退</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</EdaCard>
<!-- 申请付款 -->
<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false">
<el-form :model="form" ref="offerRef" :rules="rules" v-loading="loading">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('pool.estimatedDepartureTime') + ':'" prop="departureTime">
<span>{{$filter.date(form.departureTime) || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="S/O NO.:" prop="soNo">
<span>{{form.soNo || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label="$t('pool.shipName') + ':'" prop="shipName">
<span>{{form.shipName || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="可用库存:" prop="availableStock">
<span>{{form.availableStock || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label="$t('common.currency') + ':'" prop="currency">
<el-select v-model="form.currency" placeholder="请选择" clearable >
<el-option
v-for="dict in currency_code"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table v-loading="loading" :data="creditLimiList">
<el-table-column :label="$t('common.cubeType')" align="center" prop="boxSize" width="100">
<template #default="scope">
<dict-tag :options="box_size" :value="scope.row.boxSize" />
</template>
</el-table-column>
<el-table-column :label="$t('pool.itemName')" align="center" prop="billingId" width="180">
<template #default="scope">
<el-select v-model="scope.row.billingId" >
<el-option
v-for="dict in billingList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column :label="$t('pool.itemCode')" align="center" prop="billingCode">
<template #default="scope">
<el-select v-model="scope.row.billingId" :disabled="true">
<el-option
v-for="dict in billingList"
:key="dict.value"
:label="dict.billingCode"
:value="dict.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column :label="$t('common.price')" align="center" prop="referencePrice" width="150">
<template #default="scope">
<el-input v-model="scope.row.referencePrice" @input="scope.row.referencePrice = scope.row.referencePrice.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/g,'$1$2$3')" maxlength="11"></el-input>
</template>
</el-table-column>
<el-table-column :label="$t('common.currency')" align="center" prop="currency" >
{{form.currency || '-' }}
</el-table-column>
<el-table-column :label="$t('common.operation')" fixed="right" width="100" class-name="small-padding fixed-width">
<template #default="scope">
<el-button @click="deleteRow(scope.$index, creditLimiList)" type="text">{{$t('common.delete')}}</el-button>
</template>
</el-table-column>
</el-table>
<div class="addstyle" @click="addRow()">
<span style="color:#007BFF" >+{{$t('common.add')}}</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">{{$t('common.save')}}</el-button>
<el-button @click="cancel">{{$t('common.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="billsPayable">
import { getToken } from "@/utils/auth";
import { listResourcePool,supplierSource,lockedInventory,getInquiry,editInquiry,addInquiry,allBilling} from "@/api/resources/pool";
import { useI18n } from "vue-i18n"
import moment from 'moment'
const { t } = useI18n();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { box_size } = proxy.useDict("box_size");
const { resource_pool_status } = proxy.useDict("resource_pool_status");
const { currency_code } = proxy.useDict("currency_code");
/*** 资源池导入参数 */
const upload = reactive({
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: import.meta.env.VITE_APP_BASE_API + "/trading/product/resource/pool/import"
});
const optionProps = {
value:'regionId',
label:'regionName',
children:'regionInfoDtoList',
};
const existBillingId = ref(true);
const LockedData = ref([]); //已锁定库存数据
const billingList = ref([]);//计费项数据
const configList = ref([]);
const creditLimiList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
form: {},
rules: {
currency: [{ required: true, message: '请选择货币类型', trigger: "blur" }],
},
queryParams: {
pageNum: 1,
pageSize: 10,
soNo: undefined,
startRegionId: undefined,
endRegionId:undefined,
// departureTime: undefined,
// arrivalTime: undefined,
// boxSize:undefined,
shipName: undefined,
// supplierId: undefined,
shipownerId:undefined,
status: undefined,
},
searchOptions:([
{prop:'soNo', value: '', type:'input', label:'账单编号', col: 1, selectArray:[], },
{prop:'supplierIds', value: '', type:'select', label:t('common.supplier'), col: 1, selectArray:[],multiple:true, },
{prop:'arrivalTime', value: '', type:'dateRange', label:"应付日期", col: 1,valueFormat:'x' },
{prop:'status', value: '', type:'select', label:t('common.status'), col: 1, selectArray:[], },
{prop:'startRegionId', value: '', type:'select', label:"账单周期", col: 1, selectArray:[], },
])
});
const { queryParams, form, rules,searchOptions } = toRefs(data);
//新增
function handleAdd(){
router.push('/product/pool/add/index')
}
//编辑
function handleEdit(row){
const soNo = row.soNo ;
router.push({ path: "/finance/payable/billsPayable/edit/index", query: { soNo: soNo } });
}
//详情
function handleDetail(row){
const soNo = row.soNo ;
router.push({ path: "/finance/payable/billsPayable/detail/index", query: { soNo: soNo } });
}
/** 查询账户列表 */
function getList() {
loading.value = true;
listResourcePool(queryParams.value).then(response => {
configList.value = response.rows;
total.value = response.total;
loading.value = false;
})
.catch(() => {
configList.value = [];
total.value = 0;
loading.value = false;
});
}
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
/** 表单重置 */
function reset() {
// proxy.resetForm("customerRef");
}
/** 搜索按钮操作 */
function handleQuery(params) {
queryParams.value.pageNum = 1;
if(params.arrivalTime){
params.arrivalTimeStart = new Date(params.arrivalTime[0]).getTime()
params.arrivalTimeEnd = new Date(params.arrivalTime[1]).getTime()
}
if(!params.arrivalTime){
params.arrivalTimeStart = ''
params.arrivalTimeEnd = ''
}
queryParams.value = {...queryParams.value,...params};
params.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
//字符串超出部分显示省略。。。
function filter(value){
if (!value) return '-'
if (value.length > 10) {
return value.slice(0,8) + '...'
}
return value
}
/** 导出操作 */
function handleExport() {
proxy.download("trading/product/resource/pool/export", {
...queryParams.value,
}, `resource_${new Date().getTime()}.xlsx`);
}
/** 申请付款 */
function handleOffer(row) {
form.value = {
customerCode:row.customerCode,
departureTime:row.departureTime,
soNo:row.soNo,
shipName:row.shipName,
startRegionId:row.startRegionId,
endRegionId:row.endRegionId,
supplierId:row.supplierId
}
getInquiry(form.value).then(response => {
creditLimiList.value = response.data.billingDTOList;
open.value = true;
title.value = '申请付款';
});
}
/** 申请付款 提交按钮 */
function submitForm() {
creditLimiList.value.forEach(item=>{
item.referencePrice = Number(item.referencePrice)
if(!item.billingId){
existBillingId.value = false //判断计费项是否已选
}
else{
existBillingId.value = true
}
})
let obj = {
billingDTOList: creditLimiList.value,
customerCode:form.value.customerCode,
departureTime:form.value.departureTime,
soNo:form.value.soNo,
shipName:form.value.shipName,
currency:form.value.currency,
boxSize:form.value.boxSize,
availableStock:form.value.availableStock,
shippingResourcePoolId: form.value.shippingResourcePoolId,
startRegionId:form.value.startRegionId,
endRegionId:form.value.endRegionId,
supplierId:form.value.supplierId
}
proxy.$refs["offerRef"].validate(valid =>{
if(valid){
if(!creditLimiList.value.length){
return proxy.$modal.msgError('至少维护一个箱型的单舱报价');
}
if(!existBillingId.value){
return proxy.$modal.msgError('计费项不能为空');
}
if(form.value.addOrEdit === null){
addInquiry(obj).then(response => {
proxy.$modal.msgSuccess(t('common.success'));
open.value = false;
getList();
});
}
else{
editInquiry(obj).then(response => {
proxy.$modal.msgSuccess(t('common.success'));
open.value = false;
getList();
});
}
}
})
}
/** 删除按钮操作 */
function deleteRow(index, rows) {
rows.splice(index, 1);
}
/** 新增一行 */
function addRow(){
let obj = {
boxSize:form.value.boxSize,
billingId:undefined,
billingCode:undefined,
billingName:undefined,
currency:form.value.currency,
referencePrice:0,
};
creditLimiList.value.push(obj)
}
/** 获取供应商 */
function getSupplier(){
supplierSource().then(response=>{
let supplierData = response
supplierData.forEach(item=>{
item.key = item.supplierId;
item.label = item.supplierName;
item.value = item.supplierId
})
searchOptions.value[1].selectArray = supplierData
})
}
/** 获取已锁定库存 */
function getlockedInventory(el){
let obj = {
// resourcePoolId:"1526160046991126530",
resourcePoolId:el.shippingResourcePoolId
}
lockedInventory(obj).then(response=>{
LockedData.value = response.data
})
}
/** 获取计费项 */
function getBilling(){
allBilling().then(response=>{
let billingData = response
billingData.forEach(item=>{
item.key = item.billingId;
item.label = item.billingNameZh;
item.value = item.billingId
item.billingCode = item.billingCode
})
billingList.value = billingData
})
}
onMounted(() => {
searchOptions.value[4].selectArray = box_size //箱型
searchOptions.value[3].selectArray = resource_pool_status //状态
})
getBilling()
getSupplier();
getList();
</script>
<style scoped>
.addstyle{
border: 1px solid #C6CFDC;
border-radius: 4px;
height: 32px;
min-width: 700px;
margin: 14px;
text-align: center;
line-height: 32px;
}
.el-dialog .el-form-item--default {
flex-direction: row;
margin-left: 5px;
}
.boxSize{
display:flex;
/* border-bottom:1px solid #EBF0F5; */
height:100%;
width: 150%;
padding-bottom: 5px;
padding-top: 5px;
}
.referencePriceSize{
display:flex;
/* border-bottom:1px solid #EBF0F5;
*/
height:100%;
width: 150%;
}
</style>