vue电影院后台管理系统（开发中）项目实战

2.演员列表模块

<template>
  <div>
    <!-- 搜索区域 -->
    <!-- @submit.native.prevent:阻止回车浏览器的自动跳转 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="姓名">
        <!-- @keyup.native.enter="onSubmit":按键事件点击回车执行onSubmit点击事件请求接口参数 -->
        <el-input
          v-model="formInline.user"
          placeholder="姓名"
          @keyup.native.enter="onSubmit"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线条 -->
    <el-divider content-position="left">演员列表</el-divider>

    <!-- 演员列表区域(加载全部演员列表) -->
    <!-- 引入person组件(使用组件需要进行传参) -->
    <person
      @delete="dlperson(item.id)"
      v-for="item in formInline.actor"
      :key="item.id"
      :name="item.actor_name"
      :avatar="item.actor_avatar"
    ></person>

    <!-- 如果查询数据为空添加空标签否则不显示该标签 -->
    <el-empty :image-size="200" v-show="formInline.show"></el-empty>
  </div>
</template>

<script>
//引入myaxios
import myaxios from "../../http/Myaxios.js";
//引入person组件
import person from "../../components/Person";
//引入httpApi
import httpApi from "../../http/index.js";
export default {
  //引入person组件
  components: { person },
  data() {
    return {
      formInline: {
        user: "", //双向数据绑定输入框
        region: "",
        actor: [], //存储所有演员数据
        show: "",
      },
    };
  },

  methods: {
    //person组件中抛出了点击事件，父组件进行了捕获
    dlperson(id) {
      console.log("父组件捕获了自组建中的点击事件" + id);
      //怎样获取当前演员ID:点击演员的id时通过dlperson（item.id)获取
      //获取id后发送请求删除数据
      httpApi.ActorApi.DelectActor({ id }).then((res) => {
        console.log(res);
        //判断如果删除成功弹出提示
        if (res.data.code == 200) {
          this.$message({ message: "演员删除成功", type: "success" });
          //重新调用列表查询
          this.listActors();
        } else {
          this.$message.error("演员删除失败");
        }
      });
    },
    //点击事件，点击进行接口请求数据进行传参
    onSubmit() {
      console.log(this.formInline.user);
      //获取用户输入框中输入的名字
      let names = this.formInline.user;
      //判断：如果用户输入框的值为空则调用listActors（）方法请求接口数据，如果存在值则执行post传参
      //trim去除两端空格
      if (this.formInline.user.trim() == "") {
        this.listActors();
      } else {
        //输入人名发送请求获取数据
        httpApi.ActorApi.queryActorsByNameLike({ name: names }).then((res) => {
          console.log(res.data.data);
          //这里查询出来的数据赋值给actor就会更新列表数据了
          this.formInline.actor = res.data.data;
          //点击按钮判断actor是不是空的，如果为空给data中的show赋值为true如果有值则赋值为false
          if (res.data.data == "") {
            this.formInline.show = true;
          } else {
            this.formInline.show = false;
          }
        });
      }
    },

    listActors: function () {
      httpApi.ActorApi.queryAllActors({ page: 1, pagesize: 100 }).then(
        (res) => {
          this.formInline.actor = res.data.data;
          //点击按钮判断actor是不是空的，如果为空给data中的show赋值为true如果有值则赋值为false
          if (res.data.data !== "") {
            this.formInline.show = false;
          } else {
            this.formInline.show = true;
          }
        }
      );
    },
  },

  //挂载完毕后加载所有演员列表（生命周期）
  mounted() {
    this.listActors();
  },
};
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  height: 40px;
  margin-bottom: 10px;
}
.actors {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: rgb(237, 232, 232);
  > ul {
    display: flex;

    > li {
      display: flex;
      flex-direction: column;
      width: 120px;
      height: 200px;
      // border: 1px solid black;
      text-align: center;
      margin: 20px 20px;
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
    }
  }
}
</style>