ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
src/pages/desktop/index/components/Tools.vue
@@ -8,14 +8,19 @@
        <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>
@@ -36,37 +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 html2canvas from 'html2canvas';
import {logout} from "@/api/login";
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;
@@ -89,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(
@@ -123,7 +213,7 @@
      })
    },
    dockClick(dock) {
      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
@@ -139,11 +229,12 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    toolHover(dock){
    toolHover(dock) {
      //this.$parent.screenShot(dock)
    },
    toLogout(){
    toLogout() {
      let _this = this;
      this.$confirm("提示:确定退出吗?", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
@@ -152,6 +243,9 @@
        logout().then(res => {
          if (res === "退出成功") {
            sessionStorage.removeItem("userInfo");
            // 手动退出, 取消自动登录
            sessionStorage.removeItem("autoLogin");
            _this.userInfo = {};
            location.assign('/view/index');
            this.$notify({
              title: "提示",
@@ -192,7 +286,7 @@
  margin: auto;
}
.tools .tools-left {
  width: 200px;
  width: 275px;
  height: 100%;
  float: left;
  margin-left: 14px;
@@ -220,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;
}
@@ -256,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;
@@ -269,7 +365,11 @@
  height: 100%;
  margin-right: 14px;
}
.el-dropdown-menu{
.el-dropdown-menu {
  top: 40px !important;
}
.smart-ai {
  height: 65%;
}
</style>