detailModal.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <a-modal
  3. centered
  4. class="backorderDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="80%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div style="padding: 0 12px;text-align: right;" v-if="$hasPermissions('B_oosPrint')">
  13. <a-button id="backorderDetail-preview-btn" :disabled="localDataSource.length==0" @click="handlePrint('preview')" style="margin-right: 15px;">打印预览</a-button>
  14. <a-button type="primary" id="backorderDetail-print-btn" :disabled="localDataSource.length==0" @click="handlePrint('print')">快捷打印</a-button>
  15. </div>
  16. <!-- 基础信息 -->
  17. <a-card size="small" :bordered="false" class="backorderDetail-cont">
  18. <a-collapse :activeKey="['1']">
  19. <a-collapse-panel key="1" header="基础信息">
  20. <a-descriptions size="small" :column="2">
  21. <a-descriptions-item label="销售单号">
  22. {{ detailData&&detailData.salesBillNo || '--' }}
  23. <a-badge count="促" v-if="detailData&&detailData.promoFlag==1" :number-style="{ backgroundColor: '#52c41a', zoom:'80%' }"></a-badge>
  24. </a-descriptions-item>
  25. </a-descriptions>
  26. </a-collapse-panel>
  27. </a-collapse>
  28. </a-card>
  29. <a-card size="small" :bordered="false" class="backorderDetail-cont">
  30. <!-- alert -->
  31. <a-alert type="info" style="margin-bottom:10px">
  32. <div slot="message">
  33. 缺货总款数:<strong>{{ detailData && (detailData.totalCategory || detailData.totalCategory==0) ? detailData.totalCategory : '--' }}</strong>,
  34. 缺货总数量:<strong>{{ detailData && (detailData.totalQty || detailData.totalQty==0) ? detailData.totalQty : '--' }}</strong>,
  35. <span v-if="$hasPermissions('B_oosDetail_salesPrice')">缺货总售价:<strong>{{ detailData && (detailData.totalAmount || detailData.totalAmount==0) ? toThousands(detailData.totalAmount) : '--' }}</strong></span>
  36. </div></a-alert>
  37. <!-- 列表 -->
  38. <s-table
  39. class="sTable"
  40. ref="table"
  41. size="small"
  42. :rowKey="(record) => record.id"
  43. :columns="columns"
  44. :data="loadData"
  45. :defaultLoadData="false"
  46. :scroll="{ y: 500 }"
  47. bordered>
  48. <template slot="productCode" slot-scope="text, record">
  49. <span style="padding-right: 15px;">{{ text }}</span>
  50. <a-badge count="促" v-if="record.promotionFlag=='GIFT'" :number-style="{ backgroundColor: '#52c41a', zoom:'80%' }"></a-badge>
  51. <!-- <a-badge count="正" v-if="record.promotionFlag=='REGULAR'" :number-style="{ backgroundColor: '#108ee9', zoom:'80%' }"></a-badge> -->
  52. <a-badge count="特" v-if="record.promotionFlag=='DISCOUNT'" :number-style="{ backgroundColor: '#faad14', zoom:'80%' }"></a-badge>
  53. </template>
  54. <!-- 销售价 -->
  55. <template slot="price" slot-scope="text, record">
  56. {{ toThousands(text) }}
  57. <span v-if="record.promotionFlag=='GIFT'||record.promotionFlag=='DISCOUNT'" title="原价">({{ toThousands(record.origPrice) }})</span>
  58. </template>
  59. </s-table>
  60. </a-card>
  61. </a-spin>
  62. <!-- 打印 -->
  63. <div id="print"></div>
  64. </a-modal>
  65. </template>
  66. <script>
  67. import { commonMixin } from '@/utils/mixin'
  68. import { STable } from '@/components'
  69. import { printFun } from '@/libs/JGPrint.js'
  70. import { oosDetail, oosDetailList, oosDetailPrint } from '@/api/oos'
  71. export default {
  72. name: 'BackorderDetailModal',
  73. mixins: [commonMixin],
  74. components: { STable },
  75. props: {
  76. openModal: { // 弹框显示状态
  77. type: Boolean,
  78. default: false
  79. },
  80. itemSn: {
  81. type: [Number, String],
  82. default: ''
  83. }
  84. },
  85. data () {
  86. return {
  87. isShow: this.openModal, // 是否打开弹框
  88. spinning: false,
  89. detailData: null, // 详情数据
  90. // 加载数据方法 必须为 Promise 对象
  91. loadData: parameter => {
  92. this.disabled = true
  93. return oosDetailList(Object.assign(parameter, this.queryParam, { oosBillSn: this.itemSn })).then(res => {
  94. let data
  95. if (res.status == 200) {
  96. data = res.data
  97. const no = (data.pageNo - 1) * data.pageSize
  98. for (var i = 0; i < data.list.length; i++) {
  99. data.list[i].no = no + i + 1
  100. }
  101. this.localDataSource = data.list
  102. this.disabled = false
  103. }
  104. return data
  105. })
  106. },
  107. localDataSource: []
  108. }
  109. },
  110. computed: {
  111. columns () {
  112. const arr = [
  113. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  114. { title: '产品编码', dataIndex: 'productEntity.code', width: '15%', align: 'center', scopedSlots: { customRender: 'productCode' } },
  115. { title: '产品名称', dataIndex: 'productEntity.name', width: '24%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  116. { title: '仓库', dataIndex: 'warehouseName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  117. { title: '原厂编码', dataIndex: 'productEntity.origCode', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  118. { title: '缺货数量', dataIndex: 'qty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  119. { title: '单位', dataIndex: 'productEntity.unit', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }
  120. ]
  121. if (this.$hasPermissions('B_oosDetail_costPrice')) { // 成本
  122. arr.push({ title: '缺货成本金额', dataIndex: 'totalShowCostAmount', width: '10%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') })
  123. }
  124. if (this.$hasPermissions('B_oosDetail_salesPrice')) { // 售价权限
  125. arr.push({ title: '售价', dataIndex: 'price', width: '15%', align: 'right', scopedSlots: { customRender: 'price' }})
  126. arr.push({ title: '缺货金额', dataIndex: 'totalAmount', width: '10%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') })
  127. }
  128. return arr
  129. }
  130. },
  131. methods: {
  132. // 获取详情
  133. getDetail () {
  134. oosDetail({ sn: this.itemSn }).then(res => {
  135. if (res.status == 200) {
  136. this.detailData = res.data
  137. } else {
  138. this.detailData = null
  139. }
  140. })
  141. },
  142. // 打印预览/快捷打印
  143. handlePrint (type) {
  144. const _this = this
  145. this.$store.state.app.curActionPermission = 'B_oosPrint'
  146. _this.spinning = true
  147. // 打印或预览
  148. printFun(oosDetailPrint, { sn: this.itemSn }, type, '缺货单', () => {
  149. _this.spinning = false
  150. _this.$store.state.app.curActionPermission = 'B_oosDetail'
  151. })
  152. }
  153. },
  154. watch: {
  155. // 父页面传过来的弹框状态
  156. openModal (newValue, oldValue) {
  157. this.isShow = newValue
  158. },
  159. // 重定义的弹框状态
  160. isShow (newValue, oldValue) {
  161. if (!newValue) {
  162. this.$emit('close')
  163. this.detailData = null
  164. this.$refs.table.clearTable()
  165. this.$store.state.app.curActionPermission = ''
  166. } else {
  167. this.$store.state.app.curActionPermission = 'B_oosDetail'
  168. }
  169. },
  170. itemSn (newValue, oldValue) {
  171. if (this.isShow && newValue) {
  172. const _this = this
  173. this.getDetail()
  174. setTimeout(() => {
  175. _this.$refs.table.refresh(true)
  176. }, 200)
  177. }
  178. }
  179. }
  180. }
  181. </script>
  182. <style lang="less">
  183. .backorderDetail-modal{
  184. .ant-modal-body {
  185. padding: 10px 10px 20px;
  186. }
  187. .btn-cont {
  188. text-align: center;
  189. margin: 35px 0 10px;
  190. }
  191. }
  192. </style>