Files
geg-gas-web/src/views/inventory/LngInventoryIn/components/createForm.vue
‘huanghaiixia’ 78e5b928cc 入库优化
2026-03-24 10:30:47 +08:00

533 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-spin :spinning="spinning" tip="加载中...">
<div class="page-bg-wrap formViewStyle pdcss">
<div class="top-toolbar" >
<a-button style="margin-right: 10px" @click="close">
<slot name="icon"><close-outlined /></slot>关闭
</a-button>
<template v-if="pageType!=='view'">
<a-button style="margin-right: 10px" type="primary" @click="handleSubmit">
<slot name="icon"><save-outlined /></slot>保存
</a-button>
</template>
</div>
<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="comId">
<a-select v-model:value="formState.comId" :disabled="isDisable || pageType" placeholder="请选择" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.comIdList" :key="item.value" :value="item.value">
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="接收站" name="staName">
<a-input-search v-model:value="formState.staName" :disabled="isDisable || pageType" placeholder="请选择接收站" readonly @search="onSearchStation"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库存类型" name="typeCode">
<a-select v-model:value="formState.typeCode" :disabled="isDisable||pageType" placeholder="请选择" @change="typeCodeChange" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.typeCodeList" :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="ssNo">
<a-input-search v-model:value="formState.ssNo" :disabled="Boolean(isDisable||pageType||formState.typeCode!=='CQ' ) " placeholder="请选择" readonly @search="onSearchShip"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="采购合同" name="kName">
<a-input-search v-model:value="formState.kName" :disabled="isDisable||formState.typeCode=='CQ'||formState.dataSource" placeholder="请选择合同" readonly @search="onContract"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="供应商" name="suName">
<a-input-search v-model:value="formState.suName" disabled/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库" name="dateIn">
<a-date-picker :inputReadOnly="true" v-model:value="formState.dateIn" style="width: 100%" :disabled="isDisable||formState.dataSource" placeholder="请选择日期" />
</a-form-item>
</a-col>
</a-row>
</Card>
<Card title="" :bordered="false" >
<a-row>
<a-col :span="8">
<a-form-item label="卸港热值(MMBtu)" name="qtyUnloadMmbtu">
<input-number v-model:value="formState.qtyUnloadMmbtu" :disabled="isDisable||formState.dataSource" :digits="3" :min="0" @change="numCount('qtyUnloadMmbtu')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="卸港热值(吉焦)" name="qtyUnloadGj">
<input-number v-model:value="formState.qtyUnloadGj" :disabled="isDisable||formState.dataSource" :digits="3" :min="0" @change="numCount('qtyUnloadGj')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="卸港重量(吨)" name="qtyUnloadTon">
<input-number v-model:value="formState.qtyUnloadTon" :disabled="isDisable||formState.dataSource" :digits="3" :min="0" @change="numCount('qtyUnloadTon')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="卸港体积(标方)" name="qtyUnloadM3L">
<input-number v-model:value="formState.qtyUnloadM3L" :disabled="isDisable||formState.dataSource" :digits="3" :min="0" @change="numCount('qtyUnloadM3L')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="卸港体积(方)" name="qtyUnloadM3">
<input-number v-model:value="formState.qtyUnloadM3" :disabled="isDisable||formState.dataSource" :digits="3" :min="0" @change="numCount('qtyUnloadM3')" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="损耗比例%" name="rateLost">
<input-number v-model:value="formState.rateLost" :disabled="isDisable" :digits="3" :min="0" @change="numCount('rateLost')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="损耗热值(MMBtu)" name="qtyLostMmbtu">
<input-number v-model:value="formState.qtyLostMmbtu" :disabled="isDisable" :digits="3" :min="0" @change="numCount('qtyLostMmbtu')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="损耗热值(吉焦)" name="qtyLostGj">
<input-number v-model:value="formState.qtyLostGj" :disabled="isDisable" :digits="3" :min="0" @change="numCount('qtyLostGj')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="损耗重量(吨)" name="qtyLostTon">
<input-number v-model:value="formState.qtyLostTon" :disabled="isDisable" :digits="3" :min="0" @change="numCount('qtyLostTon')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="损耗体积(标方)" name="qtyLostM3L">
<input-number v-model:value="formState.qtyLostM3L" :disabled="isDisable" :digits="3" :min="0" @change="numCount('qtyLostM3L')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="损耗体积(方)" name="qtyLostM3">
<input-number v-model:value="formState.qtyLostM3" :disabled="isDisable" :digits="3" :min="0" @change="numCount('qtyLostM3')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库热值(MMBtu)" name="qtyMmbtu">
<input-number v-model:value="formState.qtyMmbtu" disabled :digits="3" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库热值(吉焦)" name="qtyGj">
<input-number v-model:value="formState.qtyGj" disabled :digits="3" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库重量(吨)" name="qtyTon">
<input-number v-model:value="formState.qtyTon" disabled :digits="3" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库体积(标方)" name="qtyM3L">
<input-number v-model:value="formState.qtyM3L" disabled :digits="3" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库体积(方)" name="qtyM3">
<input-number v-model:value="formState.qtyM3" disabled :digits="3" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
</Card>
<Card title="" :bordered="false" >
<a-row>
<a-col :span="8">
<a-form-item label="结算币种" name="currCode">
<a-select v-model:value="formState.currCode" :disabled="isDisable||formState.opsId" placeholder="请选择币种" style="width: 100%" allow-clear>
<a-select-option v-for="item in optionSelect.curCodeList" :key="item.code" :value="item.code">
{{ item.fullName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="结算币种单价(/MMBtu)" name="priceMmbtu">
<input-number v-model:value="formState.priceMmbtu" :disabled="isDisable" :digits="3" :min="0" @change="numCount('priceMmbtu')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="结算币种金额" name="amountCurr">
<input-number v-model:value="formState.amountCurr" :disabled="isDisable" :digits="2" :min="0" @change="numCount('amountCurr')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="购汇汇率" name="rateExPur">
<input-number v-model:value="formState.rateExPur" :disabled="isDisable" :digits="3" :min="0" @change="numCount('rateExPur')" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库金额/纯货值(元)" name="amount">
<input-number v-model:value="formState.amount" :disabled="isDisable" :digits="2" :min="0" @change="numCount('amount')" style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-item label="入库价格(元/吨)" name="priceTon">
<input-number v-model:value="formState.priceTon" :disabled="isDisable" :digits="4" :min="0" style="width: 100%" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="入库价格(元/吉焦)" name="priceGj">
<input-number v-model:value="formState.priceGj" :disabled="isDisable" :digits="4" :min="0" style="width: 100%" />
</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" :maxLength="200" placeholder="请输入内容最多200字" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-item>
</a-col>
</a-row>
</Card>
<Card title="附件信息" :bordered="false" >
<UploadList :disabled="isDisable" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
</Card>
</a-form>
</div>
<contractPurLngListModal @register="registerContractPurLng" @success="handleSuccessContractPurLng"/>
<lngStationModal @register="registerStation" @success="handleSuccessStation"/>
<OpsPurIntListModal @register="registerShip" @success="handleSuccessShip" :defaultDateType="true"/>
</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 { SendOutlined, SaveOutlined, CloseOutlined, } from '@ant-design/icons-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 { addLngInventoryIn,updateLngInventoryIn, getLngInventoryIn,getLngInventoryInShip} from '/@/api/inventory/LngInventoryIn';
import { getAllCurrency } from '/@/api/contract/ContractFact';
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 contractPurLngListModal from '/@/components/common/contractPurLngListModal.vue';
import lngStationModal from '/@/components/common/lngStationModal.vue';
import { getAllCom} from '/@/api/contract/ContractPurInt';
import OpsPurIntListModal from '/@/components/common/OpsPurIntListModal.vue';
import { getLngOpsPurInt} from '/@/api/ship/OpsPurInt';
const tableName = 'LngInventoryIn';
const columnName = 'LngInventoryIn'
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 pageSource = ref(currentRoute.value.query?.pageSource)
const spinning = ref(false);
const { notification } = useMessage();
const { t } = useI18n()
const formState = reactive({
approCode: 'WTJ',
typeCode: 'CQ',
catCode: 'LNG'
});
const [register, { openModal:openModal}] = useModal();
const [registerContractPurLng, { openModal:openModalContractPurLng}] = useModal();
const [registerStation, { openModal:openModalStation}] = useModal();
const [registerShip, { openModal:openModalShip}] = useModal();
const rules= reactive({
comId: [{ required: true, message: "该项为必填项", trigger: 'change' }],
ssTypeCode: [{ required: true, message: "该项为必填项", trigger: 'change' }],
typeCode: [{ required: true, message: "该项为必填项", trigger: 'change' }],
kName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
staName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
dateIn: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyUnloadMmbtu: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyUnloadGj: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyUnloadTon: [{ required: true, message: "该项为必填项", trigger: 'change' }],
rateLost: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyLostMmbtu: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyLostGj: [{ required: true, message: "该项为必填项", trigger: 'change' }],
qtyLostTon: [{ required: true, message: "该项为必填项", trigger: 'change' }],
});
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
}
const dataFile = ref([]);
let optionSelect= reactive({
comIdList: [],
typeCodeList: [],
curCodeList: [],
});
watch(
() => props.id,
(val) => {
if (val) {
getInfo(val)
}
},
{
immediate: true
}
);
watch(
() => props.disabled,
(val) => {
isDisable.value = val
},
{
immediate: true
}
);
onMounted(() => {
isDisable.value = pageType.value == 'view'
getOption()
if (pageId.value) {
getInfo(pageId.value)
} else {
getOptionParams()
}
});
const uploadListChange = (val) => {
dataFile.value = val
}
async function getInfo(id) {
spinning.value = true
try {
let data = await getLngInventoryIn(id)
spinning.value = false
Object.assign(formState, {...data})
Object.assign(dataFile.value, formState.lngFileUploadList || [])
formState.dateIn = formState.dateIn ? dayjs(formState.dateIn) : null
getOptionParams()
} catch (error) {
spinning.value = false
}
}
async function getOption() {
optionSelect.approCodeList = await getDictionary('LNG_APPRO')
optionSelect.typeCodeList = await getDictionary('LNG_INV_I')
let res = await getAllCom() || []
optionSelect.comIdList = res.map(v=> {
return {
label: v.shortName,
value: v.id
}
})
}
async function getOptionParams() {
optionSelect.curCodeList = await getAllCurrency({eid: formState.currCode})
}
const typeCodeChange = (val) => {
if (val == 'ZN') {
formState.opsId = ''
formState.ssId = ''
formState.ssNo = ''
formState.kId = ''
formState.kName = ''
formState.suCode = ''
formState.suName = ''
rules.kName = [{ required: true, message: "该项为必填项", trigger: 'change' }]
} else {
rules.kName = [{ required: false, message: "该项为必填项", trigger: 'change' }]
}
}
const numCount = (k) => {
formState.qtyLostMmbtu = Number(formState.qtyUnloadMmbtu || 0)*Number(formState.rateLost || 0)/100
formState.qtyLostGj = Number(formState.qtyUnloadGj || 0)*Number(formState.rateLost || 0)/100
formState.qtyLostTon = Number(formState.qtyUnloadTon || 0)*Number(formState.rateLost || 0)/100
formState.qtyLostM3L = Number(formState.qtyUnloadM3L || 0)*Number(formState.rateLost || 0)/100
formState.qtyLostM3 = Number(formState.qtyUnloadM3 || 0)*Number(formState.rateLost || 0)/100
formState.qtyMmbtu = Number(formState.qtyUnloadMmbtu || 0) - Number(formState.qtyLostMmbtu || 0)
formState.qtyGj = Number(formState.qtyUnloadGj || 0) - Number(formState.qtyLostGj || 0)
formState.qtyTon = Number(formState.qtyUnloadTon || 0) - Number(formState.qtyLostTon || 0)
formState.qtyM3L = Number(formState.qtyUnloadM3L || 0) - Number(formState.qtyLostM3L || 0)
formState.qtyM3 = Number(formState.qtyUnloadM3 || 0) - Number(formState.qtyLostM3 || 0)
formState.amountCurr = Number(formState.qtyMmbtu || 0)*Number(formState.priceMmbtu || 0)
formState.amount = Number(formState.amountCurr || 0) * Number(formState.rateExPur || 0)
formState.priceTon = Number(formState.qtyTon) ? Number(formState.amount || 0)/Number(formState.qtyTon) : 0
formState.priceGj = Number(formState.qtyGj) ? Number(formState.amount || 0)/Number(formState.qtyGj) : 0
}
const onSearchShip = () => {
openModalShip(true,{isUpdate: false})
}
const onSearchStation = (val)=> {
openModalStation(true,{isUpdate: false})
}
const onContract = (val)=> {
openModalContractPurLng(true,{isUpdate: false})
}
const handleSuccessStation = (val) => {
formState.staCode = val[0].code
formState.staName = val[0].fullName
}
const handleSuccessShip = (val) => {
formState.ssNo = val[0].ssNo
formState.opsId = val[0].id
getLngOpsPurIntInfo(val[0].id)
}
const getLngOpsPurIntInfo = async (id) => {
try {
spinning.value = true
let data = await getLngOpsPurInt(id)
let res = await getLngInventoryInShip(id) || []
spinning.value = false
formState.ssNo = data.ssNo
formState.opsId = data.id
formState.ssId = data.id
formState.comId = data.comId
formState.staCode = data.staCode
formState.staName = data.staName
formState.kId = data.kId
formState.kName = data.kName
formState.suCode = data.suCode
formState.suName = data.suName
formState.dateIn = data.dateEta ? dayjs(data.dateEta) : null
formState.currCode = data.curCode
formState.priceMmbtu = data.priceCurr
formState.amountCurr = data.amountCurr
formState.rateExPur = data.rateEx
formState.qtyUnloadMmbtu = res[0]?.qtyMmbtu
formState.qtyUnloadTon = res[0]?.qtyTon
formState.qtyUnloadM3L = res[0]?.qtyM3L
formState.qtyUnloadM3 = res[0]?.qtyM3
formState.qtyUnloadGj = res[0]?.qtyGj
numCount()
if (pageSource.value) {
getOptionParams()
}
} catch (error) {
spinning.value = false
}
}
const handleSuccessContractPurLng = (val) => {
formState.kId = val[0].id
formState.kName = val[0].kName
formState.comId = val[0].comId
formState.suCode = val[0].suCode
formState.suName = val[0].suSname
}
function close() {
tabStore.closeTab(currentRoute.value, router);
}
async function getFormValue() {
return formState
}
async function handleSubmit(type) {
try {
await formRef.value.validateFields();
let obj = {
...formState,
lngFileUploadList: dataFile.value,
}
spinning.value = true;
let request = !formState.id ? addLngInventoryIn :updateLngInventoryIn
try {
const data = await request(obj);
notification.success({
message: '提示',
description: data?.id ? t('新增成功!') : t('修改成功!')
}); //提示消息
setTimeout(() => {
bus.emit(FORM_LIST_MODIFIED, {});
close();
}, 500);
} finally {
spinning.value = false;
}
} catch (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;
}
.pdcss {
padding:0px 12px 6px 12px !important;
}
:deep(.formItemWarp .ant-form-item-label > label) {
white-space: normal !important;
word-break: break-word !important;
}
</style>