preBookList.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. <template>
  2. <!-- 预托书列表 -->
  3. <div id="preBookList">
  4. <!-- 查询区域 -->
  5. <a-card :bordered="false">
  6. <div class="table-page-search-wrapper">
  7. <a-form layout="inline" @keyup.enter.native="searchQuery">
  8. <a-row :gutter="24">
  9. <a-col :md="6" :sm="8">
  10. <a-form-item label="预托书号">
  11. <a-input placeholder="请输入预托书号" v-model="queryParam.depositaryReceiptNo"></a-input>
  12. </a-form-item>
  13. </a-col>
  14. <a-col :md="6" :sm="8">
  15. <a-form-item label="托书日期" has-feedback>
  16. <a-date-picker style="width: 100%" v-model="queryParam.shippingOrderDate" @change = "changeTime"> </a-date-picker>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :md="6" :sm="8">
  20. <a-form-item label="客户简称">
  21. <j-search-select-tag
  22. placeholder="请选择客户简称"
  23. v-model="queryParam.clientAbbreviation"
  24. dict="view_customer,customername,customername">
  25. </j-search-select-tag>
  26. </a-form-item>
  27. </a-col>
  28. <template v-if="toggleSearchStatus">
  29. <a-col :md="6" :sm="8">
  30. <a-form-item label="账套号">
  31. <j-search-select-tag
  32. placeholder="请选择账套号"
  33. v-model="queryParam.acSetNo"
  34. dict="view_account,account,account">
  35. </j-search-select-tag>
  36. </a-form-item>
  37. </a-col>
  38. <a-col :md="6" :sm="8">
  39. <a-form-item label="制单人">
  40. <!-- <a-input placeholder="请输入制单人" v-model="queryParam.createBy"></a-input> -->
  41. <j-search-select-tag
  42. placeholder="请选择制单人"
  43. v-model="queryParam.createBy"
  44. dict="view_createBy,createby,createby">
  45. </j-search-select-tag>
  46. </a-form-item>
  47. </a-col>
  48. <a-col :md="6" :sm="8">
  49. <a-form-item label="小po号">
  50. <a-input placeholder="请输入小po号" v-model="queryParam.smallPo"></a-input>
  51. </a-form-item>
  52. </a-col>
  53. <!-- <a-col :md="6" :sm="8">
  54. <a-form-item label="预托书号">
  55. <a-input placeholder="请输入预托书号" v-model="queryParam.depositaryReceiptNo"></a-input>
  56. </a-form-item>
  57. </a-col> -->
  58. </template>
  59. <a-col :md="6" :sm="8">
  60. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  61. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  62. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  63. <a @click="handleToggleSearch" style="margin-left: 8px">
  64. {{ toggleSearchStatus ? '收起' : '展开' }}
  65. <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
  66. </a>
  67. </span>
  68. </a-col>
  69. </a-row>
  70. </a-form>
  71. </div>
  72. </a-card>
  73. <!-- 操作按钮区域 新增-->
  74. <a-card :bordered="false" style="marginTop:10px;">
  75. <div class="table-operator">
  76. <a-button type="primary" @click="addPreBook" icon="plus">新增</a-button>
  77. </div>
  78. <!-- 子表 -->
  79. <a-table
  80. bordered
  81. v-if="preBookListData"
  82. :rowKey=" (row, index) => {return index;}"
  83. :columns="preBookListColumns"
  84. :data-source="preBookListData"
  85. :loading="loading"
  86. :pagination="pagination"
  87. @change="handleTableChange"
  88. :scroll="{ x: 1500,y: 600 }"
  89. >
  90. <!-- 单据状态 -->
  91. <span slot="documentStateSlot" slot-scope="text, record">
  92. <a-tag color="orange" v-if="record.theDocumentsState == '0'">仅保存</a-tag>
  93. <a-tag color="green" v-if="record.theDocumentsState == '1'">已提交</a-tag>
  94. </span>
  95. <!-- 操作 -->
  96. <span slot="operationSlot" slot-scope="text, record">
  97. <a @click="print(record)">打印</a>
  98. <a-divider type="vertical" />
  99. <a-dropdown>
  100. <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
  101. <!-- 仅保存 -->
  102. <a-menu slot="overlay" v-if="record.theDocumentsState == '0'">
  103. <a-menu-item><a @click="details(record)">详情</a></a-menu-item>
  104. <a-menu-item><a @click="edit(record)">编辑</a></a-menu-item>
  105. <a-menu-item><a @click="copyForm(record)">复制</a></a-menu-item>
  106. <!-- <a-menu-item>
  107. <a-popconfirm title="确定提交吗?" ok-text="是" cancel-text="否" @confirm="submit(record)">
  108. <a href="javascript:void(0);" style="color:green;">提交</a>
  109. </a-popconfirm>
  110. </a-menu-item> -->
  111. <a-menu-item>
  112. <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record)">
  113. <a href="javascript:void(0);" style="color:red;">删除</a>
  114. </a-popconfirm></a-menu-item>
  115. </a-menu>
  116. <!-- 已提交 -->
  117. <a-menu slot="overlay" v-if="record.theDocumentsState == '1'">
  118. <a-menu-item><a @click="details(record)">详情</a></a-menu-item>
  119. <a-menu-item><a @click="copyForm(record)">复制</a></a-menu-item>
  120. <!-- <a-menu-item>
  121. <a-popconfirm title="确定取消提交吗?" ok-text="是" cancel-text="否" @confirm="cancel(record)">
  122. <a href="javascript:void(0);" style="color:red;">取消提交</a>
  123. </a-popconfirm>
  124. </a-menu-item> -->
  125. </a-menu>
  126. </a-dropdown>
  127. </span>
  128. </a-table>
  129. </a-card>
  130. <!-- 抽屉 -->
  131. <addPreBook-drawer ref="addPreBookDrawer" :fatherList="getPreBookData" @ok="modalFormOk"></addPreBook-drawer>
  132. <detailsPreBook-drawer ref="detailsPreBookDrawer" @ok="modalFormOk"></detailsPreBook-drawer>
  133. </div>
  134. </template>
  135. <script>
  136. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  137. import JEllipsis from '@/components/jeecg/JEllipsis'
  138. import moment from 'moment'
  139. import addPreBookDrawer from '@views/pre-book/addPreBookDrawer.vue'
  140. import detailsPreBookDrawer from '@views/pre-book/detailsPreBookDrawer.vue'
  141. import { downFile } from '@/api/manage'
  142. import editPreBookDrawer from '@views/pre-book/editPreBookDrawer.vue'
  143. import { preBookList, addPreBook, preBookById, editById,deletePreBook,submit,cancelSubmit } from '@api/document/pre-book.js'
  144. export default {
  145. name: 'PreBookList', // 预托书列表
  146. mixins: [JeecgListMixin],
  147. components: { JEllipsis, moment, addPreBookDrawer, detailsPreBookDrawer, editPreBookDrawer },
  148. data() {
  149. let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
  150. return {
  151. // 表头
  152. preBookListColumns: [
  153. {
  154. title: '预托书号',
  155. width: 150,
  156. dataIndex: 'depositaryReceiptNo',
  157. // fixed: 'left',
  158. align: 'left',
  159. className: 'replacecolor',
  160. ellipsis: true,
  161. },
  162. // { title: '订单号', width: 120, dataIndex: 'orderNumber', fixed: 'left', className: 'replacecolor' },
  163. // { title: '外销发票号码', dataIndex: 'exportInvoiceNo', width: 220, align: 'left', className: 'replacecolor' },
  164. { title: '客户简称', dataIndex: 'clientAbbreviation', width: 90, className: 'replacecolor', ellipsis: true, },
  165. {
  166. title: '分销点',
  167. dataIndex: 'distributionPoint',
  168. width: 130,
  169. // customRender: t => ellipsis(t),
  170. className: 'replacecolor',
  171. ellipsis: true,
  172. },
  173. {
  174. title: '经营单位',
  175. dataIndex: 'unitInOperation',
  176. width: 120,
  177. // customRender: t => ellipsis(t),
  178. ellipsis: true,
  179. className: 'replacecolor'
  180. },
  181. { title: '总箱数', dataIndex: 'boxNumber', width: 80, className: 'replacecolor', ellipsis: true, },
  182. { title: '总毛重', dataIndex: 'totalGrossWeight', width: 90, className: 'replacecolor', ellipsis: true, },
  183. { title: '总体积', dataIndex: 'totalVolume', width: 90, className: 'replacecolor', ellipsis: true, },
  184. {
  185. title: '金额',
  186. dataIndex: 'money',
  187. width: 100,
  188. className: 'replacecolor',
  189. ellipsis: true,
  190. },
  191. // {
  192. // title: '创建时间',
  193. // dataIndex: 'createTime',
  194. // align: 'center',
  195. // sorter: true,
  196. // customRender: text => {
  197. // return moment(text).format('YYYY-MM-DD')
  198. // }
  199. // },
  200. // { title: '实际船期', dataIndex: 'theActualShippingDate', width: 120, className: 'replacecolor' },
  201. // { title: '收汇方式', dataIndex: 'exchangeEarningsValue', width: 120, className: 'replacecolor' },
  202. // {
  203. // title: '收货人',
  204. // dataIndex: 'consignee',
  205. // width: 100,
  206. // customRender: t => ellipsis(t),
  207. // className: 'replacecolor'
  208. // },
  209. // {
  210. // title: '提单或承运收据',
  211. // dataIndex: 'billOfLadingOrCarriageReceipt',
  212. // width: 140,
  213. // customRender: t => ellipsis(t),
  214. // className: 'replacecolor'
  215. // },
  216. // {
  217. // title: '抬头人',
  218. // dataIndex: 'addressee',
  219. // width: 120,
  220. // customRender: t => ellipsis(t),
  221. // className: 'replacecolor'
  222. // },
  223. { title: '贸易国别', dataIndex: 'tradeCountry', width: 120, className: 'replacecolor' , ellipsis: true,},
  224. { title: '运抵国别', dataIndex: 'arriveInCountry', width: 120, className: 'replacecolor', ellipsis: true, },
  225. { title: '出口口岸', dataIndex: 'exportPort', width: 120, className: 'replacecolor', ellipsis: true, },
  226. // {
  227. // title: '通知人',
  228. // dataIndex: 'notifier',
  229. // width: 100,
  230. // customRender: t => ellipsis(t),
  231. // className: 'replacecolor'
  232. // },
  233. // { title: 'nottfy', dataIndex: 'nottfy', width: 150, className: 'replacecolor' },
  234. { title: '目的港', dataIndex: 'destinationPort', width: 140, className: 'replacecolor', ellipsis: true, },
  235. // { title: '装运期限', dataIndex: 'latestDateOfShipment', width: 120, className: 'replacecolor' },
  236. {
  237. title: '单据状态',
  238. dataIndex: 'theDocumentsState',
  239. width: 90,
  240. scopedSlots: { customRender: 'documentStateSlot' },
  241. fixed: 'right',
  242. className: 'replacecolor'
  243. },
  244. {
  245. title: '操作',
  246. dataIndex: 'operation',
  247. scopedSlots: { customRender: 'operationSlot' },
  248. width: 160,
  249. fixed: 'right',
  250. className: 'replacecolor'
  251. }
  252. ],
  253. preBookListData: [],
  254. id: '', //
  255. loading: false, // 表格加载
  256. // 查询条件
  257. queryParam: {
  258. depositaryReceiptNo: '',
  259. shippingOrderDate: '',//托书日期
  260. clientAbbreviation: '',
  261. acSetNo: '',
  262. smallPo: '',
  263. pageSize:'50',
  264. pageNo: '' // 点击的页数
  265. },
  266. pagination: {
  267. pageSizeOptions: ["50", "100", "150"],
  268. showSizeChanger: true,
  269. pageSize:'50'
  270. // total: '',
  271. // current: 0,
  272. // pageSize: 0
  273. },
  274. dateFormat: 'YYYY-MM-DD',
  275. }
  276. },
  277. created() {
  278. this.getPreBookData() // 渲染预托书
  279. },
  280. methods: {
  281. // 分页查询 预托书
  282. getPreBookData() {
  283. this.$nextTick(() => {
  284. // this.queryParam.pageSize = 50
  285. preBookList(this.queryParam).then(res => {
  286. if (res.success) {
  287. this.preBookListData = res.result.records;
  288. this.pagination = {
  289. total: res.result.total,
  290. current: res.result.current,
  291. pageSize: res.result.size
  292. }
  293. }else{
  294. this.$message.error(res.message)
  295. }
  296. })
  297. })
  298. },
  299. // 新增
  300. addPreBook() {
  301. this.$refs.addPreBookDrawer.addPreBook = {syLetterDepositItemList:[],syRmbList:[],syUsdList:[]};
  302. this.$refs.addPreBookDrawer.visible = true;
  303. },
  304. // 详情
  305. details(record) {
  306. preBookById({ id: record.id }).then(res => {
  307. if (res.success) {
  308. // 把通过id查询到的对象,赋值给子组件
  309. this.$refs.detailsPreBookDrawer.preBookDetails = res.result; //主表
  310. res.result.money = res.result.money.toFixed(2)
  311. res.result.syLetterDepositItemList.map(item =>{
  312. var str =item.hod
  313. var n=str.split(" ");
  314. item.hod = n[0]
  315. item.preDeliveryDate = item.hod
  316. })
  317. this.$refs.detailsPreBookDrawer.data = res.result.syLetterDepositItemList; //子表
  318. this.$refs.detailsPreBookDrawer.visible = true
  319. }else{
  320. this.$message.error(res.message)
  321. }
  322. })
  323. },
  324. // 编辑
  325. edit(record) {
  326. preBookById({ id: record.id }).then(res => {
  327. if (res.success) {
  328. res.result.consigneeAll = res.result.consignee+"+"+res.result.consigneeAddress+"+"+res.result.notifyParty+"+"+res.result.notifyPartyAddress;
  329. res.result.money = res.result.money.toFixed(2)
  330. this.$refs.addPreBookDrawer.addPreBook = res.result;
  331. this.$refs.addPreBookDrawer.defultMethod = 'edit';
  332. res.result.syLetterDepositItemList.map(item =>{
  333. var str =item.hod
  334. var n=str.split(" ");
  335. item.hod = n[0]
  336. item.preDeliveryDate = item.hod
  337. })
  338. this.$refs.addPreBookDrawer.data = res.result.syLetterDepositItemList;
  339. this.$refs.addPreBookDrawer.visible = true
  340. }else{
  341. this.$message.error(res.message)
  342. }
  343. })
  344. },
  345. //复制
  346. copyForm(record){
  347. preBookById({ id: record.id }).then(res => {
  348. if (res.success) {
  349. res.result.consigneeAll = res.result.consignee+"+"+res.result.consigneeAddress+"+"+res.result.notifyParty+"+"+res.result.notifyPartyAddress;
  350. res.result.money = res.result.money.toFixed(2)
  351. res.result.syLetterDepositItemList = []
  352. this.$refs.addPreBookDrawer.addPreBook = res.result;
  353. this.$refs.addPreBookDrawer.defultMethod = 'edit';
  354. this.$refs.addPreBookDrawer.visible = true
  355. }else{
  356. this.$message.error(res.message)
  357. }
  358. })
  359. },
  360. // 操作 提交
  361. submit(record) {
  362. this.$nextTick(() => {
  363. submit({ id: record.id, type: '1' }).then(res => {
  364. if (res.success) {
  365. this.preBookListData.theDocumentsState == '1'
  366. this.getPreBookData()
  367. this.$message.success('提交成功')
  368. }else{
  369. this.$message.error(res.message)
  370. }
  371. })
  372. })
  373. },
  374. // 取消提交
  375. cancel(record) {
  376. this.$nextTick(() => {
  377. cancelSubmit({ id: record.id, type: '2' }).then(res => {
  378. if (res.success) {
  379. this.preBookListData.theDocumentsState == '0'
  380. this.getPreBookData()
  381. this.$message.success('取消提交成功')
  382. }else{
  383. this.$message.error(res.message)
  384. }
  385. })
  386. })
  387. },
  388. // 删除
  389. handleDelete(record) {
  390. this.$nextTick(() => {
  391. if(this.queryParam.pageNo > 1 && this.preBookListData.length === 1){
  392. this.queryParam.pageNo = this.queryParam.pageNo -1
  393. }
  394. deletePreBook({ id: record.id }).then(res => {
  395. if (res.success) {
  396. this.getPreBookData()
  397. this.$message.success('删除成功')
  398. }else{
  399. this.$message.error(res.message)
  400. }
  401. })
  402. })
  403. },
  404. //托书日期改变触发
  405. changeTime(val){
  406. this.queryParam.shippingOrderDate= val.format('YYYY-MM-DD')
  407. },
  408. // 查询按钮
  409. searchQuery() {
  410. this.toggleSearchStatus = false
  411. this.getPreBookData() /// 渲染渲染预托书
  412. },
  413. // 重置
  414. searchReset() {
  415. var dd =this.queryParam
  416. this.queryParam = {
  417. depositaryReceiptNo: '',
  418. shippingOrderDate: '',//托书日期
  419. clientAbbreviation: '',
  420. acSetNo: '',
  421. smallPo: '',
  422. pageSize:this.queryParam.pageSize,
  423. pageNo: '' // 点击的页数
  424. }
  425. this.getPreBookData()
  426. },
  427. // 操作 打印
  428. print(record) {
  429. downFile('/letterDeposit/syLetterDeposit/printSyletterDeposit',{id:record.id}).then(data => {
  430. if (!data) {
  431. this.$message.warning('文件下载失败')
  432. return
  433. }
  434. if (typeof window.navigator.msSaveBlob !== 'undefined') {
  435. window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), record.depositaryReceiptN + '.xlsx')
  436. } else {
  437. let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
  438. let link = document.createElement('a')
  439. link.style.display = 'none'
  440. link.href = url
  441. link.setAttribute('download', record.depositaryReceiptNo+'.xlsx')
  442. document.body.appendChild(link)
  443. link.click()
  444. document.body.removeChild(link) // 下载完成移除元素
  445. window.URL.revokeObjectURL(url) // 释放掉blob对象
  446. }
  447. })
  448. },
  449. handleTableChange(pagination, filters, sorter) {
  450. this.queryParam.pageNo = pagination.current
  451. this.queryParam.pageSize = pagination.pageSize
  452. this.getPreBookData()
  453. },
  454. aa() {},
  455. bb() {},
  456. cc() {}
  457. },
  458. computed: {},
  459. mounted() {}
  460. }
  461. </script>
  462. <style lang="less" scoped>
  463. @import '~@assets/less/common.less';
  464. @import '~@assets/less/overwriter.less';
  465. /deep/ .ant-table-thead > tr > th {
  466. text-align: center;
  467. // font-weight: 700;
  468. }
  469. /deep/ .ant-table-tbody {
  470. text-align: center;
  471. }
  472. // /deep/ th.replacecolor {
  473. // background-color: #ccc;
  474. // }
  475. /deep/ .ant-table-tbody .ant-table-row td{
  476. padding-top: 8px;
  477. padding-bottom: 8px;
  478. }
  479. /deep/.ant-card-body{
  480. padding-top: 10px !important;
  481. padding-bottom: 0px !important;
  482. }
  483. /deep/.table-operator .ant-btn{
  484. margin: 0 8px 3px 0;
  485. }
  486. /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
  487. margin-bottom: 10px;
  488. }
  489. /deep/.table-page-search-wrapper .table-page-search-submitButtons{
  490. margin-bottom: 10px;
  491. }
  492. /deep/ thead.ant-table-thead>tr{
  493. height: 0 !important;
  494. }
  495. /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  496. padding: 9px 16px
  497. }
  498. </style>