Blame view

src/views/examinationPaper/index.vue 13.2 KB
4c4f7640   梁保满   路由表,路由前端文件
1
2
  <template>
    <div>
d4283687   梁保满   首页布局完成,页面顶部返回组件
3
4
      <back-box>
        <template slot="title">
d4283687   梁保满   首页布局完成,页面顶部返回组件
5
6
7
          <span>备题组卷</span>
        </template>
        <template slot="btns">
65f592b6   梁保满   答题卡列表页
8
9
10
11
12
13
          <el-tooltip effect="dark" content="创建答题卡" placement="left">
            <el-button
              type="primary"
              icon="el-icon-plus"
              plain
              circle
13b58a42   梁保满   备题组卷部分前端页面基本完成
14
              @click="toAdd({})"
65f592b6   梁保满   答题卡列表页
15
16
            ></el-button>
          </el-tooltip>
d4283687   梁保满   首页布局完成,页面顶部返回组件
17
18
        </template>
      </back-box>
65f592b6   梁保满   答题卡列表页
19
20
21
  
      <div class="answer-header">
        <div class="sel-box">
ee6e7628   梁保满   备题组卷借口数据对接调整
22
23
24
25
26
          <el-select
            class="sel"
            v-model="query.classId"
            placeholder="选择班级"
            @change="changClazz"
65f592b6   梁保满   答题卡列表页
27
          >
ee6e7628   梁保满   备题组卷借口数据对接调整
28
29
30
31
32
33
34
35
            <el-option
              v-for="item in classList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
65f592b6   梁保满   答题卡列表页
36
37
          <el-select
            class="sel"
ee6e7628   梁保满   备题组卷借口数据对接调整
38
            v-model="query.subjectName"
65f592b6   梁保满   答题卡列表页
39
40
41
42
43
44
45
46
47
48
49
50
51
            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"
ee6e7628   梁保满   备题组卷借口数据对接调整
52
            v-model="query.tagId"
65f592b6   梁保满   答题卡列表页
53
54
55
56
57
            placeholder="选择类型"
            @change="_QueryData()"
          >
            <el-option
              v-for="item in typeList"
5424ef82   梁保满   接口调整
58
              :key="item.label"
ee6e7628   梁保满   备题组卷借口数据对接调整
59
60
              :label="item.label"
              :value="item.value"
5424ef82   梁保满   接口调整
61
              >{{ item.label }}
65f592b6   梁保满   答题卡列表页
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
            </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>
d4283687   梁保满   首页布局完成,页面顶部返回组件
77
      </div>
f26ecfa4   阿宝   测试bug
78
      <p class="tips" v-show="archivedTotal">
ee6e7628   梁保满   备题组卷借口数据对接调整
79
        <span>另有{{ archivedTotal }}份已经归档的答题卡,</span>
65f592b6   梁保满   答题卡列表页
80
81
        <router-link to="/examinationPaperRecycle">点击查看&gt;&gt;</router-link>
      </p>
f26ecfa4   阿宝   测试bug
82
      <ul class="content" v-if="tableData && tableData.length">
65f592b6   梁保满   答题卡列表页
83
84
85
86
87
88
89
        <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">
f26ecfa4   阿宝   测试bug
90
91
              {{ item.title }}
              <span class="label" v-if="!!item.tag">{{ item.tag }}</span>
65f592b6   梁保满   答题卡列表页
92
93
            </p>
            <p class="num">
ee6e7628   梁保满   备题组卷借口数据对接调整
94
              总题数:{{ item.questionNum }}
65f592b6   梁保满   答题卡列表页
95
              <em class="s-line">|</em>
ee6e7628   梁保满   备题组卷借口数据对接调整
96
              预计时长:{{ item.examsDuration }}
65f592b6   梁保满   答题卡列表页
97
98
99
100
              <em class="s-line">|</em>
              授课端同步:
              <span
                class="clazz"
ee6e7628   梁保满   备题组卷借口数据对接调整
101
102
                v-for="(clazzChild, indexs) in item.classList"
                :key="clazzChild.classId"
65f592b6   梁保满   答题卡列表页
103
                >{{
5424ef82   梁保满   接口调整
104
                  `${clazzChild.className}${
f26ecfa4   阿宝   测试bug
105
                    indexs != item.classList.length - 1 ? "、" : ""
65f592b6   梁保满   答题卡列表页
106
107
                  }`
                }}
75a5cc20   阿宝   测试用逻辑删除
108
                <i v-if="clazzChild.keepStatus == 1" class="el-icon-success"></i
65f592b6   梁保满   答题卡列表页
109
110
111
              ></span>
            </p>
            <p class="person">
ee6e7628   梁保满   备题组卷借口数据对接调整
112
113
              {{ item.realName }}<em class="s-line">|</em
              ><span class="date">{{ item.modifiedTime }}</span>
65f592b6   梁保满   答题卡列表页
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
            </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">
8f573b82   阿宝   组卷接口联调
138
                <el-dropdown-item :command="1" v-if="userName == item.realName"
ee6e7628   梁保满   备题组卷借口数据对接调整
139
140
                  >修改分享范围</el-dropdown-item
                >
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
141
142
                <el-dropdown-item :command="2">复制</el-dropdown-item>
                <el-dropdown-item :command="3">归档</el-dropdown-item>
65f592b6   梁保满   答题卡列表页
143
144
145
146
147
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </li>
      </ul>
f26ecfa4   阿宝   测试bug
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
      <div class="pagination-box">
        <el-pagination
          small=""
          layout="total,prev, pager, next"
          :hide-on-single-page="true"
          :total="total"
          @current-change="changePage"
          :current-page="page"
          :page-size="size"
        >
        </el-pagination>
      </div>
      <el-empty
        v-if="!loading && tableData.length == 0"
        content="没有更多数据"
        :image-size="100"
      ></el-empty>
65f592b6   梁保满   答题卡列表页
165
166
      <el-dialog title="选择分享范围" :visible.sync="dialogVisible" width="400">
        <el-form :model="shareForm" :rules="shareRulesForm" label-width="160px">
65f592b6   梁保满   答题卡列表页
167
          <el-form-item prop="share" label="分享范围:">
8f573b82   阿宝   组卷接口联调
168
169
170
            <el-radio-group v-model="shareForm.sharingType">
              <el-radio :label="0">任课班级分享</el-radio>
              <el-radio :label="1">全年级分享</el-radio>
65f592b6   梁保满   答题卡列表页
171
172
173
174
175
176
177
178
            </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>
4c4f7640   梁保满   路由表,路由前端文件
179
180
181
182
183
    </div>
  </template>
  
  <script>
  export default {
d4283687   梁保满   首页布局完成,页面顶部返回组件
184
    name: "examinationPaper",
65f592b6   梁保满   答题卡列表页
185
186
    data() {
      return {
f26ecfa4   阿宝   测试bug
187
        loading: false,
8f573b82   阿宝   组卷接口联调
188
        userName: "",
65f592b6   梁保满   答题卡列表页
189
190
        dialogVisible: false,
        query: {
ee6e7628   梁保满   备题组卷借口数据对接调整
191
192
193
          classId: "",
          subjectName: "",
          tagId: "",
65f592b6   梁保满   答题卡列表页
194
195
          title: "",
        },
ee6e7628   梁保满   备题组卷借口数据对接调整
196
197
198
199
        classList: [],
        subjectList: [],
        typeList: [],
        archivedTotal: 0, //已归档答题卡数量
f26ecfa4   阿宝   测试bug
200
        tableData: null,
65f592b6   梁保满   答题卡列表页
201
202
        shareForm: {
          id: "",
f26ecfa4   阿宝   测试bug
203
          sharingType: 1, //0-任课班级/1-全年级
65f592b6   梁保满   答题卡列表页
204
205
        },
        shareRulesForm: {
f26ecfa4   阿宝   测试bug
206
207
208
          sharingType: [
            { required: true, message: "选择分享范围", trigger: "blur" },
          ],
65f592b6   梁保满   答题卡列表页
209
        },
f26ecfa4   阿宝   测试bug
210
        total: 0,
ee6e7628   梁保满   备题组卷借口数据对接调整
211
212
        page: 1,
        size: 20,
65f592b6   梁保满   答题卡列表页
213
214
      };
    },
ee6e7628   梁保满   备题组卷借口数据对接调整
215
    async created() {
8f573b82   阿宝   组卷接口联调
216
      this.userName = this.$store.getters.info.name || "";
ee6e7628   梁保满   备题组卷借口数据对接调整
217
218
219
220
221
      await this._QueryClassList();
      await this._QuerySubjectList();
      this._QueryData();
      this._QueryTypeList();
    },
65f592b6   梁保满   答题卡列表页
222
223
    methods: {
      toAdd(query) {
13b58a42   梁保满   备题组卷部分前端页面基本完成
224
        let routerItem = {
65f592b6   梁保满   答题卡列表页
225
          path: "/examinationPaperAdd",
13b58a42   梁保满   备题组卷部分前端页面基本完成
226
227
228
        };
        query ? (routerItem["query"] = { ...query }) : "";
        this.$router.push(routerItem);
65f592b6   梁保满   答题卡列表页
229
230
231
232
233
      },
      toEdit(item) {
        this.$router.push({
          path: "/examinationPaperEdit",
          query: {
ee6e7628   梁保满   备题组卷借口数据对接调整
234
            paperId: item.id,
65f592b6   梁保满   答题卡列表页
235
236
237
          },
        });
      },
13b58a42   梁保满   备题组卷部分前端页面基本完成
238
239
      handleDropdownClick(value, item) {
        //更多
65f592b6   梁保满   答题卡列表页
240
241
242
        const that = this;
        switch (value) {
          case 1:
65f592b6   梁保满   答题卡列表页
243
244
            //修改分享范围
            that.shareForm.id = item.id;
8f573b82   阿宝   组卷接口联调
245
            that.shareForm.sharingType = item.sharingType || 1;
65f592b6   梁保满   答题卡列表页
246
247
            that.dialogVisible = true;
            break;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
248
          case 2:
65f592b6   梁保满   答题卡列表页
249
            //复制
ee6e7628   梁保满   备题组卷借口数据对接调整
250
            that.toAdd({ type: 2, paperId: item.id });
65f592b6   梁保满   答题卡列表页
251
            break;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
252
          case 3:
65f592b6   梁保满   答题卡列表页
253
            //归档
13b58a42   梁保满   备题组卷部分前端页面基本完成
254
            that.recovery(item);
65f592b6   梁保满   答题卡列表页
255
256
257
            break;
        }
      },
f26ecfa4   阿宝   测试bug
258
259
260
261
      changePage(page){
        this.page = page
        this._QueryData(this.query.title)
      },
13b58a42   梁保满   备题组卷部分前端页面基本完成
262
263
      async saveShare() {
        //修改分享范围
6fffbd55   阿宝   组卷接口调整
264
        const { data, status, info } = await this.$request.modifyPaper({
8f573b82   阿宝   组卷接口联调
265
266
          paperId: this.shareForm.id,
          sharingType: this.shareForm.sharingType,
ee6e7628   梁保满   备题组卷借口数据对接调整
267
        });
ee6e7628   梁保满   备题组卷借口数据对接调整
268
269
        if (status === 0) {
          this.shareForm.id = "";
8f573b82   阿宝   组卷接口联调
270
271
          this.shareForm.sharingType = 1;
          this.dialogVisible = false;
f26ecfa4   阿宝   测试bug
272
          this.$message.success(info);
ee6e7628   梁保满   备题组卷借口数据对接调整
273
        } else {
6fffbd55   阿宝   组卷接口调整
274
          this.$message.error(info);
ee6e7628   梁保满   备题组卷借口数据对接调整
275
        }
65f592b6   梁保满   答题卡列表页
276
      },
13b58a42   梁保满   备题组卷部分前端页面基本完成
277
278
      async recovery(item) {
        //归档
6fffbd55   阿宝   组卷接口调整
279
        const { data, status, info } = await this.$request.modifyPaper({
ee6e7628   梁保满   备题组卷借口数据对接调整
280
281
          paperId: item.id,
          status: 2,
13b58a42   梁保满   备题组卷部分前端页面基本完成
282
        });
ee6e7628   梁保满   备题组卷借口数据对接调整
283
284
285
286
287
        if (status === 0) {
          let type = this.query.title ? 1 : 0;
          this.page = 1;
          this._QueryData(type);
        } else {
6fffbd55   阿宝   组卷接口调整
288
          this.$message.error(info);
ee6e7628   梁保满   备题组卷借口数据对接调整
289
        }
65f592b6   梁保满   答题卡列表页
290
      },
ee6e7628   梁保满   备题组卷借口数据对接调整
291
292
      //切换班级
      async changClazz() {
65f592b6   梁保满   答题卡列表页
293
        await this._QuerySubjectList();
ee6e7628   梁保满   备题组卷借口数据对接调整
294
        this._QueryData(false);
65f592b6   梁保满   答题卡列表页
295
      },
65f592b6   梁保满   答题卡列表页
296
297
      // 查找答题卡类型
      async _QueryTypeList() {
6fffbd55   阿宝   组卷接口调整
298
        const { data, status, info } = await this.$request.fetchTypeNames({
5424ef82   梁保满   接口调整
299
          classId: this.query.classId,
f26ecfa4   阿宝   测试bug
300
          type: 0,
5424ef82   梁保满   接口调整
301
        });
ee6e7628   梁保满   备题组卷借口数据对接调整
302
303
        if (status === 0) {
          this.typeList =
5424ef82   梁保满   接口调整
304
            data.list.map((item) => {
ee6e7628   梁保满   备题组卷借口数据对接调整
305
306
307
308
309
              return {
                value: item.tagId,
                label: item.tag,
              };
            }) || [];
5424ef82   梁保满   接口调整
310
          this.typeList.unshift({
ee6e7628   梁保满   备题组卷借口数据对接调整
311
            value: "",
f26ecfa4   阿宝   测试bug
312
            label: "请选择标签",
ee6e7628   梁保满   备题组卷借口数据对接调整
313
          });
65f592b6   梁保满   答题卡列表页
314
        } else {
6fffbd55   阿宝   组卷接口调整
315
          this.$message.error(info);
65f592b6   梁保满   答题卡列表页
316
317
318
319
        }
      },
      // 查找班级
      async _QueryClassList() {
f26ecfa4   阿宝   测试bug
320
        this.loading = true;
6fffbd55   阿宝   组卷接口调整
321
        const { data, status, info } = await this.$request.fetchClassList();
f26ecfa4   阿宝   测试bug
322
        console.log(status);
ee6e7628   梁保满   备题组卷借口数据对接调整
323
        if (status === 0) {
65f592b6   梁保满   答题卡列表页
324
          if (!!data.list) {
f26ecfa4   阿宝   测试bug
325
326
327
328
329
330
331
            this.classList =
              data.list?.map((item) => {
                return {
                  value: item.classId,
                  label: item.className,
                };
              }) || [];
5424ef82   梁保满   接口调整
332
            this.query.classId = this.classList[0]?.value;
65f592b6   梁保满   答题卡列表页
333
334
          }
        } else {
6fffbd55   阿宝   组卷接口调整
335
          this.$message.error(info);
65f592b6   梁保满   答题卡列表页
336
337
338
339
        }
      },
      // 查找科目
      async _QuerySubjectList() {
6fffbd55   阿宝   组卷接口调整
340
        const { data, status, info } = await this.$request.fetchSubjectList({
5424ef82   梁保满   接口调整
341
          classId: this.query.classId,
65f592b6   梁保满   答题卡列表页
342
        });
ee6e7628   梁保满   备题组卷借口数据对接调整
343
        if (status === 0) {
f26ecfa4   阿宝   测试bug
344
345
346
347
348
349
350
          this.subjectList =
            data.subjectNames?.map((item) => {
              return {
                value: item,
                label: item,
              };
            }) || [];
5424ef82   梁保满   接口调整
351
          this.query.subjectName = this.subjectList[0]?.value;
65f592b6   梁保满   答题卡列表页
352
        } else {
6fffbd55   阿宝   组卷接口调整
353
          this.$message.error(info);
65f592b6   梁保满   答题卡列表页
354
355
        }
      },
13b58a42   梁保满   备题组卷部分前端页面基本完成
356
      async _QueryData(type) {
f26ecfa4   阿宝   测试bug
357
        this.loading = true;
13b58a42   梁保满   备题组卷部分前端页面基本完成
358
        //获取答题卡列表
65f592b6   梁保满   答题卡列表页
359
360
361
362
363
364
        let query = {};
        if (!type) {
          this.query.title = "";
          query = { ...this.query };
        } else {
          query = { title: this.query.title };
ee6e7628   梁保满   备题组卷借口数据对接调整
365
366
          this.query.tagId = "";
          this.query.subjectName = "";
65f592b6   梁保满   答题卡列表页
367
        }
5424ef82   梁保满   接口调整
368
        query.classId = this.query.classId;
65f592b6   梁保满   答题卡列表页
369
370
371
372
373
        for (let key in query) {
          if (!query[key]) {
            query[key] = null;
          }
        }
5424ef82   梁保满   接口调整
374
        if (!query.classId) {
65f592b6   梁保满   答题卡列表页
375
376
377
378
379
380
          this.total = 0;
          this.tableData = [];
          this.loading = false;
          return;
        }
        this.loading = true;
6fffbd55   阿宝   组卷接口调整
381
        const { data, status, info } = await this.$request.fetchPaperList({
65f592b6   梁保满   答题卡列表页
382
          ...query,
ee6e7628   梁保满   备题组卷借口数据对接调整
383
          status: 1,
f26ecfa4   阿宝   测试bug
384
385
          // page: this.page,
          // size: this.size,
65f592b6   梁保满   答题卡列表页
386
387
        });
        this.loading = false;
ee6e7628   梁保满   备题组卷借口数据对接调整
388
        if (status === 0) {
f26ecfa4   阿宝   测试bug
389
          this.archivedTotal = data.archivedTotal;
65f592b6   梁保满   答题卡列表页
390
391
392
          this.total = data.total;
          this.tableData = (data.list && [...data.list]) || [];
        } else {
6fffbd55   阿宝   组卷接口调整
393
          this.$message.error(info);
65f592b6   梁保满   答题卡列表页
394
395
396
        }
      },
    },
d4283687   梁保满   首页布局完成,页面顶部返回组件
397
  };
4c4f7640   梁保满   路由表,路由前端文件
398
399
  </script>
  
d4283687   梁保满   首页布局完成,页面顶部返回组件
400
  <style scoped lang="scss">
65f592b6   梁保满   答题卡列表页
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
  .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 {
75a5cc20   阿宝   测试用逻辑删除
444
        min-height: 80px;
65f592b6   梁保满   答题卡列表页
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
        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 {
75a5cc20   阿宝   测试用逻辑删除
474
        font-size: 14px;
65f592b6   梁保满   答题卡列表页
475
476
477
        color: #667ffd;
        font-weight: 500;
        position: relative;
8f573b82   阿宝   组卷接口联调
478
        position: relative;
f26ecfa4   阿宝   测试bug
479
        &.active:after {
8f573b82   阿宝   组卷接口联调
480
481
482
          content: "\e79c";
          color: #667ffd;
        }
65f592b6   梁保满   答题卡列表页
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
        .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;
        }
      }
    }
  }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
503
504
505
506
507
508
509
510
511
512
  .answer-header {
    .sel-box {
      .sel {
        min-width: 160px;
      }
      :deep(.el-cascader__tags) {
        flex-wrap: nowrap;
      }
    }
  }
65f592b6   梁保满   答题卡列表页
513
514
515
516
517
518
519
  .dialog-footer {
    text-align: center;
    :deep(.el-button) {
      border-radius: 20px;
      padding: 8px 20px 7px;
      margin: 0 12px;
    }
d4283687   梁保满   首页布局完成,页面顶部返回组件
520
  }
4c4f7640   梁保满   路由表,路由前端文件
521
  </style>