Sample.vue 44 KB

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