all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/desktop/index/components/Tools.vue

@@ -2,13 +2,46 @@
  <div class="tools">
    <div class="tools-left">
      <div
        :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
        @click="togglePreference()"
        :class="[
          'tools-icon',
          'tools-show-desktop',
          { clicked: this.$store.state.desktop.preferenceVisiable },
        ]"
        @click.stop="togglePreference"
      >
        <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
        <img
          class="system"
          :src="`${publicPath}images/desktop/header-icon/system.png`"
        />
      </div>

      <div class="fast-path" :class="showFastPath?'fast-path-show':''" @click.stop>
        <div class="top">
          <img src="" alt="" />
          <span class="username">{{userInfo.username}}</span>
        </div>
        <div class="link-list">
          <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
            {{ x.name }}
          </div>
        </div>
        <div class="bot">
          <div class="set" @click="gotoSet">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span>设置</span>
          </div>
          <div class="exit" @click="toLogout">
            <span class="icon iconfont">{{"\ue60f"}}</span>
            <span>退出</span>
          </div>
        </div>
      </div>
      <div class="tools-icon no-hover-style">
        <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt />
        <img
          class="smart-ai"
          :src="`${publicPath}images/desktop/header-icon/SmartAI.png`"
          alt
        />
      </div>
    </div>
    <div class="tools-middle">
@@ -16,11 +49,15 @@
        v-for="dock in $store.state.desktop.minDocks"
        :key="dock.id"
        class="dock-item-wrap"
        :class="{'actived':dock.highlight}"
        :class="{ actived: dock.highlight }"
      >
        <a @click="dockClick(dock)">
          <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot" />
          <img
            class="dock-shot"
            :src="dock.screenshot"
            v-if="dock.screenshot"
          />
          <!-- <iframe class="dock-shot" :src="dock.url"  ></iframe> -->
        </a>
      </div>
@@ -38,60 +75,96 @@
      <div class="tools-icon">
        <el-dropdown size="small" placement="bottom">
          <span class="el-dropdown-link">
            <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
            <img
              :src="`${publicPath}images/desktop/header-icon/user.png`"
              alt
            />
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown" style="top: 44px;">
          <el-dropdown-menu slot="dropdown" style="top: 44px">
            <el-dropdown-item style="text-align:left">
              <b>Hi {{userInfo.username}}</b>
            </el-dropdown-item>
            <el-dropdown-item @click.native="showPasswdForm = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="toLogout">退出登录</el-dropdown-item>
            <el-dropdown-item @click.native="showPasswdForm = true"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item @click.native="toLogout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="showPasswdForm" :append-to-body="true" width="500px">
      <el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px">
    <el-dialog
      title="修改密码"
      :visible.sync="showPasswdForm"
      :append-to-body="true"
      width="500px"
    >
      <el-form
        :model="passwdForm"
        ref="ruleForm"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input>
          <el-input
            show-password
            v-model="passwdForm.oldPwd"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input>
          <el-input
            show-password
            v-model="passwdForm.newPwd"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPwd">
          <el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input>
          <el-input
            show-password
            v-model="passwdForm.checkPwd"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="showPasswdForm = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
        <el-button type="info" @click="showPasswdForm = false" size="small"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm('ruleForm')" size="small"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import html2canvas from "html2canvas";
import { logout, updatePwd } from "@/api/login";
export default {
  name: "Tools",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passwdForm.checkPwd !== '') {
          this.$refs.ruleForm.validateField('checkPwd');
        if (this.passwdForm.checkPwd !== "") {
          this.$refs.ruleForm.validateField("checkPwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwdForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
@@ -100,41 +173,47 @@
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: '',
      userInfo: {},
      linkList: [{name: "文档中心"}, {name: "系统监控器"}, { name: "日志管理" }],
      showPasswdForm: false,
      rules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        oldPwd: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPwd: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      showFastPath:false,
      passwdForm: {
        oldPwd: "",
        newPwd: "",
        checkPwd: ""
        checkPwd: "",
      },

    };
  },
  created() {
    let _that = this;
    this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"));
    console.log(this.userInfo)
    this.userInfo =
      sessionStorage.getItem("userInfo") &&
      JSON.parse(sessionStorage.getItem("userInfo"));
    console.log(this.userInfo);
    if (window.toolIntervalArr) {
      window.toolIntervalArr.forEach(item => clearInterval(item));
      window.toolIntervalArr.forEach((item) => clearInterval(item));
    }
    window.toolIntervalArr = [
      setInterval(function () {
        _that.notificationCenterMessageCount += 1;
      }, 600)
      }, 600),
    ];
  },
  mounted() {
    document.addEventListener("click",(e) => {
      // debugger
      // this.showFastPath=false
      if (this.showFastPath) {
        this.showFastPath=false
      }
    })
  },
  methods: {
    submitForm(formName) {
@@ -142,23 +221,23 @@
        if (valid) {
          let json = {
            oldPwd: this.passwdForm.oldPwd,
            newPwd: this.passwdForm.checkPwd
          }
          updatePwd(json).then(res => {
            console.log(res, '修改密码')
            newPwd: this.passwdForm.checkPwd,
          };
          updatePwd(json).then((res) => {
            console.log(res, "修改密码");
            this.$notify({
              type: res.success ? 'success' : 'error',
              message: res.msg
            })
              type: res.success ? "success" : "error",
              message: res.msg,
            });
            if (res.success) {
              this.showPasswdForm = false
              this.showPasswdForm = false;
              // this.$nextTick(_=>{
              //   this.toLogout('修改密码成功，请重新登录！')
              // })
            }
          })
          });
        } else {
          console.log('error submit!!');
          console.log("error submit!!");
          return false;
        }
      });
@@ -181,21 +260,18 @@
    },

    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      ;
      this.$store.state.desktop.frames.forEach(frame => {
        this.$store.commit('desktop/addMinDock', {
      this.showFastPath = !this.showFastPath
      this.$store.state.desktop.frames.forEach((frame) => {
        this.$store.commit("desktop/addMinDock", {
          id: frame.id,
          src: frame.icon,
          alt: frame.title,
          type: "3",
          screenshot: ''
          screenshot: "",
        });
      })
      });
    },
    dockClick(dock) {

      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
@@ -203,7 +279,7 @@
          id: dock.id,
          icon: dock.src,
          title: dock.name,
          url: dock.url
          url: dock.url,
        });
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
@@ -211,21 +287,31 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    clickFastPath(name){
      debugger
      this.$emit("jumpToDock", name)

    },
    gotoSet(){
      this.$emit("jumpToDock", "系统设置")

    },
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    },

    toLogout() {
      let _this = this;
      this.$confirm("提示：确定退出吗？", {
        center: true,
      this.$confirm("确定退出登录吗？","提示", {
        // center: true,
        type:"warning",
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      }).then(_ => {
        logout().then(res => {
        confirmButtonClass: "comfirm-class-sure",
      })
        .then((_) => {
          logout().then((res) => {
          if (res.success) {
            this.$notify.success(res.msg);
            location.assign('/view/index');
              location.assign("/view/index");
            sessionStorage.removeItem("userInfo");
            // 手动退出, 取消自动登录
            sessionStorage.removeItem("autoLogin");
@@ -234,19 +320,20 @@
            this.$notify({
              title: "提示",
              type: "success",
              message: "退出失败!"
                message: "退出失败!",
            });
          }
        });
      }).catch(_ => {
        })
        .catch((_) => {
        console.log("退出失败");
      });
    }
  }
    },
  },
};
</script>

<style scoped>
<style scoped lang="scss">
.tools {
  width: 100%;
  position: fixed;
@@ -309,7 +396,6 @@
}
.dock-item-wrap .dock-shot {
  visibility: hidden;
  /* transform: scale(0.5); */
  width: 100px;
  height: 46px;
  position: absolute;
@@ -327,7 +413,94 @@
  vertical-align: top;
  line-height: 56px;
  padding: 0 15px;
  position: relative;
}
@keyframes move {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fast-path {
  height: 310px;
  position: absolute;
  width: 200px;
  top: 55px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  transition: .2s;
  display: none;
  .top{
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    /* justify-content: space-evenly; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    padding: 0 30px;
    img{
              height: 50px;
        width: 50px;
background-color: bisque;
        border-radius: 50%;
    }
    .username{
    width: fit-content;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-left: 10px;
    }
  }
  .link-list{
        height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .list-item{
          display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 25px;
    height: 25px;cursor: pointer;
    margin: 5px;
    }
    .list-item:hover{
    background-color: rgba(231, 231, 231, 1);
    }
  }
  .bot{
        position: absolute;
    bottom: 0;
    height: 60px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    .set,.exit{
          display: flex;
    align-items: center;
    width: 28%;
    justify-content: space-evenly;
    font-size: 14px;
    cursor: pointer;
    }

  }
}

.tools-icon img {
  -webkit-user-drag: none;
}
@@ -338,6 +511,11 @@
  cursor: pointer;
}

.fast-path-show {
  animation: move linear .2s 1;
  display: block;
}

.tools .tools-right {
  float: right;
  height: 100%;