edit.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842
  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="1"
  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;object-fit: cover;"
  66. :key="i" />
  67. </div>
  68. <span class="upload-desc">说明:单张大小小于10Mb;建议尺寸:宽(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-row v-if="form.contentType !='LINK' ||(form.contentType ==='LINK'&&form.linkType==='2') ">
  150. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  151. <a-form-model-item label="是否发布" prop="publishFlag">
  152. <a-radio-group button-style="solid" v-model="form.publishFlag">
  153. <a-radio-button value="1">
  154. </a-radio-button>
  155. <a-radio-button value="0">
  156. </a-radio-button>
  157. </a-radio-group>
  158. </a-form-model-item>
  159. </a-col>
  160. </a-row>
  161. <a-row v-if="form.contentType ==='LINK'&&form.linkType==='1'">
  162. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  163. <a-form-model-item label="基本规则" prop="promoRule.ruleType">
  164. <v-select
  165. style="width:40%;"
  166. v-model="form.promoRule.ruleType"
  167. placeholder="请选择基本规则"
  168. id="promotionEdit-ruleType"
  169. code="PROMO_ACTIVE_RULE_TYPE"
  170. :disabled="isDisabled"
  171. allowClear></v-select>
  172. </a-form-model-item>
  173. </a-col>
  174. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  175. <a-form-model-item label="券名称" :label-col="{span:4}" :wrapper-col="{span:16}" prop="promoRule.ruleName">
  176. <a-input
  177. :disabled="isDisabled"
  178. id="promotionEdit-ruleName"
  179. :maxLength="20"
  180. v-model.trim="form.promoRule.ruleName"
  181. placeholder="请输入券名称(最多20个字符)"
  182. allowClear />
  183. </a-form-model-item>
  184. </a-col>
  185. <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
  186. <a-form-model-item label="券副标题" :label-col="{span:4}" :wrapper-col="{span:16}">
  187. <a-input
  188. :disabled="isDisabled"
  189. id="promotionEdit-ruleTitle"
  190. :maxLength="20"
  191. v-model.trim="form.promoRule.ruleTitle"
  192. placeholder="请输入券副标题(最多20个字符)"
  193. allowClear />
  194. </a-form-model-item>
  195. </a-col>
  196. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  197. <a-form-model-item label="生成方式" prop="promoRule.ruleBaseType">
  198. <v-select
  199. style="width:40%;"
  200. v-model="form.promoRule.ruleBaseType"
  201. id="promotionEdit-ruleBaseType"
  202. code="PROMO_RULE_BASE_TYPE"
  203. :disabled="isDisabled"
  204. allowClear></v-select>
  205. </a-form-model-item>
  206. </a-col>
  207. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  208. <a-form-model-item label="券有效期" prop="promoRule.validType">
  209. <v-select
  210. style="width:40%;"
  211. v-model="form.promoRule.validType"
  212. placeholder="请选择券有效期"
  213. id="promotionEdit-validType"
  214. code="PROMO_RULE_TICKET_TYPE"
  215. :disabled="isDisabled"
  216. @change="handleValidType"
  217. allowClear></v-select>
  218. <a-range-picker
  219. v-show="form.promoRule.validType==='FIXED'"
  220. style="width:40%;margin-left:10px;"
  221. v-model="time"
  222. :format="dateFormat"
  223. @change="dateChange"
  224. :disabled="isDisabled"
  225. :disabled-date="disabledDate"
  226. :placeholder="['开始时间', '结束时间']" />
  227. <span style="width:40%;margin-left:10px;" v-show="form.promoRule.validType==='LIMIT'">
  228. 有效期<a-input-number
  229. style="margin:0 5px;"
  230. v-model="form.promoRule.validDays"
  231. :step="1"
  232. :max="99999999"
  233. :min="1"
  234. :disabled="isDisabled"
  235. :precision="0"/>天
  236. </span>
  237. </a-form-model-item>
  238. </a-col>
  239. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  240. <a-form-model-item class="productName" label="券适用范围" prop="promoRule.range">
  241. 全部产品
  242. </a-form-model-item>
  243. </a-col>
  244. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  245. <a-form-model-item label="使用说明" prop="promoRule.ruleExplain">
  246. <a-input
  247. v-model="form.promoRule.ruleExplain"
  248. :disabled="isDisabled"
  249. type="textarea"
  250. placeholder="请输入使用说明(最多50个字符)"
  251. :maxLength="50" />
  252. </a-form-model-item>
  253. </a-col>
  254. <div style="text-align:center;" v-if="!isShowNextStep"><a-button type="primary" size="large" :disabled="isDisabled" @click="handleSave('part')" >保存后设置产品</a-button></div>
  255. <div v-if="form.contentType =='LINK'&&isShowNextStep">
  256. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  257. <a-form-model-item label="产品范围">
  258. <div id="setPromotion-productRange" style="position:relative;">
  259. <a-tree-select
  260. v-model="productRangeList"
  261. :maxTagCount="12"
  262. :tree-data="productTypeList"
  263. tree-checkable
  264. :disabled="isDisabled"
  265. :getPopupContainer="triggerNode => triggerNode.parentNode"
  266. :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
  267. @change="onChangeTree"
  268. placeholder="请选择产品范围" />
  269. </div>
  270. </a-form-model-item>
  271. </a-col>
  272. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  273. <a-form-model-item label="返券产品" prop="promoRule.range">
  274. <div class="productInfo flex-center">
  275. <div>
  276. 返券金额<a-input-number
  277. v-model="form.promoRule.ruleValue"
  278. style="margin:0 5px;"
  279. :min="0"
  280. :step="1"
  281. :precision="2"
  282. :max="99999999"
  283. :disabled="isDisabled"
  284. size="small"/> 元
  285. <a-button type="primary" :disabled="isDisabled" class="button-primary" size="small" @click="handleBatchAdd">批量设置</a-button>
  286. </div>
  287. <a-button type="primary" :disabled="isDisabled" @click="handleAddProduct" size="small">添加产品</a-button>
  288. </div>
  289. </a-form-model-item>
  290. </a-col>
  291. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  292. <div style="width: 83%;margin:0 auto 10px;">
  293. <productTable ref="chooseProductList" :promoActiveSn="$route.params.sn" :disabledVal="isDisabled"></productTable>
  294. </div>
  295. </a-col>
  296. <a-col
  297. :xs="24"
  298. :sm="24"
  299. :md="24"
  300. :lg="24"
  301. :xl="24">
  302. <a-form-model-item label="加盟商编辑" prop="promoRule.dealerEditFlag">
  303. <a-radio-group button-style="solid" :disabled="isDisabled" v-model="form.promoRule.dealerEditFlag">
  304. <a-radio-button value="1">
  305. </a-radio-button>
  306. <a-radio-button value="0">
  307. </a-radio-button>
  308. </a-radio-group>
  309. </a-form-model-item>
  310. </a-col>
  311. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  312. <a-form-model-item label="是否发布" prop="promoRule.publishFlag">
  313. <a-radio-group button-style="solid" v-model="form.promoRule.publishFlag">
  314. <a-radio-button value="1">
  315. </a-radio-button>
  316. <a-radio-button value="0">
  317. </a-radio-button>
  318. </a-radio-group>
  319. </a-form-model-item>
  320. </a-col>
  321. </div>
  322. </a-row>
  323. </a-form-model>
  324. </a-card>
  325. </a-spin>
  326. <div class="affix-cont">
  327. <a-button
  328. type="primary"
  329. class="button-primary"
  330. :disabled="spinning"
  331. id="productInfoEdit-submit-btn"
  332. size="large"
  333. @click="handleSave('all')"
  334. v-if="form.contentType !='LINK'|| isShowNextStep ||(form.contentType ==='LINK'&&form.linkType ==='2')"
  335. style="padding: 0 60px;">保存</a-button>
  336. </div>
  337. <!-- 添加产品 -->
  338. <chooseProduct
  339. ref="chooseProduct"
  340. :chooseType="chooseTypeList"
  341. :itemSn="$route.params.sn"
  342. :openModal="showProModal"
  343. @ok="addProductSuccess"
  344. @close="closeProductModal"></chooseProduct>
  345. </div>
  346. </template>
  347. <script>
  348. import { commonMixin } from '@/utils/mixin'
  349. import moment from 'moment'
  350. // 组件
  351. import { VSelect, Upload } from '@/components'
  352. import Editor from '@/components/WEeditor'
  353. import promotionShowModal from './promotionShowModal'
  354. import productTable from './productTable'
  355. import chooseProduct from './chooseProductsModal.vue'
  356. // 接口
  357. import { productTypeQuery } from '@/api/productType'
  358. import { promoActivePublish, promoActiveDetail, saveBatchEntity, promoCreateBatch, deleteByProductType } from '@/api/promoActive'
  359. export default {
  360. name: 'ProductBrandEditModal',
  361. mixins: [commonMixin],
  362. components: { VSelect, Upload, Editor, promotionShowModal, chooseProduct, productTable },
  363. data () {
  364. return {
  365. spinning: false,
  366. // 第一个表单 label 设置
  367. formItemLayout: {
  368. labelCol: { span: 2 },
  369. wrapperCol: { span: 20 }
  370. },
  371. productRangeList: [], // 产品范围列表
  372. // 链接配置内容
  373. form: {
  374. promoActiveSn: undefined, // 促销活动sn
  375. title: '', // 标题
  376. imageSet: '', // 图片
  377. contentType: 'IMAGE_CONTENT', // 内容类型
  378. content: '', // 内容
  379. contentLink: '', // 链接内容
  380. sort: undefined, // 排序
  381. publishFlag: '0', // 是否发布
  382. linkType: '1',
  383. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  384. promoRule: {
  385. ruleType: 'ticket', // 基本规则类型
  386. ruleName: '', // 券名称
  387. ruleTitle: '', // 副标题
  388. ruleBaseType: 'category', // 券生成方式
  389. ruleExplain: '', // 使用说明
  390. validType: undefined, // 券有效期类型
  391. validStartDate: undefined, // 券生效时间
  392. validEndDate: undefined, // 券失效时间
  393. validDays: undefined, // 券有效期天数
  394. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  395. publishFlag: '0', // 是否发布
  396. range: '1'
  397. }
  398. },
  399. time: [], // 有效期
  400. dateFormat: 'YYYY-MM-DD', // 有效期时间格式
  401. promotionName: '', // 促销名称
  402. pageType: undefined, // 页面类型
  403. showProModal: false, // 打开产品弹窗
  404. isShowNextStep: false, // 是否显示下一步 并提交一半配置产品
  405. isDisabled: false, // 控制页面是否能编辑
  406. chooseTypeList: [], // 已选中产品范围
  407. imageSet: [], // 回显显示图片数据
  408. productTypeList: [], // 产品范围 列表数据
  409. rules: {
  410. title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
  411. imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
  412. sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
  413. contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
  414. content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
  415. contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
  416. publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }],
  417. 'promoRule.ruleType': [{ required: true, message: '请选择基本规则', trigger: 'change' }],
  418. 'promoRule.ruleName': [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
  419. 'promoRule.ruleBaseType': [{ required: true, message: '请选择生成方式', trigger: 'change' }],
  420. 'promoRule.validType': [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
  421. 'promoRule.publishFlag': [{ required: true, message: '请选择是否发布', trigger: 'change' }],
  422. 'promoRule.dealerEditFlag': [{ required: true, message: '请选择加盟商是否可编辑', trigger: 'change' }],
  423. 'promoRule.range': [{ required: true, message: '请选择', trigger: 'blur' }],
  424. dealerEditFlag: [{ required: true, message: '请选择加盟商是否可编辑', trigger: 'change' }]
  425. }
  426. }
  427. },
  428. methods: {
  429. // 禁用日期时间
  430. disabledDate (current) {
  431. return current && current < moment().startOf('day')
  432. },
  433. dateChange (date, dateString) {
  434. this.time = date
  435. if (dateString[0] != '' && dateString[1] != '') {
  436. this.form.promoRule.validStartDate = dateString[0] + ' 00:00:00'
  437. this.form.promoRule.validEndDate = dateString[1] + ' 23:59:59'
  438. }
  439. },
  440. // 打开产品弹窗
  441. insterProduct (obj) {
  442. if (obj && Object.keys(obj).length > 0) {
  443. this.chooseTypeList = obj.typeArr
  444. }
  445. this.showProModal = true
  446. },
  447. closeProductModal () {
  448. this.showProModal = false
  449. },
  450. // 返回列表
  451. handleBack () {
  452. this.$router.push({ name: 'promotionManagementList', query: { closeLastOldTab: true } })
  453. },
  454. // 详情 挨个赋值原因:该接口和修理厂促销列表详情用的同一个接口,给后端传值过滤多余参数
  455. getDetail () {
  456. const _this = this
  457. promoActiveDetail({ sn: this.$route.params.sn }).then(res => {
  458. if (res.status == 200) {
  459. // 编辑按钮时,publishState 已发布,只能编辑是否发布;publishState已关闭,都可以编辑
  460. if (_this.pageType === 'edit') {
  461. _this.isDisabled = res.data.publishState === 'PUBLISH'
  462. _this.form.promoRule.publishFlag = res.data.publishFlag
  463. _this.form.promoRule.dealerEditFlag = res.data.dealerEditFlag
  464. }
  465. _this.form.publishFlag = res.data.publishFlag
  466. _this.form.dealerEditFlag = res.data.dealerEditFlag
  467. _this.form.promoActiveSn = res.data.promoActiveSn
  468. _this.form.title = res.data.title
  469. _this.form.contentType = res.data.contentType
  470. _this.form.sort = res.data.sort
  471. _this.imageSet = res.data.imageSet
  472. if (res.data.imageSet) {
  473. const images = res.data.imageSet.join(',')
  474. _this.form.imageSet = images
  475. if (this.pageType === 'add' || (this.pageType === 'edit' && res.data.publishState != 'PUBLISH')) {
  476. _this.$refs.imageSet.setFileList(images)
  477. }
  478. }
  479. _this.form.content = res.data.content
  480. _this.promotionName = res.data.name || ''
  481. _this.form.dealerEditFlag = res.data.dealerEditFlag
  482. if (res.data.contentType == 'IMAGE_CONTENT') {
  483. _this.$refs.editor.setHtml(res.data.content)
  484. } else if (res.data.contentType == 'VIDEO') {
  485. if (res.data.publishState != 'PUBLISH') {
  486. _this.$refs.videoSet.setFileList(res.data.content)
  487. }
  488. } else if (res.data.contentType == 'LINK') {
  489. _this.form.contentLink = res.data.content
  490. _this.form.linkType = res.data.content != '/pagesB/promoDetail' ? '2' : '1'
  491. if (res.data.promoRule) {
  492. _this.isShowNextStep = true
  493. _this.form.promoRule.range = '1'
  494. _this.time = [res.data.promoRule.validStartDate, res.data.promoRule.validEndDate]
  495. if (res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
  496. _this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
  497. }
  498. }
  499. _this.form.promoRule = { ..._this.form.promoRule, ...res.data.promoRule }
  500. }
  501. }
  502. })
  503. },
  504. // 券有效期 change
  505. handleValidType (con) {
  506. this.form.promoRule.validType = con
  507. if (con === 'FIXED') {
  508. this.form.promoRule.validDays = undefined
  509. } else {
  510. this.time = []
  511. this.form.promoRule.validStartDate = undefined
  512. this.form.promoRule.validEndDate = undefined
  513. }
  514. },
  515. // 确定保存 验证必填
  516. handleSave (type) {
  517. const _this = this
  518. if (_this.form.contentType === 'LINK') {
  519. _this.form.content = _this.form.contentLink
  520. }
  521. // 验证组件必填项
  522. _this.$refs.ruleForm.validate(valid => {
  523. if (valid) {
  524. _this.savePartInfo(type)
  525. }
  526. })
  527. },
  528. // 保存
  529. savePartInfo (type) {
  530. const _this = this
  531. _this.form.promoActiveSn = this.$route.params.sn
  532. var formData = JSON.parse(JSON.stringify(_this.form))
  533. formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
  534. // 跳转链接
  535. if (formData.contentType == 'LINK') {
  536. delete formData.contentLink
  537. if (_this.productRangeList && _this.productRangeList.length > 0) {
  538. formData.promoRule.productRangeList = _this.productRangeList.map(item => { return { productTypeSn: item } })
  539. }
  540. // 促销活动
  541. if (_this.form.linkType === '1') {
  542. if (_this.form.promoRule.validType === 'FIXED') {
  543. if (!_this.form.promoRule.validStartDate || _this.form.promoRule.validStartDate.validEndDate) {
  544. _this.$message.warning('请输入券有效期!')
  545. return false
  546. }
  547. } else {
  548. if (!_this.form.promoRule.validDays) {
  549. _this.$message.warning('请输入券有效期!')
  550. return false
  551. }
  552. }
  553. formData.publishFlag = _this.form.promoRule.publishFlag
  554. formData.dealerEditFlag = _this.form.promoRule.dealerEditFlag
  555. } else {
  556. formData.promoRule = undefined
  557. }
  558. if (_this.$refs.chooseProductList) {
  559. const numInfo = _this.$refs.chooseProductList.getDataNum()
  560. if (numInfo == 0) {
  561. _this.$message.warning('请选择返券产品!')
  562. return
  563. }
  564. }
  565. } else {
  566. formData.promoRule = undefined
  567. }
  568. _this.spinning = true
  569. promoActivePublish(formData).then(res => {
  570. if (res.status == 200) {
  571. _this.$message.success(res.message)
  572. if (type === 'all') {
  573. _this.$nextTick(() => {
  574. _this.handleBack()
  575. _this.resetSearchForm()
  576. })
  577. } else {
  578. _this.isShowNextStep = true
  579. _this.getDetail()
  580. }
  581. _this.spinning = false
  582. } else {
  583. _this.spinning = false
  584. }
  585. })
  586. },
  587. // 图片上传
  588. changeImage (file) {
  589. this.form.imageSet = file
  590. },
  591. // 视频上传
  592. changeVideo (file) {
  593. this.form.content = file
  594. },
  595. // 文本编辑器
  596. editorChange (html, text) {
  597. this.form.content = html
  598. },
  599. // 重置
  600. resetSearchForm () {
  601. if (this.pageType == 'add' || (this.pageType == 'edit' && !this.isDisabled)) {
  602. if (this.$refs.imageSet) {
  603. this.$refs.imageSet.setFileList('')
  604. }
  605. if (this.$refs.videoSet) {
  606. this.$refs.videoSet.setFileList('')
  607. }
  608. }
  609. if (this.$refs.editor) {
  610. this.$refs.editor.setHtml('')
  611. }
  612. this.form = {
  613. promoActiveSn: undefined, // 促销活动sn
  614. title: '', // 标题
  615. imageSet: '', // 图片
  616. contentType: 'IMAGE_CONTENT', // 内容类型
  617. content: '', // 内容
  618. contentLink: '', // 链接内容
  619. sort: undefined, // 排序
  620. publishFlag: '0', // 是否发布
  621. linkType: '1',
  622. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  623. productRangeList: [], // 产品范围列表
  624. promoRule: {
  625. ruleType: 'ticket', // 基本规则类型
  626. ruleName: '', // 券名称
  627. ruleTitle: '', // 副标题
  628. ruleBaseType: 'category', // 券生成方式
  629. ruleExplain: '', // 使用说明
  630. validType: undefined, // 券有效期类型
  631. validStartDate: undefined, // 券生效时间
  632. validEndDate: undefined, // 券失效时间
  633. validDays: undefined, // 券有效期天数
  634. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  635. publishFlag: '0', // 是否发布
  636. range: '1'
  637. } // 链接配置内容
  638. }
  639. this.isShowNextStep = false
  640. this.isDisabled = false
  641. if (this.$refs.ruleForm) {
  642. this.$refs.ruleForm.resetFields()
  643. }
  644. if (this.$refs.ruleForm) {
  645. this.$refs.ruleForm.resetFields()
  646. }
  647. },
  648. // 获取产品范围数据
  649. getTreeData () {
  650. productTypeQuery({}).then(res => {
  651. if (res.status == 200) {
  652. this.productTypeList = res.data
  653. } else {
  654. this.productTypeList = []
  655. }
  656. })
  657. },
  658. // 选择内容类型
  659. changeContentType (e) {
  660. if (e === 'LINK') {
  661. this.form.linkType = '1'
  662. this.form.contentLink = '/pagesB/promoDetail'
  663. this.form.content = '/pagesB/promoDetail'
  664. } else {
  665. this.form.linkType = undefined
  666. this.form.contentLink = ''
  667. this.form.content = ''
  668. }
  669. this.form.contentType = e
  670. },
  671. // 填入link内容
  672. handleLink (con) {
  673. if (!con.target.value || con.target.value != '/pagesB/promoDetail') {
  674. this.form.linkType = '2'
  675. } else {
  676. this.form.linkType = '1'
  677. }
  678. this.form.contentLink = con.target.value
  679. },
  680. // 选择货架促销填入默认值
  681. handleLinkType (val) {
  682. this.form.contentLink = val === '2' ? '' : '/pagesB/promoDetail'
  683. },
  684. // 添加产品
  685. handleAddProduct () {
  686. this.chooseTypeList = this.productRangeList
  687. this.showProModal = true
  688. },
  689. // 批量添加
  690. handleBatchAdd () {
  691. if (!this.form.promoRule.ruleValue) {
  692. this.$message.warning('请输入返券金额(需大于0)!')
  693. return
  694. }
  695. this.$refs.chooseProductList.editMorePrice(this.form.promoRule.ruleValue)
  696. },
  697. // 添加产品成功
  698. addProductSuccess (list) {
  699. const productArr = list.map(item => {
  700. return {
  701. promoActiveSn: this.$route.params.sn,
  702. promoRuleSn: this.form.promoRule.promoRuleSn,
  703. productCode: item.code,
  704. productSn: item.productSn,
  705. ruleValue: this.form.promoRule.ruleValue,
  706. price: item.terminalPrice
  707. }
  708. })
  709. promoCreateBatch(productArr).then(res => {
  710. if (res.status == 200) {
  711. this.showProModal = false
  712. // 获取产品列表 有分页
  713. this.$refs.chooseProductList.pageInit()
  714. }
  715. })
  716. },
  717. onChangeTree (e) {
  718. deleteByProductType({ promoActiveSn: this.$route.params.sn, productTypeSnList: this.productRangeList || [] }).then(res => {
  719. if (res.status == 200) {
  720. this.$refs.chooseProductList.pageInit()
  721. }
  722. })
  723. // 保存产品范围
  724. const newArr = this.productRangeList.map(item => {
  725. return {
  726. promoActiveSn: this.$route.params.sn,
  727. promoRuleSn: this.form.promoRule.promoRuleSn,
  728. productTypeSn: item
  729. }
  730. })
  731. saveBatchEntity({ list: newArr, promoActiveSn: this.$route.params.sn }).then(res => {
  732. if (res.status == 200) {
  733. console.log('保存产品范围成功')
  734. }
  735. })
  736. },
  737. pageInit () {
  738. this.pageType = this.$route.params.pageType
  739. if (this.pageType === 'edit') {
  740. this.getDetail()
  741. }
  742. console.log('加载产品范围')
  743. this.$nextTick(() => {
  744. this.getTreeData()
  745. })
  746. }
  747. },
  748. mounted () {
  749. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  750. this.pageInit()
  751. }
  752. },
  753. activated () {
  754. // 如果是新页签打开,则重置当前页面
  755. if (this.$store.state.app.isNewTab) {
  756. this.pageInit()
  757. }
  758. // 仅刷新列表,不重置页面
  759. if (this.$store.state.app.updateList) {
  760. this.pageInit()
  761. }
  762. },
  763. beforeRouteEnter (to, from, next) {
  764. next(vm => {})
  765. }
  766. }
  767. </script>
  768. <style lang="less" scoped>
  769. .promotionEdit-wrap{
  770. position: relative;
  771. height: 100%;
  772. box-sizing: border-box;
  773. padding-bottom:51px;
  774. >.ant-spin-nested-loading{
  775. overflow-y: scroll;
  776. height: 100%;
  777. }
  778. /deep/.ant-form-item{
  779. margin-bottom:8px;
  780. }
  781. .promotionEdit-cont{
  782. margin-bottom: 10px;
  783. }
  784. .upload{
  785. width: 100%!important;
  786. }
  787. // 文本编辑器 工具栏样式换行
  788. .promotionEdit-editor{
  789. .w-e-toolbar{
  790. flex-wrap: wrap;
  791. z-index: 0;
  792. }
  793. }
  794. // 商品图片描述
  795. .upload-desc{
  796. font-size: 12px;
  797. color: #808695;
  798. }
  799. #promotionEdit-attachList{
  800. height: auto;
  801. }
  802. .box{
  803. border:1px solid #d9d9d9;
  804. border-radius:4px;
  805. padding:4px 11px;
  806. color:rgba(0, 0, 0, 0.25);
  807. cursor: not-allowed;
  808. background:#fdfdfd;
  809. }
  810. .affix{
  811. .ant-affix{
  812. z-index: 101;
  813. display:inline-block
  814. }
  815. }
  816. /deep/.ant-radio-disabled + span{
  817. color:#000!important;
  818. }
  819. .tip{
  820. margin-left:10px;
  821. }
  822. .productInfo{
  823. display:flex;
  824. justify-content: space-between;
  825. }
  826. #setPromotion-productRange{
  827. /deep/.ant-select-dropdown{
  828. max-height:30vh !important;
  829. }
  830. }
  831. }
  832. </style>