salesReturnGrabEdit.vue 9.6 KB

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