edit.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. <template>
  2. <div class="promotionEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="promotionEdit-cont" >
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="promotionEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" />返回列表</a>
  8. <span v-if="pageType==='edit'" style="margin: 0 10px 0 20px;color: #666;font-size: 14px;font-weight: 600;">促销名称:{{ promotionName||'--' }}</span>
  9. </template>
  10. </a-page-header>
  11. <!-- 表单 -->
  12. <a-card :bordered="false" class="promotionEdit-cont">
  13. <a-form-model
  14. id="promotionEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-row>
  22. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  23. <a-form-model-item label="标题" prop="title" :label-col="{span:4}" :wrapper-col="{span:16}">
  24. <a-input
  25. id="promotionEdit-title"
  26. :maxLength="30"
  27. v-model.trim="form.title"
  28. placeholder="请输入标题名称(最多30个字符)"
  29. :disabled="isDisabled"
  30. allowClear/>
  31. </a-form-model-item>
  32. </a-col>
  33. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  34. <a-form-model-item label="排序" prop="sort" :label-col="{span:4}" :wrapper-col="{span:16}">
  35. <a-input-number
  36. style="width:100%"
  37. id="promotionEdit-sort"
  38. :disabled="isDisabled"
  39. allowClear
  40. placeholder="请输入排序数字(数字越大越靠后)"
  41. v-model="form.sort"
  42. :min="0"
  43. :max="999999"/>
  44. </a-form-model-item>
  45. </a-col>
  46. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  47. <a-form-model-item label="封面图片" prop="imageSet">
  48. <Upload
  49. v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
  50. class="upload"
  51. id="promotionEdit-imageSet"
  52. v-model="form.imageSet"
  53. ref="imageSet"
  54. :fileSize="10"
  55. :maxNums="10"
  56. @change="changeImage"
  57. listType="picture-card"></Upload>
  58. <div v-else>
  59. <img
  60. :src="con"
  61. alt="图片走丢了"
  62. width="80"
  63. height="80"
  64. v-for="(con,i) in imageSet"
  65. style="margin-right:10px;"
  66. :key="i" />
  67. </div>
  68. <span class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(420px)*高(230px)</span>
  69. </a-form-model-item>
  70. </a-col>
  71. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  72. <a-form-model-item label="内容类型" prop="contentType">
  73. <v-select
  74. v-model="form.contentType"
  75. id="promotion-saleStatus"
  76. code="PROMO_CONTENT_TYPE"
  77. showType="radio"
  78. :disabled="isDisabled"
  79. @change="changeContentType"
  80. allowClear></v-select>
  81. </a-form-model-item>
  82. </a-col>
  83. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  84. <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
  85. <editor
  86. v-show="pageType === 'add'||(pageType === 'edit'&&!isDisabled)"
  87. id="promotionEdit-editor"
  88. ref="editor"
  89. class="promotionEdit-editor"
  90. @on-change="editorChange"
  91. :cache="false"></editor>
  92. <div v-if="(pageType === 'edit')&&isDisabled" class="box" v-html="form.content"></div>
  93. </a-form-model-item>
  94. <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'">
  95. <Upload
  96. v-if="pageType==='add'||(pageType==='edit'&&!isDisabled)"
  97. class="upload"
  98. id="promotionEdit-imageSet"
  99. v-model="form.content"
  100. fileType="video/mp4"
  101. ref="videoSet"
  102. :fileSize="100"
  103. :maxNums="1"
  104. @change="changeVideo"
  105. ></Upload>
  106. <div v-else>
  107. <video
  108. ref="videoPlayer"
  109. width="230"
  110. height="150"
  111. controls
  112. loop
  113. controlsList="nodownload">
  114. <source :src="form.content" type="video/mp4">
  115. </video>
  116. </div>
  117. <span class="upload-desc">说明:文件最大100M;视频:mp4.avi.flv</span>
  118. </a-form-model-item>
  119. <a-form-model-item label="跳转链接" prop="contentLink" v-if="form.contentType =='LINK'">
  120. <a-input
  121. style="width:50%;"
  122. :disabled="form.linkType==='1'||(pageType==='edit'&&isDisabled)"
  123. id="promotionEdit-title"
  124. :maxLength="100"
  125. v-model.trim="form.contentLink"
  126. placeholder="请输入跳转链接"
  127. @blur="handleLink"
  128. allowClear />
  129. <a-select
  130. id="promotionEdit-title"
  131. :disabled="isDisabled"
  132. default-value="货架促销"
  133. @change="handleLinkType"
  134. style="width: 120px;margin-left:10px;"
  135. v-model="form.linkType">
  136. <a-select-option value="1">
  137. 货架促销
  138. </a-select-option>
  139. <a-select-option value="2">
  140. 其他
  141. </a-select-option>
  142. </a-select>
  143. <span class="tip upload-desc">
  144. 选择【货架促销】,促销内容会同步显示在促销模块内
  145. </span>
  146. </a-form-model-item>
  147. </a-col>
  148. </a-row>
  149. </a-form-model>
  150. <a-form-model
  151. id="setPromotion-form"
  152. ref="sellRuleForm"
  153. :model="sellForm"
  154. :rules="sellRules"
  155. class="setPromotion-form"
  156. :label-col="sellFormItemLayout.labelCol"
  157. :wrapper-col="sellFormItemLayout.wrapperCol">
  158. <a-row v-if="form.contentType ==='LINK'&&form.linkType==='1'">
  159. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  160. <a-form-model-item label="基本规则" prop="ruleType">
  161. <v-select
  162. style="width:40%;"
  163. v-model="sellForm.ruleType"
  164. placeholder="请选择基本规则"
  165. id="promotionEdit-ruleType"
  166. code="PROMO_ACTIVE_RULE_TYPE"
  167. :disabled="isDisabled"
  168. allowClear></v-select>
  169. </a-form-model-item>
  170. </a-col>
  171. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  172. <a-form-model-item label="券名称" :label-col="{span:4}" :wrapper-col="{span:16}" prop="ruleName">
  173. <a-input
  174. :disabled="isDisabled"
  175. id="promotionEdit-ruleName"
  176. :maxLength="20"
  177. v-model.trim="sellForm.ruleName"
  178. placeholder="请输入券名称(最多20个字符)"
  179. allowClear />
  180. </a-form-model-item>
  181. </a-col>
  182. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  183. <a-form-model-item label="券副标题" :label-col="{span:4}" :wrapper-col="{span:16}">
  184. <a-input
  185. :disabled="isDisabled"
  186. id="promotionEdit-ruleTitle"
  187. :maxLength="20"
  188. v-model.trim="sellForm.ruleTitle"
  189. placeholder="请输入券副标题(最多20个字符)"
  190. allowClear />
  191. </a-form-model-item>
  192. </a-col>
  193. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  194. <a-form-model-item label="生成方式" prop="ruleBaseType">
  195. <!-- showType="radio" -->
  196. <v-select
  197. style="width:40%;"
  198. v-model="sellForm.ruleBaseType"
  199. id="promotionEdit-ruleBaseType"
  200. code="PROMO_RULE_BASE_TYPE"
  201. :disabled="isDisabled"
  202. allowClear></v-select>
  203. </a-form-model-item>
  204. </a-col>
  205. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  206. <a-form-model-item label="券有效期" prop="validType">
  207. <v-select
  208. style="width:40%;"
  209. v-model="sellForm.validType"
  210. placeholder="请选择券有效期"
  211. id="promotionEdit-validType"
  212. code="PROMO_RULE_TICKET_TYPE"
  213. :disabled="isDisabled"
  214. allowClear></v-select>
  215. <a-range-picker
  216. v-show="sellForm.validType==='FIXED'"
  217. style="width:40%;margin-left:10px;"
  218. v-model="time"
  219. :format="dateFormat"
  220. @change="dateChange"
  221. :disabled="isDisabled"
  222. :disabled-date="disabledDate"
  223. :placeholder="['开始时间', '结束时间']" />
  224. <span style="width:40%;margin-left:10px;" v-show="sellForm.validType==='LIMIT'">
  225. 领取后,立即生效,有效期<a-input-number
  226. style="margin:0 5px;"
  227. v-model="sellForm.validDays"
  228. :step="1"
  229. :max="99999999"
  230. :min="1"
  231. :disabled="isDisabled"
  232. :precision="0"/>天
  233. </span>
  234. </a-form-model-item>
  235. </a-col>
  236. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  237. <a-form-model-item class="productName" label="券适用范围" prop="range">
  238. 全部产品
  239. </a-form-model-item>
  240. </a-col>
  241. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  242. <a-form-model-item label="使用说明" prop="ruleExplain">
  243. <a-input
  244. v-model="sellForm.ruleExplain"
  245. :disabled="isDisabled"
  246. type="textarea"
  247. placeholder="请输入使用说明(最多50个字符)"
  248. :maxLength="200" />
  249. </a-form-model-item>
  250. </a-col>
  251. <div style="text-align:center;" v-if="!isShowNextStep"><a-button type="primary" size="large" :disabled="isDisabled" @click="handleSave('part')" >保存后设置产品</a-button></div>
  252. </a-row>
  253. <a-row v-if="form.contentType =='LINK'&&isShowNextStep">
  254. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  255. <a-form-model-item label="产品范围">
  256. <div id="setPromotion-productRange" style="position:relative;">
  257. <a-tree-select
  258. v-model="sellForm.productRangeList"
  259. :maxTagCount="12"
  260. :tree-data="productTypeList"
  261. tree-checkable
  262. :disabled="isDisabled"
  263. :getPopupContainer="triggerNode => triggerNode.parentNode"
  264. :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
  265. @blur="onChangeTree"
  266. placeholder="请选择产品范围" />
  267. </div>
  268. </a-form-model-item>
  269. </a-col>
  270. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  271. <a-form-model-item label="返券产品">
  272. <div class="productInfo flex-center">
  273. <div>
  274. 返券金额<a-input-number
  275. v-model="sellForm.ruleValue"
  276. style="margin:0 5px;"
  277. :min="1"
  278. :step="1"
  279. :precision="2"
  280. :max="99999999"
  281. size="small"/> 元
  282. <a-button type="primary" class="button-primary" size="small" @click="handleBatchAdd">批量添加</a-button>
  283. </div>
  284. <a-button type="primary" :disabled="sellForm.productRangeList&&sellForm.productRangeList.length>0" @click="handleAddProduct" size="small">添加产品</a-button>
  285. </div>
  286. </a-form-model-item>
  287. </a-col>
  288. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  289. <div style="width: 83%;margin:0 auto 10px;">
  290. <productTable ref="chooseProduct" :promoActiveSn="$route.params.sn"></productTable>
  291. </div>
  292. </a-col>
  293. </a-row>
  294. </a-form-model>
  295. </a-card>
  296. </a-spin>
  297. <!-- v-if="form.contentType !='LINK'||isShowNextStep" -->
  298. <div class="affix-cont">
  299. <a-button
  300. type="primary"
  301. class="button-primary"
  302. :disabled="spinning"
  303. id="productInfoEdit-submit-btn"
  304. size="large"
  305. @click="handleSave('all')"
  306. v-if="form.contentType !='LINK'|| isShowNextStep ||(form.contentType ==='LINK'&&form.linkType ==='2')"
  307. style="padding: 0 60px;">保存</a-button>
  308. </div>
  309. <!-- 预览 -->
  310. <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
  311. <!-- 添加产品 -->
  312. <chooseProduct
  313. ref="chooseProduct"
  314. :chooseType="chooseTypeList"
  315. :openModal="showProModal"
  316. @ok="addProductSuccess"
  317. @close="closeProductModal"></chooseProduct>
  318. </div>
  319. </template>
  320. <script>
  321. import { commonMixin } from '@/utils/mixin'
  322. import moment from 'moment'
  323. import { VSelect, Upload } from '@/components'
  324. import Editor from '@/components/WEeditor'
  325. import promotionShowModal from './promotionShowModal'
  326. import productTable from './productTable'
  327. import chooseProduct from './chooseProductsModal.vue'
  328. import { productTypeQuery } from '@/api/productType'
  329. import { promoActivePublish, promoActiveDetail, saveBatchEntity, promoCreateBatch, deleteByProductType } from '@/api/promoActive'
  330. export default {
  331. name: 'ProductBrandEditModal',
  332. mixins: [commonMixin],
  333. components: { VSelect, Upload, Editor, promotionShowModal, chooseProduct, productTable },
  334. data () {
  335. return {
  336. spinning: false,
  337. formItemLayout: {
  338. labelCol: { span: 2 },
  339. wrapperCol: { span: 20 }
  340. },
  341. sellFormItemLayout: {
  342. labelCol: { span: 2 }, // 文字前距离设置
  343. wrapperCol: { span: 20 }// 表单后距离设置 数字越大距离越小
  344. },
  345. form: {
  346. promoActiveSn: undefined, // 促销活动sn
  347. title: '', // 标题
  348. imageSet: '', // 图片
  349. contentType: 'IMAGE_CONTENT', // 内容类型
  350. content: '', // 内容
  351. contentLink: '', // 链接内容
  352. sort: undefined, // 排序
  353. ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
  354. publishFlag: '0',
  355. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  356. promoRule: {},
  357. publishState: 'UNPUBLISH'
  358. },
  359. // 参数配置数据
  360. sellForm: {
  361. ruleType: 'ticket', // 基本规则类型
  362. productRangeFlag: '', // 产品范围标记 0无 1有产品范围
  363. productRangeList: [], // 产品范围列表
  364. ruleName: '', // 券名称
  365. ruleTitle: '', // 副标题
  366. ruleBaseType: 'category', // 券生成方式
  367. ruleExplain: '', // 使用说明
  368. validType: undefined, // 券有效期类型
  369. validStartDate: undefined, // 券生效时间
  370. validEndDate: undefined, // 券失效时间
  371. validDays: undefined, // 券有效期天数
  372. range: '1'
  373. },
  374. time: [], // 有效期
  375. promotionName: '',
  376. dateFormat: 'YYYY-MM-DD',
  377. pageType: undefined, // 页面类型
  378. showProModal: false,
  379. isShowNextStep: false, // 是否显示下一步 配置产品
  380. openShowModal: false,
  381. isDisabled: false, // 控制是否能编辑
  382. chooseTypeList: [],
  383. chooseProductList: [],
  384. imageSet: [], // 回显显示图片数据
  385. productTypeList: [],
  386. rules: {
  387. title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
  388. imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
  389. sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
  390. contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
  391. content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
  392. contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
  393. publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }]
  394. },
  395. sellRules: {
  396. ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
  397. ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
  398. ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
  399. validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
  400. ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }],
  401. range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }]
  402. }
  403. }
  404. },
  405. methods: {
  406. // 禁用日期时间
  407. disabledDate (current) {
  408. return current && current < moment().startOf('day')
  409. },
  410. dateChange (date, dateString) {
  411. this.time = date
  412. if (dateString[0] != '' && dateString[1] != '') {
  413. this.sellForm.validStartDate = dateString[0] + ' 00:00:00'
  414. this.sellForm.validEndDate = dateString[1] + ' 23:59:59'
  415. }
  416. },
  417. // 打开产品弹窗
  418. insterProduct (obj) {
  419. if (obj && Object.keys(obj).length > 0) {
  420. this.chooseTypeList = obj.typeArr
  421. this.chooseDataList = obj.productArr
  422. this.chooseProductList = obj.chooseProductArr
  423. }
  424. this.showProModal = true
  425. },
  426. closeProductModal () {
  427. this.showProModal = false
  428. },
  429. // 返回列表
  430. handleBack () {
  431. this.$router.push({ name: 'promotionInfoList', query: { closeLastOldTab: true } })
  432. },
  433. // 详情 挨个赋值原因:该接口和修理厂促销列表详情用的同一个接口,给后端传值过滤多余参数
  434. getDetail () {
  435. const _this = this
  436. promoActiveDetail({ sn: this.$route.params.sn }).then(res => {
  437. if (res.status == 200) {
  438. // 编辑按钮时,publishState 已发布,只能编辑是否发布;publishState已关闭,都可以编辑
  439. if (_this.pageType === 'edit') {
  440. _this.isDisabled = true
  441. _this.form.publishFlag = res.data.publishFlag
  442. }
  443. _this.form.promoActiveSn = res.data.promoActiveSn
  444. _this.form.title = res.data.title
  445. _this.form.contentType = res.data.contentType
  446. _this.form.sort = res.data.sort
  447. _this.form.imageSet = res.data.images
  448. if (res.data.images) {
  449. const images = res.data.images.split(',')
  450. _this.imageSet = images
  451. if (this.pageType === 'add') {
  452. _this.$refs.imageSet.setFileList(images)
  453. }
  454. }
  455. _this.form.content = res.data.content
  456. _this.promotionName = res.data.name || ''
  457. _this.form.dealerEditFlag = res.data.dealerEditFlag
  458. if (res.data.contentType == 'IMAGE_CONTENT') {
  459. _this.$refs.editor.setHtml(res.data.content)
  460. } else if (res.data.contentType == 'VIDEO') {
  461. if (res.data.publishState != 'PUBLISH') {
  462. _this.$refs.videoSet.setFileList(res.data.content)
  463. }
  464. } else if (res.data.contentType == 'LINK') {
  465. _this.form.contentLink = res.data.content
  466. _this.form.linkType = '1'
  467. if (res.data.promoRule) {
  468. _this.isShowNextStep = true
  469. _this.sellForm.range = '1'
  470. _this.time = [res.data.promoRule.validStartDate, res.data.promoRule.validEndDate]
  471. if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.productRangeList.length > 0) {
  472. _this.sellForm.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
  473. }
  474. _this.sellForm = res.data.promoRule
  475. }
  476. }
  477. }
  478. })
  479. },
  480. // 确定保存
  481. handleSave (type) {
  482. this.$message.success('保存成功')
  483. this.$nextTick(() => {
  484. this.handleBack()
  485. this.resetSearchForm()
  486. })
  487. },
  488. // 图片上传
  489. changeImage (file) {
  490. this.form.imageSet = file
  491. },
  492. // 视频上传
  493. changeVideo (file) {
  494. this.form.content = file
  495. },
  496. // 文本编辑器
  497. editorChange (html, text) {
  498. this.form.content = html
  499. },
  500. // 重置
  501. resetSearchForm () {
  502. if (this.pageType == 'add' || (this.pageType == 'edit' && !this.isDisabled)) {
  503. if (this.$refs.imageSet) {
  504. this.$refs.imageSet.setFileList('')
  505. }
  506. if (this.$refs.videoSet) {
  507. this.$refs.videoSet.setFileList('')
  508. }
  509. }
  510. if (this.$refs.editor) {
  511. this.$refs.editor.setHtml('')
  512. }
  513. this.form = {
  514. promoActiveSn: undefined, // 促销活动sn
  515. title: '', // 标题
  516. imageSet: '', // 图片
  517. contentType: 'IMAGE_CONTENT', // 内容类型
  518. content: '', // 内容
  519. contentLink: '', // 链接内容
  520. sort: undefined, // 排序
  521. ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
  522. publishState: 'UNPUBLISH', // 是否发布
  523. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  524. // 参数配置数据
  525. promoRule: {
  526. ruleType: 'ticket', // 基本规则类型
  527. productRangeFlag: '', // 产品范围标记 0无 1有产品范围
  528. productRangeList: [], // 产品范围列表
  529. ruleName: '', // 券名称
  530. ruleTitle: '', // 副标题
  531. ruleBaseType: 'category', // 券生成方式
  532. ruleExplain: '', // 使用说明
  533. validType: undefined, // 券有效期类型
  534. validStartDate: undefined, // 券生效时间
  535. validEndDate: undefined, // 券失效时间
  536. validDays: undefined, // 券有效期天数
  537. // 券内容
  538. ruleDetailList: []
  539. }
  540. }
  541. this.isShowNextStep = false
  542. this.isDisabled = false
  543. if (this.$refs.setContent) {
  544. this.$refs.setContent.clearContent()
  545. }
  546. if (this.$refs.ruleForm) {
  547. this.$refs.ruleForm.resetFields()
  548. }
  549. },
  550. // 获取产品范围数据
  551. getTreeData () {
  552. productTypeQuery({}).then(res => {
  553. if (res.status == 200) {
  554. this.productTypeList = res.data
  555. } else {
  556. this.productTypeList = []
  557. }
  558. })
  559. },
  560. // 选择内容类型
  561. changeContentType (e) {
  562. if (e === 'LINK') {
  563. this.form.linkType = '1'
  564. this.form.contentLink = '/pagesB/promoDetail'
  565. this.form.content = '/pagesB/promoDetail'
  566. } else {
  567. this.form.linkType = undefined
  568. this.form.contentLink = ''
  569. this.form.content = ''
  570. }
  571. this.form.contentType = e
  572. },
  573. // 填入link内容
  574. handleLink (con) {
  575. if (!con.target.value || con.target.value != '/pagesB/promoDetail') {
  576. this.form.linkType = '2'
  577. } else {
  578. this.form.linkType = '1'
  579. }
  580. this.form.contentLink = con.target.value
  581. },
  582. // 选择货架促销填入默认值
  583. handleLinkType (val) {
  584. this.form.contentLink = val === '2' ? '' : '/pagesB/promoDetail'
  585. },
  586. // 添加产品
  587. handleAddProduct () {
  588. this.chooseTypeList = this.sellForm.productRangeList
  589. this.showProModal = true
  590. },
  591. // 批量添加
  592. handleBatchAdd () {
  593. if (!this.sellForm.ruleValue) {
  594. this.$message.warning('请输入返券金额!')
  595. return
  596. }
  597. this.$refs.chooseProduct.editMorePrice(this.sellForm.ruleValue)
  598. },
  599. // 添加产品成功
  600. addProductSuccess (list) {
  601. const productArr = list.map(item => {
  602. return {
  603. promoActiveSn: this.$route.params.sn,
  604. promoRuleSn: this.sellForm.promoRuleSn,
  605. productCode: item.code,
  606. productSn: item.productSn,
  607. ruleValue: this.sellForm.ruleValue,
  608. price: item.terminalPrice
  609. }
  610. })
  611. promoCreateBatch(productArr).then(res => {
  612. if (res.status == 200) {
  613. this.showProModal = false
  614. // 获取产品列表 有分页
  615. this.$refs.chooseProduct.pageInit()
  616. }
  617. })
  618. this.$refs.setContent.setProductSn(productArr)
  619. },
  620. onChangeTree (e) {
  621. s
  622. deleteByProductType({ promoActiveSn: this.$route.params.sn, productTypeSnList: this.sellForm.productRangeList || [] }).then(res => {
  623. if (res.status == 200) {
  624. this.$refs.chooseProduct.pageInit()
  625. }
  626. })
  627. // 保存产品范围
  628. saveBatchEntity({ list: this.sellForm.productRangeList, promoActiveSn: this.$route.params.sn }).then(res => {
  629. if (res.status == 200) {
  630. console.log('保存产品范围成功')
  631. }
  632. })
  633. },
  634. pageInit () {
  635. this.pageType = this.$route.params.pageType
  636. if (this.pageType === 'edit') {
  637. this.getDetail()
  638. }
  639. console.log('加载产品范围')
  640. this.$nextTick(() => {
  641. this.getTreeData()
  642. })
  643. }
  644. },
  645. mounted () {
  646. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  647. this.pageInit()
  648. }
  649. },
  650. activated () {
  651. // 如果是新页签打开,则重置当前页面
  652. if (this.$store.state.app.isNewTab) {
  653. this.pageInit()
  654. }
  655. // 仅刷新列表,不重置页面
  656. if (this.$store.state.app.updateList) {
  657. this.pageInit()
  658. }
  659. },
  660. beforeRouteEnter (to, from, next) {
  661. next(vm => {})
  662. }
  663. }
  664. </script>
  665. <style lang="less" scoped>
  666. .promotionEdit-wrap{
  667. position: relative;
  668. height: 100%;
  669. padding-bottom:51px;
  670. box-sizing: border-box;
  671. >.ant-spin-nested-loading{
  672. overflow-y: scroll;
  673. height: 100%;
  674. }
  675. /deep/.ant-form-item{
  676. margin-bottom:8px;
  677. }
  678. .promotionEdit-cont{
  679. margin-bottom: 10px;
  680. }
  681. .upload{
  682. width: 100%!important;
  683. }
  684. // 文本编辑器 工具栏样式换行
  685. .promotionEdit-editor{
  686. .w-e-toolbar{
  687. flex-wrap: wrap;
  688. z-index: 0;
  689. }
  690. }
  691. // 商品图片描述
  692. .upload-desc{
  693. font-size: 12px;
  694. color: #808695;
  695. }
  696. #promotionEdit-attachList{
  697. height: auto;
  698. }
  699. .box{
  700. border:1px solid #d9d9d9;
  701. border-radius:4px;
  702. padding:4px 11px;
  703. color:rgba(0, 0, 0, 0.25);
  704. cursor: not-allowed;
  705. background:#fdfdfd;
  706. }
  707. .affix{
  708. .ant-affix{
  709. z-index: 101;
  710. display:inline-block
  711. }
  712. }
  713. /deep/.ant-radio-disabled + span{
  714. color:#000!important;
  715. }
  716. .tip{
  717. margin-left:10px;
  718. }
  719. .productInfo{
  720. display:flex;
  721. align-items:center;
  722. justify-content: space-between;
  723. }
  724. #setPromotion-productRange{
  725. /deep/.ant-select-dropdown{
  726. max-height:30vh !important;
  727. }
  728. }
  729. }
  730. </style>