productModal.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  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. style="width: 50%;"
  50. v-model="form.warehouseLocationSn">
  51. <a-select-option v-for="item in warehouseCascadeData" :value="item.sn">
  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-checkbox v-if="productCost||isGift" :disabled="!!itemSn" v-model="isGift">是否为赠品</a-checkbox>
  59. </a-form-model-item>
  60. <a-form-model-item label="数量" prop="productQty">
  61. <a-input-number
  62. id="bulkWarehousingOrder-product-productQty"
  63. ref="productQty"
  64. v-model="form.productQty"
  65. :precision="0"
  66. :min="1"
  67. :max="99999999"
  68. placeholder="请输入"
  69. style="width: 50%;margin-right:20px;" /><span>个</span>
  70. </a-form-model-item>
  71. <div class="btn-cont">
  72. <a-button id="bulkWarehousingOrder-product-modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  73. <a-button type="primary" id="bulkWarehousingOrder-product-modal-save" @click="handleSave">{{ itemSn?'保存':'保存并新增' }}</a-button>
  74. </div>
  75. </a-form-model>
  76. </a-spin>
  77. </a-modal>
  78. </template>
  79. <script>
  80. import { commonMixin } from '@/utils/mixin'
  81. import { VSelect } from '@/components'
  82. import debounce from 'lodash/debounce'
  83. import { supplierProductList } from '@/api/supplier'
  84. import { warehouseCascadeList } from '@/api/warehouse'
  85. import { sparePartsSaveDetail, sparePartsDetailD } from '@/api/spareParts'
  86. export default {
  87. name: 'BulkWarehousingOrderBasicInfoModal',
  88. mixins: [commonMixin],
  89. components: { VSelect },
  90. props: {
  91. openModal: { // 弹框显示状态
  92. type: Boolean,
  93. default: false
  94. },
  95. itemSn: {
  96. type: [Number, String],
  97. default: ''
  98. },
  99. nowData: {
  100. type: Object,
  101. default: () => {
  102. return null
  103. }
  104. }
  105. },
  106. data () {
  107. this.fetchUser = debounce(this.fetchUser, 800)
  108. return {
  109. isShow: this.openModal, // 是否打开弹框
  110. spinning: false,
  111. formItemLayout: {
  112. labelCol: { span: 5 },
  113. wrapperCol: { span: 16 }
  114. },
  115. form: {
  116. supplierSn: '', // 供应商
  117. productSn: undefined,
  118. productName: '',
  119. productCode: '',
  120. productOrigCode: '',
  121. warehouseSn: '',
  122. warehouseLocationSn: undefined,
  123. productCost: '',
  124. productQty: ''
  125. },
  126. productCost: '',
  127. rules: {
  128. productSn: [
  129. { required: true, message: '请选择产品编码', trigger: 'change' }
  130. ],
  131. warehouseLocationSn: [
  132. { required: true, message: '请选择仓位', trigger: 'change' }
  133. ],
  134. productCost: [
  135. { required: true, message: '该产品没有设置成本价', trigger: 'blur' }
  136. ],
  137. productQty: [
  138. { required: true, message: '请输入数量', trigger: 'blur' }
  139. ]
  140. },
  141. fetching: false,
  142. productData: [],
  143. warehouseCascadeData: [], // 仓库仓位 下拉数据
  144. warehouseSnBackups: '', // 仓库备份数据
  145. warehouseLocationSnBackups: '', // 仓位备份数据
  146. isGift: false
  147. }
  148. },
  149. methods: {
  150. // 搜索产品
  151. fetchUser (value) {
  152. console.log('fetching user', value)
  153. this.fetching = true
  154. const params = {
  155. product: {
  156. code: value
  157. },
  158. supplierSn: this.nowData.supplierSn,
  159. pageNo: 1,
  160. pageSize: 20
  161. }
  162. supplierProductList(params).then(res => {
  163. if (res.status == 200) {
  164. this.productData = res.data && res.data.list ? res.data.list : []
  165. this.fetching = false
  166. } else {
  167. this.productData = []
  168. this.fetching = false
  169. }
  170. })
  171. },
  172. // 产品编码 change
  173. handleChange (value) {
  174. const ind = this.productData.findIndex(item => item.productSn == value)
  175. this.form.productName = this.productData[ind].product.name
  176. this.form.productCode = this.productData[ind].product.code
  177. this.form.productOrigCode = this.productData[ind].product.origCode
  178. this.form.productCost = this.productData[ind].cost
  179. this.productCost = this.form.productCost
  180. this.form.productQty = ''
  181. this.isGift = false
  182. this.$refs.productQty.focus()
  183. this.$refs.ruleForm.validate()
  184. },
  185. // 详情
  186. getDetail () {
  187. this.spinning = true
  188. sparePartsDetailD({ sn: this.itemSn }).then(res => {
  189. if (res.status == 200) {
  190. const data = res.data
  191. this.form = Object.assign(this.form, data)
  192. // this.fetchUser(this.form.productCode)
  193. this.warehouseSnBackups = this.form.warehouseSn || undefined
  194. this.warehouseLocationSnBackups = this.form.warehouseLocationSn || undefined
  195. this.isGift = this.form.giftFlag == 1
  196. }
  197. this.spinning = false
  198. })
  199. },
  200. // 保存
  201. handleSave () {
  202. const _this = this
  203. this.$refs.ruleForm.validate(valid => {
  204. if (valid) {
  205. const form = JSON.parse(JSON.stringify(_this.form))
  206. form.sparePartsSn = this.nowData.sparePartsSn
  207. form.sparePartsNo = this.nowData.sparePartsNo
  208. form.supplierSn = this.nowData.supplierSn
  209. form.giftFlag = this.isGift ? 1 : 0
  210. if (!_this.itemSn) {
  211. delete form.id
  212. delete form.sparePartsDetailSn
  213. if (!this.productCost) {
  214. _this.$message.warning('该产品没有设置成本价!')
  215. return false
  216. }
  217. }
  218. _this.spinning = true
  219. sparePartsSaveDetail(form).then(res => {
  220. if (res.status == 200) {
  221. _this.$message.success(res.message)
  222. setTimeout(() => {
  223. _this.$emit('ok', res.data)
  224. _this.spinning = false
  225. if (!_this.itemSn) {
  226. _this.resetData()
  227. _this.$refs.productQty.blur()
  228. _this.$refs.productSn.focus()
  229. } else {
  230. _this.isShow = false
  231. }
  232. })
  233. } else {
  234. _this.spinning = false
  235. }
  236. })
  237. } else {
  238. console.log('error submit!!')
  239. return false
  240. }
  241. })
  242. },
  243. changeWarehouseCascade (val) {
  244. this.$refs.productQty.focus()
  245. this.$refs.ruleForm.validate()
  246. },
  247. // 仓库仓位 级联 列表
  248. getWarehouseCascade () {
  249. const _this = this
  250. warehouseCascadeList({}).then(res => {
  251. if (res.status == 200) {
  252. // 默认仓库
  253. const defSn = this.isShowWarehouse ? this.nowData.warehouseSn : this.defWarehouse&&this.defWarehouse.warehouseSn
  254. _this.form.warehouseSn = defSn
  255. _this.warehouseSnBackups = defSn
  256. const data = res.data.find(item => item.warehouseSn == defSn)
  257. console.log(data.warehouseLocationList)
  258. if(data&&data.warehouseLocationList){
  259. data.warehouseLocationList.map(subItem => {
  260. subItem.sn = subItem.warehouseLocationSn
  261. if(subItem.defaultFlag == 1){
  262. _this.form.warehouseLocationSn = subItem.warehouseLocationSn
  263. _this.warehouseLocationSnBackups = subItem.warehouseLocationSn
  264. }
  265. })
  266. this.warehouseCascadeData = data.warehouseLocationList
  267. }else{
  268. this.warehouseCascadeData = []
  269. }
  270. } else {
  271. this.warehouseCascadeData = []
  272. }
  273. })
  274. },
  275. resetData () {
  276. this.$refs.ruleForm.resetFields()
  277. this.form = {
  278. supplierSn: '', // 供应商
  279. productSn: undefined,
  280. productName: '',
  281. productCode: '',
  282. productOrigCode: '',
  283. warehouseSn: this.warehouseSnBackups,
  284. warehouseLocationSn: this.warehouseLocationSnBackups,
  285. productCost: '',
  286. productQty: ''
  287. }
  288. this.productCost = ''
  289. this.isGift = false
  290. }
  291. },
  292. watch: {
  293. // 父页面传过来的弹框状态
  294. openModal (newValue, oldValue) {
  295. this.isShow = newValue
  296. },
  297. // 重定义的弹框状态
  298. isShow (newValue, oldValue) {
  299. if (!newValue) {
  300. this.$emit('close')
  301. this.resetData()
  302. this.warehouseSnBackups = ''
  303. this.warehouseLocationSnBackups = ''
  304. } else {
  305. this.getWarehouseCascade()
  306. }
  307. },
  308. itemSn (newValue, oldValue) {
  309. if (this.isShow && newValue) {
  310. this.getDetail()
  311. }
  312. },
  313. isGift (newValue, oldValue) {
  314. if (newValue) {
  315. this.form.productCost = 0
  316. } else {
  317. this.form.productCost = this.productCost
  318. }
  319. }
  320. }
  321. }
  322. </script>
  323. <style lang="less">
  324. .bulkWarehousingOrder-product-modal{
  325. .ant-modal-body {
  326. padding: 40px 40px 24px;
  327. .ant-form-item{
  328. margin-bottom: 10px;
  329. }
  330. }
  331. .btn-cont {
  332. text-align: center;
  333. margin: 35px 0 10px;
  334. }
  335. }
  336. </style>