liveLotteryConf.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="直播间ID" prop="liveId">
  5. <el-input
  6. v-model="queryParams.liveId"
  7. placeholder="请输入直播间ID"
  8. clearable
  9. size="small"
  10. :disabled="canLiveId"
  11. @keyup.enter.native="handleQuery"
  12. />
  13. </el-form-item>
  14. <el-form-item label="参与方式" prop="require">
  15. <el-select v-model="queryParams.require" placeholder="请输入参与抽奖方式">
  16. <el-option v-for="(item,index) in requireOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="抽奖状态" prop="require">
  20. <el-select v-model="queryParams.lotteryStatus" placeholder="请输入参与抽奖方式">
  21. <el-option v-for="(item,index) in lotteryStatusOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="抽奖标题" prop="desc">
  25. <el-input
  26. v-model="queryParams.desc"
  27. placeholder="请输入描述"
  28. clearable
  29. size="small"
  30. @keyup.enter.native="handleQuery"
  31. />
  32. </el-form-item>
  33. <el-form-item label="创建日期" prop="createTime">
  34. <el-date-picker clearable size="small"
  35. v-model="queryParams.createTime"
  36. type="date"
  37. value-format="yyyy-MM-dd"
  38. placeholder="选择创建日期">
  39. </el-date-picker>
  40. </el-form-item>
  41. <el-form-item>
  42. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  43. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  44. </el-form-item>
  45. </el-form>
  46. <el-row :gutter="10" class="mb8">
  47. <el-col :span="1.5">
  48. <el-button
  49. type="primary"
  50. plain
  51. icon="el-icon-plus"
  52. size="mini"
  53. @click="handleAdd"
  54. v-hasPermi="['live:liveLotteryConf:add']"
  55. >新增</el-button>
  56. </el-col>
  57. <el-col :span="1.5">
  58. <el-button
  59. type="success"
  60. plain
  61. icon="el-icon-edit"
  62. size="mini"
  63. :disabled="single"
  64. @click="handleUpdate"
  65. v-hasPermi="['live:liveLotteryConf:edit']"
  66. >修改</el-button>
  67. </el-col>
  68. <!-- <el-col :span="1.5">
  69. <el-button
  70. type="danger"
  71. plain
  72. icon="el-icon-delete"
  73. size="mini"
  74. :disabled="multiple"
  75. @click="handleDelete"
  76. v-hasPermi="['live:liveLotteryConf:remove']"
  77. >删除</el-button>
  78. </el-col>-->
  79. <el-col :span="1.5">
  80. <el-button
  81. type="warning"
  82. plain
  83. icon="el-icon-download"
  84. size="mini"
  85. :loading="exportLoading"
  86. @click="handleExport"
  87. v-hasPermi="['live:liveLotteryConf:export']"
  88. >导出</el-button>
  89. </el-col>
  90. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  91. </el-row>
  92. <el-table border v-loading="loading" :data="liveLotteryConfList" @selection-change="handleSelectionChange">
  93. <el-table-column type="selection" width="55" align="center" />
  94. <el-table-column label="抽奖ID" align="center" prop="lotteryId" />
  95. <el-table-column label="操作商品" align="center" class-name="small-padding fixed-width">
  96. <template slot-scope="scope">
  97. <el-button v-if="scope.row.lotteryStatus+'' === '0'" @click="handleUpdateProduct(scope.row)">编辑商品</el-button>
  98. <el-button v-else @click="handleDetailProduct(scope.row)">查看商品</el-button>
  99. </template>
  100. </el-table-column>
  101. <el-table-column label="直播间ID" align="center" prop="liveId" />
  102. <el-table-column label="参与方式" align="center" prop="require" :formatter="requireFormatter"/>
  103. <el-table-column label="抽奖状态" align="center" prop="lotteryStatus" :formatter="lotteryStatusFormatter"/>
  104. <el-table-column label="配置" align="center" prop="requireConf" />
  105. <el-table-column label="持续时间" align="center" prop="duration" />
  106. <el-table-column label="抽奖标题" align="center" prop="desc" />
  107. <el-table-column label="创建日期" align="center" prop="createTime" width="180">
  108. <template slot-scope="scope">
  109. <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
  110. </template>
  111. </el-table-column>
  112. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  113. <template slot-scope="scope">
  114. <el-button
  115. size="mini"
  116. type="text"
  117. icon="el-icon-edit"
  118. @click="handleUpdate(scope.row)"
  119. v-hasPermi="['live:liveLotteryConf:edit']"
  120. style="margin-left: 10px"
  121. >修改</el-button>
  122. <!-- 开始 -->
  123. <el-button
  124. size="mini"
  125. type="text"
  126. icon="el-icon-delete"
  127. @click="handleStatusChange(scope.row,'1')"
  128. v-hasPermi="['live:liveLotteryConf:edit']"
  129. >开始</el-button>
  130. <!-- 暂停 -->
  131. <el-button
  132. size="mini"
  133. type="text"
  134. icon="el-icon-delete"
  135. @click="handleStatusChange(scope.row,'3')"
  136. v-hasPermi="['live:liveLotteryConf:edit']"
  137. >暂停</el-button>
  138. <!-- 结算 -->
  139. <el-button
  140. size="mini"
  141. type="text"
  142. icon="el-icon-delete"
  143. @click="handleStatusChange(scope.row,'2')"
  144. v-hasPermi="['live:liveLotteryConf:edit']"
  145. >结算</el-button>
  146. <el-button
  147. size="mini"
  148. type="text"
  149. icon="el-icon-delete"
  150. @click="handleDelete(scope.row)"
  151. v-hasPermi="['live:liveLotteryConf:edit']"
  152. >删除</el-button>
  153. </template>
  154. </el-table-column>
  155. </el-table>
  156. <pagination
  157. v-show="total>0"
  158. :total="total"
  159. :page.sync="queryParams.pageNum"
  160. :limit.sync="queryParams.pageSize"
  161. @pagination="getList"
  162. />
  163. <!-- 添加或修改直播抽奖配置对话框 -->
  164. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  165. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  166. <el-form-item label="直播间ID" prop="liveId">
  167. <el-input v-model="form.liveId" placeholder="请输入直播间ID"
  168. :disabled="canLiveId"/>
  169. </el-form-item>
  170. <el-form-item label="参与方式" prop="require">
  171. <el-select v-model="form.require" placeholder="请输入参与抽奖方式">
  172. <el-option v-for="(item,index) in requireOptions" :key="item.dictValue+index" :label="item.dictLabel" :value="item.dictValue" />
  173. </el-select>
  174. </el-form-item>
  175. <!-- <el-form-item label="方式配置" prop="requireConf">-->
  176. <!-- <el-input v-model="form.requireConf" placeholder="请输入参与抽奖方式" />-->
  177. <!-- <span style="margin-bottom:10px;font-size: 10px; font-family: Arial,serif">当参与方式选择为“送礼参与”或“下单参与”时,此处填写商品ID及数量</span>-->
  178. <!-- </el-form-item>-->
  179. <el-form-item label="持续时间" prop="duration" style="margin-top: 50px;">
  180. <el-input v-model="form.duration" placeholder="请输入持续时间 单位:分" />
  181. </el-form-item>
  182. <el-form-item label="抽奖标题" prop="desc">
  183. <el-input v-model="form.desc" placeholder="请输入描述" />
  184. </el-form-item>
  185. </el-form>
  186. <div slot="footer" class="dialog-footer">
  187. <el-button type="primary" @click="submitForm">确 定</el-button>
  188. <el-button @click="cancel">取 消</el-button>
  189. </div>
  190. </el-dialog>
  191. <el-dialog :title="titleProduct" :visible.sync="openProduct" width="800px" append-to-body>
  192. <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px" :disabled="isDetail">
  193. <!-- 基础信息 -->
  194. <el-row :gutter="20">
  195. <el-col :span="12">
  196. <el-form-item label="抽奖ID" prop="lotteryId">
  197. <el-input v-model="form1.lotteryId" placeholder="请输入抽奖ID" />
  198. </el-form-item>
  199. </el-col>
  200. <el-col :span="12">
  201. <!-- <el-form-item label="直播间ID" prop="liveId">
  202. <el-input v-model="form1.liveId" placeholder="请输入直播间ID" />
  203. </el-form-item>-->
  204. </el-col>
  205. </el-row>
  206. <!-- 动态奖品配置 -->
  207. <el-divider content-position="left">奖品配置</el-divider>
  208. <el-card v-for="(prize, index) in form1.prizes" :key="index" class="prize-card" shadow="hover">
  209. <div slot="header" class="prize-header">
  210. <span><b>奖品等级 :{{ prize.prizeLevel }}</b></span>
  211. <el-button
  212. v-if="form1.prizes.length > 1"
  213. @click="removePrize(index)"
  214. type="danger"
  215. icon="el-icon-delete"
  216. size="mini"
  217. circle
  218. ></el-button>
  219. </div>
  220. <el-row :gutter="20">
  221. <el-col :span="12">
  222. <el-form-item
  223. label="商品名称"
  224. :prop="'prizes.' + index + '.productId'"
  225. :rules="[{ required: true, message: '请输入商品', trigger: 'blur' }]">
  226. <!-- <el-input v-model="prize.productId" placeholder="请输入商品ID" />-->
  227. <el-select
  228. v-model="prize.productId"
  229. :filterable="true"
  230. clearable
  231. remote
  232. reserve-keyword
  233. placeholder="请输入关键字搜索"
  234. :loading="loadingProducts"
  235. size="small"
  236. style="width: 180px"
  237. >
  238. <el-option
  239. v-for="product in productOptions"
  240. :key="product.goodsId"
  241. :label="product.productName"
  242. :value="product.goodsId"
  243. />
  244. <span style="float: left">{{ product.goodsId }}</span>
  245. <span style="margin-left: 30px ;">{{product.productName}}</span>
  246. </el-select>
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="12">
  250. <el-form-item
  251. label="奖品等级"
  252. :prop="'prizes.' + index + '.prizeLevel'"
  253. :rules="[{ required: true, message: '请输入奖品等级', trigger: 'blur' }]">
  254. <el-input v-model="prize.prizeLevel" placeholder="请输入奖品等级" />
  255. </el-form-item>
  256. </el-col>
  257. </el-row>
  258. <el-row :gutter="20">
  259. <el-col :span="12">
  260. <el-form-item
  261. label="单奖数量"
  262. :prop="'prizes.' + index + '.perLotteryNum'"
  263. :rules="[
  264. { required: true, message: '请输入单次中奖数量', trigger: 'blur' },
  265. { type: 'number', message: '必须为数字值' }
  266. ]">
  267. <el-input-number
  268. v-model="prize.perLotteryNum"
  269. :min="1"
  270. :max="100"
  271. controls-position="right"
  272. placeholder="单次中奖数量" />
  273. </el-form-item>
  274. </el-col>
  275. <el-col :span="12">
  276. <el-form-item
  277. label="奖励总份数"
  278. :prop="'prizes.' + index + '.totalLots'"
  279. :rules="[
  280. { required: true, message: '请输入奖励总份数', trigger: 'blur' },
  281. { type: 'number', message: '必须为数字值' }
  282. ]">
  283. <el-input-number
  284. v-model="prize.totalLots"
  285. :min="1"
  286. controls-position="right"
  287. placeholder="奖励总份数" />
  288. </el-form-item>
  289. </el-col>
  290. </el-row>
  291. <el-row :gutter="20">
  292. <el-col :span="12">
  293. <el-form-item
  294. label="实发份数"
  295. :prop="'prizes.' + index + '.totalSend'"
  296. >
  297. <el-input-number
  298. v-model="prize.totalSend"
  299. :min="0"
  300. :max="prize.totalLots"
  301. controls-position="right"
  302. placeholder="实际发放份数"
  303. :disabled="true"/>
  304. </el-form-item>
  305. </el-col>
  306. </el-row>
  307. </el-card>
  308. <div class="add-prize-btn">
  309. <el-button
  310. @click="addPrize"
  311. type="primary"
  312. icon="el-icon-plus"
  313. plain
  314. size="small">
  315. 添加奖品配置
  316. </el-button>
  317. </div>
  318. </el-form>
  319. <div slot="footer" class="dialog-footer">
  320. <el-button @click="cancel1">取 消</el-button>
  321. <el-button type="primary" @click="submitForm1">确 定</el-button>
  322. </div>
  323. </el-dialog>
  324. </div>
  325. </template>
  326. <script>
  327. import { listLiveLotteryConf, getLiveLotteryConf, delLiveLotteryConf, addLiveLotteryConf, updateLiveLotteryConf, exportLiveLotteryConf } from "@/api/live/liveLotteryConf";
  328. import LiveLotteryProductConf from '@/views/live/liveLotteryProductConf/index.vue'
  329. import {
  330. listStoreProduct,
  331. updateLiveLotteryProductConf
  332. } from '@/api/live/liveLotteryProductConf'
  333. import { listLiveGoods } from '@/api/live/liveGoods'
  334. export default {
  335. name: "LiveLotteryConf",
  336. components: { LiveLotteryProductConf },
  337. data() {
  338. return {
  339. //字典
  340. requireOptions: [],
  341. // 抽奖状态
  342. lotteryStatusOptions: [],
  343. //加载商品
  344. loadingProducts: false,
  345. //
  346. productOptions: [],
  347. isDetail: false,
  348. canLiveId:false,
  349. //parentLiveId
  350. parentLiveId : null,
  351. liveId: null,
  352. // 遮罩层
  353. loading: true,
  354. // 导出遮罩层
  355. exportLoading: false,
  356. // 选中数组
  357. ids: [],
  358. // 非单个禁用
  359. single: true,
  360. // 非多个禁用
  361. multiple: true,
  362. // 显示搜索条件
  363. showSearch: true,
  364. // 总条数
  365. total: 0,
  366. // 直播抽奖配置表格数据
  367. liveLotteryConfList: [],
  368. // 弹出层标题
  369. title: "",
  370. titleProduct: "编辑抽奖商品",
  371. // 是否显示弹出层
  372. open: false,
  373. openProduct: false,
  374. // 查询参数
  375. queryParams: {
  376. pageNum: 1,
  377. pageSize: 10,
  378. liveId: null,
  379. require: null,
  380. desc: null,
  381. createTime: null,
  382. lotteryStatus: null
  383. },
  384. //商品信息列表
  385. productList: [],
  386. // 商品信息
  387. product: {
  388. productId: null,
  389. prizeLevel: null,
  390. perLotteryNum: null,
  391. totalLots: null,
  392. totalSend: null
  393. },
  394. // 表单参数
  395. form:{
  396. lotteryId: '',
  397. liveId: '',
  398. require: '',
  399. requireConf: '',
  400. duration: null,
  401. desc: null
  402. },
  403. // 表单参数
  404. form1: {
  405. liveId: '',
  406. lotteryId: '',
  407. prizes: [this.getDefaultPrize()]
  408. },
  409. // 表单校验
  410. rules: {
  411. liveId: [
  412. { required: true, message: "直播间ID不能为空", trigger: "blur" }
  413. ],
  414. require: [
  415. { required: true, message: "参与抽奖方式", trigger: "blur" }
  416. ],
  417. //如果require为2或3,requireConf不能为空
  418. requireConf: [
  419. { validator: this.validRequireConf,message: "当参与方式选择为“送礼参与”或“下单参与”时,对应的配置:送礼数量/指定商品Id及数量不能为空", trigger: "blur" }
  420. ],
  421. duration: [
  422. { required: true, message: "持续时间 单位:分不能为空", trigger: "blur" }
  423. ],
  424. desc: [
  425. { required: true, message: "描述不能为空", trigger: "blur" }
  426. ],
  427. },
  428. //抽奖商品表单
  429. rules1: {
  430. lotteryId: [
  431. { required: true, message: '请输入抽奖ID', trigger: 'blur' }
  432. ],
  433. liveId: [
  434. { required: true, message: '请输入直播间ID', trigger: 'blur' }
  435. ]
  436. }
  437. };
  438. },
  439. watch: {
  440. // 监听路由的 query 参数变化
  441. '$route.query': {
  442. handler(newQuery) {
  443. if (this.$route.params.liveId) {
  444. this.liveId = this.$route.params.liveId;
  445. }else {
  446. this.liveId = this.$route.query.liveId;
  447. }
  448. this.parentLiveId = this.liveId;
  449. this.queryParams.liveId = this.parentLiveId;
  450. if(this.queryParams.liveId){
  451. this.form.liveId = this.parentLiveId;
  452. //设置查询条件直播间ID不可修改
  453. this.canLiveId = true;
  454. }
  455. this.getList();
  456. this.getProducts();
  457. },
  458. // 初始化时立即执行一次
  459. immediate: true
  460. }
  461. },
  462. created() {
  463. // 1在线观众 2下单 3送礼
  464. this.getDicts("sys_live_lottery_require").then(response => {
  465. this.requireOptions = response.data;
  466. });
  467. this.getDicts("sys_live_lottery_status").then(response => {
  468. this.lotteryStatusOptions = response.data;
  469. });
  470. // if (this.$route.params.liveId) {
  471. // this.liveId = this.$route.params.liveId;
  472. // }else {
  473. // this.liveId = this.$route.query.liveId;
  474. // }
  475. // this.parentLiveId = this.liveId;
  476. // this.queryParams.liveId = this.parentLiveId;
  477. // if(this.queryParams.liveId){
  478. // this.form.liveId = this.parentLiveId;
  479. // //设置查询条件直播间ID不可修改
  480. // this.canLiveId = true;
  481. // }
  482. // this.getList();
  483. },
  484. mounted() {
  485. this.$watch(
  486. () => this.form.require,
  487. (newVal) => {
  488. this.$refs.form.validateField('requireConf');
  489. }
  490. );
  491. },
  492. methods: {
  493. getProducts(){
  494. const queryParam = {
  495. liveId : this.liveId
  496. }
  497. this.loadingProducts = true;
  498. try {
  499. listLiveGoods(queryParam).then(response => {
  500. this.productOptions = response.rows;
  501. })
  502. } catch (err) {
  503. console.error('查询商品失败:', err);
  504. this.productOptions = [];
  505. } finally {
  506. this.loadingProducts = false;
  507. }
  508. },
  509. // async fetchProducts(query) {
  510. // const queryParam = {
  511. // liveId : this.liveId,
  512. // keywords: query
  513. // }
  514. // this.loadingProducts = true;
  515. // try {
  516. // listLiveGoods(queryParam).then(response => {
  517. // this.productOptions = response.rows;
  518. // })
  519. // } catch (err) {
  520. // console.error('查询商品失败:', err);
  521. // this.productOptions = [];
  522. // } finally {
  523. // this.loadingProducts = false;
  524. // }
  525. // },
  526. // 获取默认奖品配置
  527. getDefaultPrize() {
  528. return {
  529. productId: '',
  530. prizeLevel: '',
  531. perLotteryNum: 1,
  532. totalLots: 1,
  533. totalSend: 0
  534. }
  535. },
  536. // 添加奖品配置
  537. addPrize() {
  538. this.form1.prizes.push(this.getDefaultPrize())
  539. },
  540. // 删除奖品配置
  541. removePrize(index) {
  542. if (this.form1.prizes.length <= 1) {
  543. this.$message.warning('至少需要保留一个奖品配置')
  544. return
  545. }
  546. this.form1.prizes.splice(index, 1)
  547. },
  548. requireFormatter(row, column) {
  549. return this.selectDictLabel(this.requireOptions, row.require);
  550. },
  551. lotteryStatusFormatter(row, column) {
  552. return this.selectDictLabel(this.lotteryStatusOptions, row.lotteryStatus);
  553. },
  554. validRequireConf(rule, value, callback) {
  555. if(this.form.require+"" === "2" || this.form.require+"" === "3"){
  556. if(!value){
  557. callback(new Error());
  558. return false;
  559. }
  560. }
  561. callback();
  562. return true;
  563. },
  564. /** 查询直播抽奖配置列表 */
  565. getList() {
  566. this.loading = true;
  567. listLiveLotteryConf(this.queryParams).then(response => {
  568. this.liveLotteryConfList = response.rows;
  569. this.total = response.total;
  570. this.loading = false;
  571. });
  572. },
  573. // 取消按钮
  574. cancel() {
  575. this.open = false;
  576. this.reset();
  577. },
  578. // 取消
  579. cancel1() {
  580. this.openProduct = false;
  581. },
  582. // 重置表单
  583. resetForm1() {
  584. this.form1 = {
  585. lotteryId: '',
  586. liveId: '',
  587. prizes: [this.getDefaultPrize()]
  588. }
  589. },
  590. // 表单重置
  591. reset() {
  592. this.form = {
  593. lotteryId: null,
  594. liveId: null,
  595. require: null,
  596. requireConf: null,
  597. duration: null,
  598. desc: null
  599. };
  600. this.resetForm("form");
  601. this.checkParentLiveId();
  602. },
  603. /** 搜索按钮操作 */
  604. handleQuery() {
  605. this.queryParams.pageNum = 1;
  606. this.getList();
  607. },
  608. /** 重置按钮操作 */
  609. resetQuery() {
  610. this.queryParams = {
  611. pageNum: 1,
  612. pageSize: 10,
  613. liveId: null,
  614. require: null,
  615. desc: null,
  616. createTime: null,
  617. lotteryStatus: null
  618. }
  619. this.resetForm("queryForm");
  620. this.checkParentLiveId();
  621. this.handleQuery();
  622. },
  623. //判断父页面传入参数
  624. checkParentLiveId(){
  625. if(this.parentLiveId){
  626. this.form.liveId = this.parentLiveId;
  627. this.queryParams.liveId = this.parentLiveId;
  628. }
  629. },
  630. // 多选框选中数据
  631. handleSelectionChange(selection) {
  632. this.ids = selection.map(item => item.lotteryId)
  633. this.single = selection.length!==1
  634. this.multiple = !selection.length
  635. },
  636. /** 新增按钮操作 */
  637. handleAdd() {
  638. this.reset();
  639. this.open = true;
  640. this.title = "添加直播抽奖配置";
  641. },
  642. /** 修改按钮操作 */
  643. handleUpdate(row) {
  644. this.reset();
  645. const lotteryId = row.lotteryId || this.ids
  646. //只能对未开始或暂停的抽奖进行修改
  647. if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
  648. this.msgError("只能对未开始或暂停的抽奖进行修改");
  649. return;
  650. }
  651. getLiveLotteryConf(lotteryId).then(response => {
  652. this.form = response.data;
  653. this.open = true;
  654. this.title = "修改直播抽奖配置";
  655. });
  656. },
  657. /** 修改按钮操作 */
  658. handleUpdateProduct(row) {
  659. this.form1.lotteryId = row.lotteryId;
  660. //如果状态为已结束,则不能修改
  661. if(row.lotteryStatus+"" === "2"){
  662. this.msgError("已结束的抽奖不能修改");
  663. return;
  664. }
  665. this.openProduct = true;
  666. this.isDetail = false;
  667. listStoreProduct(row.lotteryId).then(response => {
  668. this.form1 = response.data;
  669. if(this.form1.prizes.length === 0)
  670. this.form1.prizes = [this.getDefaultPrize()]
  671. this.form1.liveId = row.liveId;
  672. });
  673. },
  674. /** 详情按钮操作 */
  675. handleDetailProduct(row) {
  676. this.form1.lotteryId = row.lotteryId;
  677. //如果状态为已结束,则不能修改
  678. if(row.status+"" === "2"){
  679. this.msgError("已结束的抽奖不能修改");
  680. return;
  681. }
  682. this.openProduct = true;
  683. this.isDetail = true;
  684. listStoreProduct(row.lotteryId).then(response => {
  685. this.form1 = response.data;
  686. this.form1.liveId = row.liveId;
  687. });
  688. },
  689. /** 抽奖状态修改 */
  690. handleStatusChange(row, status) {
  691. if (this.$store.state.liveWs[this.liveId] == null) {
  692. this.msgError("请从直播间进行操作!");
  693. return;
  694. }
  695. //结束的抽奖不能进行操作
  696. if(row.lotteryStatus+"" === "2"){
  697. this.msgError("已结束的抽奖不能进行操作");
  698. return;
  699. }
  700. switch (status+"") {
  701. case "1":
  702. //只能对未开启的抽奖进行操作
  703. if(row.lotteryStatus+"" !== "0" && row.lotteryStatus+"" !== "3"){
  704. this.msgError("只能对未开启或暂停的抽奖进行开始操作");
  705. return;
  706. }
  707. break;
  708. case "2":
  709. //只能对进行中或暂停的抽奖进行结算
  710. if(row.lotteryStatus+"" !== "1" && row.lotteryStatus+"" !== "3"){
  711. this.msgError("只能对进行中或暂停的抽奖进行结算");
  712. return;
  713. }
  714. break;
  715. case "3":
  716. //只能对进行中的抽奖执行暂停操作
  717. if(row.lotteryStatus+"" !== "1"){
  718. this.msgError("只能对进行中的抽奖执行暂停操作");
  719. return;
  720. }
  721. break;
  722. default:
  723. return;
  724. }
  725. const doLotteryParam = {
  726. lotteryId: row.lotteryId,
  727. lotteryStatus: status,
  728. liveId:this.liveId,
  729. duration: row.duration,
  730. status: status
  731. };
  732. updateLiveLotteryConf(doLotteryParam).then(response => {
  733. if(response.code === 200){
  734. const msg = {
  735. cmd: 'lottery',
  736. data: doLotteryParam
  737. };
  738. this.$store.state.liveWs[this.liveId].send(JSON.stringify(msg));
  739. this.msgSuccess("修改成功");
  740. }else{
  741. this.msgError(response.msg);
  742. }
  743. this.open = false;
  744. this.getList();
  745. });
  746. },
  747. /** 提交按钮 */
  748. submitForm() {
  749. this.$refs["form"].validate(valid => {
  750. if (valid) {
  751. if (this.form.lotteryId != null) {
  752. updateLiveLotteryConf(this.form).then(response => {
  753. this.msgSuccess("修改成功");
  754. this.open = false;
  755. this.getList();
  756. });
  757. } else {
  758. addLiveLotteryConf(this.form).then(response => {
  759. this.msgSuccess("新增成功");
  760. this.open = false;
  761. this.getList();
  762. });
  763. }
  764. }
  765. });
  766. },
  767. submitForm1() {
  768. this.$refs["form1"].validate(valid => {
  769. console.log("form1")
  770. console.log(this.$refs["form1"])
  771. if (valid) {
  772. updateLiveLotteryProductConf(this.form1).then(response => {
  773. //200 成功
  774. this.msgSuccess("保存成功");
  775. this.openProduct = false;
  776. this.resetForm1();
  777. });
  778. }
  779. });
  780. },
  781. /** 删除按钮操作 */
  782. handleDelete(row) {
  783. //如果抽奖状态不为0,则不能删除
  784. if(row.lotteryStatus+"" !== "0"){
  785. this.msgError("只能删除未开始的抽奖配置");
  786. return;
  787. }
  788. const lotteryIds = row.lotteryId || this.ids;
  789. this.$confirm('是否确认删除直播抽奖配置编号为"' + lotteryIds + '"的数据项?', "警告", {
  790. confirmButtonText: "确定",
  791. cancelButtonText: "取消",
  792. type: "warning"
  793. }).then(function() {
  794. return delLiveLotteryConf(lotteryIds);
  795. }).then(() => {
  796. this.getList();
  797. this.msgSuccess("删除成功");
  798. const msg = {
  799. cmd: 'lottery',
  800. data: {
  801. lotteryId: row.lotteryId,
  802. lotteryStatus: 2,
  803. duration: row.duration
  804. }
  805. };
  806. this.$store.state.liveWs[this.liveId].send(JSON.stringify(msg));
  807. }).catch(() => {});
  808. },
  809. /** 导出按钮操作 */
  810. handleExport() {
  811. const queryParams = this.queryParams;
  812. this.$confirm('是否确认导出所有直播抽奖配置数据项?', "警告", {
  813. confirmButtonText: "确定",
  814. cancelButtonText: "取消",
  815. type: "warning"
  816. }).then(() => {
  817. this.exportLoading = true;
  818. return exportLiveLotteryConf(queryParams);
  819. }).then(response => {
  820. this.download(response.msg);
  821. this.exportLoading = false;
  822. }).catch(() => {});
  823. }
  824. }
  825. };
  826. </script>
  827. <style scoped>
  828. .prize-card {
  829. margin-bottom: 20px;
  830. }
  831. .prize-header {
  832. display: flex;
  833. justify-content: space-between;
  834. align-items: center;
  835. }
  836. .add-prize-btn {
  837. margin-top: 10px;
  838. text-align: center;
  839. }
  840. .dialog-footer {
  841. text-align: right;
  842. }
  843. </style>