video_ca/src/views/VideoList.vue

<script>
import axios from "axios";
import { inject } from "vue";
import { getVideoListService } from "@/api/video.js";
import router from "@/router/index.js";

export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  // setup: function() {
  //   const globalData = inject("globalData");
  //   const token = globalData.token;
  //   return { token };
  // },
  data() {
    return {
      tableData: [],
      tokenData: {
        token: localStorage.getItem("token"),
        userId: localStorage.getItem("userId"),
        username: localStorage.getItem("username"),
      },
    };
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    async getVideoList() {
      console.log(this.tokenData.token);
      let result = {};
      try {
        result = await getVideoListService(this.tokenData);
      } catch (e) {
        console.log(e);
      }
      this.tableData = JSON.parse(result.data);
      console.log(this.tableData[0]);
    },
    onSubmit() {
      getVideoList({ token: token });
    },
    handleSizeChange() {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange() {
      alert("页码发生变化" + val);
    },
    playVideo(index) {
      var id=this.tableData[index].id;
      var name=this.tableData[index].name;
      alert("id=" + id + " name=" + name);
      router.push(
        "/video",
        {
          name: name,
          userid: this.tokenData.userId,
          token: this.tokenData.token,
          id: id,
        }
      );
    },
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log("mounted");
    this.getVideoList();
  },
};
</script>

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >监控视频列表</el-header
      >
      <el-container>
        <el-main>
          <!-- 表单 -->
          <!-- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="视频日期">

              <el-date-picker
                v-model="searchForm.entrydate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >               
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form> -->

          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column
              prop="name"
              label="视频名称"
              width="250"
            ></el-table-column>
            <el-table-column label="是否有人" width="50" prop="human">
              <!-- <template human="human">
                {{ human.row.human == 1 ? "有" : "无" }}
              </template> -->
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="创建时间"
              width="250"
            ></el-table-column>
            <el-table-column
              prop="delete_time"
              label="预期删除时间"
              width="250"
            ></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click.prevent="playVideo(scope.$index)"
                  >播放</el-button
                >

                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br />

          <!-- 分页条 -->
          <!-- Pagination 分页 -->
          <el-pagination
            background
            layout="total,sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          ></el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>