SMAirports/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <sidebar id="sidebar-containers" class="sidebar-container" />
    <div class="main-container">
      <navbar />
      <app-main id="main-containers" />
    </div>
    <!--修改密码弹框-->
    <Dialog width="496px" custom-class="dataStoreInfoDialog" :flag="pwdflag">
      <div class="dialog-public-background">
        <div class="title">修改密码</div>
        <div class="content">
          <div class="ruleZf">
            特殊字符：`、!、@、#、$、%、^、&、*、(、)、_、+、{、}、"、:、?、>、&lt;、`、,、.、/、'、;、=、-
          </div>
          <div class="ruleZf">
            密码规则：长度为8-20个字符，并且必须包含数字、大写字母、小写字母、特殊字符
          </div>
          <el-form ref="dataForm" :model="dataForm" :rules="dataRules" class="demo-dataForm">
            <el-form-item label="旧密码" prop="old">
              <el-input v-model="dataForm.old" size="medium" placeholder="请输入旧密码" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="new">
              <el-input v-model="dataForm.new" size="medium" placeholder="请输入新密码" show-password />
            </el-form-item>
            <el-form-item label="再次确认新密码" prop="again">
              <el-input v-model="dataForm.again" size="medium" placeholder="请再次确认新密码" show-password />
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button size="medium" type="primary" class="r24" @click="addSubmit('dataForm')">保存</el-button>
          <el-button v-if="!restFlag" size="medium" @click="resetForm('dataForm')">取消</el-button>
        </div>
      </div>
    </Dialog>
    <!--退出弹框-->
    <Dialog :flag="outflag">
      <div class="airportInfoDialog">
        <div class="flx">退出系统</div>
        <div class="content">是否确认退出系统？</div>
        <div class="foot right t30" style="margin-top: 24px">
          <el-button size="medium" class="r25 r26" type="primary" @click="outQd">确定</el-button>
          <el-button size="medium" class="r26" @click="outQx">取消</el-button>
        </div>
      </div>
    </Dialog>
    <PassengerDialog />
    <AbnormalBaggageDialog />
    <WarningDialog />
    <ErrorDialog />
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters } from 'vuex'
// import { changePassword } from "@/api/newLogin";
// import { removeToken } from "@/utils/auth";
import { modifyData, Query } from '@/api/webApi'
import Dialog from '@/layout/components/Dialog'
import MD5 from 'blueimp-md5'
import PassengerDialog from '@/components/PassengerDialog'
import AbnormalBaggageDialog from '@/components/AbnormalBaggageDialog'
import WarningDialog from '@/components/WarningDialog'
import ErrorDialog from '@/components/ErrorDialog'
//import '@/config/staticConfig' // 按钮权限 全局自定义指令v-is
export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    Dialog,
    PassengerDialog,
    AbnormalBaggageDialog,
    WarningDialog,
    ErrorDialog
  },
  mixins: [ResizeMixin],
  data () {
    return {
      dataForm: {
        // 数据项表单
        old: '',
        new: '',
        again: '',
      },
      // leup: true,
      dataRules: {
        // 数据项表单验证
        old: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        new: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        again: [
          { required: true, message: '请再次确认新密码', trigger: 'blur' },
        ],
      },
      restFlag: false
    }
  },
  computed: {
    ...mapGetters(['pwdflag', 'outflag', 'name', 'UserId']),
  },
  mounted () {
    this.getLastLoginTime()
  },
  methods: {
    // 获取最后登录时间
    async getLastLoginTime () {
      try {
        const { code, returnData } = await Query({
          serviceId: SERVICE_ID.getUserTableId,
          dataContent: { user_id: this.UserId },
          event: '0',
        })
        if (code == 0 && returnData.length) {
          const { lastPasswordModificationTime } = returnData[0]
          if (!lastPasswordModificationTime) {
            this.restFlag = true
            this.$store.dispatch('app/togglePwdflag', true)
          } else {
            const lastTime = this.$moment(lastPasswordModificationTime).format('YYYY-MM-DD HH:mm:ss')
            const newTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
            if (this.$moment(newTime).diff(lastTime, 'hours') > PLATFROM_CONFIG.loseTimeHour) {
              this.restFlag = true
              this.$store.dispatch('app/togglePwdflag', true)
            }
          }
        } else {
          this.restFlag = false
          this.$store.dispatch('app/togglePwdflag', false)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 存储数据项-提交
    addSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const r = PLATFROM_CONFIG.editRule
          const b = r.test(this.dataForm.new)
          if (b) {
            if (this.dataForm.new !== this.dataForm.again) {
              this.$message.error('两次输入的密码不一致，请重新输入')
              return false
            }
            this.editPwd()
          } else {
            this.$message.error('请根据密码规则设置密码')
          }
        } else {
          return false
        }
      })
    },
    // 存储数据项-取消
    resetForm (formName) {
      this.$store.dispatch('app/togglePwdflag', false)
      this.$refs[formName].resetFields()
    },
    // 退出系统-取消
    outQx () {
      this.$store.dispatch('app/toggleOutflag', false)
    },
    // 退出系统-确定
    async outQd () {
      const res = await this.$store.dispatch('user/logout')
      const that = this
      if (res) {
        that.$store.dispatch('app/toggleOutflag', false)
        this.$message({
          type: 'success',
          message: '退出登录成功',
          duration: 1000,
          onClose: () => {
            sessionStorage.removeItem('userName')
            that.$router.push(`/login`)
          },
        })
      } else {
        this.$message.error('退出登录失败')
      }
    },
    // 修改密码
    async editPwd () {
      try {
        const res = await modifyData({
          serviceId: SERVICE_ID.changePwd,
          dataContent: {
            filter: [
              {
                left: '(',
                column: 'user_id',
                comparator: '=',
                value: sessionStorage.getItem('User_Id'),
                right: ')',
                connector: 'and',
              },
              {
                left: '(',
                column: 'user_pwd',
                comparator: '=',
                value: MD5(this.dataForm.old),
                right: ')',
                connector: 'and',
              },
            ],
            Value: {
              user_pwd: MD5(this.dataForm.again),
              lastPasswordModificationTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
            },
          },
        })
        if (res.code == 0 && res.sql.includes('update')) {
          this.$message.success(res.message ?? '成功')
          this.$store.dispatch('app/togglePwdflag', false)
          setTimeout(() => {
            this.outQd()
          }, 2000)
        } else {
          this.$message.error(res.message ?? '密码修改失败')
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
.ruleZf {
  line-height: 2;
  margin-bottom: 22px;
  color: #101611;
}
</style>