all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/settings/index/index.vue

File was renamed from src/pages/settings/index/App.vue
@@ -15,9 +15,9 @@

    <div
      class="container-center"
      v-if="activePage == '账户' || activePage == '日期时间'"
      v-if="activeIndex == 0 || activeIndex == 1"
    >
      <div class="account-left" v-if="activePage == '账户'">
      <div class="account-left" v-if="activeIndex == 0">
        <div class="account-list">
          <div
            class="account-card"
@@ -33,23 +33,21 @@
                :src="`data:image/png;base64,${item.headpic}`"
                alt=""
              />
              <span class="user-name">{{ item.username }}</span>
            </div>
            <span class="user-name">{{ item.username }}</span>
            <el-tag
              style="margin-left: 100px"
              size="mini"
              v-if="item.id == curUserID"
              >我的</el-tag
            >
            <el-tag size="mini" v-if="item.id == curUserID">我的</el-tag>
          </div>
        </div>
        <div class="add-account">
        <div class="add-account" v-if="curUserRole != '普通用户'">
          <!-- <span class="icon iconfont" @click="openAdd">&#xe646;</span> -->
          <i class="el-icon-circle-plus" style="font-size: 38px;
" @click="openAdd"></i>
          <i
            class="el-icon-circle-plus"
            style="font-size: 38px"
            @click="openAdd"
          ></i>
        </div>
      </div>
      <div class="datetime-left" v-if="activePage == '日期时间'">
      <div class="datetime-left" v-if="activeIndex == 1">
        <div class="time-card">
          <div class="head">
            <span class="icon iconfont">&#xe690;</span>
@@ -84,9 +82,9 @@
    </div>
    <div
      class="container-right"
      v-if="activePage == '账户' || activePage == '日期时间'"
      v-if="activeIndex == 0 || activeIndex == 1"
    >
      <div class="account-right" v-if="activePage == '账户'">
      <div class="account-right" v-if="activeIndex == 0">
        <div
          class="account-content"
          v-if="inAccountDetail == false && isAddAccount == false"
@@ -189,15 +187,18 @@
            <div class="item-btn" @click="showChangePassword">修改密码</div>
            <div
              class="item-btn"
              v-if="
                activeUserRole !== '超级管理员' ||
                (curUserRole == '管理员' && activeUserRole == '普通用户')
              "
              v-if="isShowDeleteAccount"
              @click="deleteAccount"
            >
              删除账户
            </div>
            <div class="item-btn" @click="openPermission">权限设置</div>
            <div
              v-if="isShowPermitBtn"
              class="item-btn"
              @click="openPermission"
            >
              权限设置
            </div>
          </div>
        </div>

@@ -304,18 +305,18 @@
          <div class="fill-group">
            <el-form
              :model="addForm"
              :rules="rules"
              :rules="addRules"
              ref="addForm"
              class="add-form"
            >
              <el-form-item prop="userName">
                <div class="p-title">用户名：</div>
                <el-input
                  placeholder="必填，长度为2~10位字符，不能以数字开头、不允许有汉字"
                  placeholder="必填，长度为 2 ~ 10 位字符，不能以数字开头，不允许包含汉字"
                  v-model="addForm.userName"
                ></el-input>
              </el-form-item>
              <el-form-item prop="roleId">
              <el-form-item prop="roleId" v-if="curUserRole != '普通用户'">
                <div class="p-title">角色：</div>
                <el-select v-model="addForm.roleId" placeholder="请选择角色">
                  <el-option
@@ -329,14 +330,14 @@
              <el-form-item prop="nickName">
                <div class="p-title">昵称：</div>
                <el-input
                  placeholder="选填"
                  placeholder="选填，长度为 2 ~ 10 位字符"
                  v-model="addForm.nickName"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <div class="p-title">密码：</div>
                <el-input
                  placeholder="必填"
                  placeholder="必填，至少为 6 位"
                  v-model="addForm.password"
                  show-password
                ></el-input>
@@ -358,7 +359,7 @@
        </div>
      </div>

      <div class="datetime-right" v-if="activePage == '日期时间'">
      <div class="datetime-right" v-if="activeIndex == 1">
        <div class="ntp-time" v-if="isNtp">
          <el-form label-width="160px">
            <el-form-item label="服务器地址">
@@ -538,30 +539,34 @@
    </div>

    <clusterManagement
      v-if="activePage == '集群管理'"
      v-if="activeIndex == 2"
      style="width: 100%"
    ></clusterManagement>
    <netSettings
      v-if="activePage == '网络设置'"
      v-if="activeIndex == 3"
      style="width: 100%"
    ></netSettings>
    <keyboardLanguage
      v-if="activePage == '键盘和语言'"
      v-if="activeIndex == 4"
      style="width: 100%"
    ></keyboardLanguage>
    <generalSettings
      v-if="activePage == '通用设置'"
      v-if="activeIndex == 5"
      style="width: 100%"
    ></generalSettings>
  </div>
  <div class="welcome-page" v-else>
    <div class="child" @click="openWelcome(item, i)" v-for="(item,i) in menuArr" :key="i">
    <div
      class="child"
      @click="openWelcome(item, i)"
      v-for="(item, i) in menuArr"
      :key="i"
    >
      <div class="child-info">
        <span class="icon iconfont welcome-icon">{{ item.icon }}</span>
        <span class="welcome-title">{{item.name}}</span>
        <span class="welcome-title">{{ item.name }}</span>
      </div>
    </div>

  </div>
</template>

@@ -585,6 +590,8 @@
import netSettings from "../views/NetSettings";
import keyboardLanguage from "../views/keyboardLanguage";
import generalSettings from "../views/generalSettings";
import { pad0 } from "@/api/utils";

export default {
  name: "settings",
  components: {
@@ -596,7 +603,8 @@
    generalSettings,
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
    var v2 = (rule, value, callback) => {
      console.log("rule", rule);
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.password) {
@@ -605,11 +613,26 @@
        callback();
      }
    };
    var validatePass4 = (rule, value, callback) => {
    var v4 = (rule, value, callback) => {
      console.log("rule", rule);
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    const v1 = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("请输入用户名"));
        this.addForm.userName = "";
      } else if (isNaN(Number(value[0])) == false) {
        callback(new Error("不能以数字开头"));
      } else if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback(new Error("不能输入汉字"));
      } else if (value.length < 2 || value.length > 10) {
        callback(new Error("长度为 2 - 10 个字符"));
      } else {
        callback();
      }
@@ -670,7 +693,7 @@
      jpgArr: [],
      isManual: false,
      isNtp: true,
      activePage: "账户",
      // activePage: "账户",
      activeIndex: 0,
      clockTimer: null,
      inputHour: "",
@@ -695,24 +718,18 @@
        confirmPassword: "",
        roleId: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
      addRules: {
        userName: [{ validator: v1, trigger: "blur" }],
        nickName: [
          { min: 2, max: 10, message: "长度为 2 - 10 位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度至少为 6 位", trigger: "blur" },
        ],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
        confirmPassword: [{ validator: v2, trigger: "blur" }],
      },
      pwRules: {
        // pw: [{ validator: validatePass3, trigger: "blur" }],
        curPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度至少为 6 位", trigger: "blur" },
@@ -721,7 +738,7 @@
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度至少为 6 位", trigger: "blur" },
        ],
        confirmPassword: [{ validator: validatePass4, trigger: "blur" }],
        confirmPassword: [{ validator: v4, trigger: "blur" }],
      },
    };
  },
@@ -752,7 +769,6 @@
        }
      });
    },

    confirmChangePic() {
      updateUser({
        id: this.activeAccountItem.id,
@@ -789,8 +805,10 @@
      this.activeAccountIndex = i;
      this.inAccountDetail = false;
      this.cancelSet();
      this.cancelAdd();
      this.cacelChoosePic();
      this.fetchMenu();
      this.cancelPassword();
      this.showInputNickName = false;
    },
    minusOne(typ) {
@@ -803,25 +821,25 @@
          if (num == -1) {
            num = 23;
          }
          this.syncHour = this.padZero(num);
          this.syncHour = pad0(+num);
          break;
        case "min":
          num = +this.syncMin - 1;
          if (num == -1) {
            num = 59;
          }
          this.syncMin = this.padZero(num);
          this.syncMin = pad0(+num);
          break;
        case "sec":
          num = +this.syncSec + 1;
          if (num == -1) {
            num = 59;
          }
          this.syncSec = this.padZero(num);
          this.syncSec = pad0(+num);
          break;
        case "yrs":
          num = +this.syncYrs - 1;
          this.syncYrs = this.padZero(num);
          this.syncYrs = pad0(+num);
          break;
        case "mth":
          num = +this.syncMonth - 1;
@@ -829,7 +847,7 @@
            num = 12;
            this.minusOne("yrs");
          }
          this.syncMonth = this.padZero(num);
          this.syncMonth = pad0(+num);
          break;
        case "day":
          num = +this.syncDay - 1;
@@ -842,7 +860,7 @@
            ).getDate();
            num = maxDay;
          }
          this.syncDay = this.padZero(num);
          this.syncDay = pad0(+num);
          break;
        default:
          break;
@@ -867,32 +885,32 @@
          if (num == 24) {
            num = 0;
          }
          this.syncHour = this.padZero(num);
          this.syncHour = pad0(+num);
          break;
        case "min":
          num = +this.syncMin + 1;
          if (num == 60) {
            num = 0;
          }
          this.syncMin = this.padZero(num);
          this.syncMin = pad0(+num);
          break;
        case "sec":
          num = +this.syncSec + 1;
          if (num == 60) {
            num = 0;
          }
          this.syncSec = this.padZero(num);
          this.syncSec = pad0(+num);
          break;
        case "yrs":
          num = +this.syncYrs + 1;
          this.syncYrs = this.padZero(num);
          this.syncYrs = pad0(+num);
          break;
        case "mth":
          num = +this.syncMonth + 1;
          if (num == 13) {
            num = 1;
          }
          this.syncMonth = this.padZero(num);
          this.syncMonth = pad0(+num);
          break;
        case "day":
          num = +this.syncDay + 1;
@@ -900,7 +918,7 @@
          if (num > maxDay) {
            num = 1;
          }
          this.syncDay = this.padZero(num);
          this.syncDay = pad0(+num);
          break;
        default:
          break;
@@ -979,10 +997,6 @@
      }
      return format;
    },
    padZero(n) {
      n = +n;
      return n < 10 ? "0" + n : "" + n;
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
@@ -1009,9 +1023,8 @@
      });
    },
    openMenu(name, i) {
      this.activePage = name;
      this.activeIndex = i;
      if (this.activePage == "日期时间") {
      if (this.activeIndex == 1) {
        this.initClockConf();
      }
    },
@@ -1027,7 +1040,7 @@
    },
    hideInput(typ) {
      if (this[`input${typ}`]) {
        this[`sync${typ}`] = this.padZero(this[`input${typ}`]);
        this[`sync${typ}`] = pad0(+this[`input${typ}`]);
      }
      this[`show${typ}Input`] = false;
      this[`input${typ}`] = "";
@@ -1059,7 +1072,7 @@
      this.addForm.headpic = this.jpgArr[0].path;
      getRoles().then((res) => {
        if (res.success) {
          this.roleList = res.data.slice(0, 2);
          this.roleList = res.data;
        }
      });
    },
@@ -1087,6 +1100,7 @@
          if (this.passwordForm.curPassword == "") {
            data = {
              userId: this.activeAccountItem.id,
              oldPwd: "",
              newPwd: this.passwordForm.newPassword,
            };
          } else {
@@ -1098,8 +1112,10 @@
          updatePassword(data).then(
            (res) => {
              if (res.success) {
                this.$message.success(res.msg);
                this.cancelPassword();
                this.$message.success("密码" + res.msg);
                setTimeout(() => {
                  this.cancelPassword();
                }, 1000);
              }
            },
            (err) => {
@@ -1254,6 +1270,31 @@
      const info = JSON.parse(sessionStorage.getItem("userInfo"));
      return info.id;
    },
    isShowDeleteAccount() {
      if (this.curUserRole == "超级管理员") {
        if (this.activeUserRole == "超级管理员") {
          return false;
        }
        return true;
      } else if (this.curUserRole == "管理员") {
        if (this.activeUserRole == "普通用户") {
          return true;
        }
        return false;
      }
      return false;
    },
    isShowPermitBtn(){
      if (this.curUserRole == "管理员") {
        if (this.activeUserRole == "普通用户") {
          return true
        }
        return false
      }else if (this.curUserRole == "普通用户"){
        return false
      }
      return true
    },
  },
};
</script>
@@ -1264,13 +1305,10 @@
  background-color: #f5f5f5;
  display: -ms-flexbox;
  padding: 0 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .child {
    box-sizing: border-box;
    background-color: white;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3%;
    float: left;
    width: 250px;
    height: 200px;
@@ -1280,6 +1318,9 @@
    justify-content: center;
    align-items: center;
    cursor: pointer;
        -moz-box-shadow: 2px 2px 4px rgb(226, 226, 226);
    -webkit-box-shadow: 2px 2px 4px rgb(226, 226, 226);
    box-shadow: 2px 2px 4px rgb(226, 226, 226);
    .child-info {
      display: flex;
      flex-direction: column;
@@ -1294,11 +1335,11 @@
    }
  }
  .child:hover {
    -moz-box-shadow: 5px 5px 10px #ddd;
    -webkit-box-shadow: 5px 5px 10px #ddd;
    box-shadow: 5px 5px 10px #ddd;
    transform: translate3d(0, -2.5px, 0);
    transition: all 0.3s;
    -moz-box-shadow: 5px 5px 15px rgb(218, 218, 218);
    -webkit-box-shadow: 5px 5px 15px rgb(218, 218, 218);
    box-shadow: 5px 5px 15px rgb(218, 218, 218);
    transform: translate3d(0, -3px, 0);
    transition: all 0.4s;
  }
}
.container {
@@ -1351,8 +1392,9 @@
    border-right: 5px solid rgba(248, 248, 248, 1);
    box-sizing: border-box;
    .account-left {
      .account-list{
        height: 530px;
      height: 100%;
      .account-list {
        height: calc(85%);
        overflow: auto;
      }
      .add-account {
@@ -1373,11 +1415,11 @@
        box-sizing: border-box;
        border-radius: 10px;
        cursor: pointer;
        justify-content: space-between;

        .touxiang {
          height: 35px;
          width: 35px;
          background-color: bisque;
          border-radius: 17.5px;
          display: flex;
          align-items: center;
          img {
            border: none;

@@ -1465,12 +1507,10 @@
          .touxiang-big {
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: relative;
            border-radius: 50px;
            img {
              border: none;

              width: 100px;
              height: 100px;
              position: relative;
@@ -1555,7 +1595,6 @@
        }
        .list-btn {
          display: flex;

          flex-direction: column;
          align-items: center;
          .item-btn {
@@ -1731,7 +1770,6 @@
            text-decoration: underline;
          }
        }

      }
      .manual-time {
        .clock-wrap {