collection seriesList

src/api/collection/seriesList.js

@@ -1,9 +1,50 @@
 import request from '@/utils/request'
 
 //获取套系列表
-export function getSeriesList(){
+export function listSystem(query) {
     return request({
-        url:'/sytem/system/list',
-        method:'get'
+      url: '/system/system/list',
+      method: 'get',
+      params: query
     })
-}
+  }
+  // 查询【请填写功能名称】详细
+export function getSystem(id) {
+    return request({
+      url: '/system/system/' + id,
+      method: 'get'
+    })
+  }
+  //按套系名字查询
+  export function findSystem(query) {
+    return request({
+      url: '/system/system/queryCollections',
+      method: 'get',
+      params: query
+    })
+  }
+  // 新增套系
+  export function addSystem(data) {
+    return request({
+      url: '/system/system',
+      method: 'post',
+      data: data
+    })
+  }
+  
+  // 修改套系列表
+  export function updateSystem(data) {
+    return request({
+      url: '/system/system',
+      method: 'put',
+      data: data
+    })
+  }
+  
+  // 删除套系
+  export function delSystem(id) {
+    return request({
+      url: '/system/system/' + id,
+      method: 'delete'
+    })
+  }

src/views/collection/createseries/index.vue

@@ -1,43 +1,24 @@
 <template>
   <div class="block">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="ruleForm"
-      label-width="150px"
-      class="demo-ruleForm"
-    >
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
       <el-form-item label="藏品名称（套）：" prop="name" style="width: 550px">
-        <el-input
-          v-model="ruleForm.name"
-          maxlength="20"
-          show-word-limit
-        ></el-input>
+        <el-input v-model="ruleForm.name" maxlength="20" show-word-limit></el-input>
       </el-form-item>
-      <el-form-item label="藏品头图 ：" prop="avatar">
-        <el-upload
-          class="avatar-uploader"
-          action="https://jsonplaceholder.typicode.com/posts/"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img
-            v-if="ruleForm.imageUrl"
-            :src="ruleForm.imageUrl"
-            class="avatar"
-          />
+       <el-form-item label="藏品头图 ：" prop="avatar">
+        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
+          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+          <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
+      </el-form-item> 
+      <el-form-item label="开始展示时间" prop="startTime">
+        <el-date-picker clearable v-model="ruleForm.startTime" type="date" value-format="yyyy-MM-dd"
+          placeholder="请选择开始展示时间">
+        </el-date-picker>
       </el-form-item>
-      <el-form-item label="设置套系时间：" prop="date" style="width: 550px">
-        <el-date-picker
-          v-model="ruleForm.date"
-          type="datetimerange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['12:00:00']"
-        >
+      <el-form-item label="结束展示时间" prop="endTime">
+        <el-date-picker clearable v-model="ruleForm.endTime" type="date" value-format="yyyy-MM-dd"
+          placeholder="请选择结束展示时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="线下礼品兑换：" prop="exchange" style="width: 550px">
@@ -46,28 +27,43 @@
           <el-radio label="不可兑换"></el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-button
-        type="primary"
-        style="margin-left: 200px"
-        @click="submitForm('ruleForm')"
-        >提交</el-button
-      ></el-form
-    >
+      <!-- 创建按钮 -->
+      <div class="button" v-show="createVisible">
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')">
+            提交
+          </el-button>
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item>
+      </div>
+      <!-- 修改按钮 -->
+      <div class="button" v-show="!createVisible">
+        <el-form-item>
+          <el-button type="primary" @click="update">
+            提交
+          </el-button>
+          <el-button @click="cancel">取消</el-button>
+        </el-form-item>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
+import { updateSystem } from "@/api/collection/seriesList"
 export default {
   data() {
     return {
+      //表单数据
       ruleForm: {
         name: "",
         // 单选框
-        exchange: "",
+        //exchange: "",
         //  时间
-        date: "",
+        startTime: "",
+        endTime: "",
         // 上传图片
-        imageUrl: "",
+        // imageUrl: "",
       },
       //表单验证
       rules: {
@@ -80,30 +76,31 @@ export default {
             trigger: "blur",
           },
         ],
-        avatar: [
-          {
-            required: true,
-            message: "请按照规范上传尺寸为750px*750px的图片",
-            trigger: "blur",
-          },
-        ],
-        date: [
-          {
-            required: true,
-            message: "请按照选择时间",
-            trigger: "change",
-          },
-        ],
-        exchange: [
-          {
-            required: true,
-            message: "请选择",
-            trigger: "change",
-          },
-        ],
+          // avatar: [
+          //   {
+          //     required: true,
+          //     message: "请按照规范上传尺寸为750px*750px的图片",
+          //     trigger: "blur",
+          //   },
+          // ],
+        
+        // exchange: [
+        //   {
+        //     required: true,
+        //     message: "请选择",
+        //     trigger: "change",
+        //   },
+        // ],
       },
+      //未修改前套系信息
+      row: {},
+      //创建或修改提交按钮
+      createVisible: true,
     };
   },
+  created() {
+    this.getRow();
+  },
   methods: {
     // 提交表单
     submitForm(formName) {
@@ -132,6 +129,57 @@ export default {
       }
       return isJPG && isLt2M;
     },
+    // 获取修改套系信息
+    getRow() {
+      if (this.$route.params.row != null || undefined) {
+        // console.log('row',this.$route.params.row)
+        this.ruleForm = { ...this.$route.params.row };
+        this.row = { ...this.$route.params.row };
+        this.createVisible = false;
+      }
+    },
+    //修改---提交
+    update(){
+      function isSame(obj1,obj2){
+          for(let key in obj1){
+            if(obj1[key] != obj2[key])
+              return false;
+          }
+          return true;
+        }
+        if(isSame(this.row,this.ruleForm)){
+          this.$message({
+            message: '数据未被修改，请确认',
+            type: 'warning'
+          });
+          return;
+        }
+        this.$confirm('是否确认修改?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          
+          updateSystem(this.ruleForm).then((res)=>{
+            this.$message({
+              type: 'success',
+              message: res.msg,
+              
+            });
+            this.$router.back();
+          }).catch((res)=>{
+            //console.log('11111111');
+            this.$message({
+              type: 'error',
+              message: '修改失败!'
+            });
+          })
+        }).catch(_=>_);
+    },
+    //修改---取消
+    cancel(){
+        this.$router.back();
+      },
   },
 };
 </script>
@@ -143,9 +191,11 @@ export default {
   position: relative;
   overflow: hidden;
 }
+
 .avatar-uploader .el-upload:hover {
   border-color: #409eff;
 }
+
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
@@ -154,11 +204,13 @@ export default {
   line-height: 300px;
   text-align: center;
 }
+
 .avatar {
   width: 300px;
   height: 300px;
   display: block;
 }
+
 .block {
   margin: 20px 100px;
   padding: 60px;

src/views/collection/serieslist/index.vue

@@ -1,46 +1,26 @@
 <template>
   <div>
     <div class="searchbar">
-      <el-form :model="formInline" class="demo-form-inline" ref="formInline">
+      <el-form :model="queryParams" 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-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="queryParams.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 v-model="queryParams.startTime" type="daterange" align="right" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" size="small">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -49,131 +29,78 @@
     </div>
     <div class="total">
       <i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
-      共有<span style="color: #1890ff">{{ seriesList.length }}</span
-      >条数据
+      <!-- 共有<span style="color: #1890ff">{{ seriesList.length }}</span>条数据 -->
       <div class="btn-add">
-        <el-button size="small" type="primary" plain @click="handleAdd()"
-          >添加</el-button
-        >
+        <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">
+      <el-row>
+      <el-radio-group v-model="tabPosition" prop="type">
+        <el-radio-button :label=0 @change="getList" >在售</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" border>
+        <el-table-column prop="id" label="ID" width="100px" align="center" />
+        <!-- <el-table-column label="0在售 1预售 2已过期" align="center" prop="type" /> -->
+        <el-table-column prop="name" label="藏品名称（套）" align="center" />
+        <el-table-column prop="startTime" label="创建时间" align="center" />
+        <el-table-column prop="endTime" label="截至时间" align="center" />
+        <!-- <el-table-column prop=" " label="藏品数量" align="center"/> -->
+        <el-table-column prop="status" 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
-            >
+            <el-button v-show="scope.row.status" type="success" plain>已上架</el-button>
+            <el-button v-show="!scope.row.status" type="warning" plain>未上链</el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="operate" label="操作" align="center">
+        <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="handleDetail(scope.row)"
-              >藏品列表</el-button
-            >
+            <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
-              >
+              <el-button type="text" size="mini" v-show="!scope.row.status" @click="onShelf(scope.row)">上链</el-button>
+              <el-button type="text" size="mini" v-show="scope.row.status"
+                @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>
+    </el-row>
     </div>
     <div>
-      <el-pagination
-        :current-page="pages.currentPage"
-        background
-        layout="total,prev, pager, next"
-        :total="seriesList.length"
-        style="margin-right: 10px; float: right"
+      <el-pagination 
+        background 
+        :current-page="pages.currentPage" 
+        ayout="total,prev, pager, next"
+        :total="pages.total" 
+        style="margin-right: 10px; float: right" 
         :page-size.sync="pages.pageSize"
-        @current-change="handleCurrentChange"
-      >
+        @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-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>
-    
+    </el-dialog> -->
+
   </div>
 </template>
 <script>
-// mock
-import { reqMockData } from "../../../mockjs/reqMock.js";
+
 //后端接口
-import { getSeriesList } from "../../../api/collection/seriesList";
-import { resolveObjectURL } from "buffer";
+import { listSystem, findSystem } from "@/api/collection/seriesList";
 export default {
   created() {
     this.getSeries();
@@ -181,81 +108,92 @@ export default {
   data() {
     return {
       // 查询参数
-      queryParams: {
-        endTime: "", //结束日期
-        state: "",
+      queryParams: {       
+        name: undefined,
+      },
+      //选项卡筛选参数---已售预售已过期
+      queryParams2:{
+        type:null,
       },
       // 加载效果
       loading: true,
       // 修改时间弹框绑定的时间
       value1: "",
-
       // 弹框
       dialogVisible: false,
       //上架
       // shelves: true,
       // 分页参数
       pages: {
+        total: 0,
         currentPage: 1,
         pageSize: 10,
       },
-// 表单
-      formInline: { name: "", date: "" },
-      tabPosition: "在售",
+      // 表单
+      formInline: { },
+
+      tabPosition: 0,
+      //套系列表表格数据
       seriesList: [],
     };
   },
-  
+
 
   methods: {
+    
+    /** 查询【套系】列表 */
+    getSeries() {
+      this.loading = true;
+      listSystem(this.queryParams).then((res) => {
+        this.seriesList = res.rows;
+        this.total = res.total;
+        this.loading = false;
+      })
+    },
     // 查询搜索
     handleQuery() {
-      this.pages.currentPage = 1;
-      this.getSeries();
+          this.pages.currentPage = 1;
+          this.getSeries();
+        },
+    // 重置表单
+    resetQuery() {
+      this.resetForm("formInline");
+      this.handleQuery();
     },
-    //mock获取数据
-    getSeries() {
-      reqMockData().then((res) => {
-        // console.log(1);
-        // console.log(res);
-        this.seriesList = res.data;
+    //选择套系列表
+    findType(){
+      this.loading = true;
+      listSystem({type: this.queryParams2.type}).then((res) => {
+        this.seriesList = res.rows;
+        this.total = res.total;
         this.loading = false;
-      });
+      })
+    },
+    //得到分类列表
+    getList(){
+      this.pages.currentPage = 1;
+      this.findType();
     },
-
     //完成时间修改
     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);
+      this.$router.push({ name:"createseries", params:{ row }});
     },
-    // // 关闭修改时间的弹框
+    //关闭修改时间的弹框
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
         })
-        .catch((_) => {});
+        .catch((_) => { });
     },
 
     // 藏品上架
@@ -268,10 +206,8 @@ export default {
         .then(() => {
           // console.log("之前", row.state);
           // 更改状态
-          row.state = !row.state;
-
+          row.status = !row.status;
           // console.log("之后", row.state);
-
           this.$message({
             type: "success",
             message: "藏品操作成功！",
@@ -288,21 +224,11 @@ export default {
     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: "collections", prams: { row } });
@@ -320,6 +246,7 @@ export default {
   .text {
     font-size: medium;
   }
+
   button {
     margin: 10px;
     float: right;
@@ -332,6 +259,7 @@ export default {
   padding: 20px;
   border-radius: 4px;
 }
+
 .btn-add {
   float: right;
   margin: auto;