front / ningxia-credit-web · Files

<template>
  <div class="head_container">
    <div class="title_wrap">
      <el-row>
        <el-col :span="7">
          <router-link to="/">
            <div class="logo_wrap">
              <img src="./../assets/images/home/108.png" alt="logo" style="height: 100%" class="mr10"/>
              <span>宁夏企业信用信息平台</span>
              <div v-show="false">{{ route.path }}</div>
            </div>
          </router-link>
        </el-col>

        <el-col :span="11" :offset="2">
          <el-menu :default-active="state.activeMenu" mode="horizontal" :ellipsis="false"
                   class="menu_warp selectNone"
                   background-color="#2a5f93"
                   text-color="#fff"
                   active-text-color="#2969E7"
                   style="border-bottom: 0"
                   :router="true"

          >
            <div class="menu_dh">
              <template v-for="(item, index) in state.menuList">
                <el-sub-menu :index="item.index" v-if="item.children" @click="handleSelect(item)">
                  <template #title>{{ item.title }}</template>
                  <template v-for="(child, childIndex) in item.children">
                    <el-menu-item :key="'menu'+childIndex" :index="child.index" :route="{path: child.path}" v-if="child.isShow">
                      {{ child.title }}
                    </el-menu-item>
                  </template>
                </el-sub-menu>
                <el-menu-item v-else :index="item.index" :key="'menu'+index" :route="{path: item.path}">
                  {{ item.title }}
                </el-menu-item>
              </template>
            </div>
          </el-menu>
        </el-col>

        <el-col :span="4" style="display: flex;justify-content: flex-end;align-items: center;">
          <el-dropdown class="user_wrap" size="large" v-if="state.isLogin">
            <div style="display: flex; align-items: center; color: #2969E7">
              <el-icon style="font-size: 20px;">
                <component :is="'Avatar'"></component>
              </el-icon>
              <span style="margin: 0 10px 0 5px; font-size: 20px;">{{ state.userInfo && state.userInfo.loginName }}</span>
              <el-icon>
                <component :is="'ArrowDown'"></component>
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/personCenter')">个人中心</el-dropdown-item>
                <el-dropdown-item @click="state.open = true">修改密码</el-dropdown-item>
                <el-dropdown-item @click="loginOut" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <template v-else>
            <el-button plain type="primary" @click="router.push('/login')">登录/注册</el-button>
          </template>
        </el-col>
      </el-row>
    </div>

    <el-dialog :title="state.title" v-model="state.open" width="500px" append-to-body destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form ref="queryForm" :model="state.rulesForm" :rules="queryRules" label-position="left" label-width="80px" @close="handleClose">
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" show-password v-model.trim="state.rulesForm.newPwd"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmNewPwd">
          <el-input type="password" show-password v-model.trim="state.rulesForm.confirmNewPwd"
                    placeholder="请输入确认密码"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose(false)" v-if="state.modifyPsdPage !== 1">取消</el-button>
          <el-button type="primary" @click="handleSubmit('isSubmit')" :loading="state['isSubmit']">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import getImage from "../assets/getImage";
import {loginMain} from './../store/index'
import {storeToRefs} from 'pinia';

let loginAct = loginMain()
let {getStoreToken, getUserInfo} = storeToRefs(loginAct)
import * as api from "./../interface/api"
import router from "./../router/index"
import {getToken} from "../utils/auth.ts";
import {FormRules} from "element-plus";
import {RouteLocationMatched} from "vue-router";

const route = useRoute();
let title: any = ref("");

const handleSelect = (d) => {
  if(d.index==4) {
    router.push("/product")
  }
}

let state: any = reactive({
  activeMenu: '-1',
  menuList: [{
    title: "首页",
    path: "/",
    index: '0'
  }, {
    title: "企业数据库",
    index: '1',
    path: "/",
  }, {
    title: "风险预警",
    index: '2'  ,
    path: "/",
  }, {
    title: "攻击分析",
    index: '3',
    path: "/",
  }, {
    title: "信用报告",
    index: '4',
    path: "/",
  }],
  userInfo: getUserInfo.value,
  title: '修改密码',
  open: false,
  rulesForm: {
    newPwd: undefined,
    confirmNewPwd: undefined,
  },
  isLogin: false,
  modifyPsdPage: null,
})

/*{
    title: "风险动态监控列表",
    path: "/monitorList",
    index: '3'*/
const matchNewOldPwd = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('确认密码不能为空'))
  }
  setTimeout(() => {
    if (state.rulesForm.newPwd !== state.rulesForm.confirmNewPwd) {
      callback(new Error('新密码与确认密码不一致'))
    } else {
      callback()
    }
  }, 100)
}

let queryRules = reactive<FormRules>({
  newPwd: [
    {required: true, message: "新密码不能为空", trigger: ["blur", "change"]}
  ],
  confirmNewPwd: [
    {required: true, message: "确认密码不能为空", trigger: ["blur", "change"]},
    {validator: matchNewOldPwd, trigger: ["blur", "change"]},
  ]
})

let loginOut = () => {
  api.loginOut().then(() => {
    ElMessage.success("退出登录")
    loginAct.removeUserInfo()
    router.push("/login")
  })
}

let queryForm = ref(null)

let handleClose = () => {
  queryForm.value.resetFields()
  state.open = false
}

let handleSubmit = (status: string) => {
  queryForm.value.validate((valid: boolean, fields: Object) => {
    if (valid) {
      state[status] = true
      api.updatePwd({password: state.rulesForm.newPwd}).then(res => {
        ElMessage.success("修改成功")
        state.userInfo.modifyPsdPage = 0
        localStorage.setItem("userInfo", JSON.stringify(state.userInfo))
        handleClose()
      }).finally(()=> {
        state[status] = false
      })
    }
  })
}

let frontMenu = getToken() ? JSON.parse(localStorage.getItem('userInfo')).frontMenu : []

let isHaveMenu = (value: string) => {
  let isHave = !getToken()
  if (frontMenu && JSON.stringify(frontMenu) !== "{}") {
    frontMenu.some((item: object)=> {
      if (item && item.url === value) {
        isHave = true
      }
    })
  }

  return isHave
}

let isShowModifyPwd = () => {
  if (getToken()) {
    state.modifyPsdPage = JSON.parse(localStorage.getItem('userInfo')).modifyPsdPage
    if (state.modifyPsdPage === 1) {
      state.open = true
    }
  }
}

watchEffect(() => {
  let matched = route.matched.filter((item: RouteLocationMatched) => {
    return item.meta && item.meta.title;
  })
  if (matched[0]) {
    state.activeMenu = "-1"
    title = matched[0].meta.title
    state.menuList.some((item: object) => {
      if (item.title == title) {
        state.activeMenu = item.index
      }
    })
  }
})

onMounted(()=> {
  state.isLogin = !!getToken()
  isShowModifyPwd()
  state.menuList.forEach((item: object)=> {
    if (item.children) {
      item.children.forEach((child: object)=> {
        if (child.path === '/enterpriseRelations'
          || child.path === '/specialSearch'
          || child.path === '/verificationSearch'
          || child.path === '/investSearch'
          || child.path === '/financeSearch'
          || child.path === '/negativeSearch'
          || child.path === '/litigationSearch'
          || child.path === '/receiptDetail'
          || child.path === '/commerceDetail'
          || child.path === '/industryDetail'
          || child.path === '/scienceDetail'
          || child.path === '/receipt/search'
          || child.path === '/tenderingDetail'
        ) {
          child["isShow"] = true
        } else {
          child["isShow"] = isHaveMenu(child.path)
        }
      })
    }
  })
})
</script>

<style scoped>
.head_container {
  background-color: #2a5f93;
  position: relative;
  width: 100%;
  min-width: 1200px;
  border-bottom: 1px #E6E6E6 solid;
}

.title_wrap {
  position: relative;
  width: 80%;
  margin: 0 auto;
  min-width: 1200px;
}

.logo_wrap {
  height: 30px;
  margin-top: 15px;
  margin-right: 100px;
  cursor: pointer;
  line-height: 30px;
  display: flex;
  color: #fff;
  font-size: 18px;
}

.menu_warp {
  display: flex;
  flex-grow: 1;
}

.menu_dh {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.user_wrap {
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  line-height: 60px;
}
:deep(.el-sub-menu) {
  display: flex;
  align-items: center;
}
:deep(.menu_warp .el-menu-item) {
  height: 60px;
  font-size: 18px;
}
:deep(.el-sub-menu__title) {
  font-size: 18px;
}
:deep(.menu_warp.el-menu--horizontal .el-menu-item:hover) {
  background-color: #2a5f93;
  color: #3265FF;
}
:deep(.menu_warp.el-menu--horizontal .el-menu-item.is-active) {
  background-color: #2a5f93;
}
:deep(.el-sub-menu__title:hover) {
  background-color: #2a5f93;
}
</style>