From 26d57c297a912a19e6116bc5e8b333634f3aecbc Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 19 Dec 2023 15:41:51 +0800
Subject: [PATCH] 顶部搜索调整
---
src/lang/zh.js | 196 ++++++++--------
src/styles/top.scss | 43 ++-
src/page/index/top/index.vue | 408 +++++++++++++++++++-----------------
3 files changed, 340 insertions(+), 307 deletions(-)
diff --git a/src/lang/zh.js b/src/lang/zh.js
index c3090dc..2c7994b 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,121 +1,121 @@
export default {
- title: '基层智治综合协同平台',
- logoutTip: '退出系统, 是否继续?',
- submitText: '确定',
- cancelText: '取消',
- search: '请输入搜索内容',
- menuTip: '没有发现菜单',
+ title: "基层智治综合协同平台",
+ logoutTip: "退出系统, 是否继续?",
+ submitText: "确定",
+ cancelText: "取消",
+ search: "请输入模块名称",
+ menuTip: "没有发现菜单",
common: {
- condition: '条件',
- display: '显示',
- hide: '隐藏'
+ condition: "条件",
+ display: "显示",
+ hide: "隐藏",
},
tip: {
- select: '请选择',
- input: '请输入'
+ select: "请选择",
+ input: "请输入",
},
upload: {
- upload: '点击上传',
- tip: '将文件拖到此处，或'
+ upload: "点击上传",
+ tip: "将文件拖到此处，或",
},
date: {
- start: '开始日期',
- end: '结束日期',
- t: '今日',
- y: '昨日',
- n: '近7天',
- a: '全部'
+ start: "开始日期",
+ end: "结束日期",
+ t: "今日",
+ y: "昨日",
+ n: "近7天",
+ a: "全部",
},
form: {
- printBtn: '打 印',
- mockBtn: '模 拟',
- submitBtn: '提 交',
- emptyBtn: '清 空'
+ printBtn: "打 印",
+ mockBtn: "模 拟",
+ submitBtn: "提 交",
+ emptyBtn: "清 空",
},
crud: {
filter: {
- addBtn: '新增条件',
- clearBtn: '清空数据',
- resetBtn: '清空条件',
- cancelBtn: '取 消',
- submitBtn: '确 定'
+ addBtn: "新增条件",
+ clearBtn: "清空数据",
+ resetBtn: "清空条件",
+ cancelBtn: "取 消",
+ submitBtn: "确 定",
},
column: {
- name: '列名',
- hide: '隐藏',
- fixed: '冻结',
- filters: '过滤',
- sortable: '排序',
- index: '顺序',
- width: '宽度'
+ name: "列名",
+ hide: "隐藏",
+ fixed: "冻结",
+ filters: "过滤",
+ sortable: "排序",
+ index: "顺序",
+ width: "宽度",
},
- tipStartTitle: '当前表格已选择',
- tipEndTitle: '项',
- editTitle: '编 辑',
- copyTitle: '复 制',
- addTitle: '新 增',
- viewTitle: '查 看',
- filterTitle: '过滤条件',
- showTitle: '列显隐',
- menu: '操作',
- addBtn: '新 增',
- show: '显 示',
- hide: '隐 藏',
- open: '展 开',
- shrink: '收 缩',
- printBtn: '打 印',
- excelBtn: '导 出',
- updateBtn: '修 改',
- cancelBtn: '取 消',
- searchBtn: '搜 索',
- emptyBtn: '清 空',
- menuBtn: '功 能',
- saveBtn: '保 存',
- viewBtn: '查 看',
- editBtn: '编 辑',
- copyBtn: '复 制',
- delBtn: '删 除'
+ tipStartTitle: "当前表格已选择",
+ tipEndTitle: "项",
+ editTitle: "编 辑",
+ copyTitle: "复 制",
+ addTitle: "新 增",
+ viewTitle: "查 看",
+ filterTitle: "过滤条件",
+ showTitle: "列显隐",
+ menu: "操作",
+ addBtn: "新 增",
+ show: "显 示",
+ hide: "隐 藏",
+ open: "展 开",
+ shrink: "收 缩",
+ printBtn: "打 印",
+ excelBtn: "导 出",
+ updateBtn: "修 改",
+ cancelBtn: "取 消",
+ searchBtn: "搜 索",
+ emptyBtn: "清 空",
+ menuBtn: "功 能",
+ saveBtn: "保 存",
+ viewBtn: "查 看",
+ editBtn: "编 辑",
+ copyBtn: "复 制",
+ delBtn: "删 除",
},
login: {
- title: '登录 ',
- info: '基层智治综合协同平台',
- tenantId: '请输入租户ID',
- username: '请输入账号',
- password: '请输入密码',
- wechat: '微信',
- qq: 'QQ',
- github: 'github',
- gitee: '码云',
- phone: '请输入手机号',
- code: '请输入验证码',
- submit: '登录',
- userLogin: '账号密码登录',
- phoneLogin: '手机号登录',
- thirdLogin: '第三方系统登录',
- ssoLogin: '单点系统登录',
- msgText: '发送验证码',
- msgSuccess: '秒后重发',
+ title: "登录 ",
+ info: "基层智治综合协同平台",
+ tenantId: "请输入租户ID",
+ username: "请输入账号",
+ password: "请输入密码",
+ wechat: "微信",
+ qq: "QQ",
+ github: "github",
+ gitee: "码云",
+ phone: "请输入手机号",
+ code: "请输入验证码",
+ submit: "登录",
+ userLogin: "账号密码登录",
+ phoneLogin: "手机号登录",
+ thirdLogin: "第三方系统登录",
+ ssoLogin: "单点系统登录",
+ msgText: "发送验证码",
+ msgSuccess: "秒后重发",
},
navbar: {
- logOut: '退出登录',
- userinfo: '个人信息',
- switchDept : '部门切换',
- dashboard: '首页',
- lock: '锁屏',
- bug: '没有错误日志',
- bugs: '条错误日志',
- screenfullF: '退出全屏',
- screenfull: '全屏',
- language: '中英文',
- notice: '消息通知',
- theme: '主题',
- color: '换色'
+ logOut: "退出登录",
+ userinfo: "个人信息",
+ switchDept: "部门切换",
+ dashboard: "首页",
+ lock: "锁屏",
+ bug: "没有错误日志",
+ bugs: "条错误日志",
+ screenfullF: "退出全屏",
+ screenfull: "全屏",
+ language: "中英文",
+ notice: "消息通知",
+ theme: "主题",
+ color: "换色",
},
tagsView: {
- search: '搜索',
- menu: '更多',
- clearCache: '清除缓存',
- closeOthers: '关闭其它',
- closeAll: '关闭所有'
- }
+ search: "搜索",
+ menu: "更多",
+ clearCache: "清除缓存",
+ closeOthers: "关闭其它",
+ closeAll: "关闭所有",
+ },
};
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 2108c62..817bcb2 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -1,20 +1,24 @@
<template>
- <div class="avue-top">
- <div class="top-bar__left">
- <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" v-if="showCollapse">
- <i class="icon-navicon" @click="setCollapse"></i>
- </div>
- </div>
- <div class="top-bar__title">
- <div class="top-bar__item top-bar__item--show" v-if="showMenu">
- <top-menu ref="topMenu"></top-menu>
- </div>
- <span class="top-bar__item" v-if="showSearch">
- <top-search></top-search>
- </span>
- </div>
- <div class="top-bar__right">
- <!-- <el-tooltip v-if="showColor"
+ <div class="avue-top">
+ <div class="top-bar__left">
+ <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" v-if="showCollapse">
+ <i class="icon-navicon" @click="setCollapse"></i>
+ </div>
+ </div>
+ <div class="top-bar__title">
+ <div class="top-bar__item top-bar__item--show" v-if="showMenu">
+ <top-menu ref="topMenu"></top-menu>
+ </div>
+ <span class="top-bar__item" v-if="showSearch">
+ <span class="top-bar-item-search">
+ <i class="el-icon-search" @click="searchShow = !searchShow"></i>
+ </span>
+
+ <top-search v-show="searchShow"></top-search>
+ </span>
+ </div>
+ <div class="top-bar__right">
+ <!-- <el-tooltip v-if="showColor"
effect="dark"
:content="$t('navbar.color')"
placement="bottom">
@@ -22,7 +26,7 @@
<top-color></top-color>
</div>
</el-tooltip> -->
- <!-- <el-tooltip v-if="showDebug"
+ <!-- <el-tooltip v-if="showDebug"
effect="dark"
:content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
placement="bottom">
@@ -30,7 +34,7 @@
<top-logs></top-logs>
</div>
</el-tooltip> -->
- <!-- <el-tooltip v-if="showLock"
+ <!-- <el-tooltip v-if="showLock"
effect="dark"
:content="$t('navbar.lock')"
placement="bottom">
@@ -38,204 +42,220 @@
<top-lock></top-lock>
</div>
</el-tooltip> -->
- <el-tooltip v-if="showTheme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
- <div class="top-bar__item top-bar__item--show">
- <top-theme></top-theme>
- </div>
- </el-tooltip>
- <el-tooltip effect="dark" :content="$t('navbar.notice')" placement="bottom" >
- <div class="top-bar__item top-bar__item--show">
- <top-notice></top-notice>
- </div>
-
- </el-tooltip>
- <!-- <el-tooltip effect="dark"
+ <el-tooltip v-if="showTheme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
+ <div class="top-bar__item top-bar__item--show">
+ <top-theme></top-theme>
+ </div>
+ </el-tooltip>
+ <el-tooltip effect="dark" :content="$t('navbar.notice')" placement="bottom">
+ <div class="top-bar__item top-bar__item--show">
+ <top-notice></top-notice>
+ </div>
+
+ </el-tooltip>
+ <!-- <el-tooltip effect="dark"
:content="$t('navbar.language')"
placement="bottom">
<div class="top-bar__item top-bar__item--show">
<top-lang></top-lang>
</div>
</el-tooltip> -->
- <el-tooltip v-if="showFullScren" effect="dark"
- :content="isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')" placement="bottom">
- <div class="top-bar__item">
- <i :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'" @click="handleScreen"></i>
+ <el-tooltip v-if="showFullScren" effect="dark"
+ :content="isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')" placement="bottom">
+ <div class="top-bar__item">
+ <i :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'" @click="handleScreen"></i>
+ </div>
+ </el-tooltip>
+ <img class="top-bar__img" :src="userInfo.avatar">
+ <el-dropdown>
+ <span class="el-dropdown-link">
+ {{ userInfo.userName }}
+ <i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item>
+ <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
+ </el-dropdown-item>
+ <el-dropdown-item>
+ <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
+ </el-dropdown-item>
+ <el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept">{{ $t('navbar.switchDept')
+ }}
+ </el-dropdown-item>
+ <el-dropdown-item @click.native="logout" divided>{{ $t('navbar.logOut') }}
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ <el-dialog title="用户信息选择" append-to-body :visible.sync="userBox" width="350px">
+ <avue-form ref="form" :option="userOption" v-model="userForm" @submit="submitSwitch" />
+ </el-dialog>
</div>
- </el-tooltip>
- <img class="top-bar__img" :src="userInfo.avatar">
- <el-dropdown>
- <span class="el-dropdown-link">
- {{ userInfo.userName }}
- <i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item>
- <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
- </el-dropdown-item>
- <el-dropdown-item>
- <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
- </el-dropdown-item>
- <el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept">{{ $t('navbar.switchDept') }}
- </el-dropdown-item>
- <el-dropdown-item @click.native="logout" divided>{{ $t('navbar.logOut') }}
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <el-dialog title="用户信息选择" append-to-body :visible.sync="userBox" width="350px">
- <avue-form ref="form" :option="userOption" v-model="userForm" @submit="submitSwitch" />
- </el-dialog>
</div>
- </div>
</template>
<script>
import { resetRouter } from '@/router/router'
-import { mapGetters, mapState } from "vuex";
-import { fullscreenToggel, listenfullscreen } from "@/util/util";
-import topLock from "./top-lock";
-import topMenu from "./top-menu";
-import topSearch from "./top-search";
-import topTheme from "./top-theme";
-import topLogs from "./top-logs";
-import topColor from "./top-color";
+import { mapGetters, mapState } from "vuex"
+import { fullscreenToggel, listenfullscreen } from "@/util/util"
+import topLock from "./top-lock"
+import topMenu from "./top-menu"
+import topSearch from "./top-search"
+import topTheme from "./top-theme"
+import topLogs from "./top-logs"
+import topColor from "./top-color"
import topNotice from './top-notice'
-import topLang from "./top-lang";
+import topLang from "./top-lang"
export default {
- components: {
- topLock,
- topMenu,
- topSearch,
- topTheme,
- topLogs,
- topColor,
- topNotice,
- topLang
- },
- name: "top",
- data() {
- return {
- userBox: false,
- userForm: {
- deptId: '',
- roleId: ''
- },
- userOption: {
- labelWidth: 70,
- submitBtn: true,
- emptyBtn: false,
- submitText: '切换',
- column: [
- {
- label: '部门',
- prop: 'deptId',
- type: 'select',
- props: {
- label: 'deptName',
- value: 'id'
+ components: {
+ topLock,
+ topMenu,
+ topSearch,
+ topTheme,
+ topLogs,
+ topColor,
+ topNotice,
+ topLang
+ },
+ name: "top",
+ data () {
+ return {
+ searchShow: false,
+ userBox: false,
+ userForm: {
+ deptId: '',
+ roleId: ''
},
- dicUrl: '/api/blade-system/dept/select',
- span: 24,
- display: false,
- rules: [{
- required: true,
- message: "请选择部门",
- trigger: "blur"
- }],
- },
- {
- label: '角色',
- prop: 'roleId',
- type: 'select',
- props: {
- label: 'roleName',
- value: 'id'
- },
- dicUrl: '/api/blade-system/role/select',
- span: 24,
- display: false,
- rules: [{
- required: true,
- message: "请选择角色",
- trigger: "blur"
- }],
- },
- ]
- }
- };
- },
- filters: {},
- created() {
- },
- mounted() {
- listenfullscreen(this.setScreen);
- },
- computed: {
- ...mapState({
- showDebug: state => state.common.showDebug,
- showTheme: state => state.common.showTheme,
- showLock: state => state.common.showLock,
- showFullScren: state => state.common.showFullScren,
- showCollapse: state => state.common.showCollapse,
- showSearch: state => state.common.showSearch,
- showMenu: state => state.common.showMenu,
- showColor: state => state.common.showColor
- }),
- ...mapGetters([
- "userInfo",
- "isFullScren",
- "tagWel",
- "tagList",
- "isCollapse",
- "tag",
- "logsLen",
- "logsFlag"
- ])
- },
- methods: {
- handleScreen() {
- fullscreenToggel();
+ userOption: {
+ labelWidth: 70,
+ submitBtn: true,
+ emptyBtn: false,
+ submitText: '切换',
+ column: [
+ {
+ label: '部门',
+ prop: 'deptId',
+ type: 'select',
+ props: {
+ label: 'deptName',
+ value: 'id'
+ },
+ dicUrl: '/api/blade-system/dept/select',
+ span: 24,
+ display: false,
+ rules: [{
+ required: true,
+ message: "请选择部门",
+ trigger: "blur"
+ }],
+ },
+ {
+ label: '角色',
+ prop: 'roleId',
+ type: 'select',
+ props: {
+ label: 'roleName',
+ value: 'id'
+ },
+ dicUrl: '/api/blade-system/role/select',
+ span: 24,
+ display: false,
+ rules: [{
+ required: true,
+ message: "请选择角色",
+ trigger: "blur"
+ }],
+ },
+ ]
+ }
+ }
},
- setCollapse() {
- this.$store.commit("SET_COLLAPSE");
+ filters: {},
+ created () {
},
- setScreen() {
- this.$store.commit("SET_FULLSCREN");
+ mounted () {
+ listenfullscreen(this.setScreen)
},
- switchDept() {
- const userId = this.userInfo.user_id;
- const deptColumn = this.findObject(this.userOption.column, "deptId");
- deptColumn.dicUrl = `/api/blade-system/dept/select?userId=${userId}`;
- deptColumn.display = true;
- const roleColumn = this.findObject(this.userOption.column, "roleId");
- roleColumn.dicUrl = `/api/blade-system/role/select?userId=${userId}`;
- roleColumn.display = true;
- this.userBox = true;
+ computed: {
+ ...mapState({
+ showDebug: state => state.common.showDebug,
+ showTheme: state => state.common.showTheme,
+ showLock: state => state.common.showLock,
+ showFullScren: state => state.common.showFullScren,
+ showCollapse: state => state.common.showCollapse,
+ showSearch: state => state.common.showSearch,
+ showMenu: state => state.common.showMenu,
+ showColor: state => state.common.showColor
+ }),
+ ...mapGetters([
+ "userInfo",
+ "isFullScren",
+ "tagWel",
+ "tagList",
+ "isCollapse",
+ "tag",
+ "logsLen",
+ "logsFlag"
+ ])
},
- submitSwitch(form, done) {
- this.$store.dispatch("refreshToken", form).then(() => {
- this.userBox = false;
- this.$router.push({ path: "/" });
- })
- done();
- },
- logout() {
- this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
- confirmButtonText: this.$t("submitText"),
- cancelButtonText: this.$t("cancelText"),
- type: "warning"
- }).then(() => {
- this.$store.dispatch("LogOut").then(() => {
- resetRouter();
- this.$router.push({ path: "/login" });
- });
- });
+ methods: {
+ handleScreen () {
+ fullscreenToggel()
+ },
+ setCollapse () {
+ this.$store.commit("SET_COLLAPSE")
+ },
+ setScreen () {
+ this.$store.commit("SET_FULLSCREN")
+ },
+ switchDept () {
+ const userId = this.userInfo.user_id
+ const deptColumn = this.findObject(this.userOption.column, "deptId")
+ deptColumn.dicUrl = `/api/blade-system/dept/select?userId=${userId}`
+ deptColumn.display = true
+ const roleColumn = this.findObject(this.userOption.column, "roleId")
+ roleColumn.dicUrl = `/api/blade-system/role/select?userId=${userId}`
+ roleColumn.display = true
+ this.userBox = true
+ },
+ submitSwitch (form, done) {
+ this.$store.dispatch("refreshToken", form).then(() => {
+ this.userBox = false
+ this.$router.push({ path: "/" })
+ })
+ done()
+ },
+ logout () {
+ this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
+ confirmButtonText: this.$t("submitText"),
+ cancelButtonText: this.$t("cancelText"),
+ type: "warning"
+ }).then(() => {
+ this.$store.dispatch("LogOut").then(() => {
+ resetRouter()
+ this.$router.push({ path: "/login" })
+ })
+ })
+ }
}
- }
-};
+}
</script>
<style lang="scss" scoped>
-.noticeBtn{
- cursor:pointer;
+.noticeBtn {
+ cursor: pointer;
+}
+
+.top-bar-item-search {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 20px;
+ top: 0;
+ width: 40px;
+
+ i {
+ cursor: pointer;
+ }
}
</style>
diff --git a/src/styles/top.scss b/src/styles/top.scss
index a3f9b81..5b8bc19 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -1,4 +1,5 @@
$height:64px;
+
.avue-top {
padding: 0 20px;
position: relative;
@@ -9,40 +10,49 @@
line-height: $height;
box-sizing: border-box;
white-space: nowrap;
- .el-menu-item{
- i,span{
+
+ .el-menu-item {
+
+ i,
+ span {
font-size: 13px;
}
}
+
.el-menu--horizontal>.el-menu-item {
- height: $height;
- line-height: $height;
+ height: $height;
+ line-height: $height;
}
}
+
.avue-breadcrumb {
height: 100%;
- i{
+
+ i {
font-size: 30px !important;
}
+
&--active {
- transform:rotate(90deg);
+ transform: rotate(90deg);
}
}
.top-menu {
box-sizing: border-box;
+
.el-menu-item {
padding: 0 10px;
- border:none !important;
+ border: none !important;
}
}
.top-search {
line-height: $height;
position: absolute !important;
- left: 20px;
- top:0;
+ left: 40px;
+ top: 0;
width: 400px !important;
+
.el-input__inner {
font-size: 13px;
border: none;
@@ -66,7 +76,8 @@
height: $height;
position: absolute;
top: 0;
- i{
+
+ i {
line-height: $height;
}
}
@@ -85,24 +96,26 @@
position: relative;
display: inline-block;
height: $height;
- margin:0 10px;
+ margin: 0 10px;
font-size: 16px;
+
&--show {
display: inline-block !important;
}
- .el-badge__content.is-fixed{
- top:12px;
+
+ .el-badge__content.is-fixed {
+ top: 12px;
right: 5px;
}
}
.top-bar__title {
height: 100%;
- padding:0 40px;
+ padding: 0 40px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: inherit;
font-weight: 400;
-}
+}
\ No newline at end of file
--
Gitblit v1.9.3