post-ui/src/views/sets/setList.vue

<template>
  <div>
    <el-container>
      <el-header style="height: 120px">
        <div id="header-one">
          <h3 class="el-icon-search" style="margin-left: 10px">筛选搜索</h3>
          <div id="header-one-btu">
            <el-button @click="empty">重置</el-button>
            <el-button type="primary" @click="check">搜索</el-button>
          </div>
        </div>
        <div id="header-two">
          <el-row>
            <el-col :span="5" id="header-two-left">
              <el-form ref="anFormRef" label-width="80px">
                <el-form-item label="藏品名称(套):" label-width="102px">
                  <el-input
                    v-model="input.value1"
                    class="anInput"
                    placeholder="筛选藏品标题"
                    center
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form label-width="80px">
                <el-form-item label="创建时间:">
                  <el-date-picker
                    v-model="input.value2"
                    type="datetimerange"
                    class="up-input-right"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main style="height: 110px">
        <h3 class="el-icon-tickets">套系列表 共有{{ total }}条数据</h3>
        <el-button id="main-btu" @click="addSet">添加</el-button>
      </el-main>
      <div class="footer">
        <el-row class="state">
          <el-button
            :class="flag == 0 ? 'active' : ''"
            size="small"
            @click="onSalel"
            >在售</el-button
          >
          <el-button
            :class="flag == 1 ? 'active' : ''"
            size="small"
            @click="preSale"
            >预售</el-button
          >
          <el-button
            :class="flag == 2 ? 'active' : ''"
            size="small"
            @click="expired"
            >已过期</el-button
          >
        </el-row>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="tetherId"
            label="id"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="tetherName"
            label="藏品名称(套)"
            width="220"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="showTimeStart"
            label="创建时间"
            width="220"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="showTimeEnd"
            label="结束时间"
            width="220"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="total"
            label="藏品数量"
            width="195"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sellStatus"
            label="状态"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag size="medium" :type=" scope.row.grounding == '0' ? 'success' : 'warning' ">
                {{ scope.row.grounding == "0" ? "已上架" : "未上架" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="edit" label="操作" width="280" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="sList(scope.row)"
                >藏品列表</el-button
              >
              <el-row>
                <el-button type="text" @click="upJia(scope.row)"
                  >上架</el-button
                >
                <el-button type="text" @click="CurendTime(scope.row)"
                  >修改时间</el-button
                >
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="total, prev, pager, next"
          :total="total"
          id="page"
          :page-size="10"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="修改时间"
        :visible.sync="dialogFormVisible"
        :style="{ width: '100%' }"
      >
        <el-form>
          <el-form-item label="结束时间" label-width="80px">
            <el-date-picker
              v-model="showendtime"
              type="datetime"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <span id="tab"
            >当前结束时间为{{ showEnd }},结束日期需大于当前结束日期</span
          >
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitTime">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import {
  selectether,
  sellingList,
  advanceList,
  selledList,
  updataEndtime,
  Grounding,
} from "@/api/sets/index";
export default {
  data() {
    return {
      dialogFormVisible: false,
      pageInfo: {
        // 分页信息
        pageNum: 1,
        pageSize: 10,
      },
      input: {
        value1: "", // 搜索姓名
        value2: "", // 搜索时间
      },
      total: 1,
      flag: 0,
      tableData: [],
      startTime: [],
      endTime: [],
      showEnd: "",
      showendtime: "",
      tetherId: "",
      grounding: "",
    };
  },
  mounted() {
    this.flag = 0;
    this.sellingsList();
  },
  methods: {
    submitTime(data) {
      this.dialogFormVisible = false;
      if (!this.showendtime) return;
      console.log(this.showendtime);
      let time = {
        showTimeEnd: this.showendtime,
        tetherId: this.tetherId,
      };
      console.log(time);
      let { code } = updataEndtime(time).catch((err) => err);
      // console.log(code);
      this.$message("修改成功，请刷新界面");
      // this.sellingsList();
      // this.advancesList();
      // this.selledsList();
    },
    CurendTime(data) {
      console.log(data);
      this.dialogFormVisible = true;
      this.showEnd = data.showTimeEnd;
      this.tetherId = data.tetherId;
    },
    handleCurrentChange(newPage) {
      this.pageInfo.pageNum = newPage;
      this.setsList();
    },
    // 在售
    sellingsList() {
      sellingList(this.pageInfo).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 预售
    advancesList() {
      advanceList(this.pageInfo).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 已过期
    selledsList() {
      selledList(this.pageInfo).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },

    // 点击标签切换修改后
    onSalel() {
      this.flag = 0;
      this.sellingsList();
    },
    preSale() {
      this.flag = 1;
      this.advancesList();
    },
    expired() {
      this.flag = 2;
      this.selledsList();
    },

    // 重置
    empty() {
      this.input.value1 = "";
      this.dataput = "";
    },
    // 搜索
    check() {
      if (this.input.value1 || this.input.value2) {
        let startTime = this.$formatDate(
          this.input.value2[0],
          "yyyy-MM-dd hh:mm:ss"
        );
        let endTime = this.$formatDate(
          this.input.value2[1],
          "yyyy-MM-dd hh:mm:ss"
        );
        let searchCon = {
          tetherName: this.input.value1,
          tetherTimeStart: startTime,
          tetherTimeEnd: endTime,
        };
        selectether(searchCon).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        });
      } else {
        this.setsList();
      }
    },

    // 添加
    addSet() {
      this.$router.push("./addSet");
    },
    // 藏品列表
    sList(rows) {
      this.$router.push({ name: "collectionList", params: { rows } });
    },
    // 上架
    upJia(row) {
      this.$confirm("是否要上架商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          row.grounding = 0;
          Grounding(row.grounding, row.tetherId).then(() => {
            this.$message({
              type: "success",
              message: "上架成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 修改时间
    editTime() {
      console.log("修改时间");
    },
  },
};
</script>
<style scoped>
#tab {
  color: red;
}
.el-main {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin-left: 30px;
  margin-right: 30px;
}

.el-header {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin: 30px;
}

/* .el-footer {} */

#footer-t {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 30px;
}

/* #header-one {} */

#header-two {
  /* background-color: aqua; */
  margin-left: 90px;
}

#header-one-btu {
  margin: 20px 20px 0px 0px;
  float: right;
}

#header-two-left {
  margin-right: 150px;
}

#main-btu {
  float: right;
  margin-top: 10px;
}

#page {
  float: right;
  margin-top: 15px;
}

.footer {
  margin: 20px auto;
  width: 97%;
}

.state button {
  margin: 0;
}

.active {
  color: white;
  background-color: #409eff;
}
</style>