唤醒音管理

src/views/operation/waken/detail.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" :rules="rules" label-width="110px">
+      <el-form-item label="唤醒音名称：" prop="name">
+        <el-input v-model="form.name" placeholder="请输入唤醒音名称" />
+      </el-form-item>
+      <el-form-item label="频道属性：" prop="attributeType">
+        <el-select v-model="form.attributeType" placeholder="请选择频道属性">
+          <el-option v-for="item in channelOptions" :key="item.value" :value="item.value"
+            :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关联设备：" prop="deviceIds">
+        <el-select v-model="form.deviceIds" multiple placeholder="请选择关联设备">
+          <el-option v-for="item in deviceOptions" :key="item.clientTypeId"
+            :value="item.clientTypeId.toString()" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="唤醒音封面：" prop="pic">
+        <Upload listType="picture-card" :url="form.pic" @upload="upload" />
+      </el-form-item>
+      <el-form-item label="唤醒音内容:" style="width: 1000px">
+        <el-button type="primary" icon="el-icon-plus" :disabled="!form.attributeType" @click="getDialog">
+          关联内容
+        </el-button>
+        <el-table :data="form.audioDefaultResp">
+          <el-table-column label="音频ID" align="center" prop="audioId" show-overflow-tooltip />
+          <el-table-column label="音频名称" align="center" prop="audioName" show-overflow-tooltip />
+          <el-table-column label="音频封面" align="center" width="100px">
+            <template slot-scope="scope">
+              <el-image :src="scope.row.audioPic" />
+            </template>
+          </el-table-column>
+          <el-table-column label="付费类型" align="center" prop="isFree" :formatter="freeFormatter" />
+          <el-table-column label="资源平台" align="center" prop="platformId" :formatter="platfromFormatter" />
+          <el-table-column label="操作" align="center">
+            <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 style="margin-left: 110px">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="getSubmit">确定</el-button>
+    </div>
+
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" title="关联内容" width="1100px">
+      <el-form inline size="mini" style="width:100%">
+        <el-form-item label="音频类型：">
+          <el-select v-if="form.attributeType" v-model="dialogForm.audioType" placeholder="请选择音频类型">
+            <el-option v-for="item in channelOptions.find(i => i.value === form.attributeType).children"
+              :key="item.value" :value="item.value" :label="item.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="资源平台：">
+          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
+            <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="内容名称：">
+          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+          <el-button icon="el-icon-refrash" @click="getRefrash">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData" ref="table" :row-key="getRowKey" @selection-change="getChange">
+        <el-table-column type="selection" align="center" :reserve-selection="true" />
+        <el-table-column label="音频ID" align="center" prop="audioId" />
+        <el-table-column label="音频名称" align="center" prop="audioName" />
+        <el-table-column label="音频封面" align="center" width="100px">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.audioPic" />
+          </template>
+        </el-table-column>
+        <el-table-column label="付费类型" align="center" prop="isFree" :formatter="freeFormatter" />
+        <el-table-column label="资源平台" align="center" prop="platformId" :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>
+  </div>
+</template>
+
+<script>
+import Upload from '@/components/Upload/index.vue'
+import { list } from '@/api/operation/channel'
+import { detail, devices, submit } from '@/api/operation/waken'
+import { platformMixin, isFreeMixin } from '@/mixin/index'
+export default {
+  mixins: [platformMixin, isFreeMixin],
+  components: {
+    Upload
+  },
+  data() {
+    return {
+      // 表单
+      form: {
+        deviceIds: [],
+        audioDefaultResp: []
+      },
+      // 列表
+      tableData: [],
+      // 频道属性
+      channelOptions: [{
+        value: 1,
+        label: '广播',
+        children: [{
+          value: 2,
+          label: '广播电台'
+        }]
+      }, {
+        value: 3,
+        label: '节目',
+        children: [{
+          value: 6,
+          label: '节目'
+        }, {
+          value: 11,
+          label: '歌曲'
+        }]
+      }],
+      // 关联设备
+      deviceOptions: [],
+      // 弹窗
+      dialogVisible: false,
+      // 弹窗表单
+      dialogForm: {
+        pageNum: 1,
+        pageSize: 10,
+        platformId: null,
+        audioType: null
+      },
+      // 总数
+      total: 0,
+      // 弹窗列表
+      tableData: [],
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入唤醒音名称', trigger: 'blur'
+        }],
+        attributeType: [{
+          required: true, message: '请选择频道属性', trigger: 'change'
+        }],
+        deviceIds: [{
+          required: true, message: '请选择关联设备', trigger: 'change'
+        }],
+        pic: [{
+          required: true, message: '请上传封面', trigger: 'change'
+        }]
+      }
+    }
+  },
+  watch: {
+    'form.attributeType'(val) {
+      if (val) {
+        this.dialogForm.audioType = this.channelOptions.find(i => i.value === val).children[0].value
+        this.getPlatform({
+          audioType: this.dialogForm.audioType,
+          joinType: 3
+        })
+      }
+    },
+    async 'dialogForm.audioType'(val) {
+      if (this.dialogVisible) {
+        await this.getPlatform({
+          audioType: val,
+          joinType: 3
+        })
+        this.getRefrash()
+      }
+    }
+  },
+  mounted() {
+    this.getDevices()
+    if (this.$route.query.id) {
+      this.form.id = this.$route.query.id
+    }
+  },
+  methods: {
+    // 关联设备
+    getDevices() {
+      devices(2).then(res => {
+        if (res.code === 0) {
+          this.deviceOptions = res.data
+          if (this.form.id) {
+            this.getDetail()
+          }
+        }
+      })
+    },
+
+    // 详情
+    getDetail() {
+      detail(this.form.id).then(res => {
+        if (res.code === 0) {
+          this.form = res.data
+          this.form.deviceIds = res.data.deviceIds.split(',')
+          this.deviceOptions.unshift.apply(this.deviceOptions, res.data.deviceList)
+        }
+      })
+    },
+
+    // 上传
+    upload(e) {
+      this.form.pic = e.file
+    },
+
+    // 删除
+    getDelete(row) {
+      this.form.audioDefaultResp = this.form.audioDefaultResp.filter(i => i.audioId !== row.audioId)
+    },
+
+    // 弹窗
+    getDialog() {
+      this.dialogForm.platformId = this.platformOptions[0].value
+      this.dialogVisible = true
+      this.getList()
+    },
+
+    // 音频列表
+    getList() {
+      list(this.dialogForm).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.$refs.table.clearSelection()
+          if (this.form.audioDefaultResp.length > 0) {
+            this.form.audioDefaultResp.map(i => {
+              let row = this.tableData.find(j => j.audioId === i.audioId)
+              if (row) {
+                this.$refs.table.toggleRowSelection(row, true)
+              }
+            })
+          }
+        }
+      })
+    },
+
+    // 搜索
+    getSearch() {
+      this.dialogForm.pageNum = 1
+      this.getList()
+    },
+
+    // 重置
+    getRefrash() {
+      this.dialogForm = {
+        pageNum: 1,
+        pageSize: 10,
+        platformId: this.platformOptions[0].value,
+        audioType: this.dialogForm.audioType
+      }
+      this.getList()
+    },
+
+    getRowKey(row) {
+      return row.audioId
+    },
+
+    // 表格多选
+    getChange(row) {
+      this.form.audioList = []
+      if (row.length > 0) {
+        row.map(i => {
+          if (this.form.audioDefaultResp.findIndex(j => j.audioId === i.audioId) === -1) {
+            this.form.audioDefaultResp.push(i)
+          }
+        })
+      }
+    },
+
+    // 取消
+    cancel() {
+      this.$tab.closeOpenPage('/operation/waken')
+    },
+
+    // 提交
+    getSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.deviceIds = this.form.deviceIds.join(',')
+          this.form.audioList = []
+          this.form.audioDefaultResp.map(i => {
+            this.form.audioList.push({
+              audioId: i.audioId,
+              audioType: i.audioType
+            })
+          })
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.form.id ? this.getDevices() : this.cancel()
+            }
+          })
+        }
+      })
+
+    },
+
+    // 字典翻译
+    platfromFormatter(row) {
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+    },
+    freeFormatter(row) {
+      return this.selectDictLabel(this.freeOptions, row.isFree)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 500px;
+}
+
+::v-deep .el-dialog__body {
+  height: 690px;
+  overflow-y: scroll;
+}
+</style>

src/views/operation/waken/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="app-container">
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDetail()">新增换醒音</el-button>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column type="index" label="序号" align="center" />
+      <el-table-column label="唤醒音名称" align="center" prop="name" show-overflow-tooltip />
+      <el-table-column label="唤醒音封面" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.pic" />
+        </template>
+      </el-table-column>
+      <el-table-column label="关联设备" align="center" :formatter="devFormatter" show-overflow-tooltip />
+      <el-table-column label="关联内容数" align="center" prop="num" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDetail(scope.row.id)">编辑</el-button>
+          <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { list, devices, remove } from '@/api/operation/waken'
+export default {
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 列表
+      tableData: [],
+      // 设备列表
+      deviceOptions: []
+    }
+  },
+  mounted() {
+    this.getList()
+    this.getDevices()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list().then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data
+          this.loading = false
+        }
+      })
+    },
+
+    // 设备列表
+    getDevices() {
+      this.$nextTick(() => {
+        devices(1).then(res => {
+          if (res.code === 0) {
+            this.deviceOptions = res.data
+          }
+        })
+      })
+    },
+
+    // 详情
+    getDetail(id) {
+      this.$router.push({
+        path: `/operation/waken/detail`,
+        query: {
+          id: id
+        }
+      })
+    },
+
+    // 删除
+    getDelete(row) {
+      this.$confirm(`是否删除${row.name}?`, `提示`, {
+        type: 'warning'
+      }).then(() => {
+        remove(row.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    // 字典翻译
+    devFormatter(row) {
+      return this.deviceOptions.length > 0 ? row.deviceIds.split(',').map(i => this.deviceOptions.find(j => j.clientTypeId == i).name).join('，') : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>