detailsPage.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
  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="success" class="copy-customer-btn" disabled>
  14. 复制新单
  15. </el-button>
  16. <el-button
  17. class="el-button--small-yh add-customer-btn"
  18. type="primary"
  19. :disabled="disabled"
  20. @click="editCustomer"
  21. >{{ form.id ? "确认修改" : "确认新增" }}
  22. </el-button>
  23. </div>
  24. <div style="margin-top: 60px;margin-bottom:35px">
  25. <containerTitle title="基础信息"></containerTitle>
  26. <basic-container>
  27. <avue-form ref="form" v-model="form" :option="option">
  28. <template slot="corpId">
  29. <select-component
  30. v-model="form.corpId"
  31. :configuration="configuration"
  32. :disabled="detailData.status == 1"
  33. ></select-component>
  34. </template>
  35. <template slot="exchangeRate">
  36. <el-input
  37. size="mini"
  38. v-model="form.exchangeRate"
  39. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  40. @change="rateChange"
  41. placeholder="请输入 汇率"
  42. :disabled="detailData.status == 1"
  43. ><template slot="append">%</template></el-input
  44. >
  45. </template>
  46. </avue-form>
  47. </basic-container>
  48. <div>
  49. <containerTitle title="商品信息"></containerTitle>
  50. <basic-container>
  51. <avue-crud
  52. :ref="crud"
  53. :data="data"
  54. :option="tableOption"
  55. @row-del="rowDel"
  56. @selection-change="goodsSelectionChange"
  57. >
  58. <template slot="price" slot-scope="{ row }">
  59. <el-input
  60. v-if="row.$cellEdit"
  61. v-model="row.price"
  62. size="small"
  63. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  64. @change="priceChange(row)"
  65. ></el-input>
  66. <span v-else>{{ row.price }}</span>
  67. </template>
  68. <template slot="orderQuantity" slot-scope="{ row }">
  69. <el-input
  70. v-if="row.$cellEdit"
  71. v-model="row.orderQuantity"
  72. size="small"
  73. oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
  74. @change="quantityChange(row)"
  75. ></el-input>
  76. <span v-else>{{ row.orderQuantity }}</span>
  77. </template>
  78. <template slot="menuLeft">
  79. <el-button
  80. type="primary"
  81. icon="el-icon-plus"
  82. size="small"
  83. @click.stop="newDetails"
  84. :disabled="detailData.status == 1"
  85. >新增明细</el-button
  86. >
  87. <el-button
  88. type="info"
  89. icon="el-icon-printer"
  90. size="small"
  91. @click.stop="openReport()"
  92. >报 表</el-button
  93. >
  94. </template>
  95. <template slot="menu" slot-scope="scope">
  96. <el-button
  97. v-if="scope.row.$cellEdit"
  98. size="small"
  99. icon="el-icon-edit"
  100. type="text"
  101. @click="rowDel(scope.row, scope.index)"
  102. >删 除</el-button
  103. >
  104. </template>
  105. </avue-crud>
  106. </basic-container>
  107. </div>
  108. <fee-info
  109. ref="feeInfo"
  110. :orderFeesList="orderFeesList"
  111. :disabled="detailData.status == 1"
  112. feeUrl="/trade-purchase/purchase-order/removeByFees"
  113. />
  114. <upload-file
  115. ref="uploadFile"
  116. title="合同附件"
  117. :orderFilesList="orderFilesList"
  118. :disabled="detailData.status == 1"
  119. delUrl="/trade-purchase/purchase-order/removeByFiles"
  120. />
  121. <div>
  122. <containerTitle title="银行信息"></containerTitle>
  123. <basic-container>
  124. <avue-form ref="form" v-model="form" :option="bankOption" />
  125. </basic-container>
  126. </div>
  127. </div>
  128. <el-dialog
  129. title="导入商品"
  130. append-to-body
  131. class="el-dialogDeep"
  132. :visible.sync="dialogVisible"
  133. width="60%"
  134. :close-on-click-modal="false"
  135. :destroy-on-close="true"
  136. :close-on-press-escape="false"
  137. @close="closeGoods"
  138. top="10vh"
  139. >
  140. <span>
  141. <el-row>
  142. <el-col :span="5">
  143. <div>
  144. <el-scrollbar>
  145. <basic-container style="margin-top:45px">
  146. <avue-tree :option="treeOption" @node-click="nodeClick" />
  147. </basic-container>
  148. </el-scrollbar>
  149. </div>
  150. </el-col>
  151. <el-col :span="19">
  152. <avue-crud
  153. :option="goodsOption"
  154. :table-loading="loading"
  155. :data="goodsList"
  156. ref="goodsCrud"
  157. @refresh-change="refreshChange"
  158. @selection-change="selectionChange"
  159. @row-click="rowClick"
  160. :page.sync="page"
  161. @on-load="onLoad"
  162. ></avue-crud>
  163. </el-col>
  164. </el-row>
  165. </span>
  166. <span slot="footer" class="dialog-footer">
  167. <el-button @click="dialogVisible = false">取 消</el-button>
  168. <el-button
  169. type="primary"
  170. @click="importGoods"
  171. :disabled="selectionList.length == 0"
  172. >导入</el-button
  173. >
  174. </span>
  175. </el-dialog>
  176. <report-dialog
  177. :switchDialog="switchDialog"
  178. :reportId="form.id"
  179. reportName="客户询价"
  180. @onClose="onClose()"
  181. ></report-dialog>
  182. </div>
  183. </template>
  184. <script>
  185. import tableOption from "./config/customerContact.json";
  186. import goodsOption from "./config/commodity.json";
  187. import feeInfo from "@/components/fee-info/main";
  188. import uploadFile from "@/components/upload-file/main";
  189. import {
  190. detail,
  191. submit,
  192. delItem,
  193. getDeptLazyTree,
  194. getGoods,
  195. deliverGoods,
  196. getPorts,
  197. getSysNo
  198. } from "@/api/exportTrade/purchaseContract";
  199. import _ from "lodash";
  200. import reportDialog from "@/components/report-dialog/main";
  201. import { isvalidatemobile, validatename } from "@/util/validate";
  202. export default {
  203. name: "detailsPageEdit",
  204. data() {
  205. const validatePhone = (rule, value, callback) => {
  206. if (value != "") {
  207. if (isvalidatemobile(value)[0]) {
  208. this.$message.error("手机号码格式不正确");
  209. callback(new Error(isvalidatemobile(value)[1]));
  210. } else {
  211. callback();
  212. }
  213. } else {
  214. callback();
  215. }
  216. };
  217. const validateName = (rule, value, callback) => {
  218. if (value != "") {
  219. if (validatename(value)) {
  220. this.$message.error("联系人格式不正确");
  221. callback(new Error(validatename(value)));
  222. } else {
  223. callback();
  224. }
  225. } else {
  226. callback();
  227. }
  228. };
  229. return {
  230. configuration: {
  231. multipleChoices: false,
  232. multiple: false,
  233. collapseTags: false,
  234. placeholder: "请点击右边按钮选择",
  235. dicData: []
  236. },
  237. switchDialog: false,
  238. form: {},
  239. disabled: false,
  240. dialogVisible: false,
  241. tableOption: tableOption,
  242. option: {
  243. menuBtn: false,
  244. labelWidth: 100,
  245. column: [
  246. {
  247. label: "客户名称",
  248. prop: "corpId",
  249. rules: [
  250. {
  251. required: true,
  252. message: "",
  253. trigger: "blur"
  254. }
  255. ],
  256. span: 8,
  257. slot: true
  258. },
  259. {
  260. label: "系统号",
  261. prop: "sysNo",
  262. span: 8,
  263. disabled: true
  264. },
  265. {
  266. label: "订单状态",
  267. prop: "orderStatus",
  268. span: 8,
  269. type: "select",
  270. dicUrl: "/api/blade-system/dict-biz/dictionary?code=order_status",
  271. props: {
  272. label: "dictValue",
  273. value: "dictValue"
  274. }
  275. },
  276. {
  277. label: "订单号",
  278. prop: "orderNo",
  279. span: 8
  280. },
  281. {
  282. label: "联系人",
  283. prop: "corpAttn",
  284. span: 8,
  285. rules: [{ validator: validateName, trigger: "blur" }]
  286. },
  287. {
  288. label: "电话",
  289. prop: "corpTel",
  290. span: 8,
  291. rules: [{ validator: validatePhone, trigger: "blur" }]
  292. },
  293. {
  294. label: "采购日期",
  295. prop: "businesDate",
  296. span: 8,
  297. type: "date",
  298. format: "yyyy-MM-dd",
  299. valueFormat: "yyyy-MM-dd 00:00:00"
  300. },
  301. {
  302. label: "预计交货日期",
  303. prop: "plannedDeliveryDate",
  304. span: 8,
  305. type: "date",
  306. format: "yyyy-MM-dd",
  307. valueFormat: "yyyy-MM-dd 00:00:00"
  308. },
  309. {
  310. label: "实际交货日",
  311. prop: "requiredDeliveryDate",
  312. span: 8,
  313. type: "date",
  314. format: "yyyy-MM-dd",
  315. valueFormat: "yyyy-MM-dd 00:00:00"
  316. },
  317. {
  318. label: "是否开票",
  319. prop: "ifInvoice",
  320. span: 8,
  321. type: "select",
  322. dicUrl: "/api/blade-system/dict-biz/dictionary?code=ifInvoice",
  323. props: {
  324. label: "dictValue",
  325. value: "dictValue"
  326. }
  327. },
  328. {
  329. label: "收款方式",
  330. prop: "paymentType",
  331. span: 8,
  332. type: "select",
  333. dicUrl: "/api/blade-system/dict-biz/dictionary?code=payment_term",
  334. props: {
  335. label: "dictValue",
  336. value: "dictValue"
  337. }
  338. },
  339. {
  340. label: "收款说明",
  341. prop: "paymentTypeDescription",
  342. span: 8
  343. },
  344. {
  345. label: "币别",
  346. prop: "currency",
  347. span: 8,
  348. type: "select",
  349. dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
  350. props: {
  351. label: "dictValue",
  352. value: "dictValue"
  353. }
  354. },
  355. {
  356. label: "汇率",
  357. prop: "exchangeRate",
  358. span: 8,
  359. slot: true
  360. },
  361. {
  362. label: "备注",
  363. prop: "orderRemark",
  364. type: "textarea",
  365. minRows: 2,
  366. span: 8
  367. }
  368. ]
  369. },
  370. treeOption: {
  371. nodeKey: "id",
  372. lazy: true,
  373. treeLoad: function(node, resolve) {
  374. const parentId = node.level === 0 ? 0 : node.data.id;
  375. getDeptLazyTree(parentId).then(res => {
  376. resolve(
  377. res.data.data.map(item => {
  378. return {
  379. ...item,
  380. leaf: !item.hasChildren
  381. };
  382. })
  383. );
  384. });
  385. },
  386. addBtn: false,
  387. menu: false,
  388. size: "small",
  389. props: {
  390. label: "title",
  391. value: "value",
  392. children: "children"
  393. }
  394. },
  395. bankOption: {
  396. menuBtn: false,
  397. labelWidth: 100,
  398. column: [
  399. {
  400. label: "银行",
  401. prop: "banks",
  402. span: 8
  403. },
  404. {
  405. label: "银行信息",
  406. prop: "banksAccountName",
  407. span: 16,
  408. type: "textarea",
  409. minRows: 2
  410. }
  411. ]
  412. },
  413. insuranceOption: {
  414. menuBtn: false,
  415. labelWidth: 100,
  416. column: [
  417. {
  418. label: "保险描述",
  419. prop: "insuranceRemarks",
  420. span: 24,
  421. type: "textarea",
  422. minRows: 2
  423. }
  424. ]
  425. },
  426. markOption: {
  427. menuBtn: false,
  428. labelWidth: 100,
  429. column: [
  430. {
  431. label: "唛头描述",
  432. prop: "marks",
  433. span: 24,
  434. type: "textarea",
  435. minRows: 2
  436. }
  437. ]
  438. },
  439. page: {
  440. pageSize: 10,
  441. currentPage: 1,
  442. total: 0
  443. },
  444. loading: false,
  445. goodsOption: goodsOption,
  446. data: [],
  447. goodsList: [],
  448. selectionList: [],
  449. treeDeptId: null,
  450. orderFeesList: [],
  451. orderFilesList: [],
  452. orderItemIds: []
  453. };
  454. },
  455. props: {
  456. detailData: {
  457. type: Object
  458. }
  459. },
  460. components: {
  461. reportDialog,
  462. feeInfo,
  463. uploadFile
  464. },
  465. created() {
  466. if (this.detailData.id) {
  467. this.getDetail(this.detailData.id);
  468. }
  469. if (this.detailData.status == 1) {
  470. this.option.disabled = true;
  471. this.bankOption.disabled = true;
  472. this.insuranceOption.disabled = true;
  473. this.markOption.disabled = true;
  474. }
  475. let _this = this;
  476. this.tableOption.column.forEach(e => {
  477. if (e.prop == "taxRate") {
  478. e.formatter = function(row) {
  479. return _this.textFormat(
  480. Number(row.taxRate ? row.taxRate : 0) / 100,
  481. "0.00%"
  482. );
  483. };
  484. }
  485. if (e.prop == "amount" || e.prop == "price") {
  486. e.formatter = function(row) {
  487. return _this.textFormat(
  488. Number(row.amount ? row.amount : 0),
  489. "#,##0.00"
  490. );
  491. };
  492. }
  493. });
  494. if (this.detailData.pageType == "new") {
  495. getSysNo().then(res => {
  496. this.form.sysNo = res.data.data;
  497. });
  498. }
  499. },
  500. methods: {
  501. priceChange(row) {
  502. console.log(row);
  503. if (!row.price) {
  504. row.price = 0;
  505. } else {
  506. row.amount = _.multiply(row.price, row.orderQuantity).toFixed(2);
  507. }
  508. },
  509. quantityChange(row) {
  510. if (!row.orderQuantity) {
  511. row.orderQuantity = 0;
  512. } else {
  513. row.amount = _.multiply(row.price, row.orderQuantity).toFixed(2);
  514. }
  515. },
  516. rateChange(row) {
  517. console.log(row);
  518. if (row >= 100) {
  519. this.form.exchangeRate = 0;
  520. this.$message.error("汇率不能超过100%");
  521. }
  522. },
  523. rowSave(row) {
  524. console.log(row);
  525. this.$set(row, "$cellEdit", false);
  526. },
  527. rowDel(row, index) {
  528. this.$confirm("确定删除数据?", {
  529. confirmButtonText: "确定",
  530. cancelButtonText: "取消",
  531. type: "warning"
  532. }).then(() => {
  533. if (row.id) {
  534. delItem(row.id).then(res => {
  535. this.$message({
  536. type: "success",
  537. message: "删除成功!"
  538. });
  539. this.data.splice(index, 1);
  540. });
  541. } else {
  542. this.$message({
  543. type: "success",
  544. message: "删除成功!"
  545. });
  546. this.data.splice(index, 1);
  547. }
  548. });
  549. },
  550. importGoods() {
  551. this.selectionList.forEach(e => {
  552. this.data.push({
  553. itemId: e.id,
  554. code: e.code,
  555. cname: e.cname,
  556. priceCategory: e.goodsTypeName,
  557. itemUrl: e.url,
  558. itemProp: null,
  559. itemDescription: null,
  560. itemType: null,
  561. orderQuantity: 0,
  562. tradeTerms: null,
  563. price: 0,
  564. amount: 0,
  565. taxRate: 0,
  566. unit: e.unit,
  567. remarks: null,
  568. $cellEdit: true
  569. });
  570. });
  571. this.dialogVisible = false;
  572. },
  573. closeGoods() {
  574. this.selectionList = [];
  575. this.treeDeptId = "";
  576. },
  577. goodsSelectionChange(list) {
  578. this.orderItemIds = [];
  579. list.map(e => {
  580. this.orderItemIds.push(e.id);
  581. });
  582. console.log(this.orderItemIds);
  583. },
  584. selectionChange(list) {
  585. this.selectionList = list;
  586. },
  587. rowClick(row) {
  588. this.$refs.goodsCrud.toggleSelection([this.goodsList[row.$index]]);
  589. },
  590. nodeClick(data) {
  591. this.treeDeptId = data.id;
  592. this.page.currentPage = 1;
  593. this.onLoad(this.page);
  594. },
  595. //费用查询
  596. onLoad(page, params = {}) {
  597. this.loading = true;
  598. getGoods(page.currentPage, page.pageSize, this.treeDeptId).then(res => {
  599. const data = res.data.data;
  600. this.page.total = data.total;
  601. this.goodsList = data.records;
  602. this.loading = false;
  603. if (this.page.total) {
  604. this.goodsOption.height = window.innerHeight - 550;
  605. } else {
  606. this.goodsOption.height = window.innerHeight - 475;
  607. }
  608. });
  609. },
  610. //商品明细导入
  611. newDetails() {
  612. this.dialogVisible = !this.dialogVisible;
  613. },
  614. getDetail(id) {
  615. detail(id).then(res => {
  616. this.form = res.data.data;
  617. this.data = res.data.data.itemsVOList ? res.data.data.itemsVOList : [];
  618. this.orderFeesList = res.data.data.orderFeesList
  619. ? res.data.data.orderFeesList
  620. : [];
  621. this.orderFilesList = res.data.data.orderFilesList
  622. ? res.data.data.orderFilesList
  623. : [];
  624. this.configuration.dicData = this.form.corpsName;
  625. });
  626. },
  627. //修改提交触发
  628. editCustomer() {
  629. this.$refs["form"].validate((valid, done) => {
  630. done();
  631. if (valid) {
  632. const orderFeesList = this.$refs.feeInfo.submitData();
  633. for (let i = 0; i < orderFeesList.length; i++) {
  634. if (orderFeesList[i].corpId == null) {
  635. return this.$message.error(`请输入第${i + 1}行的结算中心`);
  636. }
  637. if (orderFeesList[i].price == 0) {
  638. return this.$message.error(`请正确输入第${i + 1}行的价格`);
  639. }
  640. if (orderFeesList[i].quantity == 0) {
  641. return this.$message.error(`请正确输入第${i + 1}行的数量`);
  642. }
  643. }
  644. const orderFilesList = this.$refs.uploadFile.submitData();
  645. submit({
  646. ...this.form,
  647. itemsVOList: this.data,
  648. orderFeesList: orderFeesList,
  649. orderFilesList: orderFilesList,
  650. tradeType: "CK",
  651. billType: "CG"
  652. }).then(res => {
  653. this.$message.success(this.form.id ? "修改成功" : "提交成功");
  654. this.form.id = res.data.data;
  655. });
  656. } else {
  657. return false;
  658. }
  659. });
  660. },
  661. //返回列表
  662. backToList() {
  663. this.$emit("goBack");
  664. },
  665. openReport() {
  666. this.switchDialog = !this.switchDialog;
  667. },
  668. onClose(val) {
  669. this.switchDialog = val;
  670. }
  671. }
  672. };
  673. </script>
  674. <style lang="scss" scoped>
  675. .customer-head {
  676. position: fixed;
  677. top: 105px;
  678. width: 100%;
  679. margin-left: -10px;
  680. height: 62px;
  681. background: #ffffff;
  682. box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
  683. z-index: 999;
  684. }
  685. .customer-back {
  686. cursor: pointer;
  687. line-height: 62px;
  688. font-size: 16px;
  689. color: #323233;
  690. font-weight: 400;
  691. }
  692. .back-icon {
  693. line-height: 64px;
  694. font-size: 20px;
  695. margin-right: 8px;
  696. }
  697. .copy-customer-btn {
  698. position: fixed;
  699. right: 140px;
  700. top: 115px;
  701. }
  702. .add-customer-btn {
  703. position: fixed;
  704. right: 36px;
  705. top: 115px;
  706. }
  707. ::v-deep .el-form-item {
  708. margin-bottom: 8px;
  709. }
  710. ::v-deep .el-form-item__error {
  711. display: none;
  712. }
  713. ::v-deep .select-component {
  714. display: flex;
  715. }
  716. </style>