Blame view

src/views/basic/ask/index.vue 11.4 KB
4c4f7640   梁保满   路由表,路由前端文件
1
  <template>
dbbfc6c5   梁保满   飞书优化及bug
2
    <div class="main" ref="main">
d01c5799   梁保满   随堂问 报表开发
3
4
5
6
7
8
9
10
      <div class="sel-dia">
        <p class="tit">
          <span>报表数据配置</span>
          <i class="el-icon-close" @click="goHome"></i>
        </p>
        <div class="select-box">
          <div class="sel-item">
            <span class="sel-label">班级:</span>
82235092   梁保满   导入或者修改答案没有答案报错,修改...
11
12
13
14
15
16
17
18
19
20
21
22
            <el-select
              class="sel"
              v-model="query.classId"
              placeholder="选择班级"
              @change="changeclass"
            >
              <el-option
                v-for="item in classList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
d01c5799   梁保满   随堂问 报表开发
23
24
              </el-option>
            </el-select>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
25
          </div>
82235092   梁保满   导入或者修改答案没有答案报错,修改...
26
          <div class="sel-item sel-item2" v-if="role == 'ROLE_BANZHUREN'">
d01c5799   梁保满   随堂问 报表开发
27
28
29
            <span class="sel-label">科目:</span>
            <div class="sel-d">
              <p class="p-all">
82235092   梁保满   导入或者修改答案没有答案报错,修改...
30
31
32
33
34
35
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="allSubject"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
d01c5799   梁保满   随堂问 报表开发
36
37
              </p>
              <p class="sel-p">
82235092   梁保满   导入或者修改答案没有答案报错,修改...
38
39
40
41
42
43
44
45
46
47
                <el-checkbox-group
                  v-model="query.subjectNames"
                  @change="handleChecked"
                >
                  <el-checkbox
                    v-for="item in subjectList"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-checkbox
                  >
d01c5799   梁保满   随堂问 报表开发
48
49
                </el-checkbox-group>
              </p>
e371f2dc   梁保满   软件下载,学校,班级老师等报表导入...
50
            </div>
255e2506   梁保满   飞书bug及优化
51
          </div>
82235092   梁保满   导入或者修改答案没有答案报错,修改...
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
          <div class="sel-item sel-item2" v-else>
            <span class="sel-label">科目:</span>
            <div class="sel-d">
              <p class="sel-p">
                <el-radio-group v-model="query.subjectNames">
                  <el-radio
                    v-for="item in subjectList"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-radio
                  >
                </el-radio-group>
              </p>
            </div>
          </div>
d01c5799   梁保满   随堂问 报表开发
67
68
69
          <div class="sel-item">
            <span class="sel-label">日期:</span>
            <div class="d1">
82235092   梁保满   导入或者修改答案没有答案报错,修改...
70
71
72
73
74
75
76
              <el-date-picker
                v-model="query.startDay"
                type="date"
                @change="handleChangeTimeStart"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
              >
d01c5799   梁保满   随堂问 报表开发
77
78
              </el-date-picker>
              ~
82235092   梁保满   导入或者修改答案没有答案报错,修改...
79
80
81
82
83
84
85
              <el-date-picker
                v-model="query.endDay"
                type="date"
                placeholder="选择日期时间"
                @change="handleChangeTimeEnd"
                value-format="yyyy-MM-dd"
              >
d01c5799   梁保满   随堂问 报表开发
86
87
88
              </el-date-picker>
            </div>
            <p class="p1">
82235092   梁保满   导入或者修改答案没有答案报错,修改...
89
90
91
92
93
94
95
96
97
              <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
                >本周</span
              >
              <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
                >本月</span
              >
              <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
                >本季度</span
              >
d01c5799   梁保满   随堂问 报表开发
98
            </p>
255e2506   梁保满   飞书bug及优化
99
          </div>
d01c5799   梁保满   随堂问 报表开发
100
101
102
103
        </div>
        <div class="foot-box">
          <el-button type="primary" round @click="goList">确定</el-button>
          <el-button type="danger" round @click="goHome">取消</el-button>
9309dc5d   梁保满   任课老师接口完成
104
        </div>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
105
      </div>
4c4f7640   梁保满   路由表,路由前端文件
106
107
108
109
    </div>
  </template>
  
  <script>
d01c5799   梁保满   随堂问 报表开发
110
  import { formatDate } from "utils";
4c4f7640   梁保满   路由表,路由前端文件
111
  export default {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
112
113
    data() {
      return {
e5e4a3e6   梁保满   v1.3
114
        code: "",
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
115
        role: "",
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
116
117
118
        date: "", //今天-昨天-本周
        query: {
          //搜索条件
d5987f6a   阿宝   组件修改答案
119
          classId: "",
d01c5799   梁保满   随堂问 报表开发
120
          subjectNames: [],
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
121
122
          startDay: "",
          endDay: "",
9309dc5d   梁保满   任课老师接口完成
123
        },
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
124
125
        classList: [], //班级
        subjectList: [], //科目
d01c5799   梁保满   随堂问 报表开发
126
  
82235092   梁保满   导入或者修改答案没有答案报错,修改...
127
128
        isIndeterminate: true, //全选样式
        allSubject: false, //全选状态
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
129
130
131
      };
    },
    async created() {
7812e986   梁保满   班主任查看报表添加额外信息
132
      this.code = this.$store.getters.csCode;
e371f2dc   梁保满   软件下载,学校,班级老师等报表导入...
133
134
135
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
d01c5799   梁保满   随堂问 报表开发
136
      this.query.subjectNames = [];
d5987f6a   阿宝   组件修改答案
137
      await this._QueryClassList();
e5e4a3e6   梁保满   v1.3
138
139
140
      if (!this.query.classId) {
        return;
      }
d5987f6a   阿宝   组件修改答案
141
      await this._QuerySubjectList();
9309dc5d   梁保满   任课老师接口完成
142
      await this.setDate(1);
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
143
144
145
146
147
148
      let startDay = this.query?.startDay;
      if (!startDay) {
        this.query.startDay = new Date();
        this.query.endDay = new Date();
      }
    },
4623f67f   梁保满   隋唐问以及教师学生设置
149
  
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
150
    methods: {
d01c5799   梁保满   随堂问 报表开发
151
      handleCheckAllChange(val) {
079cb4cf   梁保满   即时测导出
152
        this.isIndeterminate = false;
4623f67f   梁保满   隋唐问以及教师学生设置
153
        this.query.subjectNames = val ? this.subjectList : [];
dbbfc6c5   梁保满   飞书优化及bug
154
      },
d01c5799   梁保满   随堂问 报表开发
155
      handleChecked(value) {
d01c5799   梁保满   随堂问 报表开发
156
157
        let checkedCount = value.length;
        this.allSubject = checkedCount === this.subjectList.length;
82235092   梁保满   导入或者修改答案没有答案报错,修改...
158
159
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.subjectList.length;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
160
      },
9309dc5d   梁保满   任课老师接口完成
161
      setDate(index) {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
162
163
        const that = this;
        this.date = index == this.date ? "" : index;
f356590c   阿宝   即时测列表,分析页面
164
165
        let aYear = new Date().getFullYear();
        let aMonth = new Date().getMonth() + 1;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
166
167
168
169
        that.query.startDay = "";
        that.query.endDay = "";
        switch (index) {
          case 1:
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
170
171
172
173
174
            let day = new Date().getDay();
            if (day == 0) {
              //中国式星期天是一周的最后一天
              day = 7;
            }
8ea67428   梁保满   飞书bug
175
            day--;
f356590c   阿宝   即时测列表,分析页面
176
177
178
179
            let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
            that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
d01c5799   梁保满   随堂问 报表开发
180
          case 2:
f356590c   阿宝   即时测列表,分析页面
181
182
183
184
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
            break;
d01c5799   梁保满   随堂问 报表开发
185
          case 3:
9309dc5d   梁保满   任课老师接口完成
186
            if (aMonth > 0 && aMonth < 4) {
e3b0e3e7   梁保满   季度时间格式调整
187
              aMonth = "1";
f356590c   阿宝   即时测列表,分析页面
188
            } else if (aMonth > 3 && aMonth < 7) {
e3b0e3e7   梁保满   季度时间格式调整
189
              aMonth = "4";
f356590c   阿宝   即时测列表,分析页面
190
            } else if (aMonth > 6 && aMonth < 10) {
e3b0e3e7   梁保满   季度时间格式调整
191
              aMonth = "7";
f356590c   阿宝   即时测列表,分析页面
192
193
194
195
196
197
198
            } else {
              aMonth = "10";
            }
  
            aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
            that.query.startDay = `${aYear}-${aMonth}-01`;
            that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
199
            break;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
200
201
        }
        this.page = 1;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
202
203
      },
      handleChangeTimeStart(val) {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
204
205
206
207
208
209
210
211
212
        this.date = "";
        if (this.query.endDay) {
          if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面,请重新设置");
            this.query.startDay = "";
          }
        }
      },
      handleChangeTimeEnd(val) {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
213
        this.date = "";
d01c5799   梁保满   随堂问 报表开发
214
        if (this.query.startDay && val) {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
215
216
217
218
219
220
          if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
            this.$message.error("任务结束时间不能任务开始时间前面,请重新设置");
            this.query.endDay = "";
          }
        }
      },
d01c5799   梁保满   随堂问 报表开发
221
  
503b6063   梁保满   判断题答案选项
222
      async changeclass() {
82235092   梁保满   导入或者修改答案没有答案报错,修改...
223
224
        this.allSubject = false;
        this.query.subjectNames = [];
503b6063   梁保满   判断题答案选项
225
        await this._QuerySubjectList();
47a01cb6   梁保满   v1.3测试问题
226
      },
d01c5799   梁保满   随堂问 报表开发
227
  
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
228
      async _QueryClassList() {
9309dc5d   梁保满   任课老师接口完成
229
230
        const fetchClassList =
          this.role == "ROLE_BANZHUREN"
82235092   梁保满   导入或者修改答案没有答案报错,修改...
231
232
233
234
            ? this.$request.cTClassList
            : this.role == "ROLE_PERSONAL"
            ? this.$request.pClassList
            : this.$request.tClassList;
9309dc5d   梁保满   任课老师接口完成
235
        const { data, status, info } = await fetchClassList();
d5987f6a   阿宝   组件修改答案
236
        if (status === 0) {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
237
238
          this.classList = data.list.map((item) => {
            return {
d5987f6a   阿宝   组件修改答案
239
              value: item.classId,
45504a95   阿宝   即时测页面,以及小题修改答案
240
              label: item.className,
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
241
242
            };
          });
d5987f6a   阿宝   组件修改答案
243
          this.query.classId = this.classList[0]?.value;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
244
        } else {
d5987f6a   阿宝   组件修改答案
245
          this.$message.error(info);
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
246
247
248
        }
      },
      async _QuerySubjectList() {
9309dc5d   梁保满   任课老师接口完成
249
250
        const fetchSubjectList =
          this.role == "ROLE_BANZHUREN"
82235092   梁保满   导入或者修改答案没有答案报错,修改...
251
252
253
254
            ? this.$request.cTSubjectList
            : this.role == "ROLE_PERSONAL"
            ? this.$request.pSubjectList
            : this.$request.tSubjectList;
9309dc5d   梁保满   任课老师接口完成
255
256
257
258
  
        const { data, status, info } = await fetchSubjectList({
          classId: this.query.classId,
        });
d5987f6a   阿宝   组件修改答案
259
        if (status === 0) {
d01c5799   梁保满   随堂问 报表开发
260
          this.subjectList = data.subjectNames || [];
d5987f6a   阿宝   组件修改答案
261
          if (this.role == "ROLE_BANZHUREN") {
82235092   梁保满   导入或者修改答案没有答案报错,修改...
262
            this.query.subjectNames = this.subjectList;
9309dc5d   梁保满   任课老师接口完成
263
          } else {
82235092   梁保满   导入或者修改答案没有答案报错,修改...
264
265
266
            this.subjectList.length
              ? (this.query.subjectNames = this.subjectList[0])
              : "";
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
267
          }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
268
        } else {
d5987f6a   阿宝   组件修改答案
269
          this.$message.error(info);
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
270
271
        }
      },
9309dc5d   梁保满   任课老师接口完成
272
  
d01c5799   梁保满   随堂问 报表开发
273
274
275
      //回主页
      goHome() {
        this.$router.push({
82235092   梁保满   导入或者修改答案没有答案报错,修改...
276
277
          path: "/index",
        });
9309dc5d   梁保满   任课老师接口完成
278
      },
d01c5799   梁保满   随堂问 报表开发
279
280
      //去列表
      goList() {
049db2b2   梁保满   接口联调
281
        let className;
82235092   梁保满   导入或者修改答案没有答案报错,修改...
282
        this.classList.map((item) => {
049db2b2   梁保满   接口联调
283
          if (item.value == this.query.classId) {
82235092   梁保满   导入或者修改答案没有答案报错,修改...
284
            className = item.label;
049db2b2   梁保满   接口联调
285
          }
82235092   梁保满   导入或者修改答案没有答案报错,修改...
286
287
288
289
        });
        if (this.query.subjectNames.length == 0) {
          this.$message.warning("请选择科目!");
          return;
f2143fa8   梁保满   隋堂问任课老师参数修改
290
291
292
293
        } else {
          if (typeof this.query.subjectNames == "string") {
            this.query.subjectNames = [this.query.subjectNames];
          }
384a2a54   梁保满   请求头添加班主任信息,bug修改
294
        }
d01c5799   梁保满   随堂问 报表开发
295
        this.$router.push({
82235092   梁保满   导入或者修改答案没有答案报错,修改...
296
          path: "/askList",
d01c5799   梁保满   随堂问 报表开发
297
          query: {
049db2b2   梁保满   接口联调
298
            className: className,
82235092   梁保满   导入或者修改答案没有答案报错,修改...
299
300
301
302
            params: JSON.stringify(this.query),
          },
        });
      },
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
303
304
    },
  };
4c4f7640   梁保满   路由表,路由前端文件
305
  </script>
dbbfc6c5   梁保满   飞书优化及bug
306
307
308
309
310
  <style>
  div::-webkit-scrollbar {
    width: 3px;
    height: 10px;
  }
d01c5799   梁保满   随堂问 报表开发
311
  
dbbfc6c5   梁保满   飞书优化及bug
312
313
314
315
316
  div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
  }
  </style>
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
317
  <style lang="scss" scoped>
255e2506   梁保满   飞书bug及优化
318
319
  .main {
    height: 100%;
82235092   梁保满   导入或者修改答案没有答案报错,修改...
320
    background: rgba($color: #000000, $alpha: 0.3);
d01c5799   梁保满   随堂问 报表开发
321
322
    display: flex;
    justify-content: center;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
323
  }
4c4f7640   梁保满   路由表,路由前端文件
324
  
d01c5799   梁保满   随堂问 报表开发
325
326
327
328
  .sel-dia {
    margin-top: 100px;
    width: 750px;
    background: #fff;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
329
    border-radius: 10px;
d01c5799   梁保满   随堂问 报表开发
330
331
    overflow: hidden;
    height: 460px;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
332
    display: flex;
d01c5799   梁保满   随堂问 报表开发
333
334
335
336
337
338
339
340
    flex-direction: column;
  
    .tit {
      text-align: center;
      position: relative;
      padding: 20px 0 12px;
      font-size: 18px;
      font-weight: 500;
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
341
      flex-shrink: 0;
d01c5799   梁保满   随堂问 报表开发
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
  
      .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 28px;
        background: #e2e2e2;
        border-radius: 0 0 0 24px;
        box-sizing: border-box;
        padding-left: 6px;
        font-size: 18px;
        cursor: pointer;
  
        &:hover {
          color: #f30;
        }
      }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
362
    }
d01c5799   梁保满   随堂问 报表开发
363
364
  
    .select-box {
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
365
      flex: 1;
d01c5799   梁保满   随堂问 报表开发
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
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
      overflow-y: auto;
      padding: 0 30px;
  
      .sel-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
  
        .sel-label {
          width: 60px;
          margin-right: 10px;
          flex-shrink: 0;
          font-size: 15px;
          font-weight: 500;
        }
  
        :deep(.el-input__inner) {
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
        }
  
        :deep(.el-input__suffix) {
          .el-input__icon {
            line-height: 36px;
          }
        }
  
        :deep(.el-input__inner) {
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
  
          .el-input__icon {
            line-height: 36px;
          }
        }
  
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 160px;
          height: 36px;
          line-height: 36px;
  
          :deep(.el-input__icon) {
            line-height: 36px;
          }
        }
      }
  
      .sel-item2 {
        align-items: flex-start;
        line-height: 20px;
        padding-top: 10px;
  
        .p-all {
          padding-bottom: 6px;
        }
      }
  
      .p1 {
        .s1 {
          margin-left: 20px;
          cursor: pointer;
          color: #7f7f7f;
  
          &:hover {
            color: #409eff;
          }
  
          &.active {
            color: #667ffd;
          }
        }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
440
441
      }
    }
d01c5799   梁保满   随堂问 报表开发
442
443
444
445
446
447
448
449
450
451
  
    .foot-box {
      flex-shrink: 0;
      padding: 12px 0 20px;
      display: flex;
      justify-content: center;
  
      .el-button {
        margin: 0 30px;
      }
b769660c   梁保满   备课组题细节调整,随堂问列表页面开发完成
452
453
    }
  }
4c4f7640   梁保满   路由表,路由前端文件
454
  </style>