edit.vue 33 KB

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