|
|
@@ -0,0 +1,356 @@
|
|
|
+<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>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getSet, searchSet } 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goback() {
|
|
|
+ window.history.go(-1)
|
|
|
+ },
|
|
|
+ //点击标签切换修改后
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ this.tableData = [{
|
|
|
+ id: '17',
|
|
|
+ name: 'wangxiu',
|
|
|
+ time: '20230218',
|
|
|
+ time2: '20230218',
|
|
|
+ number: '7',
|
|
|
+ tai: '已上线',
|
|
|
+ edit: 'caozuo'
|
|
|
+ }]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ //重置
|
|
|
+ empty() {
|
|
|
+ this.anForm.anName = "";
|
|
|
+ this.dataput = "";
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ check() {
|
|
|
+ if (this.anForm.anName) {
|
|
|
+ let con = {
|
|
|
+ name: this.anForm.anName
|
|
|
+ }
|
|
|
+ searchNotice(con).then((data) => {
|
|
|
+ this.tableData = data.list;
|
|
|
+ this.total = data.count;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getnotice();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //添加
|
|
|
+ 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("修改时间")
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.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%;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.th2 {
|
|
|
+ /* margin: 0;
|
|
|
+ padding: 0; */
|
|
|
+ margin-right: -10.75px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.activeBack2 {
|
|
|
+ margin-right: -10.75px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ background-color: #409EFF;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
nanshan
