Jelajahi Sumber

运营管理 定制频道

DESKTOP-O04BTUJ\muzen 2 tahun lalu
induk
melakukan
f2130930f3
2 mengubah file dengan 515 tambahan dan 0 penghapusan
  1. 282 0
      src/views/operation/channel/detail.vue
  2. 233 0
      src/views/operation/channel/index.vue

+ 282 - 0
src/views/operation/channel/detail.vue

@@ -0,0 +1,282 @@
+<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" height="381" 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 />
+        <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
+          this.$refs.table.clearSelection()
+          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)
+              }
+            })
+          }
+        }
+      })
+    },
+
+    // 上传频道封面
+    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('/channel/custom')
+    },
+
+    // 删除
+    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>

+ 233 - 0
src/views/operation/channel/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="app-container">
+    <!-- 新增 -->
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()"
+      v-hasPermi="['operation:channel:add']">
+      新增频道配置
+    </el-button>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="序号" align="center" type="index" />
+      <el-table-column label="频道配置名称" prop="name" align="center" />
+      <el-table-column label="部署形式" prop="type" align="center" :formatter="typeFormatter" />
+      <el-table-column label="设备" prop="deviceIds" align="center" :formatter="devFormatter"
+        show-overflow-tooltip />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDialog(scope.row, scope.$index)"
+            v-hasPermi="['operation:channel:edit']">编辑</el-button>
+          <el-button v-if="scope.$index !== 0" type="delete" @click="getDelete(scope.row)"
+            v-hasPermi="['operation:channel:delete']">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗 -->
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="950px">
+      <el-form label-width="auto">
+        <el-form-item v-if="index !== 1" label="频道配置名称:" style="width: 300px">
+          <el-input v-model="dialogForm.name" placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item v-if="index !== 1" label="关联设备:">
+          <el-select v-model="ids" multiple placeholder="请选择关联设备">
+            <el-option v-for="item in devOptions" :key="item.label" :value="item.value.toString()"
+              :label="item.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="title === '编辑'" label="内容列表:">
+          <el-table :data="list" v-loading="dialog_loading" height="489" lazy>
+            <el-table-column label="序号" type="index" align="center" />
+            <el-table-column label="频道名称" prop="aliasName" align="center" />
+            <el-table-column label="频道封面" align="center" width="100px">
+              <template slot-scope="scope">
+                <el-image :src="scope.row.pic"></el-image>
+              </template>
+            </el-table-column>
+            <el-table-column label="频道简介" prop="description" align="center" show-overflow-tooltip />
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" @click="edit(scope)">编辑</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" v-if="index !== 1">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="getSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { channelPage, page, create, editPage, getRemove, devList } from '@/api/operation/channel'
+export default {
+  name: 'Channel',
+  dicts: ['deployment_form'],
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      dialog_loading: false,
+      // 列表
+      tableData: [],
+      list: [],
+      // 弹窗
+      dialogVisible: false,
+      title: '',
+      // 设备
+      devOptions: [],
+      allDevOptions: [],
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      index: 0,
+      dialogForm: {},
+      ids: []
+    };
+  },
+  watch: {
+    ids(val) {
+      this.dialogForm.deviceIds = val.join(',')
+    }
+  },
+  mounted() {
+    this.getDevList()
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      page(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data
+          this.loading = false
+        }
+      })
+    },
+
+    // 全部设备
+    getDevList() {
+      devList(1).then(res => {
+        if (res.code === 0) {
+          this.allDevOptions = []
+          res.data.map(i => {
+            this.allDevOptions.push({
+              value: i.clientTypeId,
+              label: i.name
+            })
+          })
+        }
+      })
+    },
+
+    // 编辑
+    edit(e) {
+      this.$router.push({
+        path: `/operation/channel/detail`,
+        query: {
+          channelId: e.row.id,
+          audioType: e.row.channelType,
+          index: e.$index
+        }
+      })
+    },
+
+    // 删除
+    getDelete(row) {
+      this.$confirm(`是否删除${row.name}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        getRemove(row.id).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功!')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    // 弹窗
+    getDialog(row, index) {
+      this.dialogVisible = true
+      this.index = index + 1
+
+      // 新增 / 编辑时的设备
+      let type = row ? 1 : 0
+      devList(type).then(res => {
+        if (res.code === 0) {
+          this.devOptions = []
+          res.data.map(i => {
+            this.devOptions.push({
+              value: i.clientTypeId,
+              label: i.name
+            })
+          })
+        }
+      })
+
+      if (row) {
+        this.title = '编辑'
+        this.dialogForm = row
+        if (this.index !== 1) {
+          this.ids = this.dialogForm.deviceIds.split(',')
+        }
+        channelPage(row.id).then(res => {
+          if (res.code === 0) {
+            this.list = res.data
+            this.dialog_loading = false
+          }
+        })
+      } else {
+        this.ids = []
+        this.dialogForm = {}
+        this.title = '新增'
+      }
+    },
+
+    // 创建
+    getSubmit() {
+      if (this.title === '编辑') {
+        editPage(this.dialogForm).then(res => {
+          if (res.code === 0) {
+            this.$message.success('修改成功!')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      } else {
+        create({
+          name: this.dialogForm.name,
+          deviceIds: this.dialogForm.deviceIds,
+          type: 1
+        }).then(res => {
+          if (res.code === 0) {
+            this.$message.success('新增成功!')
+            this.dialogVisible = false
+            this.getList()
+          }
+        })
+      }
+    },
+
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+      this.getList()
+    },
+
+    // 字典翻译
+    typeFormatter(row) {
+      return this.selectDictLabel(this.dict.type.deployment_form, row.type)
+    },
+    devFormatter(row) {
+      return row.deviceIds ? row.deviceIds.split(',').map(i => this.selectDictLabel(this.allDevOptions, i)).join(',') : ''
+    }
+  },
+};
+</script>