ohplay_system/src/components/Dialog/index.vue

<template>
  <!-- 弹窗 -->
  <el-dialog :visible.sync="dialogVisible" title="关联内容" width="1400px">
    <el-form inline size="mini" style="width:100%">
      <el-form-item label="音频类型：">
        <el-select v-model="dialogForm.audioType">
          <el-option v-for="item in channelOptions[channelType]" :key="item.value" :value="item.value"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="资源平台：">
        <el-select v-model="dialogForm.platformId" :disabled="[16, 17].includes(channelType)" clearable>
          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="付费类型：" v-if="![2, 10, 11].includes(dialogForm.audioType)">
        <el-select v-model="dialogForm.isFree" placeholder="请选择付费类型" clearable>
          <el-option v-for="item in freeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="内容名称：">
        <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" ref="tableData" :row-key="getRowKey" @selection-change="getChange" v-loading="loading">
      <el-table-column v-if="!isOnly" type="selection" align="center" key="selection" :reserve-selection="true" />
      <el-table-column label="音频ID" prop="audioId" align="center" key="audioId" show-overflow-tooltip />
      <el-table-column label="音频名称" prop="audioName" align="center" key="audioName" show-overflow-tooltip />
      <el-table-column label="音频封面" align="center" key="audioPic" width="100px">
        <template slot-scope="scope">
          <el-image v-if="scope.row.audioPic" :src="scope.row.audioPic" />
        </template>
      </el-table-column>
      <el-table-column label="音频作者" align="center" key="singerName" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>
            {{ scope.row.singerName ? scope.row.singerName : '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="专辑名称" prop="songName" align="center" key="songName" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>
            {{ scope.row.songName ? scope.row.songName : '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="付费类型" prop="isFree" align="center" key="isFree" :formatter="freeFormatter" />
      <el-table-column label="资源平台" align="center" key="platformId" :formatter="platfromFormatter" />
      <el-table-column v-if="isOnly" label="操作" width="50px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleChoice(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
        @pagination="getList" />
    </div>
  </el-dialog>
</template>

<script>
import { list } from '@/api/operation/channel'
import { platformMixin, isFreeMixin, channelMixin } from '@/mixin/index'
export default {
  mixins: [platformMixin, isFreeMixin, channelMixin],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    channelType: {
      type: String | Number,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    },
    // 是否单选
    isOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总数
      total: 0,
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        platformId: null,
        audioType: null
      },
      // 弹窗列表
      tableData: [],
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.dialogForm.platformId = this.channelType === 16 ? 3 : this.channelType === 17 ? 2 : null
        this.getPlatform({
          audioType: this.dialogForm.audioType
        })
        this.getList()
      }
    },
    channelType(val) {
      this.dialogForm.audioType = this.channelOptions[val][0].value
    },
    'dialogForm.audioType'(val) {
      if (this.dialogVisible) {
        this.getPlatform({
          audioType: val
        })
        this.getList()
      }
    }
  },
  computed: {
    // 弹窗
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('close', val)
      }
    }
  },
  methods: {
    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        audioType: this.dialogForm.audioType,
        platformId: null,
      }
      this.getList()
    },

    // 列表
    getList() {
      this.loading = true
      list(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
          this.$refs.tableData.clearSelection()
          if (this.data.length > 0) {
            this.data.map(i => {
              let row = this.tableData.find(j => j.audioId === i.audioId)
              if (row) {
                this.$refs.tableData.toggleRowSelection(row, true)
              }
            })
          }
        }
      })
    },

    getRowKey(row) {
      return row.audioId
    },

    // 选择
    getChange(row) {
      if (row.length > 0) {
        row.map(i => {
          if (this.data.findIndex(j => j.audioId === i.audioId) === -1) {
            this.data.push(i)
          }
        })
      }
    },

    // 单选
    handleChoice(row) {
      this.$emit('handleChoice', row)
    },

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