改一下

src/views/sets/setList.vue

@@ -1,204 +1,149 @@
 <template>
-    <div>
-        <el-card>
-            <el-page-header @back="goback" content="套系列表"></el-page-header>
-        </el-card>
-        <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" :model="anForm" label-width="80px">
-                                <el-form-item label="藏品名称(套):" label-width="102px">
-                                    <el-input v-model="anForm.anName" class="anInput" placeholder="筛选藏品标题"
-                                        center></el-input>
-                                </el-form-item>
-                            </el-form>
-                        </el-col>
-                        <el-col :span="8">
-                            <el-form label-width="80px">
-                                <el-form-item label="创建时间:">
-                                    <el-date-picker v-model="dataput" 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-radio-group v-model="tabPosition">
-                                                                                             <el-radio-button label="onSale" tab-click="onSale1">在售</el-radio-button>
-                                                                                            <el-radio-button label="preSale" @click="preSale()">预售</el-radio-button>
-                                                                                                 <el-radio-button label="expired" @click="expired()">已过期</el-radio-button>
-                                                                                               </el-radio-group> -->
-                <el-row>
-                    <!-- 这块样式需要index没有只能先这么写 -->
-                    <el-button size="small" @click="onSale1()" :class="btnact">在售</el-button>
-                    <el-button size="small" @click="preSale()" :class="btnact1">预售</el-button>
-                    <el-button size="small" @click="expired()" :class="btnact2">已过期</el-button>
-                </el-row>
-                <!-- 非响应式？？‘’‘不是非响应式上面帮点击时间不好使 -->
-                <el-table :data="tableData" border style="width: 100%">
-                    <el-table-column prop="id" label="id" width="110" align="center">
-                    </el-table-column>
-                    <el-table-column prop="name" label="藏品名称(套)" width="280" align="center">
-                    </el-table-column>
-                    <el-table-column prop="time" label="创建时间" width="280" align="center">
-                    </el-table-column>
-                    <el-table-column prop="time2" label="展示时间" width="280" align="center">
-                    </el-table-column>
-                    <el-table-column prop="number" label="藏品数量" width="280" align="center">
-                    </el-table-column>
-                    <el-table-column prop="tai" label="状态" width="280" align="center">
-                    </el-table-column>
-                    <el-table-column prop="edit" label="操作" width="280" align="center">
-                        <el-button type="text" @click="sList()">藏品列表</el-button>
-                        <el-row>
-                            <el-button type="text" @click="upJia()">上架</el-button>
-                            <el-button type="text" @click="editTime()">修改时间</el-button>
-                        </el-row>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </el-container>
-    </div>
+  <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="number" label="藏品数量" width="195" align="center">
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="200" align="center">
+          </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">上架</el-button>
+                <el-button type="text" @click="editTime">修改时间</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-container>
+  </div>
 </template>
 <script>
-import { getSet, searchSet ,setList} from "@/api/sets/index"
+import { selectether, sellingList, advanceList, selledList } from "@/api/sets/index";
 export default {
-    data() {
-        return {
-            anForm: {
-                anName: '',
-            },
-            total: 1,
-            dataput: '',
-            activeName: 'first',
-            //列表
-            tabPosition: 'onSale',
-            //
-            btnact: 'th',
-            btnact1: 'th1',
-            btnact2: 'th2',
-            tableData: [{
-                id: '17',
-                name: 'wangxiu',
-                time: '20230218',
-                time2: '20230218',
-                number: '7',
-                tai: '已上线',
-                edit: 'caozuo'
-            }],
-        }
-    },
-    watch: {
-        activeName(newVal, oldVal) {
-            console.log(newVal, "\n", oldVal)
-        }
-    },
-  
-
+  data() {
+    return {
+      pageInfo: { // 分页信息
+        pageNum: 1,
+        pageSize: 10,
+      },
+      input: {
+        value1: "", // 搜索姓名
+        value2: "", // 搜索时间
+      },
+      total: 1,
+      flag: 0,
+      tableData: [],
+      startTime: [],
+      endTime: [],
+    };
+  },
   mounted() {
-    this.setsList();
+    this.flag = 0;
+    this.sellingsList();
   },
   methods: {
     handleCurrentChange(newPage) {
       this.pageInfo.pageNum = newPage;
       this.setsList();
     },
-    setsList() {
-      setList(this.pageInfo).then((res) => {
-        console.log(res);
+    // 在售
+    sellingsList() {
+      sellingList(this.pageInfo).then((res) => {
         this.tableData = res.rows;
         this.total = res.total;
       });
     },
-    goback() {
-      window.history.go(-1);
+    // 预售
+    advancesList() {
+      advanceList(this.pageInfo).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
+      });
     },
-    //点击标签切换修改后
-    onSale1() {
-      console.log("11");
-      if (this.btnact == "activeBack") {
-        this.btnact = "th";
-        this.btnact1 = "activeBack1";
-        this.btnact2 = "activeBack2";
-      } else {
-        this.btnact = "activeBack";
-        this.btnact1 = "th1";
-        this.btnact2 = "th2";
-      }
-      setList(this.pageInfo).then((res) => {
-        this.startTime = res.rows.showTimeStart;
-        this.endTime = res.rows.showTimeEnd;
+    // 已过期
+    selledsList() {
+      selledList(this.pageInfo).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
       });
     },
+
+
+    // 点击标签切换修改后
+    onSalel() {
+      this.flag = 0;
+      this.sellingsList();
+    },
     preSale() {
-      console.log("222");
-      if (this.btnact1 == "activeBack1") {
-        this.btnact1 = "th1";
-        this.btnact = "activeBack";
-        this.btnact2 = "activeBack2";
-      } else {
-        this.btnact1 = "activeBack1";
-        this.btnact = "th";
-        this.btnact2 = "th2";
-      }
-      //   this.tableData = [
-      //     {
-      //       id: "17",
-      //       name: "wangxiu 预售",
-      //       time: "20230218",
-      //       time2: "20230218",
-      //       number: "7",
-      //       tai: "已上线",
-      //       edit: "caozuo",
-      //     },
-      //   ];
+      this.flag = 1;
+      this.advancesList();
     },
     expired() {
-      console.log("333");
-      if (this.btnact2 == "activeBack2") {
-        this.btnact2 = "th2";
-        this.btnact = "activeBack";
-        this.btnact1 = "activeBack1";
-      } else {
-        this.btnact2 = "activeBack";
-        this.btnact = "th";
-        this.btnact1 = "th1";
-      }
-      //   this.tableData = [
-      //     {
-      //       id: "17",
-      //       name: "wangxiu77777",
-      //       time: "20230218",
-      //       time2: "20230218",
-      //       number: "7",
-      //       tai: "已上线",
-      //       edit: "caozuo",
-      //     },
-      //   ];
+      this.flag = 2;
+      this.selledsList();
     },
-    //重置
+
+
+    // 重置
     empty() {
       this.input.value1 = "";
       this.dataput = "";
     },
-    //搜索
+    // 搜索
     check() {
       if (this.input.value1 || this.input.value2) {
         let startTime = this.$formatDate(
@@ -214,161 +159,113 @@ export default {
           tetherTimeStart: startTime,
           tetherTimeEnd: endTime,
         };
-        // console.log(searchCon);
         selectether(searchCon).then((res) => {
-          console.log(res);
           this.tableData = res.rows;
           this.total = res.total;
         });
       } else {
-        this.getnotice();
+        this.setsList();
       }
-        },
-        //添加
-        addSet() {
-            this.$router.push('./addSet')
-        },
-        //藏品列表
-        sList() {
-            this.$router.push('./collectionDetails')
-        },
-        //上架
-        upJia() {
-            this.$confirm('是否要上架商品?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-        }).then(() => {
-            this.$message({
-            type: 'success',
-            message: '上架成功!'
-        });
-        }).catch(() => {
-            this.$message({
-            type: 'info',
-             message: '已取消'
-        });
-        });
-
-        },
-        //修改时间
-        editTime() {
-            console.log("修改时间")
-        }
-
+    },
 
-    }
+    // 添加
+    addSet() {
+      this.$router.push("./addSet");
+    },
+    // 藏品列表
+    sList(rows) {
+      this.$router.push({ name: "collectionList", params: { rows } });
+    },
+    // 上架
+    upJia() {
+      this.$confirm("是否要上架商品?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "上架成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消",
+          });
+        });
+    },
+    // 修改时间
+    editTime() {
+      console.log("修改时间");
+    },
+  },
 };
-
 </script>
 <style scoped>
 .el-main {
-    color: #333;
-    border: 1px solid #d3d7d4;
-    border-radius: 5px;
-    margin-left: 30px;
-    margin-right: 30px;
+  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;
+  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;
+  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;
+  /* background-color: aqua; */
+  margin-left: 90px;
 }
 
 #header-one-btu {
-    margin: 20px 20px 0px 0px;
-    float: right;
+  margin: 20px 20px 0px 0px;
+  float: right;
 }
 
 #header-two-left {
-    margin-right: 150px;
+  margin-right: 150px;
 }
 
 #main-btu {
-    float: right;
-    margin-top: 10px;
+  float: right;
+  margin-top: 10px;
 }
 
 #page {
-    float: right;
-    margin-top: 15px;
+  float: right;
+  margin-top: 15px;
 }
 
 .footer {
-    margin: 20px auto;
-    width: 97%;
-}
-
-.th {
-    /* margin: 0;
-    padding: 0; */
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #FFFFFF;
-    color: #606266;
-}
-
-.activeBack {
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #409EFF;
-    color: white;
-}
-
-.th1 {
-    /* margin: 0;
-    padding: 0; */
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #FFFFFF;
-    color: #606266;
-}
-
-.activeBack1 {
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #409EFF;
-    color: white;
+  margin: 20px auto;
+  width: 97%;
 }
 
-.th2 {
-    /* margin: 0;
-    padding: 0; */
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #FFFFFF;
-    color: #606266;
+.state button {
+  margin: 0;
 }
 
-.activeBack2 {
-    margin-right: -10.75px;
-    font-size: 16px;
-    font-weight: 800;
-    background-color: #409EFF;
-    color: white;
+.active {
+  color: white;
+  background-color: #409eff;
 }
-</style>
+</style>