ohplay_system/src/views/operation/channel/detail.vue

<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form class="form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="频道名称：">
            <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
          </el-form-item>
          <el-form-item label="频道属性：">
            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled">
              <el-option v-for="item in dict.type.channels_type" :key="item.value" :value="Number(item.value)"
                :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="频道封面：">
            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="频道简介：">
            <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="频道内容：">
        <el-button type="primary" icon="el-icon-plus" @click="getDialog">
          新增内容
        </el-button>
        <el-table :data="tableData" v-loading="loading">
          <el-table-column label="内容ID" prop="audioId" align="center" />
          <el-table-column label="音频名称" prop="audioName" align="center" />
          <el-table-column label="音频封面" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
            </template>
          </el-table-column>
          <el-table-column label="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
          <el-table-column label="来源" prop="source" align="center" width="100px" />
          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="新增内容" width="1000px">
      <!-- 搜索 -->
      <el-form inline size="mini" @submit.native.prevent>
        <el-form-item label="内容名称：">
          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
        </el-form-item>
        <el-form-item label="分类：">
          <el-select v-model="dialogForm.classifyId" placeholder="请选择分类" clearable>
            <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table :data="dialogData" height="476" ref="table" :row-key="getRowKey"
        @selection-change="getChange">
        <el-table-column type="selection" align="center" :reserve-selection="true" />
        <el-table-column label="内容ID" prop="id" align="center" />
        <el-table-column label="音频名称" prop="audioName" align="center" />
        <el-table-column label="音频封面" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.audioPic" :previewSrcList="[scope.row.audioPic]" fit="scale-down" />
          </template>
        </el-table-column>
        <el-table-column label="付费" prop="isFree" align="center" width="100px" :formatter="freeFormatter" />
        <el-table-column label="来源" prop="source" align="center" width="100px" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
        :limit.sync="dialogForm.pageSize" @pagination="getPage" />
      <div slot="footer">
        <el-button @click="getAdd" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload/index'
import { channelList, channelTemplate, channelDetail, edit, list, remove, queryList } from '@/api/operation/channel'
import { isFreeMixin } from '@/mixin/index'
export default {
  dicts: ['channels_type'],
  mixins: [isFreeMixin],
  components: {
    Upload
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹窗
      dialogVisible: false,
      // 频道内容
      tableData: [],
      dialogData: [],
      // 编辑表单
      form: {},
      // 频道属性
      channelId: this.$route.query.channelId,
      disabled: this.$route.query.index == '0' || this.$route.query.index == '1' ? true : false,
      // 列表表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      classifyOptions: [],
      // 添加频道内容
      ids: [],
    }
  },
  mounted() {
    this.getDetail()
    this.getList()
  },
  methods: {
    // 频道详情
    getDetail() {
      channelDetail({
        channelId: this.channelId
      }).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 频道内容列表
    getList() {
      queryList(this.channelId).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },

    // 可选全部频道内容列表
    getPage() {
      channelTemplate({
        audioType: this.form.channelType
      }).then(res => {
        if (res.code === 0) {
          this.classifyOptions = res.data
        }
      })
      channelList({
        channelId: this.channelId,
        audioType: this.form.channelType,
        ...this.dialogForm
      }).then(res => {
        if (res.code == 0) {
          this.dialogData = res.data[0].pageData.records
          this.total = res.data[0].pageData.total
          if (this.tableData.length > 0) {
            this.tableData.map(i => {
              let row = res.data[0].pageData.records.find(j => j.id === i.audioId)
              if (row) {
                this.$refs.table.toggleRowSelection(row, true)
              }
            })
          }
        }
      })
    },

    // 上传频道封面
    getUpload(e) {
      this.form.pic = e.file
    },

    // 打开弹窗
    getDialog() {
      this.dialogVisible = true
      this.ids = []
      this.getPage()
    },

    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1
      this.getPage()
    },
    // 重置
    getRefresh() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        ...this.data
      }
      this.getPage()
    },

    // 提交
    submit() {
      edit(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.getDetail()
        }
      })
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage('/operation/channel')
    },

    // 删除
    getDelete(row) {
      remove(row.id).then(res => {
        if (res.code === 0) {
          this.$message.success('删除成功！')
          this.getList()
        }
      })
    },

    getRowKey(row) {
      return row.id
    },

    // 表格多选
    getChange(row) {
      this.ids = []
      if (row.length > 0) {
        row.map(i => {
          if (this.ids.findIndex(j => j === i.id) === -1) {
            this.ids.push(i.id)
          }
        })
      }
    },

    // 添加频道内容
    getAdd() {
      list({
        audioType: this.form.channelType,
        channelDefaultId: this.channelId,
        ids: this.ids
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('添加成功！')
          this.dialogVisible = false
          this.getList()
        }
      })
    },

    // 字典翻译
    freeFormatter(row) {
      return this.selectDictLabel(this.freeOptions, row.isFree)
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 1000px;
}

.el-image {
  width: 80px;
  height: 80px;
}
</style>