Source/UBCS-WEB/src/views/system/PasswordManagement/passwords.vue

@@ -1,11 +1,12 @@
<template>
  <basic-container>
  <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"
          v-if="permissionList.editBtn"
          @click="handleEdit(row, index)"
        >
          编辑
@@ -14,6 +15,7 @@
          type="text"
          size="small"
          icon="el-icon-delete"
          v-if="permissionList.delBtn"
          @click="handleDel(row, index)"
        >
          删除
@@ -33,8 +35,10 @@
  // getOnesearch,
  getadd,
  getupdata,
  getremove
  getremove,
  combination
} from "@/api/system/passwords";
import {mapGetters} from "vuex";
export default {
  name: "passwords.vue",
  data() {
@@ -124,192 +128,7 @@
        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:"",
      //这个是下拉菜单的数据变量
@@ -323,146 +142,247 @@
      checkboxedit:"",
      // 用于判断是否是编辑
      editFlag:false
    //  至于为什么没在用户选择必填种类大于组合方式的时候，给下拉菜单选中的数据清空了，这样比给予弹窗提醒更合理
    //  原因是找了好久没找到avue框架这个选中的属性显示在页面怎么修改，直接修改下拉菜单数据的value没效果，找不到是什么控制这页面显示的选中数据
    //  我尝试在dicdata外面定义value修改下拉菜单显示的默认值也不行，然后再尝试调用avue的close清除方法，但是也是只能实现在下拉菜单后面显示一个X号
    //  当用户手动点击清除，才可以把数据清除，总而言之找了好久，没找到这个清除方法，avue的说明文档也没明确标明这个功能的内置操作方法
    //  我想到的应该可以的方法是，舍弃option里面的组合方式，自己手动在页面添加插槽定义组合方式，至于是使用avue还是element-ui来写，还要看具体的步骤
    //  因为一改动，我现在写的逻辑比如下拉菜单禁用和策略验证等等要重新梳理，我这边急着赶对象建模的进度，所以先用这种方式来处理，如果我回头有时间我再来继续改，就没有这条注释了。
    }

  },
  computed:{
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.password.password_add, false),
        //viewBtn: this.vaildData(this.permission.password.user_view, false),
        delBtn: this.vaildData(this.permission.password.password_delete, false),
        editBtn: this.vaildData(this.permission.password.password_edit, false),
      };
    },
    platformPermissionList() {
      return {
        addBtn: this.vaildData(this.permission.password.password_add, false),
        //viewBtn: this.vaildData(this.permission.password.user_view, false),
        delBtn: this.vaildData(this.permission.password.password_delete, false),
        editBtn: this.vaildData(this.permission.password.password_edit, false),
      };
    },
    option(){
      return{
          headerAlign: 'center',
          align: 'center',
          columnBtn:false,
          border: true,
          index: true,
          rowKey:'id',
          addBtn:this.permissionList.addBtn,
          editBtn:false,
          height:700,
          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:this.validatePass,
                trigger: 'blur'
              }]
            },
            {
              label: '密码最大长度',
              prop: 'maxPwdLen',
              span:12,
              labelWidth:"25%",
              rules: [{
                required: true,
                validator:this.validatePass1,
                trigger: 'change'
              }]
            },
            {
              label: '组合方法',
              prop: 'combinationNames',
              labelWidth: 91,
              display:false,

            },
            {
              label: '组合方法',
              prop: 'combinationIds',
              type: "checkbox",
              span:12,
              labelWidth:"22%",
              id:5,
              hide:true,
              change: this.handleCheckboxChange,
              rules: [{
                required: true,
                message: "请选择组合方法",
                trigger: "blur"
              }],
              dicUrl: '/api/ubcs-system/combination/select',
              dicMethod: 'get',
              props: {
                value: "ID",
                label: "NAME",
              },
            },
            {
              label: '必填种类',
              prop: 'requiredType',
              type: 'select',
              span:12,
              labelWidth:"25%",
              change:this.handleSelectChange,
              rules: [{
                required: true,
                message: "请选择必填种类",
                trigger: "blur"
              }],
              dicData:[{
                label:'1种',
                value:1,
                disabled:false
              },
                {
                  label:'2种',
                  value:2,
                  disabled:false
                },
                {
                  label:'3种',
                  value:3,
                  disabled:false
                },
                {
                  label:'4种',
                  value:4,
                  disabled:false
                }
              ]

            },
            {
              label: '过期时间(天)',
              prop:'expirationTime',
              span:12,
              labelWidth:"22%",
              rules: [{
                required: true,
                validator:this.validatePass2,
                trigger: 'blur'
              }]
            },
            {
              label: '提醒时间(天)',
              prop:'reminderTime',
              span:12,
              labelWidth:"25%",
              rules: [{
                required: true,
                validator:this.validatePass3,
                trigger: 'blur'
              }]
            },
            {
              label: '锁定次数(次)',
              prop:'lockingNum',
              span:12,
              labelWidth:"22%",
              rules: [{
                required: true,
                validator:this.validatePass4,
                trigger: 'blur'
              }]
            },
            {
              label: '锁定时间(分钟)',
              prop:'lockingTime',
              span:12,
              labelWidth:"25%",
              rules: [{
                required: true,
                validator:this.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
              }]
            }
          ],
      }
    }
  },
  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,
            });
    handleCheckboxChange(val) {
      // console.log("val",val);
      const arr = this.option.column[5];
      if(val){
        this.checkboxlength = val.value;
        return
      }
      // console.log("this.checkboxlength",this.checkboxlength);
      this.checkboxedit = this.checkboxlength.toString().split(",");
      if (val.value != undefined && val.value != null) {
        if (this.checkboxlist == val.value) {
        } else {
          this.checkboxlist = val.value;
          if (
            this.selectlength.value >= val.value.length &&
            val.value.length > 0
          ) {
            this.showMessage("必填种类不能大于组合方法，请重新选择！");
          } else if (
            this.selectlength.value >= this.checkboxedit.length &&
            this.checkboxedit.length > 0
          ) {
            this.showMessage("必填种类不能大于组合方法，请重新选择！");
          }
        }
          // 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
      const disabledCount = Math.min(this.checkboxedit.length, 4);
      for (let i = 0; i < arr.dicData.length; i++) {
        arr.dicData[i].disabled = i >= disabledCount;
      }
      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
      if (this.editFlag == true) {
        const disabledCount = Math.min(this.checkboxedit.length, 4);
        for (let i = 0; i < arr.dicData.length; i++) {
          arr.dicData[i].disabled = i >= disabledCount;
        }
      }
    },
@@ -482,7 +402,7 @@
          });
          this.onLoad();
        }).catch(res=>{
        console.log(res)
        // console.log(res)
      })
    },
    rowSave(row,done){
@@ -497,13 +417,12 @@
        });
        done(row)
        this.onLoad()
        console.log(res)
      }).catch((res)=>{
        console.log(res)
        this.$message.warning(res)
      })
    },
    rowEdit(row){
      console.log("打开编辑edit",row)
      // console.log("打开编辑edit",row)
    },
    handleDel(row){
      this.$refs.crud.rowDel(row,row.$index);
@@ -511,11 +430,8 @@
    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",
@@ -532,7 +448,7 @@
        });
        done()
      }).catch(res=>{
        console.log(res)
        // console.log(res)
      })
    },
    onLoad(page, params = {}) {
@@ -543,9 +459,9 @@
        // 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
        // console.log(res)
        this.page.total=res.data.data.total
        this.data=res.data.data.records
      });
    }
  }
@@ -553,5 +469,5 @@
}
</script>

<style lang="scss">
<style lang="scss" scoped>
</style>