salesReturnCheck.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <div>
  3. <a-affix :target="() => this.$refs.container">
  4. <a-page-header
  5. :ghost="false"
  6. @back="handleBack"
  7. :backIcon="false"
  8. >
  9. <template slot="subTitle">
  10. <a id="back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  11. <span style="margin: 0 15px;color: #666;">客户名称:{{ ordeDetail&&ordeDetail.buyerName }}</span>
  12. </template>
  13. </a-page-header>
  14. </a-affix>
  15. <a-card size="small" :bordered="false" class="pages-wrap">
  16. <div>
  17. <a-button type="primary" :loading="loading" class="button-error" @click="backStock">批量返库</a-button>
  18. </div>
  19. <!-- 已选配件列表 -->
  20. <s-table
  21. class="sTable"
  22. ref="table"
  23. size="default"
  24. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onChange, onSelect: onSelectChange, onSelectAll: onSelectAllChange }"
  25. :rowKey="(record) => record.id"
  26. :columns="columns"
  27. :data="loadData"
  28. :scroll="{ x: 1500, y: 300 }"
  29. bordered>
  30. <!-- 返库数量 -->
  31. <template slot="backStockQty" slot-scope="text, record">
  32. <editable-cell
  33. size="small"
  34. :text="record.backStockQty"
  35. :max="record.qty"
  36. :min="0"
  37. :precision="0"
  38. @change="onCellChange(record.id, 'backStockQty', $event)" />
  39. </template>
  40. </s-table>
  41. </a-card>
  42. <a-affix :offset-bottom="0">
  43. <div
  44. style="text-align: center;width: 100%;background-color: #fff;padding: 12px 0;box-shadow: 0 0 20px #dcdee2;">
  45. <a-button
  46. size="large"
  47. style="width: 150px;"
  48. type="primary"
  49. class="button-primary"
  50. @click="handleSubmit()"
  51. id="salesReturn-handleSubmit">提交</a-button>
  52. </div>
  53. </a-affix>
  54. </div>
  55. </template>
  56. <script>
  57. import { STable, VSelect } from '@/components'
  58. import queryPart from './queryPart.vue'
  59. import EditableCell from '@/views/common/editInput.js'
  60. import { salesReturnDetail, salesReturnCheck } from '@/api/salesReturn'
  61. import {
  62. salesReturnDetailList,
  63. updateBackStockQty
  64. } from '@/api/salesReturnDetail'
  65. export default {
  66. name: 'SalesReturnEdit',
  67. components: {
  68. STable,
  69. VSelect,
  70. queryPart,
  71. EditableCell
  72. },
  73. data () {
  74. return {
  75. orderId: null,
  76. orderSn: null,
  77. buyerSn: null,
  78. disabled: false,
  79. isInster: false, // 是否正在添加产品
  80. ordeDetail: { discountAmount: 0 },
  81. loading: false,
  82. selectedRowKeys: [], // Check here to configure the default column
  83. selectedRows: [],
  84. // 已选产品
  85. dataSource: [],
  86. productForm: {
  87. salesReturnBillSn: ''
  88. },
  89. // 表头
  90. columns: [
  91. {
  92. title: '序号',
  93. dataIndex: 'no',
  94. align: 'center',
  95. width: 100
  96. },
  97. {
  98. title: '产品编码',
  99. dataIndex: 'productEntity.code',
  100. align: 'center',
  101. width: 160
  102. },
  103. {
  104. title: '产品名称',
  105. dataIndex: 'productEntity.name',
  106. align: 'center',
  107. width: 200
  108. },
  109. {
  110. title: '退货数量',
  111. dataIndex: 'qty',
  112. align: 'center',
  113. width: 150
  114. },
  115. {
  116. title: '坏件数量',
  117. dataIndex: 'badQty',
  118. align: 'center',
  119. width: 150
  120. },
  121. {
  122. title: '返库数量',
  123. dataIndex: 'backStockQty',
  124. align: 'center',
  125. width: 150,
  126. scopedSlots: { customRender: 'backStockQty' }
  127. },
  128. {
  129. title: '单位',
  130. dataIndex: 'productEntity.unit',
  131. align: 'center',
  132. customRender: function (text) { return text || '--' },
  133. width: 100
  134. },
  135. {
  136. title: '售价',
  137. dataIndex: 'price',
  138. customRender: function (text) { return '¥' + (text || 0) },
  139. align: 'center',
  140. width: 150
  141. }
  142. ],
  143. chooseLoadData: [],
  144. // 加载数据方法 必须为 Promise 对象
  145. loadData: parameter => {
  146. this.disabled = true
  147. // 查询总计
  148. this.productForm.salesReturnBillSn = this.$route.params.sn
  149. return salesReturnDetailList(Object.assign(parameter, this.productForm)).then(res => {
  150. const data = res.data
  151. const no = (data.pageNo - 1) * data.pageSize
  152. for (var i = 0; i < data.list.length; i++) {
  153. data.list[i].no = no + i + 1
  154. }
  155. this.disabled = false
  156. this.chooseLoadData = data.list
  157. return data
  158. })
  159. }
  160. }
  161. },
  162. methods: {
  163. onChange (selectedRowKeys, selectedRows) {
  164. this.selectedRowKeys = selectedRowKeys
  165. },
  166. onSelectChange (record, selected, selectedRows, nativeEvent) {
  167. const _this = this
  168. if (selected) { // 选择
  169. this.selectedRows.push(record)
  170. } else { // 取消
  171. this.selectedRows.map((item, index) => {
  172. if (item.id == record.id) {
  173. _this.selectedRows.splice(index, 1)
  174. }
  175. })
  176. }
  177. },
  178. // 本页全选/取消全选
  179. onSelectAllChange (selected, selectedRows, changeRows) {
  180. const _this = this
  181. if (selected) { // 选择
  182. this.selectedRows = [...this.selectedRows, ...changeRows]
  183. } else { // 取消
  184. this.selectedRows.map((item, index) => {
  185. this.selectedRows.map((subItem, ind) => {
  186. if (item.id == subItem.id) {
  187. _this.selectedRows.splice(index, 1)
  188. }
  189. })
  190. })
  191. }
  192. },
  193. // 返回
  194. handleBack () {
  195. this.$router.push({ name: 'salesReturnList' })
  196. },
  197. // 批量返库
  198. backStock () {
  199. const _this = this
  200. if (_this.selectedRowKeys.length < 1) {
  201. _this.$message.warning('请在选择产品!')
  202. return
  203. }
  204. this.$confirm({
  205. title: '提示',
  206. content: '确认要批量返库吗?',
  207. centered: true,
  208. onOk () {
  209. const obj = []
  210. _this.selectedRows.map(item => {
  211. obj.push({
  212. salesReturnDetailSn: item.salesReturnDetailSn,
  213. backStockQty: item.qty
  214. })
  215. })
  216. _this.submitCheck(obj)
  217. }
  218. })
  219. },
  220. // 修改返库数量
  221. onCellChange (id, key, value) {
  222. const chooseLoadData = [...this.chooseLoadData]
  223. const row = chooseLoadData.find(item => item.id === id)
  224. if (row) {
  225. row[key] = Number(value)
  226. this.submitCheck([{
  227. salesReturnDetailSn: row.salesReturnDetailSn,
  228. backStockQty: row.backStockQty
  229. }])
  230. }
  231. },
  232. // 品检
  233. submitCheck (data) {
  234. this.loading = true
  235. updateBackStockQty(data).then(res => {
  236. if (res.status == 200) {
  237. this.resetSearchForm(true)
  238. this.$message.success(res.message)
  239. }
  240. this.loading = false
  241. })
  242. },
  243. // 重置列表
  244. resetForm () {
  245. this.$refs.table.refresh(true)
  246. },
  247. // 获取单据详细
  248. getOrderDetail () {
  249. salesReturnDetail({ sn: this.orderSn }).then(res => {
  250. this.ordeDetail = res.data || null
  251. })
  252. },
  253. // 重置
  254. resetSearchForm (flag) {
  255. this.$refs.table.refresh(!!flag)
  256. this.getOrderDetail()
  257. },
  258. // 提交销售单
  259. handleSubmit () {
  260. salesReturnCheck({ salesReturnBillSn: this.orderSn }).then(res => {
  261. if (res.status == 200) {
  262. this.handleBack()
  263. this.$message.success(res.message)
  264. }
  265. })
  266. }
  267. },
  268. mounted () {
  269. this.orderSn = this.$route.params.sn
  270. this.buyerSn = this.$route.params.buyerSn
  271. this.getOrderDetail()
  272. },
  273. beforeRouteEnter (to, from, next) {
  274. next(vm => {
  275. console.log('beforeRouteEnter')
  276. })
  277. }
  278. }
  279. </script>
  280. <style lang="less">
  281. .pages-wrap{
  282. margin-top: 15px;
  283. .sTable{
  284. margin-top: 15px;
  285. }
  286. .total-bar{
  287. display: flex;
  288. align-items: center;
  289. justify-content: space-between;
  290. > div{
  291. &:last-child{
  292. display: flex;
  293. align-items: center;
  294. justify-content: space-between;
  295. > div{
  296. padding: 0 10px;
  297. }
  298. }
  299. }
  300. }
  301. }
  302. </style>