detail.vue 9.1 KB

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