detail.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
  1. <!-- 博客专辑 详情 -->
  2. <template>
  3. <div class="app-container">
  4. <el-form
  5. class="form"
  6. :model="form"
  7. ref="form"
  8. :rules="rules"
  9. label-width="100px"
  10. :disabled="disabled"
  11. >
  12. <el-form-item label="播客名称:" prop="name">
  13. <el-input v-model="form.name" placeholder="请输入播客名称" />
  14. </el-form-item>
  15. <el-form-item label="主播名称:" prop="podcasterIds">
  16. <el-select
  17. v-model="form.podcasterIds"
  18. multiple
  19. filterable
  20. remote
  21. reserve-keyword
  22. placeholder="请输入主播名称"
  23. :remote-method="getSelect"
  24. no-data-text="请新增主播"
  25. >
  26. <el-option
  27. v-for="item in anchorOptions"
  28. :key="item.value"
  29. :value="item.value"
  30. :label="item.label"
  31. />
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="播客分类:" prop="categoryIds">
  35. <el-select
  36. v-model="form.categoryIds"
  37. multiple
  38. placeholder="请选择播客分类"
  39. >
  40. <el-option
  41. v-for="item in blogClassOptions"
  42. :key="item.value"
  43. :value="item.value"
  44. :label="item.label"
  45. />
  46. </el-select>
  47. </el-form-item>
  48. <el-form-item label="播客介绍:" prop="description">
  49. <el-input
  50. v-model="form.description"
  51. type="textarea"
  52. :autosize="{ minRows: 5, maxRows: 10 }"
  53. maxlength="300"
  54. show-word-limit
  55. placeholder=" 请输入播客介绍"
  56. />
  57. </el-form-item>
  58. <el-form-item label="资源平台:" prop="platformId">
  59. <el-select
  60. v-model="form.platformId"
  61. placeholder="请选择资源平台"
  62. :disabled="disabledPlatformId(form.platformId)"
  63. >
  64. <el-option
  65. v-for="item in platformOptions"
  66. :key="item.value"
  67. :value="item.value"
  68. :label="item.label"
  69. :disabled="disabledJoinType(item.joinType)"
  70. />
  71. </el-select>
  72. </el-form-item>
  73. <el-form-item label="付费类型:" prop="charging">
  74. <el-select v-model="form.charging" placeholder="请选择付费类型">
  75. <el-option
  76. v-for="item in payTypeOptions"
  77. :key="item.value"
  78. :value="item.value"
  79. :label="item.label"
  80. />
  81. </el-select>
  82. </el-form-item>
  83. <el-form-item v-if="form.charging !== 1" label="原价:" prop="price">
  84. <el-input-number
  85. v-model="form.price"
  86. placeholder="请输入原价"
  87. :min="1"
  88. :precision="2"
  89. :controls="false"
  90. />
  91. </el-form-item>
  92. <el-form-item
  93. v-if="form.charging !== 1"
  94. label="折扣价:"
  95. prop="discountedPrice"
  96. >
  97. <el-input-number
  98. v-model="form.discountedPrice"
  99. placeholder="请输入折扣价"
  100. :min="1"
  101. :precision="2"
  102. :controls="false"
  103. />
  104. </el-form-item>
  105. <el-form-item label="播客封面" prop="thumb">
  106. <Upload
  107. listType="picture-card"
  108. :url="form.thumb"
  109. @upload="upload"
  110. :disabled="disabled"
  111. />
  112. </el-form-item>
  113. <el-form-item label="关联节目:" prop="adminPodCastProgramDetailResp">
  114. <el-button type="primary" @click="getDialog">关联节目</el-button>
  115. <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true"
  116. >解除关联</el-button
  117. >
  118. </el-form-item>
  119. <el-form-item style="width: 100%">
  120. <el-table
  121. :data="form.adminPodCastProgramDetailResp"
  122. @selection-change="handleSelect"
  123. >
  124. <el-table-column type="selection" align="center" />
  125. <el-table-column
  126. label="ID"
  127. prop="id"
  128. align="center"
  129. show-overflow-tooltip
  130. />
  131. <el-table-column
  132. label="节目名称"
  133. prop="name"
  134. align="center"
  135. show-overflow-tooltip
  136. />
  137. <el-table-column
  138. label="资源平台"
  139. prop="platformId"
  140. align="center"
  141. :formatter="platformFormatter"
  142. />
  143. <el-table-column
  144. label="当前状态"
  145. prop="status"
  146. align="center"
  147. :formatter="statusFormatter"
  148. />
  149. <el-table-column
  150. v-if="!disabledPlatformId(form.platformId)"
  151. label="操作"
  152. align="center"
  153. >
  154. <template slot-scope="scope">
  155. <Audio :src="scope.row.progaramUrl" />
  156. <el-button
  157. type="text"
  158. icon="el-icon-caret-top"
  159. @click="getChangeSort(scope.$index, scope.$index - 1)"
  160. :disabled="scope.$index <= 0"
  161. />
  162. <el-button
  163. type="text"
  164. icon="el-icon-caret-bottom"
  165. @click="getChangeSort(scope.$index, scope.$index + 1)"
  166. :disabled="
  167. scope.$index > form.adminPodCastProgramDetailResp.length - 2
  168. "
  169. />
  170. </template>
  171. </el-table-column>
  172. </el-table>
  173. </el-form-item>
  174. </el-form>
  175. <div class="form-btn">
  176. <el-button @click="cancel">取消</el-button>
  177. <el-button v-if="!disabled" type="primary" @click="getSubmit"
  178. >确定</el-button
  179. >
  180. </div>
  181. <!-- 弹窗 -->
  182. <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1200px">
  183. <el-form inline size="mini" style="width: 100%">
  184. <el-form-item label="节目ID:">
  185. <el-input
  186. v-model="dialogForm.id"
  187. placeholder="请输入节目ID"
  188. clearable
  189. />
  190. </el-form-item>
  191. <el-form-item label="节目名称:">
  192. <el-input
  193. v-model="dialogForm.name"
  194. placeholder="请输入节目名称"
  195. clearable
  196. />
  197. </el-form-item>
  198. <el-form-item label="付费类型:">
  199. <el-select
  200. v-model="dialogForm.isFree"
  201. placeholder="请选择付费类型"
  202. clearable
  203. >
  204. <el-option
  205. v-for="item in freeOptions"
  206. :key="item.value"
  207. :value="item.value"
  208. :label="item.label"
  209. />
  210. </el-select>
  211. </el-form-item>
  212. <el-form-item label="资源平台:">
  213. <el-select
  214. v-model="dialogForm.platformId"
  215. placeholder="请选择资源平台"
  216. >
  217. <el-option
  218. v-for="item in platformOptions.filter(
  219. (i) => !i.joinType.includes('1')
  220. )"
  221. :key="item.value"
  222. :value="item.value"
  223. :label="item.label"
  224. />
  225. </el-select>
  226. </el-form-item>
  227. <el-form-item>
  228. <el-button type="primary" icon="el-icon-search" @click="getSearch"
  229. >搜索</el-button
  230. >
  231. <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
  232. </el-form-item>
  233. </el-form>
  234. <el-table :data="dialogTableData" v-loading="loading">
  235. <el-table-column label="ID" prop="id" align="center" />
  236. <el-table-column
  237. label="节目名称"
  238. prop="name"
  239. align="center"
  240. show-overflow-tooltip
  241. />
  242. <el-table-column
  243. label="资源平台"
  244. prop="platformId"
  245. align="center"
  246. :formatter="platformFormatter"
  247. />
  248. <el-table-column
  249. label="付费类型"
  250. prop="isFree"
  251. align="center"
  252. :formatter="freeFormatter"
  253. />
  254. <el-table-column
  255. label="当前状态"
  256. prop="status"
  257. align="center"
  258. :formatter="statusFormatter"
  259. />
  260. <el-table-column label="操作" align="center">
  261. <template slot-scope="scope">
  262. <el-button
  263. type="text"
  264. @click="getChecked(scope.row)"
  265. :disabled="
  266. form.adminPodCastProgramDetailResp.findIndex(
  267. (i) => i.id === scope.row.id
  268. ) === -1
  269. ? false
  270. : true
  271. "
  272. >
  273. 选择
  274. </el-button>
  275. </template>
  276. </el-table-column>
  277. </el-table>
  278. <pagination
  279. v-show="total > 0"
  280. :total="total"
  281. :page.sync="dialogForm.pageNum"
  282. :limit.sync="dialogForm.pageSize"
  283. @pagination="getList"
  284. />
  285. </el-dialog>
  286. </div>
  287. </template>
  288. <script>
  289. import { selectAnchor } from "@/api/music/anchor";
  290. import { checkList, detail, relieve, submit } from "@/api/music/blog";
  291. import {
  292. blogClassMixin,
  293. isFreeMixin,
  294. onOrOffMixin,
  295. payTypeMixin,
  296. platformMixin,
  297. } from "@/mixin/index";
  298. export default {
  299. mixins: [
  300. blogClassMixin,
  301. platformMixin,
  302. payTypeMixin,
  303. onOrOffMixin,
  304. isFreeMixin,
  305. ],
  306. data() {
  307. // 判断原价是否大于折扣价
  308. var checkPrice = (rule, value, callback) => {
  309. if (!value) {
  310. callback(new Error("请输入原价"));
  311. } else {
  312. if (this.form.discountedPrice && value <= this.form.discountedPrice) {
  313. callback(new Error("原价必须大于折扣价"));
  314. }
  315. callback();
  316. }
  317. };
  318. // 判断折扣价是否小于原价
  319. var checkDiscount = (rule, value, callback) => {
  320. if (this.form.price && value >= this.form.price) {
  321. callback(new Error("折扣价必须小于原价"));
  322. } else {
  323. callback();
  324. }
  325. };
  326. return {
  327. // 遮罩层
  328. loading: false,
  329. // 表单
  330. form: {
  331. adminPodCastProgramDetailResp: [],
  332. podcastProgramIds: [],
  333. categoryIds: [],
  334. status: 1,
  335. },
  336. // 主播
  337. anchorOptions: [],
  338. // 弹窗
  339. dialogVisible: false,
  340. // 弹窗表单
  341. dialogForm: {
  342. pageNum: 1,
  343. pageSize: 10,
  344. status: 1,
  345. platformId: null,
  346. },
  347. // 总数据
  348. total: 0,
  349. // 弹窗列表
  350. dialogTableData: [],
  351. // 只读
  352. disabled: false,
  353. // 校验
  354. rules: {
  355. name: [
  356. {
  357. required: true,
  358. message: "请输入播客专辑名称",
  359. trigger: "blur",
  360. },
  361. ],
  362. podcasterIds: [
  363. {
  364. required: true,
  365. message: "请输入主播名称",
  366. trigger: "blur",
  367. },
  368. ],
  369. categoryIds: [
  370. {
  371. required: true,
  372. message: "请选择播客分类",
  373. trigger: "change",
  374. },
  375. ],
  376. platformId: [
  377. {
  378. required: true,
  379. message: "请选择资源平台",
  380. trigger: "change",
  381. },
  382. ],
  383. charging: [
  384. {
  385. required: true,
  386. message: "请选择付费类型",
  387. trigger: "change",
  388. },
  389. ],
  390. price: [
  391. {
  392. required: true,
  393. validator: checkPrice,
  394. trigger: "blur",
  395. },
  396. ],
  397. discountedPrice: [
  398. {
  399. validator: checkDiscount,
  400. trigger: "blur",
  401. },
  402. ],
  403. thumb: [
  404. {
  405. required: true,
  406. message: "请上传播客封面",
  407. trigger: "change",
  408. },
  409. ],
  410. adminPodCastProgramDetailResp: [
  411. {
  412. required: true,
  413. message: "请关联节目",
  414. trigger: "change",
  415. },
  416. ],
  417. },
  418. // 解除关联
  419. ids: [],
  420. // 是否已选
  421. disabledChecked: false,
  422. };
  423. },
  424. mounted() {
  425. // 获取资源平台
  426. this.getPlatform({
  427. audioType: 8,
  428. });
  429. if (this.$route.query.id) {
  430. this.form.id = this.$route.query.id;
  431. this.disabled = Boolean(this.$route.query.disabled);
  432. this.getDetail();
  433. }
  434. },
  435. methods: {
  436. // 排序
  437. getChangeSort(row, sort) {
  438. const rowBean = this.form.adminPodCastProgramDetailResp[row];
  439. const sortBean = this.form.adminPodCastProgramDetailResp[sort];
  440. this.form.adminPodCastProgramDetailResp[row] = sortBean;
  441. this.form.adminPodCastProgramDetailResp[sort] = rowBean;
  442. this.form.adminPodCastProgramDetailResp =
  443. this.form.adminPodCastProgramDetailResp.filter((i) => i);
  444. // this.form.podcastProgramIds = [];
  445. // this.form.adminPodCastProgramDetailResp.map((i) => {
  446. // this.form.podcastProgramIds.push(i.id);
  447. // });
  448. // submit(this.form).then((res) => {
  449. // if (res.code === 0) {
  450. // let title = "修改成功!";
  451. // this.$message.success(`${title}`);
  452. // this.getDetail();
  453. // }
  454. // });
  455. },
  456. // 详情
  457. getDetail() {
  458. detail(this.form.id).then((res) => {
  459. if (res.code === 0) {
  460. this.form = res.data;
  461. this.anchorOptions = [];
  462. res.data.adminPrdCasterResp.map((i) => {
  463. this.anchorOptions.push({
  464. value: i.podcasterId,
  465. label: i.podcasterName,
  466. });
  467. });
  468. this.form.podcasterIds = res.data.podcasterIds.split(",");
  469. }
  470. });
  471. },
  472. // 查询主播
  473. getSelect(e) {
  474. if (e) {
  475. setTimeout(() => {
  476. this.anchorOptions = [];
  477. selectAnchor(e).then((res) => {
  478. if (res.code === 0) {
  479. res.data.map((i) => {
  480. this.anchorOptions.push({
  481. value: i.id,
  482. label: i.nickname,
  483. });
  484. });
  485. }
  486. }, 500);
  487. });
  488. }
  489. },
  490. // 上传
  491. upload(e) {
  492. this.form.thumb = e.file;
  493. },
  494. // 弹窗
  495. getDialog() {
  496. this.dialogVisible = true;
  497. this.dialogForm.platformId = this.platformOptions.filter(
  498. (i) => !i.joinType.includes("1")
  499. )[0].value;
  500. this.getList();
  501. },
  502. // 节目列表
  503. getList() {
  504. this.loading = true;
  505. checkList(this.dialogForm).then((res) => {
  506. if (res.code === 0) {
  507. this.dialogTableData = res.data.records;
  508. this.total = res.data.total;
  509. this.loading = false;
  510. }
  511. });
  512. },
  513. // 搜索
  514. getSearch() {
  515. this.dialogForm.pageNum = 1;
  516. this.getList();
  517. },
  518. // 重置
  519. getRefresh() {
  520. this.dialogForm = {
  521. pageNum: 1,
  522. pageSize: 10,
  523. status: 1,
  524. platformId: this.platformOptions[0].value,
  525. };
  526. this.getList();
  527. },
  528. // 选择
  529. getChecked(row) {
  530. this.form.adminPodCastProgramDetailResp.push(row);
  531. this.$message.success("选择成功!");
  532. },
  533. // 解除关联
  534. getDelete() {
  535. if (this.form.id) {
  536. relieve({
  537. id: this.form.id,
  538. podcastProgramIds: this.ids,
  539. }).then((res) => {
  540. if (res.code === 0) {
  541. this.$message.success("解除成功!");
  542. this.getDetail();
  543. }
  544. });
  545. } else {
  546. this.ids.map((i) => {
  547. this.form.adminPodCastProgramDetailResp.map((j, index) => {
  548. if (j.id === i) {
  549. this.form.adminPodCastProgramDetailResp.splice(index, 1);
  550. this.$message.success("解除成功!");
  551. }
  552. });
  553. });
  554. }
  555. },
  556. // 确定
  557. getSubmit() {
  558. this.$refs.form.validate((valid) => {
  559. if (valid) {
  560. let title = this.form.id ? "编辑成功!" : "新增成功!";
  561. this.form.podcastProgramIds = [];
  562. this.form.adminPodCastProgramDetailResp.map((i) => {
  563. this.form.podcastProgramIds.push(i.id);
  564. });
  565. submit(this.form).then((res) => {
  566. if (res.code === 0) {
  567. this.$message.success(`${title}`);
  568. if (this.form.id) {
  569. delete this.form.adminPodCastProgramDetailResp;
  570. this.getDetail();
  571. } else {
  572. this.cancel();
  573. }
  574. }
  575. });
  576. } else {
  577. return false;
  578. }
  579. });
  580. },
  581. // 多选
  582. handleSelect(e) {
  583. this.ids = [];
  584. e.map((i) => {
  585. this.ids.push(i.id);
  586. });
  587. },
  588. // 取消
  589. cancel() {
  590. this.$tab.closeOpenPage("/music/blog");
  591. },
  592. // 字典翻译
  593. platformFormatter(row) {
  594. return this.selectDictLabel(this.platformOptions, row.platformId);
  595. },
  596. statusFormatter(row) {
  597. return this.selectDictLabel(this.onOrOffOptions, row.status);
  598. },
  599. freeFormatter(row) {
  600. return this.selectDictLabel(this.freeOptions, row.isFree);
  601. },
  602. },
  603. };
  604. </script>
  605. <style lang="scss" scoped>
  606. .form {
  607. .el-form-item {
  608. width: 500px;
  609. }
  610. }
  611. </style>