outStockModal.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <a-drawer
  3. :zIndex="zIndex"
  4. placement="right"
  5. :visible="isShow"
  6. :width="width"
  7. :get-container="false"
  8. :wrap-style="{ position: 'absolute' }"
  9. @close="onCancel"
  10. wrapClassName="outStock-modal"
  11. >
  12. <div slot="title">
  13. <strong>采购缺货产品明细</strong>
  14. <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-if="purchaseTargetType&&(purchaseTargetType=='DEALER_UP'||purchaseTargetType=='DEALER_SUPPLIER')">注意:仅可添加本供应商有权限的产品</span>
  15. <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-else-if="purchaseTargetType&&purchaseTargetType=='SUPPLIER_SYS'">注意:仅可添加本供应商有经销权且总部已上线的产品</span>
  16. </div>
  17. <a-spin :spinning="spinning" tip="Loading...">
  18. <div class="outStock-con jg-drawer-wrap">
  19. <div>
  20. <div ref="searchBox" class="table-page-search-wrapper">
  21. <a-form layout="inline" @keyup.enter.native="searchForm">
  22. <a-row type="flex" :gutter="12" justify="start">
  23. <a-col flex="auto">
  24. <a-form-item label="采购单号">
  25. <a-input id="productInfoList-purchaseBillNo" v-model.trim="purchaseBillNo" placeholder="请输入采购单号" allowClear />
  26. </a-form-item>
  27. </a-col>
  28. <a-col flex="auto">
  29. <a-form-item label="产品编码">
  30. <a-input id="productInfoList-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
  31. </a-form-item>
  32. </a-col>
  33. <a-col flex="auto">
  34. <a-form-item label="产品名称">
  35. <a-input id="productInfoList-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
  36. </a-form-item>
  37. </a-col>
  38. <a-col flex="250px">
  39. <a-form-item label="产品分类">
  40. <ProductType id="productInfoList-productType" placeholder="请选择产品分类" :isDealer="true" @change="changeProductType" v-model="productType"></ProductType>
  41. </a-form-item>
  42. </a-col>
  43. <a-col flex="250px">
  44. <a-form-item label="产品品牌">
  45. <ProductBrand id="productInfoList-productBrandSn" placeholder="请选择产品品牌" v-model="queryParam.productBrandSn"></ProductBrand>
  46. </a-form-item>
  47. </a-col>
  48. <a-col flex="auto">
  49. <a-button type="primary" @click="searchForm" :disabled="disabled" id="productInfoList-refresh">查询</a-button>
  50. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="productInfoList-reset">重置</a-button>
  51. </a-col>
  52. </a-row>
  53. </a-form>
  54. </div>
  55. <div class="actions-buttons">
  56. <a-button
  57. type="primary"
  58. ghost
  59. id="outStock-save"
  60. @click="handleSave"
  61. style="padding: 0 20px;">批量添加</a-button>
  62. <span style="font-weight: bold;margin-left:15px;" v-if="rowSelectionInfo&&rowSelectionInfo.selectedRowKeys.length">已选:{{ rowSelectionInfo&&rowSelectionInfo.selectedRowKeys.length }}个</span>
  63. </div>
  64. <!-- 列表 -->
  65. <s-table
  66. class="sTable"
  67. ref="table"
  68. size="small"
  69. :rowKey="(record) => record.id"
  70. :row-selection="{ columnWidth: 40 ,getCheckboxProps:record=>({props:{disabled:(purchaseTargetType&&purchaseTargetType=='SUPPLIER_SYS'&&record.onlineFalg == 0)||record.productPowerFlag==0}})}"
  71. :scroll="{ y:tableHeight, x: 1000 }"
  72. @rowSelection="rowSelectionFun"
  73. :data="loadData"
  74. :defaultLoadData="false"
  75. :columns="columns"
  76. :pageSize="30"
  77. bordered>
  78. <!-- 产品编码 -->
  79. <template slot="productCode" slot-scope="text, record">
  80. {{ record.productCode }}
  81. <a-tag v-if="record.onlineFalg == 0">下架</a-tag>
  82. <a-tag color="red" v-if="record.productPowerFlag== 0">无权限</a-tag>
  83. </template>
  84. </s-table>
  85. </div>
  86. </div>
  87. </a-spin>
  88. </a-drawer>
  89. </template>
  90. <script>
  91. import { commonMixin } from '@/utils/mixin'
  92. import { STable } from '@/components'
  93. import { outOfStockDetailList } from '@/api/oos'
  94. import { importOosDetail } from '@/api/purchaseDetail'
  95. import ProductType from '../../common/productType.js'
  96. import ProductBrand from '../../common/productBrand.js'
  97. export default {
  98. name: 'OutStockModal',
  99. components: { STable, ProductType, ProductBrand },
  100. mixins: [commonMixin],
  101. props: {
  102. openModal: { // 弹框显示状态
  103. type: Boolean,
  104. default: false
  105. },
  106. paramsSn: {
  107. type: String,
  108. default: ''
  109. },
  110. chooseData: {
  111. type: Array,
  112. default: () => {
  113. return []
  114. }
  115. },
  116. width: {
  117. type: [String, Number],
  118. default: '70%'
  119. },
  120. zIndex: {
  121. type: Number,
  122. default: 100
  123. },
  124. // 1向总部采购的提示语:注意:仅可添加本供应商有经销权且总部已上线的产品
  125. // 2向上级与省仓采购的提示语:注意:仅可添加本供应商有权限的产品
  126. purchaseTargetType: {
  127. type: String,
  128. default: null
  129. }
  130. },
  131. data () {
  132. const _this = this
  133. return {
  134. isShow: this.openModal, // 是否打开弹框
  135. tableHeight: 0,
  136. formItemLayout: {
  137. labelCol: { span: 4 },
  138. wrapperCol: { span: 20 }
  139. },
  140. disabled: false, // 查询、重置按钮是否可操作
  141. columns: [
  142. { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  143. { title: '采购单号', dataIndex: 'purchaseBillNo', width: '18%', align: 'center', customRender: function (text) { return text || '--' } },
  144. { title: '产品编码', dataIndex: 'productCode', width: '18%', align: 'center', scopedSlots: { customRender: 'productCode' } },
  145. { title: '产品名称', dataIndex: 'productName', width: '30%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  146. { title: '缺货数量', dataIndex: 'qty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  147. { title: '缺货金额', dataIndex: 'totalAmount', width: '15%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  148. { title: '单位', dataIndex: 'unit', width: '10%', align: 'center', customRender: function (text) { return text || '--' } }
  149. ],
  150. // 加载数据方法 必须为 Promise 对象
  151. loadData: parameter => {
  152. this.disabled = true
  153. this.spinning = true
  154. return outOfStockDetailList(Object.assign(parameter, { purchaseBillSnList: this.chooseData, newPurchaseBillSn: _this.paramsSn, purchaseBillNo: this.purchaseBillNo, dealerProduct: this.queryParam })).then(res => {
  155. let data
  156. if (res.status == 200) {
  157. data = res.data
  158. const no = (data.pageNo - 1) * data.pageSize
  159. for (var i = 0; i < data.list.length; i++) {
  160. data.list[i].no = no + i + 1
  161. }
  162. this.disabled = false
  163. }
  164. this.spinning = false
  165. return data
  166. })
  167. },
  168. spinning: false,
  169. rowSelectionInfo: null,
  170. productType: [],
  171. queryParam: { // 查询条件
  172. code: '', // 产品编码
  173. name: '', // 产品名称
  174. productBrandSn: undefined, // 产品品牌
  175. productTypeSn1: '', // 产品一级分类
  176. productTypeSn2: '', // 产品二级分类
  177. productTypeSn3: '' // 产品三级分类
  178. },
  179. purchaseBillNo: ''
  180. }
  181. },
  182. methods: {
  183. setTableH () {
  184. this.$nextTick(() => {
  185. const searchBoxH = this.$refs.searchBox.offsetHeight
  186. this.tableHeight = window.innerHeight - searchBoxH - 340
  187. })
  188. },
  189. // 产品分类 change
  190. changeProductType (val, opt) {
  191. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  192. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  193. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  194. },
  195. // 表格选中项
  196. rowSelectionFun (obj) {
  197. this.rowSelectionInfo = obj || null
  198. },
  199. // 保存
  200. handleSave () {
  201. const _this = this
  202. if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  203. this.$message.warning('请在列表勾选后再进行操作!')
  204. return
  205. }
  206. const arr = []
  207. _this.rowSelectionInfo.selectedRows.forEach(item => {
  208. const obj = {
  209. productSn: item.productSn,
  210. productCode: item.productCode,
  211. qty: item.qty
  212. }
  213. arr.push(obj)
  214. })
  215. importOosDetail({ purchaseBillSn: _this.paramsSn, arr }).then(res => {
  216. if (res.status == 200) {
  217. _this.$emit('ok')
  218. }
  219. })
  220. },
  221. onCancel () {
  222. this.$emit('close')
  223. this.$refs.table.clearSelected() // 清空表格选中项
  224. },
  225. searchForm () {
  226. this.$refs.table.refresh(true)
  227. },
  228. resetSearchForm () {
  229. this.queryParam = {
  230. productBrandSn: undefined,
  231. code: '', // 产品编码
  232. name: '', // 产品名称
  233. productTypeSn1: '', // 产品一级分类
  234. productTypeSn2: '', // 产品二级分类
  235. productTypeSn3: '' // 产品三级分类
  236. }
  237. this.purchaseBillNo = ''
  238. this.productType = []
  239. this.$refs.table.refresh(true)
  240. }
  241. },
  242. watch: {
  243. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  244. this.setTableH()
  245. },
  246. // 父页面传过来的弹框状态
  247. openModal (newValue, oldValue) {
  248. this.isShow = newValue
  249. },
  250. // 重定义的弹框状态
  251. isShow (newValue, oldValue) {
  252. if (!newValue) {
  253. this.onCancel()
  254. } else {
  255. setTimeout(() => {
  256. this.setTableH()
  257. }, 200)
  258. this.resetSearchForm()
  259. }
  260. }
  261. }
  262. }
  263. </script>
  264. <style lang="less">
  265. .outStock-modal{
  266. .ant-drawer-header{
  267. padding: 13px 20px;
  268. }
  269. .ant-drawer-body{
  270. padding: 15px 20px;
  271. height: calc(100% - 50px);
  272. }
  273. .outStock-con{
  274. .actions-buttons{
  275. padding: 10px 0;
  276. }
  277. }
  278. }
  279. </style>