400 lines
15 KiB
Vue
400 lines
15 KiB
Vue
|
<template>
|
||
|
|
<a-spin :spinning="spinning" tip="加载中...">
|
||
|
|
<div class="page-bg-wrap formViewStyle">
|
||
|
|
<a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
|
||
|
|
<Card title="" :bordered="false" >
|
||
|
|
<a-row>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算月" name="settleMonth">
|
||
|
|
<a-date-picker v-model:value="formState.settleMonth" style="width: 100%" picker="month" :disabled="isDisable" placeholder="请选择结算月" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算月开始日期" name="dateFrom">
|
||
|
|
<a-date-picker v-model:value="formState.dateFrom" style="width: 100%" :disabled="isDisable" :disabled-date="disabledDateStart" placeholder="请选择开始日期" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算月结束日期" name="dateTo">
|
||
|
|
<a-date-picker v-model:value="formState.dateTo" style="width: 100%" :disabled="isDisable" :disabled-date="disabledDateEnd" placeholder="请选择结束日期" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="供应商" name="cpName">
|
||
|
|
<a-input-search v-model:value="formState.cpName" :disabled="isDisable || dataList.length" placeholder="请选择供应商" readonly @search="onSearchCustomer"/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="交易主体" name="comId">
|
||
|
|
<a-select v-model:value="formState.comId" :disabled="isDisable || dataList.length" @change="comIdChange" placeholder="请选择" style="width: 100%" allow-clear>
|
||
|
|
<a-select-option v-for="item in optionSelect.comIdList" :key="item.id" :value="item.id">
|
||
|
|
{{ item.name }}
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="账期内含预收付款" name="rpSign">
|
||
|
|
<a-select v-model:value="formState.rpSign" style="width: 100%" allow-clear :disabled="isDisable">
|
||
|
|
<a-select-option v-for="item in optionSelect.signList" :key="item.code" :value="item.code">
|
||
|
|
{{ item.name }}
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算总数量(吉焦)" name="qtySettleGj">
|
||
|
|
<a-input v-model:value="formState.qtySettleGj" disabled/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算总数量(方)" name="qtySettleM3">
|
||
|
|
<a-input v-model:value="formState.qtySettleM3" disabled/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="结算总金额(元)" name="amount">
|
||
|
|
<a-input v-model:value="formState.amount" disabled/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8">
|
||
|
|
<a-form-item label="状态" name="approCode">
|
||
|
|
<a-select v-model:value="formState.approCode" disabled style="width: 100%" allow-clear>
|
||
|
|
<a-select-option v-for="item in optionSelect.approCodeList" :key="item.code" :value="item.code">
|
||
|
|
{{ item.name }}
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24">
|
||
|
|
<a-form-item label="结算说明" name="settleDesc" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
|
||
|
|
<a-textarea v-model:value="formState.settleDesc" :disabled="isDisable" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24">
|
||
|
|
<a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
|
||
|
|
<a-textarea v-model:value="formState.note" :disabled="isDisable" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||
|
|
</a-form-item>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</Card>
|
||
|
|
<Card>
|
||
|
|
<settleSalesPurList :list="dataList" :disabled="isDisable" pageType="supplier" :formState="formState" @change="settleChange"></settleSalesPurList>
|
||
|
|
</Card>
|
||
|
|
<Card title="对账单" :bordered="false" >
|
||
|
|
<UploadList :disabled="isDisable" btnTip="上传对账单" :list="dataFileAccount" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadChange"/>
|
||
|
|
</Card>
|
||
|
|
<Card title="附件信息" :bordered="false" >
|
||
|
|
<UploadList :disabled="isDisable" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
|
||
|
|
</Card>
|
||
|
|
</a-form>
|
||
|
|
</div>
|
||
|
|
<supplierListModal @register="registerSupplier" @success="handleSuccessSupplier" selectType="radio" />
|
||
|
|
|
||
|
|
</a-spin>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { Card } from 'ant-design-vue';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
import { FromPageType, RecordType } from '/@/enums/workflowEnum';
|
||
|
|
import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
|
||
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
||
|
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||
|
|
import useEventBus from '/@/hooks/event/useEventBus';
|
||
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
||
|
|
import { getDictionary } from '/@/api/sales/Customer';
|
||
|
|
import { useModal } from '/@/components/Modal';
|
||
|
|
import { addLngPngSettleHdr,updateLngPngSettleHdr, getLngPngSettleHdr, getLngPngSettleHdrDate} from '/@/api/dayPlan/PngSettleHdrPur';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import { getAppEnvConfig } from '/@/utils/env';
|
||
|
|
import { message } from 'ant-design-vue';
|
||
|
|
import UploadList from '/@/components/Form/src/components/UploadList.vue';
|
||
|
|
import supplierListModal from '/@/components/common/supplierListModal.vue';
|
||
|
|
import settleSalesPurList from '/@/components/common/settleSalesPurList.vue';
|
||
|
|
|
||
|
|
import { getAllCom} from '/@/api/contract/ContractPurInt';
|
||
|
|
import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
|
||
|
|
|
||
|
|
const tableName = 'PngSettleHdr';
|
||
|
|
const columnName = 'PngSettleHdr'
|
||
|
|
|
||
|
|
const formType = ref('2'); // 0 新建 1 修改 2 查看
|
||
|
|
const formRef = ref();
|
||
|
|
const props = defineProps({
|
||
|
|
disabled: false,
|
||
|
|
id: ''
|
||
|
|
|
||
|
|
});
|
||
|
|
const { bus, FORM_LIST_MODIFIED } = useEventBus();
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
const { currentRoute } = router;
|
||
|
|
const isDisable = ref(false);
|
||
|
|
const { formPath } = currentRoute.value.query;
|
||
|
|
const pathArr = [];
|
||
|
|
|
||
|
|
const tabStore = useMultipleTabStore();
|
||
|
|
const formProps = ref(null);
|
||
|
|
const formId = ref(currentRoute.value?.params?.id);
|
||
|
|
const pageType = ref(currentRoute.value.query?.type);
|
||
|
|
const pageId = ref(currentRoute.value.query?.id)
|
||
|
|
|
||
|
|
const spinning = ref(false);
|
||
|
|
const { notification } = useMessage();
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const formState = reactive({
|
||
|
|
approCode: 'WTJ',
|
||
|
|
settleMonth: dayjs(new Date()),
|
||
|
|
settleTypeCode: 'C',
|
||
|
|
rpSign: 'Y'
|
||
|
|
});
|
||
|
|
|
||
|
|
const [registerSupplier, { openModal:openModalCustomer}] = useModal();
|
||
|
|
|
||
|
|
const rules= reactive({
|
||
|
|
settleMonth: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
dateFrom: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
dateTo: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
cpName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
rpSign: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
comId: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
|
|
});
|
||
|
|
const layout = {
|
||
|
|
labelCol: { span: 8 },
|
||
|
|
wrapperCol: { span: 16 },
|
||
|
|
}
|
||
|
|
const dataFile = ref([]);
|
||
|
|
const dataFileAccount = ref([])
|
||
|
|
const dataList = ref([])
|
||
|
|
let optionSelect= reactive({
|
||
|
|
approCodeList: [],
|
||
|
|
comIdList: [],
|
||
|
|
signList: []
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.id,
|
||
|
|
(val) => {
|
||
|
|
if (val) {
|
||
|
|
getInfo(val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
watch(
|
||
|
|
() => props.disabled,
|
||
|
|
(val) => {
|
||
|
|
isDisable.value = val
|
||
|
|
},
|
||
|
|
{
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
);
|
||
|
|
onMounted(() => {
|
||
|
|
getOption()
|
||
|
|
if (pageId.value) {
|
||
|
|
getInfo(pageId.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
const uploadChange = (val) => {
|
||
|
|
dataFileAccount.value = val
|
||
|
|
}
|
||
|
|
const uploadListChange = (val) => {
|
||
|
|
dataFile.value = val
|
||
|
|
}
|
||
|
|
async function getInfo(id) {
|
||
|
|
spinning.value = true
|
||
|
|
try {
|
||
|
|
let data = await getLngPngSettleHdr(id)
|
||
|
|
spinning.value = false
|
||
|
|
Object.assign(formState, {...data})
|
||
|
|
Object.assign(dataFile.value, formState.lngFileUploadList || [])
|
||
|
|
Object.assign(dataFileAccount.value, formState.billList || [])
|
||
|
|
Object.assign(dataList.value, formState.lngPngSettlePurList || [])
|
||
|
|
formState.settleMonth = formState.settleMonth ? dayjs(formState.settleMonth) : null
|
||
|
|
formState.dateFrom = formState.dateFrom ? dayjs(formState.dateFrom) : null
|
||
|
|
formState.dateTo = formState.dateTo ? dayjs(formState.dateTo) : null
|
||
|
|
numFormat()
|
||
|
|
} catch (error) {
|
||
|
|
console.log(error, 'error')
|
||
|
|
spinning.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const numFormat = () => {
|
||
|
|
dataList.value = DataFormat.format(dataList.value, [
|
||
|
|
FormatOption.createQty('qtySettleGj'),
|
||
|
|
FormatOption.createQty('qtySettleM3'),
|
||
|
|
FormatOption.createQty('qtyMeaGj'),
|
||
|
|
FormatOption.createQty('qtyMeaM3'),
|
||
|
|
FormatOption.createAmt('amount'),
|
||
|
|
FormatOption.createQty('priceGj',4),
|
||
|
|
FormatOption.createQty('priceM3',4),
|
||
|
|
]);
|
||
|
|
let obj = {
|
||
|
|
qtySettleGj: formState.qtySettleGj,
|
||
|
|
qtySettleM3: formState.qtySettleM3,
|
||
|
|
amount: formState.amount
|
||
|
|
}
|
||
|
|
let a = DataFormat.format({...obj}, [
|
||
|
|
FormatOption.createQty('qtySettleGj'),
|
||
|
|
FormatOption.createQty('qtySettleM3'),
|
||
|
|
FormatOption.createAmt('amount'),
|
||
|
|
]);
|
||
|
|
formState.qtySettleGj = a.qtySettleGj
|
||
|
|
formState.qtySettleM3 = a.qtySettleM3
|
||
|
|
formState.amount = a.amount
|
||
|
|
}
|
||
|
|
const settleChange = (val) => {
|
||
|
|
dataList.value = val
|
||
|
|
numClear()
|
||
|
|
tableCount()
|
||
|
|
}
|
||
|
|
const numClear = () => {
|
||
|
|
if (!dataList.value.length) {
|
||
|
|
formState.qtySettleGj = ''
|
||
|
|
formState.qtySettleM3 = ''
|
||
|
|
formState.amount = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const tableCount = () => {
|
||
|
|
let qtySettleGj = 0
|
||
|
|
let qtySettleM3 = 0
|
||
|
|
let amount = 0
|
||
|
|
dataList.value.forEach(v => {
|
||
|
|
if (Number(v.settleTimes) == 1){
|
||
|
|
qtySettleGj+=Number((v.qtySettleGj || '').replace(/,/g, '')) || 0
|
||
|
|
qtySettleM3+=Number((v.qtySettleM3 || '').replace(/,/g, '')) || 0
|
||
|
|
}
|
||
|
|
amount+=Number((v.amount || '').replace(/,/g, '')) || 0
|
||
|
|
})
|
||
|
|
formState.qtySettleGj = qtySettleGj.toFixed(3)
|
||
|
|
formState.qtySettleM3 = qtySettleM3.toFixed(3)
|
||
|
|
formState.amount = amount.toFixed(2)
|
||
|
|
numFormat()
|
||
|
|
}
|
||
|
|
const comIdChange = (val) => {
|
||
|
|
if (!val)return
|
||
|
|
getDate()
|
||
|
|
}
|
||
|
|
const getDate=(async () => {
|
||
|
|
let obj = {
|
||
|
|
cpCode: formState.cpCode,
|
||
|
|
comId: formState.comId
|
||
|
|
}
|
||
|
|
if (!pageId.value && formState.cpCode && formState.comId && !formState.dateFrom) {
|
||
|
|
let data = await getLngPngSettleHdrDate(obj) || []
|
||
|
|
if (data.length) {
|
||
|
|
formState.dateFrom = data[0]?.dateTo ? dayjs(data[0]?.dateTo) : null
|
||
|
|
formState.dateTo = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
async function getOption() {
|
||
|
|
optionSelect.approCodeList = await getDictionary('LNG_APPRO')
|
||
|
|
optionSelect.comIdList = await getAllCom() || []
|
||
|
|
optionSelect.signList = await getDictionary('LNG_YN')
|
||
|
|
|
||
|
|
}
|
||
|
|
const disabledDateStart = (startValue) => {
|
||
|
|
const endValue = formState?.dateTo;
|
||
|
|
if (!startValue || !endValue) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return startValue.valueOf() >= endValue.valueOf();
|
||
|
|
}
|
||
|
|
const disabledDateEnd = (endValue) => {
|
||
|
|
const startValue = formState?.dateFrom;
|
||
|
|
if (!endValue || !startValue) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return endValue.valueOf() <= startValue.valueOf();
|
||
|
|
}
|
||
|
|
const onSearchCustomer = () => {
|
||
|
|
openModalCustomer(true,{isUpdate: false})
|
||
|
|
}
|
||
|
|
const handleSuccessSupplier = (val) => {
|
||
|
|
formState.cpCode = val[0].suCode
|
||
|
|
formState.cpName = val[0].suSname
|
||
|
|
getDate()
|
||
|
|
}
|
||
|
|
function close() {
|
||
|
|
tabStore.closeTab(currentRoute.value, router);
|
||
|
|
}
|
||
|
|
async function getFormValue() {
|
||
|
|
return formState
|
||
|
|
}
|
||
|
|
async function handleSubmit(type) {
|
||
|
|
try {
|
||
|
|
await formRef.value.validateFields();
|
||
|
|
dataList.value.forEach(v => {
|
||
|
|
v.settleTypeCode = 'C'
|
||
|
|
})
|
||
|
|
|
||
|
|
let obj = {
|
||
|
|
...formState,
|
||
|
|
lngFileUploadList: dataFile.value,
|
||
|
|
billList: dataFileAccount.value,
|
||
|
|
lngPngSettlePurList: dataList.value,
|
||
|
|
}
|
||
|
|
spinning.value = true;
|
||
|
|
let request = !formState.id ? addLngPngSettleHdr :updateLngPngSettleHdr
|
||
|
|
|
||
|
|
try {
|
||
|
|
const data = await request(obj);
|
||
|
|
// 新增保存
|
||
|
|
if (data?.id) {
|
||
|
|
getInfo(data?.id)
|
||
|
|
}
|
||
|
|
// 同意保存不提示
|
||
|
|
if (!type) {
|
||
|
|
notification.success({
|
||
|
|
message: 'Tip',
|
||
|
|
description: data?.id ? t('新增成功！') : t('修改成功！')
|
||
|
|
}); //提示消息
|
||
|
|
}
|
||
|
|
return data?.id ? data : obj
|
||
|
|
|
||
|
|
} finally {
|
||
|
|
spinning.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (errorInfo) {
|
||
|
|
console.log(errorInfo, 'errorInfo')
|
||
|
|
spinning.value = false;
|
||
|
|
errorInfo?.errorFields?.length && notification.warning({
|
||
|
|
message: '提示',
|
||
|
|
description: '请完善信息'
|
||
|
|
});
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
handleSubmit,
|
||
|
|
getFormValue
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
:deep(.ant-form-item .ant-form-item-label) {
|
||
|
|
width: 135px !important;
|
||
|
|
max-width: 135px !important;
|
||
|
|
}
|
||
|
|
.page-bg-wrap {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-toolbar {
|
||
|
|
min-height: 44px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
</style>
|