index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. <template>
  2. <div>
  3. <byBill :propConfig="config" @search="search" @onSmt="doSave" ref="bill" @resert="resert" @detail="openEdit"
  4. @onRefresh="resert" @pagination="pagination" @clickTab="clickTab">
  5. </byBill>
  6. <vxe-modal v-model="vxeValue" width="70%" height="70%" min-width="800" min-height="600" show-zoom resize transfer
  7. show-footer>
  8. <template #title>
  9. <!-- <span>拆单</span> -->
  10. </template>
  11. <template #default>
  12. <div class="fl" style="width: 40%;">
  13. <div style="margin-bottom: 20px;">主单销售数据</div>
  14. <by-table ref="leftTable" :propConfig="leftTableConfig"></by-table>
  15. </div>
  16. <div class="fl" style="font-size: 80px;margin: 200px 6% 0 6%;transform: rotate(90deg);"><i
  17. class="el-icon-sort"></i></div>
  18. <div class="fl" style="width: 40%;">
  19. <div style="margin-bottom: 20px;">拆单销售数据</div>
  20. <by-table ref="rightTable" :propConfig="rightTableConfig" @onChangeRow="rightChange"></by-table>
  21. </div>
  22. </template>
  23. <template #footer>
  24. <div class="btn">
  25. <el-button type="primary" size="small" @click="doConfirm">确定</el-button>
  26. </div>
  27. </template>
  28. </vxe-modal>
  29. </div>
  30. </template>
  31. <script lang="ts">
  32. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  33. import api from "@/api/order";
  34. import OrderType from "./components/orderType.vue";
  35. import byBill from "./components/byBill/byBill.vue";
  36. @Component({ components: { byBill } })
  37. export default class OrderTask extends Vue {
  38. vxeValue = false
  39. timeNum = 0;
  40. timer : any = null
  41. baseInfo : any = {} // 订单数据
  42. regularData : any = [] // 固定值
  43. leftTableConfig : any = {
  44. attr: {
  45. size: 'mini',
  46. height: 490,
  47. align: 'center',
  48. },
  49. columns:
  50. [
  51. {
  52. width: 128,
  53. title: '物料名称',
  54. field: 'materialName',
  55. },
  56. {
  57. width: 128,
  58. title: '数量',
  59. field: 'number',
  60. },
  61. {
  62. width: 128,
  63. title: '已拆单数量',
  64. field: 'splitOrderNumber',
  65. },
  66. {
  67. width: 128,
  68. title: '可拆单数量',
  69. field: 'splitNumber',
  70. }
  71. ]
  72. }
  73. rightTableConfig : any = {
  74. attr: {
  75. size: 'mini',
  76. height: 490,
  77. align: 'center',
  78. },
  79. columns:
  80. [
  81. {
  82. width: 258,
  83. title: '物料名称',
  84. field: 'materialName',
  85. },
  86. {
  87. width: 258,
  88. title: '数量',
  89. field: 'number',
  90. component: 'by-input',
  91. compConfig: {
  92. attr: {
  93. size: 'mini',
  94. type: 'integer',
  95. placeholder: '请输入数量'
  96. },
  97. }
  98. },
  99. ]
  100. }
  101. config : any = {
  102. attr: {
  103. activeName: 'all'
  104. },
  105. // 单据
  106. bill: {
  107. tool: {
  108. customTools: []
  109. },
  110. form: {
  111. attr: {
  112. size: 'medium',
  113. readonly: true,
  114. },
  115. columns: [
  116. [
  117. {
  118. span: 8,
  119. label: '单据编号',
  120. prop: 'orderNumber',
  121. component: 'by-input',
  122. },
  123. {
  124. span: 8,
  125. label: '机构名称',
  126. prop: 'organizationName',
  127. component: 'by-input',
  128. },
  129. {
  130. span: 8,
  131. label: '退单编号',
  132. prop: 'chargebackNo',
  133. component: 'by-input',
  134. },
  135. {
  136. span: 8,
  137. label: '联系方式',
  138. prop: 'deliveryPhone',
  139. component: 'by-input',
  140. },
  141. {
  142. span: 8,
  143. label: '收货人',
  144. prop: 'consignee',
  145. component: 'by-input',
  146. },
  147. {
  148. span: 8,
  149. label: '交货时间',
  150. prop: 'deliveryData',
  151. component: 'by-input',
  152. },
  153. {
  154. span: 8,
  155. label: '交货地点',
  156. prop: 'deliveryAddress',
  157. component: 'by-input',
  158. },
  159. {
  160. span: 8,
  161. label: '交货方式',
  162. prop: 'deliveryWay',
  163. component: 'by-input',
  164. },
  165. ],
  166. [
  167. {
  168. span: 28,
  169. label: '备注',
  170. slot: true,
  171. prop: 'remark',
  172. component: 'by-input',
  173. compConfig: {
  174. attr: {
  175. size: 'mini',
  176. placeholder: '请输入备注',
  177. type: 'textarea'
  178. },
  179. }
  180. },
  181. ]
  182. ]
  183. },
  184. tableConfig: [
  185. {
  186. table: {
  187. attr: {
  188. size: 'mini',
  189. height: 500,
  190. align: 'center',
  191. readonly: true
  192. },
  193. columns:
  194. [{
  195. width: 300,
  196. title: '物料名称',
  197. field: 'materialName',
  198. },
  199. {
  200. width: 150,
  201. title: '单位',
  202. field: 'unit',
  203. },
  204. {
  205. width: 150,
  206. title: '数量',
  207. field: 'number',
  208. },
  209. {
  210. width: 150,
  211. title: '已交付数量',
  212. field: 'deliveryNumber',
  213. },
  214. {
  215. width: 150,
  216. title: '单价',
  217. field: 'unitPrice',
  218. },
  219. {
  220. width: 150,
  221. title: '实际金额',
  222. field: 'realityPrice',
  223. },
  224. {
  225. width: 150,
  226. title: '优惠金额',
  227. field: 'prePrice',
  228. },
  229. {
  230. width: 150,
  231. title: '合计金额',
  232. field: 'totalPrice',
  233. },
  234. ]
  235. }
  236. }
  237. ]
  238. },
  239. // 综合
  240. all: {
  241. search: {
  242. attr: {
  243. size: 'mini',
  244. },
  245. columns: [
  246. [
  247. {
  248. span: 6,
  249. label: '单据编号',
  250. prop: 'orderNumber',
  251. component: 'by-input',
  252. compConfig: {
  253. attr: {
  254. placeholder: '请输入单据编号',
  255. clearable: true
  256. }
  257. }
  258. },
  259. {
  260. span: 6,
  261. label: '机构名称',
  262. prop: 'organizationName',
  263. component: 'by-input',
  264. compConfig: {
  265. attr: {
  266. placeholder: '请输入机构名称',
  267. clearable: true
  268. },
  269. },
  270. },
  271. {
  272. span: 6,
  273. label: '退单编号',
  274. prop: 'chargebackNo',
  275. component: 'by-input',
  276. compConfig: {
  277. attr: {
  278. placeholder: '请输入退单编号',
  279. clearable: true
  280. }
  281. }
  282. },
  283. ],
  284. ]
  285. },
  286. tool: {
  287. tools: {
  288. search: true,
  289. refresh: true
  290. },
  291. customTools: [
  292. {
  293. name: '退单', icon: 'el-icon-top', audit: [''], event: {
  294. click: () => {
  295. (this as any).doBackOrder()
  296. }
  297. }
  298. }
  299. ]
  300. },
  301. table: {
  302. attr: {
  303. height: 600,
  304. size: 'mini',
  305. seq: true,
  306. align: 'left',
  307. checkbox: true
  308. },
  309. columns: [
  310. {
  311. width: 144,
  312. title: '单据编号',
  313. field: 'orderNumber',
  314. isDetail: true,
  315. },
  316. {
  317. width: 50,
  318. component: OrderType,
  319. },
  320. {
  321. width: 180,
  322. title: '机构名称',
  323. field: 'organizationName',
  324. },
  325. {
  326. width: 178,
  327. title: '退单编号',
  328. field: 'chargebackNo',
  329. },
  330. {
  331. width: 90,
  332. title: '收货人',
  333. field: 'consignee',
  334. },
  335. {
  336. width: 120,
  337. title: '联系方式',
  338. field: 'phone',
  339. },
  340. {
  341. width: 150,
  342. title: '计划交货时间',
  343. field: 'planDeliveryData',
  344. },
  345. {
  346. width: 150,
  347. title: '确定交货时间',
  348. field: 'affirmDeliveryData',
  349. },
  350. {
  351. width: 150,
  352. title: '交货地点',
  353. field: 'address',
  354. },
  355. {
  356. width: 110,
  357. title: '操作',
  358. action: true,
  359. plugins: [
  360. {
  361. icon: 'el-icon-edit',
  362. name: '查看',
  363. audit: '',
  364. event: {
  365. click: (item : any) => {
  366. (this as any).openEdit(item)
  367. }
  368. }
  369. },
  370. {
  371. name: '拆单',
  372. event: {
  373. show: (item : any) => {
  374. return item.isMaster === 1
  375. },
  376. click: (item : any) => (this as any).orderTaking(item)
  377. }
  378. },
  379. ]
  380. }
  381. ]
  382. }
  383. },
  384. // 退单
  385. returnOrder: {
  386. search: {
  387. attr: {
  388. size: 'mini',
  389. },
  390. columns: [
  391. [
  392. {
  393. span: 6,
  394. label: '单据编号',
  395. prop: 'orderNumber',
  396. component: 'by-input',
  397. compConfig: {
  398. attr: {
  399. placeholder: '请输入单据编号',
  400. clearable: true
  401. }
  402. }
  403. },
  404. {
  405. span: 6,
  406. label: '机构名称',
  407. prop: 'organizationName',
  408. component: 'by-input',
  409. compConfig: {
  410. attr: {
  411. placeholder: '请输入机构名称',
  412. clearable: true
  413. },
  414. },
  415. },
  416. {
  417. span: 6,
  418. label: '退单编号',
  419. prop: 'chargebackNo',
  420. component: 'by-input',
  421. compConfig: {
  422. attr: {
  423. placeholder: '请输入退单编号',
  424. clearable: true
  425. }
  426. }
  427. },
  428. ],
  429. ]
  430. },
  431. tool: {
  432. tools: {
  433. search: true,
  434. refresh: true
  435. },
  436. },
  437. table: {
  438. attr: {
  439. height: 620,
  440. size: 'mini',
  441. seq: true,
  442. align: 'left',
  443. checkbox: true
  444. },
  445. columns: [
  446. {
  447. width: 168,
  448. title: '单据编号',
  449. field: 'orderNumber',
  450. isDetail: true,
  451. fixed: 'left'
  452. },
  453. {
  454. width: 180,
  455. title: '机构名称',
  456. field: 'organizationName',
  457. },
  458. {
  459. width: 178,
  460. title: '退单编号',
  461. field: 'chargebackNo',
  462. },
  463. {
  464. width: 90,
  465. title: '收货人',
  466. field: 'consignee',
  467. },
  468. {
  469. width: 120,
  470. title: '联系方式',
  471. field: 'phone',
  472. },
  473. {
  474. width: 150,
  475. title: '计划交货时间',
  476. field: 'planDeliveryData',
  477. },
  478. {
  479. width: 150,
  480. title: '确定交货时间',
  481. field: 'affirmDeliveryData',
  482. },
  483. {
  484. width: 150,
  485. title: '交货地点',
  486. field: 'address',
  487. },
  488. {
  489. width: 110,
  490. title: '操作',
  491. action: true,
  492. plugins: [{
  493. icon: 'el-icon-edit',
  494. name: '查看',
  495. audit: '',
  496. event: {
  497. click: (item : any) => {
  498. (this as any).openEdit(item)
  499. }
  500. }
  501. }, {
  502. name: '拆单',
  503. event: {
  504. click: (item : any) => (this as any).orderTaking(item)
  505. }
  506. }]
  507. }
  508. ]
  509. }
  510. },
  511. }
  512. created() {
  513. this.timer = setInterval(() => {
  514. this.getDataList()
  515. }, 500)
  516. }
  517. // 右拆单数据变化
  518. rightChange(e : any) {
  519. console.log(e.number);
  520. if (0 <= e.number && e.number <= this.regularData[e.dataIndex].splitNumber) {
  521. let leftTableData = (this.$refs.leftTable as any).getValue();
  522. leftTableData[e.dataIndex].splitNumber = leftTableData[e.dataIndex].number - e.number;
  523. (this.$refs.leftTable as any).setValue(leftTableData);
  524. } else {
  525. let leftTableData = (this.$refs.leftTable as any).getValue();
  526. let rifhtTableData = (this.$refs.rightTable as any).getValue();
  527. rifhtTableData[e.dataIndex].number = '0';
  528. leftTableData[e.dataIndex].splitNumber = leftTableData[e.dataIndex].number - leftTableData[e.dataIndex].splitOrderNumber;
  529. (this.$refs.leftTable as any).setValue(leftTableData);
  530. (this.$refs.rightTable as any).setValue(rifhtTableData);
  531. this.$message.warning('输入值只能是自然数且不能大于可拆单数量');
  532. }
  533. }
  534. // 打开拆单
  535. orderTaking(item : any) {
  536. this.vxeValue = true;
  537. this.baseInfo = item;
  538. this.regularData = (this as any).$lodash.cloneDeep(item.suborderList);
  539. let rightData = (this as any).$lodash.cloneDeep(item.suborderList);
  540. this.regularData.map((v : any) => {
  541. v.splitNumber = v.number - v.splitOrderNumber;
  542. })
  543. rightData.map((v : any, i : any) => {
  544. v.number = '0';
  545. v.dataIndex = i;
  546. v.splitNumber = v.number - v.splitOrderNumber;
  547. });
  548. setTimeout(() => {
  549. (this.$refs.leftTable as any).setValue(this.regularData);
  550. (this.$refs.rightTable as any).setValue(rightData);
  551. }, 0)
  552. }
  553. // 确认拆单
  554. doConfirm() {
  555. let rifhtNewData : any = [];
  556. let rifhtTableData = (this.$refs.rightTable as any).getValue();
  557. rifhtTableData.map((v : any) => {
  558. rifhtNewData.push({
  559. id: v.id,
  560. inSplitOrderNumber: v.number
  561. })
  562. });
  563. let isTrue = rifhtNewData.filter((v : any) => v.inSplitOrderNumber != 0);
  564. let obj : any = {
  565. id: this.baseInfo.id,
  566. splitList: rifhtNewData,
  567. };
  568. if (isTrue.length > 0) {
  569. api.splitOrder(obj, 'supplyPurchaseOrder').then((res : any) => {
  570. if (res.code === 200) {
  571. this.$message.success('拆单成功!');
  572. this.getPageList({}, 'all'); // 综合数据
  573. this.vxeValue = false;
  574. } else this.$message.error(res.msg);
  575. })
  576. } else this.$message.warning('请输入拆单销售数据');
  577. }
  578. // 保存新增
  579. doSave() {
  580. // (this.$refs.product as any).setShow(true)
  581. (this as any).$refs.bill.$refs.billForm.validate().then(() => {
  582. let query = (this as any).$refs.bill.$refs.billForm.getValue();
  583. api.saveList(query, 'supplyPurchaseOrder').then((res : any) => {
  584. if (res.code === 200) {
  585. this.$message({
  586. type: 'success',
  587. message: '提交成功!'
  588. });
  589. this.getDataList();
  590. (this.$refs.bill as any).showTab = 'all';
  591. (this.$refs.bill as any).setBillFormValue({});
  592. } else this.$message.error(res.msg);
  593. })
  594. })
  595. }
  596. getDataList() {
  597. if (!this.$refs.bill) {
  598. if (this.timeNum > 5) {
  599. clearInterval(this.timer)
  600. }
  601. this.timeNum++;
  602. return
  603. }
  604. clearInterval(this.timer);
  605. this.getPageList({}, 'all'); // 综合数据
  606. }
  607. // 获取分页数据
  608. getPageList(query : any, type : any) {
  609. api.pageList(query, 'supplyPurchaseOrder').then((res : any) => {
  610. if (res.code === 200) {
  611. (this.$refs.bill as any).setTabTableValue(type, res.data.records);
  612. let page = {
  613. pageNo: res.data.current, //当前页
  614. pageSize: res.data.size, //每页条数
  615. total: res.data.total //总条数
  616. };
  617. (this.$refs.bill as any).setTablePage(type, page)
  618. } else this.$message.error(res.msg);
  619. })
  620. }
  621. // 打开编辑
  622. openEdit(e : any) {
  623. e = e.row ? e.row : e;
  624. let billConfig = (this as any).$lodash.cloneDeep(this.config.bill);
  625. if (e.isMaster === 1) {
  626. billConfig.tool.customTools = [
  627. {
  628. name: '拆单', icon: 'el-icon-minus', audit: [''], event: {
  629. click: () => {
  630. (this as any).orderTaking(e)
  631. }
  632. }
  633. },
  634. ];
  635. } else {
  636. billConfig.tool.customTools = [
  637. {
  638. name: '退单', icon: 'el-icon-bottom', audit: [''], event: {
  639. click: () => {
  640. (this as any).doBackOrder2(e)
  641. }
  642. }
  643. }
  644. ];
  645. };
  646. (this.$refs.bill as any).setBillConfig(billConfig);
  647. (this.$refs.bill as any).setBillFormValue(e); // 设置单据表单数据
  648. (this.$refs.bill as any).setBillTableValue(e.suborderList, 0);// 设置第1张单据表格数据
  649. (this.$refs.bill as any).showTab = 'bill';
  650. }
  651. // 工具栏退单
  652. doBackOrder() {
  653. let selectData = (this as any).$refs.bill.getTableSelectData('all');
  654. if (selectData.length > 1) return this.$message.warning('只能选择一条退单数据')
  655. let ids:any = [];
  656. if (selectData.length > 0) {
  657. selectData.map((v : any) => {
  658. ids.push(v.id);
  659. })
  660. } else return this.$message({ type: 'warning', message: '请选择退单数据' })
  661. selectData[0].suborderList.map((v : any) => {
  662. delete v.id;
  663. })
  664. this.$confirm('确定退单吗!', '注意', {
  665. confirmButtonText: '确定',
  666. cancelButtonText: '取消',
  667. type: 'warning',
  668. center: true
  669. }).then(() => {
  670. api.stoporder({ids:ids}, 'supplyPurchaseOrder').then((res : any) => {
  671. if (res.code === 200) {
  672. this.$message.success('退单成功!');
  673. this.getDataList();
  674. (this.$refs.bill as any).showTab = 'all';
  675. } else this.$message.error(res.msg)
  676. })
  677. }).catch(() => this.$message.info('已取消退单'));
  678. }
  679. // 导航切换
  680. clickTab(e : any) {
  681. console.log('导航切换 ==> ', e);
  682. if (e === 'all') this.getDataList();
  683. if (e === 'bill') {
  684. let billConfig = (this as any).$lodash.cloneDeep(this.config.bill);
  685. billConfig.tool.customTools = [];
  686. (this.$refs.bill as any).setBillConfig(billConfig);
  687. }
  688. }
  689. // 单据操作退单
  690. doBackOrder2(e : any) {
  691. console.log(e);
  692. e.suborderList.map((v : any) => {
  693. delete v.id;
  694. })
  695. this.$confirm('确定退单吗!', '注意', {
  696. confirmButtonText: '确定',
  697. cancelButtonText: '取消',
  698. type: 'warning',
  699. center: true
  700. }).then(() => {
  701. api.stoporder([e.id], 'supplyPurchaseOrder').then((res : any) => {
  702. if (res.code === 200) {
  703. this.$message.success('退单成功!');
  704. this.getDataList();
  705. (this.$refs.bill as any).showTab = 'all';
  706. } else this.$message.error(res.msg)
  707. })
  708. }).catch(() => this.$message.info('已取消退单'));
  709. }
  710. // 分页
  711. pagination(e : any) {
  712. let query : any = (this as any).$refs.bill.getSearchValue(e.type);
  713. query.pageNo = e.page.pageNum;
  714. query.pageSize = e.page.pageSize;
  715. let loading = this.$loading({ target: '.main-container' })
  716. api.pageList(query, 'supplyPurchaseOrder').then((res : any) => {
  717. if (res.code === 200) {
  718. (this.$refs.bill as any).setTabTableValue(e.type, res.data.records);
  719. loading.close()
  720. } else this.$message.error(res.msg);
  721. })
  722. }
  723. // 搜索
  724. search(parames : any) {
  725. let query = parames.value
  726. if (parames.type === 'draftsBox') query.submitState = 0 // 草稿箱数据
  727. if (parames.type === 'smt') query.submitState = 1 // 已提交数据
  728. this.getPageList(query, parames.type) // 获取综合分页数据
  729. }
  730. // 刷新/重置
  731. resert(e : any) {
  732. let data : any = e.type ? e.type : e;
  733. (this as any).$refs.bill.$refs[data].clearSearch();
  734. if (data === 'all') this.getPageList({}, 'all'); // 综合数据
  735. }
  736. }
  737. </script>