Blame view

src/views/setUp/school.vue 14.6 KB
4c4f7640   梁保满   路由表,路由前端文件
1
  <template>
db11048f   阿宝   设备状态,学校管理
2
3
4
5
6
    <div>
      <back-box>
        <template slot="title">
          <span>学校设置</span>
        </template>
b21d90ef   梁保满   长水登录
7
        <template slot="btns" v-if="!code">
db11048f   阿宝   设备状态,学校管理
8
9
10
11
12
13
14
15
16
17
18
19
20
21
          <el-tooltip effect="dark" content="导入学校名单" placement="bottom">
            <el-button
              type="primary"
              icon="el-icon-upload2"
              size="mini"
              plain
              circle
              @click="diaUp = true"
            ></el-button>
          </el-tooltip>
        </template>
      </back-box>
      <div class="page-content">
        <div class="content-box">
560c12f2   阿宝   学校设置,软件下载
22
          <i class="el-icon-edit" @click="diaSchool = true"></i>
db11048f   阿宝   设备状态,学校管理
23
24
25
          <ul class="school-info">
            <li class="school-item">
              <span class="s1">学校名称:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
26
              <span class="s2">{{ school.schoolName || "--" }}</span>
db11048f   阿宝   设备状态,学校管理
27
28
29
            </li>
            <li class="school-item">
              <span class="s1">授课端管理密码:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
30
              <span class="s2">{{ school.managePwd || "--" }}</span>
db11048f   阿宝   设备状态,学校管理
31
32
33
            </li>
            <li class="school-item">
              <span class="s1">联系人:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
34
              <span class="s2">{{ school.contactPerson || "--" }}</span>
db11048f   阿宝   设备状态,学校管理
35
36
37
            </li>
            <li class="school-item">
              <span class="s1">手机号码:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
38
              <span class="s2">{{ school.contactPhone || "--" }}</span>
db11048f   阿宝   设备状态,学校管理
39
40
41
            </li>
            <li class="school-item">
              <span class="s1">学段:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
42
43
44
              <span class="s2">{{
                school.sections | getSections(school.sections)
              }}</span>
db11048f   阿宝   设备状态,学校管理
45
46
47
            </li>
            <li class="school-item">
              <span class="s1">所属集团:</span>
23a6dc5f   阿宝   学校管理相关接口简单对接
48
              <span class="s2">{{ school.tenantName || "--" }}</span>
db11048f   阿宝   设备状态,学校管理
49
50
51
52
53
            </li>
          </ul>
          <div class="grade-box">
            <p class="h-title">年级管理</p>
            <ul class="grade-info">
23a6dc5f   阿宝   学校管理相关接口简单对接
54
55
56
57
58
59
60
              <li
                class="grade-item"
                v-for="item in tableData"
                :key="item.grade"
                @click="setGrade(item)"
              >
                <p class="grade-name">{{ item.gradeName }}</p>
db11048f   阿宝   设备状态,学校管理
61
                <div class="grade-class">
23a6dc5f   阿宝   学校管理相关接口简单对接
62
63
64
65
66
67
68
69
70
71
                  <p>
                    <i class="fa fa-building"></i>班级:{{
                      item.classList.length
                    }}个
                  </p>
                  <p>
                    <i class="fa fa-book"></i>科目:{{
                      item.subjectNames.length
                    }}个
                  </p>
db11048f   阿宝   设备状态,学校管理
72
73
74
                </div>
              </li>
            </ul>
23a6dc5f   阿宝   学校管理相关接口简单对接
75
76
77
78
79
            <el-empty
              :image-size="100"
              v-if="!tableData.length && loading == false"
              description="没有更多数据"
            ></el-empty>
db11048f   阿宝   设备状态,学校管理
80
81
82
83
84
85
          </div>
        </div>
      </div>
      <el-dialog title="导入学校名单" :visible.sync="diaUp" width="400">
        <up-load id="downDevice" :url="url" fileName="学校名单">
          <p class="down-txt" slot="down">
23a6dc5f   阿宝   学校管理相关接口简单对接
86
            通过Excel名单导入学校名单,点击
db11048f   阿宝   设备状态,学校管理
87
88
89
90
91
92
93
            <el-link type="danger" @click="downExcel">模板下载</el-link> 。
          </p>
        </up-load>
        <div class="dialog-footer" slot="footer">
          <el-button @click="diaUp = false">取 消</el-button>
        </div>
      </el-dialog>
dd5150c5   阿宝   数据同步
94
95
96
97
98
99
100
101
      <el-dialog title="修改年级信息" :visible.sync="diaGrade" width="400">
        <el-form
          class="form-box"
          :model="formGrade"
          :rules="rulesGrade"
          label-width="160px"
        >
          <el-form-item label="科目:" prop="subjectNames">
225a00b6   梁保满   飞书问题解决
102
103
104
105
            <div class="subject-box" :class="showAll ? 'active' : ''">
              <span class="showAll" @click="showAll = !showAll">{{
                showAll ? "收起" : "更多..."
              }}</span>
ca39cc52   阿宝   飞书问题处理
106
107
108
109
110
111
112
113
114
115
116
117
118
119
              <el-checkbox-group v-model="formGrade.subjectNames">
                <el-checkbox
                  v-for="item in subjectList"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
            <el-col :span="8">
              <el-input
                placeholder="添加科目"
                v-model.trim="subjectName"
                maxlength="30"
dd5150c5   阿宝   数据同步
120
              >
ca39cc52   阿宝   飞书问题处理
121
122
123
124
125
126
127
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-plus"
                  @click="addSubjectName"
                ></i>
              </el-input>
            </el-col>
dd5150c5   阿宝   数据同步
128
129
130
131
132
133
134
135
136
137
138
139
140
141
          </el-form-item>
          <el-form-item label="班级:">
            <span v-for="(item, index) in formGrade.classList" :key="item.id">{{
              `${item.className}${
                index == formGrade.classList.length - 1 ? "" : "、"
              }`
            }}</span>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="editGrade">确 定</el-button>
          <el-button @click="diaGrade = false">取 消</el-button>
        </div>
      </el-dialog>
560c12f2   阿宝   学校设置,软件下载
142
143
      <el-dialog title="修改学校信息" :visible.sync="diaSchool" width="400">
        <el-form
225a00b6   梁保满   飞书问题解决
144
          ref="formSchool"
560c12f2   阿宝   学校设置,软件下载
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
          class="form-box"
          :model="formSchool"
          :rules="rulesSchool"
          label-width="160px"
        >
          <el-form-item label="学段:" prop="sections">
            <el-checkbox-group v-model="formSchool.sections">
              <el-checkbox
                v-for="item in sectionsList"
                :label="item.id"
                :key="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="授课端管理密码:" prop="managePwd">
            <el-col :span="10">
              <el-input
225a00b6   梁保满   飞书问题解决
163
                maxlength="20"
560c12f2   阿宝   学校设置,软件下载
164
                v-model="formSchool.managePwd"
225a00b6   梁保满   飞书问题解决
165
                show-password
560c12f2   阿宝   学校设置,软件下载
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
                placeholder="请输入授课端管理密码"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人:" prop="contactPerson"
            ><el-col :span="10"
              ><el-input
                maxlength="30"
                v-model="formSchool.contactPerson"
                placeholder="请输入联系人"
              ></el-input></el-col
          ></el-form-item>
          <el-form-item label="手机号码:" prop="contactPhone"
            ><el-col :span="10"
              ><el-input
560c12f2   阿宝   学校设置,软件下载
181
                v-model="formSchool.contactPhone"
e5ff81a1   阿宝   集团管理员接口
182
                type="number"
ca39cc52   阿宝   飞书问题处理
183
                oninput="if(value.length > 11) value = value.slice(0,11)"
560c12f2   阿宝   学校设置,软件下载
184
185
186
187
188
189
190
191
192
                placeholder="请输入联系人手机号码"
              ></el-input></el-col
          ></el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="editSchool">确 定</el-button>
          <el-button @click="diaSchool = false">取 消</el-button>
        </div>
      </el-dialog>
db11048f   阿宝   设备状态,学校管理
193
    </div>
4c4f7640   梁保满   路由表,路由前端文件
194
195
196
  </template>
  
  <script>
db11048f   阿宝   设备状态,学校管理
197
  import { downloadFile } from "@/utils";
4c4f7640   梁保满   路由表,路由前端文件
198
  export default {
23a6dc5f   阿宝   学校管理相关接口简单对接
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
    filters: {
      getSections(val) {
        let arr = val.split(",");
        let sections = arr.map((item) => {
          let txt;
          switch (item) {
            case "0":
              txt = "未知";
              break;
            case "1":
              txt = "小学";
              break;
            case "2":
              txt = "初中";
              break;
            case "3":
              txt = "高中";
              break;
            case "4":
              txt = "大学";
              break;
            case "7":
              txt = "未知";
              break;
            default:
              txt = "未知";
          }
          return txt;
        });
        return sections.join(",");
      },
    },
db11048f   阿宝   设备状态,学校管理
231
232
    data() {
      return {
225a00b6   梁保满   飞书问题解决
233
        code: "",
560c12f2   阿宝   学校设置,软件下载
234
        loading: false,
db11048f   阿宝   设备状态,学校管理
235
236
        url: "xxx",
        diaUp: false,
560c12f2   阿宝   学校设置,软件下载
237
        diaSchool: false,
dd5150c5   阿宝   数据同步
238
        diaGrade: false,
225a00b6   梁保满   飞书问题解决
239
        showAll: false, //修改年级科目显示
db11048f   阿宝   设备状态,学校管理
240
        school: {
dd5150c5   阿宝   数据同步
241
242
243
244
245
246
          schoolName: "",
          managePwd: "",
          contactPerson: "",
          contactPhone: "",
          sections: "",
          tenantName: "",
db11048f   阿宝   设备状态,学校管理
247
        },
23a6dc5f   阿宝   学校管理相关接口简单对接
248
        tableData: [],
560c12f2   阿宝   学校设置,软件下载
249
250
251
252
253
254
255
256
257
258
        formSchool: {
          sections: "",
          managePwd: "",
          contactPerson: "",
          contactPhone: "",
        },
        rulesSchool: {
          sections: [{ required: true, message: "请选择学段", trigger: "blur" }],
          managePwd: [
            { required: true, message: "请填写管理密码", trigger: "blur" },
225a00b6   梁保满   飞书问题解决
259
260
261
262
263
264
            {
              min: 8,
              max: 20,
              message: "长度在 8 到 20 个字符",
              trigger: "blur",
            },
560c12f2   阿宝   学校设置,软件下载
265
266
          ],
        },
dd5150c5   阿宝   数据同步
267
268
269
270
271
272
273
274
275
276
        formGrade: {
          gradeName: "",
          subjectNames: [],
          classList: [],
        },
        rulesGrade: {
          subjectNames: [
            { required: true, message: "请选择科目", trigger: "blur" },
          ],
        },
ca39cc52   阿宝   飞书问题处理
277
        subjectName: "",
560c12f2   阿宝   学校设置,软件下载
278
279
280
281
282
283
284
        sectionsList: [
          { id: "1", name: "小学" },
          { id: "2", name: "初中" },
          { id: "3", name: "高中" },
          { id: "4", name: "大学" },
          { id: "7", name: "高补" },
        ],
dd5150c5   阿宝   数据同步
285
        subjectList: [],
db11048f   阿宝   设备状态,学校管理
286
287
      };
    },
23a6dc5f   阿宝   学校管理相关接口简单对接
288
    created() {
225a00b6   梁保满   飞书问题解决
289
      this.code = localStorage.getItem("csCode") || "";
23a6dc5f   阿宝   学校管理相关接口简单对接
290
291
      this._QueryDataSchool();
      this._QueryDataGrade();
dd5150c5   阿宝   数据同步
292
      this._QuerySubject();
23a6dc5f   阿宝   学校管理相关接口简单对接
293
    },
db11048f   阿宝   设备状态,学校管理
294
    methods: {
dd5150c5   阿宝   数据同步
295
296
297
298
      setGrade(obj) {
        this.formGrade.subjectNames = obj.subjectNames;
        this.formGrade.classList = obj.classList;
        this.formGrade.gradeName = obj.gradeName;
225a00b6   梁保满   飞书问题解决
299
        this.showAll = false;
dd5150c5   阿宝   数据同步
300
301
        this.diaGrade = true;
      },
ca39cc52   阿宝   飞书问题处理
302
303
304
305
      addSubjectName() {
        if (!this.subjectName) {
          this.$message.warning("请填写科目名称");
          return;
dd5150c5   阿宝   数据同步
306
        }
ca39cc52   阿宝   飞书问题处理
307
308
309
        this.subjectList.push(this.subjectName);
        this.formGrade.subjectNames.push(this.subjectName);
        this.subjectName = "";
dd5150c5   阿宝   数据同步
310
      },
225a00b6   梁保满   飞书问题解决
311
      editSchool() {
560c12f2   阿宝   学校设置,软件下载
312
313
314
315
316
317
318
319
320
321
322
        if (!this.formSchool.sections.length) {
          this.$message.error("请选择学段!");
          return;
        }
        if (!this.formSchool.managePwd) {
          this.$message.error("请填写密码!");
          return;
        }
        if (this.loading) {
          return;
        }
225a00b6   梁保满   飞书问题解决
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
        this.$refs.formSchool.validate(async (valid) => {
          if (valid) {
            this.loading = true;
            let form = { ...this.formSchool };
            form.sections = this.formSchool.sections.join(",");
            const { data, status, info } = await this.$request.updateSchool({
              ...form,
            });
            this.loading = false;
            if (status === 0) {
              this.$message.success("修改成功~");
              this.diaSchool = false;
              this._QueryDataSchool();
            } else {
              this.$message.error(info);
            }
          } else {
            this.$message.error("数据有误,请检查!");
          }
dd5150c5   阿宝   数据同步
342
        });
560c12f2   阿宝   学校设置,软件下载
343
      },
dd5150c5   阿宝   数据同步
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
      async editGrade() {
        if (!this.formGrade.subjectNames.length) {
          this.$message.error("请选择科目!");
          return;
        }
        if (this.loading) {
          return;
        }
        this.loading = true;
        const { data, status, info } = await this.$request.updateGrade({
          gradeName: this.formGrade.gradeName,
          subjectNames: this.formGrade.subjectNames,
        });
        this.loading = false;
        if (status === 0) {
          this.$message.success("修改成功~");
          this.diaGrade = false;
          this._QueryDataGrade();
        } else {
          this.$message.error(info);
        }
      },
23a6dc5f   阿宝   学校管理相关接口简单对接
366
367
368
369
370
371
372
      async _QueryDataSchool() {
        this.loading = true;
        const { data, status, info } = await this.$request.schoolDetail();
        this.loading = false;
        console.log(status);
        if (status === 0) {
          this.school = { ...data };
560c12f2   阿宝   学校设置,软件下载
373
374
375
376
          for (let key in this.formSchool) {
            this.formSchool[key] = data[key] || "";
          }
          this.formSchool.sections = this.formSchool.sections.split(",");
23a6dc5f   阿宝   学校管理相关接口简单对接
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
        } else {
          this.$message.error(info);
        }
      },
      async _QueryDataGrade() {
        this.loading = true;
        const { data, status, info } = await this.$request.gradeList();
        this.loading = false;
        console.log(status);
        if (status === 0) {
          this.tableData = data.list || [];
        } else {
          this.$message.error(info);
        }
      },
dd5150c5   阿宝   数据同步
392
393
      async _QuerySubject() {
        const { data, status, info } = await this.$request.subjectList();
dd5150c5   阿宝   数据同步
394
395
396
397
398
399
        if (status === 0) {
          this.subjectList = [...data.subjectNames] || [];
        } else {
          this.$message.error(info);
        }
      },
db11048f   阿宝   设备状态,学校管理
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
      async downExcel() {
        let data = await this.$request.downDevice({
          id: this.id,
        });
        if (data && !data.code) {
          let blob = new Blob([data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          downloadFile(`设备信息.xlsx`, blob);
        } else {
          this.$message.error(data.message);
        }
      },
    },
  };
4c4f7640   梁保满   路由表,路由前端文件
415
416
  </script>
  
db11048f   阿宝   设备状态,学校管理
417
418
419
420
421
422
423
424
425
426
427
  <style lang="scss" scoped>
  .page-content {
    padding: 20px;
    .content-box {
      background: #f8f8f8;
      border-radius: 16px;
      position: relative;
      .el-icon-edit {
        position: absolute;
        top: 12px;
        right: 12px;
23a6dc5f   阿宝   学校管理相关接口简单对接
428
429
        padding: 5px;
        font-size: 18px;
db11048f   阿宝   设备状态,学校管理
430
        cursor: pointer;
23a6dc5f   阿宝   学校管理相关接口简单对接
431
432
        &:hover {
          color: #36f;
db11048f   阿宝   设备状态,学校管理
433
434
435
436
437
438
439
        }
      }
    }
    .school-info {
      display: flex;
      flex-wrap: wrap;
      padding: 16px 0;
23a6dc5f   阿宝   学校管理相关接口简单对接
440
      border-bottom: 0.5px solid #f2f2f2;
db11048f   阿宝   设备状态,学校管理
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
      .school-item {
        width: 50%;
        line-height: 48px;
        padding-left: 100px;
        display: flex;
        box-sizing: border-box;
        .s1 {
          width: 160px;
          font-size: 15px;
          color: #888;
        }
        .s2 {
          flex: 1;
        }
      }
    }
    .grade-box {
      padding: 20px;
23a6dc5f   阿宝   学校管理相关接口简单对接
459
      .grade-info {
db11048f   阿宝   设备状态,学校管理
460
        display: flex;
23a6dc5f   阿宝   学校管理相关接口简单对接
461
462
463
        flex-wrap: wrap;
        padding: 20px;
        .grade-item {
ca39cc52   阿宝   飞书问题处理
464
          width: calc((100% - 100px) / 3);
23a6dc5f   阿宝   学校管理相关接口简单对接
465
466
          margin-right: 50px;
          margin-bottom: 40px;
db11048f   阿宝   设备状态,学校管理
467
          box-sizing: border-box;
23a6dc5f   阿宝   学校管理相关接口简单对接
468
469
          padding: 12px 16px;
          border-radius: 10px;
db11048f   阿宝   设备状态,学校管理
470
          box-shadow: 1px 1px 3px #888;
23a6dc5f   阿宝   学校管理相关接口简单对接
471
          cursor: pointer;
560c12f2   阿宝   学校设置,软件下载
472
473
474
          transition: all 0.5s;
          &:hover {
            transform: translate(-2px, -5px);
23a6dc5f   阿宝   学校管理相关接口简单对接
475
476
            box-shadow: 5px 5px 10px #888;
          }
ca39cc52   阿宝   飞书问题处理
477
478
479
          &:nth-of-type(3n) {
            margin-right: 0;
          }
db11048f   阿宝   设备状态,学校管理
480
        }
23a6dc5f   阿宝   学校管理相关接口简单对接
481
482
        .grade-name {
          font-size: 16px;
db11048f   阿宝   设备状态,学校管理
483
484
          font-weight: bold;
          line-height: 18px;
23a6dc5f   阿宝   学校管理相关接口简单对接
485
          padding-bottom: 12px;
db11048f   阿宝   设备状态,学校管理
486
        }
23a6dc5f   阿宝   学校管理相关接口简单对接
487
        .grade-class {
db11048f   阿宝   设备状态,学校管理
488
489
          display: flex;
          justify-content: space-between;
23a6dc5f   阿宝   学校管理相关接口简单对接
490
491
492
493
494
495
          font-size: 15px;
          padding-right: 20px;
          .fa {
            font-size: 18px;
            margin-right: 5px;
            color: #a4a4a4;
db11048f   阿宝   设备状态,学校管理
496
          }
23a6dc5f   阿宝   学校管理相关接口简单对接
497
498
          .fa-book {
            font-size: 20px;
db11048f   阿宝   设备状态,学校管理
499
500
501
502
503
          }
        }
      }
    }
  }
560c12f2   阿宝   学校设置,软件下载
504
505
  .form-box {
    margin: 0 20px;
225a00b6   梁保满   飞书问题解决
506
507
508
509
510
511
512
    .subject-box {
      height: 90px;
      overflow: hidden;
      position: relative;
      &.active {
        height: auto;
        overflow: auto;
ca39cc52   阿宝   飞书问题处理
513
      }
225a00b6   梁保满   飞书问题解决
514
515
516
517
      .showAll {
        position: absolute;
        bottom: 0;
        right: 10px;
ca39cc52   阿宝   飞书问题处理
518
519
520
        font-size: 12px;
        color: #7f7f7f;
        cursor: pointer;
225a00b6   梁保满   飞书问题解决
521
522
523
        padding: 2px;
        &:hover {
          color: #667ffd;
ca39cc52   阿宝   飞书问题处理
524
525
526
        }
      }
    }
560c12f2   阿宝   学校设置,软件下载
527
  }
ca39cc52   阿宝   飞书问题处理
528
  .el-icon-plus {
dd5150c5   阿宝   数据同步
529
    cursor: pointer;
ca39cc52   阿宝   飞书问题处理
530
531
    &:hover {
      color: #667ffd;
dd5150c5   阿宝   数据同步
532
533
    }
  }
4c4f7640   梁保满   路由表,路由前端文件
534
  </style>