addModal.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <template>
  2. <a-modal
  3. centered
  4. class="bulkWarehousingOrder-product-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="(itemSn ? '编辑' : '新增') + '产品'"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="bulkWarehousingOrder-product-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. @keyup.enter.native="handleSave">
  20. <a-form-model-item label="供应商名称" prop="supplierSn">{{ (nowData&&nowData.supplierName) || '--' }}</a-form-model-item>
  21. <a-form-model-item label="产品编码" :prop="!itemSn?'productSn':''">
  22. <a-select
  23. show-search
  24. id="bulkWarehousingOrder-product-productSn"
  25. ref="productSn"
  26. v-if="!itemSn"
  27. v-model="form.productSn"
  28. placeholder="请选择"
  29. :filter-option="false"
  30. :not-found-content="fetching ? undefined : null"
  31. :autoFocus="true"
  32. @search="fetchUser"
  33. @change="handleChange"
  34. >
  35. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  36. <a-select-option v-for="item in productData" :key="item.product.productSn + item.product.code" :value="item.product.productSn">{{ item.product.code }}</a-select-option>
  37. </a-select>
  38. <span v-else>{{ form.productCode }}</span>
  39. </a-form-model-item>
  40. <a-form-model-item label="产品名称" prop="productName">{{ form.productName || '--' }}</a-form-model-item>
  41. <a-form-model-item label="原厂编码" prop="productOrigCode">{{ form.productOrigCode || '--' }}</a-form-model-item>
  42. <a-form-model-item label="仓库仓位" prop="warehouseLocationSn">
  43. {{ (nowData&&nowData.warehouseName) || '--' }} >
  44. <a-select
  45. id="bulkWarehousingOrder-product-warehouse"
  46. @change="changeWarehouseCascade"
  47. placeholder="请选择仓位"
  48. :allowClear="false"
  49. v-model="form.warehouseLocationSn"
  50. style="width: 50%;">
  51. <a-select-option v-for="item in warehouseCascadeData" :value="item.warehouseLocationSn">
  52. {{ item.name }}
  53. </a-select-option>
  54. </a-select>
  55. </a-form-model-item>
  56. <a-form-model-item label="成本价">
  57. <span style="margin-right:20px;">{{ form.productCost ? toThousands(form.productCost) : '--' }}</span>
  58. </a-form-model-item>
  59. <a-form-model-item label="采购数量" prop="productQty">
  60. <a-input-number
  61. id="bulkWarehousingOrder-product-productQty"
  62. ref="productQty"
  63. v-model="form.productQty"
  64. :precision="0"
  65. :min="1"
  66. :max="99999999"
  67. placeholder="请输入采购数量"
  68. style="width: 50%;margin-right:20px;" /><span>个</span>
  69. </a-form-model-item>
  70. <div class="btn-cont">
  71. <a-button id="bulkWarehousingOrder-product-modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  72. <a-button type="primary" id="bulkWarehousingOrder-product-modal-save" @click="handleSave">{{ itemSn?'保存':'保存并新增' }}</a-button>
  73. </div>
  74. </a-form-model>
  75. </a-spin>
  76. </a-modal>
  77. </template>
  78. <script>
  79. import { commonMixin } from '@/utils/mixin'
  80. import { VSelect } from '@/components'
  81. import debounce from 'lodash/debounce'
  82. import { supplierProductList } from '@/api/supplier'
  83. import { warehouseCascadeList } from '@/api/warehouse'
  84. import { savePurchaseDetail, getDetailData } from '@/api/purchase'
  85. export default {
  86. name: 'BulkWarehousingOrderBasicInfoModal',
  87. mixins: [commonMixin],
  88. components: { VSelect },
  89. props: {
  90. openModal: { // 弹框显示状态
  91. type: Boolean,
  92. default: false
  93. },
  94. itemSn: {
  95. type: [Number, String],
  96. default: ''
  97. },
  98. nowData: {
  99. type: Object,
  100. default: () => {
  101. return null
  102. }
  103. }
  104. },
  105. data () {
  106. this.fetchUser = debounce(this.fetchUser, 800)
  107. return {
  108. isShow: this.openModal, // 是否打开弹框
  109. spinning: false,
  110. formItemLayout: {
  111. labelCol: { span: 5 },
  112. wrapperCol: { span: 16 }
  113. },
  114. form: {
  115. supplierSn: '', // 供应商
  116. productSn: undefined,
  117. productName: '',
  118. productCode: '',
  119. productOrigCode: '',
  120. warehouseSn: '',
  121. warehouseLocationSn: undefined,
  122. productCost: '',
  123. productQty: ''
  124. },
  125. productCost: '',
  126. rules: {
  127. productSn: [
  128. { required: true, message: '请选择产品编码', trigger: 'change' }
  129. ],
  130. warehouseLocationSn: [
  131. { required: true, message: '请选择仓位', trigger: 'change' }
  132. ],
  133. productCost: [
  134. { required: true, message: '该产品没有设置成本价', trigger: 'blur' }
  135. ],
  136. productQty: [
  137. { required: true, message: '请输入数量', trigger: 'blur' }
  138. ]
  139. },
  140. fetching: false,
  141. productData: [],
  142. warehouseCascadeData: [], // 仓库仓位 下拉数据
  143. warehouseSnBackups: '', // 仓库备份数据
  144. warehouseLocationSnBackups: '', // 仓位备份数据
  145. isGift: false
  146. }
  147. },
  148. methods: {
  149. // 搜索产品
  150. fetchUser (value) {
  151. console.log('fetching user', value)
  152. this.fetching = true
  153. const params = {
  154. product: {
  155. code: value
  156. },
  157. supplierSn: this.nowData.supplierSn,
  158. pageNo: 1,
  159. pageSize: 20
  160. }
  161. supplierProductList(params).then(res => {
  162. if (res.status == 200) {
  163. this.productData = res.data && res.data.list ? res.data.list : []
  164. this.fetching = false
  165. } else {
  166. this.productData = []
  167. this.fetching = false
  168. }
  169. })
  170. },
  171. // 产品编码 change
  172. handleChange (value) {
  173. const ind = this.productData.findIndex(item => item.productSn == value)
  174. this.form.productName = this.productData[ind].product.name
  175. this.form.productCode = this.productData[ind].product.code
  176. this.form.productOrigCode = this.productData[ind].product.origCode
  177. this.form.productCost = this.productData[ind].cost
  178. this.productCost = this.form.productCost
  179. this.form.productQty = ''
  180. this.isGift = false
  181. this.$refs.productQty.focus()
  182. this.$refs.ruleForm.validate()
  183. },
  184. // 详情
  185. getDetail () {
  186. this.spinning = true
  187. getDetailData({ sn: this.itemSn }).then(res => {
  188. if (res.status == 200) {
  189. const data = res.data
  190. this.form = Object.assign(this.form, data)
  191. }
  192. this.spinning = false
  193. })
  194. },
  195. // 保存
  196. handleSave () {
  197. const _this = this
  198. this.$refs.ruleForm.validate(valid => {
  199. if (valid) {
  200. const form = JSON.parse(JSON.stringify(_this.form))
  201. form.supplierSn = this.nowData.supplierSn
  202. form.sparePartsSn = this.nowData.sparePartsSn
  203. form.sparePartsNo = this.nowData.sparePartsNo
  204. form.warehouseSn = this.nowData.warehouseSn
  205. form.sparePartsDetailSn = this.itemSn ? this.itemSn : undefined
  206. _this.spinning = true
  207. savePurchaseDetail(form).then(res => {
  208. if (res.status == 200) {
  209. _this.$message.success(res.message)
  210. setTimeout(() => {
  211. _this.$emit('ok', res.data)
  212. _this.spinning = false
  213. _this.isShow = false
  214. })
  215. } else {
  216. _this.spinning = false
  217. }
  218. })
  219. } else {
  220. console.log('error submit!!')
  221. return false
  222. }
  223. })
  224. },
  225. changeWarehouseCascade (val) {
  226. this.$refs.productQty.focus()
  227. this.$refs.ruleForm.validate()
  228. },
  229. // 仓库仓位 级联 列表
  230. getWarehouseCascade () {
  231. const _this = this
  232. warehouseCascadeList({}).then(res => {
  233. if (res.status == 200) {
  234. const data = res.data
  235. var pos = data.findIndex(item => _this.nowData.warehouseSn === item.warehouseSn)
  236. if (pos != -1) {
  237. if (data[pos].warehouseLocationList && data[pos].warehouseLocationList.length > 0) {
  238. _this.warehouseCascadeData = data[pos].warehouseLocationList
  239. _this.form.warehouseLocationSn = data[pos].warehouseLocationList[0].warehouseLocationSn
  240. } else {
  241. _this.warehouseCascadeData = []
  242. _this.form.warehouseLocationSn = undefined
  243. }
  244. } else {
  245. _this.warehouseCascadeData = []
  246. }
  247. }
  248. })
  249. },
  250. resetData () {
  251. this.$refs.ruleForm.resetFields()
  252. this.form = {
  253. supplierSn: '', // 供应商
  254. productSn: undefined,
  255. productName: '',
  256. productCode: '',
  257. productOrigCode: '',
  258. warehouseSn: undefined,
  259. warehouseLocationSn: undefined,
  260. productCost: '',
  261. productQty: ''
  262. }
  263. this.productCost = ''
  264. this.itemSn = ''
  265. }
  266. },
  267. watch: {
  268. // 父页面传过来的弹框状态
  269. openModal (newValue, oldValue) {
  270. this.isShow = newValue
  271. },
  272. // 重定义的弹框状态
  273. isShow (newValue, oldValue) {
  274. if (!newValue) {
  275. this.$emit('close')
  276. this.resetData()
  277. } else {
  278. this.getWarehouseCascade()
  279. }
  280. },
  281. itemSn (newValue, oldValue) {
  282. if (this.isShow && newValue) {
  283. this.getDetail()
  284. }
  285. }
  286. }
  287. }
  288. </script>
  289. <style lang="less">
  290. .bulkWarehousingOrder-product-modal{
  291. .ant-modal-body {
  292. padding: 40px 40px 24px;
  293. .ant-form-item{
  294. margin-bottom: 10px;
  295. }
  296. }
  297. .btn-cont {
  298. text-align: center;
  299. margin: 35px 0 10px;
  300. }
  301. }
  302. </style>