basicInfoModal.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. <template>
  2. <a-modal
  3. centered
  4. class="promotionRules-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="新增"
  8. v-model="isShow"
  9. @cancle="isShow = false"
  10. width="80%">
  11. <a-form-model
  12. id="promotionRules-basicInfo-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol"
  18. >
  19. <a-form-model-item label="活动名称" prop="name" :label-col="{span: 4}">
  20. <a-input
  21. id="promotionRules-basicInfo-name"
  22. :maxLength="100"
  23. v-model.trim="form.name"
  24. placeholder="请输入活动名称(最多100个字符)"
  25. allowClear />
  26. </a-form-model-item>
  27. <a-row :gutter="15">
  28. <a-col span="12">
  29. <a-form-model-item label="活动时间" prop="activeDateEnable">
  30. <a-select
  31. id="promotionRules-basicInfo-activeDateEnable"
  32. placeholder="请选择"
  33. @change="handleChange('activeDateEnable')"
  34. v-model="form.activeDateEnable"
  35. style="width: 100%;">
  36. <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
  37. </a-select>
  38. </a-form-model-item>
  39. </a-col>
  40. <a-col span="12" v-if="form.activeDateEnable=='1'">
  41. <a-form-model-item prop="activeDate">
  42. <a-range-picker
  43. style="width:100%"
  44. id="promotionRules-basicInfo-activeDate"
  45. :disabledDate="disabledDate"
  46. v-model="form.activeDate"
  47. :format="dateFormat"
  48. :placeholder="['开始时间', '结束时间']" />
  49. </a-form-model-item>
  50. </a-col>
  51. </a-row>
  52. <a-row :gutter="15">
  53. <a-col span="12">
  54. <a-form-model-item label="参与客户" prop="buyerLimitEnable">
  55. <a-select
  56. id="promotionRules-basicInfo-buyerLimitEnable"
  57. placeholder="请选择"
  58. @change="handleChange('buyerLimitEnable')"
  59. v-model="form.buyerLimitEnable"
  60. style="width: 100%;">
  61. <a-select-option v-for="item in rangeCList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
  62. </a-select>
  63. </a-form-model-item>
  64. </a-col>
  65. <a-col span="12" v-if="form.buyerLimitEnable=='1'">
  66. <a-form-model-item prop="buyerSns">
  67. <a-button id="promotionRules-basicInfo-choose" type="primary" class="button-success" @click="openCustomerModal=true">选择</a-button>
  68. <span style="font-weight: bold;">当前已选:{{ chooseCust.length }}个</span>
  69. </a-form-model-item>
  70. </a-col>
  71. </a-row>
  72. <a-row :gutter="15">
  73. <a-col span="12">
  74. <a-form-model-item prop="activeAmountEnable">
  75. <template slot="label">
  76. <a-popover style="margin-top: 13px;">
  77. <template slot="content">即促销品的销售价总额不能高于限值,达到后活动不能参与。</template>
  78. <a-icon type="question-circle" theme="twoTone" />
  79. </a-popover>
  80. <span>活动经费上限</span>
  81. </template>
  82. <a-select
  83. id="promotionRules-basicInfo-activeAmountEnable"
  84. placeholder="请选择"
  85. @change="handleChange('activeAmountEnable')"
  86. v-model="form.activeAmountEnable"
  87. style="width: 100%;">
  88. <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
  89. </a-select>
  90. </a-form-model-item>
  91. </a-col>
  92. <a-col span="12" v-if="form.activeAmountEnable=='1'">
  93. <a-form-model-item prop="activeAmount">
  94. <a-input-number
  95. id="promotionRules-basicInfo-activeAmount"
  96. v-model="form.activeAmount"
  97. :min="1"
  98. :max="999999"
  99. :precision="2"
  100. style="width: 85%;margin-right: 5px;"
  101. placeholder="请输入活动经费上限(1~999999)"
  102. allowClear />
  103. <span>万元</span>
  104. </a-form-model-item>
  105. </a-col>
  106. </a-row>
  107. <a-row :gutter="15">
  108. <a-col span="12">
  109. <a-form-model-item prop="orderAmountEnable">
  110. <template slot="label">
  111. <a-popover style="margin-top: 13px;">
  112. <template slot="content">即限制每个采购单需达到下限金额才能参与促销。</template>
  113. <a-icon type="question-circle" theme="twoTone" />
  114. </a-popover>
  115. <span>订单起订金额</span>
  116. </template>
  117. <a-select
  118. id="promotionRules-basicInfo-orderAmountEnable"
  119. placeholder="请选择"
  120. @change="handleChange('orderAmountEnable')"
  121. v-model="form.orderAmountEnable"
  122. style="width: 100%;">
  123. <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
  124. </a-select>
  125. </a-form-model-item>
  126. </a-col>
  127. <a-col span="12" v-if="form.orderAmountEnable=='1'">
  128. <a-form-model-item prop="orderAmount">
  129. <a-input-number
  130. id="promotionRules-basicInfo-orderAmount"
  131. v-model="form.orderAmount"
  132. :min="1"
  133. :max="999999"
  134. :precision="2"
  135. style="width: 85%;margin-right: 5px;"
  136. placeholder="请输入订单起订金额(1~999999)"
  137. allowClear />
  138. <span>万元</span>
  139. </a-form-model-item>
  140. </a-col>
  141. </a-row>
  142. <a-form-model-item label="备注" prop="remark" :label-col="{span: 4}">
  143. <a-textarea
  144. id="promotionRules-basicInfo-remark"
  145. :maxLength="100"
  146. v-model.trim="form.remark"
  147. placeholder="请输入备注(最多100个字符)"
  148. allowClear />
  149. </a-form-model-item>
  150. </a-form-model>
  151. <div class="btn-cont">
  152. <a-button type="primary" id="promotionRules-basicInfo-modal-save" @click="handleSave">保存</a-button>
  153. <a-button id="promotionRules-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  154. </div>
  155. <!-- 选择参与客户 -->
  156. <choose-customer-modal :openModal="openCustomerModal" :chooseCust="chooseCust" @close="openCustomerModal=false" @ok="handleOk" />
  157. </a-modal>
  158. </template>
  159. <script>
  160. import moment from 'moment'
  161. import { VSelect } from '@/components'
  162. import chooseCustomerModal from './chooseCustomerModal'
  163. import { promoActiveSave, promoActiveDetail } from '@/api/promoActive'
  164. export default {
  165. name: 'StoreTransferOutBasicInfoModal',
  166. components: { VSelect, chooseCustomerModal },
  167. props: {
  168. openModal: {
  169. // 弹框显示状态
  170. type: Boolean,
  171. default: false
  172. },
  173. itemSn: {
  174. type: String || Number,
  175. default: ''
  176. }
  177. },
  178. data () {
  179. return {
  180. isShow: this.openModal, // 是否打开弹框
  181. formItemLayout: {
  182. labelCol: { span: 8 },
  183. wrapperCol: { span: 16 }
  184. },
  185. form: {
  186. name: '',
  187. activeDateEnable: '0', // 活动时间启用标记
  188. activeDate: [],
  189. activeDateStart: '', // 活动时间-开始
  190. activeDateEnd: '', // 活动时间-结束
  191. buyerLimitEnable: '0', // 参与客户启用标记
  192. buyerSns: '', // 部分客户
  193. activeAmountEnable: '0', // 活动经费启用标记
  194. activeAmount: '', // 活动经费上限
  195. orderAmountEnable: '0', // 起订金额启用标记
  196. orderAmount: '', // 订单起订金额
  197. remark: ''
  198. },
  199. rules: {
  200. name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  201. activeDateEnable: [{ required: true, message: '请选择是否限制活动时间', trigger: 'change' }],
  202. activeDate: [{ required: true, message: '请选择限制的活动时间', trigger: 'change' }],
  203. buyerLimitEnable: [{ required: true, message: '请选择是否限制参与客户', trigger: 'change' }],
  204. buyerSns: [{ required: true, message: '请选择参与客户', trigger: 'blur' }],
  205. activeAmountEnable: [{ required: true, message: '请选择是否限制活动经费', trigger: 'change' }],
  206. activeAmount: [{ required: true, message: '请输入活动经费上限', trigger: 'blur' }],
  207. orderAmountEnable: [{ required: true, message: '请选择是否限制起订金额', trigger: 'change' }],
  208. orderAmount: [{ required: true, message: '请输入订单起订金额', trigger: 'blur' }]
  209. },
  210. dateFormat: 'YYYY-MM-DD',
  211. rangeList: [ // 是否限制
  212. { name: '不限', val: '0' },
  213. { name: '限制', val: '1' }
  214. ],
  215. rangeCList: [ // 是否全部
  216. { name: '全部客户', val: '0' },
  217. { name: '部分客户', val: '1' }
  218. ],
  219. openCustomerModal: false,
  220. chooseCust: [] // 当前已选客户
  221. }
  222. },
  223. methods: {
  224. // 详情
  225. getDetail () {
  226. const _this = this
  227. promoActiveDetail({ sn: this.itemSn }).then(res => {
  228. if (res.status == 200) {
  229. const data = res.data
  230. this.form = Object.assign(this.form, data)
  231. if (data.activeDateStart) {
  232. this.form.activeDate[0] = moment(data.activeDateStart).format(this.dateFormat)
  233. }
  234. if (data.activeDateEnd) {
  235. this.form.activeDate[1] = moment(data.activeDateEnd).format(this.dateFormat)
  236. }
  237. this.chooseCust = []
  238. if (data.promoBuyerList && data.promoBuyerList.length > 0) {
  239. data.promoBuyerList.map(item => {
  240. _this.chooseCust.push(item.buyerSn)
  241. })
  242. }
  243. }
  244. })
  245. },
  246. // 保存
  247. handleSave () {
  248. const _this = this
  249. this.$refs.ruleForm.validate(valid => {
  250. if (valid) {
  251. const form = JSON.parse(JSON.stringify(_this.form))
  252. if (form.activeDate && form.activeDate.length > 0) {
  253. form.activeDateStart = moment(form.activeDate[0]).format(this.dateFormat)
  254. form.activeDateEnd = moment(form.activeDate[1]).format(this.dateFormat)
  255. } else {
  256. form.activeDateStart = undefined
  257. form.activeDateEnd = undefined
  258. }
  259. delete form.activeDate
  260. promoActiveSave(form).then(res => {
  261. if (res.status == 200) {
  262. _this.$message.success(res.message)
  263. setTimeout(() => {
  264. _this.isShow = false
  265. _this.$emit('ok', res.data)
  266. }, 1000)
  267. }
  268. })
  269. } else {
  270. console.log('error submit!!')
  271. return false
  272. }
  273. })
  274. },
  275. handleOk (obj) {
  276. this.chooseCust = obj
  277. // this.form.buyerSns = this.chooseCust.join(',')
  278. },
  279. // select change
  280. handleChange (val) {
  281. // 数据更改为不限时需重置之前所选数据
  282. if (val == 'activeDateEnable' && this.form.activeDateEnable == 0) { // 活动时间
  283. this.form.activeDate = []
  284. this.form.activeDateStart = ''
  285. this.form.activeDateEnd = ''
  286. } else if (val == 'buyerLimitEnable' && this.form.buyerLimitEnable == 0) { // 参与客户
  287. this.chooseCust = []
  288. this.form.buyerSns = ''
  289. } else if (val == 'activeAmountEnable' && this.form.activeAmountEnable == 0) { // 活动经费
  290. this.form.activeAmount = ''
  291. } else if (val == 'orderAmountEnable' && this.form.orderAmountEnable == 0) { // 起订金额
  292. this.form.orderAmount = ''
  293. }
  294. },
  295. // 不可选日期
  296. disabledDate (date, dateStrings) {
  297. return date && date.valueOf('day') < moment().subtract(1, 'day') // 今天以后,包含今天
  298. }
  299. },
  300. watch: {
  301. // 父页面传过来的弹框状态
  302. openModal (newValue, oldValue) {
  303. this.isShow = newValue
  304. },
  305. // 重定义的弹框状态
  306. isShow (newValue, oldValue) {
  307. if (!newValue) {
  308. this.$emit('close')
  309. this.$refs.ruleForm.resetFields()
  310. }
  311. },
  312. itemSn (newValue, oldValue) {
  313. if (this.isShow && newValue) {
  314. this.getDetail()
  315. }
  316. },
  317. chooseCust: {
  318. handler (newValue, oldValue) {
  319. if (this.isShow && newValue) {
  320. this.form.buyerSns = newValue.join(',')
  321. }
  322. },
  323. deep: true
  324. }
  325. }
  326. }
  327. </script>
  328. <style lang="less">
  329. .promotionRules-basicInfo-modal {
  330. .ant-modal-body {
  331. padding: 40px 40px 24px;
  332. }
  333. .btn-cont {
  334. text-align: center;
  335. margin: 35px 0 10px;
  336. }
  337. }
  338. </style>