yqyc-system/snowy-admin-web/src/views/yqyc/zero/enterprise-ledger/detail.vue

<template>
	<a-card :bordered="false">
		<a-page-header
			:title="formData.id ? '企业台账' : '新增企业台账'"
			@back="onClose"
		>
			<template #extra>
				<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
				<a-popconfirm title="请确认是否保存？" @confirm="onTemp" v-if="!isView">
					<a-button style="margin-right: 8px" :loading="submitLoading">保存</a-button>
				</a-popconfirm>
				<a-popconfirm title="请确认是否申报？" @confirm="onSubmit" v-if="!isView">
					<a-button type="primary" :loading="submitLoading">申报</a-button>
				</a-popconfirm>
			</template>
		</a-page-header>
		<a-collapse v-model:activeKey="activeKey" expand-icon-position="end">
			<a-collapse-panel key="1" header="基本信息">
				<a-form ref="formRef" :model="formData" :rules="formRules">
					<a-row :gutter="16">
						<a-col :span="8">
							<a-form-item label="预录入台账编号：" name="ylTzCode">
								<a-input v-model:value="formData.ylTzCode" :disabled="true" placeholder="请输入预录入台账编号"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="台账编号：" name="tzCode">
								<a-input v-model:value="formData.tzCode" :disabled="true" placeholder="请输入台账编号"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="台账性质：" name="tzType">
								<a-select v-model:value="formData.tzType" :disabled="isView" placeholder="请选择台账性质"
										  :options="tzTypeOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="海关注册编码：" name="companyMainHgCode">
								<a-input v-model:value="formData.companyMainHgCode" :disabled="isView"
										 placeholder="请输入海关注册编码" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="统一社会信用代码：" name="companyCode">
								<a-input v-model:value="formData.companyCode" :disabled="true"
										 placeholder="请输入统一社会信用代码" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业名称：" name="companyName">
								<a-input v-model:value="formData.companyName" :disabled="true" placeholder="请输入企业名称"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="申报类型：" name="applyType">
								<a-select v-model:value="formData.applyType" :disabled="true" placeholder="请选择申报类型"
										  :options="applyTypeOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业类型：" name="companyType">
								<a-select v-model:value="formData.companyType" :disabled="true" placeholder="请选择企业类型"
										  :options="companyTypeOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业地址：" name="companyAddress">
								<a-input v-model:value="formData.companyAddress" :disabled="true" placeholder="请输入企业地址"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="联系人：" name="companyLinkMan">
								<a-input v-model:value="formData.companyLinkMan" :disabled="true" placeholder="请输入联系人"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="联系电话：" name="companyLegalPhone">
								<a-input v-model:value="formData.companyLegalPhone" :disabled="true"
										 placeholder="请输入联系电话" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="经营范围：" name="companyJyFw">
								<a-input v-model:value="formData.companyJyFw" :disabled="true" placeholder="请输入经营范围"
										 allow-clear/>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-collapse-panel>
			<a-collapse-panel key="2" header="料件信息">
				<a-button type="primary" @click="onBodyReset" v-if="!isView" style="margin-bottom: 20px;">重置</a-button>
				<a-form ref="bodyFormRef" :model="bodyData" :rules="bodyRules" style="margin-bottom: 20px;">
					<a-row :gutter="16">
						<a-col :span="8">
							<a-form-item label="料件编码：" name="productCode">
								<a-input v-model:value="bodyData.productCode" :disabled="isView" placeholder="请输入商品编码" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="料件名称：" name="productName">
								<a-input v-model:value="bodyData.productName" :disabled="isView" placeholder="请输入商品名称" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="规格型号：" name="specModel">
								<a-input v-model:value="bodyData.specModel" :disabled="isView" placeholder="请输入规格型号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="备案数量：" name="recordQuantity">
								<a-input-number v-model:value="bodyData.recordQuantity" :disabled="isView" placeholder="请输入备案数量" :precision="0" :min="0" style="width: 100%;" @change="onChangeRecordQuantity"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="备案计量单位：" name="recordUnit">
								<a-select v-model:value="bodyData.recordUnit" :disabled="isView" placeholder="请输入备案计量单位" :options="legalUnitOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="申报计量单位：" name="declareUnit">
								<a-select v-model:value="bodyData.declareUnit" :disabled="isView" placeholder="请输入申报计量单位" :options="legalUnitOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="法定计量单位：" name="legalUnit">
								<a-select v-model:value="bodyData.legalUnit" :disabled="isView" placeholder="请输入法定计量单位" :options="legalUnitOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="法定第二计量单位：" name="legalSecondUnit">
								<a-select v-model:value="bodyData.legalSecondUnit" :disabled="isView" placeholder="请输入法定第二计量单位" :options="legalUnitOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="原产国(地区)：" name="originCountry">
								<a-select v-model:value="bodyData.originCountry" :disabled="isView" placeholder="请输入原产国(地区)"  :options="originCountryOptions" show-search allow-clear option-filter-prop="label" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="备案单价：" name="recordPrice">
								<a-input-number v-model:value="bodyData.recordPrice" :disabled="isView" placeholder="请输入备案单价" style="width: 100%" @change="onChangeRecordPrice"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="备案总价：" name="recordTotalPrice">
								<a-input v-model:value="bodyData.recordTotalPrice" :disabled="true" placeholder="备案数量 * 备案单价" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="币制：" name="currency">
								<a-select v-model:value="bodyData.currency" :disabled="isView" placeholder="请选择币制" :options="currencyOptions" show-search allow-clear option-filter-prop="label" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="法定数量：" name="legalQuantity">
								<a-input-number v-model:value="bodyData.legalQuantity" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入法定数量" @change="onChangeLegalQuantity"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="第二法定数量：" name="secondLegalQuantity">
								<a-input-number v-model:value="bodyData.secondLegalQuantity" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入第二法定数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="重量比例因子：" name="weightRatioFactor">
								<a-input v-model:value="bodyData.weightRatioFactor" :disabled="true" placeholder="备案数量 / 法定数量" @change="onChangeWeightRatioFactor"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="第一比例因子：" name="firstRatioFactor">
								<a-input v-model:value="bodyData.firstRatioFactor" :disabled="true" placeholder="请输入第一比例因子" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="第二比例因子：" name="secondRatioFactor">
								<a-input v-model:value="bodyData.secondRatioFactor" :disabled="true" placeholder="请输入第二比例因子" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="毛重(KG)：" name="grossWeight">
								<a-input-number v-model:value="bodyData.grossWeight" :disabled="isView" :min="0" style="width: 100%;" placeholder="请输入毛重(KG)" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="净重(KG)：" name="netWeight">
								<a-input v-model:value="bodyData.netWeight" :disabled="isView" :min="0" style="width: 100%;" placeholder="请输入净重(KG)" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="剩余备案数量：" name="remainingRecordAmount">
								<a-input v-model:value="bodyData.remainingRecordAmount" :disabled="true" placeholder="请输入剩余备案数量" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="进账累计数量：" name="inAccountCumulativeAmount">
								<a-input-number v-model:value="bodyData.inAccountCumulativeAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入进账累计数量" @change="onChangeInAccountCumulativeAmount"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="出账累计数量：" name="outAccountCumulativeAmount">
								<a-input-number v-model:value="bodyData.outAccountCumulativeAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入出账累计数量" @change="onChangeOutAccountCumulativeAmount"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="库存累计数量：" name="inventoryCumulativeAmount">
								<a-input-number v-model:value="bodyData.inventoryCumulativeAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入库存累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="一线进区累计数量：" name="firstInAmount">
								<a-input-number v-model:value="bodyData.firstInAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入一线进区累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="一线出区累计数量：" name="firstOutAmount">
								<a-input-number v-model:value="bodyData.firstOutAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入一线出区累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="二线进区累计数量：" name="secondInAmount">
								<a-input-number v-model:value="bodyData.secondInAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入二线进区累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="二线出区累计数量：" name="secondOutAmount">
								<a-input-number v-model:value="bodyData.secondOutAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入二线出区累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="区内转入累计数量：" name="intraZoneTransferInAmount">
								<a-input-number v-model:value="bodyData.intraZoneTransferInAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入区内转入累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="区内转出累计数量：" name="intraZoneTransferOutAmount">
								<a-input-number v-model:value="bodyData.intraZoneTransferOutAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入区内转出累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="区外转入累计数量：" name="extraZoneTransferInAmount">
								<a-input-number v-model:value="bodyData.extraZoneTransferInAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入区外转入累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="转至区外累计数量：" name="transferToExtraZoneAmount">
								<a-input-number v-model:value="bodyData.transferToExtraZoneAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入转至区外累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="补税累计数量：" name="compensationTaxAmount">
								<a-input-number v-model:value="bodyData.compensationTaxAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入补税累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="核销累计数量：" name="writeOffAmount">
								<a-input-number v-model:value="bodyData.writeOffAmount" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入核销累计数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="修改标志：" name="modifyFlag">
								<a-input v-model:value="bodyData.modifyFlag" :disabled="isView" placeholder="请输入修改标志" allow-clear />
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
				<template v-if="!isView">
					<a-button type="primary" style="margin-right: 8px;" v-if="!(bodyData.id || bodyData.__index)" @click="onBodyAdd">插入</a-button>
					<a-button type="primary" style="margin-right: 8px;" v-else @click="onBodyEdit">保存</a-button>
					<xn-batch-delete
						:selectedRowKeys="bodySelectedRowKeys"
						@batchDelete="deleteBatchBody"
					/>
				</template>
				<a-table
					style="margin-top: 10px"
					bordered
					:dataSource="bodyList"
					:columns="bodyColumns"
					:pagination="false"
					:scroll="{ x: 2000 }"
					:row-selection="bodyOptions.rowSelection"
				>
					<template #bodyCell="{ column, record, index }">
						<template v-if="column.dataIndex === 'recordUnit'">
							{{ $TOOL.dictTypeData('measurement unit', record.recordUnit) }}
						</template>
						<template v-if="column.dataIndex === 'declareUnit'">
							{{ $TOOL.dictTypeData('measurement unit', record.declareUnit) }}
						</template>
						<template v-if="column.dataIndex === 'legalUnit'">
							{{ $TOOL.dictTypeData('measurement unit', record.legalUnit) }}
						</template>
						<template v-if="column.dataIndex === 'legalSecondUnit'">
							{{ $TOOL.dictTypeData('measurement unit', record.legalSecondUnit) }}
						</template>
						<template v-if="column.dataIndex === 'originCountry'">
							{{ $TOOL.dictTypeData('address', record.originCountry) }}
						</template>
						<template v-if="column.dataIndex === 'currency'">
							{{ $TOOL.dictTypeData('hbdm', record.currency) }}
						</template>
						<template v-if="column.dataIndex === 'action'">
							<template v-if="isView">
								<a-button type="link" primary size="small" @click="onBodyReset(), bodyData = cloneDeep(record)">查看</a-button>
							</template>
							<template v-else>
								<a-button type="link" primary size="small" @click="onBodyReset(), bodyData = cloneDeep(record)">编辑</a-button>
								<a-button type="link" danger size="small" @click="onBodyDel(index)">删除</a-button>
							</template>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
			<a-collapse-panel key="4" header="产品信息">
				<a-button type="primary" @click="onProductReset" v-if="!isView" style="margin-bottom: 20px;">重置</a-button>
				<a-form ref="productFormRef" :model="productData" :rules="productRules" style="margin-bottom: 20px;">
					<a-row :gutter="16">
						<a-col :span="8">
							<a-form-item label="商品序号：" name="productNumber">
								<a-input v-model:value="productData.productNumber" :disabled="true" placeholder="" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="预录入编号：" name="ylCode">
								<a-input v-model:value="productData.ylCode" :disabled="true" placeholder="" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业编号：" name="companyApplyCode">
								<a-input v-model:value="productData.companyApplyCode" :disabled="true" placeholder="" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业名称：" name="companyName">
								<a-input v-model:value="productData.companyName" :disabled="true" placeholder="" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="加工增值核算备案编号：" name="recordNumber">
								<a-input v-model:value="productData.recordNumber" :disabled="true" placeholder="" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="主管关区代码：" name="regionCode">
								<a-select v-model:value="productData.regionCode" :disabled="isView" placeholder="请选择主管关区代码" :options="regionCodeOptions" show-search allow-clear option-filter-prop="label"/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="商品编号：" name="productCode">
								<a-select
									v-model:value="productData.productCode"
									placeholder="请选择商品编号"
									style="width: 100%"
									:filter-option="false"
									:not-found-content="fetchingSp ? undefined : null"
									:options="spOptions"
									:show-search="true"
									@search="fetchSp"
									@change="onChangeSp"
									option-label-prop="value"
								>
									<template v-if="fetchingSp" #notFoundContent>
										<a-spin size="small" />
									</template>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="商品名称：" name="productName">
								<a-input v-model:value="productData.productName" :disabled="true" placeholder="请选择商品编号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="版本号：" name="version">
								<a-input v-model:value="productData.version" :disabled="true" placeholder="请选择商品编号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="HS编码：" name="hsCode">
								<a-input v-model:value="productData.hsCode" :disabled="true" placeholder="请选择商品编号" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="人民币单价：" name="unitPrice">
								<a-input v-model:value="productData.unitPrice" :disabled="isView" placeholder="请输入人民币单价" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="商品数量：" name="quantity">
								<a-input-number v-model:value="productData.quantity" :disabled="isView" :precision="0" :min="0" style="width: 100%;" placeholder="请输入商品数量" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="计量单位：" name="measurementUnit">
								<a-input v-model:value="productData.measurementUnit" :disabled="true" placeholder="请选择商品编号" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="成品内销人民币价格：" name="domesticSalePrice">
								<a-input v-model:value="productData.domesticSalePrice" :disabled="isView"  :min="0" style="width: 100%;" placeholder="请输入成品内销人民币价格" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="境外进口料件总价(RMB)：" name="importTotal">
								<a-input v-model:value="productData.importTotal" :disabled="isView" :min="0" style="width: 100%;" placeholder="请输入境外进口料件总价(RMB)" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="国内采购料件总价(RMB)：" name="domesticTotal">
								<a-input v-model:value="productData.domesticTotal" :disabled="isView" :min="0" style="width: 100%;" placeholder="请输入国内采购料件总价(RMB)" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="自主核算产品收益占比：" name="selfRatio">
								<a-input v-model:value="productData.selfRatio" :disabled="isView" placeholder="请输入自主核算产品收益占比" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="企业自主核算加工增值率：" name="selfRate">
								<a-input v-model:value="productData.selfRate" :disabled="isView" placeholder="请输入企业自主核算加工增值率" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="备注：" name="remark">
								<a-input v-model:value="productData.remark" :disabled="isView" placeholder="请输入备注" allow-clear />
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
				<template v-if="!isView">
					<a-button type="primary" style="margin-right: 8px;" v-if="!(productData.id || productData.__index)" @click="onProductAdd">插入</a-button>
					<a-button type="primary" style="margin-right: 8px;" v-else @click="onProductEdit">保存</a-button>
					<xn-batch-delete
						:selectedRowKeys="productSelectedRowKeys"
						@batchDelete="deleteBatchProduct"
					/>
				</template>
				<a-table
					style="margin-top: 10px"
					bordered
					:dataSource="productList"
					:columns="productColumns"
					:pagination="false"
					:scroll="{ x: 2000 }"
					:row-selection="productOptions.rowSelection"
				>
					<template #bodyCell="{ column, record, index }">
						<template v-if="column.dataIndex === 'regionCode'">
							{{ $TOOL.dictTypeData('zgqdm', record.regionCode) }}
						</template>
						<template v-if="column.dataIndex === 'action'">
							<template v-if="isView">
								<a-button type="link" primary size="small" @click="onProductReset(), productData = cloneDeep(record)">查看</a-button>
							</template>
							<template v-else>
								<a-button type="link" primary size="small" @click="onProductReset(), productData = cloneDeep(record)">编辑</a-button>
								<a-button type="link" danger size="small" @click="onProductDel(index)">删除</a-button>
							</template>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
			<a-collapse-panel key="3" header="附件信息">
				<template v-if="!isView">
					<div class="file-tips">
						<InfoCircleFilled style="margin-right: 4px;"/>友情提示<br/>
						1、附件大小要求不超过4M，如果文件过大，建议拆分多个上传；<br/>
						2、附件格式要求：PDF文件；<br/>
						3、同一附件类型可以上传多个附件；<br/>
						4、附件传输过程中会出现传输失败的情况，请随时关注附件传输状态；<br/>
						5、要求上传复印件的可上传原件的扫描件。
					</div>
					<xn-upload ref="ref_upload" v-model:value="fileData.fileUrl" @onChange="fileChange" accept=".pdf" v-if="showFileUpload"/>
					<div style="margin-top: 10px;">
						<xn-batch-delete
							:selectedRowKeys="fileSelectedRowKeys"
							@batchDelete="deleteBatchFile"
						/>
					</div>
				</template>
				<a-table
					style="margin-top: 10px"
					bordered
					:dataSource="fileList"
					:columns="fileColumns"
					:pagination="false"
					:row-selection="fileOptions.rowSelection"
				>
					<template #bodyCell="{ column, record, index, text }">
						<template v-if="['attachmentName', 'attachmentFormat', 'attachmentContent'].includes(column.dataIndex)">
							<div>
								<a-input
									v-if="!isView"
									v-model:value="record[column.dataIndex]"
									style="margin: -5px 0"
								/>
								<template v-else>
									{{ text }}
								</template>
							</div>
						</template>
						<template v-if="column.dataIndex === 'action'">
							<template v-if="isView">
							</template>
							<template v-else>
								<a-button type="link" danger size="small" @click="onFileDel(index)" v-if="!isView">删除</a-button>
							</template>
						</template>
					</template>
				</a-table>
			</a-collapse-panel>
		</a-collapse>
	</a-card>
</template>

<script setup name="qyRecordInfoDetail">
import tool from '@/utils/tool'
import {cloneDeep, debounce} from 'lodash-es'
import {required} from '@/utils/formRules'
import qyRecordInfoApi from '@/api/yqyc/qyRecordInfoApi'
import qyRecordProductDictApi from '@/api/yqyc/qyRecordProductDictApi'
import {message, Modal} from "ant-design-vue";
import {createVNode} from "vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
// 抽屉状态
const { proxy } = getCurrentInstance()

const emit = defineEmits({successful: null, onClose: null})
const formRef = ref()
const bodyFormRef = ref()
const productFormRef = ref()
const ref_upload = ref()
// 表单数据
const formData = ref({})
const bodyData = ref({})
const productData = ref({})
const fileData = ref({})
const submitLoading = ref(false)
const isView = ref(false)
const showFileUpload = ref(true)
const tzTypeOptions = ref([])
const applyTypeOptions = ref([])
const companyTypeOptions = ref([])
const activeKey = ref('1')
const bodySelectedRowKeys = ref([])
const bodyList = ref([])
const productSelectedRowKeys = ref([])
const productList = ref([])
const userInfo = tool.data.get('USER_INFO')
const legalUnitOptions = ref([])
const originCountryOptions = ref([])
const currencyOptions = ref([])
const regionCodeOptions = ref([])
const spOptions = ref([])
const fetchingSp = ref(false)

// 列表选择配置
const bodyOptions = {
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			bodySelectedRowKeys.value = selectedRows
		}
	}
}
// 列表选择配置
const productOptions = {
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			productSelectedRowKeys.value = selectedRows
		}
	}
}
const fileSelectedRowKeys = ref([])
const fileList = ref([])
// 列表选择配置
const fileOptions = {
	rowSelection: {
		onChange: (selectedRowKey, selectedRows) => {
			fileSelectedRowKeys.value = selectedRows
		}
	}
}
// 打开抽屉
const onOpen = (record, view = false, type) => {
	isView.value = view
	if (record) {
		qyRecordInfoApi.qyRecordInfoDetail({id: record.id}).then(res => {
			formData.value = res
			bodyList.value = res.qyRecardBodyAddParams
			fileList.value = res.qyRecordAttachmentAddParams
			productList.value = res.qyRecordProductAddParams
			if (type) {
				formData.value.applyType = type
			}
		})
	} else {
		formData.value.companyCode = userInfo.companyNumber
		formData.value.companyName = userInfo.companyName
		formData.value.companyType = userInfo.companyType
		formData.value.companyAddress = userInfo.companyAddress
		formData.value.companyLinkMan = userInfo.contactName
		formData.value.companyLegalPhone = userInfo.contactPhone
		formData.value.companyJyFw = userInfo.businessScope
		formData.value.applyType = 'basq'
		onProductReset()
	}
	tzTypeOptions.value = tool.dictList('tzlx')
	applyTypeOptions.value = tool.dictList('qybalx')
	companyTypeOptions.value = tool.dictList('qylx')
	legalUnitOptions.value = tool.dictList('measurement unit')
	originCountryOptions.value = tool.dictList('address')
	currencyOptions.value = tool.dictList('hbdm')
	regionCodeOptions.value = tool.dictList('zgqdm')

}
// 关闭抽屉
const onClose = () => {
	formRef.value?.resetFields()
	formData.value = {}
	isView.value = true
	emit('onClose')
}
// 默认要校验的
const formRules = {
	companyMainHgCode: [required('请输入海关注册编码')],
	companyCode: [required('请输入统一社会信用代码')],
	companyName: [required('请输入企业名称')],
	applyType: [required('请输入申报类型')],
	companyType: [required('请输入企业类型')],
	companyAddress: [required('请输入企业地址')],
	companyLinkMan: [required('请输入联系人')],
	companyLegalPhone: [required('请输入联系电话')],
	companyJyFw: [required('请输入经营范围')],
}
// 默认要校验的
const bodyRules = {
	productCode: [required('请输入料件编码')],
	productName: [required('请输入料件名称')],
	specModel: [required('请输入规格型号')],
	recordQuantity: [required('请输入备案数量')],
	recordUnit: [required('请输入备案计量单位')],
	legalUnit: [required('请输入法定计量单位')],
	originCountry: [required('请输入原产国(地区)')],
	recordPrice: [required('请输入备案单价')],
	recordTotalPrice: [required('请输入备案总价')],
	currency: [required('请输入币制')],
	legalQuantity: [required('请输入法定数量')],
	recordAmount: [required('请输入备案数量')],
	weightRatioFactor: [required('请输入重量比例因子')],
	remainingRecordAmount: [required('请输入剩余备案数量')],
	inAccountCumulativeAmount: [required('请输入进账累计数量')],
	outAccountCumulativeAmount: [required('请输入出账累计数量')],
}
// 默认要校验的
const productRules = {
	regionCode: [required('请输入主管关区代码')],
	productCode: [required('请输入商品编号')],
	productName: [required('请输入商品名称')],
	version: [required('请输入版本号')],
	hsCode: [required('请输入HS编码')],
	unitPrice: [required('请输入人民币单价')],
	quantity: [required('请输入商品数量')],
	measurementUnit: [required('请输入计量单位')],
	domesticSalePrice: [required('请输入成品内销人民币价格')],
	importTotal: [required('请输入境外进口料件总价(RMB)')],
	domesticTotal: [required('请输入国内采购料件总价(RMB)')],
}
const bodyColumns = [
	{
		title: '商品编码',
		dataIndex: 'productCode',
		width: 100,
		fixed: 'left'
	},
	{
		title: '商品名称',
		dataIndex: 'productName',
		width: 100,
		fixed: 'left'
	},
	{
		title: '规格型号',
		dataIndex: 'specModel',
		width: 100
	},
	{
		title: '备案数量',
		dataIndex: 'recordQuantity',
		width: 100
	},
	{
		title: '备案计量单位',
		dataIndex: 'recordUnit',
		width: 120
	},
	{
		title: '申报计量单位',
		dataIndex: 'declareUnit',
		width: 120
	},
	{
		title: '法定计量单位',
		dataIndex: 'legalUnit',
		width: 120
	},
	{
		title: '法定第二计量单位',
		dataIndex: 'legalSecondUnit',
		width: 160
	},
	{
		title: '原产国(地区)',
		dataIndex: 'originCountry',
		width: 140
	},
	{
		title: '备案单价',
		dataIndex: 'recordPrice',
		width: 100
	},
	{
		title: '备案总价',
		dataIndex: 'recordTotalPrice',
		width: 100
	},
	{
		title: '币制',
		dataIndex: 'currency',
		width: 100
	},
	{
		title: '法定数量',
		dataIndex: 'legalQuantity',
		width: 100
	},
	{
		title: '第二法定数量',
		dataIndex: 'secondLegalQuantity',
		width: 120
	},
	{
		title: '重量比例因子',
		dataIndex: 'weightRatioFactor',
		width: 120
	},
	{
		title: '第一比例因子',
		dataIndex: 'firstRatioFactor',
		width: 120
	},
	{
		title: '第二比例因子',
		dataIndex: 'secondRatioFactor',
		width: 120
	},
	{
		title: '毛重(KG)',
		dataIndex: 'grossWeight',
		width: 120
	},
	{
		title: '净重(KG)',
		dataIndex: 'netWeight',
		width: 120
	},
	{
		title: '剩余备案数量',
		dataIndex: 'remainingRecordAmount',
		width: 120
	},
	{
		title: '进账累计数量',
		dataIndex: 'inAccountCumulativeAmount',
		width: 120
	},
	{
		title: '出账累计数量',
		dataIndex: 'outAccountCumulativeAmount',
		width: 120
	},
	{
		title: '库存累计数量',
		dataIndex: 'inventoryCumulativeAmount',
		width: 120
	},
	{
		title: '一线进区累计数量',
		dataIndex: 'firstInAmount',
		width: 160
	},
	{
		title: '一线出区累计数量',
		dataIndex: 'firstOutAmount',
		width: 160
	},
	{
		title: '二线进区累计数量',
		dataIndex: 'secondInAmount',
		width: 160
	},
	{
		title: '二线出区累计数量',
		dataIndex: 'secondOutAmount',
		width: 160
	},
	{
		title: '区内转入累计数量',
		dataIndex: 'intraZoneTransferInAmount',
		width: 160
	},
	{
		title: '区内转出累计数量',
		dataIndex: 'intraZoneTransferOutAmount',
		width: 160
	},
	{
		title: '区外转入累计数量',
		dataIndex: 'extraZoneTransferInAmount',
		width: 160
	},
	{
		title: '转至区外累计数量',
		dataIndex: 'transferToExtraZoneAmount',
		width: 160
	},
	{
		title: '补税累计数量',
		dataIndex: 'compensationTaxAmount',
		width: 120
	},
	{
		title: '核销累计数量',
		dataIndex: 'writeOffAmount',
		width: 120
	},
	{
		title: '修改标志',
		dataIndex: 'modifyFlag',
		width: 100
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: 160,
		fixed: 'right'
	},
]
const productColumns = [
	{
		title: '商品序号',
		dataIndex: 'productNumber',
		width: 120
	},
	{
		title: '预录入编号',
		dataIndex: 'ylCode',
		width: 120
	},
	{
		title: '企业编号',
		dataIndex: 'companyApplyCode',
		width: 120
	},
	{
		title: '企业名称',
		dataIndex: 'companyName',
		width: 120
	},
	{
		title: '加工增值核算备案编号',
		dataIndex: 'recordNumber',
		width: 180
	},
	{
		title: '主管关区代码',
		dataIndex: 'regionCode',
		width: 160
	},
	{
		title: '商品编号',
		dataIndex: 'productCode',
		width: 120
	},
	{
		title: '商品名称',
		dataIndex: 'productName',
		width: 120
	},
	{
		title: '版本号',
		dataIndex: 'version',
		width: 120
	},
	{
		title: 'HS编码',
		dataIndex: 'hsCode',
		width: 120
	},
	{
		title: '人民币单价',
		dataIndex: 'unitPrice',
		width: 120
	},
	{
		title: '商品数量',
		dataIndex: 'quantity',
		width: 120
	},
	{
		title: '计量单位',
		dataIndex: 'measurementUnit',
		width: 120
	},
	{
		title: '成品内销人民币价格',
		dataIndex: 'domesticSalePrice',
		width: 180
	},
	{
		title: '境外进口料件总价(RMB)',
		dataIndex: 'importTotal',
		width: 200
	},
	{
		title: '国内采购料件总价(RMB)',
		dataIndex: 'domesticTotal',
		width: 200
	},
	{
		title: '自主核算产品收益占比',
		dataIndex: 'selfRatio',
		width: 200
	},
	{
		title: '企业自主核算加工增值率',
		dataIndex: 'selfRate',
		width: 200
	},
	{
		title: '备注',
		dataIndex: 'remark',
		width: 120
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: 160,
		fixed: 'right'
	},
]
const fileColumns = [
	{
		title: '附件名称',
		dataIndex: 'attachmentName',
	},
	{
		title: '附件格式',
		dataIndex: 'attachmentFormat',
	},
	{
		title: '附件内容',
		dataIndex: 'attachmentContent',
	},
	{
		title: '上传时间',
		dataIndex: 'uploadTime',
	},
	{
		title: '操作',
		dataIndex: 'action',
	},
]
// 验证并提交数据
const onSubmit = () => {
	formRef.value
	.validate()
	.then(() => {
		submitLoading.value = true
		const formDataParam = cloneDeep(formData.value)
		if (!formDataParam.id) {
			formDataParam.qyRecardBodyAddParams = bodyList.value
			formDataParam.qyRecordAttachmentAddParams = fileList.value
			formDataParam.qyRecordProductAddParams = productList.value
		} else {
			formDataParam.qyRecardBodyEditParams = bodyList.value
			formDataParam.qyRecordAttachmentEditParams = fileList.value
			formDataParam.qyRecordProductAddParams = productList.value
			delete formDataParam.qyRecardBodyAddParams
			delete formDataParam.qyRecordAttachmentAddParams
		}
		formDataParam.status = '3'
		qyRecordInfoApi
		.qyRecordInfoSubmitForm(formDataParam, formDataParam.id)
		.then(() => {
			onClose()
			emit('successful')
		})
		.finally(() => {
			submitLoading.value = false
		})
	})
	.catch(() => {
	})
}
// 验证并提交数据
const onTemp = () => {
	formRef.value
	.validate()
	.then(() => {
		submitLoading.value = true
		const formDataParam = cloneDeep(formData.value)
		if (!formDataParam.id) {
			formDataParam.qyRecardBodyAddParams = bodyList.value
			formDataParam.qyRecordAttachmentAddParams = fileList.value
			formDataParam.qyRecordProductAddParams = productList.value
		} else {
			formDataParam.qyRecardBodyEditParams = bodyList.value
			formDataParam.qyRecordAttachmentEditParams = fileList.value
			formDataParam.qyRecordProductAddParams = productList.value
			delete formDataParam.qyRecardBodyAddParams
			delete formDataParam.qyRecordAttachmentAddParams
		}
		formDataParam.status = '1'
		qyRecordInfoApi
		.qyRecordInfoSubmitForm(formDataParam, formDataParam.id)
		.then(() => {
			onClose()
			emit('successful')
		})
		.finally(() => {
			submitLoading.value = false
		})
	})
	.catch(() => {
	})
}
const onBodyReset = () => {
	bodyFormRef.value?.resetFields()
	bodyData.value = {}
}
const onBodyAdd = () => {
	bodyFormRef.value
	.validate()
	.then(() => {
		bodyList.value.push(Object.assign({__index: new Date().getTime()}, bodyData.value))
		onBodyReset()
		message.success('插入料件信息成功！')
	})
	.catch(() => {
	})
}
const onBodyEdit = () => {
	bodyFormRef.value
	.validate()
	.then(() => {
		let k = ''
		if (bodyData.value.id) {
			k = 'id'
		} else if (bodyData.value.__index) {
			k = '__index'
		}
		if (k) {
			bodyList.value.forEach(v => {
				if (v[k] === bodyData.value[k]) {
					Object.assign(v, bodyData.value)
				}
			})
		}
		onBodyReset()
		message.success('编辑料件信息成功！')
	})
	.catch(() => {
	})
}
const onBodyDel = (recode, index) => {
	Modal.confirm({
		title: '提示',
		icon: createVNode(ExclamationCircleOutlined),
		content: createVNode('div', { style: 'color:red;' }, `是否要删除${record.productName}?`),
		centered: true,
		onOk() {
			bodyList.value.splice(index, 1)
		},
		onCancel() {
		},
	});
}
const deleteBatchBody = () => {
	bodyList.value = bodyList.value.filter(v => {
		let flag = true
		bodySelectedRowKeys.value.forEach(s => {
			if ((v.id && (v.id === s.id)) || (v.__index && (v.__index === s.__index))) {
				flag = false
			}
		})
		return flag
	})
}
const onProductReset = () => {
	productFormRef.value?.resetFields()
	productData.value = {
		companyApplyCode: userInfo.companyNumber,
		companyName: userInfo.companyName
	}
}
const onProductAdd = () => {
	productFormRef.value
	.validate()
	.then(() => {
		productList.value.push(Object.assign({__index: new Date().getTime()}, productData.value))
		onProductReset()
		message.success('插入产品信息成功！')
	})
	.catch(() => {
	})
}
const onProductEdit = () => {
	productFormRef.value
	.validate()
	.then(() => {
		let k = ''
		if (productData.value.id) {
			k = 'id'
		} else if (productData.value.__index) {
			k = '__index'
		}
		if (k) {
			productList.value.forEach(v => {
				if (v[k] === productData.value[k]) {
					Object.assign(v, productData.value)
				}
			})
		}
		onProductReset()
		message.success('编辑产品信息成功！')
	})
	.catch(() => {
	})
}
const onProductDel = (recode, index) => {
	Modal.confirm({
		title: '提示',
		icon: createVNode(ExclamationCircleOutlined),
		content: createVNode('div', { style: 'color:red;' }, `是否要删除${record.productName}?`),
		centered: true,
		onOk() {
			productList.value.splice(index, 1)
		},
		onCancel() {
		},
	});
}
const deleteBatchProduct = () => {
	productList.value = productList.value.filter(v => {
		let flag = true
		productSelectedRowKeys.value.forEach(s => {
			if ((v.id && (v.id === s.id)) || (v.__index && (v.__index === s.__index))) {
				flag = false
			}
		})
		return flag
	})
}
const getFileExtension = (filename) => {
	// 使用lastIndexOf查找最后一个"."的位置
	var dotIndex = filename.lastIndexOf(".");

	// 如果找到了"."，则提取从"."之后的子串作为后缀名
	if (dotIndex !== -1 && dotIndex < filename.length - 1) { // 确保"."不是字符串的最后一个字符
		return filename.slice(dotIndex + 1); // slice从dotIndex+1开始到字符串结束
	} else {
		// 如果没有找到"."，返回空字符串表示没有后缀
		return "";
	}
}
const fileChange = (file) => {
	if (file) {
		const f = ref_upload.value.uploadFileList()[0]
		fileList.value.push({
			__index: new Date().getTime(),
			attachmentUrl: f.url,
			attachmentName: f.name,
			attachmentFormat: getFileExtension(f.name),
			attachmentContent: '',
			uploadTime: proxy.$util.YMDHms(new Date()),
		})
		fileData.value.fileUrl = ''
		showFileUpload.value = false
		setTimeout(() => {
			showFileUpload.value = true
		}, 0)
	}
}
const onFileDel = (recode, index) => {
	Modal.confirm({
		title: '提示',
		icon: createVNode(ExclamationCircleOutlined),
		content: createVNode('div', { style: 'color:red;' }, `是否要删除?`),
		centered: true,
		onOk() {
			fileList.value.splice(index, 1)
		},
		onCancel() {
		},
	});
}
const deleteBatchFile = () => {
	fileList.value = fileList.value.filter(v => {
		let flag = true
		fileSelectedRowKeys.value.forEach(s => {
			if ((v.id && (v.id === s.id)) || (v.__index && (v.__index === s.__index))) {
				flag = false
			}
		})
		return flag
	})
}
const onChangeRecordQuantity = () => {
	setTimeout(() => {
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.recordPrice)) {
			bodyData.value.recordTotalPrice = Number(bodyData.value.recordQuantity) * Number(bodyData.value.recordPrice)
		} else {
			bodyData.value.recordTotalPrice = ''
		}
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.legalQuantity) && (Number(bodyData.value.legalQuantity) > 0)) {
			bodyData.value.weightRatioFactor = Number(bodyData.value.recordQuantity) / Number(bodyData.value.legalQuantity)
		} else {
			bodyData.value.weightRatioFactor = ''
		}
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.inAccountCumulativeAmount) && proxy.$util.isValue(bodyData.value.outAccountCumulativeAmount)) {
			bodyData.value.remainingRecordAmount = Number(bodyData.value.inAccountCumulativeAmount) - Number(bodyData.value.outAccountCumulativeAmount) - Number(bodyData.value.recordQuantity)
		} else {
			bodyData.value.remainingRecordAmount = ''
		}
	}, 100)
}
const onChangeRecordPrice = () => {
	setTimeout(() => {
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.recordPrice)) {
			bodyData.value.recordTotalPrice = Number(bodyData.value.recordQuantity) * Number(bodyData.value.recordPrice)
		} else {
			bodyData.value.recordTotalPrice = ''
		}
	}, 100)
}
const onChangeLegalQuantity = () => {
	setTimeout(() => {
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.legalQuantity) && (Number(bodyData.value.legalQuantity) > 0)) {
			bodyData.value.weightRatioFactor = Number(bodyData.value.recordQuantity) / Number(bodyData.value.legalQuantity)
		} else {
			bodyData.value.weightRatioFactor = ''
		}
	}, 100)
}
const onChangeWeightRatioFactor = () => {
	setTimeout(() => {
		bodyData.value.firstRatioFactor = bodyData.value.weightRatioFactor
	}, 100)
}
const onChangeInAccountCumulativeAmount = () => {
	setTimeout(() => {
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.inAccountCumulativeAmount) && proxy.$util.isValue(bodyData.value.outAccountCumulativeAmount)) {
			bodyData.value.remainingRecordAmount = Number(bodyData.value.inAccountCumulativeAmount) - Number(bodyData.value.outAccountCumulativeAmount) - Number(bodyData.value.recordQuantity)
		} else {
			bodyData.value.remainingRecordAmount = ''
		}
	}, 100)
}
const onChangeOutAccountCumulativeAmount = () => {
	setTimeout(() => {
		if (proxy.$util.isValue(bodyData.value.recordQuantity) && proxy.$util.isValue(bodyData.value.inAccountCumulativeAmount) && proxy.$util.isValue(bodyData.value.outAccountCumulativeAmount)) {
			bodyData.value.remainingRecordAmount = Number(bodyData.value.inAccountCumulativeAmount) - Number(bodyData.value.outAccountCumulativeAmount) - Number(bodyData.value.recordQuantity)
		} else {
			bodyData.value.remainingRecordAmount = ''
		}
	}, 100)
}
let lastFetchId = 0;
const fetchSp = debounce(value => {
	lastFetchId += 1;
	const fetchId = lastFetchId;
	spOptions.value = [];
	fetchingSp.value = true;
	qyRecordProductDictApi.qyRecordProductDictPage({
		current: 1,
		size: 10000,
		productCode: value
	}).then((res) => {
		if (fetchId !== lastFetchId) {
			return;
		}
		const arr = res.records.map(v => {
			v.label = v.productName
			v.value = v.productCode
			return v
		});
		spOptions.value = arr
		fetchingSp.value = false
	})
}, 300);
const onChangeSp = (val, obj) => {
	productData.value.productName = obj.productName
	productData.value.version = 1
	productData.value.hsCode = val
	productData.value.measurementUnit = obj.firstUnitCode + '-' + obj.firstUnitName
}
// 抛出函数
defineExpose({
	onOpen
})
</script>

<style lang="less" scoped>
.file-tips {
	background-color: rgb(235, 245, 255);
	border: 1px solid rgb(214, 235, 255);
	border-radius: 5px;
	color: rgb(153, 153, 153);
	padding: 10px 20px;
	margin-bottom: 10px;
}
</style>