公共弹窗组件

src/components/Dialog/index.vue

@@ -0,0 +1,181 @@
+<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 type="selection" align="center" :reserve-selection="true" />
+      <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
+      <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+      <el-table-column label="音频封面" align="center" 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="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
+      <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
+    </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: () => []
+    }
+  },
+  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.getList()
+      }
+    },
+    channelType(val) {
+      this.getPlatform({
+        audioType: this.dialogForm.audioType = this.channelOptions[val][0].value
+      })
+    },
+  },
+  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)
+          }
+        })
+      }
+    },
+
+    // 字典翻译
+    freeFormatter(row) {
+      return this.selectDictLabel(this.freeOptions, row.isFree)
+    },
+    platfromFormatter(row) {
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 610px;
+  overflow-y: scroll;
+}
+</style>