post-ui/src/views/collection/serieslist/index.vue

<template>
  <div>
    <div class="searchbar">
      <el-form :model="formInline" class="demo-form-inline" ref="formInline">
        <el-form-item>
          <span class="text">
            <i class="el-icon-search"></i>
            筛选搜索
          </span>
          <el-button type="primary" size="small" @click="handleQuery()"
            >查询搜索</el-button
          >
          <el-button @click="resetQuery()" size="small"
            >重置</el-button
          >
        </el-form-item>

        <el-form-item required>
          <el-col :span="10">
            <el-form-item
              label="藏品名称（套）："
              label-width="140px"
              prop="name"
            >
              <el-input
                v-model="formInline.name"
                placeholder="请输入藏品名称"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="创建时间：" label-width="160px" prop="date">
              <el-date-picker
                v-model="formInline.date"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div class="total">
      <i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
      共有<span style="color: #1890ff">{{ seriesList.length }}</span
      >条数据
      <div class="btn-add">
        <el-button size="small" type="primary" plain @click="handleAdd()"
          >添加</el-button
        >
      </div>
    </div>
    <div class="list">
      <el-radio-group v-model="tabPosition">
        <el-radio-button label="在售">在售</el-radio-button>
        <el-radio-button label="预售">预售</el-radio-button>
        <el-radio-button label="已过期">已过期</el-radio-button>
      </el-radio-group>
      <el-table
        v-loading="loading"
        :data="
          seriesList.slice(
            (pages.currentPage - 1) * pages.pageSize,
            pages.pageSize * pages.currentPage
          )
        "
        border
      >
        <el-table-column prop="id" label="ID" width="100px" align="center">
        </el-table-column>
        <el-table-column prop="name" label="藏品名称（套）" align="center">
        </el-table-column>
        <el-table-column prop="setTime" label="创建时间" align="center">
          <!-- <template slot-scope="scope">
            {{ scope.row.setTime }}
          </template> -->
        </el-table-column>
        <el-table-column prop="showTime" label="展示时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.setTime }}-{{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="藏品数量" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.state == "0" ?"未上架" : "已上架" }}</span> -->
            <el-button v-show="scope.row.state" type="success" plain
              >已上架</el-button
            >

            <el-button v-show="!scope.row.state" type="warning" plain
              >未上链</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDetail(scope.row)"
              >藏品列表</el-button
            >
            <div>
              <el-button
                type="text"
                size="mini"
                v-show="!scope.row.state"
                @click="onShelf(scope.row)"
                >上链</el-button
              >
              <el-button
                type="text"
                size="mini"
                v-show="scope.row.state"
                @click="onShelf(scope.row)"
                >下架</el-button
              ><el-button type="text" size="mini" @click="changeTime(scope.row)"
                >修改时间</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :current-page="pages.currentPage"
        background
        layout="total,prev, pager, next"
        :total="seriesList.length"
        style="margin-right: 10px; float: right"
        :page-size.sync="pages.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 修改时间的弹框 -->

    
    <el-dialog
      title="修改时间"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      style="padding: 20px"
    >
      截止日期：<el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="结束日期"
      >
      </el-date-picker>
      <h6 style="color: red">
        当前结束日期：{{ this.queryParams.endTime }}，结束日期须大于当前结束日期
      </h6>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getChange()">确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>
<script>
// mock
import { reqMockData } from "../../../mockjs/reqMock.js";
//后端接口
import { getSeriesList } from "../../../api/collection/seriesList";
import { resolveObjectURL } from "buffer";
export default {
  created() {
    this.getSeries();
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        endTime: "", //结束日期
        state: "",
      },
      // 加载效果
      loading: true,
      // 修改时间弹框绑定的时间
      value1: "",

      // 弹框
      dialogVisible: false,
      //上架
      // shelves: true,
      // 分页参数
      pages: {
        currentPage: 1,
        pageSize: 10,
      },
// 表单
      formInline: { name: "", date: "" },
      tabPosition: "在售",
      seriesList: [],
    };
  },
  

  methods: {
    // 查询搜索
    handleQuery() {
      this.pages.currentPage = 1;
      this.getSeries();
    },
    //mock获取数据
    getSeries() {
      reqMockData().then((res) => {
        // console.log(1);
        // console.log(res);
        this.seriesList = res.data;
        this.loading = false;
      });
    },

    //完成时间修改
    getChange(row) {
      this.dialogVisible = false;
     
      
      console.log(this.value1)
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    // 修改时间
    changeTime(row) {
      this.dialogVisible = true;
      this.queryParams.endTime = row.endTime;
      
      
      // console.log(row.setTime);
      // console.log(this.queryParams.endTime);
      // console.log(this.value1);
      // row.showtime = this.value1;
      this.value1 = "";
      // this.getSeries();

      // console.log(row);
    },
    // // 关闭修改时间的弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 藏品上架
    onShelf(row) {
      this.$confirm("是否要更改藏品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log("之前", row.state);
          // 更改状态
          row.state = !row.state;

          // console.log("之后", row.state);

          this.$message({
            type: "success",
            message: "藏品操作成功！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 添加套系
    handleAdd() {
      this.$router.push({ path: "/createseries" });
    },
    // 重置表单
   resetQuery() {
       this.resetForm("formInline");
      this.getSeries();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pages.currentPage = val;
    },
    // 接口获取套系列表
    // getSeries() {
    //   getSeriesList().then((res) => {
    //     console.log(res);
    //   });
    // },
    //商品列表
    handleDetail(row) {
      this.$router.push({ name: "deatil", prams: { row } });
    },
  },
};
</script>
<style lang="scss" scoped>
.searchbar {
  border: 1px solid #ebebeb;
  margin: 20px 15px 20px 20px;
  padding: 20px;
  border-radius: 4px;

  .text {
    font-size: medium;
  }
  button {
    margin: 10px;
    float: right;
  }
}

.total {
  border: 1px solid #ebebeb;
  margin: 20px 15px 20px 20px;
  padding: 20px;
  border-radius: 4px;
}
.btn-add {
  float: right;
  margin: auto;
}

.list {
  margin: 20px 10px 20px 20px;
}
</style>
<style>