web端党史迁移完毕

packages/3.0.0/AppPartyHistoryClass/components/seriesManage.vue

@@ -0,0 +1,186 @@
+<template>
+  <section class="AppFoundingHundred">
+    <ai-list isTabs v-if="showList">
+      <template #title>
+        <ai-title title="剧集管理" isShowBottomBorder :isShowBack="true" @onBackClick="$emit('back')"></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template slot="left">
+            <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
+          </template>
+          <!--          <template slot="right">-->
+          <!--            <el-input placeholder="课程主题" size="small" suffix-icon="iconfont iconSearch"></el-input>-->
+          <!--            <el-button type="primary" icon="iconfont iconSearch" size="small">查询</el-button>-->
+          <!--            <el-button icon="el-icon-refresh-right" size="small">重置</el-button>-->
+          <!--          </template>-->
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          stripe
+          :total="total"
+          :current.sync="page.current"
+          :size.sync="page.size"
+          style="margin-top: 10px;"
+          @getList="getList">
+          <el-table-column slot="options" label="操作" align="center">
+            <div slot-scope="{row}">
+              <el-button type="text" icon="iconfont iconChange" :title="row.status==1?'取消发布':'发布'"
+                         @click="handleChange(row)"/>
+              <el-button type="text" icon="iconfont iconMediaPlayer_Play" title="播放"
+                         @click="handlePlay(row)"/>
+              <el-button type="text" icon="iconfont iconEdit" title="编辑"
+                         @click="handleEdit(row)"/>
+              <el-button type="text" icon="iconfont iconDelete" title="删除"
+                         @click="handleDelete(row)"/>
+            </div>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <component :is="comp" v-else :row="currentRow" :parentRow="row" :instance="instance" :dict="dict" :permissions="permissions"
+               @back="back"
+               :isEdit="isEdit"></component>
+    <el-dialog
+      title="播放"
+      :visible.sync="dialog"
+      @close="$refs['video'].pause()"
+      @closed="videoUrl=''"
+      width="800px">
+      <video controls autoplay width="100%" height="100%" ref="video">
+        <source :src="videoUrl" type="video/mp4">
+        <source :src="videoUrl" type="video/webm">
+      </video>
+      <span slot="footer">
+         <el-button @click="dialog=false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+  import seriesAdd from "./seriesAdd";
+
+  export default {
+    name: "seriesManage",
+    components: {seriesAdd},
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      row: Object,
+    },
+    data() {
+      return {
+        comp: "",
+        tableData: [],
+        total: 0,
+        currentRow: {},
+        dialog: false,
+        videoUrl: "",
+        showList: true,
+        search: {},
+        isEdit: false,
+        page: {
+          current: 1,
+          size: 10
+        }
+      }
+    },
+    computed: {
+      colConfigs() {
+        return [
+          {label: "单集名称", prop: "title"},
+          {label: "单集顺序", prop: "num"},
+          {label: "发布状态", render:(h,{row})=>[<span>{this.dict.getLabel('newsCenterStatus',row.status)}</span>]},
+          {label: "创建时间", prop: "createDate"},
+          {slot: "options"}
+        ];
+      }
+    },
+    methods: {
+      handleChange(row) {
+        this.$confirm(`是否确实要${row.status == 0?'发布':'取消发布'}?`).then(_ => {
+          this.instance.post("/app/apppartyclassroomepisode/addOrUpdate", {
+            id: row.id,
+            classroomId: this.row?.id,
+            status: row.status == 0 ? 1 : 0
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success(`${row.status==0?'发布':'取消发布'}成功`);
+              this.getList();
+            }
+          })
+        })
+      },
+      handleEdit(row) {
+        this.showList = false;
+        this.isEdit = true;
+        this.comp = "seriesAdd";
+        this.currentRow = row;
+      },
+      handlePlay(row) {
+        this.dialog = true;
+        this.videoUrl = row.videoUrl;
+        this.$nextTick(_=>{
+          const video = this.$refs["video"];
+          video.src = row.videoUrl;
+          video.play();
+        })
+      },
+      handleDelete({id}) {
+        this.$confirm("是否确定要删除？").then(_ => {
+          this.instance.post("/app/apppartyclassroomepisode/delete", null, {
+            params: {
+              ids: id
+            }
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success("删除成功");
+              this.getList();
+            }
+          })
+        })
+      },
+      back() {
+        this.comp = "";
+        this.showList = true;
+        this.isEdit = false;
+        this.getList();
+        this.currentRow = {};
+      },
+      handleAdd() {
+        this.comp = "seriesAdd";
+        this.showList = false;
+        this.isEdit = true;
+        this.currentRow = {};
+      },
+      getList() {
+        this.instance.post("/app/apppartyclassroomepisode/list", null, {
+          params: {
+            ...this.page,
+            classroomId: this.row?.id
+          }
+        }).then(res => {
+          if (res?.data) {
+            this.tableData = res.data.records;
+            this.total = res.data.total;
+          }
+        })
+      }
+    },
+    created() {
+      this.currentRow = {};
+      this.getList();
+      this.dict.load("newsCenterStatus")
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppFoundingHundred {
+    width: 100%;
+    height: 100%;
+  }
+</style>