basicInfoModal.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <a-modal
  3. centered
  4. class="allocateBill-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="allocateBill-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="调往对象" prop="targetType">
  21. <a-radio-group v-model="form.targetType" @change="targetTypeChange">
  22. <a-radio v-for="(item,index) in targetTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  23. </a-radio-group>
  24. </a-form-model-item>
  25. <a-form-model-item label="调往对象名称" :prop="isDealer ? 'targetSn' : 'targetName'">
  26. <a-select
  27. v-if="isDealer"
  28. show-search
  29. id="allocateBill-basicInfo-dealerName"
  30. v-model="form.targetSn"
  31. placeholder="请选择"
  32. :filter-option="false"
  33. :not-found-content="fetching ? undefined : null"
  34. @search="fetchUser"
  35. @change="handleChange"
  36. >
  37. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  38. <a-select-option v-for="item in dealerData" :key="item.dealerSn" :value="item.dealerSn">{{ item.dealerName }}</a-select-option>
  39. </a-select>
  40. <a-input v-if="!isDealer" v-model.trim="form.targetName" placeholder="请输入调往对象名称(最多30个字符)" allowClear :maxLength="30" />
  41. </a-form-model-item>
  42. <a-form-model-item label="调拨类型" prop="allocateTypeSn">
  43. <a-select id="allocateBill-basicInfo-allocateTypeSn" v-model="form.allocateTypeSn" placeholder="请选择调拨类型" allowClear >
  44. <a-select-option v-for="item in allocateTypeList" :key="item.allocateTypeSn" :value="item.allocateTypeSn">{{ item.name }}</a-select-option>
  45. </a-select>
  46. </a-form-model-item>
  47. <a-form-model-item label="起止时间" prop="time">
  48. <a-range-picker
  49. style="width:100%"
  50. v-model="form.time"
  51. show-time
  52. :format="dateFormat"
  53. @change="dateChange"
  54. @calendarChange="dateCalendarChange"
  55. :placeholder="['开始时间', '结束时间']" />
  56. </a-form-model-item>
  57. <a-form-model-item label="备注" prop="remark">
  58. <a-textarea id="allocateBill-basicInfo-remark" :maxLength="120" v-model="form.remark" placeholder="请输入备注(最多120个字符)" allowClear />
  59. </a-form-model-item>
  60. </a-form-model>
  61. <div class="btn-cont">
  62. <a-button type="primary" id="allocateBill-basicInfo-modal-save" @click="handleSave">保存</a-button>
  63. <a-button id="allocateBill-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  64. </div>
  65. </a-spin>
  66. </a-modal>
  67. </template>
  68. <script>
  69. import moment from 'moment'
  70. import debounce from 'lodash/debounce'
  71. import { VSelect } from '@/components'
  72. import { allocateBillSave } from '@/api/allocateBill'
  73. import { dealerSubareaScopeList } from '@/api/dealer'
  74. import { getLookUpData } from '@/api/data'
  75. import { allocateTypeAllList } from '@/api/allocateType'
  76. export default {
  77. name: 'StoreTransferOutBasicInfoModal',
  78. components: { VSelect },
  79. props: {
  80. openModal: {
  81. // 弹框显示状态
  82. type: Boolean,
  83. default: false
  84. }
  85. },
  86. data () {
  87. this.fetchUser = debounce(this.fetchUser, 800)
  88. return {
  89. isShow: this.openModal, // 是否打开弹框
  90. spinning: false,
  91. formItemLayout: {
  92. labelCol: { span: 4 },
  93. wrapperCol: { span: 20 }
  94. },
  95. form: {
  96. targetType: 'DEALER',
  97. targetSn: undefined,
  98. targetName: '',
  99. allocateTypeSn: undefined,
  100. time: [],
  101. promoStartDate: '',
  102. promoEndDate: '',
  103. remark: ''
  104. },
  105. rules: {
  106. targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  107. targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  108. targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }],
  109. allocateTypeSn: [{ required: true, message: '请选择调拨类型', trigger: 'change' }]
  110. },
  111. fetching: false,
  112. dealerData: [], // 经销商 下拉数据
  113. targetTypeList: [], // 调往对象类型
  114. allocateTypeList: [], // 调拨类型
  115. dateFormat: 'YYYY-MM-DD HH:mm:ss',
  116. selectPriceDate: ''
  117. }
  118. },
  119. computed: {
  120. // 当前所选调往对象是否为经销商
  121. isDealer () {
  122. return this.form.targetType == 'DEALER'
  123. }
  124. },
  125. methods: {
  126. // 不可选日期
  127. disabledDate (current) {
  128. // 可选今天以后的时间(包含今天),所选时间跨度最多可为一年
  129. const minYearVs = moment().subtract(1, 'day') // 今天以后,包含今天
  130. // // 限制最多只能查一年区间的数据
  131. if (this.selectPriceDate) {
  132. const maxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').add(1, 'years') // 当前选中开始日期后推一年
  133. return current && current < minYearVs || current && current > maxYearVs
  134. } else {
  135. return current && current < minYearVs
  136. }
  137. },
  138. // 日期 change
  139. dateChange (date, dateStrings) {
  140. this.selectPriceDate = ''
  141. this.form.time = dateStrings
  142. this.form.promoStartDate = dateStrings[0] || ''
  143. this.form.promoEndDate = dateStrings[1] || ''
  144. },
  145. dateCalendarChange (date, dateStrings) {
  146. this.selectPriceDate = date[0]
  147. },
  148. // 搜索经销商
  149. fetchUser (value) {
  150. console.log('fetching user', value)
  151. this.fetching = true
  152. dealerSubareaScopeList({ nameLike: value, pageNo: 1, pageSize: 20 }).then(res => {
  153. if (res.status == 200) {
  154. this.dealerData = res.data && res.data.list ? res.data.list : []
  155. this.fetching = false
  156. } else {
  157. this.dealerData = []
  158. this.fetching = false
  159. }
  160. })
  161. },
  162. // 调往对象名称 change
  163. handleChange (value) {
  164. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  165. this.form.targetName = this.dealerData[ind].dealerName
  166. },
  167. // 保存
  168. handleSave () {
  169. const _this = this
  170. this.$refs.ruleForm.validate(valid => {
  171. if (valid) {
  172. const form = JSON.parse(JSON.stringify(_this.form))
  173. _this.spinning = true
  174. allocateBillSave(form).then(res => {
  175. if (res.status == 200) {
  176. _this.$message.success(res.message)
  177. setTimeout(() => {
  178. _this.isShow = false
  179. _this.$emit('ok', res.data)
  180. _this.spinning = false
  181. }, 1000)
  182. } else {
  183. _this.spinning = false
  184. }
  185. })
  186. } else {
  187. console.log('error submit!!')
  188. return false
  189. }
  190. })
  191. },
  192. // 调往对象 change
  193. targetTypeChange (e) {
  194. this.$refs.ruleForm.resetFields()
  195. this.form.targetSn = undefined
  196. this.form.targetName = ''
  197. this.form.targetType = e.target.value
  198. },
  199. // 调往对象类型
  200. getTargetTypeList () {
  201. const _this = this
  202. getLookUpData({
  203. pageNo: 1,
  204. pageSize: 1000,
  205. lookupCode: 'TARGET_TYPE'
  206. }).then(res => {
  207. if (res.status == 200) {
  208. _this.targetTypeList = res.data.list
  209. } else {
  210. _this.targetTypeList = []
  211. }
  212. })
  213. },
  214. // 调拨类型
  215. getAllocateTypeAllList () {
  216. allocateTypeAllList().then(res => {
  217. if (res.status == 200) {
  218. this.allocateTypeList = res.data
  219. } else {
  220. this.allocateTypeList = []
  221. }
  222. })
  223. }
  224. },
  225. watch: {
  226. // 父页面传过来的弹框状态
  227. openModal (newValue, oldValue) {
  228. this.isShow = newValue
  229. },
  230. // 重定义的弹框状态
  231. isShow (newValue, oldValue) {
  232. if (!newValue) {
  233. this.$emit('close')
  234. this.$refs.ruleForm.resetFields()
  235. } else {
  236. this.getTargetTypeList()
  237. this.getAllocateTypeAllList()
  238. }
  239. }
  240. }
  241. }
  242. </script>
  243. <style lang="less">
  244. .allocateBill-basicInfo-modal {
  245. .ant-modal-body {
  246. padding: 40px 40px 24px;
  247. }
  248. .btn-cont {
  249. text-align: center;
  250. margin: 35px 0 10px;
  251. }
  252. }
  253. </style>