Source/plt-web/plt-web-ui/src/views/system/password/index.vue

@@ -1,13 +1,449 @@
<template>
  <basic-container>
    <avue-crud
      ref="passWordCrud"
      :data="tableData"
      :option="option"
      :page.sync="page"
      :table-loading="tableLoading"
      v-model="form"
      @on-load="getTableList"
      @refresh-change="handleRefresh"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
      @row-del="rowDeleteHandler"
    >
      <template slot="menu" slot-scope="{ row, index }">
        <el-button
          icon="el-icon-edit"
          size="small"
          type="text"
          @click="handleEdit(row, index)"
        >
          编辑
        </el-button>
        <el-button
          icon="el-icon-delete"
          size="small"
          type="text"
          @click="handleDel(row, index)"
        >
          删除
        </el-button>
      </template>


      <template slot="name" slot-scope="{row}">
        <el-tag>{{row.name}}</el-tag>
      </template>
      <template slot="defaultFlag" slot-scope="{row}">
        <el-tag v-if="row.defaultFlag" type="success">是</el-tag>
        <el-tag v-if="!row.defaultFlag" type="danger">否</el-tag>
      </template>
    </avue-crud>
  </basic-container>

</template>

<script>
import {refDataGrid} from "@/api/system/password/api"
import basicOption from "@/util/basic-option";
import {column} from "@/views/system/password/option";
import Vue from "vue";
export default {
  name: "index"
  name: "index",
  data(){
    return{
      form:{},
      tableData:[],
      option:{
        ...basicOption,
        selection:false,
        calcHeight:-60,
        menuWidth:150,
        column:[
          {
            label: '策略名称',
            prop: 'name',
            sortable: true,
            span: 24,
            labelWidth: "11%",
            rules: [{
              required: true,
              message: "请输入策略名称",
              trigger: "blur"
            }]
          },
          {
            label: '密码最小长度',
            prop: 'minLength',
            sortable: true,
            span: 12,
            labelWidth: "22%",
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                this.minValue = value * 1
                if (value == "") {
                  callback(new Error('请输入密码最小长度'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('密码最小长度的输入类型只能为数字类型'));
                } else if ( this.minValue >=  this.maxValue &&  this.maxValue != 0) {
                  callback(new Error('密码最小长度不能大于密码最大长度'))
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }]
          },
          {
            label: '密码最大长度',
            prop: 'maxLength',
            sortable: true,
            span: 12,
            labelWidth: "28%",
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                this.maxValue = value * 1
                if (value == "") {
                  callback(new Error('请输入密码最大长度'));
                } else if ( this.maxValue <=  this.minValue) {
                  callback(new Error('密码最大长度不能小于密码最大长度'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('密码最大长度的输入类型只能为数字类型'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            }]
          },
          {
            label: '组合方式',
            prop: 'requireCharTypeText',
            sortable: true,
            display: false,
            overHidden: true,
            labelWidth: "22%",
          },
          {
            label: '组合方式',
            prop: 'requireCharType',
            type: "checkbox",
            hide: true,
            span: 12,
            labelWidth: "22%",
            change: this.handleCheckboxChange,
            rules: [{
              required: true,
              message: "请选择组合方法",
              trigger: "blur"
            }],
            dicData: [
              {
                label: '数字',
                value: "number"
              },
              {
                label: '小写字母',
                value: "lower"
              },
              {
                label: '大写字母',
                value: "upper"
              },
              {
                label: '符号',
                value: "symbol"
              },
            ]
          },
          {
            label: '必填种类',
            prop: 'requireCharCount',
            type: 'select',
            span: 12,
            labelWidth: "28%",
            sortable: true,
            change: this.handleSelectChange,
            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: 'validDay',
            sortable: true,
            span: 12,
            labelWidth: "22%",
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value == "") {
                  callback(new Error('请输入过期时间'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('过期时间的输入类型只能为数字类型'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }]
          },
          {
            label: '提醒时间（天）',
            prop: 'remindDay',
            sortable: true,
            span: 12,
            labelWidth: "28%",
            width: 140,
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value == "") {
                  callback(new Error('请输入过期时间'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('过期时间的输入类型只能为数字类型'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }]
          },
          {
            label: '重试次数',
            prop: 'retryTime',
            sortable: true,
            span: 12,
            labelWidth: "22%",
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value == "") {
                  callback(new Error('重试次数'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('重试次数的输入类型只能为数字类型'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }]
          },
          {
            label: '锁定时间（分钟）',
            prop: 'lockTime',
            sortable: true,
            width: 150,
            span: 12,
            labelWidth: "28%",
            rules: [{
              required: true,
              validator: (rule, value, callback) => {
                if (value == "") {
                  callback(new Error('请输入锁定时间'));
                } else if (/[^\d]/g.test(value)) {
                  callback(new Error('锁定时间的输入类型只能为数字类型'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }]
          },
          {
            label: '描述',
            prop: 'description',
            overHidden: true,
            type: 'textarea',
            span: 12,
            labelWidth: "22%",
            rows: 5,
          },
          {
            label: '是否为默认策略',
            prop: 'defaultFlag',
            type: 'switch',
            labelWidth: "30%",
            dicData: [{
              label: '否',
              value: 0
            }, {
              label: '是',
              value: 1
            }]
          },
        ]
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 30, 50, 100],
      },
      tableLoading:false,
      checkboxlength: "", //添加存放多选的变量,用于下拉菜单的禁用效果和必填种类是否大于组合方式然后提示用户重新选择
      selectlength: 0,    //这个是下拉菜单的数据变量
      checkboxlist: "" ,  //这个是用于防止change时间冒泡,出现两次弹窗定义的变量
      checkboxNumber: "", //用于首次点击编辑，判断组合方式是否小于必填种类的变量
      selectNumber: "",   //这个也是存放多选的变量,效果一样,只是用作在编辑模块
      checkboxedit: "",   // 用于判断是否是编辑
      editFlag: false,
      minValue:"", // 最小长度value
      maxValue:""  // 最大长度value
    }
  },
  methods:{
    // 表格初始化请求
    getTableList() {
      this.tableLoading = true;
      refDataGrid(this.page.currentPage, this.page.pageSize).then(res =>{
        console.log(res);
        this.tableData = res.data.data;
        this.page.total = res.data.total;
        this.tableLoading = false;
      })
    },

    // 表格头部刷新
    handleRefresh(){
      this.getTableList();
    },

    //  条数
    sizeChange(val){
      this.page.pageSize = val;
    },

    // 页码
    currentChange(val){
      this.page.currentPage = val;
    },

    // 添加
    rowSaveHandler(){
      console.log(this.form.requireCharCount);
    },

    // 编辑按钮
    handleEdit(row,index){
      this.$refs.passWordCrud.rowEdit(row, index);
      this.editFlag = true;
      this.checkboxNumber = row.requireCharType.split(",");
      this.selectNumber = row.requireCharCount;
    },

    // 修改
    rowUpdateHandler(){

    },

    // 删除按钮
    handleDel(){

    },

    // 删除
    rowDeleteHandler(){

    },

    // 必填种类changge事件
    handleSelectChange(val){
      this.selectlength = val.value;
    },

    // 添加修改 组合方式判断逻辑
    handleCheckboxChange(val) {
      const arr = this.option.column.find(item => item.prop === 'requireCharCount'); // 找到option里面必填种类的数组
      this.checkboxlength = val.value;
      this.checkboxedit = this.checkboxlength.toString().split(",");

      if (val.value !== undefined && val.value !== null) {
        if (this.checkboxlist === val.value) {
          return;
        } else {
          this.checkboxlist = val.value;
          if (this.selectlength > val.value.length && val.value.length > 0) {
            // 判断如果必填种类大于组合方式清空
            this.form.requireCharCount = "";
          } else if (this.selectlength > this.checkboxedit.length && this.checkboxedit.length > 0) {
            // 修改同样逻辑
            this.form.requireCharCount = "";
          }
        }
      }

      // 处理 必填种类选项禁用
      if (val.value !== undefined && val.value !== null) {
        if (val.value.length === 1) {
          this.setDisabled(arr, [0]);
        } else if (val.value.length === 2) {
          this.setDisabled(arr, [0, 1]);
        } else if (val.value.length === 3) {
          this.setDisabled(arr, [0, 1, 2]);
        } else if (val.value.length === 4) {
          this.setDisabled(arr, [0, 1, 2, 3]);
        } else if (val.value.length === 0) {
          this.setDisabled(arr, [-1]);
        }
      } else if (this.checkboxNumber.length !== 0) {
        this.setDisabled(arr, [0, 1, 2, 3]);
      }

      // 修改同理
      if (this.editFlag) {
        if (this.checkboxedit.length === 1) {
          this.setDisabled(arr, [0]);
        } else if (this.checkboxedit.length === 2) {
          this.setDisabled(arr, [0, 1]);
        } else if (this.checkboxedit.length === 3) {
          this.setDisabled(arr, [0, 1, 2]);
        } else if (this.checkboxedit.length === 4) {
          this.setDisabled(arr, [0, 1, 2, 3]);
        } else if (this.checkboxedit.length === 0) {
          this.setDisabled(arr, [-1]);
        }
      }
    },

    // 循环找到对应必填种类禁用选项
    setDisabled(arr, indices) {
      arr.dicData.forEach((item, index) => {
        item.disabled = !indices.includes(index);
      });
    },

  }
}
</script>

<style scoped>
<style scoped lang="scss">
.avue-form__group--flex{
  padding-bottom: 25px !important;
}

</style>