田源
2023-04-11 4e13584a74c860f9fa8fd2d6aee3021fe6bb6b77
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
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
440
441
442
443
444
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
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<template>
  <basic-container>
    <avue-crud v-model="form" :option="option" :data="data" ref="crud"  @on-load="onLoad" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" :page.sync="page">
      <template slot="menu" slot-scope="{ row, index }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(row, index)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="handleDel(row, index)"
        >
          删除
        </el-button>
      </template>
 
      <template slot="icon" slot-scope="scope">
        <i :class="scope.row.icon" style="font-size:24px"></i>
      </template>
    </avue-crud>
  </basic-container>
</template>
 
<script>
import {
  getPage,
  // getOnesearch,
  getadd,
  getupdata,
  getremove
} from "@/api/system/passwords";
export default {
  name: "passwords.vue",
  data() {
    // 最小长度正则绑定值
    let validatePass=""
    //最大长度正则绑定值
    let validatePass1=""
    //过期时间正则绑定值
    let validatePass2=""
    //提醒时间正则绑定值
    let validatePass3=""
    //锁定次数正则绑定值
    let validatePass4=""
    //锁定时间正则绑定值
    let validatePass5=""
    //最小长度绑定value
    let values=""
    //最大长度绑定value
    let values1=""
    //最小长度正则方法
    validatePass = (rule, value,callback) => {
     values=value*1
      if(value == ""){
        callback(new Error('请输入密码最小长度'));
      // }else if(values >= values1*1){
      //   callback(new Error('密码最小长度不能大于密码最大长度'));
      }else if(/[^\d]/g.test(value)){
        callback(new Error('密码最小长度的输入类型只能为数字类型'));
      }else {
        callback();
      }
    };
    //最大长度正则方法
    validatePass1= (rule, value,callback) =>{
      values1=value*1
     if(value == ""){
        callback(new Error('请输入密码最大长度'));
      }else if(values1 <= values){
       callback(new Error('密码最大长度不能小于密码最大长度'));
     }else if(/[^\d]/g.test(value)){
       callback(new Error('密码最大长度的输入类型只能为数字类型'));
     }else {
       callback();
     }
    };
    validatePass2 = (rule, value,callback) => {
      if(value == ""){
        callback(new Error('请输入过期时间'));
      }else if(/[^\d]/g.test(value)){
        callback(new Error('过期时间的输入类型只能为数字类型'));
      }else {
        callback();
      }
    };
    validatePass3 = (rule, value,callback) => {
      if(value == ""){
        callback(new Error('请输入过期时间'));
      }else if(/[^\d]/g.test(value)){
        callback(new Error('过期时间的输入类型只能为数字类型'));
      }else {
        callback();
      }
    };
    validatePass4 = (rule, value,callback) => {
      if(value == ""){
        callback(new Error('请输入锁定次数'));
      }else if(/[^\d]/g.test(value)){
        callback(new Error('锁定次数的输入类型只能为数字类型'));
      }else {
        callback();
      }
    };
    validatePass5 = (rule, value,callback) => {
      if(value == ""){
        callback(new Error('请输入锁定时间'));
      }else if(/[^\d]/g.test(value)){
        callback(new Error('锁定时间的输入类型只能为数字类型'));
      }else {
        callback();
      }
    };
    return {
      form:{},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      data: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        rowKey:'id',
        editBtn:false,
        delBtn:false,
        column: [
          {
            label: '策略名称',
            prop: 'strategyName',
            align: 'left',
            span:24,
            labelWidth: "11%",
            rules: [{
              required: true,
              message: "请输入策略名称",
              trigger: "blur"
            }]
          },
          {
            label: '密码最小长度',
            prop: 'minPwdLen',
            span:12,
            labelWidth:"22%",
            rules: [{
              required: true,
              validator:validatePass,
              trigger: 'blur'
            }]
          },
          {
            label: '密码最大长度',
            prop: 'maxPwdLen',
            span:12,
            labelWidth:"25%",
            rules: [{
              required: true,
              validator:validatePass1,
              trigger: 'change'
            }]
          },
          {
            label: '组合方法',
            prop: 'combinationNames',
            labelWidth: 91,
            display:false,
 
          },
          {
            //写两个组合方法是因为id和name不能同时绑定这个prop来渲染,一个表格做隐藏来数据操作(表单隐藏),另一个表格做显示只显示在页面(表单隐藏)。
            label: '组合方法',
            prop: 'combinationIds',
            type: "checkbox",
            span:12,
            labelWidth:"22%",
            id:5,
            hide:true,
            change:this.handleCheckboxChange,
            rules: [{
              required: true,
              message: "请选择组合方法",
              trigger: "blur"
            }],
            dicData: [
              {
                label: "数字",
                value: '1638024706425188354'
              },
              {
                label: "符号",
                value: '1638097837516926977'
              },
              {
                label: "小写字母",
                value: '1638097772983365634'
              },
              {
                label: "大写字母",
                value: '1638097733707902977'
              },
            ],
          },
          {
            label: '必填种类',
            prop: 'requiredType',
            type: 'select',
            span:12,
            labelWidth:"25%",
            change:this.handleSelectChange,
            rules: [{
              required: true,
              message: "请选择必填种类",
              trigger: "blur"
            }],
            dicData:[{
              label:'1种',
              value:0,
              disabled:false
              },
              {
                label:'2种',
                value:1,
                disabled:false
              },
              {
                label:'3种',
                value:2,
                disabled:false
              },
              {
                label:'4种',
                value:3,
                disabled:false
              }
            ]
 
          },
          {
            label: '过期时间(天)',
            prop:'expirationTime',
            span:12,
            labelWidth:"22%",
            rules: [{
              required: true,
              validator:validatePass2,
              trigger: 'blur'
            }]
          },
          {
            label: '提醒时间(天)',
            prop:'reminderTime',
            span:12,
            labelWidth:"25%",
            rules: [{
              required: true,
              validator:validatePass3,
              trigger: 'blur'
            }]
          },
          {
            label: '锁定次数(次)',
            prop:'lockingNum',
            span:12,
            labelWidth:"22%",
            rules: [{
              required: true,
              validator:validatePass4,
              trigger: 'blur'
            }]
          },
          {
            label: '锁定时间(分钟)',
            prop:'lockingTime',
            span:12,
            labelWidth:"25%",
            rules: [{
              required: true,
              validator:validatePass5,
              trigger: 'blur'
            }]
          },
          {
            label: '描述',
            prop:'desc',
            type: 'textarea',
            span:12,
            labelWidth:"22%",
            rows: 5,
          },
          {
            label: '是否为默认策略',
            prop: 'isDefault',
            type: 'switch',
            labelWidth: 132,
            dicData:[{
              label:'否',
              value:0
            },{
              label:'是',
              value:1
            }]
          }
        ],
      },
      //添加存放多选的变量,用于下拉菜单的禁用效果和必填种类是否大于组合方式然后提示用户重新选择
      checkboxlength:"",
      //这个是下拉菜单的数据变量
      selectlength:"",
      //这个是用于防止change时间冒泡,出现两次弹窗定义的变量
      checkboxlist:"",
      //用于首次点击编辑,判断组合方式是否小于必填种类的变量
      checkboxNumber:"",
      selectNumber:"",
      //这个也是存放多选的变量,效果一样,只是用作在编辑模块
      checkboxedit:"",
      // 用于判断是否是编辑
      editFlag:false
    //  至于为什么没在用户选择必填种类大于组合方式的时候,给下拉菜单选中的数据清空了,这样比给予弹窗提醒更合理
    //  原因是找了好久没找到avue框架这个选中的属性显示在页面怎么修改,直接修改下拉菜单数据的value没效果,找不到是什么控制这页面显示的选中数据
    //  我尝试在dicdata外面定义value修改下拉菜单显示的默认值也不行,然后再尝试调用avue的close清除方法,但是也是只能实现在下拉菜单后面显示一个X号
    //  当用户手动点击清除,才可以把数据清除,总而言之找了好久,没找到这个清除方法,avue的说明文档也没明确标明这个功能的内置操作方法
    //  我想到的应该可以的方法是,舍弃option里面的组合方式,自己手动在页面添加插槽定义组合方式,至于是使用avue还是element-ui来写,还要看具体的步骤
    //  因为一改动,我现在写的逻辑比如下拉菜单禁用和策略验证等等要重新梳理,我这边急着赶对象建模的进度,所以先用这种方式来处理,如果我回头有时间我再来继续改,就没有这条注释了。
    }
 
  },
  created() {
    this.onLoad()
  },
  mount() {
  },
  methods:{
    handleSelectChange(val){
      this.selectlength=val
      // if(val.value >= this.checkboxlength.value.length && this.checkboxlength.value.length > 0){
      //   console.log("大于")
      // }
    },
    handleCheckboxChange(val){
      const arr=this.option.column[5];
      this.checkboxlength=val.value;
      //添加的时候checkboxlength是一个数组,到了编辑他就是一个字符串,如果我我直接转换为数组,因为本来就是数组所以点击添加的时候会报错
      //如果我变成字符串后再转数组,添加不会报错了,但是编辑的时候就又会报错了,本来就是字符串又走了一遍tostring
      this.checkboxedit=this.checkboxlength.toString().split(",")
      if(val.value != undefined && val.value != null){
        if(this.checkboxlist == val.value){
        //  判断相等则不操作,不等则重新执行。加这层判断是因为change事件触发两次,会出现两个消息提示框
        //  定义checkboxlist变量,存储的改变的值,如果值改变和变量相等则不需要任何操作
        }else {
          this.checkboxlist=val.value
          if( this.selectlength.value >= val.value.length && val.value.length > 0 ){
            this.$message({
              message: '必填种类不能大于组合方法,请重新选择!',
              type: 'warning',
              showClose: true,
            });
          }else if(this.selectlength.value >= this.checkboxedit.length  && this.checkboxedit.length > 0 ){
            this.$message({
              message: '必填种类不能大于组合方法,请重新选择!',
              type: 'warning',
              showClose: true,
            });
          }
        }
          // if(this.checkboxeditlist == val.value){
          // //  tong
          // }else {
          //   this.checkboxeditlist=val.value
          //   if(this.selectlength.value >= this.checkboxedit.length  && this.checkboxedit.length > 0){
          //     this.$message({
          //       message: '必填种类不能大于组合方法,请重新选择!',
          //       type: 'warning',
          //       showClose: true,
          //     });
          //   }
          // }
        //  if(this.selectlength.value >= this.checkboxedit.length  && this.checkboxedit.length > 0){
        //   this.$message({
        //     message: '必填种类不能大于组合方法,请重新选择!',
        //     type: 'warning',
        //     showClose: true,
        //   });
        // }
      }
      // 这里一直报length的错误
      // arr.forEach((item,index)=>{
      //   console.log(item,index)
      //   if(val.value != undefined && val.value != null && val.value.length==0){
      //     item.disabled=false
      //   }
      //   if(val.value != undefined && val.value != null && val.value.length>=1){
      //
      //    }
      // })
      // if(val.value != undefined && val.value != null && val.value.length >= 0){
      //   arr.dicData[val.value.length-1].disabled=true
      // }
      // }else if(val.value != undefined && val.value != null && val.value.length ==0){
      //   arr.dicData.disabled=false
      // }
      if(val.value != undefined && val.value != null && val.value.length == 1){
        arr.dicData[0].disabled=false
        arr.dicData[1].disabled=true
        arr.dicData[2].disabled=true
        arr.dicData[3].disabled=true
      }else if(val.value != undefined && val.value != null && val.value.length ==2){
        arr.dicData[0].disabled=false
        arr.dicData[1].disabled=false
        arr.dicData[2].disabled=true
        arr.dicData[3].disabled=true
      }else if(val.value != undefined && val.value != null && val.value.length ==3){
        arr.dicData[0].disabled=false
        arr.dicData[1].disabled=false
        arr.dicData[2].disabled=false
        arr.dicData[3].disabled=true
      }else if(val.value != undefined && val.value != null && val.value.length==4){
        arr.dicData[0].disabled=false
        arr.dicData[1].disabled=false
        arr.dicData[2].disabled=false
        arr.dicData[3].disabled=false
      }else if(val.value != undefined && val.value != null && val.value.length==0  ){
         arr.dicData[0].disabled=true
         arr.dicData[1].disabled=true
         arr.dicData[2].disabled=true
         arr.dicData[3].disabled=true
      }else if(this.checkboxNumber.length!=0){
        arr.dicData[0].disabled=false
        arr.dicData[1].disabled=false
        arr.dicData[2].disabled=false
        arr.dicData[3].disabled=false
      }
      if(this.editFlag == true){
        if(this.checkboxedit.length == 1){
          arr.dicData[0].disabled=false
          arr.dicData[1].disabled=true
          arr.dicData[2].disabled=true
          arr.dicData[3].disabled=true
        }else if(this.checkboxedit.length == 2){
          arr.dicData[0].disabled=false
          arr.dicData[1].disabled=false
          arr.dicData[2].disabled=true
          arr.dicData[3].disabled=true
        }else if(this.checkboxedit.length ==3){
          arr.dicData[0].disabled=false
          arr.dicData[1].disabled=false
          arr.dicData[2].disabled=false
          arr.dicData[3].disabled=true
        }else if(this.checkboxedit ==4){
          arr.dicData[0].disabled=false
          arr.dicData[1].disabled=false
          arr.dicData[2].disabled=false
          arr.dicData[3].disabled=false
        }else if(this.checkboxedit.length ==0){
          arr.dicData[0].disabled=true
          arr.dicData[1].disabled=true
          arr.dicData[2].disabled=true
          arr.dicData[3].disabled=true
        }
      }
    },
    rowDel(row){
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return getremove(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad();
        }).catch(res=>{
        console.log(res)
      })
    },
    rowSave(row,done){
      //将密码组合方式的数据转换为字符串
      const spliceId= row.combinationIds.toString()
      row.combinationIds=spliceId
      getadd(row).then((res)=>{
        // this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done(row)
        this.onLoad()
        console.log(res)
      }).catch((res)=>{
        console.log(res)
      })
    },
    rowEdit(row){
      console.log("打开编辑edit",row)
    },
    handleDel(row){
      this.$refs.crud.rowDel(row,row.$index);
    },
    handleEdit(row){
      this.$refs.crud.rowEdit(row,row.$index);
      this.editFlag=true;
      // const arr=this.option.column[5];
      this.checkboxNumber=row.combinationIds.split(",")
      this.selectNumber=row.requiredType
      console.log(this.checkboxNumber, this.selectNumber)
    //  打开编辑首先判断,组合方法是否小于必填种类,如果小于给予提醒修改
        if(this.checkboxNumber.length<=this.selectNumber){
          this.$message({
            type:"warning",
            message:"必填种类不能大于组合方法,请重新选择!"
          })
        }
    },
    rowUpdate(row,index,done){
      getupdata(row).then(()=>{
        this.onLoad()
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        done()
      }).catch(res=>{
        console.log(res)
      })
    },
    onLoad(page, params = {}) {
      // this.loading = true;
      getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
        // const data = res.data.data;
        // this.page.total = data.total;
        // this.data = data.records;
        // this.loading = false;
        // this.selectionClear();
        console.log(res)
        this.page.total=res.data.data.totalElements
        this.data=res.data.data.content
      });
    }
  }
 
}
</script>
 
<style lang="scss">
</style>