detail.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <div class="salesDetail-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="salesDetail-cont" style="padding:16px 24px;">
  5. <template slot="subTitle">
  6. <a href="javascript:;" @click="handleBack"><a-icon type="left"></a-icon> 返回列表</a>
  7. </template>
  8. <template slot="extra">
  9. <a-button
  10. key="3"
  11. type="primary"
  12. class="button-info"
  13. v-if="$hasPermissions('B_salesOrderWarehouseExport')"
  14. @click="handlePrint">导出Excel</a-button>
  15. </template>
  16. </a-page-header>
  17. <!-- 基础信息 -->
  18. <a-card size="small" :bordered="false" class="salesDetail-cont">
  19. <a-collapse :activeKey="['1']">
  20. <a-collapse-panel key="1" header="基础信息" v-if="detailData">
  21. <a-descriptions size="small" :column="3">
  22. <a-descriptions-item label="销售单号">{{ detailData.salesBillNo || '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="创建时间">{{ detailData.createDate || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="客户名称">{{ detailData.buyerName || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="收货地址" :span="2" v-if="detailData&&detailData.salesBillExtEntity">
  26. {{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.shippingAddrProvinceName || '' }}
  27. {{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.shippingAddrCityName || '' }}
  28. {{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.shippingAddrCountyName || '' }}
  29. {{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.shippingAddr || '' }}
  30. </a-descriptions-item>
  31. <a-descriptions-item label="收货人" v-if="detailData.salesBillExtEntity">{{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.consigneeName || '--' }}</a-descriptions-item>
  32. <a-descriptions-item label="收货电话" v-if="detailData.salesBillExtEntity">{{ detailData.salesBillExtEntity&&detailData.salesBillExtEntity.consigneeTel || '--' }}</a-descriptions-item>
  33. <a-descriptions-item label="业务状态">{{ detailData.billStatusDictValue || '--' }}</a-descriptions-item>
  34. </a-descriptions>
  35. </a-collapse-panel>
  36. </a-collapse>
  37. </a-card>
  38. <a-card size="small" :bordered="false" class="pages-wrap">
  39. <!-- alert -->
  40. <a-alert type="info" style="margin-bottom: 10px;" v-if="countData">
  41. <div slot="message">
  42. <span>
  43. 总款数:<strong>{{ countData.totalCategory || countData.totalCategory==0? countData.totalCategory : '--' }}</strong>;
  44. </span>
  45. 总数量:<strong>{{ countData.totalQty || countData.totalQty==0? countData.totalQty : '--' }}</strong>;
  46. </div>
  47. </a-alert>
  48. <!-- 列表 -->
  49. <s-table
  50. class="sTable"
  51. ref="table"
  52. size="small"
  53. :rowKey="(record) => record.id"
  54. :columns="columns"
  55. :data="loadData"
  56. :scroll="{ y: 500 }"
  57. :defaultLoadData="false"
  58. bordered>
  59. <!-- 产品编码 -->
  60. <template slot="productCode" slot-scope="text, record">
  61. <a-badge count="促" v-if="record.promotionFlag == 1">
  62. <div style="padding-right: 15px;">{{ text }}</div>
  63. </a-badge>
  64. <span v-else>{{ text }}</span>
  65. </template>
  66. </s-table>
  67. </a-card>
  68. </a-spin>
  69. <!-- 导出excel -->
  70. <print-modal :openModal="openModal" :itemData="detailData" @ok="handleOk" @close="closePrint" />
  71. </div>
  72. </template>
  73. <script>
  74. import { commonMixin } from '@/utils/mixin'
  75. import { STable, VSelect } from '@/components'
  76. import moment from 'moment'
  77. import { exportExcel } from '@/libs/JGPrint.js'
  78. import { queryPageForWarehouseDetail, queryCountForWarehouseDetail, salesDetailBySn, salesDetailExcel } from '@/api/sales'
  79. import printModal from './printModal.vue'
  80. export default {
  81. name: 'SalesOrderWarehouseDetail',
  82. mixins: [commonMixin],
  83. components: { STable, VSelect ,printModal},
  84. data () {
  85. return {
  86. disabled: false,
  87. spinning: false,
  88. // 加载数据方法 必须为 Promise 对象
  89. loadData: parameter => {
  90. this.disabled = true
  91. return queryPageForWarehouseDetail(Object.assign(parameter, { salesBillSn: this.$route.params.sn, warehouseSn: this.$route.params.wsn })).then(res => {
  92. let data
  93. if (res.status == 200) {
  94. data = res.data
  95. const no = (data.pageNo - 1) * data.pageSize
  96. for (var i = 0; i < data.list.length; i++) {
  97. data.list[i].no = no + i + 1
  98. }
  99. this.disabled = false
  100. }
  101. return data
  102. })
  103. },
  104. detailData: null, // 详情数据
  105. countData: null, // 数量数据
  106. fromRouter: null,
  107. openModal:false,
  108. }
  109. },
  110. computed: {
  111. columns () {
  112. const arr = [
  113. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  114. { title: '产品编码', dataIndex: 'productCode', width: '25%', scopedSlots: { customRender: 'productCode' }, align: 'center' },
  115. { title: '产品名称', dataIndex: 'productEntity.name', width: '33%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  116. { title: '原厂编码', dataIndex: 'productEntity.origCode', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  117. { title: '单位', dataIndex: 'productEntity.unit', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  118. { title: '销售数量', dataIndex: 'qty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
  119. ]
  120. if (this.$hasPermissions('B_dispatchDetail_salesPrice')) { // 售价权限
  121. arr.splice(4, 0, { title: '出库仓库', dataIndex: 'warehouseName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } })
  122. }
  123. return arr
  124. }
  125. },
  126. methods: {
  127. handlePrint(){
  128. this.openModal = true
  129. },
  130. // 确定打印或预览,导出
  131. handleOk (objs) {
  132. const _this = this
  133. const params = JSON.parse(JSON.stringify(objs))
  134. console.log(params)
  135. delete params.type
  136. _this.spinning = true
  137. exportExcel(salesDetailExcel, params, '销售清单' + moment().format('YYYYMMDDHHmmss'), () => {
  138. _this.spinning = false
  139. })
  140. },
  141. closePrint () {
  142. this.openModal = false
  143. },
  144. // 返回
  145. handleBack () {
  146. this.$router.push({ name: 'salesOrderWarehouseList' })
  147. },
  148. // 详情
  149. getDetail () {
  150. salesDetailBySn({ salesBillSn: this.$route.params.sn }).then(res => {
  151. if (res.status == 200) {
  152. this.$refs.table.refresh(true)
  153. this.detailData = res.data || null
  154. } else {
  155. this.detailData = null
  156. }
  157. })
  158. },
  159. // 数量
  160. getCount () {
  161. queryCountForWarehouseDetail({ salesBillSn: this.$route.params.sn, warehouseSn: this.$route.params.wsn }).then(res => {
  162. if (res.status == 200) {
  163. this.countData = res.data
  164. } else {
  165. this.countData = null
  166. }
  167. })
  168. }
  169. },
  170. mounted () {
  171. if (!this.$store.state.app.isNewTab || this.outBizSubSn || this.bizSn) { // 页签刷新 或 为弹框时调用
  172. this.getDetail()
  173. this.getCount()
  174. }
  175. },
  176. activated () {
  177. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  178. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  179. this.getDetail()
  180. this.getCount()
  181. }
  182. },
  183. beforeRouteEnter (to, from, next) {
  184. next(vm => {
  185. vm.fromRouter = from
  186. })
  187. }
  188. }
  189. </script>
  190. <style lang="less" scoped>
  191. .salesDetail-wrap{
  192. .salesDetail-cont{
  193. margin-bottom: 10px;
  194. }
  195. .footer-cont{
  196. margin-top: 5px;
  197. text-align: center;
  198. }
  199. }
  200. </style>