front / ningxia-credit-web · Files

<template>
  <div class="head_container">
    <div class="title_wrap">
      <el-row>
        <el-col :span="6">
          <router-link to="/">
            <div class="logo_wrap" @click="toHome">
              <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="14">
          <el-menu :default-active="state.activeMenu" mode="horizontal" :ellipsis="false"
                   class="menu_warp selectNone"
                   background-color="#fff"
                   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&&getShow(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> -->
                      <el-sub-menu :index="child.index" v-if="child.children&&getShow1(child.children)">
                        <template #title><div style="font-size: 14px;color: #999;" @click="handleSelect(child)">{{ child.title }}</div></template>
                        <template v-for="(child1, childIndex1) in child.children" :key="childIndex1">
                          <el-menu-item :key="'menu'+childIndex1" :index="child1.index" :route="{path: child1.path}" v-if="child1.isShow">
                            {{ child1.title }}
                          </el-menu-item>
                        </template>
                      </el-sub-menu>
                      <el-menu-item v-else-if="!child.children" :index="child.index" :key="'menu'+childIndex" :route="{path: child.path}">
                        {{ child.title }}
                      </el-menu-item>
                    </template>
                  </el-sub-menu>
                  <el-menu-item v-else-if="!item.children" :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 toHome = () => {
  localStorage.setItem('searchInfo',JSON.stringify({}))
}
const handleSelect = (d) => {
  if(d.index==1) {
    const searchInfoL = JSON.parse(localStorage.getItem('searchInfo'))
    localStorage.setItem('searchInfo',JSON.stringify({...searchInfoL,input:''}))
  } else {
    const searchInfoL = JSON.parse(localStorage.getItem('searchInfo'))
    localStorage.setItem('searchInfo',JSON.stringify({}))
  }
  if(d.index=='2.1') {
    router.push("/monitorNewIndex")
  }
}
const getShow = (d) => {
  const isShow = ref(false)
  d.forEach(item => {
    if(item.isShow) {
      isShow.value = true
    }
  })
  return isShow.value
}
const getShow1 = (d) => {
  const isShow = ref(false)
  d.forEach(item => {
    if(item.isShow) {
      isShow.value = true
    }
  })
  return isShow.value
}

let state: any = reactive({
  activeMenu: '-1',
  menuList: [{
    title: "首页",
    path: "/",
    index: '0'
  }, {
    title: "企业数据库",
    index: '1',
    path: "/database",
  }, {
    title: "信用服务",
    index: '2',
    children: [
      {
        title: "风险预警",
        index: '2.1',
        path: "/monitorNewIndex",
        children: [
          {
            title: "监控列表",
            index: '2.2',
            path: "/monitorList",
          }, {
            title: "监控模板",
            index: '2.6',
            path: "/monitorModel",
          }, {
            title: "监控报告",
            index: '2.5',
            path: "/monitorReport",
          },
        ]
      },
      {
        title: "企业关联关系",
        index: '2.3',
        path: "/enterpriseRelations",
      },
    ]
  }, {
    title: "统计分析",
    index: '3',
    path: "/analysis",
  }, {
    title: "信用报告",
    index: '4',
    path: "/report",
  }],
  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) {
      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(state.rulesForm.newPwd)){
        ElMessage({
            message: '密码必须包含大小写字母、数字和特殊字符，且长度至少8位',
            type: 'warning',
          })
        return;
      }
      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()
        loginOut()
      }).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.path === '/monitorIndex'
          || child.path === '/personCenter/monitorEnterprise'
          || child.path === '/monitorNewIndex'
        ) {
          child["isShow"] = true
        } else {
          child["isShow"] = isHaveMenu(child.path)
        }
        if(child.children) {
          child.children.forEach(childs=> {
            if (
              childs.path==='/receipt/search'||
              childs.path==='/enterpriseRelations'
          || childs.path === '/monitorReport'
          || childs.path === '/monitorModel'
          || childs.path === '/monitorList') {
              childs["isShow"] = true
            } else {
              childs["isShow"] = isHaveMenu(childs.path)
            }
          })
        }
      })
    }
  })
})
</script>

<style scoped>
.head_container {
  background-color: #fff;
  position: relative;
  width: 100%;
  min-width: 1200px;
  border-bottom: 1px #E6E6E6 solid;
}
::v-deep .el-sub-menu__title {
  color: #999;
}
::v-deep .el-sub-menu__title i {
  color: #999 !important;
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-sub-menu__title {
  color: #999;
}
.title_wrap {
  position: relative;
  margin: 0 auto;
  width: 1200px;
}

.logo_wrap {
  height: 30px;
  margin-top: 15px;
  /* margin-right: 100px; */
  cursor: pointer;
  line-height: 30px;
  display: flex;
  color: #333;
  font-size: 20px;
  font-weight: bold;
}

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

.menu_dh {
  display: flex;
  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;
  color: #999999;
}
:deep(.el-sub-menu__title) {
  font-size: 18px;
}
:deep(.menu_warp.el-menu--horizontal .el-menu-item:hover) {
  background-color: #fff;
  color: #333;
}
:deep(.menu_warp.el-menu--horizontal .el-menu-item.is-active) {
  background-color: #fff;
  color: #333;
}
:deep(.el-sub-menu__title:hover) {
  background-color: #fff;
}
</style>