pc-admin/src/components/CharacterResult/index.vue

<template>
  <div class="body">
    <div class="noshadowCard">
      <el-card class="box-card">
        实例名称：<el-input
          v-model="name"
          size="mini"
          style="width: 150px; margin-right: 20px"
        />
        创建时间：
      <el-date-picker
        v-model="daterange"
        size="mini"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="dateChange"
        style="width:220px; margin-right: 20px"
      >
      </el-date-picker>

        <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
        <el-button size="mini" @click="onReset">重置</el-button>
        <el-button type="primary" size="mini" @click="handleAddRusult">添加实例</el-button>
      </el-card>
    </div>
    <el-table stripe :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="实例名称" />
      <el-table-column prop="thumb" label="图片">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.thumb"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            icon="el-icon-info"
            icon-color="red"
            title="这个实例确定删除吗？"
            @onConfirm="handleDelete(scope.row)"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getCharacterResultList,
  deleteCharacterResult,
} from "@/api/characterLib";

export default {
  props: {
    libId: String,
  },
  data() {
    return {
      name: undefined,      
      daterange:'',
      tableData: [],
      endDate:undefined,
      startDate:undefined
    };
  },
  watch: {
    libId: function () {
      this.onSearch();
    },
  },
  methods: {
    //添加实例
    handleAddRusult() {
      this.$emit("handleAddRusult", true);
    },
    handleEdit(row) {
      // 向外传送数据row.resultId
      this.$emit("handleEdit", row.resultId);
    },
    handleDelete(row) {
      deleteCharacterResult(row.resultId).then(() => {
        this.$message("删除实例成功");
        this.onSearch();
        //关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
        this.$emit("handleClose", true);
      });
    },
    onSearch() {
      getCharacterResultList({ libId: this.libId, name: this.name ,startDate:this.startDate,endDate:this.endDate}).then(
        (res) => {
          this.tableData = res.data.records;
        }
      );
    },
    onReset() {
      this.name = "";      
      this.daterange = "";
      this.startDate = "";
      this.endDate = "";
      this.onSearch();
    },
    dateChange(val){
      this.startDate=this.daterange[0]
      this.endDate=this.daterange[1]
    }
  },
};
</script>
<style>
.noshadowCard > .box-card {
  box-shadow: none;
}
</style>