|
|
@@ -7,20 +7,40 @@
|
|
|
<i class="el-icon-search"></i>
|
|
|
筛选搜索
|
|
|
</span>
|
|
|
- <el-button type="primary" size="small">查询搜索</el-button>
|
|
|
- <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
|
|
|
+ <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
|
|
|
+ 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="结束日期" :picker-options="pickerOptions" size="small">
|
|
|
+ <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>
|
|
|
@@ -29,7 +49,13 @@
|
|
|
</div>
|
|
|
<div class="total">
|
|
|
<i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
|
|
|
- 共有<span style="color: #1890ff">{{ mockData.length }}</span>条数据
|
|
|
+ 共有<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">
|
|
|
@@ -37,113 +63,250 @@
|
|
|
<el-radio-button label="预售">预售</el-radio-button>
|
|
|
<el-radio-button label="已过期">已过期</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
- <el-table :data="
|
|
|
- mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
|
|
|
- " border style="width: 100%" :header-cell-style="{ background: '#ffffff', color: '#919398' }">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
- <el-button type="success" plain v-show="shelves">已上架</el-button>
|
|
|
- <el-button type="info" plain v-show="!shelves">未上链</el-button>
|
|
|
+ <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" @click="handleDetail(scope.row)">商品列表</el-button>
|
|
|
- <el-button type="text">修改</el-button>
|
|
|
- </template>
|
|
|
+ <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="currentPage" background layout="total,prev, pager, next" :total="mockData.length"
|
|
|
- style="margin-right: 10px" :page-size.sync="pageSize" @current-change="handleCurrentChange">
|
|
|
+ <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 { getSeriesList } from "../../../api/collection/seriesList";
|
|
|
+import { resolveObjectURL } from "buffer";
|
|
|
export default {
|
|
|
- mounted() {
|
|
|
- reqMockData().then((res) => {
|
|
|
- // console.log(1);
|
|
|
- // console.log(res);
|
|
|
- this.mockData = res.data;
|
|
|
- });
|
|
|
- // this.getSeries()
|
|
|
+ created() {
|
|
|
+ this.getSeries();
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ endTime: "", //结束日期
|
|
|
+ state: "",
|
|
|
+ },
|
|
|
+ // 加载效果
|
|
|
+ loading: true,
|
|
|
+ // 修改时间弹框绑定的时间
|
|
|
+ value1: "",
|
|
|
+
|
|
|
+ // 弹框
|
|
|
+ dialogVisible: false,
|
|
|
//上架
|
|
|
- shelves:true,
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 10,
|
|
|
+ // shelves: true,
|
|
|
+ // 分页参数
|
|
|
+ pages: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+// 表单
|
|
|
formInline: { name: "", date: "" },
|
|
|
tabPosition: "在售",
|
|
|
- mockData: [],
|
|
|
-
|
|
|
- pickerOptions: {
|
|
|
- shortcuts: [
|
|
|
- {
|
|
|
- text: "最近一周",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "最近一个月",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- text: "最近三个月",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
+ seriesList: [],
|
|
|
};
|
|
|
},
|
|
|
+
|
|
|
+
|
|
|
methods: {
|
|
|
- resetForm(formName) {
|
|
|
- this.$refs[formName].resetFields();
|
|
|
+ // 查询搜索
|
|
|
+ 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.currentPage = val;
|
|
|
+ this.pages.currentPage = val;
|
|
|
},
|
|
|
- //获取套系列表
|
|
|
- // getSeries(){
|
|
|
- // getSeriesList().then((res)=>{
|
|
|
+ // 接口获取套系列表
|
|
|
+ // getSeries() {
|
|
|
+ // getSeriesList().then((res) => {
|
|
|
// console.log(res);
|
|
|
- // })
|
|
|
- // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
//商品列表
|
|
|
- handleDetail(row){
|
|
|
- this.$router.push({name:"deatil",prams:{row}});
|
|
|
- }
|
|
|
+ handleDetail(row) {
|
|
|
+ this.$router.push({ name: "deatil", prams: { row } });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -157,10 +320,9 @@ export default {
|
|
|
.text {
|
|
|
font-size: medium;
|
|
|
}
|
|
|
-
|
|
|
button {
|
|
|
+ margin: 10px;
|
|
|
float: right;
|
|
|
- margin-left: 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -170,72 +332,13 @@ export default {
|
|
|
padding: 20px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
-.list {
|
|
|
- margin: 20px 10px 20px 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-pagination {
|
|
|
+.btn-add {
|
|
|
float: right;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
-</style>
|
|
|
-<style>
|
|
|
-label.el-form-item__label {
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.list .el-radio-button__inner {
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- border-bottom: none;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.el-radio-button:first-child .el-radio-button__inner {
|
|
|
- border-radius: 4px 0 0 0;
|
|
|
-}
|
|
|
-
|
|
|
-.el-radio-button:last-child .el-radio-button__inner {
|
|
|
- border-radius: 0 4px 0 0;
|
|
|
-}
|
|
|
-</style>
|
|
|
|
|
|
- .text {
|
|
|
- font-size: medium;
|
|
|
- }
|
|
|
- button {
|
|
|
- float: right;
|
|
|
- margin-left: 15px;
|
|
|
- }
|
|
|
-}
|
|
|
-.total {
|
|
|
- border: 1px solid #ebebeb;
|
|
|
- margin: 20px 15px 20px 20px;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
.list {
|
|
|
margin: 20px 10px 20px 20px;
|
|
|
}
|
|
|
-.el-pagination {
|
|
|
- float: right;
|
|
|
-}
|
|
|
</style>
|
|
|
-<style>
|
|
|
-label.el-form-item__label {
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.list .el-radio-button__inner {
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- border-bottom: none;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.el-radio-button:first-child .el-radio-button__inner {
|
|
|
- border-radius: 4px 0 0 0;
|
|
|
-}
|
|
|
-
|
|
|
-.el-radio-button:last-child .el-radio-button__inner {
|
|
|
- border-radius: 0 4px 0 0;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style>
|
miyeah