| | |
| | | <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 |
| | | 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"> |
| | | <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" v-if="showSearch"> |
| | | <top-search></top-search> |
| | | </span> |
| | | </div> |
| | | <div class="top-bar__right"> |
| | | <el-tooltip v-if="showColor" |
| | | effect="dark" |
| | | :content="$t('navbar.color')" |
| | | placement="bottom"> |
| | | <el-tooltip |
| | | v-if="showColor" |
| | | effect="dark" |
| | | :content="$t('navbar.color')" |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-color></top-color> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showDebug" |
| | | effect="dark" |
| | | :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')" |
| | | placement="bottom"> |
| | | <el-tooltip |
| | | v-if="showDebug" |
| | | effect="dark" |
| | | :content="logsFlag ? $t('navbar.bug') : logsLen + $t('navbar.bugs')" |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-logs></top-logs> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showLock" |
| | | effect="dark" |
| | | :content="$t('navbar.lock')" |
| | | placement="bottom"> |
| | | <el-tooltip |
| | | v-if="showLock" |
| | | effect="dark" |
| | | :content="$t('navbar.lock')" |
| | | placement="bottom" |
| | | > |
| | | <div class="top-bar__item"> |
| | | <top-lock></top-lock> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip v-if="showTheme" |
| | | effect="dark" |
| | | :content="$t('navbar.theme')" |
| | | placement="bottom"> |
| | | <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"> |
| | | <!-- <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"> |
| | | </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"> |
| | | <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> |
| | | <i |
| | | :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'" |
| | | @click="handleScreen" |
| | | ></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <img class="top-bar__img" |
| | | :src="userInfo.avatar"> |
| | | <img class="top-bar__img" :src="userInfo.avatar" /> |
| | | <el-dropdown> |
| | | <span class="el-dropdown-link"> |
| | | {{userInfo.userName}} |
| | | {{ 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> |
| | | <router-link to="/">{{ $t("navbar.dashboard") }}</router-link> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item> |
| | | <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link> |
| | | <router-link to="/info/index">{{ |
| | | $t("navbar.userinfo") |
| | | }}</router-link> |
| | | </el-dropdown-item> |
| | | <el-dropdown-item @click.native="logout" |
| | | divided>{{$t('navbar.logOut')}} |
| | | <el-dropdown-item @click.native="logout" divided |
| | | >{{ $t("navbar.logOut") }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | |
| | | </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 topNotice from './top-notice' |
| | | import topLang from "./top-lang"; |
| | | 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 topNotice from "./top-notice"; |
| | | import topLang from "./top-lang"; |
| | | |
| | | export default { |
| | | components: { |
| | | topLock, |
| | | topMenu, |
| | | topSearch, |
| | | topTheme, |
| | | topLogs, |
| | | topColor, |
| | | topNotice, |
| | | topLang |
| | | export default { |
| | | components: { |
| | | topLock, |
| | | topMenu, |
| | | topSearch, |
| | | topTheme, |
| | | topLogs, |
| | | topColor, |
| | | topNotice, |
| | | topLang, |
| | | }, |
| | | name: "top", |
| | | data() { |
| | | return {}; |
| | | }, |
| | | 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(); |
| | | }, |
| | | name: "top", |
| | | data() { |
| | | return {}; |
| | | setCollapse() { |
| | | this.$store.commit("SET_COLLAPSE"); |
| | | }, |
| | | filters: {}, |
| | | created() { |
| | | setScreen() { |
| | | this.$store.commit("SET_FULLSCREN"); |
| | | }, |
| | | 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(); |
| | | }, |
| | | setCollapse() { |
| | | this.$store.commit("SET_COLLAPSE"); |
| | | }, |
| | | setScreen() { |
| | | this.$store.commit("SET_FULLSCREN"); |
| | | }, |
| | | 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"}); |
| | | }); |
| | | 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> |
| | |
| | | // 统计图持证表格按钮过长 |
| | | width: 320px !important; |
| | | } |
| | | |
| | | // .securityGuard .avue-upload__avatar { |
| | | // height: 221px !important; |
| | | // } |
| | |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: "所属单位", |
| | | prop: "tenantId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/tenant/select", |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | viewDisplay: website.tenantMode, |
| | | span: 24, |
| | | props: { |
| | | label: "tenantName", |
| | | value: "tenantId", |
| | | }, |
| | | hide: !website.tenantMode, |
| | | search: website.tenantMode, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: "请输入所属保安单位", |
| | | trigger: "click", |
| | | }, |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属单位", |
| | | // prop: "tenantId", |
| | | // type: "tree", |
| | | // dicUrl: "/api/blade-system/tenant/select", |
| | | // addDisplay: false, |
| | | // editDisplay: false, |
| | | // viewDisplay: website.tenantMode, |
| | | // span: 24, |
| | | // props: { |
| | | // label: "tenantName", |
| | | // value: "tenantId", |
| | | // }, |
| | | // hide: !website.tenantMode, |
| | | // search: website.tenantMode, |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属保安单位", |
| | | // trigger: "click", |
| | | // }, |
| | | // ], |
| | | // }, |
| | | { |
| | | label: "角色别名", |
| | | prop: "roleAlias", |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | ], |
| | | }, |
| | | // { |
| | | // label: "所属地区", |
| | | // label: "所属辖区", |
| | | // hide: true, |
| | | // prop: "region", |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请输入所属地区", |
| | | // message: "请输入所属辖区", |
| | | // trigger: "blur", |
| | | // }, |
| | | // ], |
| | |
| | | total: 0, |
| | | }, |
| | | query2: {}, |
| | | data1: [], |
| | | data2: [], |
| | | option2: { |
| | | card: true, |
| | |
| | | this.$prompt("离职原因", "提示", { |
| | | confirmButtonText: "确定离职", |
| | | cancelButtonText: "取消", |
| | | inputErrorMessage: "邮箱格式不正确", |
| | | inputErrorMessage: "", |
| | | }).then(({ value }) => { |
| | | console.log(value); |
| | | row.reasonForLeav = value; |
| | |
| | | labelWidth: 160, |
| | | prop: "znum", |
| | | width: 69, |
| | | editDisplay: false, |
| | | // search: true, |
| | | searchSpan: 4, |
| | | searchLabelWidth: 100 |
| | |
| | | prop: "pnum", |
| | | width: 69, |
| | | // search: true, |
| | | editDisplay: false, |
| | | searchSpan: 4, |
| | | searchLabelWidth: 100 |
| | | }, |
| | |
| | | labelWidth: 160, |
| | | prop: "cnum", |
| | | width: 69, |
| | | |
| | | editDisplay: false, |
| | | // search: true, |
| | | searchSpan: 4, |
| | | searchLabelWidth: 100 |
| | |
| | | overHidden: true, |
| | | type: "date", |
| | | format: "yyyy-MM-dd", |
| | | valueFormat: "timestamp", |
| | | valueFormat: "yyyy-MM-dd", |
| | | |
| | | }, |
| | | { |
| | |
| | | }, |
| | | { |
| | | label: "所属辖区", |
| | | prop: "region", |
| | | // prop: "region", |
| | | labelWidth: 160, |
| | | // width: 110, |
| | | // search: true, |
| | | label: "所属辖区", |
| | | prop: "jurisdiction", |
| | | // type: "tree", |
| | | // disabled: true, |
| | | type: "tree", |
| | | dicUrl: "/api/jurisdiction/lazy-trees", |
| | | props: { |
| | | label: "title", |
| | | value: "id" |
| | | }, |
| | | // labelWidth: w, |
| | | // span: s, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择所属辖区", |
| | | trigger: "click", |
| | | },], |
| | | overHidden: true |
| | | }, |
| | | { |
| | |
| | | }] |
| | | }, |
| | | { |
| | | label: "辖区", |
| | | label: "所属辖区", |
| | | prop: "jurisdiction", |
| | | // type: "tree", |
| | | // disabled: true, |
| | | type: "tree", |
| | | dicUrl: "/api//jurisdiction/lazy-trees", |
| | | dicUrl: "/api/jurisdiction/lazy-trees", |
| | | props: { |
| | | label: "title", |
| | | value: "id" |
| | |
| | | }] |
| | | }, |
| | | { |
| | | label: "所属地区", |
| | | label: "所属辖区", |
| | | prop: "region", |
| | | labelWidth: w, |
| | | span: s, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入所属地区", |
| | | message: "请输入所属辖区", |
| | | trigger: "blur" |
| | | }] |
| | | }, |