detailModal.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <a-modal
  3. centered
  4. class="replenishmentManagement-confirm-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="800">
  11. <div v-if="nowData">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <!-- 基础信息 -->
  14. <div v-if="detailData">
  15. <a-descriptions size="small" :column="3">
  16. <a-descriptions-item label="补货单号">{{ detailData && detailData.replenishBillNo || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="创建时间">{{ detailData && detailData.createDate || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="状态">{{ detailData&&detailData.billStateDictValue || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="出库时间">{{ detailData&&detailData.outStockTime || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="签收时间">{{ detailData&&detailData.putStockTime || '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="出库备注">
  22. <div style="word-break: break-all;">
  23. {{ detailData&&detailData.remarks || '--' }}
  24. </div>
  25. </a-descriptions-item>
  26. <a-descriptions-item label="关联销售单" :span="3" v-if="detailData.billState=='WAIT_CHECK' || detailData.billState=='WAIT_OUT_STOCK' || detailData.billState=='FINISH'">
  27. <a v-if="totalNums" style="margin-right:10px;color:#00aaff;" v-for="item in salesOrderList" :key="item.id" @click="viewSales(item)">{{ item.salesBillNo }};</a>
  28. <a-button v-if="totalNums" type="primary" class="button-info" @click="showPlModal=true">生成销售单</a-button>
  29. <span v-else>--</span>
  30. </a-descriptions-item>
  31. </a-descriptions>
  32. </div>
  33. <div class="pages-wrap" style="margin-top:10px;">
  34. <!-- 列表 -->
  35. <s-table
  36. class="sTable"
  37. ref="table"
  38. size="small"
  39. :rowKey="(record) => record.id"
  40. :columns="columns"
  41. :data="loadData"
  42. :scroll="{ y: 400 }"
  43. :showPagination="false"
  44. bordered>
  45. </s-table>
  46. </div>
  47. </a-spin>
  48. </div>
  49. <div class="btn-cont">
  50. <a-button @click="isShow = false">关闭</a-button>
  51. </div>
  52. <!-- 生成销售单 -->
  53. <commonModal modalTit="" :openModal="showPlModal" @close="showPlModal=false" @ok="createSales">
  54. <div style="display: flex;justify-content: center;margin-bottom: 15px;">
  55. <div style="padding:5px 20px;">产品款数:<span style="color:red;">{{ listData&&listData.length }}</span></div>
  56. <div style="padding:5px 20px;">产品总件数:<span style="color:red;">{{ totalNums }}</span></div>
  57. </div>
  58. <div style="text-align: center;" v-if="salesOrderList.length">
  59. <div style="margin-bottom: 5px;font-size: 14px;">此补货单已经存在对应的销售单</div>
  60. <div style="margin-bottom: 15px;font-size: 14px;"><strong>确认再次生成销售单吗?</strong></div>
  61. <div style="line-height: 24px;">
  62. <div
  63. style="padding:5px;border-bottom: 1px solid #eee;color:#00aaff;cursor: pointer;display: flex;justify-content: space-between;align-items: center;"
  64. v-for="item in salesOrderList"
  65. :key="item.id"
  66. @click="viewSales(item)"
  67. >
  68. <div class="flex-grow:1;padding:0 5px;">{{ item.salesBillNo }};</div>
  69. <div class="padding:0 5px;"><a-icon type="right" style="color:#00aaff;" /></div>
  70. </div>
  71. </div>
  72. </div>
  73. <div style="text-align: center;" v-else>
  74. <div style="margin-bottom: 15px;font-size: 14px;"><strong>确认生成销售单吗?</strong></div>
  75. </div>
  76. </commonModal>
  77. <!-- 销售单详情 -->
  78. <a-modal
  79. centered
  80. class="outboundOrderDetail-modal"
  81. :footer="null"
  82. :maskClosable="false"
  83. :bodyStyle="{padding:'12px'}"
  84. :zIndex="1001"
  85. title="销售单详情"
  86. v-model="openDetailModal"
  87. @cancel="openDetailModal=false"
  88. width="80%">
  89. <div style="max-height: 700px;overflow-y: auto;">
  90. <salesDetailModal v-if="openDetailModal" :outBizSn="orderSn" />
  91. </div>
  92. </a-modal>
  93. </a-modal>
  94. </template>
  95. <script>
  96. import { commonMixin } from '@/utils/mixin'
  97. import { STable, VSelect } from '@/components'
  98. import commonModal from '@/views/common/commonModal.vue'
  99. import salesDetailModal from '@/views/salesManagement/salesQuery/detail.vue'
  100. import { salesDetailBySn } from '@/api/sales'
  101. import { shelfReplenishDetailList, shelfReplenishDetail, queryRelationSalesBill, createSalesBill } from '@/api/shelfReplenish'
  102. export default {
  103. name: 'DetailModal',
  104. components: { STable, VSelect, commonModal, salesDetailModal },
  105. mixins: [commonMixin],
  106. props: {
  107. openModal: { // 弹框显示状态
  108. type: Boolean,
  109. default: false
  110. },
  111. nowData: {
  112. type: Object,
  113. default: () => {
  114. return {}
  115. }
  116. }
  117. },
  118. data () {
  119. return {
  120. isShow: this.openModal, // 是否打开弹框
  121. spinning: false,
  122. disabled: false,
  123. showPlModal: false,
  124. openDetailModal: false,
  125. orderSn: null,
  126. listData: [],
  127. // 表头
  128. columns: [
  129. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  130. { title: '产品编码', dataIndex: 'product.code', width: '22%', align: 'center', customRender: function (text) { return text || '--' } },
  131. { title: '产品名称', dataIndex: 'product.name', width: '28%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  132. { title: '补货数量', dataIndex: 'qty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  133. { title: '签收数量', dataIndex: 'putQty', width: '12%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  134. { title: '单位', dataIndex: 'product.unit', width: '8%', align: 'center', customRender: function (text) { return text || '--' } }
  135. ],
  136. // 加载数据方法 必须为 Promise 对象
  137. loadData: parameter => {
  138. this.disabled = true
  139. this.spinning = true
  140. return shelfReplenishDetailList({ replenishBillSn: this.nowData.replenishBillSn }).then(res => {
  141. let data
  142. if (res.status == 200) {
  143. data = res.data
  144. for (var i = 0; i < data.length; i++) {
  145. data[i].no = i + 1
  146. }
  147. this.disabled = false
  148. this.listData = data || []
  149. }
  150. this.spinning = false
  151. return data
  152. })
  153. },
  154. localDataSource: [],
  155. detailData: null, // 详情数据
  156. salesOrderList: []
  157. }
  158. },
  159. computed: {
  160. modalTit () {
  161. const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
  162. return '补货单详情 —— ' + hjName
  163. },
  164. totalNums () {
  165. let ret = 0
  166. this.listData.map(item => {
  167. ret = ret + this.detailData.billState == 'FINISH' ? item.putQty : item.qty
  168. })
  169. return ret
  170. }
  171. },
  172. methods: {
  173. // 基本信息
  174. getDetail () {
  175. shelfReplenishDetail({ sn: this.nowData.replenishBillSn }).then(res => {
  176. if (res.status == 200) {
  177. this.detailData = res.data
  178. } else {
  179. this.detailData = null
  180. }
  181. })
  182. },
  183. // 查询关联销售单
  184. getSalesOrder () {
  185. queryRelationSalesBill({ replenishBillSn: this.nowData.replenishBillSn }).then(res => {
  186. if (res.status == 200) {
  187. this.salesOrderList = res.data
  188. } else {
  189. this.salesOrderList = []
  190. }
  191. })
  192. },
  193. // 生成销售单
  194. createSales () {
  195. this.spinning = true
  196. this.showPlModal = false
  197. createSalesBill({ replenishBillSn: this.nowData.replenishBillSn }).then(res => {
  198. if (res.status == 200) {
  199. this.$message.info(res.message)
  200. this.getSalesOrder()
  201. }
  202. this.spinning = false
  203. })
  204. },
  205. // 查看销售单详情
  206. viewSales (item) {
  207. salesDetailBySn({ salesBillSn: item.salesBillSn }).then(res => {
  208. if (res.data) {
  209. this.orderSn = item.salesBillSn
  210. this.openDetailModal = true
  211. } else {
  212. this.$message.info('此销售单已被删除!')
  213. }
  214. })
  215. },
  216. pageInit () {
  217. const vm = this
  218. vm.$nextTick(() => {
  219. vm.spinning = false
  220. vm.disabled = false
  221. vm.getSalesOrder()
  222. vm.getDetail()
  223. })
  224. }
  225. },
  226. watch: {
  227. // 父页面传过来的弹框状态
  228. openModal (newValue, oldValue) {
  229. this.isShow = newValue
  230. },
  231. // 重定义的弹框状态
  232. isShow (newValue, oldValue) {
  233. if (!newValue) {
  234. this.$emit('close')
  235. } else {
  236. this.pageInit()
  237. }
  238. }
  239. }
  240. }
  241. </script>
  242. <style lang="less">
  243. .replenishmentManagement-confirm-modal {
  244. .btn-cont {
  245. text-align: center;
  246. margin: 35px 0 10px;
  247. }
  248. }
  249. </style>