From acd739888b1eded41d2a9d5eb222e2b50a4c7dc9 Mon Sep 17 00:00:00 2001 From: ccc Date: Tue, 15 Mar 2022 11:56:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=90=8E=E5=8F=B0=E7=AE=A1?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.vue | 106 ++++++++++++++ src/components/MenuTree.vue | 44 ++++++ src/components/scrollbar/index.js | 8 ++ src/components/scrollbar/src/bar.js | 92 +++++++++++++ src/components/scrollbar/src/main.js | 130 ++++++++++++++++++ src/components/scrollbar/src/util.js | 34 +++++ src/plugins/element.js | 55 ++++++++ src/router/index.js | 24 ++++ src/utils/request.js | 9 +- src/views/DataManagement/ReportExport.vue | 26 ++++ .../FacilityManagement/FacilityLists.vue | 26 ++++ .../FacilityManagement/FacilityOperation.vue | 26 ++++ src/views/Home.vue | 118 ++++++++++++++++ src/views/Login.vue | 3 +- src/views/SystemSetting/RoleManagement.vue | 26 ++++ src/views/SystemSetting/UserManagement.vue | 25 ++++ 16 files changed, 746 insertions(+), 6 deletions(-) create mode 100644 src/components/Header.vue create mode 100644 src/components/MenuTree.vue create mode 100644 src/components/scrollbar/index.js create mode 100644 src/components/scrollbar/src/bar.js create mode 100644 src/components/scrollbar/src/main.js create mode 100644 src/components/scrollbar/src/util.js create mode 100644 src/views/DataManagement/ReportExport.vue create mode 100644 src/views/FacilityManagement/FacilityLists.vue create mode 100644 src/views/FacilityManagement/FacilityOperation.vue create mode 100644 src/views/Home.vue create mode 100644 src/views/SystemSetting/RoleManagement.vue create mode 100644 src/views/SystemSetting/UserManagement.vue diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..0a3871a --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/src/components/MenuTree.vue b/src/components/MenuTree.vue new file mode 100644 index 0000000..ca1145e --- /dev/null +++ b/src/components/MenuTree.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/components/scrollbar/index.js b/src/components/scrollbar/index.js new file mode 100644 index 0000000..177c0a0 --- /dev/null +++ b/src/components/scrollbar/index.js @@ -0,0 +1,8 @@ +import Scrollbar from './src/main' + +/* istanbul ignore next */ +Scrollbar.install = function(Vue) { + Vue.component(Scrollbar.name, Scrollbar) +} + +export default Scrollbar diff --git a/src/components/scrollbar/src/bar.js b/src/components/scrollbar/src/bar.js new file mode 100644 index 0000000..f6f2c9c --- /dev/null +++ b/src/components/scrollbar/src/bar.js @@ -0,0 +1,92 @@ +import { on, off } from 'element-ui/src/utils/dom' +import { renderThumbStyle, BAR_MAP } from './util' + +/* istanbul ignore next */ +export default { + name: 'Bar', + + props: { + vertical: Boolean, + size: String, + move: Number + }, + + computed: { + bar() { + return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'] + }, + + wrap() { + return this.$parent.wrap + } + }, + + render(h) { + const { size, move, bar } = this + + return ( +
+
+
+
+ ) + }, + + methods: { + clickThumbHandler(e) { + // prevent click event of right button + if (e.ctrlKey || e.button === 2) { + return + } + this.startDrag(e) + this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction])) + }, + + clickTrackHandler(e) { + const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) + const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2) + const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]) + + this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100) + }, + + startDrag(e) { + e.stopImmediatePropagation() + this.cursorDown = true + + on(document, 'mousemove', this.mouseMoveDocumentHandler) + on(document, 'mouseup', this.mouseUpDocumentHandler) + document.onselectstart = () => false + }, + + mouseMoveDocumentHandler(e) { + if (this.cursorDown === false) return + const prevPage = this[this.bar.axis] + + if (!prevPage) return + + const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1) + const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage) + const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]) + + this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100) + }, + + mouseUpDocumentHandler(e) { + this.cursorDown = false + this[this.bar.axis] = 0 + off(document, 'mousemove', this.mouseMoveDocumentHandler) + document.onselectstart = null + } + }, + + destroyed() { + off(document, 'mouseup', this.mouseUpDocumentHandler) + } +} diff --git a/src/components/scrollbar/src/main.js b/src/components/scrollbar/src/main.js new file mode 100644 index 0000000..018574d --- /dev/null +++ b/src/components/scrollbar/src/main.js @@ -0,0 +1,130 @@ +// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js + +import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event' +import scrollbarWidth from 'element-ui/src/utils/scrollbar-width' +import { toObject } from 'element-ui/src/utils/util' +import Bar from './bar' + +/* istanbul ignore next */ +export default { + name: 'ElScrollbar', + + components: { Bar }, + + props: { + native: Boolean, + wrapStyle: {}, + wrapClass: {}, + viewClass: {}, + viewStyle: {}, + noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能 + tag: { + type: String, + default: 'div' + } + }, + + data() { + return { + sizeWidth: '0', + sizeHeight: '0', + moveX: 0, + moveY: 0 + } + }, + + computed: { + wrap() { + return this.$refs.wrap + } + }, + + render(h) { + const gutter = scrollbarWidth() + let style = this.wrapStyle + + if (gutter) { + const gutterWith = `-${gutter}px` + const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};` + + if (Array.isArray(this.wrapStyle)) { + style = toObject(this.wrapStyle) + style.marginRight = style.marginBottom = gutterWith + } else if (typeof this.wrapStyle === 'string') { + style += gutterStyle + } else { + style = gutterStyle + } + } + const view = h(this.tag, { + class: ['el-scrollbar__view', this.viewClass], + style: this.viewStyle, + ref: 'resize' + }, this.$slots.default) + const wrap = ( +
+ { [view] } +
+ ) + let nodes + + if (!this.native) { + nodes = ([ + wrap, + , + + ]) + } else { + nodes = ([ +
+ { [view] } +
+ ]) + } + return h('div', { class: 'el-scrollbar' }, nodes) + }, + + methods: { + handleScroll() { + const wrap = this.wrap + + this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight) + this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth) + }, + + update() { + let heightPercentage, widthPercentage + const wrap = this.wrap + if (!wrap) return + + heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight) + widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth) + + this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '' + this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '' + } + }, + + mounted() { + if (this.native) return + this.$nextTick(this.update) + !this.noresize && addResizeListener(this.$refs.resize, this.update) + }, + + beforeDestroy() { + if (this.native) return + !this.noresize && removeResizeListener(this.$refs.resize, this.update) + } +} diff --git a/src/components/scrollbar/src/util.js b/src/components/scrollbar/src/util.js new file mode 100644 index 0000000..9dfbf38 --- /dev/null +++ b/src/components/scrollbar/src/util.js @@ -0,0 +1,34 @@ +export const BAR_MAP = { + vertical: { + offset: 'offsetHeight', + scroll: 'scrollTop', + scrollSize: 'scrollHeight', + size: 'height', + key: 'vertical', + axis: 'Y', + client: 'clientY', + direction: 'top' + }, + horizontal: { + offset: 'offsetWidth', + scroll: 'scrollLeft', + scrollSize: 'scrollWidth', + size: 'width', + key: 'horizontal', + axis: 'X', + client: 'clientX', + direction: 'left' + } +}; + +export function renderThumbStyle({ move, size, bar }) { + const style = {}; + const translate = `translate${bar.axis}(${ move }%)`; + + style[bar.size] = size; + style.transform = translate; + style.msTransform = translate; + style.webkitTransform = translate; + + return style; +}; diff --git a/src/plugins/element.js b/src/plugins/element.js index 97db1ce..4847ef2 100644 --- a/src/plugins/element.js +++ b/src/plugins/element.js @@ -1,5 +1,6 @@ import Vue from 'vue' import { + Avatar, Pagination, Dialog, Autocomplete, @@ -11,6 +12,7 @@ import { MenuItem, MenuItemGroup, Input, + InputNumber, Radio, RadioGroup, RadioButton, @@ -28,24 +30,48 @@ import { DatePicker, TimeSelect, TimePicker, + Popover, Tooltip, + Breadcrumb, + BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, + Alert, + Slider, Icon, Row, Col, + Upload, + Progress, Spinner, + Badge, Card, + Rate, + Steps, + Step, + Carousel, + CarouselItem, Collapse, CollapseItem, Cascader, + ColorPicker, + Transfer, + Container, + Header, + Aside, + Main, + Footer, Timeline, TimelineItem, + Link, + Divider, + Image, Calendar, + Backtop, PageHeader, CascaderPanel, Loading, @@ -54,6 +80,7 @@ import { Notification } from 'element-ui' +Vue.use(Avatar) Vue.use(Pagination) Vue.use(Dialog) Vue.use(Autocomplete) @@ -65,6 +92,7 @@ Vue.use(Submenu) Vue.use(MenuItem) Vue.use(MenuItemGroup) Vue.use(Input) +Vue.use(InputNumber) Vue.use(Radio) Vue.use(RadioGroup) Vue.use(RadioButton) @@ -82,30 +110,57 @@ Vue.use(TableColumn) Vue.use(DatePicker) Vue.use(TimeSelect) Vue.use(TimePicker) +Vue.use(Popover) Vue.use(Tooltip) +Vue.use(Breadcrumb) +Vue.use(BreadcrumbItem) Vue.use(Form) Vue.use(FormItem) Vue.use(Tabs) Vue.use(TabPane) Vue.use(Tag) Vue.use(Tree) +Vue.use(Alert) +Vue.use(Slider) Vue.use(Icon) Vue.use(Row) Vue.use(Col) +Vue.use(Upload) +Vue.use(Progress) Vue.use(Spinner) +Vue.use(Badge) Vue.use(Card) +Vue.use(Rate) +Vue.use(Steps) +Vue.use(Step) +Vue.use(Carousel) +Vue.use(CarouselItem) Vue.use(Collapse) Vue.use(CollapseItem) Vue.use(Cascader) +Vue.use(ColorPicker) +Vue.use(Transfer) +Vue.use(Container) +Vue.use(Header) +Vue.use(Aside) +Vue.use(Main) +Vue.use(Footer) Vue.use(Timeline) Vue.use(TimelineItem) +Vue.use(Link) +Vue.use(Divider) +Vue.use(Image) Vue.use(Calendar) +Vue.use(Backtop) Vue.use(PageHeader) Vue.use(CascaderPanel) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service +Vue.prototype.$msgbox = MessageBox +Vue.prototype.$alert = MessageBox.alert Vue.prototype.$confirm = MessageBox.confirm +Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$notify = Notification Vue.prototype.$message = Message diff --git a/src/router/index.js b/src/router/index.js index 2e82335..ed890d3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -14,6 +14,30 @@ const routes = [ { path: '/', component: () => import('../views/Login') + }, + { + path: '/home', + component: () => import('../views/Home') + }, + { + path: '/reportExport', + component: () => import('../views/DataManagement/ReportExport') + }, + { + path: '/roleManagement', + component: () => import('../views/SystemSetting/RoleManagement') + }, + { + path: '/userManagement', + component: () => import('../views/SystemSetting/UserManagement') + }, + { + path: '/facilityLists', + component: () => import('../views/FacilityManagement/FacilityLists') + }, + { + path: '/facilityOperation', + component: () => import('../views/FacilityManagement/FacilityOperation') } ] const router = new VueRouter({ diff --git a/src/utils/request.js b/src/utils/request.js index 9b7f68d..9e2ef6c 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -28,12 +28,11 @@ service.interceptors.request.use(config => { // 3.响应拦截器 service.interceptors.response.use(success => { + console.log(success.headers, '响应头') // 业务逻辑错误 if (success.status && success.status === 200) { if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) { - Notification.error({ - title: success.data.message - }) + Notification.error(success.data.message) return } // 操作成功 @@ -51,9 +50,9 @@ service.interceptors.response.use(success => { } else if (error.response.code === 403) { Message.error({ message: '您的权限不足' }) } else if (error.response.code === 401) { - Message.error({ message: '尚未登录，请登录' }) + Message.error({ message: '尚未登录，请登录！' }) // 跳至登录页面 - router.replace('/').then(() => {}) + router.replace('/login').then(() => {}) } else if (error.response.data.message) { Message.error({ message: error.response.data.message }) } else { diff --git a/src/views/DataManagement/ReportExport.vue b/src/views/DataManagement/ReportExport.vue new file mode 100644 index 0000000..551fdfa --- /dev/null +++ b/src/views/DataManagement/ReportExport.vue @@ -0,0 +1,26 @@ + + + + + + diff --git a/src/views/FacilityManagement/FacilityLists.vue b/src/views/FacilityManagement/FacilityLists.vue new file mode 100644 index 0000000..b31e48c --- /dev/null +++ b/src/views/FacilityManagement/FacilityLists.vue @@ -0,0 +1,26 @@ + + + + + + diff --git a/src/views/FacilityManagement/FacilityOperation.vue b/src/views/FacilityManagement/FacilityOperation.vue new file mode 100644 index 0000000..7a8a9b6 --- /dev/null +++ b/src/views/FacilityManagement/FacilityOperation.vue @@ -0,0 +1,26 @@ + + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..e92268e --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/src/views/Login.vue b/src/views/Login.vue index 5c40082..4b4b7e3 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -59,7 +59,8 @@ export default { submitForm() { this.$refs.loginForm.validate((valid) => { if (valid) { - this.$router.replace('/MainPage') + // this.$router.replace('/MainPage') + this.$router.replace('/home') /* this.$postRequest('/login', this.loginForm).then((res) => { if (res.code === 200) { // console.log(res) diff --git a/src/views/SystemSetting/RoleManagement.vue b/src/views/SystemSetting/RoleManagement.vue new file mode 100644 index 0000000..ddff2b6 --- /dev/null +++ b/src/views/SystemSetting/RoleManagement.vue @@ -0,0 +1,26 @@ + + + + + + diff --git a/src/views/SystemSetting/UserManagement.vue b/src/views/SystemSetting/UserManagement.vue new file mode 100644 index 0000000..55132a1 --- /dev/null +++ b/src/views/SystemSetting/UserManagement.vue @@ -0,0 +1,25 @@ + + + + + -- Gitee