detail.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
  4. <el-form-item label="有效时间:" prop="startTime">
  5. <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
  6. end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
  7. </el-form-item>
  8. <el-form-item label="内容:" prop="audioName">
  9. <el-input v-model="form.audioName" placeholder="请选择内容" @focus="getDialog" />
  10. </el-form-item>
  11. <el-form-item label="封面模式:" prop="isCustom">
  12. <el-select v-model="form.isCustom" placeholder="请选择封面模式">
  13. <el-option v-for="item in coverOptions" :key="item.value" :value="item.value" :label="item.label" />
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item v-if="form.isCustom === 0" label="内容封面:" prop="pic">
  17. <Upload listType="picture-card" :url="form.pic" @upload="upload" :disabled="disabled" />
  18. </el-form-item>
  19. </el-form>
  20. <div class="form-btn">
  21. <el-button @click="cancel">取消</el-button>
  22. <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
  23. </div>
  24. <!-- 弹窗 -->
  25. <el-dialog :visible.sync="dialogVisible" title="添加内容" width="1100px">
  26. <el-form inline size="mini" style="width: 100%">
  27. <el-form-item label="资源平台:">
  28. <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
  29. <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item label="音频类型:">
  33. <el-select v-model="dialogForm.audioType" placeholder="请选择音频类型">
  34. <el-option v-for="item in audioTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
  35. </el-select>
  36. </el-form-item>
  37. <el-form-item label="音频名称:">
  38. <el-input v-model="dialogForm.keyword" placeholder="请输入音频名称" clearable />
  39. </el-form-item>
  40. <el-form-item>
  41. <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
  42. <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
  43. </el-form-item>
  44. </el-form>
  45. <el-table :data="tableData" v-loading="loading">
  46. <el-table-column label="内容ID" prop="audioId" align="center" show-overflow-tooltip />
  47. <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
  48. <el-table-column label="音频封面" align="center" width="100px">
  49. <template slot-scope="scope">
  50. <el-image :src="scope.row.audioPic" />
  51. </template>
  52. </el-table-column>
  53. <el-table-column label="音频作者" prop="singerName" align="center" show-overflow-tooltip />
  54. <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip />
  55. <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioTypeFormatter" />
  56. <el-table-column label="音频数量" prop="programCount" align="center" />
  57. <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
  58. <el-table-column label="操作" align="center">
  59. <template slot-scope="scope">
  60. <el-button type="text" @click="getChecked(scope.row)">选择</el-button>
  61. </template>
  62. </el-table-column>
  63. </el-table>
  64. <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
  65. @pagination="getList" />
  66. </el-dialog>
  67. </div>
  68. </template>
  69. <script>
  70. import { radioList } from '@/api/operation/recommend'
  71. import { create, detail, edit } from '@/api/registration/content'
  72. import { platformMixin, audioMixin, isFreeMixin, coverMixin } from '@/mixin/index'
  73. export default {
  74. mixins: [platformMixin, audioMixin, isFreeMixin, coverMixin],
  75. data() {
  76. return {
  77. // 遮罩层
  78. loading: false,
  79. // 表单
  80. form: {
  81. startTime: '',
  82. endTime: '',
  83. audioName: '',
  84. isCustom: null,
  85. pic: '',
  86. status: 0
  87. },
  88. // 有效时间
  89. date: [],
  90. // 弹窗
  91. dialogVisible: false,
  92. // 弹窗表单
  93. dialogForm: {
  94. pageNum: 1,
  95. pageSize: 10,
  96. platformId: 1,
  97. audioType: null,
  98. keyword: undefined
  99. },
  100. // 列表
  101. tableData: [],
  102. // 总数据
  103. total: 0,
  104. // 校验
  105. rules: {
  106. startTime: [{
  107. required: true, message: '请选择有效时间', trigger: 'change'
  108. }],
  109. audioName: [{
  110. required: true, message: '请选择内容', trigger: 'change'
  111. }],
  112. isCustom: [{
  113. required: true, message: '请选择封面模式', trigger: 'change'
  114. }],
  115. pic: [{
  116. required: true, message: '请上传内容封面', trigger: 'change'
  117. }]
  118. },
  119. // 只读
  120. disabled: false
  121. }
  122. },
  123. watch: {
  124. 'dialogForm.platformId': {
  125. async handler(val) {
  126. await this.getAudioType(val)
  127. this.dialogForm.audioType = this.audioTypeOptions[0].value
  128. this.getList()
  129. },
  130. deep: true
  131. },
  132. date(val) {
  133. this.form.startTime = val ? val[0] : ''
  134. this.form.endTime = val ? val[1] : ''
  135. }
  136. },
  137. mounted() {
  138. this.getPlatform({})
  139. if (this.$route.query.id) {
  140. this.form.id = this.$route.query.id
  141. this.disabled = Boolean(this.$route.query.disabled)
  142. this.getDetail()
  143. }
  144. },
  145. methods: {
  146. // 详情
  147. getDetail() {
  148. detail(this.form.id).then(res => {
  149. if (res.code === 0) {
  150. this.form = res.data
  151. this.date = [res.data.startTime, res.data.endTime]
  152. }
  153. })
  154. },
  155. // 打开弹窗
  156. async getDialog() {
  157. this.dialogVisible = true
  158. await this.getAudioType(this.dialogForm.platformId)
  159. this.dialogForm.audioType = this.audioTypeOptions[0].value
  160. this.getList()
  161. },
  162. // 音频列表
  163. getList() {
  164. this.loading = true
  165. radioList(this.dialogForm).then(res => {
  166. if (res.code === 0) {
  167. this.tableData = res.data.records
  168. this.total = res.data.total
  169. this.loading = false
  170. }
  171. })
  172. },
  173. // 搜索
  174. getSearch() {
  175. this.dialogForm.pageNum = 1
  176. this.getList()
  177. },
  178. // 重置
  179. getRefresh() {
  180. this.dialogForm = {
  181. pageNum: 1,
  182. pageSize: 10,
  183. audioType: this.audioTypeOptions[0].value,
  184. platformId: 1
  185. }
  186. this.getList()
  187. },
  188. // 选择
  189. getChecked(row) {
  190. this.form.audioId = row.audioId
  191. this.form.audioInfo = row.description
  192. this.form.audioName = row.audioName
  193. this.form.audioType = row.audioType
  194. this.form.platformId = row.platformId
  195. this.form.pic = row.audioPic
  196. this.$message.success('选择成功!')
  197. this.dialogVisible = false
  198. },
  199. // 上传
  200. upload(e) {
  201. this.form.pic = e.file
  202. },
  203. // 取消
  204. cancel() {
  205. this.$tab.closeOpenPage('/registration/contentConfig')
  206. },
  207. // 确定
  208. getSubmit() {
  209. this.$refs.form.validate((valid) => {
  210. if (valid) {
  211. if (this.form.id) {
  212. edit(this.form).then(res => {
  213. if (res.code === 0) {
  214. this.$message.success('编辑成功!')
  215. this.cancel()
  216. }
  217. })
  218. } else {
  219. create(this.form).then(res => {
  220. if (res.code === 0) {
  221. this.$message.success('新增成功!')
  222. this.cancel()
  223. }
  224. })
  225. }
  226. } else {
  227. return false
  228. }
  229. })
  230. },
  231. // 字典翻译
  232. audioTypeFormatter(row) {
  233. return this.selectDictLabel(this.audioOptions, row.audioType)
  234. },
  235. freeFormatter(row) {
  236. return this.selectDictLabel(this.freeOptions, row.isFree)
  237. }
  238. }
  239. }
  240. </script>
  241. <style lang="scss" scoped>
  242. .el-form {
  243. width: 500px;
  244. }
  245. </style>