Contract.vue 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085
  1. <template>
  2. <div style="width: 100%; padding: 0px 15px">
  3. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  4. <template #seller>
  5. <div style="width: 100%">
  6. <el-form-item prop="sellCorporationId">
  7. <el-select v-model="formData.data.sellCorporationId" style="width: 100%" disabled>
  8. <el-option v-for="item in corporationList" :key="item.value" :label="item.label" :value="item.value" />
  9. </el-select>
  10. </el-form-item>
  11. <el-row style="margin-top: 20px; width: 100%">
  12. <el-col :span="8">
  13. <el-form-item label="地址" prop="sellCountryName">
  14. <el-input v-model="formData.data.sellCountryName" placeholder="请输入国家" />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="8">
  18. <el-form-item label=" " prop="sellProvinceName">
  19. <el-input v-model="formData.data.sellProvinceName" placeholder="请输入省/州" />
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="8">
  23. <el-form-item label=" " prop="sellCityName">
  24. <el-input v-model="formData.data.sellCityName" placeholder="请输入城市" />
  25. </el-form-item>
  26. </el-col>
  27. </el-row>
  28. <el-row style="margin-top: 20px; width: 100%">
  29. <el-col :span="24">
  30. <el-form-item prop="sellAddress">
  31. <el-input v-model="formData.data.sellAddress" type="textarea"> </el-input>
  32. </el-form-item>
  33. </el-col>
  34. </el-row>
  35. <el-row style="margin-top: 20px; width: 100%">
  36. <el-col :span="8">
  37. <el-form-item label="联系人" prop="sellContactName">
  38. <el-input v-model="formData.data.sellContactName" placeholder="请输入联系人" />
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="16">
  42. <el-form-item label=" " prop="sellContactNumber">
  43. <el-input v-model="formData.data.sellContactNumber" placeholder="请输入联系人电话" />
  44. </el-form-item>
  45. </el-col>
  46. </el-row>
  47. </div>
  48. </template>
  49. <template #buyer>
  50. <div style="width: 100%">
  51. <div style="width: 100%">
  52. <el-form-item prop="buyCorporationId">
  53. <el-select v-model="formData.data.buyCorporationId" style="width: 100%" @change="changeCustomer">
  54. <el-option v-for="item in customerList" :key="item.value" :label="item.label" :value="item.value" />
  55. </el-select>
  56. </el-form-item>
  57. <el-row style="margin-top: 20px; width: 100%">
  58. <el-col :span="6">
  59. <el-form-item label="地址" prop="countryId">
  60. <el-select v-model="formData.data.countryId" placeholder="国家" filterable allow-create @change="(val) => getCityData(val, '20', true)">
  61. <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id"> </el-option>
  62. </el-select>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :span="6">
  66. <el-form-item label=" " prop="provinceName">
  67. <selectCity
  68. placeholder="省/洲"
  69. @change="(val) => getCityData(val, '30', true)"
  70. addressId="provinceId"
  71. addressName="provinceName"
  72. v-model="formData.data"
  73. :data="provinceData">
  74. </selectCity>
  75. </el-form-item>
  76. </el-col>
  77. <el-col :span="6">
  78. <el-form-item label=" " prop="cityName">
  79. <selectCity placeholder="城市" addressId="cityId" addressName="cityName" v-model="formData.data" :data="cityData"> </selectCity>
  80. </el-form-item>
  81. </el-col>
  82. <el-col :span="6">
  83. <el-form-item label=" " prop="buyPostalCode">
  84. <el-input v-model="formData.data.buyPostalCode" placeholder="请输入邮编" />
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. <el-row style="margin-top: 20px; width: 100%">
  89. <el-col :span="24">
  90. <el-form-item prop="buyAddress">
  91. <el-input v-model="formData.data.buyAddress" type="textarea"> </el-input>
  92. </el-form-item>
  93. </el-col>
  94. </el-row>
  95. <el-row style="margin-top: 20px; width: 100%">
  96. <el-col :span="8">
  97. <el-form-item label="联系人" prop="buyContactName">
  98. <el-autocomplete
  99. v-model="formData.data.buyContactName"
  100. :fetch-suggestions="querySearchPerson"
  101. clearable
  102. class="inline-input w-50"
  103. placeholder="请输入联系人"
  104. @select="handlePerson">
  105. </el-autocomplete>
  106. </el-form-item>
  107. </el-col>
  108. <el-col :span="16">
  109. <el-form-item label=" " prop="buyContactNumber">
  110. <el-input v-model="formData.data.buyContactNumber" placeholder="请输入联系人电话" />
  111. </el-form-item>
  112. </el-col>
  113. </el-row>
  114. </div>
  115. </div>
  116. </template>
  117. <template #commodity>
  118. <div style="width: 100%">
  119. <el-button @click="openProduct = true">添加商品</el-button>
  120. <el-table :data="formData.data.contractProductList" style="width: 100%; margin-top: 16px">
  121. <el-table-column label="商品图片" width="80">
  122. <template #default="{ row }">
  123. <div v-if="row.productId">
  124. <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
  125. </div>
  126. <div v-else></div>
  127. </template>
  128. </el-table-column>
  129. <el-table-column prop="code" label="商品编码" width="120" />
  130. <el-table-column label="商品名称" min-width="200">
  131. <template #default="{ row, $index }">
  132. <div style="width: 100%">
  133. <el-form-item :prop="'contractProductList.' + $index + '.productName'" :rules="rules.productName" :inline-message="true">
  134. <el-input v-model="row.productName" placeholder="请输入商品名称" />
  135. </el-form-item>
  136. </div>
  137. </template>
  138. </el-table-column>
  139. <el-table-column label="规格型号" width="180">
  140. <template #default="{ row, $index }">
  141. <div style="width: 100%">
  142. <el-form-item :prop="'contractProductList.' + $index + '.productModel'" :rules="rules.productModel" :inline-message="true">
  143. <el-input v-model="row.productModel" placeholder="请输入规格型号" />
  144. </el-form-item>
  145. </div>
  146. </template>
  147. </el-table-column>
  148. <el-table-column prop="unit" label="单位" width="100" />
  149. <el-table-column label="数量" width="160">
  150. <template #default="{ row, $index }">
  151. <div style="width: 100%">
  152. <el-form-item :prop="'contractProductList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true">
  153. <el-input-number
  154. v-model="row.quantity"
  155. placeholder="请输入数量"
  156. style="width: 100%"
  157. :precision="0"
  158. :controls="false"
  159. :min="0"
  160. @change="calculationAmount()" />
  161. </el-form-item>
  162. </div>
  163. </template>
  164. </el-table-column>
  165. <el-table-column label="单价" width="160">
  166. <template #default="{ row, $index }">
  167. <div style="width: 100%">
  168. <el-form-item :prop="'contractProductList.' + $index + '.price'" :rules="rules.price" :inline-message="true">
  169. <el-input-number
  170. v-model="row.price"
  171. placeholder="请输入单价"
  172. style="width: 100%"
  173. :precision="2"
  174. :controls="false"
  175. :min="0"
  176. @change="calculationAmount()" />
  177. </el-form-item>
  178. </div>
  179. </template>
  180. </el-table-column>
  181. <el-table-column prop="amount" label="金额" width="140" />
  182. <el-table-column align="center" label="操作" width="120" fixed="right">
  183. <template #default="{ row, $index }">
  184. <el-button type="primary" link @click="handleHandover(row, $index)">交接单</el-button>
  185. <el-button type="primary" link @click="handleRemove($index, row)">删除</el-button>
  186. </template>
  187. </el-table-column>
  188. </el-table>
  189. </div>
  190. </template>
  191. <template #otherCharge>
  192. <div style="width: 100%">
  193. <el-button type="primary" @click="clickAdd()">添加行</el-button>
  194. <el-table :data="formData.data.contractProjectList" style="width: 100%; margin-top: 16px">
  195. <el-table-column label="收费项目" width="220">
  196. <template #default="{ row, $index }">
  197. <div style="width: 100%">
  198. <el-form-item :prop="'contractProjectList.' + $index + '.payName'" :rules="rules.payName" :inline-message="true">
  199. <el-autocomplete v-model="row.payName" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="请输入收费项目" />
  200. </el-form-item>
  201. </div>
  202. </template>
  203. </el-table-column>
  204. <el-table-column label="金额" width="180">
  205. <template #default="{ row, $index }">
  206. <div style="width: 100%">
  207. <el-form-item :prop="'contractProjectList.' + $index + '.amount'" :rules="rules.amount" :inline-message="true">
  208. <el-input-number
  209. v-model="row.amount"
  210. placeholder="请输入金额"
  211. style="width: 100%"
  212. :precision="2"
  213. :controls="false"
  214. :min="0"
  215. @change="totalAmount()" />
  216. </el-form-item>
  217. </div>
  218. </template>
  219. </el-table-column>
  220. <el-table-column label="备注">
  221. <template #default="{ row, $index }">
  222. <div style="width: 100%">
  223. <el-form-item :prop="'contractProjectList.' + $index + '.remark'">
  224. <el-input v-model="row.remark" placeholder="请输入备注" />
  225. </el-form-item>
  226. </div>
  227. </template>
  228. </el-table-column>
  229. <el-table-column align="center" label="操作" width="80" fixed="right">
  230. <template #default="{ row, $index }">
  231. <el-button type="primary" link @click="handleDelete($index)">删除</el-button>
  232. </template>
  233. </el-table-column>
  234. </el-table>
  235. </div>
  236. </template>
  237. <template #offerMoney>
  238. <div style="width: 100%">
  239. <el-row style="margin-top: 20px; width: 100%">
  240. <el-col :span="4">
  241. <el-form-item label="币种" prop="currency">
  242. <el-select v-model="formData.data.currency" placeholder="请选择币种" style="width: 100%">
  243. <el-option v-for="item in accountCurrency" :key="item.value" :label="item.label" :value="item.value" />
  244. </el-select>
  245. </el-form-item>
  246. </el-col>
  247. <el-col :span="6">
  248. <el-form-item label="合同总金额" prop="amount">
  249. <el-input v-model="formData.data.amount" placeholder="合同总金额" disabled />
  250. </el-form-item>
  251. </el-col>
  252. <el-col :span="4">
  253. <el-form-item label="报价有效期 (天)" prop="effective">
  254. <el-input-number v-model="formData.data.effective" placeholder="请输入有效期" style="width: 100%" :precision="0" :controls="false" :min="0" />
  255. </el-form-item>
  256. </el-col>
  257. </el-row>
  258. <el-row style="margin-top: 20px; width: 100%">
  259. <el-col :span="7">
  260. <el-form-item label="付款方式" prop="paymentMethod">
  261. <el-select v-model="formData.data.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
  262. <el-option v-for="item in fundsPaymentMethod" :key="item.value" :label="item.label" :value="item.value" />
  263. </el-select>
  264. </el-form-item>
  265. </el-col>
  266. <el-col :span="7">
  267. <el-form-item label="预付比例 (%)" prop="advanceRatio">
  268. <el-input-number
  269. v-model="formData.data.advanceRatio"
  270. placeholder="请输入预付比例"
  271. style="width: 100%"
  272. :precision="2"
  273. :controls="false"
  274. :min="0"
  275. :max="100" />
  276. </el-form-item>
  277. </el-col>
  278. <el-col :span="7">
  279. <el-form-item label="收款账号" prop="shroffAccountId">
  280. <el-select v-model="formData.data.shroffAccountId" placeholder="请选择收款账号" style="width: 100%" @change="changeShroffAccount">
  281. <el-option v-for="item in accountList" :key="item.value" :label="item.label" :value="item.value" />
  282. </el-select>
  283. </el-form-item>
  284. </el-col>
  285. <el-col :span="3">
  286. <el-form-item label=" ">
  287. <el-button type="primary" @click="changeActiveName" text>
  288. <span v-if="activeName == '1'">收起</span>
  289. <span v-else>展开</span>
  290. </el-button>
  291. </el-form-item>
  292. </el-col>
  293. </el-row>
  294. <div style="width: 100%; margin-top: 34px">
  295. <el-collapse v-model="activeName" class="hideCollapse" accordion>
  296. <el-collapse-item title="" name="1">
  297. <el-row style="width: 100%">
  298. <el-col :span="9">
  299. <el-form-item label="Beneficiary Name" prop="beneficiaryName">
  300. <el-input v-model="formData.data.beneficiaryName" placeholder="请输入Beneficiary Name" />
  301. </el-form-item>
  302. <div style="height: 20px"></div>
  303. <el-form-item label="Beneficiary Bank" prop="beneficiaryBank">
  304. <el-input v-model="formData.data.beneficiaryBank" placeholder="请输入Beneficiary Bank" />
  305. </el-form-item>
  306. <div style="height: 20px"></div>
  307. <el-form-item label="Beneficiary Bank Address" prop="beneficiaryBankAddress">
  308. <el-input v-model="formData.data.beneficiaryBankAddress" placeholder="请输入Beneficiary Bank Address" />
  309. </el-form-item>
  310. </el-col>
  311. <el-col :span="9">
  312. <el-form-item label="Beneficiary Account Number" prop="beneficiaryAccountNumber">
  313. <el-input v-model="formData.data.beneficiaryAccountNumber" placeholder="请输入Beneficiary Account Number" />
  314. </el-form-item>
  315. <div style="height: 20px"></div>
  316. <el-form-item label="Swift Code" prop="swiftCode">
  317. <el-input v-model="formData.data.swiftCode" placeholder="请输入Swift Code" />
  318. </el-form-item>
  319. <div style="height: 20px"></div>
  320. <el-form-item label="Beneficiary Address" prop="beneficiaryAddress">
  321. <el-input v-model="formData.data.beneficiaryAddress" placeholder="请输入Beneficiary Address" />
  322. </el-form-item>
  323. </el-col>
  324. </el-row>
  325. </el-collapse-item>
  326. </el-collapse>
  327. </div>
  328. </div>
  329. </template>
  330. <template #delivery>
  331. <div style="width: 100%">
  332. <el-row style="margin-top: 20px; width: 100%">
  333. <el-col :span="7">
  334. <el-form-item label="贸易方式" prop="tradeMethods">
  335. <el-select v-model="formData.data.tradeMethods" placeholder="请选择贸易方式" style="width: 100%">
  336. <el-option v-for="item in tradeMethods" :key="item.value" :label="item.label" :value="item.value" />
  337. </el-select>
  338. </el-form-item>
  339. </el-col>
  340. </el-row>
  341. <el-row style="margin-top: 20px; width: 100%">
  342. <el-col :span="7">
  343. <el-form-item label="运输方式" prop="transportMethod">
  344. <el-select v-model="formData.data.transportMethod" placeholder="请选择运输方式" style="width: 100%">
  345. <el-option v-for="item in shippingMethod" :key="item.value" :label="item.label" :value="item.value" />
  346. </el-select>
  347. </el-form-item>
  348. </el-col>
  349. <el-col :span="7">
  350. <el-form-item label="运输说明" prop="transportRemark">
  351. <el-input v-model="formData.data.transportRemark" placeholder="请输入运输说明" />
  352. </el-form-item>
  353. </el-col>
  354. </el-row>
  355. <el-row style="margin-top: 20px; width: 100%">
  356. <el-col :span="14">
  357. <el-form-item label="付款条件" prop="remark">
  358. <el-input v-model="formData.data.remark" :rows="2" type="textarea" placeholder="请输入付款条件" />
  359. </el-form-item>
  360. </el-col>
  361. </el-row>
  362. <el-row style="margin-top: 20px; width: 100%">
  363. <el-col :span="7">
  364. <el-form-item label="交货期限" prop="deliveryTime">
  365. <el-date-picker v-model="formData.data.deliveryTime" type="date" placeholder="请选择交货期限" value-format="YYYY-MM-DD" />
  366. </el-form-item>
  367. </el-col>
  368. <el-col :span="7">
  369. <el-form-item label="质保期 (天)" prop="warranty">
  370. <el-input-number v-model="formData.data.warranty" placeholder="请输入质保期" style="width: 100%" :precision="0" :controls="false" :min="0" />
  371. </el-form-item>
  372. </el-col>
  373. </el-row>
  374. </div>
  375. </template>
  376. <template #shipment>
  377. <div style="width: 100%">
  378. <el-table :data="formData.data.contractShipmentList" style="width: 100%; margin-top: 16px">
  379. <el-table-column prop="code" label="商品编码" width="120" />
  380. <el-table-column prop="productName" label="商品名称" />
  381. <el-table-column label="出货日期" width="220">
  382. <template #default="{ row, $index }">
  383. <div style="width: 100%">
  384. <el-form-item :prop="'contractShipmentList.' + $index + '.shipmentTime'" :rules="rules.shipmentTime" :inline-message="true">
  385. <el-date-picker v-model="row.shipmentTime" type="date" placeholder="请选择出货日期" value-format="YYYY-MM-DD" />
  386. </el-form-item>
  387. </div>
  388. </template>
  389. </el-table-column>
  390. <el-table-column label="数量" width="160">
  391. <template #default="{ row, $index }">
  392. <div style="width: 100%">
  393. <el-form-item :prop="'contractShipmentList.' + $index + '.quantity'" :inline-message="true">
  394. <el-input-number
  395. v-model="row.quantity"
  396. placeholder="请输入数量"
  397. style="width: 100%"
  398. :precision="0"
  399. :controls="false"
  400. :min="0"
  401. @change="calculationAmount()" />
  402. </el-form-item>
  403. </div>
  404. </template>
  405. </el-table-column>
  406. <el-table-column align="center" label="操作" width="120" fixed="right">
  407. <template #default="{ row, $index }">
  408. <el-button type="primary" link @click="clickSplit(row)">拆分</el-button>
  409. <el-button type="primary" link @click="clickDelete($index)">删除</el-button>
  410. </template>
  411. </el-table-column>
  412. </el-table>
  413. </div>
  414. </template>
  415. </byForm>
  416. <el-dialog v-model="openProduct" title="选择商品" width="70%" append-to-body>
  417. <SelectGoods @cancel="openProduct = false" @pushGoods="pushGoods"></SelectGoods>
  418. </el-dialog>
  419. <el-dialog title="交接单" v-if="openHandover" v-model="openHandover" width="800">
  420. <byForm :formConfig="formHandoverConfig" :formOption="formOption" v-model="productRow.data">
  421. <template #remark>
  422. <div style="width: 100%">
  423. <Editor :value="productRow.data.remark" @updateValue="updateContent" />
  424. </div>
  425. </template>
  426. <template #file>
  427. <div style="width: 100%">
  428. <el-upload
  429. v-model:fileList="fileList"
  430. action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
  431. :data="uploadData"
  432. multiple
  433. :before-upload="uploadFile"
  434. :on-success="handleSuccess"
  435. :on-preview="onPreviewFile">
  436. <el-button>选择</el-button>
  437. </el-upload>
  438. </div>
  439. </template>
  440. </byForm>
  441. <template #footer>
  442. <el-button @click="openHandover = false" size="large">取 消</el-button>
  443. <el-button type="primary" @click="submitHandoverForm()" size="large">确 定</el-button>
  444. </template>
  445. </el-dialog>
  446. </div>
  447. </template>
  448. <script setup>
  449. import byForm from "@/components/byForm/index";
  450. import SelectGoods from "@/components/product/SelectGoods";
  451. import { ElMessage } from "element-plus";
  452. import Editor from "@/components/Editor/index.vue";
  453. import selectCity from "@/components/selectCity/index.vue";
  454. const { proxy } = getCurrentInstance();
  455. const contractType = ref([]);
  456. const accountCurrency = ref([]);
  457. const fundsPaymentMethod = ref([]);
  458. const tradeMethods = ref([]);
  459. const shippingMethod = ref([]);
  460. const templateList = ref([]);
  461. const corporationList = ref([]);
  462. const customerList = ref([]);
  463. const countryData = ref([]);
  464. const provinceData = ref([]);
  465. const cityData = ref([]);
  466. const customerUserList = ref([]);
  467. const accountList = ref([]);
  468. const openProduct = ref(false);
  469. const activeName = ref("");
  470. const formData = reactive({
  471. data: {
  472. amount: undefined,
  473. contractProductList: [],
  474. contractProjectList: [],
  475. contractShipmentList: [],
  476. },
  477. });
  478. const submit = ref(null);
  479. const formOption = reactive({
  480. inline: true,
  481. labelWidth: 100,
  482. itemWidth: 100,
  483. rules: [],
  484. });
  485. const formConfig = computed(() => {
  486. return [
  487. {
  488. label: "合同模板",
  489. },
  490. {
  491. type: "select",
  492. label: "合同类型",
  493. prop: "contractType",
  494. data: contractType.value,
  495. itemWidth: 25,
  496. },
  497. {
  498. type: "select",
  499. label: "选择合同模板",
  500. prop: "contractTemplateId",
  501. data: templateList.value,
  502. fn: (val) => {
  503. changeTemplate(val);
  504. },
  505. itemWidth: 26,
  506. },
  507. {
  508. type: "slot",
  509. slotName: "seller",
  510. label: "卖方信息",
  511. itemWidth: 50,
  512. },
  513. {
  514. type: "slot",
  515. slotName: "buyer",
  516. label: "买方信息",
  517. itemWidth: 50,
  518. },
  519. {
  520. type: "slot",
  521. slotName: "commodity",
  522. label: "商品信息",
  523. },
  524. {
  525. type: "slot",
  526. slotName: "otherCharge",
  527. label: "其他收费项目",
  528. },
  529. {
  530. type: "slot",
  531. slotName: "offerMoney",
  532. label: "收款信息",
  533. },
  534. {
  535. type: "slot",
  536. slotName: "delivery",
  537. label: "交付信息",
  538. },
  539. {
  540. type: "slot",
  541. slotName: "shipment",
  542. label: "出货计划",
  543. },
  544. ];
  545. });
  546. const rules = ref({
  547. contractType: [{ required: true, message: "请选择合同类型", trigger: "change" }],
  548. contractTemplateId: [{ required: true, message: "请选择合同模板", trigger: "change" }],
  549. buyCorporationId: [{ required: true, message: "请选择公司", trigger: "change" }],
  550. countryId: [{ required: true, message: "请选择国家", trigger: "change" }],
  551. buyContactName: [{ required: true, message: "请输入联系人", trigger: ["change", "blur"] }],
  552. buyContactNumber: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  553. productName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  554. productModel: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
  555. quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  556. price: [{ required: true, message: "请输入单价", trigger: "blur" }],
  557. amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
  558. payName: [{ required: true, message: "请输入收费项目", trigger: ["change", "blur"] }],
  559. shipmentTime: [{ required: true, message: "请选择出货日期", trigger: ["change", "blur"] }],
  560. currency: [{ required: true, message: "请选择币种", trigger: "change" }],
  561. effective: [{ required: true, message: "请输入报价有效期", trigger: "blur" }],
  562. deliveryTime: [{ required: true, message: "请选择交货期限", trigger: "change" }],
  563. paymentMethod: [{ required: true, message: "请选择付款方式", trigger: "change" }],
  564. advanceRatio: [{ required: true, message: "请输入预付比例", trigger: "blur" }],
  565. shroffAccountId: [{ required: true, message: "请选择收款账号", trigger: "change" }],
  566. tradeMethods: [{ required: true, message: "请选择贸易方式", trigger: "change" }],
  567. transportMethod: [{ required: true, message: "请选择运输方式", trigger: "change" }],
  568. transportRemark: [{ required: true, message: "请输入运输说明", trigger: "blur" }],
  569. remark: [{ required: true, message: "请输入付款条件", trigger: "blur" }],
  570. });
  571. const getDict = () => {
  572. proxy.getDictOne(["account_currency", "funds_payment_method", "trade_methods", "shipping_method", "contract_type"]).then((res) => {
  573. accountCurrency.value = res["account_currency"].map((x) => ({
  574. label: x.dictValue,
  575. value: x.dictKey,
  576. }));
  577. fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
  578. label: x.dictValue,
  579. value: x.dictKey,
  580. }));
  581. tradeMethods.value = res["trade_methods"].map((x) => ({
  582. label: x.dictValue,
  583. value: x.dictKey,
  584. }));
  585. shippingMethod.value = res["shipping_method"].map((x) => ({
  586. label: x.dictValue,
  587. value: x.dictKey,
  588. }));
  589. contractType.value = res["contract_type"].map((x) => ({
  590. label: x.dictValue,
  591. value: x.dictKey,
  592. }));
  593. });
  594. proxy.post("/contractTemplate/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  595. templateList.value = res.rows.map((item) => {
  596. return {
  597. ...item,
  598. label: item.templateName,
  599. value: item.id,
  600. };
  601. });
  602. });
  603. proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  604. corporationList.value = res.rows.map((item) => {
  605. return {
  606. ...item,
  607. label: item.name,
  608. value: item.id,
  609. };
  610. });
  611. });
  612. proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  613. customerList.value = res.rows.map((item) => {
  614. return {
  615. ...item,
  616. label: item.name,
  617. value: item.id,
  618. };
  619. });
  620. });
  621. proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  622. accountList.value = res.rows.map((item) => {
  623. return {
  624. ...item,
  625. label: item.alias,
  626. value: item.id,
  627. };
  628. });
  629. });
  630. };
  631. getDict();
  632. const changeTemplate = (val) => {
  633. formData.data.sellCorporationId = "";
  634. formData.data.sellContactName = "";
  635. formData.data.sellContactNumber = "";
  636. formData.data.sellCountryName = "";
  637. formData.data.sellProvinceName = "";
  638. formData.data.sellCityName = "";
  639. formData.data.sellAddress = "";
  640. if (val) {
  641. proxy.post("/contractTemplate/detail", { id: val }).then((res) => {
  642. formData.data.sellCorporationId = res.corporationId;
  643. if (res.corporationId) {
  644. proxy.post("/corporation/detail", { id: res.corporationId }).then((detailCorporation) => {
  645. proxy.post("/customizeArea/list", { parentId: "0" }).then((resCountry) => {
  646. let sellCountryData = resCountry.filter((item) => item.id === detailCorporation.countryId);
  647. if (sellCountryData && sellCountryData.length > 0) {
  648. formData.data.sellCountryName = sellCountryData[0].chineseName;
  649. } else {
  650. formData.data.sellCountryName = "";
  651. }
  652. });
  653. if (detailCorporation.countryId) {
  654. proxy.post("/customizeArea/list", { parentId: detailCorporation.countryId }).then((resProvince) => {
  655. let sellProvinceData = resProvince.filter((item) => item.id === detailCorporation.provinceId);
  656. if (sellProvinceData && sellProvinceData.length > 0) {
  657. formData.data.sellProvinceName = sellProvinceData[0].name;
  658. } else {
  659. formData.data.sellProvinceName = "";
  660. }
  661. });
  662. } else {
  663. formData.data.sellProvinceName = "";
  664. }
  665. if (detailCorporation.provinceId) {
  666. proxy.post("/customizeArea/list", { parentId: detailCorporation.provinceId }).then((resCity) => {
  667. let sellCityData = resCity.filter((item) => item.id === detailCorporation.cityId);
  668. if (sellCityData && sellCityData.length > 0) {
  669. formData.data.sellCityName = sellCityData[0].name;
  670. } else {
  671. formData.data.sellCityName = "";
  672. }
  673. });
  674. } else {
  675. formData.data.sellCityName = "";
  676. }
  677. formData.data.sellAddress = detailCorporation.address;
  678. });
  679. }
  680. formData.data.sellContactName = res.contactName;
  681. formData.data.sellContactNumber = res.contactNumber;
  682. });
  683. }
  684. };
  685. const getCityData = (id, type, isChange) => {
  686. proxy.post("/customizeArea/list", { parentId: id }).then((res) => {
  687. if (type === "20") {
  688. provinceData.value = res;
  689. if (isChange) {
  690. formData.data.provinceId = "";
  691. formData.data.provinceName = "";
  692. formData.data.cityId = "";
  693. formData.data.cityName = "";
  694. }
  695. } else if (type === "30") {
  696. cityData.value = res;
  697. if (isChange) {
  698. formData.data.cityId = "";
  699. formData.data.cityName = "";
  700. }
  701. } else {
  702. countryData.value = res;
  703. }
  704. });
  705. };
  706. getCityData("0");
  707. const changeCustomer = (val) => {
  708. formData.data.buyContactName = "";
  709. formData.data.buyContactNumber = "";
  710. if (val) {
  711. proxy.post("/customer/detail", { id: val }).then(
  712. (res) => {
  713. if (res.customerUserList && res.customerUserList.length > 0) {
  714. formData.data.buyContactName = res.customerUserList[0].name;
  715. if (res.customerUserList[0].contactJson) {
  716. let contactJson = JSON.parse(res.customerUserList[0].contactJson);
  717. if (contactJson && contactJson.length > 0) {
  718. formData.data.buyContactNumber = contactJson[0].contactNo;
  719. }
  720. }
  721. customerUserList.value = res.customerUserList.map((item) => {
  722. return {
  723. ...item,
  724. value: item.name,
  725. };
  726. });
  727. }
  728. formData.data.countryId = res.countryId;
  729. formData.data.provinceId = res.provinceId;
  730. formData.data.cityId = res.cityId;
  731. formData.data.buyPostalCode = res.zipCode;
  732. formData.data.buyAddress = res.address;
  733. getCityData(formData.data.countryId, "20");
  734. getCityData(formData.data.provinceId, "30");
  735. },
  736. (err) => {
  737. console.log(err);
  738. formData.data.countryId = "";
  739. formData.data.provinceId = "";
  740. formData.data.cityId = "";
  741. formData.data.buyPostalCode = "";
  742. formData.data.buyAddress = "";
  743. }
  744. );
  745. } else {
  746. formData.data.countryId = "";
  747. formData.data.provinceId = "";
  748. formData.data.cityId = "";
  749. formData.data.buyPostalCode = "";
  750. formData.data.buyAddress = "";
  751. }
  752. };
  753. const createFilter = (queryString) => {
  754. return (restaurant) => {
  755. return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  756. };
  757. };
  758. const querySearchPerson = (queryString, callback) => {
  759. const results = queryString ? customerUserList.value.filter(createFilter(queryString)) : customerUserList.value;
  760. callback(results);
  761. };
  762. const handlePerson = (item) => {
  763. formData.data.buyContactNumber = item.phone;
  764. };
  765. const pushGoods = (goods) => {
  766. if (goods && goods.length > 0) {
  767. formData.data.contractProductList = formData.data.contractProductList.concat(
  768. goods.map((item) => {
  769. let fileUrl = "";
  770. if (item.fileList && item.fileList.length > 0) {
  771. fileUrl = item.fileList[0].fileUrl;
  772. }
  773. return {
  774. fileUrl: fileUrl,
  775. code: item.code,
  776. productId: item.id,
  777. productName: item.name,
  778. productModel: item.spec,
  779. unit: item.unit,
  780. quantity: undefined,
  781. price: undefined,
  782. amount: "",
  783. remark: "",
  784. fileList: [],
  785. };
  786. })
  787. );
  788. formData.data.contractShipmentList = formData.data.contractShipmentList.concat(
  789. goods.map((item) => {
  790. return {
  791. code: item.code,
  792. productId: item.id,
  793. productName: item.name,
  794. shipmentTime: "",
  795. quantity: undefined,
  796. };
  797. })
  798. );
  799. ElMessage({
  800. message: "添加成功!",
  801. type: "success",
  802. });
  803. openProduct.value = false;
  804. } else {
  805. ElMessage("请选择至少一件商品");
  806. }
  807. };
  808. const onPicture = (path) => {
  809. window.open(path, "_blank");
  810. };
  811. const productRow = reactive({
  812. data: {
  813. productName: "",
  814. productModel: "",
  815. remark: "",
  816. },
  817. });
  818. const productIndex = ref(0);
  819. const openHandover = ref(false);
  820. const fileList = ref([]);
  821. const uploadData = ref({});
  822. const formHandoverConfig = computed(() => {
  823. return [
  824. {
  825. label: "产品信息",
  826. },
  827. {
  828. type: "input",
  829. prop: "productName",
  830. label: "产品名称",
  831. itemType: "text",
  832. disabled: true,
  833. },
  834. {
  835. type: "input",
  836. prop: "productModel",
  837. label: "规格型号",
  838. itemType: "text",
  839. disabled: true,
  840. },
  841. {
  842. type: "slot",
  843. slotName: "remark",
  844. label: "交接单",
  845. },
  846. {
  847. type: "slot",
  848. prop: "file",
  849. slotName: "file",
  850. label: "上传附件",
  851. },
  852. ];
  853. });
  854. const handleHandover = (row, index) => {
  855. productRow.data = {
  856. productName: row.productName,
  857. productModel: row.productModel,
  858. remark: row.remark,
  859. };
  860. if (row.fileList && row.fileList.length > 0) {
  861. fileList.value = row.fileList.map((item) => {
  862. return {
  863. raw: item,
  864. name: item.fileName,
  865. url: item.fileUrl,
  866. };
  867. });
  868. } else {
  869. fileList.value = [];
  870. }
  871. productIndex.value = index;
  872. openHandover.value = true;
  873. };
  874. const updateContent = (val) => {
  875. productRow.data.remark = val;
  876. };
  877. const changeActiveName = () => {
  878. if (activeName.value) {
  879. activeName.value = "";
  880. } else {
  881. activeName.value = "1";
  882. }
  883. };
  884. const uploadFile = async (file) => {
  885. const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  886. uploadData.value = res.uploadBody;
  887. file.id = res.id;
  888. file.fileName = res.fileName;
  889. file.fileUrl = res.fileUrl;
  890. file.uploadState = true;
  891. return true;
  892. };
  893. const handleSuccess = (any, UploadFile) => {
  894. UploadFile.raw.uploadState = false;
  895. };
  896. const onPreviewFile = (file) => {
  897. window.open(file.raw.fileUrl, "_blank");
  898. };
  899. const submitHandoverForm = () => {
  900. formData.data.contractProductList[productIndex.value].remark = productRow.data.remark;
  901. if (fileList.value && fileList.value.length > 0) {
  902. for (let i = 0; i < fileList.value.length; i++) {
  903. if (fileList.value[i].raw.uploadState) {
  904. ElMessage("文件上传中,请稍后提交");
  905. return;
  906. }
  907. }
  908. formData.data.contractProductList[productIndex.value].fileList = fileList.value.map((item) => {
  909. return {
  910. id: item.raw.id,
  911. fileName: item.raw.fileName,
  912. fileUrl: item.raw.fileUrl,
  913. uploadState: item.raw.uploadState,
  914. };
  915. });
  916. } else {
  917. formData.data.contractProductList[productIndex.value].fileList = [];
  918. }
  919. openHandover.value = false;
  920. };
  921. const handleRemove = async (index, row) => {
  922. formData.data.contractShipmentList = formData.data.contractShipmentList.filter((item) => item.productId !== row.productId);
  923. await formData.data.contractProductList.splice(index, 1);
  924. totalAmount();
  925. };
  926. const calculationAmount = () => {
  927. nextTick(() => {
  928. if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
  929. for (let i = 0; i < formData.data.contractProductList.length; i++) {
  930. let money = 0;
  931. if (formData.data.contractProductList[i].quantity && formData.data.contractProductList[i].price) {
  932. money = parseFloat(Number(formData.data.contractProductList[i].quantity) * Number(formData.data.contractProductList[i].price)).toFixed(2);
  933. }
  934. formData.data.contractProductList[i].amount = money;
  935. }
  936. }
  937. nextTick(() => {
  938. totalAmount();
  939. });
  940. });
  941. };
  942. const totalAmount = () => {
  943. let money = 0;
  944. if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
  945. for (let i = 0; i < formData.data.contractProductList.length; i++) {
  946. if (formData.data.contractProductList[i].amount) {
  947. money = parseFloat(Number(money) + Number(formData.data.contractProductList[i].amount)).toFixed(2);
  948. }
  949. }
  950. }
  951. if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
  952. for (let i = 0; i < formData.data.contractProjectList.length; i++) {
  953. if (formData.data.contractProjectList[i].amount) {
  954. money = parseFloat(Number(money) + Number(formData.data.contractProjectList[i].amount)).toFixed(2);
  955. }
  956. }
  957. }
  958. formData.data.amount = money;
  959. };
  960. const clickAdd = () => {
  961. if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
  962. formData.data.contractProjectList.push({
  963. payName: "",
  964. amount: undefined,
  965. remark: "",
  966. });
  967. } else {
  968. formData.data.contractProjectList = [{ payName: "", amount: undefined, remark: "" }];
  969. }
  970. };
  971. const handleDelete = async (index) => {
  972. await formData.data.contractProjectList.splice(index, 1);
  973. totalAmount();
  974. };
  975. const querySearch = (queryString, callback) => {
  976. proxy.post("/quotationPay/page", { payName: queryString }).then((res) => {
  977. if (res.rows && res.rows.length > 0) {
  978. res.rows = res.rows.map((item) => {
  979. return {
  980. ...item,
  981. value: item.payName,
  982. };
  983. });
  984. callback(res.rows);
  985. } else {
  986. callback([]);
  987. }
  988. });
  989. };
  990. const clickSplit = (item) => {
  991. formData.data.contractShipmentList.push({
  992. code: item.code,
  993. productId: item.productId,
  994. productName: item.productName,
  995. shipmentTime: "",
  996. quantity: undefined,
  997. });
  998. };
  999. const clickDelete = (index) => {
  1000. formData.data.contractShipmentList.splice(index, 1);
  1001. };
  1002. const handleSubmit = async () => {
  1003. let status = await submit.value.handleSubmit(() => {});
  1004. if (status) {
  1005. if (!(formData.data.contractProductList && formData.data.contractProductList.length > 0)) {
  1006. ElMessage("请添加至少一件商品");
  1007. return false;
  1008. }
  1009. if (formData.data.contractShipmentList && formData.data.contractShipmentList.length > 0) {
  1010. for (let i = 0; i < formData.data.contractProductList.length; i++) {
  1011. let data = formData.data.contractShipmentList.filter((item) => item.productId === formData.data.contractProductList[i].productId);
  1012. if (data && data.length > 0) {
  1013. let quantity = 0;
  1014. for (let j = 0; j < data.length; j++) {
  1015. quantity = parseFloat(Number(quantity) + Number(data[j].quantity));
  1016. }
  1017. if (quantity > formData.data.contractProductList[i].quantity) {
  1018. ElMessage("出货数量不能大于商品数量");
  1019. return false;
  1020. }
  1021. }
  1022. }
  1023. }
  1024. return true;
  1025. } else {
  1026. setTimeout(() => {
  1027. const errorDiv = document.getElementsByClassName("is-error");
  1028. errorDiv[0].scrollIntoView();
  1029. }, 0);
  1030. }
  1031. return status;
  1032. };
  1033. // 向父组件暴露
  1034. defineExpose({
  1035. submitData: formData.data,
  1036. handleSubmit,
  1037. });
  1038. const changeShroffAccount = (val) => {
  1039. if (val) {
  1040. let data = accountList.value.filter((item) => item.value === val);
  1041. if (data && data.length > 0) {
  1042. formData.data.beneficiaryName = data[0].beneficiaryName;
  1043. formData.data.beneficiaryBank = data[0].beneficiaryBank;
  1044. formData.data.beneficiaryBankAddress = data[0].beneficiaryBankAddress;
  1045. formData.data.beneficiaryAccountNumber = data[0].beneficiaryAccountNumber;
  1046. formData.data.swiftCode = data[0].swiftCode;
  1047. formData.data.beneficiaryAddress = data[0].beneficiaryAddress;
  1048. }
  1049. }
  1050. };
  1051. </script>
  1052. <style lang="scss" scoped>
  1053. ::v-deep(.el-input-number .el-input__inner) {
  1054. text-align: left;
  1055. }
  1056. .pic {
  1057. object-fit: contain;
  1058. width: 50px;
  1059. height: 50px;
  1060. cursor: pointer;
  1061. vertical-align: middle;
  1062. }
  1063. .shrinkPadding {
  1064. padding-right: 0 !important;
  1065. }
  1066. .hideCollapse {
  1067. margin-top: -62px;
  1068. border: 0 !important;
  1069. }
  1070. ::v-deep(.el-collapse-item__arrow) {
  1071. display: none !important;
  1072. }
  1073. ::v-deep(.el-collapse-item__wrap) {
  1074. border: 0 !important;
  1075. }
  1076. ::v-deep(.el-collapse-item__header) {
  1077. border: 0 !important;
  1078. }
  1079. </style>