顶部搜索调整

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

@@ -10,7 +10,11 @@
        <top-menu ref="topMenu"></top-menu>
      </div>
      <span class="top-bar__item" v-if="showSearch">
        <top-search></top-search>
                <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">
@@ -75,7 +79,8 @@
          <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 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>
@@ -89,16 +94,16 @@
</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: {
@@ -114,6 +119,7 @@
  name: "top",
  data() {
    return {
            searchShow: false,
      userBox: false,
      userForm: {
        deptId: '',
@@ -161,13 +167,13 @@
          },
        ]
      }
    };
        }
  },
  filters: {},
  created() {
  },
  mounted() {
    listenfullscreen(this.setScreen);
        listenfullscreen(this.setScreen)
  },
  computed: {
    ...mapState({
@@ -193,30 +199,30 @@
  },
  methods: {
    handleScreen() {
      fullscreenToggel();
            fullscreenToggel()
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
            this.$store.commit("SET_COLLAPSE")
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
            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;
            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: "/" });
                this.userBox = false
                this.$router.push({ path: "/" })
      })
      done();
            done()
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
@@ -225,17 +231,31 @@
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({ path: "/login" });
        });
      });
                    resetRouter()
                    this.$router.push({ path: "/login" })
                })
            })
    }
  }
};
}
</script>

<style lang="scss" scoped>
.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,21 +10,28 @@
    line-height: $height;
    box-sizing: border-box;
    white-space: nowrap;

    .el-menu-item{
        i,span{

        i,
        span {
            font-size: 13px;
        }
    }

    .el-menu--horizontal>.el-menu-item {
      height: $height;
      line-height: $height;
    }
}

.avue-breadcrumb {
    height: 100%;

    i{
        font-size: 30px !important;
    }

    &--active {
        transform:rotate(90deg);
    }
@@ -31,6 +39,7 @@

.top-menu {
    box-sizing: border-box;

    .el-menu-item {
        padding: 0 10px;
        border:none !important;
@@ -40,9 +49,10 @@
.top-search {
    line-height: $height;
    position: absolute !important;
    left: 20px;
    left: 40px;
    top:0;
    width: 400px !important;

    .el-input__inner {
        font-size: 13px;
        border: none;
@@ -66,6 +76,7 @@
    height: $height;
    position: absolute;
    top: 0;

    i{
        line-height: $height;
    }
@@ -87,9 +98,11 @@
    height: $height;
    margin:0 10px;
    font-size: 16px;

    &--show {
        display: inline-block !important;
    }

    .el-badge__content.is-fixed{
        top:12px;
        right: 5px;