顶部搜索调整

shuishen

2023-12-19 26d57c297a912a19e6116bc5e8b333634f3aecbc

顶部搜索调整

 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: "关闭所有",
  },
};

 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>

 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;
}
}