editModal.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <a-modal
  3. centered
  4. class="warehouseEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <!-- 表单 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="warehouseEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="仓库名称" prop="name">
  23. <a-input
  24. id="warehouseEdit-name"
  25. :maxLength="30"
  26. v-model.trim="form.name"
  27. @change="filterEmpty"
  28. placeholder="请输入仓库名称(最多30个字符)"
  29. allowClear />
  30. </a-form-model-item>
  31. <a-form-model-item label="地址" prop="addressInfo">
  32. <AreaList
  33. id="warehouseEdit-areaList"
  34. :value="form.addressInfo"
  35. changeOnSelect
  36. ref="areaList"
  37. @change="areaChange"
  38. defValKey="id"></AreaList>
  39. </a-form-model-item>
  40. <a-form-model-item prop="address" :wrapper-col="{ span: 16, offset: 6 }">
  41. <a-input
  42. id="warehouseEdit-desc"
  43. v-model.trim="form.address"
  44. placeholder="请输入详细地址"
  45. allowClear />
  46. </a-form-model-item>
  47. <a-form-model-item label="ERP仓库编码" prop="erpWarehouseCode">
  48. <a-input
  49. id="warehouseEdit-code"
  50. v-model.trim="form.erpWarehouseCode"
  51. placeholder="请输入ERP仓库编码"
  52. allowClear />
  53. </a-form-model-item>
  54. </a-form-model>
  55. <div class="btn-cont">
  56. <a-button type="primary" id="warehouse-edit-modal-save" @click="handleSave">保存</a-button>
  57. <a-button id="warehouse-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
  58. </div>
  59. </a-spin>
  60. </div>
  61. </a-modal>
  62. </template>
  63. <script>
  64. import { commonMixin } from '@/utils/mixin'
  65. import { STable } from '@/components'
  66. import { warehouseSave } from '@/api/warehouse'
  67. import AreaList from '@/views/common/areaList.js'
  68. export default {
  69. name: 'WarehouseEditModal',
  70. mixins: [commonMixin],
  71. components: { STable, AreaList },
  72. props: {
  73. openModal: { // 弹框显示状态
  74. type: Boolean,
  75. default: false
  76. },
  77. itemSn: {
  78. type: [Number, String],
  79. default: ''
  80. },
  81. nowData: {
  82. type: Object,
  83. default: null
  84. }
  85. },
  86. computed: {
  87. modalTit () {
  88. return (this.itemSn ? '编辑' : '新增') + '仓库'
  89. }
  90. },
  91. data () {
  92. return {
  93. isShow: this.openModal, // 是否打开弹框
  94. spinning: false,
  95. formItemLayout: {
  96. labelCol: { span: 6 },
  97. wrapperCol: { span: 16 }
  98. },
  99. form: {
  100. name: '', // 仓库名称
  101. address: '',
  102. addressInfo: undefined,
  103. provinceSn: undefined,
  104. provinceName: undefined,
  105. citySn: undefined,
  106. cityName: undefined,
  107. districtSn: undefined,
  108. districtName: undefined,
  109. erpWarehouseCode: undefined// ERP仓库编码
  110. },
  111. rules: {
  112. name: [
  113. { required: true, message: '请输入仓库名称', trigger: 'blur' }
  114. ],
  115. addressInfo: [
  116. { required: true, message: '请选择省市区', trigger: 'change' }
  117. ],
  118. address: [
  119. { required: true, message: '请输入详细地址', trigger: 'blur' }
  120. ],
  121. erpWarehouseCode: [
  122. { required: true, message: '请输入ERP仓库编码', trigger: 'blur' }
  123. ]
  124. }
  125. }
  126. },
  127. methods: {
  128. filterEmpty () {
  129. let str = this.form.name
  130. str = str.replace(/\ +/g, '')
  131. str = str.replace(/[ ]/g, '')
  132. str = str.replace(/[\r\n]/g, '')
  133. this.form.name = str
  134. },
  135. areaChange (val, row) {
  136. this.form.addressInfo = val
  137. this.form.provinceSn = val[0] ? val[0] : ''
  138. this.form.provinceName = row[0] ? row[0].name ? row[0].name : '' : ''
  139. this.form.citySn = val[1] ? val[1] : ''
  140. this.form.cityName = row[1] ? row[1].name ? row[1].name : '' : ''
  141. this.form.districtSn = val[2] ? val[2] : ''
  142. this.form.districtName = row[2] ? row[2].name ? row[2].name : '' : ''
  143. },
  144. // 详情
  145. getDetail () {
  146. if (this.nowData) {
  147. const addressVal = [this.nowData.provinceSn ? this.nowData.provinceSn : '', this.nowData.citySn ? this.nowData.citySn : '', this.nowData.districtSn ? this.nowData.districtSn : '']
  148. this.form = {
  149. name: this.nowData.name ? this.nowData.name : '',
  150. address: this.nowData.address ? this.nowData.address : '',
  151. provinceSn: this.nowData.provinceSn ? this.nowData.provinceSn : '',
  152. provinceName: this.nowData.provinceName ? this.nowData.provinceName : '',
  153. citySn: this.nowData.citySn ? this.nowData.citySn : '',
  154. cityName: this.nowData.cityName ? this.nowData.cityName : '',
  155. districtSn: this.nowData.districtSn ? this.nowData.districtSn : '',
  156. districtName: this.nowData.districtName ? this.nowData.districtName : '',
  157. erpWarehouseCode: this.nowData.erpWarehouseCode ? this.nowData.erpWarehouseCode : '', // ERP仓库编码
  158. addressInfo: addressVal
  159. }
  160. }
  161. },
  162. // 保存
  163. handleSave () {
  164. const _this = this
  165. this.$refs.ruleForm.validate(valid => {
  166. if (valid) {
  167. const params = {
  168. warehouseSn: this.itemSn ? this.itemSn : undefined
  169. }
  170. const newParams = Object.assign(this.form, params)
  171. delete newParams.addressInfo
  172. _this.spinning = true
  173. warehouseSave(newParams).then(res => {
  174. if (res.status == 200) {
  175. _this.$message.success(res.message)
  176. _this.$emit('ok')
  177. setTimeout(function () {
  178. _this.isShow = false
  179. _this.$refs.ruleForm.resetFields()
  180. _this.spinning = false
  181. }, 300)
  182. } else {
  183. _this.spinning = false
  184. }
  185. })
  186. } else {
  187. console.log('error submit!!')
  188. return false
  189. }
  190. })
  191. }
  192. },
  193. watch: {
  194. // 父页面传过来的弹框状态
  195. openModal (newValue, oldValue) {
  196. this.isShow = newValue
  197. },
  198. // 重定义的弹框状态
  199. isShow (newValue, oldValue) {
  200. if (!newValue) {
  201. this.$emit('close')
  202. } else {
  203. this.form = {
  204. name: '',
  205. address: '',
  206. addressInfo: undefined,
  207. provinceSn: undefined,
  208. provinceName: undefined,
  209. citySn: undefined,
  210. cityName: undefined,
  211. districtSn: undefined,
  212. districtName: undefined,
  213. erpWarehouseCode: undefined// ERP仓库编码
  214. }
  215. }
  216. },
  217. itemSn (newValue, oldValue) {
  218. if (this.isShow && newValue) {
  219. this.getDetail()
  220. }
  221. }
  222. }
  223. }
  224. </script>
  225. <style lang="less" scoped>
  226. .warehouseEdit-modal{
  227. .ant-modal-body {
  228. padding: 40px 40px 24px;
  229. }
  230. .btn-cont {
  231. text-align: center;
  232. margin: 35px 0 10px;
  233. }
  234. }
  235. </style>