outStockModal.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <template>
  2. <a-modal
  3. centered
  4. class="outStock-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="采购缺货产品明细"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="900">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="outStock-con">
  13. <div>
  14. <div ref="tableSearch" class="table-page-search-wrapper">
  15. <a-form layout="inline" @keyup.enter.native="searchForm">
  16. <a-row :gutter="15">
  17. <a-col :md="8" :sm="24">
  18. <a-form-item label="采购单号">
  19. <a-input id="productInfoList-purchaseBillNo" v-model.trim="queryParam.purchaseBillNo" placeholder="请输入采购单号" allowClear />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :md="8" :sm="24">
  23. <a-form-item label="产品编码">
  24. <a-input id="productInfoList-code" v-model.trim="queryParam.dealerProduct.code" allowClear placeholder="请输入产品编码"/>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :md="8" :sm="24">
  28. <a-form-item label="产品名称">
  29. <a-input id="productInfoList-name" v-model.trim="queryParam.dealerProduct.name" allowClear placeholder="请输入产品名称"/>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :md="8" :sm="24">
  33. <a-form-item label="产品分类">
  34. <ProductType id="productInfoList-productType" placeholder="请选择产品分类" :isDealer="true" @change="changeProductType" v-model="productType"></ProductType>
  35. </a-form-item>
  36. </a-col>
  37. <a-col :md="8" :sm="24">
  38. <a-form-item label="产品品牌">
  39. <ProductBrand id="productInfoList-productBrandSn" placeholder="请选择产品品牌" v-model="queryParam.dealerProduct.productBrandSn"></ProductBrand>
  40. </a-select>
  41. </a-form-item>
  42. </a-col>
  43. <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
  44. <a-button type="primary" @click="searchForm" :disabled="disabled" id="productInfoList-refresh">查询</a-button>
  45. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="productInfoList-reset">重置</a-button>
  46. </a-col>
  47. </a-row>
  48. </a-form>
  49. </div>
  50. <p style="font-weight: bold;">当前已选:{{ rowSelectionInfo&&rowSelectionInfo.selectedRowKeys?rowSelectionInfo.selectedRowKeys.length:0 }}个</p>
  51. <!-- 列表 -->
  52. <s-table
  53. class="sTable"
  54. ref="table"
  55. size="small"
  56. :rowKey="(record) => record.id"
  57. :row-selection="{ columnWidth: 40 }"
  58. @rowSelection="rowSelectionFun"
  59. :data="loadData"
  60. :columns="columns"
  61. :scroll="{ y: 450 }"
  62. :defaultLoadData="false"
  63. bordered>
  64. </s-table>
  65. </div>
  66. <!-- 按钮 -->
  67. <div class="btn-con">
  68. <a-button
  69. id="outStock-cancel"
  70. size="large"
  71. class="button-cancel"
  72. @click="isShow=false"
  73. style="padding: 0 60px;margin-right: 15px;">取消</a-button>
  74. <a-button
  75. type="primary"
  76. id="outStock-save"
  77. size="large"
  78. class="button-primary"
  79. @click="handleSave"
  80. style="padding: 0 36px;">批量添加</a-button>
  81. </div>
  82. </div>
  83. </div></a-spin>
  84. </a-modal>
  85. </template>
  86. <script>
  87. import { commonMixin } from '@/utils/mixin'
  88. import { STable } from '@/components'
  89. import { outOfStockDetailList } from '@/api/oos'
  90. import { importOosDetail } from '@/api/purchaseDetail'
  91. import ProductType from '../../common/productType.js'
  92. import ProductBrand from '../../common/productBrand.js'
  93. export default {
  94. name: 'OutStockModal',
  95. components: { STable, ProductType, ProductBrand },
  96. mixins: [commonMixin],
  97. props: {
  98. openModal: { // 弹框显示状态
  99. type: Boolean,
  100. default: false
  101. },
  102. paramsSn: {
  103. type: String,
  104. default: ''
  105. },
  106. chooseData: {
  107. type: Array,
  108. default: () => {
  109. return []
  110. }
  111. }
  112. },
  113. data () {
  114. const _this = this
  115. return {
  116. isShow: _this.openModal, // 是否打开弹框
  117. formItemLayout: {
  118. labelCol: { span: 4 },
  119. wrapperCol: { span: 20 }
  120. },
  121. disabled: false, // 查询、重置按钮是否可操作
  122. columns: [
  123. { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  124. { title: '采购单号', dataIndex: 'purchaseBillNo', width: '18%', align: 'center', customRender: function (text) { return text || '--' } },
  125. { title: '产品编码', dataIndex: 'productCode', width: '18%', align: 'center', customRender: function (text) { return text || '--' } },
  126. { title: '产品名称', dataIndex: 'productName', width: '30%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  127. { title: '缺货数量', dataIndex: 'qty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  128. { title: '缺货金额', dataIndex: 'totalAmount', width: '15%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  129. { title: '单位', dataIndex: 'unit', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
  130. ],
  131. // 加载数据方法 必须为 Promise 对象
  132. loadData: parameter => {
  133. this.disabled = true
  134. this.spinning = true
  135. this.queryParam.purchaseBillSnList = this.chooseData
  136. return outOfStockDetailList(Object.assign(parameter, this.queryParam)).then(res => {
  137. let data
  138. if (res.status == 200) {
  139. data = res.data
  140. const no = (data.pageNo - 1) * data.pageSize
  141. for (var i = 0; i < data.list.length; i++) {
  142. data.list[i].no = no + i + 1
  143. }
  144. this.disabled = false
  145. }
  146. this.spinning = false
  147. return data
  148. })
  149. },
  150. spinning: false,
  151. rowSelectionInfo: null,
  152. productType: [],
  153. queryParam: { // 查询条件
  154. purchaseBillSnList: undefined,
  155. purchaseBillNo: '',
  156. dealerProduct: {
  157. code: '', // 产品编码
  158. name: '', // 产品名称
  159. productBrandSn: undefined, // 产品品牌
  160. productTypeSn1: '', // 产品一级分类
  161. productTypeSn2: '', // 产品二级分类
  162. productTypeSn3: '' // 产品三级分类
  163. }
  164. }
  165. }
  166. },
  167. methods: {
  168. // 产品分类 change
  169. changeProductType (val, opt) {
  170. this.queryParam.dealerProduct.productTypeSn1 = val[0] ? val[0] : ''
  171. this.queryParam.dealerProduct.productTypeSn2 = val[1] ? val[1] : ''
  172. this.queryParam.dealerProduct.productTypeSn3 = val[2] ? val[2] : ''
  173. },
  174. // 表格选中项
  175. rowSelectionFun (obj) {
  176. this.rowSelectionInfo = obj || null
  177. },
  178. // 保存
  179. handleSave () {
  180. const _this = this
  181. if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  182. this.$message.warning('请在列表勾选后再进行操作!')
  183. }
  184. const arr = []
  185. _this.rowSelectionInfo.selectedRows.forEach(item => {
  186. const obj = {
  187. productSn: item.productSn,
  188. productCode: item.productCode,
  189. qty: item.qty
  190. }
  191. arr.push(obj)
  192. })
  193. importOosDetail({ purchaseBillSn: _this.paramsSn, arr }).then(res => {
  194. if (res.status == 200) {
  195. _this.$emit('ok')
  196. }
  197. })
  198. },
  199. searchForm () {
  200. this.$refs.table.refresh(true)
  201. },
  202. resetSearchForm () {
  203. this.queryParam.purchaseBillNo = ''
  204. const info = {
  205. productBrandSn: undefined,
  206. code: '', // 产品编码
  207. name: '', // 产品名称
  208. productTypeSn1: '', // 产品一级分类
  209. productTypeSn2: '', // 产品二级分类
  210. productTypeSn3: '' // 产品三级分类
  211. }
  212. this.productType = []
  213. Object.assign(this.queryParam.dealerProduct, info)
  214. this.$refs.table.refresh(true)
  215. }
  216. },
  217. watch: {
  218. // 父页面传过来的弹框状态
  219. openModal (newValue, oldValue) {
  220. this.isShow = newValue
  221. },
  222. // 重定义的弹框状态
  223. isShow (newValue, oldValue) {
  224. if (!newValue) {
  225. this.$emit('close')
  226. this.$refs.table.clearSelected() // 清空表格选中项
  227. }
  228. }
  229. }
  230. }
  231. </script>
  232. <style lang="less" scoped>
  233. .outStock-modal{
  234. .outStock-con{
  235. .btn-con{
  236. text-align: center;
  237. margin: 30px 0 20px;
  238. .button-cancel{
  239. font-size: 12px;
  240. }
  241. }
  242. }
  243. }
  244. </style>