问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

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

@@ -8,15 +8,20 @@
        <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
      </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">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}">
      <div
        v-for="dock in $store.state.desktop.minDocks"
        :key="dock.id"
        class="dock-item-wrap"
        :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>
    </div>
@@ -36,36 +41,96 @@
            <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-item @click.native='toLogout'>
              退出登录
          <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-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-form-item label="旧密码" prop="oldPwd">
          <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-form-item>
        <el-form-item label="确认密码" prop="checkPwd">
          <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>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {logout} from "@/api/login";
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('请输入密码'));
      } else {
        if (this.passwdForm.checkPwd !== '') {
          this.$refs.ruleForm.validateField('checkPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwdForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: ''
      maxOrderOne: '',
      userInfo: {},
      showPasswdForm: false,
      rules: {
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPwd: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
      passwdForm: {
        oldPwd: "",
        newPwd: "",
        checkPwd: ""
      },

    };
  },
  created() {
    let _that = this;
    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 = [
      setInterval(function () {
        _that.notificationCenterMessageCount += 1;
@@ -76,7 +141,7 @@
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         debugger;
  //         ;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
@@ -88,8 +153,34 @@
  //   }
  // },

  

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let json = {
            oldPwd: this.passwdForm.oldPwd,
            newPwd: this.passwdForm.checkPwd
          }
          updatePwd(json).then(res => {
            console.log(res, '修改密码')
            this.$notify({
              type: res.success ? 'success' : 'error',
              message: res.msg
            })
            if (res.success) {
              this.showPasswdForm = false
              // this.$nextTick(_=>{
              //   this.toLogout('修改密码成功，请重新登录！')
              // })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
      this.$store.commit(
@@ -110,7 +201,7 @@
    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      debugger;
      ;
      this.$store.state.desktop.frames.forEach(frame => {
        this.$store.commit('desktop/addMinDock', {
          id: frame.id,
@@ -122,7 +213,7 @@
      })
    },
    dockClick(dock) {
      debugger

      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
@@ -135,11 +226,15 @@
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        //点击的iframe置顶并高亮
        debugger
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    toLogout(){
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    },

    toLogout() {
      let _this = this;
      this.$confirm("提示：确定退出吗？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -148,6 +243,9 @@
        logout().then(res => {
          if (res === "退出成功") {
            sessionStorage.removeItem("userInfo");
            // 手动退出, 取消自动登录
            sessionStorage.removeItem("autoLogin");
            _this.userInfo = {};
            location.assign('/view/index');
            this.$notify({
              title: "提示",
@@ -188,7 +286,7 @@
  margin: auto;
}
.tools .tools-left {
  width: 200px;
  width: 275px;
  height: 100%;
  float: left;
  margin-left: 14px;
@@ -197,6 +295,7 @@
  float: left;
  position: relative;
}

.tools .tools-middle::before {
  width: 1px;
  height: 20px;
@@ -215,11 +314,11 @@
  border-bottom: 2px solid transparent;
  position: relative;
}
.tools .tools-middle .dock-item-wrap:hover{
.tools .tools-middle .dock-item-wrap:hover {
  color: white;
  background-color: #98aabe;
}
.tools-middle .dock-item-wrap.actived{
.tools-middle .dock-item-wrap.actived {
  border-color: #40c3ff;
  background-color: #98aabe;
}
@@ -232,6 +331,7 @@
}
.dock-item-wrap .dock-shot {
  visibility: hidden;
  /* transform: scale(0.5); */
  width: 100px;
  height: 46px;
  position: absolute;
@@ -250,7 +350,9 @@
  line-height: 56px;
  padding: 0 15px;
}

.tools-icon img {
  -webkit-user-drag: none;
}
.tools .tools-icon:not(.no-hover-style):hover,
.tools .tools-icon:not(.no-hover-style).clicked {
  color: white;
@@ -263,7 +365,11 @@
  height: 100%;
  margin-right: 14px;
}
.el-dropdown-menu{
.el-dropdown-menu {
  top: 40px !important;
}

.smart-ai {
  height: 65%;
}
</style>