detail.vue 36 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085
  1. <template>
  2. <a-card :bordered="false">
  3. <a-page-header
  4. :title="formData.id ? '二线核注单台账信息' : '新增二线核注单台账信息'"
  5. @back="onClose"
  6. >
  7. <template #extra>
  8. <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
  9. <a-popconfirm title="请确认是否保存?" @confirm="onTemp" v-if="!isView">
  10. <a-button style="margin-right: 8px" :loading="submitLoading">保存</a-button>
  11. </a-popconfirm>
  12. <a-popconfirm title="请确认是否申报?" @confirm="onSubmit" v-if="!isView">
  13. <a-button type="primary" :loading="submitLoading">申报</a-button>
  14. </a-popconfirm>
  15. </template>
  16. </a-page-header>
  17. <a-collapse v-model:activeKey="activeKey" expand-icon-position="end">
  18. <a-collapse-panel key="1" header="基本信息">
  19. <a-form ref="formRef" :model="formData" :rules="formRules">
  20. <a-row :gutter="16">
  21. <a-col :span="8">
  22. <a-form-item label="台账编号:" name="tzCode">
  23. <a-select v-model:value="formData.tzCode" :disabled="isView"
  24. placeholder="请选择台账编号" :options="tzOptions" show-search allow-clear
  25. option-filter-prop="label" @change="onChangTz"/>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :span="8">
  29. <a-form-item label="台账性质:" name="tzNature">
  30. <a-select v-model:value="formData.tzNature" :disabled="true"
  31. placeholder="请选择台账性质" :options="tzTypeOptions" show-search allow-clear
  32. option-filter-prop="label"/>
  33. </a-form-item>
  34. </a-col>
  35. <a-col :span="8">
  36. <a-form-item label="使用单位:" name="useDept">
  37. <a-input v-model:value="formData.useDept" :disabled="true" placeholder="请输入使用单位"
  38. allow-clear/>
  39. </a-form-item>
  40. </a-col>
  41. <a-col :span="8">
  42. <a-form-item label="统一社会信用代码:" name="companyCode">
  43. <a-input v-model:value="formData.companyCode" :disabled="true"
  44. placeholder="请输入统一社会信用代码" allow-clear/>
  45. </a-form-item>
  46. </a-col>
  47. <a-col :span="8">
  48. <a-form-item label="海关备案编号:" name="companyMainHgCode">
  49. <a-input v-model:value="formData.companyMainHgCode" :disabled="true"
  50. placeholder="请输入海关备案编号" allow-clear/>
  51. </a-form-item>
  52. </a-col>
  53. <a-col :span="8">
  54. <a-form-item label="监管方式:" name="regulaMethod">
  55. <a-select v-model:value="formData.regulaMethod" :disabled="isView"
  56. placeholder="请输入监管方式" :options="jgfsOptions" show-search allow-clear
  57. option-filter-prop="label"/>
  58. </a-form-item>
  59. </a-col>
  60. <a-col :span="8">
  61. <a-form-item label="运输方式:" name="ysfs">
  62. <a-select v-model:value="formData.ysfs" :disabled="isView" placeholder="请输入运输方式"
  63. :options="ysfsOptions" show-search allow-clear option-filter-prop="label"/>
  64. </a-form-item>
  65. </a-col>
  66. <a-col :span="8">
  67. <a-form-item label="关联清单编号:" name="glqdCode">
  68. <a-select v-model:value="formData.glqdCode" :disabled="isView"
  69. placeholder="请输入关联清单编号" :options="glqdbhOptions" show-search allow-clear
  70. option-filter-prop="label" @change="onChangGlqdbh"/>
  71. </a-form-item>
  72. </a-col>
  73. <a-col :span="8">
  74. <a-form-item label="对应报关申报编号:" name="dybgCode">
  75. <a-input v-model:value="formData.dybgCode" :disabled="true"
  76. placeholder="请选择关联清单编号" allow-clear/>
  77. </a-form-item>
  78. </a-col>
  79. <a-col :span="8">
  80. <a-form-item label="对应报关单申报单位名称:" name="dybgDept">
  81. <a-input v-model:value="formData.dybgDept" :disabled="true"
  82. placeholder="请选择关联清单编号" allow-clear/>
  83. </a-form-item>
  84. </a-col>
  85. <a-col :span="8">
  86. <a-form-item label="核注单预录入号:" name="hzdrCode">
  87. <a-input v-model:value="formData.hzdrCode" :disabled="true"
  88. placeholder="请输入核注单预录入号" allow-clear/>
  89. </a-form-item>
  90. </a-col>
  91. <a-col :span="8">
  92. <a-form-item label="核注单编号:" name="hgHzdCode">
  93. <a-input v-model:value="formData.hgHzdCode" :disabled="true" allow-clear/>
  94. </a-form-item>
  95. </a-col>
  96. <a-col :span="24">
  97. <a-form-item label="备注:" name="remark">
  98. <a-textarea v-model:value="formData.remark" :disabled="isView" placeholder="请输入备注"
  99. :rows="4"/>
  100. </a-form-item>
  101. </a-col>
  102. <!-- <a-col :span="8">-->
  103. <!-- <a-form-item label="台账类型:" name="tzType">-->
  104. <!-- <a-input v-model:value="formData.tzType" :disabled="true" allow-clear/>-->
  105. <!-- </a-form-item>-->
  106. <!-- </a-col>-->
  107. </a-row>
  108. </a-form>
  109. </a-collapse-panel>
  110. <a-collapse-panel key="2" header="表体信息">
  111. <a-button type="primary" @click="onBodyReset" v-if="!isView" style="margin-bottom: 20px;">重置
  112. </a-button>
  113. <a-form ref="bodyFormRef" :model="bodyData" :rules="bodyRules" style="margin-bottom: 20px;">
  114. <a-row :gutter="16">
  115. <a-col :span="8">
  116. <a-form-item label="商品序号:" name="productOrderCode">
  117. <a-select v-model:value="bodyData.productOrderCode" :disabled="isView"
  118. placeholder="请输入商品序号" :options="bodyListOptions" show-search allow-clear
  119. option-filter-prop="label" @change="onChangProductOrderCode"/>
  120. </a-form-item>
  121. </a-col>
  122. <a-col :span="8">
  123. <a-form-item label="报关单商品序号:" name="bgdProductOrderCode">
  124. <a-input v-model:value="bodyData.bgdProductOrderCode" :disabled="true"
  125. placeholder="请输入报关单商品序号" allow-clear/>
  126. </a-form-item>
  127. </a-col>
  128. <a-col :span="8">
  129. <a-form-item label="备案序号:" name="recordCode">
  130. <a-input v-model:value="bodyData.recordCode" :disabled="true"
  131. placeholder="请输入备案序号" allow-clear/>
  132. </a-form-item>
  133. </a-col>
  134. <a-col :span="8">
  135. <a-form-item label="通知书序号:" name="noticeCode">
  136. <a-input v-model:value="bodyData.noticeCode" :disabled="isView"
  137. placeholder="请输入通知书序号" allow-clear/>
  138. </a-form-item>
  139. </a-col>
  140. <a-col :span="8">
  141. <a-form-item label="商品编码:" name="productCode">
  142. <a-input v-model:value="bodyData.productCode" :disabled="true"
  143. placeholder="请输入商品编码" allow-clear/>
  144. </a-form-item>
  145. </a-col>
  146. <a-col :span="8">
  147. <a-form-item label="商品名称:" name="productName">
  148. <a-input v-model:value="bodyData.productName" :disabled="true"
  149. placeholder="请输入商品名称" allow-clear/>
  150. </a-form-item>
  151. </a-col>
  152. <a-col :span="8">
  153. <a-form-item label="规格型号:" name="specModel">
  154. <a-input v-model:value="bodyData.specModel" :disabled="true"
  155. placeholder="请输入规格型号" allow-clear/>
  156. </a-form-item>
  157. </a-col>
  158. <a-col :span="8">
  159. <a-form-item label="申报数量:" name="sbNum">
  160. <a-input-number v-model:value="bodyData.sbNum" :disabled="isView" placeholder="请输入申报数量" :min="0" style="width: 100%;" @change="onChangeSbNum"/>
  161. </a-form-item>
  162. </a-col>
  163. <a-col :span="8">
  164. <a-form-item label="申报计量单位:" name="declareUnit">
  165. <a-select v-model:value="bodyData.declareUnit" :disabled="isView"
  166. placeholder="请选择申报计量单位" :options="declareUnitOptions" show-search
  167. allow-clear option-filter-prop="label"/>
  168. </a-form-item>
  169. </a-col>
  170. <a-col :span="8">
  171. <a-form-item label="企业申报单价:" name="companySbPrice">
  172. <a-input-number v-model:value="bodyData.companySbPrice" :disabled="isView" placeholder="请输入企业申报单价" :min="0" style="width: 100%;"/>
  173. </a-form-item>
  174. </a-col>
  175. <a-col :span="8">
  176. <a-form-item label="企业申报总价:" name="companySbCount">
  177. <a-input-number v-model:value="bodyData.companySbCount" :disabled="isView" placeholder="请输入企业申报总价" :min="0" style="width: 100%;"/>
  178. </a-form-item>
  179. </a-col>
  180. <a-col :span="8">
  181. <a-form-item label="备案单价:" name="recordPrice">
  182. <a-input-number v-model:value="bodyData.recordPrice" :disabled="isView" placeholder="请输入备案单价" :min="0" style="width: 100%;"/>
  183. </a-form-item>
  184. </a-col>
  185. <a-col :span="8">
  186. <a-form-item label="备案总价:" name="recordTotalPrice">
  187. <a-input-number v-model:value="bodyData.recordTotalPrice" :disabled="isView" placeholder="请输入备案总价" :min="0" style="width: 100%;"/>
  188. </a-form-item>
  189. </a-col>
  190. <a-col :span="8">
  191. <a-form-item label="币制:" name="currency">
  192. <a-select v-model:value="bodyData.currency" :disabled="isView" placeholder="请选择币制" :options="currencyOptions" show-search allow-clear option-filter-prop="label" />
  193. </a-form-item>
  194. </a-col>
  195. <a-col :span="8">
  196. <a-form-item label="原产国(地区):" name="originCountry">
  197. <a-select v-model:value="bodyData.originCountry" :disabled="isView"
  198. placeholder="请选择原产国(地区)" :options="originCountryOptions" show-search
  199. allow-clear option-filter-prop="label"/>
  200. </a-form-item>
  201. </a-col>
  202. <a-col :span="8">
  203. <a-form-item label="法定数量:" name="legalQuantity">
  204. <a-input-number v-model:value="bodyData.legalQuantity" :disabled="isView" placeholder="请输入法定数量" :min="0" style="width: 100%" @change="onChangeLegalQuantity"/>
  205. </a-form-item>
  206. </a-col>
  207. <a-col :span="8">
  208. <a-form-item label="法定计量单位:" name="legalUnit">
  209. <a-select v-model:value="bodyData.legalUnit" :disabled="isView"
  210. placeholder="请选择法定计量单位" :options="legalUnitOptions" show-search
  211. allow-clear option-filter-prop="label"/>
  212. </a-form-item>
  213. </a-col>
  214. <a-col :span="8">
  215. <a-form-item label="第二法定数量:" name="secondLegalQuantity">
  216. <a-input-number v-model:value="bodyData.secondLegalQuantity" :disabled="isView" placeholder="请输入第二法定数量" :min="0" style="width: 100%"/>
  217. </a-form-item>
  218. </a-col>
  219. <a-col :span="8">
  220. <a-form-item label="法定第二计量:" name="legalSecondUnit">
  221. <a-select v-model:value="bodyData.legalSecondUnit" :disabled="isView"
  222. placeholder="请选择法定第二计量" :options="legalSecondUnitOptions" show-search
  223. allow-clear option-filter-prop="label"/>
  224. </a-form-item>
  225. </a-col>
  226. <a-col :span="8">
  227. <a-form-item label="美元统计总金额:" name="myCount">
  228. <a-input-number v-model:value="bodyData.myCount" :disabled="isView" placeholder="请输入美元统计总金额" :min="0" style="width: 100%"/>
  229. </a-form-item>
  230. </a-col>
  231. <a-col :span="8">
  232. <a-form-item label="重量比例因子:" name="weightRatioFactor">
  233. <a-input v-model:value="bodyData.weightRatioFactor" :disabled="true"
  234. placeholder="申报数量 / 法定数量" allow-clear/>
  235. </a-form-item>
  236. </a-col>
  237. <a-col :span="8">
  238. <a-form-item label="第一比例因子:" name="firstRatioFactor">
  239. <a-input v-model:value="bodyData.firstRatioFactor" :disabled="true"
  240. placeholder="重量比例因子" allow-clear/>
  241. </a-form-item>
  242. </a-col>
  243. <a-col :span="8">
  244. <a-form-item label="第二比例因子:" name="secondRatioFactor">
  245. <a-input v-model:value="bodyData.secondRatioFactor" :disabled="true"
  246. placeholder="请输入第二比例因子" allow-clear/>
  247. </a-form-item>
  248. </a-col>
  249. <a-col :span="8">
  250. <a-form-item label="毛重:" name="grossWeight">
  251. <a-input-number v-model:value="bodyData.grossWeight" :disabled="isView" placeholder="请输入毛重" :min="0" style="width: 100%"/>
  252. </a-form-item>
  253. </a-col>
  254. <a-col :span="8">
  255. <a-form-item label="净重:" name="netWeight">
  256. <a-input-number v-model:value="bodyData.netWeight" :disabled="isView" placeholder="请输入净重" :min="0" style="width: 100%"/>
  257. </a-form-item>
  258. </a-col>
  259. <a-col :span="8">
  260. <a-form-item label="征免性质:" name="zmMethod">
  261. <a-select v-model:value="bodyData.zmMethod" :disabled="isView"
  262. placeholder="请选择征免性质" :options="zmMethodOptions" show-search
  263. allow-clear option-filter-prop="label"/>
  264. </a-form-item>
  265. </a-col>
  266. <a-col :span="8">
  267. <a-form-item label="最终目的国(地区):" name="zzmdg">
  268. <a-select v-model:value="bodyData.zzmdg" :disabled="isView"
  269. placeholder="请选择最终目的国(地区)" :options="zzmdgOptions" show-search
  270. allow-clear option-filter-prop="label"/>
  271. </a-form-item>
  272. </a-col>
  273. <a-col :span="8">
  274. <a-form-item label="监管年限起始日:" name="jgnxQsr">
  275. <a-date-picker v-model:value="bodyData.jgnxQsr" :disabled="isView"
  276. value-format="YYYY-MM-DD HH:mm:ss" show-time
  277. placeholder="请选择监管年限起始日" style="width: 100%" allow-clear
  278. @change="onChangeJgnxQsr"
  279. />
  280. </a-form-item>
  281. </a-col>
  282. <a-col :span="8">
  283. <a-form-item label="监管年限到期日:" name="jgnxDqr">
  284. <a-date-picker v-model:value="bodyData.jgnxDqr" :disabled="true"
  285. value-format="YYYY-MM-DD HH:mm:ss" show-time
  286. placeholder="请选择监管年限到期日" style="width: 100%" allow-clear/>
  287. </a-form-item>
  288. </a-col>
  289. <a-col :span="8">
  290. <a-form-item label="进账库存数量:" name="jzkcNum">
  291. <a-input-number v-model:value="bodyData.jzkcNum" :disabled="isView" placeholder="请输入进账库存数量" :min="0" style="width: 100%"/>
  292. </a-form-item>
  293. </a-col>
  294. <a-col :span="8">
  295. <a-form-item label="监管年限自用数量:" name="jgnxZysl">
  296. <a-input-number v-model:value="bodyData.jgnxZysl" :disabled="isView" placeholder="请输入监管年限自用数量" :min="0" style="width: 100%"/>
  297. </a-form-item>
  298. </a-col>
  299. <a-col :span="8">
  300. <a-form-item label="解除监管数量(已解除监管/总数):" name="jcjgslYjc">
  301. <a-input-number v-model:value="bodyData.jcjgslYjc" :disabled="isView" placeholder="请输入解除年限数量(已解除监管/总数)" :min="0" style="width: 100%"/>
  302. </a-form-item>
  303. </a-col>
  304. <a-col :span="8">
  305. <a-form-item label="到期解除监管数量:" name="dqjcjgsl">
  306. <a-input-number v-model:value="bodyData.dqjcjgsl" :disabled="isView" placeholder="请输入到期解除监管数量" :min="0" style="width: 100%"/>
  307. </a-form-item>
  308. </a-col>
  309. <a-col :span="8">
  310. <a-form-item label="解除监管数量(二线出区):" name="jcjgslSecondline">
  311. <a-input-number v-model:value="bodyData.jcjgslSecondline" :disabled="isView" placeholder="请输入解除年限数量(二线出区)" :min="0" style="width: 100%"/>
  312. </a-form-item>
  313. </a-col>
  314. <a-col :span="8">
  315. <a-form-item label="解除监管数量(补税):" name="jcjgslBs">
  316. <a-input-number v-model:value="bodyData.jcjgslBs" :disabled="isView" placeholder="请输入解除监管数量(补税)" :min="0" style="width: 100%"/>
  317. </a-form-item>
  318. </a-col>
  319. <a-col :span="8">
  320. <a-form-item label="解除监管数量(区内转让):" name="jcjgslQnzr">
  321. <a-input-number v-model:value="bodyData.jcjgslQnzr" :disabled="isView" placeholder="请输入解除监管数量(区内转让)" :min="0" style="width: 100%"/>
  322. </a-form-item>
  323. </a-col>
  324. <a-col :span="8">
  325. <a-form-item label="解除监管数量(转至区外):" name="jcjgslZzqw">
  326. <a-input-number v-model:value="bodyData.jcjgslZzqw" :disabled="isView" placeholder="请输入解除监管数量(转至区外)" :min="0" style="width: 100%"/>
  327. </a-form-item>
  328. </a-col>
  329. <a-col :span="8">
  330. <a-form-item label="解除监管数量(基建物资核销):" name="jcjgslJjwzhx">
  331. <a-input-number v-model:value="bodyData.jcjgslJjwzhx" :disabled="isView" placeholder="请输入解除监管数量(基建物资核销)" :min="0" style="width: 100%"/>
  332. </a-form-item>
  333. </a-col>
  334. <a-col :span="8">
  335. <a-form-item label="监管年限内区内转移数量:" name="jgnxnQnzysl">
  336. <a-input-number v-model:value="bodyData.jgnxnQnzysl" :disabled="isView" placeholder="请输入监管年限内区内转移数量" :min="0" style="width: 100%"/>
  337. </a-form-item>
  338. </a-col>
  339. <a-col :span="8">
  340. <a-form-item label="监管年限内抵押贷款数量:" name="jgnxnDydksl">
  341. <a-input-number v-model:value="bodyData.jgnxnDydksl" :disabled="isView" placeholder="请输入监管年限内抵押贷款数量" :min="0" style="width: 100%"/>
  342. </a-form-item>
  343. </a-col>
  344. <a-col :span="8">
  345. <a-form-item label="监管年限内临时移作他用数量:" name="jgnxnLszztysl">
  346. <a-input-number v-model:value="bodyData.jgnxnLszztysl" :disabled="isView" placeholder="请输入监管年限内临时移作他用数量" :min="0" style="width: 100%"/>
  347. </a-form-item>
  348. </a-col>
  349. <a-col :span="8">
  350. <a-form-item label="修改标志:" name="xgbz">
  351. <a-input v-model:value="bodyData.xgbz" :disabled="isView" placeholder="请输入修改标志"
  352. allow-clear/>
  353. </a-form-item>
  354. </a-col>
  355. </a-row>
  356. </a-form>
  357. <template v-if="!isView">
  358. <a-button type="primary" style="margin-right: 8px;" v-if="!(bodyData.id)"
  359. @click="onBodyAdd">插入
  360. </a-button>
  361. <a-button type="primary" style="margin-right: 8px;" v-else @click="onBodyEdit">保存</a-button>
  362. <xn-batch-delete
  363. :selectedRowKeys="bodySelectedRowKeys"
  364. @batchDelete="deleteBatchBody"
  365. />
  366. </template>
  367. <a-table
  368. style="margin-top: 10px"
  369. bordered
  370. :dataSource="bodyList"
  371. :columns="bodyColumns"
  372. :pagination="false"
  373. :scroll="{ x: 2000 }"
  374. :row-selection="bodyOptions.rowSelection"
  375. rowKey="id"
  376. >
  377. <template #bodyCell="{ column, record, index }">
  378. <template v-if="column.dataIndex === 'declareUnit'">
  379. {{ $TOOL.dictTypeData('measurement unit', record.declareUnit) }}
  380. </template>
  381. <template v-if="column.dataIndex === 'originCountry'">
  382. {{ $TOOL.dictTypeData('address', record.originCountry) }}
  383. </template>
  384. <template v-if="column.dataIndex === 'legalUnit'">
  385. {{ $TOOL.dictTypeData('measurement unit', record.legalUnit) }}
  386. </template>
  387. <template v-if="column.dataIndex === 'legalSecondUnit'">
  388. {{ $TOOL.dictTypeData('measurement unit', record.legalSecondUnit) }}
  389. </template>
  390. <template v-if="column.dataIndex === 'zmMethod'">
  391. {{ $TOOL.dictTypeData('zm_type', record.zmMethod) }}
  392. </template>
  393. <template v-if="column.dataIndex === 'zzmdg'">
  394. {{ $TOOL.dictTypeData('address', record.zzmdg) }}
  395. </template>
  396. <template v-if="column.dataIndex === 'action'">
  397. <template v-if="isView">
  398. <a-button type="link" primary size="small"
  399. @click="onBodyReset(), bodyData = cloneDeep(record)">查看
  400. </a-button>
  401. </template>
  402. <template v-else>
  403. <a-button type="link" primary size="small"
  404. @click="onBodyReset(), bodyData = cloneDeep(record)">编辑
  405. </a-button>
  406. <a-button type="link" danger size="small" @click="onBodyDel(index)">删除</a-button>
  407. </template>
  408. </template>
  409. </template>
  410. </a-table>
  411. </a-collapse-panel>
  412. <a-collapse-panel key="3" header="附件信息">
  413. <template v-if="!isView">
  414. <div class="file-tips">
  415. <InfoCircleFilled style="margin-right: 4px;"/>
  416. 友情提示<br/>
  417. 1、附件大小要求不超过4M,如果文件过大,建议拆分多个上传;<br/>
  418. 2、附件格式要求:PDF文件;<br/>
  419. 3、同一附件类型可以上传多个附件;<br/>
  420. 4、附件传输过程中会出现传输失败的情况,请随时关注附件传输状态;<br/>
  421. 5、要求上传复印件的可上传原件的扫描件。
  422. </div>
  423. <xn-upload ref="ref_upload" v-model:value="fileData.fileUrl" @onChange="fileChange" accept=".pdf"
  424. v-if="showFileUpload"/>
  425. <div style="margin-top: 10px;">
  426. <xn-batch-delete
  427. :selectedRowKeys="fileSelectedRowKeys"
  428. @batchDelete="deleteBatchFile"
  429. />
  430. </div>
  431. </template>
  432. <a-table
  433. style="margin-top: 10px"
  434. bordered
  435. :dataSource="fileList"
  436. :columns="fileColumns"
  437. :pagination="false"
  438. :row-selection="fileOptions.rowSelection"
  439. rowKey="id"
  440. >
  441. <template #bodyCell="{ column, record, index, text }">
  442. <template
  443. v-if="['attachmentName', 'attachmentFormat', 'attachmentContent'].includes(column.dataIndex)">
  444. <div>
  445. <a-input
  446. v-if="!isView"
  447. v-model:value="record[column.dataIndex]"
  448. style="margin: -5px 0"
  449. />
  450. <template v-else>
  451. {{ text }}
  452. </template>
  453. </div>
  454. </template>
  455. <template v-if="column.dataIndex === 'action'">
  456. <template v-if="isView">
  457. </template>
  458. <template v-else>
  459. <a-button type="link" danger size="small" @click="onFileDel(index)" v-if="!isView">
  460. 删除
  461. </a-button>
  462. </template>
  463. </template>
  464. </template>
  465. </a-table>
  466. </a-collapse-panel>
  467. </a-collapse>
  468. </a-card>
  469. </template>
  470. <script setup name="qysecondlinehzdrqtzDetail">
  471. import tool from '@/utils/tool'
  472. import {cloneDeep} from 'lodash-es'
  473. import {required} from '@/utils/formRules'
  474. import qySecondLineInHzdApi from '@/api/yqyc/qySecondLineInHzdApi'
  475. import {message, Modal} from "ant-design-vue";
  476. import {createVNode} from "vue";
  477. import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
  478. // 抽屉状态
  479. const {proxy} = getCurrentInstance()
  480. const emit = defineEmits({successful: null, onClose: null})
  481. const formRef = ref()
  482. // 表单数据
  483. const formData = ref({})
  484. const submitLoading = ref(false)
  485. const isView = ref(false)
  486. const tzTypeOptions = ref([])
  487. const jgfsOptions = ref([])
  488. const statusOptions = ref([])
  489. const glqdbhOptions = ref([])
  490. const ysfsOptions = ref([])
  491. const declareUnitOptions = ref([])
  492. const originCountryOptions = ref([])
  493. const legalUnitOptions = ref([])
  494. const legalSecondUnitOptions = ref([])
  495. const zmMethodOptions = ref([])
  496. const zzmdgOptions = ref([])
  497. const currencyOptions = ref([])
  498. const tzOptions = ref([])
  499. const activeKey = ref('1')
  500. const userInfo = tool.data.get('USER_INFO')
  501. // 打开抽屉
  502. const onOpen = (record, view = false, copy, sblx) => {
  503. isView.value = view
  504. if (record) {
  505. qySecondLineInHzdApi.qysecondlinehzdrqtzDetail({id: record.id}).then(res => {
  506. formData.value = res.baseInfo
  507. bodyList.value = res.productList
  508. fileList.value = res.attachmentList
  509. if (copy) {
  510. delete formData.value.id
  511. }
  512. if (sblx) {
  513. formData.value.sblx = sblx
  514. }
  515. })
  516. } else {
  517. formData.value.tzType = '二线入区'
  518. formData.value.useDept = userInfo.companyName
  519. }
  520. qySecondLineInHzdApi.qysecondlinehzdrqtzQyRecordInfo().then(res => {
  521. tzOptions.value = res.map(v => Object.assign(v, {label: v.tzCode, value: v.tzCode}))
  522. if (formData.value.tzCode) {
  523. const obj = tzOptions.value.filter(v => v.tzCode === formData.value.tzCode)[0]
  524. qySecondLineInHzdApi.qysecondlinehzdrqtzQyProductById({id: obj.id}).then(res2 => {
  525. bodyListOptions.value = res2.map(v => Object.assign(v, {label: v.productNum, value: v.productNum}))
  526. })
  527. }
  528. })
  529. qySecondLineInHzdApi.qysecondlinehzdrqtzHzdQdList().then(res => {
  530. glqdbhOptions.value = res.map(v => Object.assign(v, {label: v.glqdCode, value: v.glqdCode}))
  531. })
  532. tzTypeOptions.value = tool.dictList('tzlx')
  533. statusOptions.value = tool.dictList('djzt')
  534. ysfsOptions.value = tool.dictList('trans_type')
  535. declareUnitOptions.value = tool.dictList('measurement unit')
  536. originCountryOptions.value = tool.dictList('address')
  537. legalUnitOptions.value = tool.dictList('measurement unit')
  538. legalSecondUnitOptions.value = tool.dictList('measurement unit')
  539. zmMethodOptions.value = tool.dictList('zm_type')
  540. zzmdgOptions.value = tool.dictList('address')
  541. jgfsOptions.value = tool.dictList('jgfs')
  542. currencyOptions.value = tool.dictList('hbdm')
  543. }
  544. // 关闭抽屉
  545. const onClose = () => {
  546. formRef.value?.resetFields()
  547. formData.value = {}
  548. isView.value = true
  549. emit('onClose')
  550. }
  551. // 默认要校验的
  552. const formRules = {
  553. dybgDept: [required('请输入对应报关单申报单位名称')],
  554. glqdCode: [required('请输入关联清单编号')],
  555. }
  556. // 验证并提交数据
  557. const onSubmit = () => {
  558. formRef.value
  559. .validate()
  560. .then(() => {
  561. submitLoading.value = true
  562. const params = {
  563. baseInfo: Object.assign(formData.value, {status: '3'}),
  564. productList: bodyList.value,
  565. attachmentList: fileList.value,
  566. }
  567. qySecondLineInHzdApi.qysecondlinehzdrqtzSubmitForm(params, formData.value.id).then(() => {
  568. onClose()
  569. emit('successful')
  570. }).finally(() => {
  571. submitLoading.value = false
  572. })
  573. })
  574. .catch(() => {
  575. })
  576. }
  577. const onTemp = () => {
  578. formRef.value
  579. .validate()
  580. .then(() => {
  581. submitLoading.value = true
  582. const params = {
  583. baseInfo: Object.assign(formData.value, {status: '1'}),
  584. productList: bodyList.value,
  585. attachmentList: fileList.value,
  586. }
  587. qySecondLineInHzdApi.qysecondlinehzdrqtzSubmitForm(params, formData.value.id).then(() => {
  588. onClose()
  589. emit('successful')
  590. })
  591. .finally(() => {
  592. submitLoading.value = false
  593. })
  594. })
  595. .catch(() => {
  596. })
  597. }
  598. const bodyFormRef = ref()
  599. const bodyData = ref({})
  600. const bodySelectedRowKeys = ref([])
  601. const bodyList = ref([])
  602. const bodyListOptions = ref([])
  603. // 列表选择配置
  604. const bodyOptions = {
  605. rowSelection: {
  606. onChange: (selectedRowKey, selectedRows) => {
  607. bodySelectedRowKeys.value = selectedRows
  608. }
  609. }
  610. }
  611. // 默认要校验的
  612. const bodyRules = {
  613. productOrderCode: [required('请输入商品序号')],
  614. bgdProductOrderCode: [required('请输入报关单商品序号')],
  615. recordCode: [required('请输入备案序号')],
  616. noticeCode: [required('请输入通知书序号')],
  617. productCode: [required('请输入商品编码')],
  618. productName: [required('请输入商品名称')],
  619. specModel: [required('请输入规格型号')],
  620. sbNum: [required('请输入申报数量')],
  621. declareUnit: [required('请输入申报计量单位')],
  622. companySbPrice: [required('请输入企业申报单价')],
  623. companySbCount: [required('请输入企业申报总价')],
  624. recordPrice: [required('请输入备案单价')],
  625. recordTotalPrice: [required('请输入备案总价')],
  626. currency: [required('请输入币制')],
  627. originCountry: [required('请输入原产国(地区)')],
  628. legalQuantity: [required('请输入法定数量')],
  629. legalUnit: [required('请输入法定计量单位')],
  630. grossWeight: [required('请输入毛重')],
  631. netWeight: [required('请输入净重')],
  632. zmMethod: [required('请输入征免性质')],
  633. jgnxDqr: [required('请输入监管年限到期日')],
  634. jgnxQsr: [required('请输入监管年限起始日')],
  635. jzkcNum: [required('请输入进账库存数量')],
  636. }
  637. const bodyColumns = [
  638. {
  639. title: '商品序号',
  640. dataIndex: 'productOrderCode',
  641. width: 100
  642. },
  643. {
  644. title: '报关单商品序号',
  645. dataIndex: 'bgdProductOrderCode',
  646. width: 160
  647. },
  648. {
  649. title: '备案序号',
  650. dataIndex: 'recordCode',
  651. width: 100
  652. },
  653. {
  654. title: '通知书序号',
  655. dataIndex: 'noticeCode',
  656. width: 120
  657. },
  658. {
  659. title: '商品编码',
  660. dataIndex: 'productCode',
  661. width: 100
  662. },
  663. {
  664. title: '商品名称',
  665. dataIndex: 'productName',
  666. width: 100
  667. },
  668. {
  669. title: '规格型号',
  670. dataIndex: 'specModel',
  671. width: 100
  672. },
  673. {
  674. title: '申报数量',
  675. dataIndex: 'sbNum',
  676. width: 100
  677. },
  678. {
  679. title: '申报计量单位',
  680. dataIndex: 'declareUnit',
  681. width: 160
  682. },
  683. {
  684. title: '企业申报单价',
  685. dataIndex: 'companySbPrice',
  686. width: 160
  687. },
  688. {
  689. title: '企业申报总价',
  690. dataIndex: 'companySbCount',
  691. width: 160
  692. },
  693. {
  694. title: '备案单价',
  695. dataIndex: 'recordPrice',
  696. width: 100
  697. },
  698. {
  699. title: '备案总价',
  700. dataIndex: 'recordTotalPrice',
  701. width: 100
  702. },
  703. {
  704. title: '币制',
  705. dataIndex: 'currency',
  706. width: 100
  707. },
  708. {
  709. title: '原产国(地区)',
  710. dataIndex: 'originCountry',
  711. width: 160
  712. },
  713. {
  714. title: '法定数量',
  715. dataIndex: 'legalQuantity',
  716. width: 100
  717. },
  718. {
  719. title: '法定计量单位',
  720. dataIndex: 'legalUnit',
  721. width: 160
  722. },
  723. {
  724. title: '第二法定数量',
  725. dataIndex: 'secondLegalQuantity',
  726. width: 160
  727. },
  728. {
  729. title: '法定第二计量',
  730. dataIndex: 'legalSecondUnit',
  731. width: 160
  732. },
  733. {
  734. title: '美元统计总金额',
  735. dataIndex: 'myCount',
  736. width: 160
  737. },
  738. {
  739. title: '重量比例因子',
  740. dataIndex: 'weightRatioFactor',
  741. width: 160
  742. },
  743. {
  744. title: '第一比例因子',
  745. dataIndex: 'firstRatioFactor',
  746. width: 160
  747. },
  748. {
  749. title: '第二比例因子',
  750. dataIndex: 'secondRatioFactor',
  751. width: 160
  752. },
  753. {
  754. title: '毛重',
  755. dataIndex: 'grossWeight',
  756. width: 100
  757. },
  758. {
  759. title: '净重',
  760. dataIndex: 'netWeight',
  761. width: 100
  762. },
  763. {
  764. title: '征免方式',
  765. dataIndex: 'zmMethod',
  766. width: 160
  767. },
  768. {
  769. title: '最终目的国(地区)',
  770. dataIndex: 'zzmdg',
  771. width: 160
  772. },
  773. {
  774. title: '监管年限到期日',
  775. dataIndex: 'jgnxDqr',
  776. width: 160
  777. },
  778. {
  779. title: '监管年限起始日',
  780. dataIndex: 'jgnxQsr',
  781. width: 160
  782. },
  783. {
  784. title: '进账库存数量',
  785. dataIndex: 'jzkcNum',
  786. width: 160
  787. },
  788. {
  789. title: '监管年限自用数量',
  790. dataIndex: 'jgnxZysl',
  791. width: 160
  792. },
  793. {
  794. title: '解除年限数量(已解除监管/总数)',
  795. dataIndex: 'jcjgslYjc',
  796. width: 240
  797. },
  798. {
  799. title: '到期解除监管数量',
  800. dataIndex: 'dqjcjgsl',
  801. width: 160
  802. },
  803. {
  804. title: '解除年限数量(二线出区)',
  805. dataIndex: 'jcjgslSecondline',
  806. width: 200
  807. },
  808. {
  809. title: '解除监管数量(补税)',
  810. dataIndex: 'jcjgslBs',
  811. width: 200
  812. },
  813. {
  814. title: '解除监管数量(区内转让)',
  815. dataIndex: 'jcjgslQnzr',
  816. width: 200
  817. },
  818. {
  819. title: '解除监管数量(转至区外)',
  820. dataIndex: 'jcjgslZzqw',
  821. width: 200
  822. },
  823. {
  824. title: '解除监管数量(基建物资核销)',
  825. dataIndex: 'jcjgslJjwzhx',
  826. width: 220
  827. },
  828. {
  829. title: '监管年限内区内转移数量',
  830. dataIndex: 'jgnxnQnzysl',
  831. width: 200
  832. },
  833. {
  834. title: '监管年限内抵押贷款数量',
  835. dataIndex: 'jgnxnDydksl',
  836. width: 200
  837. },
  838. {
  839. title: '监管年限内临时移作他用数量',
  840. dataIndex: 'jgnxnLszztysl',
  841. width: 220
  842. },
  843. {
  844. title: '修改标志',
  845. dataIndex: 'xgbz',
  846. width: 100
  847. },
  848. {
  849. title: '操作',
  850. dataIndex: 'action',
  851. width: 200,
  852. fixed: 'right'
  853. },
  854. ]
  855. const onBodyReset = () => {
  856. bodyFormRef.value?.resetFields()
  857. bodyData.value = {
  858. recordCode: formData.value.tzCode,
  859. specModel: 0
  860. }
  861. }
  862. const onBodyAdd = () => {
  863. bodyFormRef.value
  864. .validate()
  865. .then(() => {
  866. bodyList.value.push(Object.assign({id: new Date().getTime()}, bodyData.value))
  867. onBodyReset()
  868. message.success('插入表体信息成功!')
  869. })
  870. .catch(() => {
  871. })
  872. }
  873. const onBodyEdit = () => {
  874. bodyFormRef.value
  875. .validate()
  876. .then(() => {
  877. let k = 'id'
  878. if (k) {
  879. bodyList.value.forEach(v => {
  880. if (v[k] === bodyData.value[k]) {
  881. Object.assign(v, bodyData.value)
  882. }
  883. })
  884. }
  885. onBodyReset()
  886. message.success('编辑表体信息成功!')
  887. })
  888. .catch(() => {
  889. })
  890. }
  891. const onBodyDel = (recode, index) => {
  892. Modal.confirm({
  893. title: '提示',
  894. icon: createVNode(ExclamationCircleOutlined),
  895. content: createVNode('div', {style: 'color:red;'}, `是否要删除${record.productName}?`),
  896. centered: true,
  897. onOk() {
  898. bodyList.value.splice(index, 1)
  899. },
  900. onCancel() {
  901. },
  902. });
  903. }
  904. const deleteBatchBody = () => {
  905. bodyList.value = bodyList.value.filter(v => {
  906. let flag = true
  907. bodySelectedRowKeys.value.forEach(s => {
  908. if ((v.id && (v.id === s.id))) {
  909. flag = false
  910. }
  911. })
  912. return flag
  913. })
  914. }
  915. const ref_upload = ref()
  916. const fileData = ref({})
  917. const showFileUpload = ref(true)
  918. const fileSelectedRowKeys = ref([])
  919. const fileList = ref([])
  920. // 列表选择配置
  921. const fileOptions = {
  922. rowSelection: {
  923. onChange: (selectedRowKey, selectedRows) => {
  924. fileSelectedRowKeys.value = selectedRows
  925. }
  926. }
  927. }
  928. const fileColumns = [
  929. {
  930. title: '附件名称',
  931. dataIndex: 'attachmentName',
  932. },
  933. {
  934. title: '附件格式',
  935. dataIndex: 'attachmentFormat',
  936. },
  937. {
  938. title: '附件内容',
  939. dataIndex: 'attachmentContent',
  940. },
  941. {
  942. title: '上传时间',
  943. dataIndex: 'uploadTime',
  944. },
  945. {
  946. title: '操作',
  947. dataIndex: 'action',
  948. },
  949. ]
  950. const getFileExtension = (filename) => {
  951. // 使用lastIndexOf查找最后一个"."的位置
  952. var dotIndex = filename.lastIndexOf(".");
  953. // 如果找到了".",则提取从"."之后的子串作为后缀名
  954. if (dotIndex !== -1 && dotIndex < filename.length - 1) { // 确保"."不是字符串的最后一个字符
  955. return filename.slice(dotIndex + 1); // slice从dotIndex+1开始到字符串结束
  956. } else {
  957. // 如果没有找到".",返回空字符串表示没有后缀
  958. return "";
  959. }
  960. }
  961. const fileChange = (file) => {
  962. if (file) {
  963. const f = ref_upload.value.uploadFileList()[0]
  964. fileList.value.push({
  965. id: new Date().getTime(),
  966. attachmentUrl: f.url,
  967. attachmentName: f.name,
  968. attachmentFormat: getFileExtension(f.name),
  969. attachmentContent: '',
  970. uploadTime: proxy.$util.YMDHms(new Date()),
  971. })
  972. fileData.value.fileUrl = ''
  973. showFileUpload.value = false
  974. setTimeout(() => {
  975. showFileUpload.value = true
  976. }, 0)
  977. }
  978. }
  979. const onFileDel = (recode, index) => {
  980. Modal.confirm({
  981. title: '提示',
  982. icon: createVNode(ExclamationCircleOutlined),
  983. content: createVNode('div', {style: 'color:red;'}, `是否要删除?`),
  984. centered: true,
  985. onOk() {
  986. fileList.value.splice(index, 1)
  987. },
  988. onCancel() {
  989. },
  990. });
  991. }
  992. const deleteBatchFile = () => {
  993. fileList.value = fileList.value.filter(v => {
  994. let flag = true
  995. fileSelectedRowKeys.value.forEach(s => {
  996. if ((v.id && (v.id === s.id))) {
  997. flag = false
  998. }
  999. })
  1000. return flag
  1001. })
  1002. }
  1003. const onChangTz = (val) => {
  1004. if (val) {
  1005. const obj = tzOptions.value.filter(v => v.tzCode === val)[0]
  1006. formData.value.tzNature = obj.tzType
  1007. formData.value.companyCode = obj.companyCode
  1008. formData.value.companyMainHgCode = obj.companyMainHgCode
  1009. qySecondLineInHzdApi.qysecondlinehzdrqtzQyProductById({id: obj.id}).then(res => {
  1010. bodyListOptions.value = res.map(v => Object.assign(v, {label: v.productNum, value: v.productNum}))
  1011. bodyList.value = []
  1012. onBodyReset()
  1013. })
  1014. } else {
  1015. formData.value.tzNature = ''
  1016. formData.value.companyCode = ''
  1017. formData.value.companyMainHgCode = ''
  1018. bodyList.value = []
  1019. bodyListOptions.value = []
  1020. onBodyReset()
  1021. }
  1022. }
  1023. const onChangGlqdbh = (val) => {
  1024. if (val) {
  1025. const obj = glqdbhOptions.value.filter(v => v.value === val)[0]
  1026. formData.value.dybgCode = obj.dybgCode
  1027. formData.value.dybgDept = obj.dybgDept
  1028. } else {
  1029. formData.value.dybgCode = ''
  1030. formData.value.dybgDept = ''
  1031. }
  1032. }
  1033. const onChangProductOrderCode = (val) => {
  1034. if (val) {
  1035. const obj = bodyListOptions.value.filter(v => v.value === val)[0]
  1036. bodyData.value.bgdProductOrderCode = obj.productNum
  1037. bodyData.value.productCode = obj.productCode
  1038. bodyData.value.productName = obj.productName
  1039. console.log(obj)
  1040. } else {
  1041. }
  1042. }
  1043. const onChangeSbNum = () => {
  1044. setTimeout(() => {
  1045. if (proxy.$util.isValue(bodyData.value.sbNum) && proxy.$util.isValue(bodyData.value.legalQuantity) && (Number(bodyData.value.legalQuantity) > 0)) {
  1046. bodyData.value.weightRatioFactor = (Number(bodyData.value.sbNum) / Number(bodyData.value.legalQuantity)).toFixed(2)
  1047. } else {
  1048. bodyData.value.weightRatioFactor = ''
  1049. }
  1050. }, 100)
  1051. }
  1052. const onChangeLegalQuantity = () => {
  1053. setTimeout(() => {
  1054. if (proxy.$util.isValue(bodyData.value.sbNum) && proxy.$util.isValue(bodyData.value.legalQuantity) && (Number(bodyData.value.legalQuantity) > 0)) {
  1055. bodyData.value.weightRatioFactor = (Number(bodyData.value.sbNum) / Number(bodyData.value.legalQuantity)).toFixed(2)
  1056. } else {
  1057. bodyData.value.weightRatioFactor = ''
  1058. }
  1059. bodyData.value.firstRatioFactor = bodyData.value.weightRatioFactor
  1060. }, 100)
  1061. }
  1062. const onChangeJgnxQsr = (val) => {
  1063. bodyData.value.jgnxDqr = proxy.$util.YMDHms(new Date(val).getTime() + 1000 * 60 * 60 * 24 * 365 * 3)
  1064. }
  1065. // 抛出函数
  1066. defineExpose({
  1067. onOpen
  1068. })
  1069. </script>
  1070. <style lang="less" scoped>
  1071. .file-tips {
  1072. background-color: rgb(235, 245, 255);
  1073. border: 1px solid rgb(214, 235, 255);
  1074. border-radius: 5px;
  1075. color: rgb(153, 153, 153);
  1076. padding: 10px 20px;
  1077. margin-bottom: 10px;
  1078. }
  1079. </style>