first

src/components/Breadcrumb/index.vue

@@ -1,11 +1,19 @@
 <template>
-  <div class="app-breadcrumb" >
-    <transition-group name="breadcrumb">
-      <div v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
-        <!-- <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
-      </div>
-    </transition-group>
+  <div>
+    <div class="app-breadcrumb">
+      <transition-group name="breadcrumb">
+        <div v-for="(item, index) in levelList" :key="item.path">
+          <span
+            v-if="
+              item.redirect === 'noRedirect' || index == levelList.length - 1
+            "
+            class="no-redirect"
+            >{{ item.meta.title }}</span
+          >
+          <!-- <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
+        </div>
+      </transition-group>
+    </div>
   </div>
 </template>
 
@@ -13,50 +21,56 @@
 export default {
   data() {
     return {
-      levelList: null
-    }
+      levelList: null,
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
-    }
+      this.getBreadcrumb();
+    },
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      let matched = this.$route.matched.filter(
+        (item) => item.meta && item.meta.title
+      );
+      const first = matched[0];
 
       // if (!this.isDashboard(first)) {
       //   matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
       // }
 
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+
+      this.levelList = matched.filter(
+        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim() === 'Index'
+      return name.trim() === "Index";
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(path)
-    }
-  }
-}
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/components/Goback/index.vue

@@ -1,24 +1,18 @@
 <template>
-    <el-page-header @back="goBack" class="title-text" >
-        
-    </el-page-header>    
+  <el-page-header @back="goBack" class="title-text"> </el-page-header>
 </template>
 
 <script>
-  export default {
-    
-  
-    methods: {
-      goBack() {
-        this.$router.go(-1);
-      },
-      
-    }
-    
-  }
+export default {
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-.title-text{
-    font-weight: 700;
+.title-text {
+  font-weight: 700;
 }
-</style>
+</style>

src/layout/components/AppMain.vue

@@ -10,20 +10,21 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
-    }
-  }
-}
+      return this.$route.path;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Navbar.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <Goback id="goback-container" class="goback-container" v-if="!topNav"/>
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> 
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
+    <Goback id="goback-container" class="goback-container" v-if="!topNav" />
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!topNav"
+    />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="right-menu">
-      
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -29,11 +41,12 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Goback from '@/components/Goback'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
+
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Goback from "@/components/Goback";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
 //import Screenfull from '@/components/Screenfull'
 //import SizeSelect from '@/components/SizeSelect'
 //import Search from '@/components/HeaderSearch'
@@ -44,54 +57,52 @@ export default {
   components: {
     Breadcrumb,
     TopNav,
-     Goback,
+    Goback,
     Hamburger,
-   // Screenfull,
+    // Screenfull,
     //SizeSelect,
     //Search,
-   // RuoYiGit,
-   // RuoYiDoc
+    // RuoYiGit,
+    // RuoYiDoc
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(["sidebar", "avatar", "device"]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
+        });
+      },
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
-      }
-    }
+        return this.$store.state.settings.topNav;
+      },
+    },
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
         })
-      }).catch(() => {});
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -100,28 +111,28 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
-  .goback-container{
-    
+  .goback-container {
     float: left;
     line-height: 50px;
   }
   .breadcrumb-container {
-    
+
     float: left;
     line-height: 50px;
   }
@@ -155,10 +166,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }

src/main.js

@@ -4,6 +4,8 @@ import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
+//引入mock
+import './mockjs/mock.js'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css

src/mockjs/mock.js

@@ -0,0 +1,25 @@
+//引入mokejs
+const Mock = require("mockjs");
+//获取mock.Random对象
+const Random = Mock.Random;
+
+// 模拟数据，包括ID，名称，创建时间，展示时间，藏品数量，状态
+const data = function () {
+    let datalist = [];
+    for (let i = 0; i < 20; i++){
+        let dataObject = {
+            id: i,
+            name: Random.cname(),
+            settime: Random.date(),
+            showtime: Random.date(),
+            amount: Random.natural(1,100),
+            state:Random.boolean(),
+        }
+        datalist.push(dataObject);
+    }
+    return datalist;
+    
+}
+Mock.mock('http://localhost/#/serieslist',data)
+
+

src/mockjs/reqMock.js

@@ -0,0 +1,4 @@
+import axios from "axios";
+
+// 请求模拟数据
+export const reqMockData = () => (axios.get('http://localhost/#/serieslist'))

src/views/announcement/add/index.vue

@@ -102,4 +102,4 @@ export default {
   position: absolute;
   margin-top: 70px;
 }
-</style>
+</style>

src/views/appuserlist/index.vue

@@ -211,4 +211,4 @@
       margin-left: 5px;
     }
   }
-  </style>
+  </style>

src/views/collection/createseries/index.vue

@@ -1,5 +1,116 @@
 <template>
-    <div>
-        创建套系
-    </div>
-</template>
+<div class="block">
+    <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-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="imageUrl" :src="imageUrl" class="avatar" />
+          <i
+            v-else
+            class="el-icon-plus avatar-uploader-icon"
+          ></i> </el-upload></el-form-item
+    ></el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: "",
+      ruleForm: {
+        name: "",
+        img: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入藏品名称", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20个字符",
+            trigger: "blur",
+          },
+        ],
+        avatar: [
+          {
+            required: true,
+            message: "请按照规范上传尺寸为750px*750px的图片",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.block {
+  margin: 20px 100px;
+  padding: 60px;
+  border: 1px solid #ebebeb;
+  border-radius: 5px;
+}
+</style>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 300px;
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+}
+
+.avatar {
+  width: 300px;
+  height: 300px;
+  display: block;
+}
+</style>

src/views/collection/serieslist/index.vue

@@ -1,5 +1,203 @@
 <template>
+  <div>
+    <div class="searchbar">
+      <el-form :model="formInline" 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">查询搜索</el-button>
+          <el-button @click="resetForm('ruleForm')" 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>
+          </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>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="total">
+      <i class="el-icon-tickets" style="margin-right: 5px"></i>套系列表
+      共有<span style="color: #1890ff">{{ mockData.length }}</span
+      >条数据
+    </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
+        :data="
+          mockData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
+        "
+        border
+        style="width: 100%"
+        :header-cell-style="{ background: '#ffffff', color: '#919398' }"
+      >
+        <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>
+        <el-table-column prop="showtime" label="展示时间" align="center">
+        </el-table-column>
+        <el-table-column prop="amount" label="藏品数量" align="center">
+        </el-table-column>
+        <el-table-column prop="state" label="状态" align="center">
+        </el-table-column>
+        <el-table-column prop="operate" label="操作" align="center">
+        </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>
     </div>
-</template>
+  </div>
+</template>
+<script>
+import { reqMockData } from "../../../mockjs/reqMock.js";
+export default {
+  mounted() {
+    reqMockData().then((res) => {
+      // console.log(1);
+      // console.log(res);
+      this.mockData = res.data;
+    });
+  },
+  data() {
+    return {
+      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]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.currentPage = val;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.searchbar {
+  border: 1px solid #ebebeb;
+  margin: 20px 15px 20px 20px;
+  padding: 20px;
+  border-radius: 4px;
+
+  .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>