Foshan4A4.0/src/views/systemManagement/index.vue

<template>
  <div class="Box">
    <div class="centerBox">
      <el-form :model="FormData" :rules="rules" ref="systemForm" label-width="0" class="demo-ruleForm">
        <div class="centerTitle">
          <span class="TitleStyle">系统基础设置</span>
          <el-button v-is="['system_btn_save']" @click="save()">保存</el-button>
        </div>
        <div class="boxList">
          <span class="ListName">是否开启{{ accountGroupType }}</span>
          <div class="riaStyle">
            <el-radio v-model="FormData.OpenGroup" :label="1">是</el-radio>
            <el-radio v-model="FormData.OpenGroup" :label="0">否</el-radio>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">是否允许职员关联多账号</span>
          <div class="riaStyle">
            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="1">是</el-radio>
            <el-radio disabled v-model="FormData.UserOfficerMulti" :label="0">否</el-radio>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">是否开启角色</span>
          <div class="riaStyle">
            <el-radio v-model="FormData.OpenRole" :label="1">是</el-radio>
            <el-radio v-model="FormData.OpenRole" :label="0">否</el-radio>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">是否开启严格数据权限</span>
          <div class="riaStyle">
            <el-radio v-model="FormData.OpenAuthData" :label="1" disabled>是</el-radio>
            <el-radio v-model="FormData.OpenAuthData" :label="0" disabled>否</el-radio>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">账号变更为闲置状态的不登录时间（天）</span>
          <div class="riaStyle">
            <el-form-item prop="UserIdledays">
              <el-input v-model.trim="FormData.UserIdledays" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">登录后锁定系统的不操作时间（分钟）</span>
          <div class="riaStyle">
            <el-form-item prop="LockMins">
              <el-input v-model.trim="FormData.LockMins" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">密码长度范围</span>
          <div class="riaStyle1">
            <div>
              <el-form-item prop="PwdLengthBegin">
                <el-input class="ipt1" v-model.trim="FormData.PwdLengthBegin" placeholder="最少位数"></el-input>
              </el-form-item>
              <div class="lineStyle1"></div>
            </div>

            <span class="zhi">至</span>
            <div>
              <el-form-item prop="PwdLengthEnd">
                <el-input class="ipt2" v-model.trim="FormData.PwdLengthEnd" placeholder="最多位数"></el-input>
              </el-form-item>
              <div class="lineStyle2"></div>
            </div>
          </div>
        </div>
        <div class="boxList">
          <span class="ListName">密码组成结构</span>
          <div class="riaStyle">
            <el-checkbox-group v-model="checkedList" @change="PwdStrucChange" :min="1">
              <el-checkbox v-for="(item, index) in PwdStrucList" :label="item.id" :key="index" :checked="item.isChecked">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">APPID是否绑定开发者</span>
          <div class="riaStyle">
            <el-radio v-model="FormData.HasAppid" :label="1">是</el-radio>
            <el-radio v-model="FormData.HasAppid" :label="0">否</el-radio>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">密码有效时长（天）</span>
          <div class="riaStyle">
            <el-form-item prop="PwdValidtime">
              <el-input v-model.trim="FormData.PwdValidtime" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">允许试错次数（次数）</span>
          <div class="riaStyle">
            <el-form-item prop="LoginError">
              <el-input v-model.trim="FormData.LoginError" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">密码找回联系方式</span>
          <div class="riaStyle">
            <el-form-item prop="PwdValidtime">
              <el-input v-model.trim="FormData.PwdMessage" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="lineStyle"></div>
        </div>
        <div class="boxList">
          <span class="ListName">是否启用简易验证码</span>
          <div class="riaStyle">
            <el-radio v-model="FormData.SimpleValidCodeMode" :label="1">是</el-radio>
            <el-radio v-model="FormData.SimpleValidCodeMode" :label="0">否</el-radio>
          </div>
          <div class="lineStyle" style="margin-bottom: 70px"></div>
        </div>
      </el-form>
    </div>
    <div class="asideBox">
      <el-button v-is="['system_basic_page']" type="primary">系统基础设置</el-button>
      <el-button v-is="['system_logintac_page']" @click="gotoLogin">登录策略</el-button>
    </div>
  </div>
</template>

<script>
import { GetSystemSet, SaveSystemSet } from "@/api/systemConfiguration";
import { positiveIntegerValidator } from '@/utils/validate'
export default {
  data () {
    return {
      isShow: false,
      FormData: {
        OpenGroup: "1",
        UserOfficerMulti: 1,
        OpenRole: 1,
        OpenAuthData: 1,
        UserIdledays: 0,
        LockMins: 0,
        PwdLengthBegin: 0,
        PwdLengthEnd: 0,
        PwdStruc: "0",
        HasAppid: 0,
        PwdValidtime: 0,
        LoginError: 0,
        PwdMessage: "",
        SimpleValidCodeMode: 0,
      },
      rules: {
        UserIdledays: [
          {
            required: true,
            message: "请输入账号变更为闲置状态的不登录时间（天）",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            max: 999999999,
            trigger: ['change', 'blur']
          }
        ],
        LockMins: [
          {
            required: true,
            message: "请输入登录后锁定系统的不操作时间（分钟）",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            max: 999999999,
            trigger: ['change', 'blur']
          }
        ],
        PwdLengthBegin: [
          {
            required: true,
            message: "请输入密码长度范围最少位数",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            min: 6,
            trigger: ['change', 'blur']
          }
        ],
        PwdLengthEnd: [
          {
            required: true,
            message: "请输入密码长度范围最多位数",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            max: 22,
            trigger: ['change', 'blur']
          }
        ],
        PwdValidtime: [
          {
            required: true,
            message: "请输入密码有效时长（天）",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            max: 999999999,
            trigger: ['change', 'blur']
          }
        ],
        LoginError: [
          {
            required: true,
            message: "请输入允许试错次数（次数）",
            trigger: "blur",
          },
          {
            validator: positiveIntegerValidator,
            max: 999999999,
            trigger: ['change', 'blur']
          }
        ],
        PwdMessage: [
          {
            required: true,
            message: "请输入密码找回联系方式",
            trigger: "blur",
          },
        ],
      },
      oldFormData: null,
      checkedList: [],
      PwdStrucList: [
        { id: "1000", name: "大写字母", isChecked: false },
        { id: "0100", name: "小写字母", isChecked: false },
        { id: "0010", name: "特殊字符", isChecked: false },
        { id: "0001", name: "数字", isChecked: false },
      ],
    };
  },
  watch: {
    FormData: {
      handler (val) {
        if (
          JSON.stringify(val) != this.oldFormData &&
          this.oldFormData != null
        ) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      },
      deep: true,
    },
    // 'FormData.PwdLengthEnd': {
    //   handler(val) {
    //     this.rules.PwdLengthBegin[1].max = parseInt(val)
    //     this.$refs["systemForm"].validateField('PwdLengthBegin')
    //   }
    // },
    // 'FormData.PwdLengthBegin': {
    //   handler(val) {
    //     this.rules.PwdLengthEnd[1].min = parseInt(val)
    //     this.$refs["systemForm"].validateField('PwdLengthEnd')
    //   }
    // }
  },
  created () {
    this.getSystemSet();
    // let SystemSetInfo = JSON.parse(this.$store.state.app.systemSet);
    // if (SystemSetInfo) {
    //   this.FormData = SystemSetInfo;
    //   this.oldFormData = JSON.stringify(SystemSetInfo);
    //   const { PwdStruc } = SystemSetInfo;
    //   this.getPwdStruc(PwdStruc);
    // } else {
    //   this.getSystemSet();
    // }
  },
  methods: {
    gotoLogin () {
      this.$router.push("/LoginPolicy");
    },
    getSystemSet () {
      GetSystemSet({})
        .then((response) => {
          const { returnData } = response;
          this.$store.dispatch("app/getSystemSet", returnData);
          this.FormData = returnData;
          this.oldFormData = JSON.stringify(returnData);
          const { PwdStruc } = returnData;
          this.getPwdStruc(PwdStruc);
        })
        .catch((error) => {
          reject(error);
        });
    },
    PwdStrucChange (data) {
      let count = 0;
      for (let i = 0; i < data.length; i++) {
        count = count + Number(data[i]);
        this.FormData.PwdStruc = count;
      }
      console.log(this.FormData);
    },
    getPwdStruc (data) {
      let dataList = data.split("");
      if (dataList[0] == 1) {
        this.checkedList.push("1000");
      }
      if (dataList[1] == 1) {
        this.checkedList.push("0100");
      }
      if (dataList[2] == 1) {
        this.checkedList.push("0010");
      }
      if (dataList[3] == 1) {
        this.checkedList.push("0001");
      }
    },
    save () {
      if (this.FormData.PwdStruc == 11) {
        this.FormData.PwdStruc = "0011";
      } else if (this.FormData.PwdStruc == 101) {
        this.FormData.PwdStruc = "0101";
      } else if (this.FormData.PwdStruc == 111) {
        this.FormData.PwdStruc = "0111";
      } else if (this.FormData.PwdStruc == 1) {
        this.FormData.PwdStruc = "0001";
      } else if (this.FormData.PwdStruc == 100) {
        this.FormData.PwdStruc = "0100";
      } else if (this.FormData.PwdStruc == 0) {
        this.FormData.PwdStruc = "0000";
      } else if (this.FormData.PwdStruc == 10) {
        this.FormData.PwdStruc = "0010";
      }
      this.$refs["systemForm"].validate((valid) => {
        if (valid) {
          SaveSystemSet(this.FormData)
            .then((response) => {
              const { code } = response;
              if (code == 0) {
                this.$message.success("设置成功");
                this.oldFormData = JSON.stringify(this.FormData);
                this.$store.dispatch("app/getSystemSet", this.FormData);
                this.isShow = false;
              } else {
                this.$message.error(response.message);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0;
}
.el-form-item__content {
  line-height: 0 !important;
}
.Box {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  padding-top: 32px;
}

.centerBox {
  width: calc(100% - 502px);
  margin-left: 50px;
  background: #fff;
  height: 100%;
  margin-right: 52px;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  .lineStyle {
    width: 700px;
    height: 1px;
    background: #c0c4cc;
    margin-top: 22px;
  }
  .centerTitle {
    margin-top: 20px;
    margin-bottom: 40px;
    width: 700px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-left: 260px;
  }
  .TitleStyle {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-top: 7px;
  }
  .boxList {
    margin-left: 260px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
  }

  .ListName {
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }
  .riaStyle {
    margin-top: 24px;
  }
  .riaStyle1 {
    margin-top: 24px;
    display: flex;
  }
  .zhi {
    width: 16px;
    margin-right: 30px;
    margin-left: 30px;
    margin-top: 10px;
    z-index: 1;
  }
  .lineStyle1 {
    width: 150px;
    height: 1px;
    background: #c0c4cc;
    margin-top: 22px;
  }
  .lineStyle2 {
    width: 475px;
    height: 1px;
    background: #c0c4cc;
    margin-top: 22px;
  }
}
::v-deep .riaStyle {
  .el-radio {
    margin-right: 73px;
  }
  .el-input__inner {
    width: 600px;
    border: none;
    padding: 0;
    margin-bottom: -20px;
  }
  .el-checkbox__label {
    font-weight: 400;
    color: #303133;
    font-size: 14px;
  }
}
::v-deep .riaStyle1 {
  .ipt1 {
    width: 150px;
  }
  .el-radio {
    margin-right: 73px;
  }
  .ipt1 .el-input__inner {
    width: 150px;
    border: none;
    padding: 0;
    margin-bottom: -20px;
  }
  .ipt2 .el-input__inner {
    width: 600px;
    border: none;
    padding: 0;
    margin-bottom: -20px;
  }
  .el-checkbox__label {
    font-weight: 400;
    color: #303133;
    font-size: 14px;
  }
}
::v-deep .centerTitle {
  .el-button {
    width: 72px;
    height: 40px;
    background: #6e81bc;
    border-radius: 6px;
    color: #fff;
    border: none;
  }
}
.asideBox {
  width: 400px;
  background: #fff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: -35px;
  position: fixed;
  right: 0;
  // top: 0;
  // padding-top: 147px;
}
::v-deep .asideBox {
  .el-button--primary {
    width: 280px;
    height: 48px;
    background: linear-gradient(0deg, #6983be, #777dba);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    color: #fff;
    border: none;
    margin: 30px 0 24px 60px;
  }
  .el-button--default {
    width: 280px;
    height: 48px;
    background: #f5f7fa;
    border: 1px solid #b4b7cb;
    border-radius: 6px;
    color: #6f81bc;
    margin-left: 60px;
  }
}
</style>