changshuBWG/src/pages/scene/index.vue

<template>
  <div class="scene">
    <MainTop :crumb="[{ name: '场景管理' }]" />
    <div class="table-interface">
      <div class="top-body">
        <div class="info-top">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入场景名称搜索"
                style="width: 220px; margin-right: 10px;"
              ></el-input>
              <el-button type="primary" @click="find"
                >查找</el-button
              >
              <el-button @click="reset">重置</el-button>
                    <el-button style="float: right;" type="primary" @click="$router.push('/scene/addScene')"
                >新增场景</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="conten">
          <div class="box" v-for="item in list" :key="item.id">
            <img :src="'https://project.4dage.com/8002/'+item.thumb" alt="">
            <div class="txt">
              <p>{{item.name}}</p>
                <div>
                  <span @click="$router.push(`/scene/editScene/${item.id}`)">编辑&nbsp;</span>
                  <span @click="remove(item.id)">&nbsp;删除</span>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from '@/components/main-top'

export default {
  name: 'Scene',
  components: {
    MainTop
  },
  data () {
    // 这里存放数据
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
        ]
      },
      list: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取场景列表接口
    async getList () {
      let result = await this.$http({
        method: 'post',
        url: '/scene/list'
      })
      this.list = result.data
    },
    // 场景详情接口
    // async getDetails () {
    //   let result = await this.$http({
    //     method: 'post',
    //     url: '/scene/detail/4'
    //   })
    //   console.log(9999999999, result)
    // },
    // 点击重置
    reset () {
      this.getList()
      this.ruleForm.name = ''
    },
    // 点击删除
    remove (id) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get(`/scene/remove/${id}`).then(res => {
          if (res.code === 0) {
            this.$notify.success({
              title: '提示',
              message: '删除成功',
              duration: 2000
            })
            this.getList()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg,
              duration: 2000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击查找
    find () {
      if (!this.ruleForm.name) return this.$message.warning('不能为空')
      // console.log(this.list)
      this.list = this.list.filter(v => {
        return v.name.includes(this.ruleForm.name)
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getList()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.table-interfac {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 3rem);
}
.top-body {
  margin: 1rem 0;
}
.info-top {
  padding: 20px 70px 20px 36px;
  width: 100%;
  border-bottom: 1px #a5a5a5 solid;
}
.conten {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 376px;
  padding: 25px;
}
.box {
  cursor: pointer;
  width: 20%;
  height: 205px;
}
.box img {
  width: 90%;
  max-height: 150px;
}
.txt {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}
.txt>div {
  padding-right: 30px;
}
</style>