addShipDetDrawer.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. <template>
  2. <!-- 新增发运明细 -->
  3. <div id="AddShipDetDrawer">
  4. <a-drawer
  5. title="新增发运明细"
  6. width="89%"
  7. placement="right"
  8. :closable="true"
  9. :visible="visible"
  10. @close="handleCancel"
  11. >
  12. <!-- 主表信息 填写-->
  13. <a-card :bordered="true">
  14. <div class="table-page-search-wrapper">
  15. <!-- :rules="validatorRules" -->
  16. <a-form-model layout="inline" ref="form" :model="addShipDet">
  17. <a-row :gutter="24">
  18. <a-col :md="6" :sm="8">
  19. <!-- required必填项 disabled 禁用 -->
  20. <a-form-model-item label="单据号" prop="documentNo">
  21. <a-input placeholder="请输入单据号" v-model="addShipDet.documentNo"></a-input>
  22. </a-form-model-item>
  23. </a-col>
  24. <a-col :md="6" :sm="8">
  25. <a-form-model-item label="单据日期" prop="documentDate">
  26. <a-date-picker
  27. placeholder="请选择单据日期"
  28. :format="dateFormat"
  29. style="width:100%;"
  30. v-model="addShipDet.documentDate"
  31. />
  32. </a-form-model-item>
  33. </a-col>
  34. <a-col :md="6" :sm="8">
  35. <a-form-model-item label="客户" prop="customer">
  36. <a-input placeholder="请输入客户" v-model="addShipDet.customer"></a-input>
  37. </a-form-model-item>
  38. </a-col>
  39. <a-col :md="6" :sm="8">
  40. <a-form-model-item label="预发货日期" prop="preDeliveryDate">
  41. <a-date-picker
  42. placeholder="请选择预发货时间"
  43. :format="dateFormat"
  44. style="width:100%;"
  45. v-model="addShipDet.preDeliveryDate"
  46. />
  47. </a-form-model-item>
  48. </a-col>
  49. <a-col :md="6" :sm="8">
  50. <a-form-model-item label="预完工日期" prop="preCompletionDate">
  51. <a-date-picker
  52. placeholder="请选择预完工日期"
  53. :format="dateFormat"
  54. style="width:100%;"
  55. v-model="addShipDet.preCompletionDate"
  56. />
  57. </a-form-model-item>
  58. </a-col>
  59. <a-col :md="18" :sm="18">
  60. <!-- 'U8 备注' -->
  61. <a-form-model-item label="备注" prop="memo">
  62. <a-input placeholder="请输入备注" v-model="addShipDet.memo"></a-input>
  63. </a-form-model-item>
  64. </a-col>
  65. </a-row>
  66. </a-form-model>
  67. </div>
  68. </a-card>
  69. <!-- 参照订单数据 増行-->
  70. <a-card :bordered="true" style="margin:10px 0">
  71. <div class="table-operator">
  72. <a-button type="primary" @click.stop="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
  73. <a-button type="primary" @click.stop="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
  74. </div>
  75. <!-- 子表 :model="form" rowKey="id" ,y:800 -->
  76. <a-spin :spinning="confirmLoading">
  77. <a-form-model ref="formRef">
  78. <a-table
  79. :loading="loading"
  80. v-if="syShippingDetailsItemList"
  81. bordered
  82. :rowKey="record => record.id"
  83. :columns="columns"
  84. :data-source="syShippingDetailsItemList"
  85. :pagination="false"
  86. :scroll="{ x: 1500 }"
  87. size="small"
  88. >
  89. <!-- 款号 输入框 :rules="rules.itemNumber" -->
  90. <template slot="itemNumber" slot-scope="text, record, index">
  91. <a-form-model-item prop="itemNumber">
  92. <a-input style="width:100%" type="text" v-model="record.itemNumber" />
  93. </a-form-model-item>
  94. </template>
  95. <!-- 发货数量 :rules="rules.shipQuantity"-->
  96. <template slot="shipQuantity" slot-scope="text, record, index">
  97. <a-form-model-item prop="shipmentQuantity">
  98. <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
  99. </a-form-model-item>
  100. </template>
  101. <!-- 是否TC功能 :rules="rules.isTC"-->
  102. <!-- isTc ' 是否 tc 功能 0 否 1 是', -->
  103. <template slot="isTC" slot-scope="text, record, index">
  104. <a-form-model-item prop="isTc">
  105. <a-select v-model="record.isTC">
  106. <a-select-option value="">请选择</a-select-option>
  107. <a-select-option :value="1">是</a-select-option>
  108. <a-select-option :value="0">否</a-select-option>
  109. </a-select>
  110. </a-form-model-item>
  111. </template>
  112. <!-- 物料成分 :rules="rules.materialComposition"-->
  113. <template slot="materialComposition" slot-scope="text, record, index">
  114. <a-form-model-item prop="materialComposition">
  115. <a-input style="width:100%" type="text" v-model="record.materialComposition" />
  116. </a-form-model-item>
  117. </template>
  118. <!-- 操作 -->
  119. <template slot="operationSlot" slot-scope="text, record, index">
  120. <a-popconfirm
  121. v-if="syShippingDetailsItemList.length"
  122. title="确定删除吗?"
  123. @confirm="handleDelete(record)">
  124. <a href="javascript:void(0);" style="color:red;">删除</a>
  125. </a-popconfirm>
  126. <a-divider type="vertical" />
  127. <a @click="copy(record)">复制</a>
  128. </template>
  129. </a-table>
  130. </a-form-model>
  131. </a-spin>
  132. </a-card>
  133. <!-- 页面底部保存取消 -->
  134. <div
  135. :style="{
  136. position: 'absolute',
  137. right: 0,
  138. bottom: 0,
  139. width: '100%',
  140. borderTop: '1px solid #e9e9e9',
  141. padding: '10px 16px',
  142. background: '#fff',
  143. textAlign: 'right',
  144. zIndex: 1
  145. }"
  146. >
  147. <a-popconfirm title="确定放弃新增?" @confirm="handleCancel" okText="确定" cancelText="取消">
  148. <a-button :style="{ marginRight: '8px' }">取消</a-button>
  149. </a-popconfirm>
  150. <a-button type="primary" @click="addSave">
  151. 保存
  152. </a-button>
  153. </div>
  154. </a-drawer>
  155. <!-- 参照订单数据弹框 -->
  156. <referOrderData-modal ref="referOrderDataModal" @bao="getSon" @ok="referOrderDataOk"></referOrderData-modal>
  157. </div>
  158. </template>
  159. <script>
  160. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  161. import JEllipsis from '@/components/jeecg/JEllipsis'
  162. import moment from 'moment'
  163. // import 'moment/locale/zh-cn'
  164. import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
  165. import { addShipmentList } from '@api/document/shipmentList'
  166. export default {
  167. name: 'AddShipDetDrawer', // 新增 发运明细 抽屉
  168. mixins: [JeecgListMixin],
  169. components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
  170. data() {
  171. let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
  172. return {
  173. id: '',
  174. // 表头
  175. columns: [
  176. {
  177. title: '账套',
  178. dataIndex: 'pkOrg',
  179. width: 80,
  180. fixed: 'left',
  181. className: 'replacecolor'
  182. },
  183. {
  184. title: '订单号',
  185. dataIndex: 'orderNumber',
  186. width: 120,
  187. fixed: 'left',
  188. className: 'replacecolor'
  189. },
  190. {
  191. title: '款号',
  192. dataIndex: 'itemNumber',
  193. scopedSlots: { customRender: 'itemNumber' },
  194. fixed: 'left',
  195. width: 180,
  196. className: 'replacecolor'
  197. },
  198. // {
  199. // title: '创建时间',
  200. // dataIndex: 'createTime',
  201. // align: 'center',
  202. // sorter: true,
  203. // customRender: text => {
  204. // return moment(text).format('YYYY-MM-DD')
  205. // }
  206. // },
  207. {
  208. title: '订单日期',
  209. dataIndex: 'orderDate',
  210. width: 120,
  211. className: 'replacecolor'
  212. },
  213. {
  214. title: '业务类型',
  215. dataIndex: 'businessTypeText',
  216. width: 120,
  217. className: 'replacecolor'
  218. },
  219. {
  220. title: '客户订单',
  221. dataIndex: 'customerOrderNumber',
  222. width: 120,
  223. className: 'replacecolor'
  224. },
  225. {
  226. title: '小po',
  227. dataIndex: 'smallPo',
  228. width: 120,
  229. className: 'replacecolor'
  230. },
  231. {
  232. title: 'Pack Id',
  233. dataIndex: 'packId',
  234. width: 120,
  235. className: 'replacecolor'
  236. },
  237. {
  238. title: '订单数据',
  239. dataIndex: 'orderData',
  240. width: 120,
  241. className: 'replacecolor'
  242. },
  243. {
  244. title: '订单剩余数量',
  245. dataIndex: 'orderRemainingQuantity',
  246. width: 120,
  247. className: 'replacecolor'
  248. },
  249. {
  250. title: '发货数量',
  251. dataIndex: 'shipQuantity',
  252. scopedSlots: { customRender: 'shipQuantity' },
  253. width: 120,
  254. className: 'replacecolor'
  255. },
  256. {
  257. title: '是否TC功能',
  258. dataIndex: 'isTC',
  259. width: 90,
  260. scopedSlots: { customRender: 'isTC' },
  261. className: 'replacecolor'
  262. },
  263. {
  264. title: '物料成分',
  265. dataIndex: 'materialComposition',
  266. scopedSlots: { customRender: 'materialComposition' },
  267. width: 140,
  268. className: 'replacecolor'
  269. },
  270. {
  271. title: '销售类型',
  272. dataIndex: 'salesTypeText',
  273. width: 120,
  274. className: 'replacecolor'
  275. },
  276. {
  277. title: '客户简称',
  278. dataIndex: 'customerAbbreviation',
  279. width: 120,
  280. className: 'replacecolor'
  281. },
  282. {
  283. title: '客户名称',
  284. dataIndex: 'customerName',
  285. width: 120,
  286. className: 'replacecolor'
  287. },
  288. {
  289. title: '汇率',
  290. dataIndex: 'exchangeRate',
  291. width: 120,
  292. className: 'replacecolor'
  293. },
  294. {
  295. title: '整单合计',
  296. dataIndex: 'wholeOrderTotal',
  297. width: 120,
  298. className: 'replacecolor'
  299. },
  300. {
  301. title: '销售部门',
  302. dataIndex: 'salesDepartment',
  303. width: 120,
  304. className: 'replacecolor'
  305. },
  306. {
  307. title: '业务员',
  308. dataIndex: 'salesman',
  309. width: 120,
  310. className: 'replacecolor'
  311. },
  312. {
  313. title: '币种',
  314. dataIndex: 'currencyValue',
  315. width: 120,
  316. className: 'replacecolor'
  317. },
  318. {
  319. title: '品牌方',
  320. dataIndex: 'brandSide',
  321. width: 120,
  322. className: 'replacecolor'
  323. },
  324. {
  325. title: '第三方',
  326. dataIndex: 'thirdParty',
  327. width: 120,
  328. className: 'replacecolor'
  329. },
  330. {
  331. title: '定金比例(%)',
  332. dataIndex: 'depositRatio',
  333. width: 120,
  334. className: 'replacecolor'
  335. },
  336. {
  337. title: '定金',
  338. dataIndex: 'deposit',
  339. width: 120,
  340. className: 'replacecolor'
  341. },
  342. {
  343. title: '协同路线',
  344. dataIndex: 'collaborativeRoute',
  345. width: 120,
  346. className: 'replacecolor'
  347. },
  348. {
  349. title: '付款条件',
  350. dataIndex: 'termOfPayment',
  351. width: 160,
  352. customRender: t => ellipsis(t),
  353. className: 'replacecolor'
  354. },
  355. {
  356. title: '最终客户',
  357. dataIndex: 'endCustomer',
  358. width: 120,
  359. className: 'replacecolor'
  360. },
  361. {
  362. title: '订单备注',
  363. dataIndex: 'orderRemarks',
  364. width: 160,
  365. customRender: t => ellipsis(t),
  366. className: 'replacecolor'
  367. },
  368. {
  369. title: '价格备注',
  370. dataIndex: 'priceRemarks',
  371. width: 160,
  372. customRender: t => ellipsis(t),
  373. className: 'replacecolor'
  374. },
  375. {
  376. title: '订单变更说明',
  377. dataIndex: 'orderChangeDescription',
  378. width: 160,
  379. customRender: t => ellipsis(t),
  380. className: 'replacecolor'
  381. },
  382. {
  383. title: '操作',
  384. dataIndex: 'operation',
  385. scopedSlots: { customRender: 'operationSlot' },
  386. width: 160,
  387. fixed: 'right',
  388. className: 'replacecolor'
  389. }
  390. ],
  391. msgFormSon: 'test', // 子组件传来数据的变量
  392. syShippingDetailsItemList: [], // 子表数据
  393. addShipDet: {}, // 新增发运明细
  394. visible: false,
  395. confirmLoading: false,
  396. dateFormat: 'YYYY-MM-DD',
  397. state: '0', // 单据状态初始未【仅保存】
  398. pushState: '0' // 推送状态初始未【仅保存】
  399. // validatorRules: {
  400. // documentNo: [{ required: true, message: '单据号不能为空', trigger: 'blur' }], 单据号
  401. }
  402. },
  403. // 接收父组件查询方法
  404. props: {
  405. fatherList: {
  406. type: Function,
  407. default: null
  408. }
  409. },
  410. created() {},
  411. methods: {
  412. getSon(val) {
  413. console.log('勾选订单数据', val)
  414. this.msgFormSon = val
  415. this.syShippingDetailsItemList = this.msgFormSon
  416. console.log('新增页 子表信息', this.syShippingDetailsItemList)
  417. },
  418. // 参照订单数据
  419. referOrderDataOpen() {
  420. this.$refs.referOrderDataModal.referOrderDataModVis = true
  421. console.log('点击参照订单数据')
  422. },
  423. // 新增 保存
  424. addSave() {
  425. var newObj = {} // 新增对象
  426. newObj.documentNo = this.addShipDet.documentNo // 单据号
  427. newObj.documentDate = this.addShipDet.documentDate.format('YYYY-MM-DD') // 单据日期
  428. newObj.customer = this.addShipDet.customer
  429. newObj.preDeliveryDate = this.addShipDet.preDeliveryDate.format('YYYY-MM-DD') // 预发货日期
  430. newObj.preCompletionDate = this.addShipDet.preCompletionDate.format('YYYY-MM-DD') // 预完工日期
  431. newObj.memo = this.addShipDet.memo // U8系统适用
  432. newObj.syShippingDetailsItemList = this.syShippingDetailsItemList // 子表信息赋值
  433. // 单据状态
  434. // newObj.state = this.state
  435. // newObj.pushState = this.pushState
  436. // 必须选择子表 --- 参照订单数据
  437. if (newObj.syShippingDetailsItemList.length == 0) {
  438. this.$message.error('请选择参照订单数据')
  439. } else {
  440. addShipmentList(newObj).then(res => {
  441. if (res.success) {
  442. this.$message.success('新增成功')
  443. console.log('新增的对象', newObj)
  444. this.close()
  445. //清空信息
  446. newObj = {}
  447. newObj.syShippingDetailsItemList = []
  448. this.fatherList() // 调用父组件 查询方法
  449. // this.msgFormSon = {} 清空子表信息
  450. console.log('空')
  451. }
  452. })
  453. }
  454. },
  455. // 増行
  456. handleAddColumn() {
  457. console.log('増行')
  458. const addrow = {
  459. accountSet: '',
  460. documentNo: '',
  461. itemNumber: '',
  462. orderDate: '',
  463. businessType: '',
  464. customerOrder: '',
  465. smallPo: '',
  466. packId: '',
  467. orderData: '',
  468. orderRemaQuantity: '',
  469. shipQuantity: '',
  470. isTC: '',
  471. materialComposition: '',
  472. saleType: '',
  473. customerShortName: '',
  474. customerName: '',
  475. exchangeRate: '',
  476. wholeSingleCombined: '',
  477. salesDepartment: '',
  478. salesman: '',
  479. currency: '',
  480. brand: '',
  481. thirdParty: '',
  482. depositRate: '',
  483. deposit: '',
  484. collaborativeRoute: '',
  485. paymentClause: '',
  486. finalCustomer: '',
  487. orderNote: '',
  488. priceNote: '',
  489. orderChangeDesc: '',
  490. operation: ''
  491. }
  492. this.syShippingDetailsItemList.push(addrow)
  493. },
  494. // --------------------------------------
  495. // 操作 删除
  496. handleDelete(record) {
  497. console.log('record', record)
  498. console.log('删除该项订单数据', record.orderNumber)
  499. return this.syShippingDetailsItemList.splice(record)
  500. },
  501. // 操作 复制
  502. copy(record) {},
  503. // --------------------------------------
  504. // 抽屉 取消
  505. handleCancel() {
  506. this.close()
  507. },
  508. // --------------------------------------
  509. close() {
  510. this.$emit('close')
  511. this.visible = false
  512. this.addShipDet = {}
  513. this.syShippingDetailsItemList = []
  514. },
  515. // 参照订单数据弹框 ok-------------------------------------
  516. referOrderDataOk() {
  517. console.log('参照订单数据弹框确定')
  518. this.$refs.referOrderDataModal.referOrderDataModVis = false
  519. }
  520. },
  521. computed: {},
  522. mounted() {}
  523. }
  524. </script>
  525. <style lang="less" scoped>
  526. @import '~@assets/less/common.less';
  527. /deep/ .ant-table-thead > tr > th {
  528. text-align: center;
  529. // font-weight: 700;
  530. }
  531. /deep/ .ant-table-tbody {
  532. text-align: center;
  533. }
  534. // /deep/ th.replacecolor {
  535. // background-color: #ccc;
  536. // }
  537. // 抽屉里的card样式
  538. /deep/ .ant-drawer-content {
  539. background-color: #f0f2f5;
  540. }
  541. /deep/ .ant-drawer-body {
  542. padding: 10px;
  543. }
  544. // 子表下拉显示
  545. /deep/ .ant-card-body {
  546. margin-bottom: 50px;
  547. }
  548. </style>