后台工作动态摘要添加
This commit is contained in:
kongjun
parent
6edf4d50f9
commit
52ddacef56
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -5,6 +5,13 @@ import { isURL } from '@/utils/validate'
|
|||
import store from '@/store'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
|
||||
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||
const originalPush = Router.prototype.push
|
||||
Router.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
}
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
// 页面路由(独立页面)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default new Vuex.Store({
|
|||
// 导航条, 布局风格, default(白色) / colorful(鲜艳)
|
||||
navbarLayoutType: 'colorful',
|
||||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色)
|
||||
sidebarLayoutSkin: 'dark',
|
||||
sidebarLayoutSkin: 'default',
|
||||
// 侧边栏, 折叠状态
|
||||
sidebarFold: false,
|
||||
// 侧边栏, 菜单
|
||||
|
|
|
|||
|
|
@ -1,81 +1,124 @@
|
|||
<template>
|
||||
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
|
||||
<nav
|
||||
class="aui-navbar"
|
||||
:class="`aui-navbar--${$store.state.navbarLayoutType}`"
|
||||
>
|
||||
<div class="aui-navbar__header">
|
||||
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
|
||||
<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
|
||||
<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
|
||||
<a class="aui-navbar__brand-mini" href="javascript:;">{{
|
||||
$t("brand.mini")
|
||||
}}</a>
|
||||
<a class="aui-navbar__brand-lg" href="javascript:;">{{
|
||||
$t("brand.lg")
|
||||
}}</a>
|
||||
<span>——</span>
|
||||
<span class="back-title-text">后台管理系统</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="aui-navbar__body">
|
||||
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
|
||||
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
|
||||
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
|
||||
<!-- <el-menu-item
|
||||
index="1"
|
||||
@click="$store.state.sidebarFold = !$store.state.sidebarFold"
|
||||
>
|
||||
<svg
|
||||
class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#icon-outdent"></use>
|
||||
</svg>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2" @click="refresh()">
|
||||
<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
|
||||
</el-menu-item>
|
||||
<svg
|
||||
class="
|
||||
icon-svg
|
||||
aui-navbar__icon-menu aui-navbar__icon-menu--refresh
|
||||
"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use xlink:href="#icon-sync"></use>
|
||||
</svg>
|
||||
</el-menu-item> -->
|
||||
</el-menu>
|
||||
<el-menu class="aui-navbar__menu" mode="horizontal">
|
||||
<el-menu-item index="1">
|
||||
<el-dropdown placement="bottom" :show-timeout="0">
|
||||
<el-button size="mini">{{ $t('_lang') }}</el-button>
|
||||
<el-button size="mini">{{ $t("_lang") }}</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(val, key) in i18nMessages" :key="key" @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-for="(val, key) in i18nMessages"
|
||||
:key="key"
|
||||
@click.native="$i18n.locale = key"
|
||||
>{{ val._lang }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<a href="//115.28.200.119:9091" target="_blank">
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-earth"></use></svg>
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
||||
<use xlink:href="#icon-earth"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" v-if="$hasPermission('sys:notice:all')">
|
||||
<el-badge :is-dot="messageTip">
|
||||
<a href="#" @click="myNoticeRouter()"><i class="el-icon-bell"></i></a>
|
||||
<a href="#" @click="myNoticeRouter()"
|
||||
><i class="el-icon-bell"></i
|
||||
></a>
|
||||
</el-badge>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4" @click="fullscreenHandle()">
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
|
||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
|
||||
<use xlink:href="#icon-fullscreen"></use>
|
||||
</svg>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5" class="aui-navbar__avatar">
|
||||
<el-dropdown placement="bottom" :show-timeout="0">
|
||||
<span class="el-dropdown-link">
|
||||
<img src="~@/assets/img/avatar.png">
|
||||
<img src="~@/assets/img/avatar.png" />
|
||||
<span>{{ $store.state.user.name }}</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="updatePasswordHandle()">{{
|
||||
$t("updatePassword.title")
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logoutHandle()">{{
|
||||
$t("logout")
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<!-- 弹窗, 修改密码 -->
|
||||
<update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
|
||||
<update-password
|
||||
v-if="updatePasswordVisible"
|
||||
ref="updatePassword"
|
||||
></update-password>
|
||||
</nav>
|
||||
</template>
|
||||
<script>
|
||||
import { messages } from '@/i18n'
|
||||
import screenfull from 'screenfull'
|
||||
import UpdatePassword from './main-navbar-update-password'
|
||||
import { clearLoginInfo } from '@/utils'
|
||||
import { messages } from "@/i18n";
|
||||
import screenfull from "screenfull";
|
||||
import UpdatePassword from "./main-navbar-update-password";
|
||||
import { clearLoginInfo } from "@/utils";
|
||||
// import Cookies from 'js-cookie'
|
||||
// var socket = null
|
||||
export default {
|
||||
inject: ['refresh'],
|
||||
data () {
|
||||
inject: ["refresh"],
|
||||
data() {
|
||||
return {
|
||||
i18nMessages: messages,
|
||||
updatePasswordVisible: false,
|
||||
messageTip: false
|
||||
}
|
||||
messageTip: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
UpdatePassword
|
||||
UpdatePassword,
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
// var vue = this
|
||||
// socket = new WebSocket(`${window.SITE_CONFIG['socketURL']}?token=${Cookies.get('token')}`)
|
||||
// socket.onopen = function () {}
|
||||
|
|
@ -101,56 +144,96 @@ export default {
|
|||
// }
|
||||
|
||||
// 未读通知数
|
||||
this.getUnReadCount()
|
||||
this.getUnReadCount();
|
||||
},
|
||||
methods: {
|
||||
myNoticeRouter () {
|
||||
this.$router.replace('notice-notice-user')
|
||||
myNoticeRouter() {
|
||||
this.$router.replace("notice-notice-user");
|
||||
},
|
||||
getUnReadCount () {
|
||||
this.$http.get('/sys/notice/mynotice/unread').then(({ data: res }) => {
|
||||
getUnReadCount() {
|
||||
this.$http
|
||||
.get("/sys/notice/mynotice/unread")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
if (res.data > 0) {
|
||||
this.messageTip = true
|
||||
this.messageTip = true;
|
||||
}
|
||||
}).catch(() => {})
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 全屏
|
||||
fullscreenHandle () {
|
||||
fullscreenHandle() {
|
||||
if (!screenfull.enabled) {
|
||||
return this.$message({
|
||||
message: this.$t('fullscreen.prompt'),
|
||||
type: 'warning',
|
||||
duration: 500
|
||||
})
|
||||
message: this.$t("fullscreen.prompt"),
|
||||
type: "warning",
|
||||
duration: 500,
|
||||
});
|
||||
}
|
||||
screenfull.toggle()
|
||||
screenfull.toggle();
|
||||
},
|
||||
// 修改密码
|
||||
updatePasswordHandle () {
|
||||
this.updatePasswordVisible = true
|
||||
updatePasswordHandle() {
|
||||
this.updatePasswordVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.updatePassword.init()
|
||||
})
|
||||
this.$refs.updatePassword.init();
|
||||
});
|
||||
},
|
||||
// 退出
|
||||
logoutHandle () {
|
||||
this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
|
||||
confirmButtonText: this.$t('confirm'),
|
||||
cancelButtonText: this.$t('cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http.post('/logout').then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
logoutHandle() {
|
||||
this.$confirm(
|
||||
this.$t("prompt.info", { handle: this.$t("logout") }),
|
||||
this.$t("prompt.title"),
|
||||
{
|
||||
confirmButtonText: this.$t("confirm"),
|
||||
cancelButtonText: this.$t("cancel"),
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.$http
|
||||
.post("/logout")
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
clearLoginInfo();
|
||||
this.$router.push({ name: "login" });
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: "header-typeface";
|
||||
src: url("~@/assets/font/header-typeface.ttf");
|
||||
}
|
||||
.aui-navbar {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-image: url("~@/assets/img/activitiMyWorkDynamics/header-bak.png");
|
||||
.aui-navbar__header {
|
||||
width: 25%;
|
||||
.aui-navbar__brand {
|
||||
margin-left: 20px;
|
||||
a {
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.aui-navbar__brand-mini {
|
||||
display: block;
|
||||
}
|
||||
.back-title-text {
|
||||
margin-top: 5px;
|
||||
font-family: header-typeface;
|
||||
}
|
||||
clearLoginInfo()
|
||||
this.$router.push({ name: 'login' })
|
||||
}).catch(() => {})
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,135 @@
|
|||
<template>
|
||||
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
|
||||
<el-submenu
|
||||
v-if="menu.children && menu.children.length >= 1"
|
||||
:index="menu.id"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<template slot="title">
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
||||
<span>{{ menu.name }}</span>
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="`#${menu.icon}`"></use>
|
||||
</svg>
|
||||
<span class="first-level-text">{{ menu.name }}</span>
|
||||
</template>
|
||||
<sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
|
||||
<sub-menu
|
||||
v-for="item in menu.children"
|
||||
:key="item.id"
|
||||
:menu="item"
|
||||
></sub-menu>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="menu.id" ref="li">
|
||||
<a
|
||||
:href="isBrowserTabOpen(menu.id) ? getBrowserTabOpenURL(menu.id) : 'javascript:;'"
|
||||
:href="
|
||||
isBrowserTabOpen(menu.id)
|
||||
? getBrowserTabOpenURL(menu.id)
|
||||
: 'javascript:;'
|
||||
"
|
||||
:target="isBrowserTabOpen(menu.id) ? '_blank' : '_self'"
|
||||
@click="isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)">
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
||||
@click="
|
||||
isBrowserTabOpen(menu.id) ? 'return false;' : gotoRouteHandle(menu.id)
|
||||
"
|
||||
>
|
||||
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="`#${menu.icon}`"></use>
|
||||
</svg>
|
||||
<span>{{ menu.name }}</span>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubMenu from './main-sidebar-sub-menu'
|
||||
import SubMenu from "./main-sidebar-sub-menu";
|
||||
export default {
|
||||
name: 'sub-menu',
|
||||
data () {
|
||||
name: "sub-menu",
|
||||
data() {
|
||||
return {
|
||||
browserTabOpenList: [
|
||||
'1156748733921165314',
|
||||
]
|
||||
}
|
||||
browserTabOpenList: ["1156748733921165314"],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SubMenu
|
||||
SubMenu,
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.li) {
|
||||
let $li = this.$refs.li.$el
|
||||
let $a = $li.firstElementChild
|
||||
let $li = this.$refs.li.$el;
|
||||
let $a = $li.firstElementChild;
|
||||
if ($a) {
|
||||
let pl = '0', pr = '0'
|
||||
let pl = "0",
|
||||
pr = "0";
|
||||
if ($li.currentStyle) {
|
||||
pl = $li.currentStyle['paddingLeft']
|
||||
pr = $li.currentStyle['paddingRight']
|
||||
pl = $li.currentStyle["paddingLeft"];
|
||||
pr = $li.currentStyle["paddingRight"];
|
||||
} else {
|
||||
pl = window.document.defaultView.getComputedStyle($li, null)['paddingLeft']
|
||||
pr = window.document.defaultView.getComputedStyle($li, null)['paddingRight']
|
||||
pl = window.document.defaultView.getComputedStyle($li, null)[
|
||||
"paddingLeft"
|
||||
];
|
||||
pr = window.document.defaultView.getComputedStyle($li, null)[
|
||||
"paddingRight"
|
||||
];
|
||||
}
|
||||
$li.setAttribute('style', `padding-left: 0; padding-right: 0;`)
|
||||
$a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
|
||||
$li.setAttribute("style", `padding-left: 0; padding-right: 0;`);
|
||||
$a.setAttribute(
|
||||
"style",
|
||||
`padding-left: ${pl}; padding-right: ${pr};`
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 是否通过浏览器Tab打开菜单
|
||||
isBrowserTabOpen (menuId) {
|
||||
return this.browserTabOpenList.filter(item => item === menuId).length >= 1;
|
||||
isBrowserTabOpen(menuId) {
|
||||
return (
|
||||
this.browserTabOpenList.filter((item) => item === menuId).length >= 1
|
||||
);
|
||||
},
|
||||
// 获取浏览器Tab打开菜单URL
|
||||
getBrowserTabOpenURL (menuId) {
|
||||
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
||||
return route ? route.meta.iframeURL : '';
|
||||
getBrowserTabOpenURL(menuId) {
|
||||
var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
|
||||
(item) => item.meta.menuId === menuId
|
||||
)[0];
|
||||
return route ? route.meta.iframeURL : "";
|
||||
},
|
||||
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
||||
gotoRouteHandle (menuId) {
|
||||
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
||||
gotoRouteHandle(menuId) {
|
||||
var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
|
||||
(item) => item.meta.menuId === menuId
|
||||
)[0];
|
||||
if (route) {
|
||||
this.$router.push({ name: route.name })
|
||||
this.$router.push({ name: route.name });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.aui-sidebar__menu {
|
||||
.el-menu-item > a {
|
||||
.first-level-text {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-menu-item {
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
background-color: #0058e1;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,34 @@
|
|||
<template>
|
||||
<div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
|
||||
<div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
|
||||
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
|
||||
<svg class="icon-svg" aria-hidden="true">
|
||||
<use xlink:href="#icon-setting"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="aui-theme-tools__content">
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Navbar</h3>
|
||||
<el-checkbox v-model="$store.state.navbarLayoutType" true-label="colorful">colorful 鲜艳</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="$store.state.navbarLayoutType"
|
||||
true-label="colorful"
|
||||
>colorful 鲜艳</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Sidebar</h3>
|
||||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark">dark 黑色</el-checkbox>
|
||||
<el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
|
||||
>dark 黑色</el-checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="aui-theme-tools__item">
|
||||
<h3>Theme</h3>
|
||||
<el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
|
||||
<el-radio v-for="item in themeList" :key="item.name" :label="item.name">{{ `${item.name} ${item.desc}` }}</el-radio>
|
||||
<el-radio
|
||||
v-for="item in themeList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
>{{ `${item.name} ${item.desc}` }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,38 +37,47 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
themeList: require('@/element-ui/config.js'),
|
||||
themeColor: 'turquoise'
|
||||
}
|
||||
themeList: require("@/element-ui/config.js"),
|
||||
themeColor: "turquoise",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
themeColorChangeHandle (val) {
|
||||
themeColorChangeHandle(val) {
|
||||
var styleList = [
|
||||
{
|
||||
id: 'J_elementTheme',
|
||||
url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
|
||||
id: "J_elementTheme",
|
||||
url: `${
|
||||
process.env.BASE_URL
|
||||
}element-theme/${val}/index.css?t=${new Date().getTime()}`,
|
||||
},
|
||||
{
|
||||
id: 'J_auiTheme',
|
||||
url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
|
||||
}
|
||||
]
|
||||
id: "J_auiTheme",
|
||||
url: `${
|
||||
process.env.BASE_URL
|
||||
}element-theme/${val}/aui.css?t=${new Date().getTime()}`,
|
||||
},
|
||||
];
|
||||
for (var i = 0; i < styleList.length; i++) {
|
||||
var el = document.querySelector(`#${styleList[i].id}`)
|
||||
var el = document.querySelector(`#${styleList[i].id}`);
|
||||
if (el) {
|
||||
el.href = styleList[i].url
|
||||
continue
|
||||
el.href = styleList[i].url;
|
||||
continue;
|
||||
}
|
||||
el = document.createElement('link')
|
||||
el.id = styleList[i].id
|
||||
el.href = styleList[i].url
|
||||
el.rel = 'stylesheet'
|
||||
document.querySelector('head').appendChild(el)
|
||||
el = document.createElement("link");
|
||||
el.id = styleList[i].id;
|
||||
el.href = styleList[i].url;
|
||||
el.rel = "stylesheet";
|
||||
document.querySelector("head").appendChild(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.aui-theme-tools__toggle {
|
||||
background-color: #0058e1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,46 +8,72 @@
|
|||
clearable
|
||||
/>
|
||||
</el-col>
|
||||
<el-button type="primary" @click="flashTableData">查询</el-button>
|
||||
<el-button type="primary" @click="restTableData">重置</el-button>
|
||||
<el-button type="primary" class="button-new" @click="flashTableData"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" class="button-new" @click="restTableData"
|
||||
>重置</el-button
|
||||
>
|
||||
<div style="float: right">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="deleteData"
|
||||
>批量删除</el-button>
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="button-new"
|
||||
@click="addDataDialogVisabled = true"
|
||||
>动态发布</el-button>
|
||||
>动态发布</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 20px">
|
||||
<el-table :data="tableData" border @selection-change="tableChange" >
|
||||
<el-table-column width="60" type="selection" align="center"></el-table-column> <!-- 全选 -->
|
||||
<el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
|
||||
<el-table :data="tableData" border @selection-change="tableChange">
|
||||
<el-table-column
|
||||
width="60"
|
||||
type="selection"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<!-- 全选 -->
|
||||
<el-table-column
|
||||
label="序号"
|
||||
width="60"
|
||||
type="index"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="动态标题" prop="title">
|
||||
<template slot-scope="scope">
|
||||
<div class="boxtitle">
|
||||
{{scope.row.title}}
|
||||
{{ scope.row.title }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="内容" prop="content">
|
||||
<template slot-scope="scope">
|
||||
<div class="boxcontent">
|
||||
{{scope.row.content}}
|
||||
{{ scope.row.content }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图片地址" prop="imageUrl"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createDate" sortable></el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
prop="createDate"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column width="200" label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="openEditDialog(scope.row)" type="text" icon="el-icon-setting"
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="openEditDialog(scope.row)"
|
||||
type="text"
|
||||
icon="el-icon-setting"
|
||||
class="button-text-new"
|
||||
>编辑</el-button
|
||||
>
|
||||
<!-- <el-button size="mini" type="success" icon="el-icon-plus"
|
||||
|
|
@ -57,14 +83,23 @@
|
|||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="deleteData(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="button-text-new"
|
||||
@click="openPreviewData(scope.row)"
|
||||
>预览</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
</el-row><el-pagination
|
||||
<!-- 分页 --> </el-row
|
||||
><el-pagination
|
||||
style="margin-top: 20px; text-align: center"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
|
|
@ -77,7 +112,8 @@
|
|||
</el-pagination>
|
||||
|
||||
<!-- 新增项目 -->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增项目"
|
||||
:visible.sync="addDataDialogVisabled"
|
||||
@close="addDataDialogClose"
|
||||
|
|
@ -98,6 +134,18 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-input
|
||||
v-model="addDataFrom.note1"
|
||||
autocomplete="off"
|
||||
placeholder="摘要"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
@input="noteExceed"
|
||||
:rows="3"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content" label="内容">
|
||||
<el-input
|
||||
v-model="addDataFrom.content"
|
||||
|
|
@ -133,22 +181,31 @@
|
|||
:on-exceed="handleExceed"
|
||||
:on-preview="showView"
|
||||
:limit="1"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary" class="button-new"
|
||||
>点击上传</el-button
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="addDataDialogVisabled = false">取 消</el-button>
|
||||
<el-button type="primary" @click="addDataDialogConfirm"
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addDataDialogConfirm"
|
||||
class="button-new"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑项目 -->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
<!-- 编辑项目 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="编辑项目"
|
||||
:visible.sync="editDataDialogVisabled"
|
||||
@close="editDataDialogClose"
|
||||
|
|
@ -169,6 +226,18 @@
|
|||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="摘要">
|
||||
<el-input
|
||||
v-model="eidtDataForm.note1"
|
||||
autocomplete="off"
|
||||
placeholder="摘要"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
@input="noteExceed"
|
||||
:rows="3"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="content" label="内容">
|
||||
<el-input
|
||||
v-model="eidtDataForm.content"
|
||||
|
|
@ -202,19 +271,70 @@
|
|||
:on-remove="editUploadRemoveFile"
|
||||
:on-exceed="handleExceed"
|
||||
:on-preview="showView"
|
||||
list-type="picture">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary" class="button-new"
|
||||
>点击上传</el-button
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip">只能上传图片文件</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDataDialogVisabled = false">取 消</el-button>
|
||||
<el-button type="primary" @click="eidtDataDialogConfirm">确 定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="eidtDataDialogConfirm"
|
||||
class="button-new"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 预览项目 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="预览项目"
|
||||
:visible.sync="perviewDataDialogVisabled"
|
||||
@close="perviewDataDialogClose"
|
||||
width="1300px"
|
||||
top="10vh"
|
||||
>
|
||||
<div class="preview-dialog">
|
||||
<div class="preview-title">
|
||||
<div class="title-text">
|
||||
<span>{{ previewData.title }}</span>
|
||||
</div>
|
||||
<div class="title-time">
|
||||
<span>发布时间：</span>
|
||||
<span>{{ previewData.updateDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-note">
|
||||
<span>摘要：</span>
|
||||
<span>{{ previewData.note1 }}</span>
|
||||
</div>
|
||||
<div class="preview-image">
|
||||
<img
|
||||
width="100%"
|
||||
v-if="previewData.imageUrl != ''"
|
||||
:src="previewData.imageUrl"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
width="100%"
|
||||
v-else
|
||||
src="~@/assets/img/activitiMyWorkDynamics/no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<span>{{ previewData.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogVisibleImg">
|
||||
<img width="100%" :src="previewImg" alt="">
|
||||
<img width="100%" :src="previewImg" alt="" />
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
|
@ -222,15 +342,15 @@
|
|||
<script>
|
||||
// @ is an alias to /src
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
|
||||
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
|
||||
// 表格筛选条件对象
|
||||
queryData: {
|
||||
keyworld: '',
|
||||
keyworld: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
// 表格数据数组对象
|
||||
tableData: [],
|
||||
|
|
@ -241,310 +361,429 @@ export default {
|
|||
// imageUrl: '',
|
||||
// 新增数据表单对象
|
||||
addDataFrom: {
|
||||
title: '',
|
||||
content: '',
|
||||
imageUrl: '',
|
||||
delFlag: 0
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
},
|
||||
// 新增数据表单验证对象
|
||||
addDataFromRules: {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
imageUrl: [
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
editDataDialogVisabled: false,
|
||||
eidtDataForm: {
|
||||
title: '',
|
||||
content: '',
|
||||
imageUrl: ''
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
},
|
||||
eidtDataFromRules: {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }],
|
||||
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
||||
imageUrl: [
|
||||
{ required: true, message: '请输入图片地址', trigger: 'blur' }
|
||||
]
|
||||
{ required: true, message: "请输入图片地址", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
previewImg: '', // 预览图片
|
||||
perviewDataDialogVisabled: false,
|
||||
previewData: {
|
||||
title: "",
|
||||
note1: "",
|
||||
content: "",
|
||||
imageUrl: "",
|
||||
delFlag: 0,
|
||||
},
|
||||
previewImg: "", // 预览图片
|
||||
deleteDataArr: [],
|
||||
dialogVisibleImg: false
|
||||
}
|
||||
dialogVisibleImg: false,
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.getTableData()
|
||||
created() {
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
tableChange (val) {
|
||||
this.deleteDataArr = val.map(item => item.id)
|
||||
console.log(this.deleteDataArr)
|
||||
tableChange(val) {
|
||||
this.deleteDataArr = val.map((item) => item.id);
|
||||
console.log(this.deleteDataArr);
|
||||
},
|
||||
restTableData () {
|
||||
this.queryData.keyworld = ''
|
||||
this.getTableData()
|
||||
restTableData() {
|
||||
this.queryData.keyworld = "";
|
||||
this.getTableData();
|
||||
},
|
||||
showView (file) {
|
||||
this.previewImg = file.url
|
||||
this.dialogVisibleImg = true
|
||||
showView(file) {
|
||||
this.previewImg = file.url;
|
||||
this.dialogVisibleImg = true;
|
||||
},
|
||||
getTableData () {
|
||||
this.$http.get('/workdynamics/page', {
|
||||
getTableData() {
|
||||
this.$http
|
||||
.get("/workdynamics/page", {
|
||||
params: {
|
||||
limit: this.queryData.pageSize,
|
||||
page: this.queryData.pageIndex,
|
||||
name: this.queryData.keyworld
|
||||
}
|
||||
name: this.queryData.keyworld,
|
||||
},
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.tableData = res.data.list
|
||||
this.queryData.total = res.data.total
|
||||
this.tableData = res.data.list;
|
||||
this.queryData.total = res.data.total;
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
flashTableData () {
|
||||
this.queryData.pageIndex = 1
|
||||
this.getTableData()
|
||||
flashTableData() {
|
||||
this.queryData.pageIndex = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
// 分页大小更改
|
||||
handleSizeChange (value) {
|
||||
this.queryData.pageSize = value
|
||||
this.getTableData()
|
||||
handleSizeChange(value) {
|
||||
this.queryData.pageSize = value;
|
||||
this.getTableData();
|
||||
},
|
||||
// 当前索引更改
|
||||
handleCurrentChange (val) {
|
||||
this.queryData.pageIndex = val
|
||||
this.getTableData()
|
||||
handleCurrentChange(val) {
|
||||
this.queryData.pageIndex = val;
|
||||
this.getTableData();
|
||||
},
|
||||
// 新增数据窗口关闭事件
|
||||
addDataDialogClose () {
|
||||
this.$refs.addDataFormRef.resetFields()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
this.$refs.addUpload.clearFiles()
|
||||
addDataDialogClose() {
|
||||
this.$refs.addDataFormRef.resetFields();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
this.$refs.addUpload.clearFiles();
|
||||
// this.addDataFrom.imagesFiles = []
|
||||
// this.$refs.addDataFromUploadRef.clearFiles()
|
||||
},
|
||||
editDataDialogClose () {
|
||||
this.$refs.editDataFormRef.resetFields()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
this.$refs.editUpload.clearFiles()
|
||||
editDataDialogClose() {
|
||||
this.$refs.editDataFormRef.resetFields();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
this.$refs.editUpload.clearFiles();
|
||||
},
|
||||
// 追加数据
|
||||
addDataDialogConfirm () {
|
||||
addDataDialogConfirm() {
|
||||
this.$refs.addDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
//console.log("新增新增", this.addDataFrom);
|
||||
this.$http
|
||||
.post('/workdynamics/insert', this.addDataFrom)
|
||||
.post("/workdynamics/insert", this.addDataFrom)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success('新增成功')
|
||||
this.addDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
this.$message.success("新增成功");
|
||||
this.addDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.$message.success('表单数据填写不完整')
|
||||
this.$message.success("表单数据填写不完整");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
// 限定图片
|
||||
handleExceed () {
|
||||
this.$message({ type: 'error', message: '最多支持一张图片上传' })
|
||||
handleExceed() {
|
||||
this.$message({ type: "error", message: "最多支持一张图片上传" });
|
||||
},
|
||||
// 限制标题
|
||||
titleExceed (str) {
|
||||
titleExceed(str) {
|
||||
if (str.length >= 200) {
|
||||
this.$message.error('标题文字不能超过200字')
|
||||
this.$message.error("标题文字不能超过200字");
|
||||
}
|
||||
},
|
||||
// 限制内容
|
||||
contentExceed (str) {
|
||||
contentExceed(str) {
|
||||
if (str.length >= 2000) {
|
||||
this.$message.error('内容文字不能超过2000字')
|
||||
this.$message.error("内容文字不能超过2000字");
|
||||
}
|
||||
},
|
||||
//限制摘要
|
||||
noteExceed(str) {
|
||||
if (str.length >= 1000) {
|
||||
this.$message.error("摘要文字不能超过1000字");
|
||||
}
|
||||
},
|
||||
// 删除数据
|
||||
deleteData (row) {
|
||||
console.log(row)
|
||||
this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
deleteData(row) {
|
||||
console.log(row);
|
||||
this.$confirm("此操作将删除当前数据, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
let ids = []
|
||||
let ids = [];
|
||||
if (this.deleteDataArr.length > 1) {
|
||||
ids = this.deleteDataArr
|
||||
ids = this.deleteDataArr;
|
||||
} else {
|
||||
ids = [row.id]
|
||||
ids = [row.id];
|
||||
}
|
||||
console.log(ids)
|
||||
this.$http.delete('/workdynamics/delete', {
|
||||
data: ids
|
||||
console.log(ids);
|
||||
this.$http
|
||||
.delete("/workdynamics/delete", {
|
||||
data: ids,
|
||||
})
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
this.getTableData()
|
||||
})
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getTableData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleAvatarSuccess (res, file) {
|
||||
//预览工作动态信息
|
||||
async openPreviewData(row) {
|
||||
console.log("预览预览", row);
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.addDataFrom.imageUrl = res.data
|
||||
this.previewData = res.data;
|
||||
|
||||
this.perviewDataDialogVisabled = true;
|
||||
},
|
||||
perviewDataDialogClose() {
|
||||
this.perviewDataDialogVisabled = false;
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.addDataFrom.imageUrl = res.data;
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
beforeAvatarUpload (file) {
|
||||
beforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isImage && isLt2M
|
||||
return isImage && isLt2M;
|
||||
},
|
||||
eidtHandleAvatarSuccess (res, file) {
|
||||
eidtHandleAvatarSuccess(res, file) {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.eidtDataForm.imageUrl = res.data
|
||||
this.eidtDataForm.imageUrl = res.data;
|
||||
// this.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
editBeforeAvatarUpload (file) {
|
||||
editBeforeAvatarUpload(file) {
|
||||
const isImage =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/png";
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isImage) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||||
this.$message.error("上传头像图片只能是 JPG 格式!");
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||||
}
|
||||
return isImage && isLt2M
|
||||
return isImage && isLt2M;
|
||||
},
|
||||
async openEditDialog (row) {
|
||||
const { data: res } = await this.$http.get(`workdynamics/select/${row.id}`)
|
||||
async openEditDialog(row) {
|
||||
const { data: res } = await this.$http.get(
|
||||
`workdynamics/select/${row.id}`
|
||||
);
|
||||
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.eidtDataForm = res.data
|
||||
this.eidtDataForm = res.data;
|
||||
|
||||
this.editDataDialogVisabled = true
|
||||
this.editDataDialogVisabled = true;
|
||||
},
|
||||
eidtDataDialogConfirm () {
|
||||
eidtDataDialogConfirm() {
|
||||
this.$refs.editDataFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(this.eidtDataForm)
|
||||
console.log(this.eidtDataForm);
|
||||
this.$http
|
||||
.put('/workdynamics/update', this.eidtDataForm)
|
||||
.put("/workdynamics/update", this.eidtDataForm)
|
||||
.then(({ data: res }) => {
|
||||
if (res.code !== 0) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success('编辑成功')
|
||||
this.editDataDialogVisabled = false
|
||||
this.getTableData()
|
||||
this.$message.success("编辑成功");
|
||||
this.editDataDialogVisabled = false;
|
||||
this.getTableData();
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
this.$message.success('表单数据填写不完整')
|
||||
this.$message.success("表单数据填写不完整");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
addUploadRemoveFile (file, fileList) {
|
||||
this.$refs.addUpload.clearFiles()
|
||||
this.addDataFrom.imageUrl = ''
|
||||
addUploadRemoveFile(file, fileList) {
|
||||
this.$refs.addUpload.clearFiles();
|
||||
this.addDataFrom.imageUrl = "";
|
||||
},
|
||||
editUploadRemoveFile(file, fileList) {
|
||||
this.$refs.editUpload.clearFiles();
|
||||
this.eidtDataForm.imageUrl = "";
|
||||
},
|
||||
editUploadRemoveFile (file, fileList) {
|
||||
this.$refs.editUpload.clearFiles()
|
||||
this.eidtDataForm.imageUrl = ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editDialogShowFileList () {
|
||||
editDialogShowFileList() {
|
||||
if (this.eidtDataForm.imageUrl) {
|
||||
return [{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }]
|
||||
return [
|
||||
{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl },
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
line-height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
}
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.boxtitle{
|
||||
}
|
||||
.boxtitle {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.boxcontent{
|
||||
}
|
||||
.boxcontent {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.preview-dialog {
|
||||
width: 100%;
|
||||
height: 723px;
|
||||
overflow: auto;
|
||||
/* 滚动条凹槽的颜色，还可以设置边框属性 */
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f8f8f8;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/* 滚动条的宽度 */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
//margin-top: -40px;
|
||||
border-bottom: solid #c6c6c6 1px;
|
||||
.title-text {
|
||||
text-align: center;
|
||||
span {
|
||||
font-size: 24px;
|
||||
color: #0558e1;
|
||||
}
|
||||
}
|
||||
.title-time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-top: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-note {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
text-align: left;
|
||||
margin-top: 24px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.preview-image {
|
||||
width: 900px;
|
||||
//height: 100%;
|
||||
margin-top: 16px;
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
padding-left: 300px;
|
||||
}
|
||||
.preview-content {
|
||||
line-height: 30px;
|
||||
text-indent: 2em;
|
||||
margin-top: 16px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-new {
|
||||
background-color: #0558e1;
|
||||
border: none;
|
||||
}
|
||||
.button-text-new {
|
||||
color: #0558e1;
|
||||
}
|
||||
.el-icon-delete {
|
||||
color: #0558e1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue