edit.vue 32 KB

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