productModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  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="warehouse">
  43. <a-cascader
  44. @change="changeWarehouseCascade"
  45. v-model="form.warehouse"
  46. expand-trigger="hover"
  47. :allowClear="false"
  48. :options="warehouseCascadeData"
  49. :fieldNames="{ label: 'name', value: 'sn', children: 'warehouseLocationList' }"
  50. id="bulkWarehousingOrder-product-warehouse"
  51. placeholder="请选择仓库仓位"
  52. style="width: 100%;" />
  53. </a-form-model-item>
  54. <a-form-model-item label="成本价">
  55. <span style="margin-right:20px;">{{ form.productCost || form.productCost == 0 ? form.productCost : '--' }}</span>
  56. <a-checkbox v-if="productCost||isGift" :disabled="!!itemSn" v-model="isGift">是否为赠品</a-checkbox>
  57. </a-form-model-item>
  58. <a-form-model-item label="数量" prop="productQty">
  59. <a-input-number
  60. id="bulkWarehousingOrder-product-productQty"
  61. ref="productQty"
  62. v-model="form.productQty"
  63. :precision="0"
  64. :min="1"
  65. :max="999999"
  66. placeholder="请输入"
  67. style="width: 50%;margin-right:20px;" /><span>个</span>
  68. </a-form-model-item>
  69. <div class="btn-cont">
  70. <a-button type="primary" id="bulkWarehousingOrder-product-modal-save" @click="handleSave">{{ itemSn?'保存':'保存并新增' }}</a-button>
  71. <a-button id="bulkWarehousingOrder-product-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  72. </div>
  73. </a-form-model>
  74. </a-spin>
  75. </a-modal>
  76. </template>
  77. <script>
  78. import { commonMixin } from '@/utils/mixin'
  79. import { VSelect } from '@/components'
  80. import debounce from 'lodash/debounce'
  81. import { supplierProductList } from '@/api/supplier'
  82. import { warehouseCascadeList } from '@/api/warehouse'
  83. import { sparePartsSaveDetail, sparePartsDetailD } from '@/api/spareParts'
  84. export default {
  85. name: 'BulkWarehousingOrderBasicInfoModal',
  86. mixins: [commonMixin],
  87. components: { VSelect },
  88. props: {
  89. openModal: { // 弹框显示状态
  90. type: Boolean,
  91. default: false
  92. },
  93. itemSn: {
  94. type: [Number, String],
  95. default: ''
  96. },
  97. nowData: {
  98. type: Object,
  99. default: () => {
  100. return null
  101. }
  102. }
  103. },
  104. data () {
  105. this.fetchUser = debounce(this.fetchUser, 800)
  106. return {
  107. isShow: this.openModal, // 是否打开弹框
  108. spinning: false,
  109. formItemLayout: {
  110. labelCol: { span: 5 },
  111. wrapperCol: { span: 16 }
  112. },
  113. form: {
  114. supplierSn: '', // 供应商
  115. productSn: undefined,
  116. productName: '',
  117. productCode: '',
  118. productOrigCode: '',
  119. warehouse: [],
  120. warehouseSn: '',
  121. warehouseLocationSn: '',
  122. productCost: '',
  123. productQty: ''
  124. },
  125. productCost: '',
  126. rules: {
  127. productSn: [
  128. { required: true, message: '请选择产品编码', trigger: 'change' }
  129. ],
  130. warehouse: [
  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. defaultWarehouseCascade: [], // 默认仓库仓位
  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.form.warehouse = [this.form.warehouseSn, this.form.warehouseLocationSn]
  194. this.warehouseSnBackups = this.form.warehouseSn || undefined
  195. this.warehouseLocationSnBackups = this.form.warehouseLocationSn || undefined
  196. this.isGift = this.form.giftFlag == 1
  197. }
  198. this.spinning = false
  199. })
  200. },
  201. // 保存
  202. handleSave () {
  203. const _this = this
  204. this.$refs.ruleForm.validate(valid => {
  205. if (valid) {
  206. const form = JSON.parse(JSON.stringify(_this.form))
  207. form.sparePartsSn = this.nowData.sparePartsSn
  208. form.sparePartsNo = this.nowData.sparePartsNo
  209. form.supplierSn = this.nowData.supplierSn
  210. form.giftFlag = this.isGift ? 1 : 0
  211. if (!_this.itemSn) {
  212. delete form.id
  213. delete form.sparePartsDetailSn
  214. if (!this.productCost) {
  215. _this.$message.warning('该产品没有设置成本价!')
  216. return false
  217. }
  218. }
  219. _this.spinning = true
  220. sparePartsSaveDetail(form).then(res => {
  221. if (res.status == 200) {
  222. _this.$message.success(res.message)
  223. setTimeout(() => {
  224. _this.$emit('ok', res.data)
  225. _this.spinning = false
  226. if (!_this.itemSn) {
  227. _this.resetData()
  228. _this.$refs.productQty.blur()
  229. _this.$refs.productSn.focus()
  230. } else {
  231. _this.isShow = false
  232. }
  233. })
  234. } else {
  235. _this.spinning = false
  236. }
  237. })
  238. } else {
  239. console.log('error submit!!')
  240. return false
  241. }
  242. })
  243. },
  244. changeWarehouseCascade (val) {
  245. if (val.length < 2) {
  246. this.$message.warning('当前仓库无仓位,请选择其他仓库')
  247. this.form.warehouseSn = this.warehouseSnBackups
  248. this.form.warehouseLocationSn = this.warehouseLocationSnBackups
  249. if (this.warehouseSnBackups || this.warehouseLocationSnBackups) {
  250. this.form.warehouse = [this.warehouseSnBackups, this.warehouseLocationSnBackups]
  251. } else {
  252. this.form.warehouse = []
  253. }
  254. } else {
  255. this.form.warehouseSn = val[0] ? val[0] : ''
  256. this.form.warehouseLocationSn = val[1] ? val[1] : ''
  257. this.warehouseSnBackups = this.form.warehouseSn
  258. this.warehouseLocationSnBackups = this.form.warehouseLocationSn
  259. }
  260. this.$refs.productQty.focus()
  261. },
  262. // 仓库仓位 级联 列表
  263. getWarehouseCascade () {
  264. const _this = this
  265. warehouseCascadeList({}).then(res => {
  266. if (res.status == 200) {
  267. res.data.filter(item => {
  268. // 过滤默认仓库
  269. if (item.defaultFlag == 1) { // defaultFlag为1是默认仓库
  270. _this.defaultWarehouseCascade[0] = item.warehouseSn
  271. // 过滤默认仓位
  272. item.warehouseLocationList.filter(subItem => {
  273. if (subItem.defaultFlag == 1) {
  274. _this.defaultWarehouseCascade[1] = subItem.warehouseLocationSn
  275. _this.form.warehouse = _this.defaultWarehouseCascade
  276. _this.form.warehouseSn = _this.defaultWarehouseCascade[0] || undefined
  277. _this.form.warehouseLocationSn = _this.defaultWarehouseCascade[1] || undefined
  278. _this.warehouseSnBackups = _this.defaultWarehouseCascade[0] || undefined
  279. _this.warehouseLocationSnBackups = _this.defaultWarehouseCascade[1] || undefined
  280. }
  281. })
  282. }
  283. })
  284. res.data.map(item => {
  285. item.sn = item.warehouseSn
  286. if (item.warehouseLocationList) {
  287. item.warehouseLocationList.map(subItem => {
  288. subItem.sn = subItem.warehouseLocationSn
  289. })
  290. }
  291. })
  292. this.warehouseCascadeData = res.data
  293. } else {
  294. this.warehouseCascadeData = []
  295. }
  296. })
  297. },
  298. resetData () {
  299. this.$refs.ruleForm.resetFields()
  300. this.form = {
  301. supplierSn: '', // 供应商
  302. productSn: undefined,
  303. productName: '',
  304. productCode: '',
  305. productOrigCode: '',
  306. warehouse: [],
  307. warehouseSn: '',
  308. warehouseLocationSn: '',
  309. productCost: '',
  310. productQty: ''
  311. }
  312. this.productCost = ''
  313. this.isGift = false
  314. }
  315. },
  316. watch: {
  317. // 父页面传过来的弹框状态
  318. openModal (newValue, oldValue) {
  319. this.isShow = newValue
  320. },
  321. // 重定义的弹框状态
  322. isShow (newValue, oldValue) {
  323. if (!newValue) {
  324. this.$emit('close')
  325. this.resetData()
  326. this.warehouseSnBackups = ''
  327. this.warehouseLocationSnBackups = ''
  328. } else {
  329. this.$nextTick(() => {
  330. this.resetData()
  331. })
  332. this.getWarehouseCascade()
  333. }
  334. },
  335. itemSn (newValue, oldValue) {
  336. if (this.isShow && newValue) {
  337. this.getDetail()
  338. }
  339. },
  340. isGift (newValue, oldValue) {
  341. if (newValue) {
  342. this.form.productCost = 0
  343. } else {
  344. this.form.productCost = this.productCost
  345. }
  346. }
  347. }
  348. }
  349. </script>
  350. <style lang="less">
  351. .bulkWarehousingOrder-product-modal{
  352. .ant-modal-body {
  353. padding: 40px 40px 24px;
  354. }
  355. .btn-cont {
  356. text-align: center;
  357. margin: 35px 0 10px;
  358. }
  359. }
  360. </style>