detailsAdpackingDrawer.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. <template>
  2. <!-- 新增 预装箱单-成衣-->
  3. <div id="addAdvancePacking">
  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="false">
  14. <div class="table-page-search-wrapper">
  15. <!-- :rules="validatorRules" -->
  16. <a-form-model layout="inline" ref="form" :model="addAdpacking">
  17. <a-row :gutter="24">
  18. <a-col :md="6" :sm="8">
  19. <a-form-model-item label="单据号" prop="orderNumber">
  20. {{addAdpacking.orderNumber}}
  21. </a-form-model-item>
  22. </a-col>
  23. <a-col :md="6" :sm="8">
  24. <a-form-model-item label="集装箱代号" prop="containerCode">
  25. {{addAdpacking.containerCode}}
  26. </a-form-model-item>
  27. </a-col>
  28. <a-col :md="6" :sm="8">
  29. <a-form-model-item label="集装箱号" prop="containerNumber">
  30. {{addAdpacking.containerNumber}}
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :md="6" :sm="8">
  34. <a-form-model-item label="预发货日期" prop="u8Remarks">
  35. {{addAdpacking.preDeliveryDate}}
  36. </a-form-model-item>
  37. </a-col>
  38. <a-col :md="6" :sm="8">
  39. <a-form-model-item label="u8备注" prop="u8Remarks">
  40. {{addAdpacking.u8Remarks}}
  41. </a-form-model-item>
  42. </a-col>
  43. <a-col :md="6" :sm="8">
  44. <a-form-model-item label="款号" prop="itemNumber">
  45. {{addAdpacking.itemNumber}}
  46. </a-form-model-item>
  47. </a-col>
  48. <a-col :md="6" :sm="8">
  49. <a-form-model-item label="品名" prop="productName">
  50. {{addAdpacking.productName}}
  51. </a-form-model-item>
  52. </a-col>
  53. <a-col :md="6" :sm="8">
  54. <a-form-model-item label="尺码范围" prop="sizeRange">
  55. {{addAdpacking.sizeRange}}
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :md="6" :sm="8">
  59. <a-form-model-item label="客户" prop="customer">
  60. {{addAdpacking.customer}}
  61. </a-form-model-item>
  62. </a-col>
  63. <a-col :md="6" :sm="8">
  64. <a-form-model-item label="成衣工厂" prop="garmentFactory">
  65. {{addAdpacking.garmentFactory}}
  66. </a-form-model-item>
  67. </a-col>
  68. <a-col :md="6" :sm="8">
  69. <a-form-model-item label="总箱数" prop="totalBoxes">
  70. {{addAdpacking.totalBoxes}}
  71. </a-form-model-item>
  72. </a-col>
  73. <a-col :md="6" :sm="8">
  74. <a-form-model-item label="总净重" prop="totalNetWeight">
  75. {{addAdpacking.totalNetWeight}}
  76. </a-form-model-item>
  77. </a-col>
  78. <a-col :md="6" :sm="8">
  79. <a-form-model-item label="总毛重" prop="totalGrossWeight">
  80. {{addAdpacking.totalGrossWeight}}
  81. </a-form-model-item>
  82. </a-col>
  83. <a-col :md="6" :sm="8">
  84. <a-form-model-item label="总体积" prop="totalVolume">
  85. {{addAdpacking.totalVolume}}
  86. </a-form-model-item>
  87. </a-col>
  88. <a-col :md="6" :sm="8">
  89. <a-form-model-item label="总价" prop="totalPrice">
  90. {{addAdpacking.totalPrice}}
  91. </a-form-model-item>
  92. </a-col>
  93. </a-row>
  94. </a-form-model>
  95. </div>
  96. </a-card>
  97. <!-- 参照发运明细 増行-->
  98. <a-card :bordered="false" style="margin:10px 0 60px 0;">
  99. <!-- 子表 ipagination :rules="validatorRules"-->
  100. <a-spin :spinning="confirmLoading">
  101. <a-form-model ref="formRef">
  102. <j-vxe-table
  103. ref="vTable"
  104. toolbar
  105. row-number
  106. row-selection
  107. drag-sort
  108. keep-source
  109. :height="300"
  110. :loading="loading"
  111. :dataSource="addAdpacking.syPreAssembledPackingListItemList"
  112. :columns="columns"
  113. :alwaysEdit=true
  114. :bordered=true
  115. :scroll="{ x: 1500 }"
  116. style="margin-top: 5px;"
  117. :toolbarConfig="toolbarConfig"
  118. @valueChange="handleValueChange"
  119. >
  120. </j-vxe-table>
  121. </a-form-model>
  122. </a-spin>
  123. </a-card>
  124. <!-- 页面底部提交取消 -->
  125. <div
  126. :style="{
  127. position: 'absolute',
  128. right: 0,
  129. bottom: 0,
  130. width: '100%',
  131. borderTop: '1px solid #e9e9e9',
  132. padding: '10px 16px',
  133. background: '#fff',
  134. textAlign: 'right',
  135. zIndex: 1
  136. }"
  137. >
  138. <a-button type="primary" @click="handleCancel">
  139. 关闭
  140. </a-button>
  141. </div>
  142. </a-drawer>
  143. </div>
  144. </template>
  145. <script>
  146. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  147. import JEllipsis from '@/components/jeecg/JEllipsis'
  148. import moment from 'moment'
  149. import { addAdvPac } from '@api/document/advance-packingList.js'
  150. import { queryShippingDetails } from '@api/document/advance-packingList.js'
  151. import { JVXETypes } from '@/components/jeecg/JVxeTable'
  152. import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
  153. import { getDotConfig, getDotValidExpress } from '@/utils/myutil'
  154. export default {
  155. name: 'AddAdvancePacking', // 新增预装箱单
  156. mixins: [JeecgListMixin],
  157. components: { JEllipsis, moment }, // 参照发运明细弹框
  158. data() {
  159. let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
  160. return {
  161. toolbarConfig: {
  162. // add 新增按钮;remove 删除按钮;clearSelection 清空选择按钮
  163. btn: []
  164. },
  165. // 表头
  166. columns: [
  167. {
  168. title: '账套',
  169. key: 'acSetNo',
  170. width: 120,
  171. fixed: 'left',
  172. type: JVXETypes.normal,
  173. },
  174. {
  175. title: '成衣工厂',
  176. key: 'garmentFactory',
  177. width: 120,
  178. fixed: 'left',
  179. type: JVXETypes.normal,
  180. },
  181. {
  182. title: 'HOD',
  183. key: 'hod',
  184. width: 120,
  185. fixed: 'left',
  186. type: JVXETypes.normal,
  187. },
  188. {
  189. title: 'STYLE NO.',
  190. key: 'styleNo',
  191. width: 120,
  192. type: JVXETypes.normal,
  193. },
  194. {
  195. title: 'PO NO.',
  196. key: 'poNo',
  197. width: 120,
  198. type: JVXETypes.normal,
  199. },
  200. {
  201. title: 'ITEM NO./SKU NO./UPC NO./PACKS CODE',
  202. key: 'itemCode',
  203. width: 340,
  204. type: JVXETypes.normal,
  205. },
  206. {
  207. title: '分销点/DC/LABEL',
  208. key: 'distributionPoint',
  209. width: 180,
  210. type: JVXETypes.normal,
  211. },
  212. {
  213. title: 'PREPACK SKU',
  214. key: 'prepackSku',
  215. width: 140,
  216. type: JVXETypes.normal,
  217. insertAfter:true,
  218. },
  219. {
  220. title: '起始箱号',
  221. key: 'startingBoxNumber',
  222. width: 120,
  223. type: JVXETypes.normal ,
  224. },
  225. {
  226. title: '结束箱号',
  227. key: 'endCaseNumber',
  228. width: 140,
  229. type: JVXETypes.normal ,
  230. },
  231. {
  232. title: '颜色(中英文)',
  233. key: 'colour',
  234. width: 140,
  235. type: JVXETypes.normal ,
  236. },
  237. {
  238. title: '配码--根据U8订单来显示',
  239. key: 'withCode',
  240. width: 240,
  241. type: JVXETypes.normal ,
  242. },
  243. {
  244. title: '件数/箱',
  245. key: 'piecesBox',
  246. width: 90,
  247. type: JVXETypes.normal ,
  248. },
  249. {
  250. title: '箱数',
  251. key: 'boxNumber',
  252. width: 140,
  253. type: JVXETypes.normal ,
  254. },
  255. {
  256. title: '总件数',
  257. key: 'total',
  258. width: 140,
  259. type: JVXETypes.normal,
  260. },
  261. {
  262. title: '净重/箱',
  263. key: 'netWeight',
  264. width: 90,
  265. type: JVXETypes.normal,
  266. },
  267. {
  268. title: '总净重',
  269. key: 'totalNetWeight',
  270. width: 140,
  271. type: JVXETypes.normal,
  272. },
  273. {
  274. title: '毛重/箱',
  275. key: 'grossWeight',
  276. width: 120,
  277. type: JVXETypes.normal,
  278. },
  279. {
  280. title: '总毛重',
  281. key: 'totalGrossWeight',
  282. width: 140,
  283. type: JVXETypes.normal,
  284. },
  285. {
  286. title: '外箱长度',
  287. key: 'outerBoxLength',
  288. width: 120,
  289. type: JVXETypes.normal,
  290. },
  291. {
  292. title: '外箱宽度',
  293. key: 'outerBoxWidth',
  294. width: 140,
  295. type: JVXETypes.normal,
  296. },
  297. {
  298. title: '外箱高度',
  299. key: 'outerBoxHeight',
  300. type: JVXETypes.normal ,
  301. width: 140,
  302. },
  303. {
  304. title: '总体积',
  305. key: 'totalVolume',
  306. type: JVXETypes.normal ,
  307. width: 140,
  308. },
  309. {
  310. title: '净净重',
  311. key: 'netWeightToo',
  312. width: 120,
  313. type: JVXETypes.normal,
  314. },
  315. {
  316. title: '单价',
  317. key: 'unitPrice',
  318. width: 120,
  319. type: JVXETypes.normal,
  320. },
  321. {
  322. title: '总价',
  323. key: 'totalPrice',
  324. width: 120,
  325. type: JVXETypes.normal,
  326. },
  327. ],
  328. loading: false, // 表格加载
  329. visible: false,
  330. dateFormat: 'YYYY-MM-DD',
  331. addAdpacking: {
  332. syPreAssembledPackingListItemList:[]
  333. }, //主表信息
  334. confirmLoading: false,
  335. msgFormSon: 'test', // 子组件传来数据的变量
  336. // state: '0', // 单据状态初始未【仅保存】
  337. // pushState: '0' // 推送状态初始未【仅保存】
  338. // 待确定还有哪些必填信息 ----------------------------
  339. // validatorRules: {
  340. // orderNumber: [{ required: true, message: '订单号不能为空', trigger: 'blur' }],
  341. // styleNum: [{ required: true, message: '款号不能为空', trigger: 'blur' }],
  342. // name: [{ required: true, message: '品名不能为空', trigger: 'blur' }]
  343. // },
  344. sizeFields:[], // 尺码字段
  345. dotConfig:{}, // 小数点配置
  346. }
  347. },
  348. // 接收父组件查询方法
  349. props: {
  350. fatherList: {
  351. type: Function,
  352. default: null
  353. }
  354. },
  355. methods: {
  356. loadSizeTables(sizeTable){
  357. var newColums = this.columns.filter(item=>{
  358. return item.isSize != true;
  359. });
  360. this.sizeFields = [];
  361. if (sizeTable != null){
  362. var i=0;
  363. // 找到插入位置点
  364. for (; i<newColums.length;i++){
  365. if (newColums[i].insertAfter){
  366. break;
  367. }
  368. }
  369. // 插入数据
  370. for (var j=0;j<sizeTable.length;j++){
  371. this.sizeFields.push('size-'+sizeTable[j].size);
  372. var validExpress = getDotValidExpress(this.dotConfig.quantity);
  373. var field = {
  374. title: sizeTable[j].size,
  375. key: 'size-'+sizeTable[j].size,
  376. type: JVXETypes.normal ,
  377. width: 80,
  378. isSize:true,
  379. };
  380. newColums.splice(i+1+j,0,field);
  381. }
  382. }
  383. this.columns = newColums;
  384. },
  385. // 抽屉 取消
  386. handleCancel() {
  387. this.close()
  388. },
  389. close() {
  390. this.$emit('close')
  391. this.visible = false;
  392. this.addAdpacking = {syPreAssembledPackingListItemList:[]};
  393. },
  394. aa() {},
  395. },
  396. computed: {},
  397. mounted() {}
  398. }
  399. </script>
  400. <style lang="less" scoped>
  401. @import '~@assets/less/common.less';
  402. /deep/ .ant-table-thead > tr > th {
  403. text-align: center;
  404. // font-weight: 700;
  405. }
  406. /deep/ .ant-table-tbody {
  407. text-align: center;
  408. }
  409. // /deep/ th.replacecolor {
  410. // background-color: #ccc;
  411. // }
  412. // 抽屉里的card样式
  413. /deep/ .ant-drawer-content {
  414. background-color: #f0f2f5;
  415. }
  416. /deep/ .ant-drawer-body {
  417. padding: 10px;
  418. }
  419. </style>