detailsPage.vue 36 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246
  1. <template>
  2. <div class="borderless">
  3. <div class="customer-head">
  4. <div class="customer-back">
  5. <el-button
  6. type="danger"
  7. style="border: none;background: none;color: red"
  8. icon="el-icon-arrow-left"
  9. @click="backToList"
  10. >返回列表
  11. </el-button>
  12. </div>
  13. <el-button type="info" class="sell-customer-btn" @click="saveSell"
  14. >生成采购单</el-button
  15. >
  16. <el-button type="success" class="copy-customer-btn" disabled>
  17. 复制新单
  18. </el-button>
  19. <el-button
  20. class="el-button--small-yh add-customer-btn"
  21. type="primary"
  22. :disabled="disabled"
  23. @click="editCustomer"
  24. >{{ form.id ? "确认修改" : "确认新增" }}
  25. </el-button>
  26. </div>
  27. <div style="margin-top: 60px;margin-bottom:35px">
  28. <containerTitle title="基础信息"></containerTitle>
  29. <basic-container>
  30. <avue-form ref="form" v-model="form" :option="option">
  31. <template slot="portOfLoad">
  32. <port-info
  33. v-model="form.portOfLoad"
  34. :disabled="detailData.status == 1"
  35. />
  36. </template>
  37. <template slot="portOfDestination">
  38. <port-info
  39. v-model="form.portOfDestination"
  40. :disabled="detailData.status == 1"
  41. />
  42. </template>
  43. <template slot="corpId">
  44. <select-component
  45. v-model="form.corpId"
  46. :configuration="configuration"
  47. :disabled="detailData.status == 1"
  48. ></select-component>
  49. </template>
  50. <template slot="boxNumber">
  51. <el-input
  52. size="mini"
  53. v-model="form.boxNumber"
  54. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/,
  55. "$1.$2")'
  56. placeholder="请输入 起订量"
  57. :disabled="detailData.status == 1"
  58. />
  59. </template>
  60. <template slot="minOrder">
  61. <el-input
  62. size="mini"
  63. v-model="form.minOrder"
  64. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/,
  65. "$1.$2")'
  66. placeholder="请输入 起订量"
  67. :disabled="detailData.status == 1"
  68. />
  69. </template>
  70. <template slot="predictOceanFreight">
  71. <el-input
  72. size="mini"
  73. v-model="form.predictOceanFreight"
  74. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/,
  75. "$1.$2")'
  76. placeholder="请输入 预计海运费"
  77. :disabled="detailData.status == 1"
  78. />
  79. </template>
  80. <template slot="referenceOceanFreight">
  81. <el-input
  82. size="mini"
  83. v-model="form.referenceOceanFreight"
  84. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/,
  85. "$1.$2")'
  86. placeholder="请输入 参考海运费"
  87. :disabled="detailData.status == 1"
  88. />
  89. </template>
  90. <template slot="oceanFreight">
  91. <el-input
  92. size="mini"
  93. v-model="form.oceanFreight"
  94. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/,
  95. "$1.$2")'
  96. placeholder="请输入 实际海运费"
  97. :disabled="detailData.status == 1"
  98. />
  99. </template>
  100. </avue-form>
  101. </basic-container>
  102. <div>
  103. <containerTitle title="商品信息"></containerTitle>
  104. <basic-container>
  105. <avue-crud
  106. ref="crud"
  107. :data="data"
  108. :option="tableOption"
  109. @row-del="rowDel"
  110. @selection-change="goodsSelectionChange"
  111. @saveColumn="saveColumn"
  112. :summary-method="summaryMethod"
  113. >
  114. <template slot="cname" slot-scope="{ row, index }">
  115. <el-button
  116. size="small"
  117. type="text"
  118. @click="rePick(row, index)"
  119. :disabled="disabled"
  120. class="picker"
  121. style="padding:4px 10px;float:left"
  122. >选择</el-button
  123. >
  124. <span> {{ row.cname }}</span>
  125. </template>
  126. <template slot="itemType" slot-scope="{ row }">
  127. <el-select
  128. v-if="row.$cellEdit"
  129. v-model="row.itemType"
  130. filterable
  131. allow-create
  132. default-first-option
  133. placeholder="请输入"
  134. @focus="itemTypeFocus(row)"
  135. >
  136. <el-option
  137. v-for="(item, index) in itemtypeList"
  138. :key="index"
  139. :label="item.value"
  140. :value="item.value"
  141. >
  142. </el-option>
  143. </el-select>
  144. <span v-else>{{ row.itemType }}</span>
  145. </template>
  146. <template slot="priorityReferrer" slot-scope="{ row }">
  147. <el-checkbox
  148. :disabled="!row.$cellEdit"
  149. v-model="row.priorityReferrer"
  150. :true-label="1"
  151. :false-label="0"
  152. />
  153. </template>
  154. <template slot="corpId" slot-scope="{ row, index }">
  155. <customer-dialog
  156. v-if="row.$cellEdit"
  157. v-model="row.corpName"
  158. :cropIndex="index"
  159. @getcorpId="getcorpId"
  160. ></customer-dialog>
  161. <span v-else>{{ row.corpName }}</span>
  162. </template>
  163. <template slot="purchaseAmount" slot-scope="{ row }">
  164. <el-input
  165. v-if="row.$cellEdit"
  166. v-model="row.purchaseAmount"
  167. size="small"
  168. placeholder="请输入"
  169. @change="priceChange(row)"
  170. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  171. ></el-input>
  172. <span v-else>{{ row.purchaseAmount | micrometerFormat }}</span>
  173. </template>
  174. <template slot="price" slot-scope="{ row }">
  175. <el-input
  176. v-if="row.$cellEdit"
  177. v-model="row.price"
  178. size="small"
  179. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  180. @change="priceChange(row)"
  181. ></el-input>
  182. <span v-else>{{ row.price | micrometerFormat }}</span>
  183. </template>
  184. <template slot="amount" slot-scope="{ row }">
  185. <span>{{ row.amount | micrometerFormat }}</span>
  186. </template>
  187. <template slot="orderQuantity" slot-scope="{ row }">
  188. <el-input
  189. v-if="row.$cellEdit"
  190. v-model="row.orderQuantity"
  191. size="small"
  192. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  193. @change="priceChange(row)"
  194. ></el-input>
  195. <span v-else>{{ row.orderQuantity }}</span>
  196. </template>
  197. <template slot="discount" slot-scope="{ row }">
  198. <el-input
  199. v-if="row.$cellEdit"
  200. v-model="row.discount"
  201. size="small"
  202. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  203. @change="discountChange(row)"
  204. ></el-input>
  205. <span v-else>{{ row.discount | isDiscount }}</span>
  206. </template>
  207. <template slot="insurance" slot-scope="{ row }">
  208. <el-input
  209. v-if="row.$cellEdit"
  210. v-model="row.insurance"
  211. size="small"
  212. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  213. @change="priceChange(row)"
  214. ></el-input>
  215. <span v-else>{{ row.insurance | micrometerFormat }}</span>
  216. </template>
  217. <template slot="freight" slot-scope="{ row }">
  218. <el-input
  219. v-if="row.$cellEdit"
  220. v-model="row.freight"
  221. size="small"
  222. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  223. @change="priceChange(row)"
  224. ></el-input>
  225. <span v-else>{{ row.freight | micrometerFormat }}</span>
  226. </template>
  227. <template slot="taxRate" slot-scope="{ row }">
  228. <el-input
  229. v-if="row.$cellEdit"
  230. v-model="row.taxRate"
  231. size="small"
  232. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  233. @change="taxRateChange(row)"
  234. ></el-input>
  235. <span v-else>{{ row.taxRate | isPercentage }}</span>
  236. </template>
  237. <template slot="menuLeft">
  238. <el-button
  239. type="primary"
  240. icon="el-icon-plus"
  241. size="small"
  242. @click.stop="newDetails"
  243. :disabled="detailData.status == 1"
  244. >新增明细</el-button
  245. >
  246. <el-button
  247. type="info"
  248. icon="el-icon-printer"
  249. size="small"
  250. @click.stop="openReport()"
  251. >报 表</el-button
  252. >
  253. <el-button
  254. type="warning"
  255. icon="el-icon-plus"
  256. size="small"
  257. :disabled="detailData.status == 1 || orderItemIds.length == 0"
  258. @click="getInvoice"
  259. >生成发货单
  260. </el-button>
  261. </template>
  262. <template slot="menu" slot-scope="{ row, index }">
  263. <el-button
  264. size="small"
  265. icon="el-icon-edit"
  266. type="text"
  267. @click="rowCell(row, index)"
  268. :disabled="disabled"
  269. >{{ row.$cellEdit ? "保存" : "修改" }}</el-button
  270. >
  271. <el-button
  272. size="small"
  273. icon="el-icon-edit"
  274. type="text"
  275. @click="rowDel(row, index)"
  276. :disabled="detailData.status == 1"
  277. >删 除</el-button
  278. >
  279. </template>
  280. </avue-crud>
  281. </basic-container>
  282. </div>
  283. <fee-info
  284. ref="feeInfo"
  285. :orderFeesList="orderFeesList"
  286. :disabled="detailData.status == 1"
  287. feeUrl="/blade-purchase-sales/orderfees/update"
  288. />
  289. <upload-file
  290. ref="uploadFile"
  291. title="合同附件"
  292. :orderFilesList="orderFilesList"
  293. :disabled="detailData.status == 1"
  294. delUrl="/blade-purchase-sales/orderfiles/update"
  295. />
  296. <div>
  297. <containerTitle title="银行信息"></containerTitle>
  298. <basic-container>
  299. <avue-form ref="form" v-model="form" :option="bankOption" />
  300. </basic-container>
  301. </div>
  302. <div>
  303. <containerTitle title="保险信息"></containerTitle>
  304. <basic-container>
  305. <avue-form ref="form" v-model="form" :option="insuranceOption" />
  306. </basic-container>
  307. </div>
  308. <div>
  309. <containerTitle title="唛头"></containerTitle>
  310. <basic-container>
  311. <avue-form ref="form" v-model="form" :option="markOption" />
  312. </basic-container>
  313. </div>
  314. </div>
  315. <el-dialog
  316. title="导入商品"
  317. append-to-body
  318. class="el-dialogDeep"
  319. :visible.sync="dialogVisible"
  320. width="60%"
  321. :close-on-click-modal="false"
  322. :destroy-on-close="true"
  323. :close-on-press-escape="false"
  324. @close="closeGoods"
  325. top="10vh"
  326. >
  327. <span>
  328. <el-row>
  329. <el-col :span="5">
  330. <div>
  331. <el-scrollbar>
  332. <basic-container style="margin-top:45px">
  333. <avue-tree :option="treeOption" @node-click="nodeClick" />
  334. </basic-container>
  335. </el-scrollbar>
  336. </div>
  337. </el-col>
  338. <el-col :span="19">
  339. <avue-crud
  340. :option="goodsOption"
  341. :table-loading="loading"
  342. :data="goodsList"
  343. ref="goodsCrud"
  344. @refresh-change="refreshChange"
  345. @selection-change="selectionChange"
  346. @row-click="rowClick"
  347. :page.sync="page"
  348. @on-load="onLoad"
  349. @saveColumn="saveGoodsColumn"
  350. ></avue-crud>
  351. </el-col>
  352. </el-row>
  353. </span>
  354. <span slot="footer" class="dialog-footer">
  355. <el-button @click="dialogVisible = false">取 消</el-button>
  356. <el-button
  357. type="primary"
  358. @click="importGoods"
  359. :disabled="selectionList.length == 0"
  360. >导入</el-button
  361. >
  362. </span>
  363. </el-dialog>
  364. <report-dialog
  365. :switchDialog="switchDialog"
  366. :reportId="form.id"
  367. reportName="客户询价"
  368. @onClose="onClose()"
  369. ></report-dialog>
  370. </div>
  371. </template>
  372. <script>
  373. import tableOption from "./config/customerContact.json";
  374. import goodsOption from "./config/commodity.json";
  375. import feeInfo from "@/components/fee-info/main";
  376. import uploadFile from "@/components/upload-file/main";
  377. import {
  378. detail,
  379. submit,
  380. delItem,
  381. getDeptLazyTree,
  382. getGoods,
  383. deliverGoods,
  384. getPorts,
  385. getSpecification,
  386. saveSell
  387. } from "@/api/basicData/salesContract";
  388. import _ from "lodash";
  389. import reportDialog from "@/components/report-dialog/main";
  390. import { micrometerFormat } from "@/util/validate";
  391. import { contrastObj, contrastList } from "@/util/contrastData";
  392. import customerDialog from "@/components/customer-dialog/main";
  393. export default {
  394. name: "detailsPageEdit",
  395. data() {
  396. return {
  397. configuration: {
  398. multipleChoices: false,
  399. multiple: false,
  400. collapseTags: false,
  401. placeholder: "请点击右边按钮选择",
  402. dicData: []
  403. },
  404. switchDialog: false,
  405. form: {
  406. orderStatus: "录入"
  407. },
  408. disabled: false,
  409. dialogVisible: false,
  410. tableOption: {},
  411. option: {
  412. menuBtn: false,
  413. labelWidth: 100,
  414. column: [
  415. {
  416. label: "客户名称",
  417. prop: "corpId",
  418. rules: [
  419. {
  420. required: true,
  421. message: "",
  422. trigger: "blur"
  423. }
  424. ],
  425. span: 16,
  426. slot: true
  427. },
  428. {
  429. label: "系统号",
  430. prop: "sysNo",
  431. span: 8,
  432. disabled: true
  433. },
  434. {
  435. label: "联系人",
  436. prop: "corpAttn",
  437. span: 8
  438. },
  439. {
  440. label: "电话",
  441. prop: "corpTel",
  442. span: 8
  443. },
  444. {
  445. label: "订单状态",
  446. prop: "orderStatus",
  447. span: 8,
  448. type: "select",
  449. dicUrl: "/api/blade-system/dict-biz/dictionary?code=order_status",
  450. props: {
  451. label: "dictValue",
  452. value: "dictValue"
  453. }
  454. },
  455. {
  456. label: "起运港",
  457. prop: "portOfLoad",
  458. span: 8,
  459. type: "select",
  460. filterable: true,
  461. dicData: [],
  462. props: {
  463. label: "name",
  464. value: "name"
  465. }
  466. },
  467. {
  468. label: "目的港",
  469. prop: "portOfDestination",
  470. span: 8,
  471. type: "select",
  472. filterable: true,
  473. dicData: [],
  474. props: {
  475. label: "name",
  476. value: "name"
  477. }
  478. },
  479. {
  480. label: "运输方式",
  481. prop: "transport",
  482. span: 8,
  483. type: "select",
  484. dicUrl: "/api/blade-system/dict-biz/dictionary?code=mode_transport",
  485. props: {
  486. label: "dictValue",
  487. value: "dictValue"
  488. }
  489. },
  490. {
  491. label: "价格条款",
  492. prop: "priceTerms",
  493. span: 8,
  494. type: "select",
  495. dicUrl: "/api/blade-system/dict-biz/dictionary?code=pricing_terms",
  496. props: {
  497. label: "dictValue",
  498. value: "dictValue"
  499. }
  500. },
  501. {
  502. label: "条款说明",
  503. prop: "priceTermsDescription",
  504. span: 16
  505. },
  506. {
  507. label: "收款方式",
  508. prop: "paymentType",
  509. span: 8,
  510. type: "select",
  511. dicUrl: "/api/blade-system/dict-biz/dictionary?code=payment_term",
  512. props: {
  513. label: "dictValue",
  514. value: "dictValue"
  515. }
  516. },
  517. {
  518. label: "收款说明",
  519. prop: "paymentTypeDescription",
  520. span: 16
  521. },
  522. {
  523. label: "订单日期",
  524. prop: "businesDate",
  525. span: 8,
  526. type: "date",
  527. format: "yyyy-MM-dd",
  528. valueFormat: "yyyy-MM-dd 00:00:00",
  529. rules: [
  530. {
  531. required: true,
  532. message: "",
  533. trigger: "blur"
  534. }
  535. ]
  536. },
  537. {
  538. label: "预交日期",
  539. prop: "dateValidity",
  540. span: 8,
  541. type: "date",
  542. format: "yyyy-MM-dd",
  543. valueFormat: "yyyy-MM-dd 00:00:00"
  544. },
  545. {
  546. label: "销售订单号",
  547. prop: "orderNo",
  548. span: 8
  549. },
  550. {
  551. label: "币别",
  552. prop: "currency",
  553. span: 8,
  554. type: "select",
  555. dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
  556. props: {
  557. label: "dictValue",
  558. value: "dictValue"
  559. },
  560. change: ({ value }) => {
  561. if (value == "CNY") {
  562. this.form.exchangeRate = 1;
  563. }
  564. if (value == "USD") {
  565. this.form.exchangeRate = 6.3843;
  566. }
  567. }
  568. },
  569. {
  570. label: "汇率",
  571. prop: "exchangeRate",
  572. span: 8,
  573. slot: true,
  574. row: true,
  575. disabled: true
  576. },
  577. {
  578. label: "箱型",
  579. prop: "boxPile",
  580. span: 8
  581. },
  582. {
  583. label: "箱量",
  584. prop: "boxNumber",
  585. span: 8
  586. },
  587. {
  588. label: "起订量",
  589. prop: "minOrder",
  590. span: 8
  591. },
  592. {
  593. label: "预计海运费",
  594. prop: "predictOceanFreight",
  595. span: 8
  596. },
  597. {
  598. label: "参考海运费",
  599. prop: "referenceOceanFreight",
  600. span: 8
  601. },
  602. {
  603. label: "实际海运费",
  604. prop: "oceanFreight",
  605. span: 8
  606. },
  607. {
  608. label: "毛利额",
  609. prop: "grossProfit",
  610. span: 8,
  611. disabled: true
  612. },
  613. {
  614. label: "毛利率",
  615. prop: "grossProfitRate",
  616. span: 8,
  617. row: true,
  618. append: "%",
  619. disabled: true
  620. },
  621. {
  622. label: "备注",
  623. prop: "orderRemark",
  624. type: "textarea",
  625. minRows: 2,
  626. span: 8
  627. },
  628. {
  629. label: "采购备注",
  630. prop: "purchaseRemark",
  631. type: "textarea",
  632. minRows: 2,
  633. span: 8
  634. },
  635. {
  636. label: "船务备注",
  637. prop: "shippingRemark",
  638. type: "textarea",
  639. minRows: 2,
  640. span: 8
  641. }
  642. ]
  643. },
  644. treeOption: {
  645. nodeKey: "id",
  646. lazy: true,
  647. treeLoad: function(node, resolve) {
  648. const parentId = node.level === 0 ? 0 : node.data.id;
  649. getDeptLazyTree(parentId).then(res => {
  650. resolve(
  651. res.data.data.map(item => {
  652. return {
  653. ...item,
  654. leaf: !item.hasChildren
  655. };
  656. })
  657. );
  658. });
  659. },
  660. addBtn: false,
  661. menu: false,
  662. size: "small",
  663. props: {
  664. label: "title",
  665. value: "value",
  666. children: "children"
  667. }
  668. },
  669. bankOption: {
  670. menuBtn: false,
  671. labelWidth: 100,
  672. column: [
  673. {
  674. label: "外币银行",
  675. prop: "banks",
  676. span: 8
  677. },
  678. {
  679. label: "银行信息",
  680. prop: "banksAccountName",
  681. span: 16,
  682. type: "textarea",
  683. minRows: 2
  684. }
  685. ]
  686. },
  687. insuranceOption: {
  688. menuBtn: false,
  689. labelWidth: 100,
  690. column: [
  691. {
  692. label: "保险描述",
  693. prop: "insuranceRemarks",
  694. span: 24,
  695. type: "textarea",
  696. minRows: 2
  697. }
  698. ]
  699. },
  700. markOption: {
  701. menuBtn: false,
  702. labelWidth: 100,
  703. column: [
  704. {
  705. label: "唛头描述",
  706. prop: "marks",
  707. span: 24,
  708. type: "textarea",
  709. minRows: 2
  710. }
  711. ]
  712. },
  713. page: {
  714. pageSize: 10,
  715. currentPage: 1,
  716. total: 0
  717. },
  718. loading: false,
  719. goodsOption: {},
  720. data: [],
  721. goodsList: [],
  722. selectionList: [],
  723. treeDeptId: null,
  724. orderFeesList: [],
  725. orderFilesList: [],
  726. orderItemIds: [],
  727. itemtypeList: [],
  728. reData: null
  729. };
  730. },
  731. props: {
  732. detailData: {
  733. type: Object
  734. }
  735. },
  736. components: {
  737. reportDialog,
  738. feeInfo,
  739. uploadFile,
  740. customerDialog
  741. },
  742. async created() {
  743. this.tableOption = await this.getColumnData(
  744. this.getColumnName(5),
  745. tableOption
  746. );
  747. this.goodsOption = await this.getColumnData(
  748. this.getColumnName(28),
  749. goodsOption
  750. );
  751. if (this.detailData.id) {
  752. this.getDetail(this.detailData.id);
  753. }
  754. if (this.detailData.status == 1) {
  755. this.option.disabled = true;
  756. this.bankOption.disabled = true;
  757. this.insuranceOption.disabled = true;
  758. this.markOption.disabled = true;
  759. }
  760. let _this = this;
  761. this.tableOption.column.forEach(e => {
  762. if (e.prop == "taxRate") {
  763. e.formatter = function(row) {
  764. return _this.textFormat(
  765. Number(row.taxRate ? row.taxRate : 0) / 100,
  766. "0.00%"
  767. );
  768. };
  769. }
  770. if (e.prop == "amount" || e.prop == "price") {
  771. e.formatter = function(row) {
  772. return _this.textFormat(
  773. Number(row.amount ? row.amount : 0),
  774. "#,##0.00"
  775. );
  776. };
  777. }
  778. });
  779. getPorts().then(res => {
  780. this.findObject(this.option.column, "portOfLoad").dicData = res.data;
  781. this.findObject(this.option.column, "portOfDestination").dicData =
  782. res.data;
  783. });
  784. this.getWorkDicts("product_properties").then(res => {
  785. this.findObject(this.tableOption.column, "itemProp").dicData =
  786. res.data.data;
  787. });
  788. },
  789. methods: {
  790. saveSell() {
  791. if (!this.form.id) {
  792. return this.$message.error("此单据没有提交记录,请先提交");
  793. }
  794. this.$confirm("是否生成采购单?", {
  795. confirmButtonText: "确定",
  796. cancelButtonText: "取消",
  797. type: "warning"
  798. }).then(() => {
  799. saveSell(this.form.id).then(res => {
  800. if (res.data.code == 200) {
  801. this.$message.success("生成成功");
  802. }
  803. });
  804. });
  805. },
  806. getcorpId(row) {
  807. this.data[row.index].corpId = row.id;
  808. },
  809. rePick(row, index) {
  810. this.reData = {
  811. ...row,
  812. index: index
  813. };
  814. this.newDetails();
  815. },
  816. rowCell(row, index) {
  817. if (row.$cellEdit == true) {
  818. this.$set(row, "$cellEdit", false);
  819. } else {
  820. this.$set(row, "$cellEdit", true);
  821. }
  822. },
  823. itemTypeFocus(row) {
  824. this.itemtypeList = [];
  825. getSpecification({ goodId: row.itemId }).then(res => {
  826. const data = res.data.data;
  827. this.itemtypeList = data.map(item => ({ value: item }));
  828. });
  829. },
  830. priceChange(row) {
  831. const sum = _.multiply(
  832. _.add(
  833. Number(
  834. _.multiply(
  835. row.price ? row.price : 0,
  836. row.orderQuantity ? row.orderQuantity : 0
  837. )
  838. ),
  839. Number(
  840. _.add(
  841. Number(row.insurance ? row.insurance : 0),
  842. Number(row.freight ? row.freight : 0)
  843. )
  844. )
  845. ),
  846. _.divide(row.discount ? row.discount : 10, 10)
  847. );
  848. row.amount = Number(sum ? sum : 0).toFixed(2);
  849. let amountSum = 0;
  850. let purchaseAmountSum = 0;
  851. let grossProfitRate = 0;
  852. this.data.forEach(e => {
  853. amountSum = _.add(amountSum, Number(e.amount));
  854. purchaseAmountSum = _.add(
  855. purchaseAmountSum,
  856. Number(
  857. _.multiply(
  858. Number(e.purchaseAmount ? e.purchaseAmount : 0),
  859. Number(e.orderQuantity)
  860. )
  861. )
  862. );
  863. this.form.grossProfit = _.subtract(amountSum, purchaseAmountSum);
  864. grossProfitRate = _.multiply(
  865. _.divide(_.subtract(amountSum, purchaseAmountSum), amountSum),
  866. 100
  867. );
  868. this.form.grossProfitRate = Number(
  869. grossProfitRate ? grossProfitRate : 0
  870. ).toFixed(2);
  871. });
  872. },
  873. quantityChange(row) {
  874. if (Number(row.orderQuantity) < Number(row.actualQuantity)) {
  875. row.orderQuantity = row.actualQuantity;
  876. this.$message.error("修改的数量不能低于发货数量");
  877. }
  878. if (!row.orderQuantity) {
  879. row.orderQuantity = 0;
  880. } else {
  881. row.amount = _.multiply(row.price, row.orderQuantity).toFixed(2);
  882. }
  883. },
  884. taxRateChange(row) {
  885. if (Number(row.taxRate) >= 100) {
  886. row.taxRate = 0;
  887. this.$message.error("税率不能超过100%");
  888. }
  889. },
  890. grossProfitRateChange(row) {
  891. if (row >= 100) {
  892. this.form.grossProfitRate = 0;
  893. this.$message.error("毛利率不能超过100%");
  894. }
  895. },
  896. rowSave(row) {
  897. console.log(row);
  898. this.$set(row, "$cellEdit", false);
  899. },
  900. rowDel(row, index) {
  901. this.$confirm("确定删除数据?", {
  902. confirmButtonText: "确定",
  903. cancelButtonText: "取消",
  904. type: "warning"
  905. }).then(() => {
  906. if (row.id) {
  907. delItem(row.id).then(res => {
  908. this.$message({
  909. type: "success",
  910. message: "删除成功!"
  911. });
  912. this.data.splice(index, 1);
  913. });
  914. } else {
  915. this.$message({
  916. type: "success",
  917. message: "删除成功!"
  918. });
  919. this.data.splice(index, 1);
  920. }
  921. });
  922. },
  923. importGoods() {
  924. if (this.reData) {
  925. console.log(this.reData);
  926. if (this.selectionList.length != 1) {
  927. return this.$message.error("重新选择的时候只能选择一条数据");
  928. } else {
  929. this.selectionList.forEach(e => {
  930. this.data.forEach((item, index) => {
  931. if (index == this.reData.index) {
  932. item.itemId = e.id;
  933. item.code = e.code;
  934. item.cname = e.cname;
  935. item.priceCategory = e.goodsTypeName;
  936. item.itemUrl = e.url;
  937. item.itemProp = this.reData.itemProp;
  938. item.itemDescription = e.cnameDescription;
  939. item.itemType = this.reData.itemType;
  940. item.tradeTerms = this.reData.tradeTerms;
  941. item.price = this.reData.price;
  942. item.orderQuantity = this.reData.orderQuantity;
  943. item.insurance = this.reData.insurance;
  944. item.freight = this.reData.freight;
  945. item.discount = this.reData.discount;
  946. item.amount = this.reData.amount;
  947. item.taxRate = this.reData.taxRate;
  948. item.unit = e.unit;
  949. item.remarks = this.reData.remarks;
  950. item.$cellEdit = true;
  951. }
  952. });
  953. });
  954. }
  955. } else {
  956. this.selectionList.forEach(e => {
  957. this.data.push({
  958. itemId: e.id,
  959. code: e.code,
  960. cname: e.cname,
  961. priceCategory: e.goodsTypeName,
  962. itemUrl: e.url,
  963. itemProp: null,
  964. itemDescription: e.cnameDescription,
  965. itemType: null,
  966. tradeTerms: null,
  967. price: 0,
  968. orderQuantity: 0,
  969. insurance: 0,
  970. freight: 0,
  971. discount: null,
  972. amount: 0,
  973. taxRate: 0,
  974. unit: e.unit,
  975. remarks: null,
  976. $cellEdit: true
  977. });
  978. });
  979. }
  980. this.dialogVisible = false;
  981. },
  982. closeGoods() {
  983. this.selectionList = [];
  984. this.treeDeptId = "";
  985. this.reData = null;
  986. },
  987. goodsSelectionChange(list) {
  988. this.orderItemIds = [];
  989. list.map(e => {
  990. this.orderItemIds.push(e.id);
  991. });
  992. },
  993. selectionChange(list) {
  994. this.selectionList = list;
  995. },
  996. rowClick(row) {
  997. this.$refs.goodsCrud.toggleSelection([this.goodsList[row.$index]]);
  998. },
  999. nodeClick(data) {
  1000. this.treeDeptId = data.id;
  1001. this.page.currentPage = 1;
  1002. this.onLoad(this.page);
  1003. },
  1004. //费用查询
  1005. onLoad(page, params = {}) {
  1006. this.loading = true;
  1007. getGoods(page.currentPage, page.pageSize, this.treeDeptId).then(res => {
  1008. const data = res.data.data;
  1009. this.page.total = data.total;
  1010. this.goodsList = data.records;
  1011. this.loading = false;
  1012. if (this.page.total) {
  1013. this.goodsOption.height = window.innerHeight - 550;
  1014. } else {
  1015. this.goodsOption.height = window.innerHeight - 475;
  1016. }
  1017. });
  1018. },
  1019. //商品明细导入
  1020. newDetails() {
  1021. this.dialogVisible = !this.dialogVisible;
  1022. },
  1023. getDetail(id) {
  1024. detail(id).then(res => {
  1025. this.form = res.data.data;
  1026. this.data = res.data.data.orderItemsList;
  1027. this.orderFeesList = res.data.data.orderFeesList;
  1028. this.orderFilesList = res.data.data.orderFilesList;
  1029. this.configuration.dicData = this.form.corpName;
  1030. });
  1031. },
  1032. //修改提交触发
  1033. editCustomer() {
  1034. this.$refs["form"].validate((valid, done) => {
  1035. done();
  1036. if (valid) {
  1037. if (this.data.length > 0) {
  1038. for (let i = 0; i < this.data.length; i++) {
  1039. if (this.data[i].corpId == null) {
  1040. return this.$message.error(`请输入第${i + 1}行的供应商`);
  1041. }
  1042. }
  1043. }
  1044. const orderFeesList = this.$refs.feeInfo.submitData();
  1045. for (let i = 0; i < orderFeesList.length; i++) {
  1046. if (orderFeesList[i].corpId == null) {
  1047. return this.$message.error(`请输入第${i + 1}行的结算中心`);
  1048. }
  1049. if (orderFeesList[i].price == 0) {
  1050. return this.$message.error(`请正确输入第${i + 1}行的价格`);
  1051. }
  1052. if (orderFeesList[i].quantity == 0) {
  1053. return this.$message.error(`请正确输入第${i + 1}行的数量`);
  1054. }
  1055. }
  1056. const orderFilesList = this.$refs.uploadFile.submitData();
  1057. submit({
  1058. ...this.form,
  1059. orderItemsList: this.data,
  1060. orderFeesList: orderFeesList,
  1061. orderFilesList: orderFilesList
  1062. }).then(res => {
  1063. this.form = res.data.data;
  1064. this.data = res.data.data.orderItemsList;
  1065. this.orderFeesList = res.data.data.orderFeesList;
  1066. this.orderFilesList = res.data.data.orderFilesList;
  1067. this.$message.success(this.form.id ? "修改成功" : "提交成功");
  1068. });
  1069. } else {
  1070. return false;
  1071. }
  1072. });
  1073. },
  1074. //返回列表
  1075. backToList() {
  1076. this.$emit("goBack");
  1077. },
  1078. openReport() {
  1079. this.switchDialog = !this.switchDialog;
  1080. },
  1081. onClose(val) {
  1082. this.switchDialog = val;
  1083. },
  1084. getInvoice() {
  1085. if (this.$store.getters.outStatus) {
  1086. this.$alert("出口发货单存在,请保存发货单再进行操作", "温馨提示", {
  1087. confirmButtonText: "确定",
  1088. type: "warning",
  1089. callback: action => {
  1090. console.log(action);
  1091. }
  1092. });
  1093. } else {
  1094. this.inInvoice();
  1095. }
  1096. },
  1097. inInvoice() {
  1098. const data = { id: this.form.id, orderItemIds: this.orderItemIds };
  1099. deliverGoods(data).then(res => {
  1100. if (res.data.code == 200) {
  1101. this.$message.success("生成成功");
  1102. if (data) {
  1103. const data = res.data.data;
  1104. data.orderItemsList.forEach(e => {
  1105. e.actualQuantity = e.orderQuantity;
  1106. e.contractAmount = e.amount;
  1107. e.srcId = e.id;
  1108. e.specificationAndModel = e.itemType;
  1109. delete e.id;
  1110. delete e.version;
  1111. delete e.status;
  1112. delete e.createUser;
  1113. delete e.createTime;
  1114. delete e.updateUser;
  1115. delete e.updateTime;
  1116. delete e.isDeleted;
  1117. });
  1118. delete data.id;
  1119. delete data.version;
  1120. delete data.status;
  1121. delete data.createUser;
  1122. delete data.createTime;
  1123. delete data.updateUser;
  1124. delete data.updateTime;
  1125. delete data.isDeleted;
  1126. delete data.orderStatus;
  1127. data.deliveryStatus = "录入";
  1128. data.srcOrderNo = data.sysNo;
  1129. delete data.sysNo;
  1130. this.$router.$avueRouter.closeTag("/exportTrade/invoice/index");
  1131. this.$router.push({
  1132. path: "/exportTrade/invoice/index",
  1133. query: {
  1134. pageType: "Generate",
  1135. data: JSON.stringify(data)
  1136. }
  1137. });
  1138. }
  1139. }
  1140. });
  1141. },
  1142. async saveColumn() {
  1143. const inSave = await this.saveColumnData(
  1144. this.getColumnName(5),
  1145. this.tableOption
  1146. );
  1147. if (inSave) {
  1148. this.$message.success("保存成功");
  1149. //关闭窗口
  1150. this.$refs.crud.$refs.dialogColumn.columnBox = false;
  1151. }
  1152. },
  1153. summaryMethod({ columns, data }) {
  1154. const sums = [];
  1155. if (columns.length > 0) {
  1156. columns.forEach((item, index) => {
  1157. sums[0] = "合计";
  1158. if (item.property == "orderQuantity" || item.property == "amount") {
  1159. let qtySum = 0;
  1160. let amountSum = 0;
  1161. data.forEach(e => {
  1162. qtySum = _.add(qtySum, Number(e.orderQuantity));
  1163. amountSum = _.add(amountSum, Number(e.amount));
  1164. });
  1165. //数量总计
  1166. if (item.property == "orderQuantity") {
  1167. sums[index] = qtySum ? qtySum.toFixed(2) : "0.00";
  1168. }
  1169. //金额总计
  1170. if (item.property == "amount") {
  1171. sums[index] = micrometerFormat(amountSum);
  1172. }
  1173. }
  1174. });
  1175. }
  1176. return sums;
  1177. },
  1178. async saveGoodsColumn() {
  1179. const inSave = await this.saveColumnData(
  1180. this.getColumnName(28),
  1181. this.goodsOption
  1182. );
  1183. if (inSave) {
  1184. this.$message.success("保存成功");
  1185. //关闭窗口
  1186. this.$refs.goodsCrud.$refs.dialogColumn.columnBox = false;
  1187. }
  1188. }
  1189. }
  1190. };
  1191. </script>
  1192. <style lang="scss" scoped>
  1193. .customer-head {
  1194. position: fixed;
  1195. top: 105px;
  1196. width: 100%;
  1197. margin-left: -10px;
  1198. height: 62px;
  1199. background: #ffffff;
  1200. box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
  1201. z-index: 999;
  1202. }
  1203. .customer-back {
  1204. cursor: pointer;
  1205. line-height: 62px;
  1206. font-size: 16px;
  1207. color: #323233;
  1208. font-weight: 400;
  1209. }
  1210. .back-icon {
  1211. line-height: 64px;
  1212. font-size: 20px;
  1213. margin-right: 8px;
  1214. }
  1215. .sell-customer-btn {
  1216. position: fixed;
  1217. right: 244px;
  1218. top: 115px;
  1219. }
  1220. .copy-customer-btn {
  1221. position: fixed;
  1222. right: 140px;
  1223. top: 115px;
  1224. }
  1225. .add-customer-btn {
  1226. position: fixed;
  1227. right: 36px;
  1228. top: 115px;
  1229. }
  1230. ::v-deep .el-form-item {
  1231. margin-bottom: 8px;
  1232. }
  1233. ::v-deep .el-form-item__error {
  1234. display: none;
  1235. }
  1236. ::v-deep .select-component {
  1237. display: flex;
  1238. }
  1239. </style>