目录代码整合

packages/party/AppPartyHistoryClass/components/seriesManage.vue

@@ -0,0 +1,175 @@
+<template>
+  <section class="AppFoundingHundred">
+    <ai-list 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 #right>
+            <el-input
+              v-model="page.title"
+              class="search-input"
+              size="small"
+              @keyup.enter.native="getList()"
+              placeholder="请输入单集名称"
+              clearable
+              @clear="page.current = 1, page.title = '', getList()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </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" width="200px" fixed="right">
+            <div slot-scope="{row}" class="table-options">
+              <el-button type="text" title="播放" @click="handlePlay(row)">播放</el-button>
+              <el-button type="text" title="编辑" @click="handleEdit(row)">编辑</el-button>
+              <el-button type="text" title="删除" @click="handleDelete(row)">删除</el-button>
+            </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: {
+          title: '',
+          current: 1,
+          size: 10
+        }
+      }
+    },
+    computed: {
+      colConfigs() {
+        return [
+          {label: "单集名称", prop: "title"},
+          {label: "单集顺序", align: 'center', prop: "num"},
+          {label: "创建人", align: 'center', prop: "createUser"},
+          {label: "创建时间", align: 'center', prop: "createDate"},
+          {slot: "options"}
+        ];
+      }
+    },
+    methods: {
+      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>