答题卡列表页

梁保满
1 parent d4283687
Showing 16 changed files with 931 additions and 109 deletions
router
src/api/apis/answerSheet.js
src/api/apis/role.js
src/api/apis/user.js
src/api/axios.js
src/api/urls/answerSheet.js
src/api/urls/role.js
src/api/urls/user.js
src/assets/css/base.css
src/components/backBox.vue
src/store/index.js
src/store/modules/layout/index.js
src/views/examinationPaper/edit.vue
src/views/examinationPaper/index.vue
src/views/examinationPaper/recycle.vue
src/views/layout/header/header.vue
+[  //测试用，后续后端获取
+  {
+    path: "/examinationPaper",
+    iconCls: "fa fa-file-text", // 图标样式class
+    name: "备题组卷",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/examinationPaper",
+        iconCls: "fa fa-file-text", // 图标样式class
+        name: "",
+        component: ExaminationPaper,
+        children: []
+      },
+      {
+        path: "/examinationPaperAdd",
+        iconCls: "", // 图标样式class
+        name: "添加答题卡",
+        component: ExaminationPaperAdd,
+        children: []
+      },
+      {
+        path: "/examinationPaperEdit",
+        iconCls: "", // 图标样式class
+        name: "修改答题卡",
+        component: ExaminationPaperEdit,
+        children: []
+      },
+      {
+        path: "/examinationPaperRecycle",
+        iconCls: "", // 图标样式class
+        name: "已归档答题卡",
+        component: ExaminationPaperRecycle,
+        children: []
+      },
+    ]
+  },
+  {
+    path: "/ask",
+    iconCls: "fa fa-bar-chart", // 图标样式class
+    name: "随堂问报表",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/ask",
+        iconCls: "fa fa-bar-chart", // 图标样式class
+        name: "",
+        component: Ask,
+        children: []
+
+      },
+      {
+        path: "/askAnalysis",
+        iconCls: "", // 图标样式class
+        name: "随堂问报表分析",
+        component: AskAnalysis,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "/test",
+    iconCls: "fa fa-pie-chart", // 图标样式class
+    name: "即时测报表",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/test",
+        iconCls: "fa fa-pie-chart", // 图标样式class
+        name: "",
+        component: Test,
+        children: []
+      },
+      {
+        path: "/testAnalysis",
+        iconCls: "", // 图标样式class
+        name: "即时测报表分析",
+        component: TestAnalysis,
+        children: []
+      }
+
+    ]
+  },
+  {
+    path: "/portrait",
+    iconCls: "fa fa-users", // 图标样式class
+    name: "学生画像",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/portrait",
+        iconCls: "fa fa-users", // 图标样式class
+        name: "",
+        component: Portrait,
+        children: []
+      }
+    ]
+  },
+  
+  {
+    path: "/setUpConglomerate",
+    iconCls: "fa fa-building", // 图标样式class
+    name: "学校管理",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/setUpConglomerate",
+        iconCls: "fa fa-building",
+        name: '集团管理',
+        component: SetUpConglomerate,
+        children: []
+      },
+    ]
+  },
+  {
+    path: "/setUpAccount",
+    iconCls: "fa fa-id-card-o", // 图标样式class
+    name: "账号管理",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/setUpAccount",
+        iconCls: "fa fa-id-card-o",
+        name: '',
+        component: SetUpAccount,
+        children: []
+      },
+    ]
+  },
+  {
+    path: "/",
+    iconCls: "fa fa-cog",
+    name: '学校管理',
+    component: Layout,
+    children: [
+      {
+        path: "/setUpSchool",
+        iconCls: "fa fa-calculator",
+        name: '学校管理',
+        component: SetUpSchool,
+        children: []
+      },
+      {
+        path: "/setUpTeacher",
+        iconCls: "fa fa-male",
+        name: '教师管理',
+        component: SetUpTeacher,
+        children: []
+      },
+      {
+        path: "/setUpStudent",
+        iconCls: "fa fa-mortar-board",
+        name: '学生管理',
+        component: SetUpStudent,
+        children: []
+      },
+    ]
+  },
+  {
+    path: "/card",
+    iconCls: "fa fa-id-card", // 图标样式class
+    name: "发卡记录",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/card",
+        iconCls: "fa fa-id-card", // 图标样式class
+        name: "",
+        component: Card,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "/device",
+    iconCls: "fa fa-dashboard", // 图标样式class
+    name: "设备状态",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/device",
+        iconCls: "fa fa-dashboard", // 图标样式class
+        name: "",
+        component: Device,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "/analysis",
+    iconCls: "fa fa-area-chart", // 图标样式class
+    name: "使用分析",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/analysis",
+        iconCls: "fa fa-area-chart", // 图标样式class
+        name: "",
+        component: Analysis,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "/down",
+    iconCls: "fa fa-download", // 图标样式class
+    name: "软件下载",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/down",
+        iconCls: "fa fa-download", // 图标样式class
+        name: "",
+        component: Down,
+        children: []
+      },
+      {
+        path: "/downClient",
+        iconCls: "", // 图标样式class
+        name: "",
+        component: DownClient,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "/dataSync",
+    iconCls: "fa fa-random", // 图标样式class
+    name: "数据同步",
+    component: Layout,
+    alone: true,
+    children: [
+      {
+        path: "/dataSync",
+        iconCls: "fa fa-random", // 图标样式class
+        name: "",
+        component: DataSync,
+        children: []
+      }
+    ]
+  },
+  {
+    path: "*",
+    redirect: "/404",
+    hidden: true,
+    children: []
+  }
+]
 \ No newline at end of file
+
+import axios from "../axios"
+import answerSheet from "../urls/answerSheet"
+
+export default {
+  // 答题卡列表
+  fetchAnswerList(data) {
+    return axios({
+      url: answerSheet.answerList,
+      method: 'POST',
+      data
+    })
+  },
+  // 答题卡列表
+  fetchTypeNames(data) {
+    return axios({
+      url: answerSheet.typeNames,
+      method: 'POST',
+      data
+    })
+  },
+  // 答题卡列表
+  fetchClassList(data) {
+    return axios({
+      url: answerSheet.classList,
+      method: 'POST',
+      data
+    })
+  },
+  // 答题卡列表
+  fetchSubjectList(data) {
+    return axios({
+      url: answerSheet.subjectList,
+      method: 'POST',
+      data
+    })
+  },
+}
+
@@ -7,17 +7,5 @@ export default {
   fetchGetRoleList () {
     return axios.post(roleUrls.getRoleList)
   },
-  // 增加角色
-  fetchAddRole (data) {
-    return axios.post(roleUrls.addRole, data)
-  },
-  // 删除角色
-  fetchDelRole (data) {
-    return axios.post(roleUrls.delRole, data)
-  },
-  // 分配角色权限
-  fetchRolePermissions (data) {
-    return axios.post(roleUrls.rolePermissions, data)
-  }
 }
-
-import axios from "../axios"
-import userUrls from "../urls/user"
-
-export default {
-  // 注册/添加账号
-  fetchRegister (data) {
-    return axios.post(userUrls.register, data)
-  },
-  // 删除用户
-  fetchDelUser (data) {
-    return axios.post(userUrls.delUser, data)
-  },
-  // 获取用户列表
-  fetchUserList (data) {
-    return axios.post(userUrls.userList, data)
-  },
-  // 修改用户信息
-  fetchEditUser (data) {
-    return axios.post(userUrls.editUser, data)
-  },
-  // 获取当前用户信息
-  fetchGetUserInfo () {
-    return axios.get(userUrls.getUserInfo)
-  },
-  // 获取用户信息
-  fetchGetUserInfoId (data) {
-    return axios.post(userUrls.getUserInfoId, data)
-  },
-  // 修改密码
-  fetchEditPassword (data) {
-    return axios.post(userUrls.editPassword, data)
-  }
-}
-
@@ -2,27 +2,35 @@ import axios from &quot;axios&quot;
 import Cookies from "js-cookie"
 import NProgress from "nprogress"
 import { Message } from "element-ui"
+import config from "../config/index"; // 路径配置
 // axios默认配置
-axios.defaults.timeout = 10000 // 超时时间
-axios.defaults.baseURL = process.env.API_HOST
+axios.defaults.timeout = 1000000000 // 超时时间
+axios.defaults.baseURL = config.baseURL
 // http request 拦截器
 axios.interceptors.request.use(config => {
   NProgress.start()
   config.headers["Content-Type"] = "application/json;charset=UTF-8"
-  if (Cookies.get("access_token")) {
-    config.headers.Authorization = "Bearer" + Cookies.get("access_token")
-  }
+
+  const source = axios.CancelToken.source();
+  store.commit('setTokenSources', [source.token, source.cancel])
+  config.cancelToken = source.token;
+  // if (Cookies.get("access_token")) {
+  //   config.headers.Authorization = "Bearer" + Cookies.get("access_token")
+  // }
   return config
 },
-error => {
-  return Promise.reject(error.response)
-})
+  error => {
+    return Promise.reject(error.response)
+  })
 // http response 拦截器
 axios.interceptors.response.use(
   response => {
     NProgress.done()
+    if (respones.config.cancelToken) {
+      store.commit('delTokenSources', respones.config.cancelToken)
+    }
     if (response.data.code === 11000) {
       Cookies.set("access_token", response.data.message, { expires: 1 / 12 })
       return Promise.resolve()
+export default {
+  // 答题卡列表
+  answerList: "/apis/answerList",
+  // 答题卡类型
+  typeNames: "/apis/typeNames",
+  // 查找班级
+  classList: "/apis/classList",
+  // 查找科目
+  subjectList: "/apis/subjectList",
+}
 \ No newline at end of file
@@ -2,11 +2,5 @@
 export default {
   // 获取角色列表
   getRoleList: "/permissions/getRoleList",
-  // 增加角色
-  addRole: "/permissions/addRole",
-  // 删除角色
-  delRole: "/permissions/delRole",
-  // 分配角色权限
-  rolePermissions: "/permissions/rolePermissions"
 }
-
-export default {
-  // 注册/添加账号
-  register: "/admin/user/register",
-  // 删除用户
-  delUser: "/user/delUser",
-  // 修改用户信息
-  editUser: "/user/editUserInfo",
-  // 获取当前用户信息
-  getUserInfo: "/user/getUserInfo",
-  // 获取用户信息
-  getUserInfoId: "/user/getUserInfoId",
-  // 获取用户列表
-  userList: "/user/userList",
-  // 修改密码
-  editPassword: "/user/editPassword"
-}
@@ -2,9 +2,10 @@
   margin: 0px;
   padding: 0px;
 }
+
 html,
 body {
-  height:100%;
+  height: 100%;
   overflow: hidden;
   background-color: #fff;
   font-size: 14px;
@@ -17,4 +18,21 @@ li {
 a {
   text-decoration: none;
+}
+
+/* element-style */
+.el-button--default{
+  color: #667ffd;
+  border-color: #667ffd;
+}
+.el-button--primary {
+  background-color: #667ffd;
+  border-color: #667ffd;
+}
+.el-radio__input.is-checked+.el-radio__label{
+  color: #667ffd;
+}
+.el-radio__input.is-checked .el-radio__inner{
+  border-color: #667ffd;
+    background: #667ffd;
 }
 \ No newline at end of file
 <template>
   <div class="back">
     <div class="back-l" @click="back">
+      <i class="fa fa-mail-reply-all"></i>
       <slot name="title"></slot>
     </div>
     <div class="back-r">
@@ -167,13 +167,13 @@ let addrouters = [  //测试用，后续后端获取
   {
     path: "/",
     iconCls: "fa fa-cog",
-    name: '学校管理',
+    name: '学校设置',
     component: Layout,
     children: [
       {
         path: "/setUpSchool",
         iconCls: "fa fa-calculator",
-        name: '学校管理',
+        name: '学校设置',
         component: SetUpSchool,
         children: []
       },
@@ -251,14 +251,14 @@ let addrouters = [  //测试用，后续后端获取
       {
         path: "/down",
         iconCls: "fa fa-download", // 图标样式class
-        name: "",
+        name: "发卡软件",
         component: Down,
         children: []
       },
       {
         path: "/downClient",
         iconCls: "", // 图标样式class
-        name: "",
+        name: "授课端软件",
         component: DownClient,
         children: []
       }
@@ -296,6 +296,7 @@ const store = new Vuex.Store({
     info: "", // 每次刷新都要通过token请求个人信息来筛选动态路由
     routers: [],
     addRouters: [],
+    tokenSources:new Map(),
   },
   mutations: {
     setToken(state, token) {
@@ -317,6 +318,16 @@ const store = new Vuex.Store({
       state.addRouters = routers // 保存动态路由用来addRouter
       state.routers = defaultRouter.concat(routers) // 所有有权限的路由表，用来生成菜单列表
     },
+    setTokenSources(state,data){
+      if(data instanceof Array){
+        state.tokenSources.set(data[0], data[1])
+      }else{
+        state.tokenSources = new Map()
+      }
+    },
+    delTokenSources(state,data){
+      state.tokenSources.delete(data)
+    },
   },
   actions: {
     Login({ commit }, that) {
 export default {
   state: {
-    isCollapse: false,
-    logoShow: false,
+    isCollapse: sessionStorage.getItem('isCollapse') && sessionStorage.getItem('isCollapse') == 1 ? true : false || false,
+    logoShow: sessionStorage.getItem('isCollapse') && sessionStorage.getItem('isCollapse') == 1 ? true : false || false,
     uniquerouter: true,
     rightNav: {},
     tabnavBox: JSON.parse(sessionStorage.getItem("addTab")) || [{
@@ -11,7 +11,7 @@ export default {
     }]
   },
   mutations: {
-    addTab (state, arg) {
+    addTab(state, arg) {
       state.isActive = arg.path
       if (state.tabnavBox[0] && state.tabnavBox[0].title !== "home") {
         state.tabnavBox.unshift({
@@ -32,10 +32,10 @@ export default {
       sessionStorage.setItem("addTab", JSON.stringify(state.tabnavBox))
     },
-    openMenu (state, arg) {
+    openMenu(state, arg) {
       state.rightNav = arg
     },
-    removeTab (state, arg) {
+    removeTab(state, arg) {
       let index = state.tabnavBox.findIndex(function (value, key) {
         return value.path === arg.tabItem.path
       })
@@ -46,7 +46,7 @@ export default {
       }
       sessionStorage.setItem("addTab", JSON.stringify(state.tabnavBox))
     },
-    removeOtherTab (state, arg) {
+    removeOtherTab(state, arg) {
       state.tabnavBox = [{
         title: "home",
         path: "/index"
@@ -59,8 +59,9 @@ export default {
       arg.router.push(arg.tabItem.path)
       sessionStorage.setItem("addTab", JSON.stringify(state.tabnavBox))
     },
-    collapse (state, arg) {
+    collapse(state, arg) {
       state.isCollapse = !state.isCollapse
+      sessionStorage.setItem('isCollapse', state.isCollapse ? 1 : 0)
       if (state.logoShow) {
         setTimeout(function () {
           state.logoShow = false
@@ -71,19 +72,19 @@ export default {
     }
   },
   actions: {
-    addTab ({commit}, arg) {
+    addTab({ commit }, arg) {
       commit("addTab", arg)
     },
-    openMenu ({commit}, arg) {
+    openMenu({ commit }, arg) {
       commit("openMenu", arg)
     },
-    removeTab ({commit}, arg) {
+    removeTab({ commit }, arg) {
       commit("removeTab", arg)
     },
-    removeOtherTab ({commit}, arg) {
+    removeOtherTab({ commit }, arg) {
       commit("removeOtherTab", arg)
     },
-    collapse ({commit}, arg) {
+    collapse({ commit }, arg) {
       commit("collapse", arg)
     }
   }
 <template>
-  <div>修改答案</div>
+  <div>
+    <back-box>
+      <template slot="title">
+        <span>修改答案</span>
+      </template>
+    </back-box>
+  </div>
 </template>
 <script>
-export default {
-
-}
+export default {};
 </script>
 <style>
-
 </style>
 \ No newline at end of file
@@ -2,28 +2,562 @@
   <div>
     <back-box>
       <template slot="title">
-        <i class="fa fa-mail-reply-all"></i>
         <span>备题组卷</span>
       </template>
       <template slot="btns">
-        
+        <el-tooltip effect="dark" content="创建答题卡" placement="left">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            plain
+            circle
+            @click="toAdd"
+          ></el-button>
+        </el-tooltip>
       </template>
     </back-box>
-    <div class="content">
-      <router-link to="/examinationPaperAdd">添加答题卡</router-link>
-      <router-link to="/examinationPaperRecycle">已归档答题卡</router-link>
-      <router-link to="/examinationPaperEdit">修改答案</router-link>
+
+    <div class="answer-header">
+      <div class="sel-box">
+        <el-select
+          class="sel"
+          v-model="query.clazzId"
+          placeholder="选择班级"
+          @change="changClazz"
+        >
+          <el-option
+            v-for="item in classList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            >{{ item.label }}
+          </el-option>
+        </el-select>
+        <el-select
+          class="sel"
+          v-model="query.subjectId"
+          placeholder="选择科目"
+          @change="_QueryData()"
+        >
+          <el-option
+            v-for="item in subjectList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          class="sel"
+          v-model="query.typeName"
+          placeholder="选择类型"
+          @change="_QueryData()"
+        >
+          <el-option
+            v-for="item in typeList"
+            :key="item"
+            :label="item"
+            :value="item"
+            >{{ item }}
+          </el-option>
+        </el-select>
+        <el-input
+          placeholder="试卷名称"
+          v-model="query.title"
+          class="input-with-select"
+          @keyup.enter.native="_QueryData(true)"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="_QueryData(true)"
+          ></el-button>
+        </el-input>
+      </div>
     </div>
+    <p class="tips">
+      <span>另有25份已经归档的答题卡,</span>
+      <router-link to="/examinationPaperRecycle">点击查看&gt;&gt;</router-link>
+    </p>
+    <ul class="content">
+      <li class="item" v-for="item in tableData" :key="item.id">
+        <div class="pic-box">
+          <p class="i-box"><i class="fa fa-map-o"></i></p>
+          <p class="ids">{{ item.id }}</p>
+        </div>
+        <div class="info">
+          <p class="title">
+            {{ item.title }} <span class="label">{{ item.typeName }}</span>
+          </p>
+          <p class="num">
+            总题数：{{ item.answerNum }}
+            <em class="s-line">|</em>
+            预计时长：{{ item.time }}
+            <em class="s-line">|</em>
+            授课端同步：
+            <span
+              class="clazz"
+              v-for="(clazzChild, indexs) in item.aboutClazz"
+              :key="clazzChild"
+              >{{
+                `${clazzChild}班${
+                  indexs != item.aboutClazz.length - 1 ? "、" : ""
+                }`
+              }}
+              <i class="el-icon-success"></i
+            ></span>
+          </p>
+          <p class="person">
+            {{ item.teacher }}<em class="s-line">|</em
+            ><span class="date">{{ item.date }}</span>
+          </p>
+        </div>
+        <div class="btn-box">
+          <el-tooltip effect="dark" content="修改答案" placement="bottom">
+            <el-button
+              class="edit"
+              type="primary"
+              size="mini"
+              circle
+              icon="el-icon-edit"
+              @click="toEdit(item)"
+            ></el-button>
+          </el-tooltip>
+          <el-dropdown
+            trigger="click"
+            @command="handleDropdownClick($event, item)"
+          >
+            <el-button
+              type="info"
+              size="mini"
+              circle
+              icon="el-icon-more"
+            ></el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="1">授课端同步</el-dropdown-item>
+              <el-dropdown-item :command="2">修改分享范围</el-dropdown-item>
+              <el-dropdown-item :command="3">复制</el-dropdown-item>
+              <el-dropdown-item :command="4">归档</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </li>
+    </ul>
+    <el-dialog title="选择分享范围" :visible.sync="dialogVisible" width="400">
+      <el-form :model="shareForm" :rules="shareRulesForm" label-width="160px">
+        <el-form-item label="适用年级：">
+          <el-col :span="11">
+            <el-input v-model="shareForm.grade"></el-input>
+          </el-col>
+        </el-form-item>
+        <el-form-item prop="share" label="分享范围：">
+          <el-radio-group v-model="shareForm.share">
+            <el-radio :label="1">任课班级分享</el-radio>
+            <el-radio :label="2">全年级分享</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveShare">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 export default {
   name: "examinationPaper",
+  data() {
+    return {
+      dialogVisible: false,
+      query: {
+        clazzId: "2003",
+        subjectId: "0",
+        typeName: "周测",
+        title: "",
+      },
+      classList: [
+        {
+          label: "2003班",
+          value: "2003",
+        },
+      ],
+      subjectList: [
+        {
+          label: "语文",
+          value: "0",
+        },
+      ],
+      typeList: ["周测"],
+      tableData: [
+        {
+          title: "数学样例试卷202211-324654",
+          id: "1062837",
+          typeName: "周测",
+          answerNum: 45,
+          time: 90,
+          aboutClazz: [203, 204],
+          teacher: "张老师",
+          date: "2022-11-04 18:09:49",
+          share: 1,
+        },
+        {
+          title: "数学样例试卷202211-4180949",
+          id: "1062838",
+          typeName: "周测",
+          answerNum: 45,
+          time: 90,
+          aboutClazz: [203, 204],
+          teacher: "张老师",
+          date: "2022-11-04 18:09:49",
+          share: 1,
+        },
+      ],
+      shareForm: {
+        id: "",
+        grade: "",
+        share: 1,
+      },
+      shareRulesForm: {
+        share: [{ required: true, message: "选择分享范围", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    toAdd(query) {
+      this.$router.push({
+        path: "/examinationPaperAdd",
+        query:query&&{...query}
+      });
+    },
+    toEdit(item) {
+      this.$router.push({
+        path: "/examinationPaperEdit",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+    handleDropdownClick(value, item) {//更多
+      const that = this;
+      switch (value) {
+        case 1:
+          //授课端同步
+          that.syncMeg(item)
+          break;
+        case 2:
+          //修改分享范围
+          that.shareForm.id = item.id;
+          that.shareForm.grade = item.grade;
+          that.shareForm.share = item.share || 1;
+          that.dialogVisible = true;
+          break;
+        case 3:
+          //复制
+          that.toAdd()
+          break;
+        case 4:
+          //归档
+          that.recovery(item)
+          break;
+      }
+    },
+    async syncMeg() {//同步
+      // const { data, code, message } = await this.$request.fetchAnswerList({
+      //   ...this.shareForm,
+      // });
+      // this.loading = false;
+      // if (code === 0) {
+      this.$message.success("已同步");
+      // } else {
+      //   this.$message.error(message);
+      // }
+    },
+    async saveShare() {//修改分享范围
+      // const { data, code, message } = await this.$request.fetchAnswerList({
+      //   ...this.shareForm,
+      // });
+      // this.loading = false;
+      // if (code === 0) {
+      this.shareForm.id = "";
+      this.shareForm.grade = "";
+      this.shareForm.share = 1;
+      dialogVisible = false;
+      // } else {
+      //   this.$message.error(message);
+      // }
+    },
+    async recovery(item) {//归档
+      // const { data, code, message } = await this.$request.fetchAnswerList({
+      //   ...this.shareForm,
+      // });
+      // if (code === 0) {
+        this.tableData = this.tableData.filter(items=>{
+          return items.id != item.id
+        })
+      // } else {
+      //   this.$message.error(message);
+      // }
+    },
+
+    async changClazz() {//切换班级
+      await this._QuerySubjectList();
+      this._QueryData();
+    },
+    // 查找答题卡类型
+    async _QueryTypeList() {
+      const { data, code, message } = await this.$request.fetchTypeNames();
+      if (code === 0) {
+        this.typeList = [...data.typeNames] || [];
+      } else {
+        this.$message.error(message);
+      }
+    },
+    // 查找班级
+    async _QueryClassList() {
+      const { data, code, message } = await this.$request.fetchClassList();
+      if (code === 0) {
+        if (!!data.list) {
+          this.classList = data.list.map((item) => {
+            return {
+              value: item.clazzId,
+              label: item.clazzName,
+            };
+          });
+          this.query.clazzId = this.classList[0]?.value;
+        }
+      } else {
+        this.$message.error(message);
+      }
+    },
+    // 查找科目
+    async _QuerySubjectList() {
+      const { data, code, message } = await this.$request.fetchSubjectList({
+        clazzId: this.query.clazzId,
+      });
+      if (code === 0) {
+        this.subjectList = data.list.map((item) => {
+          return {
+            value: item.subjectId,
+            label: item.subjectName,
+          };
+        });
+        this.query.clazzId = this.subjectList[0]?.value;
+      } else {
+        this.$message.error(message);
+      }
+    },
+    async _QueryData(type) {//获取答题卡列表
+      let query = {};
+      if (!type) {
+        this.query.title = "";
+        query = { ...this.query };
+      } else {
+        query = { title: this.query.title };
+        this.query.typeName = "";
+        this.query.subjectId = "";
+      }
+      query.clazzId = this.query.clazzId;
+      for (let key in query) {
+        if (!query[key]) {
+          query[key] = null;
+        }
+      }
+      if (!query.clazzId) {
+        this.total = 0;
+        this.tableData = [];
+        this.loading = false;
+        return;
+      }
+      this.loading = true;
+      const { data, code, message } = await this.$request.fetchAnswerList({
+        ...query,
+      });
+      this.loading = false;
+      if (code === 0) {
+        this.total = data.total;
+        this.tableData = (data.list && [...data.list]) || [];
+      } else {
+        this.$message.error(message);
+      }
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
-.container {
+.answer-header {
+  padding: 16px 40px 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .btn-box {
+    display: flex;
+  }
+}
+.sel-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  .sel {
+    width: 8%;
+    min-width: 90px;
+    margin-right: 20px;
+  }
+  :deep(.el-input__inner) {
+    border-radius: 20px;
+    border: 1px solid #e2e2e2;
+    height: 36px;
+    line-height: 34px;
+  }
+  :deep(.el-input__icon) {
+    line-height: 34px;
+  }
+  :deep(.el-date-editor.el-input),
+  :deep(.el-date-editor.el-input__inner) {
+    width: 200px;
+  }
+  .input-with-select {
+    width: 200px;
+    height: 36px;
+    margin-right: 50px;
+    border-radius: 20px;
+    border: 1px solid #e2e2e2;
+    box-sizing: border-box;
+    :deep(.el-input__inner) {
+      border-radius: 20px;
+      border: none;
+      height: 34px;
+      line-height: 34px;
+    }
+    :deep(.el-input-group__append, .el-input-group__prepend) {
+      border: none;
+      background: transparent;
+    }
+  }
+  .d1 {
+    margin-left: 30px;
+  }
+  .p1 {
+    flex: 1;
+    .s1 {
+      margin-left: 36px;
+      cursor: pointer;
+      color: #7f7f7f;
+      &:hover {
+        color: #409eff;
+      }
+      &.active {
+        color: #667ffd;
+      }
+    }
+  }
+}
+.tips {
+  display: flex;
+  padding-left: 30px;
+  line-height: 16px;
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 10px;
+}
+.content {
+  margin: 0 20px;
+  background: #f8f8f8;
+  padding: 12px;
+  border-radius: 20px;
+  .item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 12px;
+    border-radius: 20px;
+    background: #fff;
+    margin-bottom: 12px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    .pic-box {
+      width: 80px;
+      height: 80px;
+      border-radius: 10px;
+      margin-right: 10px;
+      flex-shrink: 0;
+      background: #667ffd;
+      text-align: center;
+      color: #fff;
+      font-weight: 500;
+      .i-box {
+        padding-top: 10px;
+        font-size: 32px;
+        margin-bottom: 3px;
+      }
+    }
+    .info {
+      height: 80px;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .s-line {
+        padding: 0 5px;
+        color: #e2e2e2;
+      }
+      .title {
+        font-size: 16px;
+        color: #222;
+        font-weight: 500;
+        .label {
+          display: inline-block;
+          font-size: 12px;
+          color: #2e9afe;
+          line-height: 16px;
+          padding: 0 10px;
+          border: 1px solid #2e9afe;
+          border-radius: 10px;
+          transform: translateY(-2px);
+        }
+      }
+      .person {
+        color: #666;
+      }
+    }
+    .clazz {
+      font-size: 16px;
+      color: #667ffd;
+      font-weight: 500;
+      position: relative;
+      margin-right: 8px;
+      .el-icon-success {
+        position: absolute;
+        right: 0;
+        top: -5px;
+        color: #667ffd;
+      }
+      &:last-of-type {
+        .el-icon-success {
+          right: -18px;
+        }
+      }
+    }
+    .btn-box {
+      flex-shrink: 0;
+      .edit {
+        margin-right: 12px;
+      }
+    }
+  }
+}
+.dialog-footer {
+  text-align: center;
+  :deep(.el-button) {
+    border-radius: 20px;
+    padding: 8px 20px 7px;
+    margin: 0 12px;
+  }
 }
 </style>
 \ No newline at end of file
 <template>
-  <div>归档</div>
+  <div>
+     <back-box>
+      <template slot="title">
+        <span>归档</span>
+      </template>
+    </back-box>
+  </div>
 </template>
 <script>
@@ -81,9 +81,12 @@ export default {
       dialogPassVisible: false,
       title: "",
       userId: "",
-      isCollapse:false
+      isCollapse:false,
     };
   },
+  created(){
+    this.isCollapse = this.$store.getters.isCollapse
+  },
   methods: {
     collapse() {
       this.isCollapse = !this.isCollapse