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

@@ -1,13 +1,486 @@
<template>
  <basic-container>
    <avue-crud
      ref="passWordCrud"
      v-model="form"
      :data="tableData"
      :option="option"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getTableList"
      @refresh-change="handleRefresh"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
    >
      <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, deleteDep, addDept, updatePasswordStrateg} from "@/api/system/password/api"
import basicOption from "@/util/basic-option";

export default {
  name: "index"
  name: "index",
  data() {
    return {
      form: {},
      tableData: [],
      option: {
        ...basicOption,
        selection: false,
        calcHeight: -60,
        menuWidth: 150,
        editBtn: false,
        delBtn: false,
        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%",
            value: 0,
            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 => {
        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(row, done, loading) {
      row.combinations = row.requireCharType.join(',');
      delete row.requireCharType;
      addDept(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done()
        }
      }).catch(err => {
        loading()
        console.log(err);
      })
    },

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

    // 修改
    rowUpdateHandler(row, index, done,loading) {
      row.combinations = row.requireCharType;
      delete row.requireCharType;
      updatePasswordStrateg(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done()
        }
      }).catch(err => {
        loading()
        console.log(err);
      })
    },

    // 删除
    handleDel(row, index) {
      let params = {
        pwdIds: row.oid
      }

      this.$confirm('您确定要删除当前的密码策略吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDep(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 必填种类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 lang="scss" scoped>
.avue-form__group--flex {
  padding-bottom: 25px !important;
}

</style>