<template>
|
<basicContainer>
|
<avue-crud
|
:option="option"
|
:table-loading="pageF.loading"
|
:data="tableData"
|
:page="page"
|
:permission="permissionList"
|
:before-open="beforeOpen"
|
v-model="form" v-model:search="queryParams"
|
ref="crudRef"
|
@row-update="rowUpdate"
|
@row-save="rowSave"
|
@refresh-change="refreshChange"
|
@row-del="rowDel"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@on-load="onLoad"
|
>
|
<template #menu-left>
|
<!-- <el-button-->
|
<!-- type="success"-->
|
<!-- icon="Edit"-->
|
<!-- :disabled="pageF.single"-->
|
<!-- v-hasPermi="['tms:tmsApBill:edit']"-->
|
<!-- @click="handleUpdate">修改-->
|
<!-- </el-button>-->
|
<!-- <el-button-->
|
<!-- type="danger"-->
|
<!-- icon="Delete"-->
|
<!-- :disabled="pageF.multiple"-->
|
<!-- @click="handleDelete"-->
|
<!-- v-hasPermi="['tms:tmsApBill:remove']"-->
|
<!-- >删除-->
|
<!-- </el-button>-->
|
<el-button
|
type="warning"
|
plain
|
icon="Download"
|
@click="handleExport"
|
v-hasPermi="['tms:tmsApBill:export']"
|
>导出
|
</el-button>
|
</template>
|
<template #menu="{row}">
|
<el-link size="small" type="primary" v-if="row.status != 2"
|
@click="handleJs(row)" class="link-btn" :underline="false"
|
icon="el-icon-tickets">结算
|
</el-link>
|
<el-link size="small" type="primary" v-if="row.status == 0"
|
@click="handleEdit(row)" class="link-btn" :underline="false"
|
icon="el-icon-edit">账单确认
|
</el-link>
|
<el-link size="small" type="primary"
|
@click="handleView(row)" class="link-btn" :underline="false"
|
icon="el-icon-view">查看
|
</el-link>
|
<el-link size="small" type="primary"
|
@click="handleLog(row)" class="link-btn" :underline="false"
|
icon="el-icon-tickets">日志
|
</el-link>
|
</template>
|
</avue-crud>
|
|
<el-dialog :title="pageF.title" v-model="pageF.open" class="avue-dialog avue-dialog--top" width="80%">
|
|
<avue-form v-if="opt == 'js'" v-model="boxForm" ref="boxFormRef"
|
:option="boxFormOption">
|
<template #settleAmount>
|
<avue-input-number :min="0" :max="form.actualSettlementAmount" v-model="boxForm.settleAmount" placeholder="请输入结算金额"></avue-input-number>
|
|
</template>
|
</avue-form>
|
<el-descriptions :column="3" title="账单基本信息" border>
|
<el-descriptions-item label="账单系统编号">{{form.systemNo}}</el-descriptions-item>
|
<el-descriptions-item label="账单名称">
|
<div v-if="opt === 'edit'">
|
<el-input v-model="form.billName" placeholder="请输入账单名称" />
|
</div>
|
<div v-else>{{form.billName}}</div>
|
</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{form.customerName}}</el-descriptions-item>
|
<el-descriptions-item label="应结算金额">{{form.settleAmount}}</el-descriptions-item>
|
<el-descriptions-item label="减免金额">
|
<div v-if="opt === 'edit'">
|
<el-input-number :max="form.settleAmount" v-model="form.deductionAmount" placeholder="请输入减免金额" @change="deductionAmountChange" />
|
</div>
|
<div v-else>{{form.deductionAmount}}</div>
|
</el-descriptions-item>
|
<el-descriptions-item label="实际结算金额" v-if="opt == 'edit'">{{form.actualSettlementAmount}}</el-descriptions-item>
|
<el-descriptions-item label="减免原因" v-if="opt == 'edit'">
|
<div v-if="opt === 'edit'">
|
<el-input v-model="form.reasonReduction" placeholder="请输入减免原因" />
|
</div>
|
<div v-else>{{form.reasonReduction}}</div></el-descriptions-item>
|
<el-descriptions-item label="已结算金额" v-if="opt == 'js'">{{form.settledAmount}}</el-descriptions-item>
|
<el-descriptions-item label="待结算金额" v-if="opt == 'js'">{{Number(form.settleAmount) - Number(form.settledAmount)}}</el-descriptions-item>
|
</el-descriptions>
|
<h3>关联明细</h3>
|
<avue-crud
|
:option="YSGenerateTableOption" ref="itemsTableRef"
|
:data="form.items"
|
>
|
<template #menu="{row}">
|
<el-link size="small" type="primary"
|
@click="handleCancel(row)" class="link-btn" :underline="false"
|
icon="el-icon-close">取消关联
|
</el-link>
|
</template>
|
|
</avue-crud>
|
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" :loading="pageF.isUploading" v-if="opt == 'js'" @click="jsSubmit">确定</el-button>
|
<el-button type="primary" :loading="pageF.isUploading" v-if="opt == 'edit'" @click="editSubmit">确定</el-button>
|
<el-button @click="pageF.open = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog :title="pageF.title" v-model="open2" class="avue-dialog avue-dialog--top" width="80%">
|
|
<avue-crud
|
:option="logTableOption" ref="itemsTableRef2"
|
:data="logTable"
|
>
|
|
</avue-crud>
|
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="open2 = false">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
|
</basicContainer>
|
</template>
|
|
<script setup name="tmsApBill" lang="ts">
|
import {
|
TmsApBillI,
|
addTmsApBill,
|
delTmsApBill,
|
exportTmsApBill,
|
getTmsApBill,
|
listTmsApBill,
|
updateTmsApBill
|
} from "@/api/tms/tmsApBill";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import {computed, reactive, ref, toRefs} from "vue";
|
import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
|
import {usePagePlus} from "@/hooks/usePagePlus";
|
import {hasPermission} from "@/utils/permissionUtils";
|
import {cancelArBill, getTmsArBill} from "@/api/tms/tmsArBill";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
const {proxy} = useCurrentInstance();
|
const crudRef = ref();
|
|
const permissionList = computed(() => {
|
return {
|
addBtn: hasPermission(["tms:tmsApBill:add"]),
|
delBtn: hasPermission(["tms:tmsApBill:remove"]),
|
editBtn: hasPermission(["tms:tmsApBill:edit"]),
|
viewBtn: hasPermission(["tms:tmsApBill:query"]),
|
}
|
})
|
|
const data = reactive({
|
form: <TmsApBillI>{},
|
queryParams: <TmsApBillI & PageQueryInterface>{},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
},
|
selectionList: [],
|
opt: '',
|
boxForm:<any> {},
|
open2: false
|
})
|
const {queryParams, form, page, selectionList,opt,boxForm,open2} = toRefs(data);
|
const option = ref({
|
pageKey: 'TmsApBill',
|
rowKey: 'id',
|
viewBtn: false,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
searchLabelWidth: 120,
|
column: {
|
// id: {
|
// label: '',
|
// addDisplay: true,
|
// editDisplay: false,
|
// viewDisplay: false,
|
// hide: true,
|
// search: false,
|
// },
|
systemNo: {
|
label: '系统编号',
|
hide: false,minWidth:150,
|
search: true,
|
},
|
billName: {
|
label: '账单名称',
|
hide: false,
|
search: true,minWidth:200,
|
},
|
serviceProviderName: {
|
label: '供应商名称',
|
hide: false,
|
search: true,minWidth:200,
|
},
|
dispatchCount: {
|
label: '调度单数量',
|
hide: false,
|
search: false,minWidth:120,
|
},
|
settleAmount: {
|
label: '应结算金额',minWidth:120,
|
hide: false,
|
search: false,
|
},
|
deductionAmount: {
|
label: '减免金额',minWidth:120,
|
hide: false,
|
search: false,
|
},
|
actualSettlementAmount: {
|
label: '实际结算金额',
|
hide: false,
|
search: false,minWidth:120,
|
},
|
settledAmount: {
|
label: '已结算金额',
|
hide: false,
|
search: false,minWidth:120,
|
},
|
|
invoiceStatus: {
|
label: '开票状态',minWidth:120,fixed:'right',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/invoice_status',
|
|
hide: false,
|
search: true,
|
},
|
status: {
|
label: '状态',minWidth:120,fixed:'right',
|
type: 'radio', dataType: 'string', dicUrl: '/system/dict/data/type/ar_bill_status',
|
|
hide: false,
|
search: true,
|
}
|
|
|
}
|
})
|
|
const {
|
tableData,
|
pageF,
|
rowSave,
|
rowUpdate,
|
rowDel,
|
beforeOpen,
|
searchChange,
|
searchReset,
|
selectionChange,
|
onLoad,
|
currentChange,
|
sizeChange,
|
handleDelete,
|
handleExport,
|
handleUpdate,
|
refreshChange
|
} = usePagePlus({
|
form: form,
|
option: option,
|
queryParams: queryParams,
|
idKey: 'id',
|
page: page.value,
|
getListApi: listTmsApBill,
|
getDetailApi: getTmsApBill,
|
exportApi: exportTmsApBill,
|
deleteApi: delTmsApBill,
|
addApi: addTmsApBill,
|
updateApi: updateTmsApBill,
|
handleUpdateFunc: () => {
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc: (selection: any) => {
|
selectionList.value = selection;
|
}
|
})
|
|
const YSGenerateTableOption= ref({
|
menu: true,
|
add: false,
|
header:false,
|
selection: false,
|
rowKey:'id',
|
editBtn:false,
|
viewBtn:false,
|
delBtn: false,
|
column:{
|
|
projectName:{
|
label: '项目名称',
|
},
|
dispatchNo:{
|
label: '调度单号',
|
},
|
orderTime:{
|
label: '下单时间',
|
},
|
|
estimateAmount:{
|
label: '预估应收金额',
|
},
|
currency:{
|
label: '币制',
|
}
|
}
|
})
|
|
|
const boxFormOption = ref({
|
menuBtn: false,
|
labelWidth: 120,
|
column: {
|
|
settleAmount: {
|
label: '本次结算金额',
|
type: 'number',
|
display: true,
|
rules: [
|
{
|
required: true,
|
message: "金额不能为空", trigger: "change"
|
}
|
],
|
},
|
remark: {
|
label: '备注',
|
display: true,
|
},
|
attachment: {
|
label: '附件',
|
display: true,
|
span: 24,
|
accept: 'string', dataType: 'string',
|
type: 'upload',
|
action: '/common/upload2',
|
},
|
|
}
|
})
|
const boxFormRef = ref();
|
const logTableOption= ref({
|
menu: false,
|
add: false,
|
header:false,
|
selection: false,
|
rowKey:'id',
|
|
column:{
|
|
settleAmount:{
|
label: '结算金额',
|
},
|
createBy:{
|
label: '处理人员',
|
},
|
attachment:{
|
label: '附件下载',
|
dataType: 'string',
|
type: 'img'
|
},
|
|
remark:{
|
label: '备注',
|
},
|
createTime:{
|
label: '提交时间',
|
},
|
}
|
})
|
const logTable = ref<any>()
|
|
const handleJs = (row: any) => {
|
|
}
|
|
const handleView = (row: any) => {
|
form.value.items = [];
|
getTmsApBill(row.id).then((res:any) => {
|
form.value = res.data ||{};
|
pageF.open = true;
|
pageF.title = '应付账单确认';
|
opt.value = 'edit'
|
})
|
}
|
const handleLog = (row: any) => {
|
|
}
|
const handleEdit = (row: any) => {
|
form.value.items = [];
|
getTmsApBill(row.id).then((res:any) => {
|
form.value = res.data ||{};
|
pageF.open = true;
|
pageF.title = '应付账单确认';
|
opt.value = 'edit'
|
})
|
}
|
|
const jsSubmit = () => {
|
|
}
|
|
const editSubmit = () => {
|
|
}
|
const deductionAmountChange = (e:any) => {
|
form.value.actualSettlementAmount =(Number(form.value.settleAmount) || 0) -( Number(form.value.deductionAmount) || 0);
|
}
|
const handleCancel = (row:any) => {
|
ElMessageBox.confirm("是否对调度单号" + row.dispatchNo + "的应付费用取消关联？", '系统提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
return cancelArBill(row.id);
|
}).then(() => {
|
onLoad(page.value);
|
ElMessage({
|
message: "操作成功！",
|
type: 'success'
|
})
|
});
|
}
|
</script>
|
