66 changed files with 180 additions and 12332 deletions
@ -1,116 +0,0 @@ |
|||
const Mock = require('mockjs') |
|||
|
|||
const List = [] |
|||
const count = 100 |
|||
|
|||
const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>' |
|||
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3' |
|||
|
|||
for (let i = 0; i < count; i++) { |
|||
List.push(Mock.mock({ |
|||
id: '@increment', |
|||
timestamp: +Mock.Random.date('T'), |
|||
author: '@first', |
|||
reviewer: '@first', |
|||
title: '@title(5, 10)', |
|||
content_short: 'mock data', |
|||
content: baseContent, |
|||
forecast: '@float(0, 100, 2, 2)', |
|||
importance: '@integer(1, 3)', |
|||
'type|1': ['CN', 'US', 'JP', 'EU'], |
|||
'status|1': ['published', 'draft'], |
|||
display_time: '@datetime', |
|||
comment_disabled: true, |
|||
pageviews: '@integer(300, 5000)', |
|||
image_uri, |
|||
platforms: ['a-platform'] |
|||
})) |
|||
} |
|||
|
|||
module.exports = [ |
|||
{ |
|||
url: '/vue-element-admin/article/list', |
|||
type: 'get', |
|||
response: config => { |
|||
const { importance, type, title, page = 1, limit = 20, sort } = config.query |
|||
|
|||
let mockList = List.filter(item => { |
|||
if (importance && item.importance !== +importance) return false |
|||
if (type && item.type !== type) return false |
|||
if (title && item.title.indexOf(title) < 0) return false |
|||
return true |
|||
}) |
|||
|
|||
if (sort === '-id') { |
|||
mockList = mockList.reverse() |
|||
} |
|||
|
|||
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1)) |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
total: mockList.length, |
|||
items: pageList |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/detail', |
|||
type: 'get', |
|||
response: config => { |
|||
const { id } = config.query |
|||
for (const article of List) { |
|||
if (article.id === +id) { |
|||
return { |
|||
code: 20000, |
|||
data: article |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/pv', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
pvData: [ |
|||
{ key: 'PC', pv: 1024 }, |
|||
{ key: 'mobile', pv: 1024 }, |
|||
{ key: 'ios', pv: 1024 }, |
|||
{ key: 'android', pv: 1024 } |
|||
] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/create', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
url: '/vue-element-admin/article/update', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
|
|||
@ -1,60 +0,0 @@ |
|||
const Mock = require('mockjs') |
|||
const { param2Obj } = require('./utils') |
|||
|
|||
const user = require('./user') |
|||
const role = require('./role') |
|||
const article = require('./article') |
|||
const search = require('./remote-search') |
|||
|
|||
const mocks = [ |
|||
...user, |
|||
...role, |
|||
...article, |
|||
...search |
|||
] |
|||
|
|||
// for front mock
|
|||
// please use it cautiously, it will redefine XMLHttpRequest,
|
|||
// which will cause many of your third-party libraries to be invalidated(like progress event).
|
|||
function mockXHR() { |
|||
// mock patch
|
|||
// https://github.com/nuysoft/Mock/issues/300
|
|||
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send |
|||
Mock.XHR.prototype.send = function() { |
|||
if (this.custom.xhr) { |
|||
this.custom.xhr.withCredentials = this.withCredentials || false |
|||
|
|||
if (this.responseType) { |
|||
this.custom.xhr.responseType = this.responseType |
|||
} |
|||
} |
|||
this.proxy_send(...arguments) |
|||
} |
|||
|
|||
function XHR2ExpressReqWrap(respond) { |
|||
return function(options) { |
|||
let result = null |
|||
if (respond instanceof Function) { |
|||
const { body, type, url } = options |
|||
// https://expressjs.com/en/4x/api.html#req
|
|||
result = respond({ |
|||
method: type, |
|||
body: JSON.parse(body), |
|||
query: param2Obj(url) |
|||
}) |
|||
} else { |
|||
result = respond |
|||
} |
|||
return Mock.mock(result) |
|||
} |
|||
} |
|||
|
|||
for (const i of mocks) { |
|||
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) |
|||
} |
|||
} |
|||
|
|||
module.exports = { |
|||
mocks, |
|||
mockXHR |
|||
} |
|||
@ -1,84 +0,0 @@ |
|||
const chokidar = require('chokidar') |
|||
const bodyParser = require('body-parser') |
|||
const chalk = require('chalk') |
|||
const path = require('path') |
|||
const Mock = require('mockjs') |
|||
|
|||
const mockDir = path.join(process.cwd(), 'mock') |
|||
|
|||
function registerRoutes(app) { |
|||
let mockLastIndex |
|||
const { mocks } = require('./index.js') |
|||
const mocksForServer = mocks.map(route => { |
|||
return responseFake(route.url, route.type, route.response) |
|||
}) |
|||
for (const mock of mocksForServer) { |
|||
// app[mock.type](mock.url, mock.response)
|
|||
app[mock.type](mock.url, bodyParser.json(),bodyParser.urlencoded({ //添加
|
|||
extended:true |
|||
}),mock.response) |
|||
mockLastIndex = app._router.stack.length |
|||
} |
|||
const mockRoutesLength = Object.keys(mocksForServer).length |
|||
return { |
|||
mockRoutesLength: mockRoutesLength, |
|||
mockStartIndex: mockLastIndex - mockRoutesLength |
|||
} |
|||
} |
|||
|
|||
function unregisterRoutes() { |
|||
Object.keys(require.cache).forEach(i => { |
|||
if (i.includes(mockDir)) { |
|||
delete require.cache[require.resolve(i)] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// for mock server
|
|||
const responseFake = (url, type, respond) => { |
|||
return { |
|||
url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), |
|||
type: type || 'get', |
|||
response(req, res) { |
|||
console.log('request invoke:' + req.path) |
|||
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) |
|||
} |
|||
} |
|||
} |
|||
|
|||
module.exports = app => { |
|||
// parse app.body
|
|||
// https://expressjs.com/en/4x/api.html#req.body
|
|||
// app.use(bodyParser.json())
|
|||
// app.use(bodyParser.urlencoded({
|
|||
// extended: true
|
|||
// }))
|
|||
|
|||
const mockRoutes = registerRoutes(app) |
|||
var mockRoutesLength = mockRoutes.mockRoutesLength |
|||
var mockStartIndex = mockRoutes.mockStartIndex |
|||
|
|||
// watch files, hot reload mock server
|
|||
chokidar.watch(mockDir, { |
|||
ignored: /mock-server/, |
|||
ignoreInitial: true |
|||
}).on('all', (event, path) => { |
|||
if (event === 'change' || event === 'add') { |
|||
try { |
|||
// remove mock routes stack
|
|||
app._router.stack.splice(mockStartIndex, mockRoutesLength) |
|||
|
|||
// clear routes cache
|
|||
unregisterRoutes() |
|||
|
|||
const mockRoutes = registerRoutes(app) |
|||
mockRoutesLength = mockRoutes.mockRoutesLength |
|||
mockStartIndex = mockRoutes.mockStartIndex |
|||
|
|||
console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) |
|||
} catch (error) { |
|||
console.log(chalk.redBright(error)) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
@ -1,51 +0,0 @@ |
|||
const Mock = require('mockjs') |
|||
|
|||
const NameList = [] |
|||
const count = 100 |
|||
|
|||
for (let i = 0; i < count; i++) { |
|||
NameList.push(Mock.mock({ |
|||
name: '@first' |
|||
})) |
|||
} |
|||
NameList.push({ name: 'mock-Pan' }) |
|||
|
|||
module.exports = [ |
|||
// username search
|
|||
{ |
|||
url: '/vue-element-admin/search/user', |
|||
type: 'get', |
|||
response: config => { |
|||
const { name } = config.query |
|||
const mockNameList = NameList.filter(item => { |
|||
const lowerCaseName = item.name.toLowerCase() |
|||
return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0) |
|||
}) |
|||
return { |
|||
code: 20000, |
|||
data: { items: mockNameList } |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// transaction list
|
|||
{ |
|||
url: '/vue-element-admin/transaction/list', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: { |
|||
total: 20, |
|||
'items|20': [{ |
|||
order_no: '@guid()', |
|||
timestamp: +Mock.Random.date('T'), |
|||
username: '@name()', |
|||
price: '@float(1000, 15000, 0, 2)', |
|||
'status|1': ['success', 'pending'] |
|||
}] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -1,98 +0,0 @@ |
|||
const Mock = require('mockjs') |
|||
const { deepClone } = require('../utils') |
|||
const { asyncRoutes, constantRoutes } = require('./routes.js') |
|||
|
|||
const routes = deepClone([...constantRoutes, ...asyncRoutes]) |
|||
|
|||
const roles = [ |
|||
{ |
|||
key: 'admin', |
|||
name: 'admin', |
|||
description: 'Super Administrator. Have access to view all pages.', |
|||
routes: routes |
|||
}, |
|||
{ |
|||
key: 'editor', |
|||
name: 'editor', |
|||
description: 'Normal Editor. Can see all pages except permission page', |
|||
routes: routes.filter(i => i.path !== '/permission')// just a mock
|
|||
}, |
|||
{ |
|||
key: 'visitor', |
|||
name: 'visitor', |
|||
description: 'Just a visitor. Can only see the home page and the document page', |
|||
routes: [{ |
|||
path: '', |
|||
redirect: 'dashboard', |
|||
children: [ |
|||
{ |
|||
path: 'dashboard', |
|||
name: 'Dashboard', |
|||
meta: { title: 'dashboard', icon: 'dashboard' } |
|||
} |
|||
] |
|||
}] |
|||
} |
|||
] |
|||
|
|||
module.exports = [ |
|||
// mock get all routes form server
|
|||
{ |
|||
url: '/vue-element-admin/routes', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: routes |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// mock get all roles form server
|
|||
{ |
|||
url: '/vue-element-admin/roles', |
|||
type: 'get', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: roles |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// add role
|
|||
{ |
|||
url: '/vue-element-admin/role', |
|||
type: 'post', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
key: Mock.mock('@integer(300, 5000)') |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// update role
|
|||
{ |
|||
url: '/vue-element-admin/role/[A-Za-z0-9]', |
|||
type: 'put', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
status: 'success' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// delete role
|
|||
{ |
|||
url: '/vue-element-admin/role/[A-Za-z0-9]', |
|||
type: 'delete', |
|||
response: { |
|||
code: 20000, |
|||
data: { |
|||
status: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -1,530 +0,0 @@ |
|||
// Just a mock data
|
|||
|
|||
const constantRoutes = [ |
|||
{ |
|||
path: '/redirect', |
|||
component: 'layout/Layout', |
|||
hidden: true, |
|||
children: [ |
|||
{ |
|||
path: '/redirect/:path*', |
|||
component: 'views/redirect/index' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/login', |
|||
component: 'views/login/index', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/auth-redirect', |
|||
component: 'views/login/auth-redirect', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/404', |
|||
component: 'views/error-page/404', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/401', |
|||
component: 'views/error-page/401', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '', |
|||
component: 'layout/Layout', |
|||
redirect: 'dashboard', |
|||
children: [ |
|||
{ |
|||
path: 'dashboard', |
|||
component: 'views/dashboard/index', |
|||
name: 'Dashboard', |
|||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/documentation', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/documentation/index', |
|||
name: 'Documentation', |
|||
meta: { title: 'Documentation', icon: 'documentation', affix: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/guide', |
|||
component: 'layout/Layout', |
|||
redirect: '/guide/index', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/guide/index', |
|||
name: 'Guide', |
|||
meta: { title: 'Guide', icon: 'guide', noCache: true } |
|||
} |
|||
] |
|||
} |
|||
] |
|||
|
|||
const asyncRoutes = [ |
|||
{ |
|||
path: '/permission', |
|||
component: 'layout/Layout', |
|||
redirect: '/permission/index', |
|||
alwaysShow: true, |
|||
meta: { |
|||
title: 'Permission', |
|||
icon: 'lock', |
|||
roles: ['admin', 'editor'] |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'page', |
|||
component: 'views/permission/page', |
|||
name: 'PagePermission', |
|||
meta: { |
|||
title: 'Page Permission', |
|||
roles: ['admin'] |
|||
} |
|||
}, |
|||
{ |
|||
path: 'directive', |
|||
component: 'views/permission/directive', |
|||
name: 'DirectivePermission', |
|||
meta: { |
|||
title: 'Directive Permission' |
|||
} |
|||
}, |
|||
{ |
|||
path: 'role', |
|||
component: 'views/permission/role', |
|||
name: 'RolePermission', |
|||
meta: { |
|||
title: 'Role Permission', |
|||
roles: ['admin'] |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/icon', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/icons/index', |
|||
name: 'Icons', |
|||
meta: { title: 'Icons', icon: 'icon', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/components', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'ComponentDemo', |
|||
meta: { |
|||
title: 'Components', |
|||
icon: 'component' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'tinymce', |
|||
component: 'views/components-demo/tinymce', |
|||
name: 'TinymceDemo', |
|||
meta: { title: 'Tinymce' } |
|||
}, |
|||
{ |
|||
path: 'markdown', |
|||
component: 'views/components-demo/markdown', |
|||
name: 'MarkdownDemo', |
|||
meta: { title: 'Markdown' } |
|||
}, |
|||
{ |
|||
path: 'json-editor', |
|||
component: 'views/components-demo/json-editor', |
|||
name: 'JsonEditorDemo', |
|||
meta: { title: 'Json Editor' } |
|||
}, |
|||
{ |
|||
path: 'split-pane', |
|||
component: 'views/components-demo/split-pane', |
|||
name: 'SplitpaneDemo', |
|||
meta: { title: 'SplitPane' } |
|||
}, |
|||
{ |
|||
path: 'avatar-upload', |
|||
component: 'views/components-demo/avatar-upload', |
|||
name: 'AvatarUploadDemo', |
|||
meta: { title: 'Avatar Upload' } |
|||
}, |
|||
{ |
|||
path: 'dropzone', |
|||
component: 'views/components-demo/dropzone', |
|||
name: 'DropzoneDemo', |
|||
meta: { title: 'Dropzone' } |
|||
}, |
|||
{ |
|||
path: 'sticky', |
|||
component: 'views/components-demo/sticky', |
|||
name: 'StickyDemo', |
|||
meta: { title: 'Sticky' } |
|||
}, |
|||
{ |
|||
path: 'count-to', |
|||
component: 'views/components-demo/count-to', |
|||
name: 'CountToDemo', |
|||
meta: { title: 'Count To' } |
|||
}, |
|||
{ |
|||
path: 'mixin', |
|||
component: 'views/components-demo/mixin', |
|||
name: 'ComponentMixinDemo', |
|||
meta: { title: 'componentMixin' } |
|||
}, |
|||
{ |
|||
path: 'back-to-top', |
|||
component: 'views/components-demo/back-to-top', |
|||
name: 'BackToTopDemo', |
|||
meta: { title: 'Back To Top' } |
|||
}, |
|||
{ |
|||
path: 'drag-dialog', |
|||
component: 'views/components-demo/drag-dialog', |
|||
name: 'DragDialogDemo', |
|||
meta: { title: 'Drag Dialog' } |
|||
}, |
|||
{ |
|||
path: 'drag-select', |
|||
component: 'views/components-demo/drag-select', |
|||
name: 'DragSelectDemo', |
|||
meta: { title: 'Drag Select' } |
|||
}, |
|||
{ |
|||
path: 'dnd-list', |
|||
component: 'views/components-demo/dnd-list', |
|||
name: 'DndListDemo', |
|||
meta: { title: 'Dnd List' } |
|||
}, |
|||
{ |
|||
path: 'drag-kanban', |
|||
component: 'views/components-demo/drag-kanban', |
|||
name: 'DragKanbanDemo', |
|||
meta: { title: 'Drag Kanban' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/charts', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'Charts', |
|||
meta: { |
|||
title: 'Charts', |
|||
icon: 'chart' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'keyboard', |
|||
component: 'views/charts/keyboard', |
|||
name: 'KeyboardChart', |
|||
meta: { title: 'Keyboard Chart', noCache: true } |
|||
}, |
|||
{ |
|||
path: 'line', |
|||
component: 'views/charts/line', |
|||
name: 'LineChart', |
|||
meta: { title: 'Line Chart', noCache: true } |
|||
}, |
|||
{ |
|||
path: 'mixchart', |
|||
component: 'views/charts/mixChart', |
|||
name: 'MixChart', |
|||
meta: { title: 'Mix Chart', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/nested', |
|||
component: 'layout/Layout', |
|||
redirect: '/nested/menu1/menu1-1', |
|||
name: 'Nested', |
|||
meta: { |
|||
title: 'Nested', |
|||
icon: 'nested' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'menu1', |
|||
component: 'views/nested/menu1/index', |
|||
name: 'Menu1', |
|||
meta: { title: 'Menu1' }, |
|||
redirect: '/nested/menu1/menu1-1', |
|||
children: [ |
|||
{ |
|||
path: 'menu1-1', |
|||
component: 'views/nested/menu1/menu1-1', |
|||
name: 'Menu1-1', |
|||
meta: { title: 'Menu1-1' } |
|||
}, |
|||
{ |
|||
path: 'menu1-2', |
|||
component: 'views/nested/menu1/menu1-2', |
|||
name: 'Menu1-2', |
|||
redirect: '/nested/menu1/menu1-2/menu1-2-1', |
|||
meta: { title: 'Menu1-2' }, |
|||
children: [ |
|||
{ |
|||
path: 'menu1-2-1', |
|||
component: 'views/nested/menu1/menu1-2/menu1-2-1', |
|||
name: 'Menu1-2-1', |
|||
meta: { title: 'Menu1-2-1' } |
|||
}, |
|||
{ |
|||
path: 'menu1-2-2', |
|||
component: 'views/nested/menu1/menu1-2/menu1-2-2', |
|||
name: 'Menu1-2-2', |
|||
meta: { title: 'Menu1-2-2' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'menu1-3', |
|||
component: 'views/nested/menu1/menu1-3', |
|||
name: 'Menu1-3', |
|||
meta: { title: 'Menu1-3' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'menu2', |
|||
name: 'Menu2', |
|||
component: 'views/nested/menu2/index', |
|||
meta: { title: 'Menu2' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/example', |
|||
component: 'layout/Layout', |
|||
redirect: '/example/list', |
|||
name: 'Example', |
|||
meta: { |
|||
title: 'Example', |
|||
icon: 'example' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'create', |
|||
component: 'views/example/create', |
|||
name: 'CreateArticle', |
|||
meta: { title: 'Create Article', icon: 'edit' } |
|||
}, |
|||
{ |
|||
path: 'edit/:id(\\d+)', |
|||
component: 'views/example/edit', |
|||
name: 'EditArticle', |
|||
meta: { title: 'Edit Article', noCache: true }, |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: 'list', |
|||
component: 'views/example/list', |
|||
name: 'ArticleList', |
|||
meta: { title: 'Article List', icon: 'list' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/tab', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/tab/index', |
|||
name: 'Tab', |
|||
meta: { title: 'Tab', icon: 'tab' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/error', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
name: 'ErrorPages', |
|||
meta: { |
|||
title: 'Error Pages', |
|||
icon: '404' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: '401', |
|||
component: 'views/error-page/401', |
|||
name: 'Page401', |
|||
meta: { title: 'Page 401', noCache: true } |
|||
}, |
|||
{ |
|||
path: '404', |
|||
component: 'views/error-page/404', |
|||
name: 'Page404', |
|||
meta: { title: 'Page 404', noCache: true } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/error-log', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'log', |
|||
component: 'views/error-log/index', |
|||
name: 'ErrorLog', |
|||
meta: { title: 'Error Log', icon: 'bug' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/excel', |
|||
component: 'layout/Layout', |
|||
redirect: '/excel/export-excel', |
|||
name: 'Excel', |
|||
meta: { |
|||
title: 'Excel', |
|||
icon: 'excel' |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'export-excel', |
|||
component: 'views/excel/export-excel', |
|||
name: 'ExportExcel', |
|||
meta: { title: 'Export Excel' } |
|||
}, |
|||
{ |
|||
path: 'export-selected-excel', |
|||
component: 'views/excel/select-excel', |
|||
name: 'SelectExcel', |
|||
meta: { title: 'Select Excel' } |
|||
}, |
|||
{ |
|||
path: 'export-merge-header', |
|||
component: 'views/excel/merge-header', |
|||
name: 'MergeHeader', |
|||
meta: { title: 'Merge Header' } |
|||
}, |
|||
{ |
|||
path: 'upload-excel', |
|||
component: 'views/excel/upload-excel', |
|||
name: 'UploadExcel', |
|||
meta: { title: 'Upload Excel' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/zip', |
|||
component: 'layout/Layout', |
|||
redirect: '/zip/download', |
|||
alwaysShow: true, |
|||
meta: { title: 'Zip', icon: 'zip' }, |
|||
children: [ |
|||
{ |
|||
path: 'download', |
|||
component: 'views/zip/index', |
|||
name: 'ExportZip', |
|||
meta: { title: 'Export Zip' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/pdf', |
|||
component: 'layout/Layout', |
|||
redirect: '/pdf/index', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/pdf/index', |
|||
name: 'PDF', |
|||
meta: { title: 'PDF', icon: 'pdf' } |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: '/pdf/download', |
|||
component: 'views/pdf/download', |
|||
hidden: true |
|||
}, |
|||
|
|||
{ |
|||
path: '/theme', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/theme/index', |
|||
name: 'Theme', |
|||
meta: { title: 'Theme', icon: 'theme' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/clipboard', |
|||
component: 'layout/Layout', |
|||
redirect: 'noRedirect', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/clipboard/index', |
|||
name: 'ClipboardDemo', |
|||
meta: { title: 'Clipboard Demo', icon: 'clipboard' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: '/i18n', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
component: 'views/i18n-demo/index', |
|||
name: 'I18n', |
|||
meta: { title: 'I18n', icon: 'international' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ |
|||
path: 'external-link', |
|||
component: 'layout/Layout', |
|||
children: [ |
|||
{ |
|||
path: 'https://github.com/PanJiaChen/vue-element-admin', |
|||
meta: { title: 'External Link', icon: 'link' } |
|||
} |
|||
] |
|||
}, |
|||
|
|||
{ path: '*', redirect: '/404', hidden: true } |
|||
] |
|||
|
|||
module.exports = { |
|||
constantRoutes, |
|||
asyncRoutes |
|||
} |
|||
@ -1,84 +0,0 @@ |
|||
|
|||
const tokens = { |
|||
admin: { |
|||
token: 'admin-token' |
|||
}, |
|||
editor: { |
|||
token: 'editor-token' |
|||
} |
|||
} |
|||
|
|||
const users = { |
|||
'admin-token': { |
|||
roles: ['admin'], |
|||
introduction: 'I am a super administrator', |
|||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
|||
name: 'Super Admin' |
|||
}, |
|||
'editor-token': { |
|||
roles: ['editor'], |
|||
introduction: 'I am an editor', |
|||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
|||
name: 'Normal Editor' |
|||
} |
|||
} |
|||
|
|||
module.exports = [ |
|||
// user login
|
|||
{ |
|||
url: '/vue-element-admin/user/login', |
|||
type: 'post', |
|||
response: config => { |
|||
const { username } = config.body |
|||
const token = tokens[username] |
|||
|
|||
// mock error
|
|||
if (!token) { |
|||
return { |
|||
code: 60204, |
|||
message: 'Account and password are incorrect.' |
|||
} |
|||
} |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: token |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// get user info
|
|||
{ |
|||
url: '/vue-element-admin/user/info\.*', |
|||
type: 'get', |
|||
response: config => { |
|||
const { token } = config.query |
|||
const info = users[token] |
|||
|
|||
// mock error
|
|||
if (!info) { |
|||
return { |
|||
code: 50008, |
|||
message: 'Login failed, unable to get user details.' |
|||
} |
|||
} |
|||
|
|||
return { |
|||
code: 20000, |
|||
data: info |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// user logout
|
|||
{ |
|||
url: '/vue-element-admin/user/logout', |
|||
type: 'post', |
|||
response: _ => { |
|||
return { |
|||
code: 20000, |
|||
data: 'success' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
@ -1,48 +0,0 @@ |
|||
/** |
|||
* @param {string} url |
|||
* @returns {Object} |
|||
*/ |
|||
function param2Obj(url) { |
|||
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') |
|||
if (!search) { |
|||
return {} |
|||
} |
|||
const obj = {} |
|||
const searchArr = search.split('&') |
|||
searchArr.forEach(v => { |
|||
const index = v.indexOf('=') |
|||
if (index !== -1) { |
|||
const name = v.substring(0, index) |
|||
const val = v.substring(index + 1, v.length) |
|||
obj[name] = val |
|||
} |
|||
}) |
|||
return obj |
|||
} |
|||
|
|||
/** |
|||
* This is just a simple version of deep copy |
|||
* Has a lot of edge cases bug |
|||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep |
|||
* @param {Object} source |
|||
* @returns {Object} |
|||
*/ |
|||
function deepClone(source) { |
|||
if (!source && typeof source !== 'object') { |
|||
throw new Error('error arguments', 'deepClone') |
|||
} |
|||
const targetObj = source.constructor === Array ? [] : {} |
|||
Object.keys(source).forEach(keys => { |
|||
if (source[keys] && typeof source[keys] === 'object') { |
|||
targetObj[keys] = deepClone(source[keys]) |
|||
} else { |
|||
targetObj[keys] = source[keys] |
|||
} |
|||
}) |
|||
return targetObj |
|||
} |
|||
|
|||
module.exports = { |
|||
param2Obj, |
|||
deepClone |
|||
} |
|||
@ -1,34 +0,0 @@ |
|||
// 接口监控看板相关api
|
|||
import request from '@/utils/request' |
|||
let base_api = localStorage.getItem('base') |
|||
|
|||
// 获取表头zh转义数据
|
|||
export function getInterfaceBoard() { |
|||
return request({ |
|||
method:'get', |
|||
url: base_api + '/api/abp/application-localization', |
|||
params:{ |
|||
CultureName:localStorage.getItem('browserLanguage'), |
|||
OnlyDynamics:false |
|||
} |
|||
// params:{IncludeLocalizationResources:true}
|
|||
}) |
|||
} |
|||
|
|||
// 获取菜单数据
|
|||
export function getDefinitionMenu(IncludeTypes) { |
|||
return request({ |
|||
method:'get', |
|||
url: base_api + '/api/abp/application-configuration', |
|||
params:{IncludeLocalizationResources:true} |
|||
}) |
|||
} |
|||
|
|||
// 获取枚举数据/dto列类型等所有配置
|
|||
export async function getApiDefinition() { |
|||
return request({ |
|||
method:'get', |
|||
url: base_api + '/api/abp/api-definition', |
|||
params:{IncludeTypes:true} |
|||
}) |
|||
} |
|||
@ -1,49 +0,0 @@ |
|||
import request from '@/utils/request' |
|||
// let baseURL = process.env.VUE_APP_BASE_API + '/'
|
|||
let baseURL = localStorage.getItem('base') + '/api/' |
|||
|
|||
//---------------------------通用---------------------------
|
|||
//任务流程——承接
|
|||
export function accept(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/accept/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——关闭
|
|||
export function close(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/close/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——取消
|
|||
export function cancel(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/cancel/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——取消承接 | 采购收货任务
|
|||
export function cancelAccept(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/cancel-accept/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
|
|||
//任务流程——打开
|
|||
export function open(url, data) { |
|||
return request({ |
|||
url: baseURL + url + '/open/'+data.id, |
|||
method: 'post', |
|||
// params: data
|
|||
}) |
|||
} |
|||
@ -1,337 +0,0 @@ |
|||
<template> |
|||
<!-- v-if="errorLogs.length>0" --> |
|||
<div> |
|||
<el-dialog :visible.sync="dialogVisible" width="80%" top="8vh" append-to-body> |
|||
<div slot="title"> |
|||
<span style="padding-right: 10px;">消息列表</span> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="12"> |
|||
<el-table |
|||
v-loading="hasReadLoading" |
|||
:data="tableDataHasRead" |
|||
height="400" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowHasReadClick" |
|||
> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="hasRead" |
|||
label="状态" |
|||
align="center" |
|||
sortable="custom" |
|||
> |
|||
<template slot-scope="scope" > |
|||
<span v-if="scope.row.hasRead == true">已读</span> |
|||
<span v-else-if="scope.row.hasRead == false">未读</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="readTime" |
|||
label="已读时间" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
</el-table> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-table |
|||
v-loading="notReadLoading" |
|||
:data="tableData" |
|||
height="400" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowClick" |
|||
> |
|||
<el-table-column |
|||
prop="title" |
|||
label="标题" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="hasRead" |
|||
label="状态" |
|||
align="center" |
|||
sortable="custom" |
|||
> |
|||
<template slot-scope="scope" > |
|||
<span v-if="scope.row.hasRead == true">已读</span> |
|||
<span v-else-if="scope.row.hasRead == false">未读</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="creationTime" |
|||
label="创建时间" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
</el-table> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- <div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> --> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="close">关 闭</el-button> |
|||
<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> --> |
|||
</span> |
|||
<el-dialog |
|||
width="30%" |
|||
:title="details.titleDialog" |
|||
:visible.sync="innerVisible" |
|||
append-to-body> |
|||
<el-descriptions direction="vertical" :column="2" border v-loading="DialogLoading"> |
|||
<el-descriptions-item label="消息标题">{{details.title}}</el-descriptions-item> |
|||
<el-descriptions-item label="内容">{{details.content}}</el-descriptions-item> |
|||
<el-descriptions-item label="消息类别">{{details.messageType}}</el-descriptions-item> |
|||
<el-descriptions-item label="创建时间">{{details.sendTime}}</el-descriptions-item> |
|||
</el-descriptions> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="innerVisible = false">关 闭</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { userNotifyNotReadList, userNotifyHasRead, userNotifyMessageUpdate, notifyMessage, getPageList } from "@/api/wms-api" |
|||
import { formatTimeStrToStr } from "@/utils/formatTime" |
|||
export default { |
|||
name: 'News', |
|||
data() { |
|||
return { |
|||
userId: '', |
|||
innerVisible: false, |
|||
details: { |
|||
titleDialog: '', |
|||
title: '', |
|||
content: '', |
|||
messageType: '', |
|||
sendTime: '' |
|||
}, |
|||
hasReadLoading: false, |
|||
notReadLoading: false, |
|||
DialogLoading: false, |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
tableData: [], |
|||
tableDataHasRead:[], |
|||
} |
|||
}, |
|||
props:{ |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
errorLogs() { |
|||
return this.$store.getters.errorLogs |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.userId = this.$store.getters.currentUserInfo.id |
|||
// todo-new: |
|||
// this.getList() |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
// --------未读列表------- |
|||
this.notReadLoading = true |
|||
userNotifyNotReadList(this.userId).then(res => { |
|||
this.tableData = res |
|||
this.tableData.forEach(item => { |
|||
if (item.creationTime) { |
|||
item.creationTime = formatTimeStrToStr(item.creationTime) |
|||
} |
|||
}) |
|||
this.notReadLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.notReadLoading = false |
|||
}) |
|||
// --------已读列表------- |
|||
this.hasReadLoading = true |
|||
userNotifyHasRead(this.userId).then(res => { |
|||
this.tableDataHasRead = res |
|||
this.tableDataHasRead.forEach(item => { |
|||
if (item.readTime) { |
|||
item.readTime = formatTimeStrToStr(item.readTime) |
|||
} |
|||
}) |
|||
this.hasReadLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.hasReadLoading = false |
|||
}) |
|||
|
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.getList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.getList(); |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
this.handleFilter(); |
|||
}, |
|||
//点击table行渲染权限模板 |
|||
handleRowClick(row, column, event) { |
|||
let that = this |
|||
this.innerVisible = true |
|||
this.details.titleDialog = row.title |
|||
this.DialogLoading = true |
|||
notifyMessage({id: row.messageId}, row.messageId).then(res => { |
|||
this.details.title = res.title |
|||
this.details.content = res.content |
|||
this.details.messageType = res.messageType |
|||
this.details.sendTime = formatTimeStrToStr(res.sendTime) |
|||
// 查询消息类型对应数据 |
|||
let params = { |
|||
sorting: null, |
|||
maxResultCount: 1000, |
|||
skipCount: 0, |
|||
condition: { |
|||
filters: null |
|||
} |
|||
} |
|||
getPageList(params,'message/message-type').then(resType => { |
|||
resType.items.forEach(item => { |
|||
if (item.messageTypeCode == res.messageType) { |
|||
that.details.messageType = item.messageTypeName |
|||
} |
|||
}) |
|||
this.DialogLoading = false |
|||
}).catch(err => { |
|||
this.DialogLoading = false |
|||
console.log(err) |
|||
}) |
|||
userNotifyMessageUpdate(row.id).then(res => { |
|||
that.getList(); |
|||
that.$emit('getNoReadCount', that.userId) |
|||
}).catch(err => { |
|||
this.notReadLoading = false |
|||
console.log(err) |
|||
}) |
|||
|
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
// this.$router.push('/taskManage/InspectJob') |
|||
}, |
|||
handleRowHasReadClick(row, column, event) { |
|||
let that = this |
|||
this.innerVisible = true |
|||
this.details.titleDialog = row.title |
|||
this.DialogLoading = true |
|||
notifyMessage({id: row.messageId}, row.messageId).then(res => { |
|||
this.details.title = res.title |
|||
this.details.content = res.content |
|||
this.details.messageType = res.messageType |
|||
this.details.sendTime = formatTimeStrToStr(res.sendTime) |
|||
// 查询消息类型对应数据 |
|||
let params = { |
|||
sorting: null, |
|||
maxResultCount: 1000, |
|||
skipCount: 0, |
|||
condition: { |
|||
filters: null |
|||
} |
|||
} |
|||
getPageList(params,'message/message-type').then(resType => { |
|||
resType.items.forEach(item => { |
|||
if (item.messageTypeCode == res.messageType) { |
|||
that.details.messageType = item.messageTypeName |
|||
} |
|||
}) |
|||
this.DialogLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.DialogLoading = false |
|||
}) |
|||
}, |
|||
close() { |
|||
this.$emit('close') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.message-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-right: 8px; |
|||
} |
|||
.Footer { |
|||
padding: 40px 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
::v-deep .number { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,64 +0,0 @@ |
|||
<template> |
|||
<!-- v-if="errorLogs.length>0" --> |
|||
<div> |
|||
<el-badge v-if="this.noReadCount > 0" :value="this.noReadCount" :max="99" style="line-height: 10px;margin-right:10px" @click.native="dialogClick"> |
|||
<svg-icon icon-class="email" /> |
|||
</el-badge> |
|||
<svg-icon icon-class="email" v-if="this.noReadCount == 0" @click.native="dialogClick"/> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close" @getNoReadCount="getNoReadCount"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { userNotifyHasRead, userNotifyNotReadList, userNotifyMessageUpdate, notifyMessage, getPageList } from "@/api/wms-api" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
import { updateVersion } from '@/utils/upDateVersion' |
|||
export default { |
|||
name: 'News', |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
noReadCount: 0 |
|||
} |
|||
}, |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
mounted () { |
|||
this.userId = this.$store.getters.currentUserInfo.id |
|||
this.getNoReadCount(this.userId) |
|||
this.getSetInterval() |
|||
// 检测版本是否有更新 |
|||
updateVersion() |
|||
}, |
|||
methods: { |
|||
getSetInterval() { |
|||
let that = this |
|||
setInterval(function () { |
|||
that.getNoReadCount(that.userId) |
|||
// 检测版本是否有更新 |
|||
updateVersion() |
|||
},120000) |
|||
}, |
|||
getNoReadCount(userId) { |
|||
let that = this |
|||
// todo-new: |
|||
that.noReadCount = 0 |
|||
// userNotifyNotReadList(userId).then(res => { |
|||
// that.noReadCount = res.length |
|||
// }).catch(err => { |
|||
// console.log(err) |
|||
// }) |
|||
}, |
|||
dialogClick(){ |
|||
this.dialogVisible=true |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
|
|||
File diff suppressed because it is too large
@ -1,56 +0,0 @@ |
|||
import Vue from 'vue' |
|||
import VueI18n from 'vue-i18n' |
|||
import Cookies from 'js-cookie' |
|||
// import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
|
|||
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
|
|||
// import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
|
|||
// import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
|
|||
// import enLocale from './en'
|
|||
import zhLocale from './zh' |
|||
// import esLocale from './es'
|
|||
// import jaLocale from './ja'
|
|||
|
|||
Vue.use(VueI18n) |
|||
|
|||
const messages = { |
|||
// en: {
|
|||
// ...enLocale,
|
|||
// ...elementEnLocale
|
|||
// },
|
|||
zh: { |
|||
...zhLocale, |
|||
...elementZhLocale |
|||
}, |
|||
// es: {
|
|||
// ...esLocale,
|
|||
// ...elementEsLocale
|
|||
// },
|
|||
// ja: {
|
|||
// ...jaLocale,
|
|||
// ...elementJaLocale
|
|||
// }
|
|||
} |
|||
export function getLanguage() { |
|||
const chooseLanguage = Cookies.get('language') |
|||
if (chooseLanguage) return chooseLanguage |
|||
|
|||
// if has not choose language
|
|||
const language = (navigator.language || navigator.browserLanguage).toLowerCase() |
|||
const locales = Object.keys(messages) |
|||
for (const locale of locales) { |
|||
if (language.indexOf(locale) > -1) { |
|||
return locale |
|||
} |
|||
} |
|||
//return 'en'
|
|||
return 'zh' |
|||
} |
|||
const i18n = new VueI18n({ |
|||
// set locale
|
|||
// options: en | zh | es
|
|||
locale: getLanguage(), |
|||
// set locale messages
|
|||
messages |
|||
}) |
|||
|
|||
export default i18n |
|||
@ -1,118 +0,0 @@ |
|||
export default { |
|||
// 字段通用
|
|||
ColumsPublic:{ |
|||
id:'ID', |
|||
remark:'备注', |
|||
description:'描述', |
|||
status:'状态', |
|||
type:'类型', |
|||
creationTime:'创建时间', |
|||
creatorId:'创建者ID', |
|||
lastModificationTime:'上次修改时间', |
|||
lastModifierId:'上次修改者ID', |
|||
beginTime:'开始时间', |
|||
endTime:'结束时间', |
|||
operation:'操作', |
|||
}, |
|||
|
|||
// 所有字段（除了接口监控看板）
|
|||
ColumsNames:{ |
|||
itemCode:'物品代码', |
|||
itemName:'物品名称', |
|||
itemDesc1:'物品描述', |
|||
itemDesc2:'物品描述2', |
|||
abcClass:'ABC类', |
|||
canMake:'制造件', |
|||
canBuy:'采购件', |
|||
canOutsourcing:'外包件', |
|||
isRecycled:'回收件', |
|||
isPhantom:'是否虚拟物件', |
|||
productLine:'产品类', |
|||
elevel:'Elevel', |
|||
color:'颜色', |
|||
category:'种类', |
|||
group:'分组', |
|||
configuration:'配置', |
|||
basicUom:'基本计量单位', |
|||
stdPackQty:'标包数', |
|||
project:'项目', |
|||
version:'版本', |
|||
eco:'工程变革', |
|||
validity:'有效期', |
|||
validityUnit:'有效期单位', |
|||
manageType:'管理类型', |
|||
supplierCode:'供应商代码', |
|||
inspectType:'检验类型', |
|||
categoryCode:'分类代码', |
|||
categoryValue:'分类值', |
|||
packCode:'包装代码', |
|||
packName:'包装名称', |
|||
packType:'包装类型', |
|||
packQty:'包装数量', |
|||
packBasicUom:'包装计量单位', |
|||
ceilingQty:'数量上限', |
|||
floorQty:'数量下限', |
|||
isUsePercent:'使用百分比', |
|||
samplePercent:'抽检百分比', |
|||
sampleQty:'抽检数量', |
|||
productCode:'父物品号', |
|||
componentCode:'子物品号', |
|||
componentQty:'子物品用量', |
|||
componentUom:'子物品用量单位', |
|||
erpOp:'ERP工序', |
|||
mfgOp:'制造工序', |
|||
distributionType:'配送方式', |
|||
truncType:'取整方式', |
|||
plannedSplitRule:'计划拆分规则', |
|||
layer:'层级', |
|||
tenantId:'事务ID', |
|||
customerCode:'客户代码', |
|||
customerName:'客户名称', |
|||
customerShortName:'客户简称', |
|||
customerItemCode:'客户物品代码', |
|||
customerPackQty:'客户包装数量', |
|||
customerPackUom:'客户包装数量单位', |
|||
customerAdrName:'客户地址名称', |
|||
customerAdrCode:'客户地址代码', |
|||
contact:'联系人', |
|||
phone:'电话', |
|||
fax:'传真', |
|||
postID:'邮编', |
|||
address:'地址', |
|||
country:'国家', |
|||
city:'城市', |
|||
currency:'货币', |
|||
warehouseCode:'仓库', |
|||
locationCode:'库位代码', |
|||
projectCode:'项目代码', |
|||
projectName:'项目名称', |
|||
}, |
|||
|
|||
// 接口监控看板
|
|||
// 现使用接口数据：config文件中【interfaceBoardUrl】+【interfaceBoardColumnsApi】地址
|
|||
// ColumsDashboard:{
|
|||
// number:'编号',
|
|||
// dataType:'数据类型',
|
|||
// tableType:'数据表类型',
|
|||
// dataAction:'数据动作',
|
|||
// effectiveDate:'生效时间',
|
|||
// status:'数据状态',
|
|||
// dataIdentityCode:'数据识别码',
|
|||
// dataContent:'数据内容',
|
|||
// sourceSystem:'来源系统',
|
|||
// sourceDataId:'来源数据ID',
|
|||
// sourceDataGroupCode:'来源数据组码',
|
|||
// sourceDataDetailCode:'来源数据明细码',
|
|||
// sourceDataContent:'来源数据内容',
|
|||
// writeTime:'写入时间',
|
|||
// writer:'写入者',
|
|||
// destinationSystem:'目标系统',
|
|||
// destinationDataId:'目标数据ID',
|
|||
// destinationDataContent:'目标数据内容',
|
|||
// readTime:'读取时间',
|
|||
// reader:'读取者',
|
|||
// errorCode:'错误代码',
|
|||
// errorMessage:'错误信息',
|
|||
// retryTimes:'重试次数',
|
|||
// }
|
|||
} |
|||
@ -1,330 +0,0 @@ |
|||
// 打印功能数据整合
|
|||
import { Enum } from "@/utils/index" |
|||
import store from '@/store/index' |
|||
/**/ |
|||
// 打印【箱标签-单个】 (xiangbq.rdlx)
|
|||
// 使用位置：补打标签 (RepairLabels.vue)
|
|||
/** |
|||
* @param {*} propsData 必填 详情数据 示例：this.propsData |
|||
* @param {*} options 自定义特殊配置值 示例：{'number':'poNumber'} (number值将传为poNumber) |
|||
* @param {*} name reportName |
|||
* @param {*} url dataUrl |
|||
* @returns |
|||
*/ |
|||
export function initPrintPackingCodeData(propsData,options,name,url){ |
|||
if(!propsData || propsData.details.length <= 0)return {} |
|||
let _printData = { |
|||
"boxlabel":[] |
|||
} |
|||
let _options = options ? options : {} |
|||
propsData.details.forEach((item,key) => { |
|||
_printData["boxlabel"].push({ |
|||
"title":propsData[_options.title] || propsData.title || "FATY 物品发运单",//title
|
|||
"supplierSimpleName": propsData[_options.supplierSimpleName] || propsData.supplierSimpleName,//供应商名称
|
|||
"supplierCode": propsData[_options.supplierCode] || propsData.supplierCode,//供应商代码
|
|||
"poNumber": propsData[_options.poNumber] || propsData.poNumber,//订单号
|
|||
"asnNumber": propsData[_options.asnNumber] || propsData.asnNumber,//发货单号
|
|||
"remark": propsData[_options.remark] || propsData.remark,//备注
|
|||
"planArriveDate":propsData[_options.planArriveDate] || propsData.planArriveDate,//要求到货时间
|
|||
// "contacts": propsData[_options.contacts] || propsData.contacts,//客户名称 暂未使用
|
|||
// "customerAddressCode":propsData[_options.customerAddressCode] || propsData.customerAddressCode,//客户地址 暂未使用
|
|||
// "supplierName": propsData[_options.supplierName] || propsData.supplierName,//供应商名称 暂未使用
|
|||
"details": [ |
|||
{ |
|||
"supplierItemName": item[_options.supplierItemName] || item.supplierItemName,//零件名(供应商零件名)
|
|||
"supplierItemCode": item[_options.supplierItemCode] || item.supplierItemCode,//零件号(供应商零件号)
|
|||
"specifications": item[_options.specifications] || item.specifications,//规格
|
|||
"produceDate": item[_options.produceDate] || item.produceDate,//生产时间
|
|||
"lot": item[_options.lot] || item.lot,//生产批次
|
|||
"locationErpCode": item[_options.locationErpCode] || item.locationErpCode,//储位
|
|||
"itemCode": item[_options.itemCode] || item.itemCode,//物品代码（ERP号）
|
|||
"qty": item[_options.qty] || item.qty,//要货数量 + 整包数量
|
|||
"packingCode": item[_options.packingCode] || item.packingCode,//条形码
|
|||
"printIndex":item[_options.printIndex] || Number(key)+1,//打印序列
|
|||
// "itemName": item[_options.itemName] || item.itemName,//物品名称 暂未使用
|
|||
"stdPackQty": item[_options.stdPackQty] || item.stdPackQty,//整包数量 暂未使用
|
|||
} |
|||
], |
|||
}) |
|||
}); |
|||
let data = { |
|||
reportName: name || 'xiangbq.rdlx', |
|||
dataUrl: url || 'ccc', |
|||
jsonData: JSON.stringify(_printData) |
|||
}; |
|||
return data |
|||
} |
|||
|
|||
//打印【箱标签-上下2个】（xiangbq_two.rdlx）
|
|||
//使用位置：拆分箱标签 (splitLabels.vue)
|
|||
/** |
|||
* @param {*} propsData 必填 详情数据 示例：this.propsData |
|||
* @param {*} options 自定义特殊配置值 示例：{'number':'poNumber'} (number值将传为poNumber) |
|||
* @param {*} name reportName |
|||
* @param {*} url dataUrl |
|||
* @returns |
|||
*/ |
|||
export function initPrintPackingCodeTwoData(oldData,newData,options,name,url){ |
|||
if(!oldData && !newData)return {} |
|||
let _printData = {} |
|||
let _options = options ? options : {} |
|||
// 上方信息
|
|||
if(oldData){ |
|||
_printData={ |
|||
"oldTitle":oldData[_options.title] || oldData.title || "FATY 物品发运单",//上方_title
|
|||
"oldSupplierSimpleName": oldData[_options.supplierSimpleName] || oldData.supplierSimpleName,//上方_供应商名称
|
|||
"oldSupplierCode": oldData[_options.supplierCode] || oldData.supplierCode,//上方_供应商代码
|
|||
"oldPoNumber": oldData[_options.poNumber] || oldData.poNumber,//上方_订单号
|
|||
"oldAsnNumber": oldData[_options.asnNumber] || oldData.asnNumber,//上方_发货单号
|
|||
"oldRemark": oldData[_options.remark] || oldData.remark,//上方_备注
|
|||
"oldPlanArriveDate":oldData[_options.planArriveDate] || oldData.planArriveDate,//上方_要求到货时间
|
|||
"oldSupplierItemName": oldData[_options.supplierItemName] || oldData.supplierItemName,//上方_零件名(供应商零件名)
|
|||
"oldSupplierItemCode": oldData[_options.supplierItemCode] || oldData.supplierItemCode,//上方_零件号(供应商零件号)
|
|||
"oldSpecifications": oldData[_options.specifications] || oldData.specifications,//上方_规格
|
|||
"oldProduceDate": oldData[_options.produceDate] || oldData.produceDate,//上方_生产时间
|
|||
"oldLot": oldData[_options.lot] || oldData.lot,//上方_生产批次
|
|||
"oldLocationErpCode": oldData[_options.locationErpCode] || oldData.locationErpCode,//上方_储位
|
|||
"oldItemCode": oldData[_options.itemCode] || oldData.itemCode,//上方_物品代码（ERP号）
|
|||
"oldQty": oldData[_options.qty] || oldData.qty,//上方_要货数量
|
|||
"oldStdPackQty": oldData[_options.stdPackQty] || oldData.stdPackQty,//上方_整包数量
|
|||
"oldPackingCode": oldData[_options.packingCode] || oldData.packingCode,//上方_条形码
|
|||
"oldPrintIndex":oldData[_options.printIndex] || 1,//上方_打印序列
|
|||
..._printData |
|||
} |
|||
} |
|||
// 下方信息
|
|||
if(newData){ |
|||
_printData={ |
|||
"newTitle":newData[_options.title] || newData.title || "FATY 物品发运单",//下方_title
|
|||
"newSupplierSimpleName": newData[_options.supplierSimpleName] || newData.supplierSimpleName,//下方_供应商名称
|
|||
"newSupplierCode": newData[_options.supplierCode] || newData.supplierCode,//下方_供应商代码
|
|||
"newPoNumber": newData[_options.poNumber] || newData.poNumber,//下方_订单号
|
|||
"newAsnNumber": newData[_options.asnNumber] || newData.asnNumber,//下方_发货单号
|
|||
"newRemark": newData[_options.remark] || newData.remark,//下方_备注
|
|||
"newPlanArriveDate":newData[_options.planArriveDate] || newData.planArriveDate,//下方_要求到货时间
|
|||
"newSupplierItemName": newData[_options.supplierItemName] || newData.supplierItemName,//下方_零件名(供应商零件名)
|
|||
"newSupplierItemCode": newData[_options.supplierItemCode] || newData.supplierItemCode,//下方_零件号(供应商零件号)
|
|||
"newSpecifications": newData[_options.specifications] || newData.specifications,//下方_规格
|
|||
"newProduceDate": newData[_options.produceDate] || newData.produceDate,//下方_生产时间
|
|||
"newLot": newData[_options.lot] || newData.lot,//下方_生产批次
|
|||
"newLocationErpCode": newData[_options.locationErpCode] || newData.locationErpCode,//下方_储位
|
|||
"newItemCode": newData[_options.itemCode] || newData.itemCode,//下方_物品代码（ERP号）
|
|||
"newQty": newData[_options.qty] || newData.qty,//下方_数量 + 整包数量
|
|||
"newStdPackQty": newData[_options.stdPackQty] || newData.stdPackQty,//上方_整包数量
|
|||
"newPackingCode": newData[_options.packingCode] || newData.packingCode,//下方_条形码
|
|||
"newPrintIndex":newData[_options.printIndex] || 1,//下方_打印序列
|
|||
..._printData |
|||
} |
|||
} |
|||
let data = { |
|||
reportName: name || 'xiangbq_two.rdlx', |
|||
dataUrl: url || 'ccc', |
|||
jsonData: JSON.stringify(_printData) |
|||
}; |
|||
return data |
|||
} |
|||
|
|||
|
|||
// 打印【箱标签-单页4个】 (xiangbq_many.rdlx)
|
|||
// 使用位置：半成品上架标签 (PartiallyPreparedProducts.vue) | 生产退库标签 (productionReturnLabel.vue)
|
|||
// | 创建标签 (RecycledMaterialsLabel.vue) | 到货请求 (PurchaseReceiptRequest.vue)
|
|||
/** |
|||
* @param {*} propsData 必填 详情数据 示例：this.propsData |
|||
* @param {*} options 自定义特殊配置值 示例：{'number':'poNumber'} (number值将传为poNumber) |
|||
* @param {*} name reportName |
|||
* @param {*} url dataUrl |
|||
* @returns |
|||
*/ |
|||
export function initPrintPackingCodeManyData(propsData,options,name,url){ |
|||
if(!propsData || propsData.details.length <= 0)return {} |
|||
let _printData = { |
|||
"boxlabel":[] |
|||
} |
|||
let _options = options ? options : {} |
|||
// 按4个分组数据
|
|||
let newList = [] |
|||
let chunk = 4; |
|||
propsData.details.forEach((item,key)=>{ |
|||
item.printIndex = Number(key + 1) |
|||
}) |
|||
for(var i = 0; i < propsData.details.length ;i+=chunk) { |
|||
newList.push(propsData.details.slice(i,i + chunk)) |
|||
} |
|||
let _index = null |
|||
newList.forEach((item,key)=>{ |
|||
let _label = {} |
|||
item.forEach((item2,key2)=>{ |
|||
if(key2 == 0){ |
|||
if(!_index){ |
|||
_index = '0' |
|||
}else{ |
|||
_index = Number(_index) + 1 |
|||
} |
|||
} |
|||
let _title = propsData ? "FATY 物品发运单" : "" |
|||
_label['title'+Number(key2 + 1)]=propsData[_options.title] || propsData.title || _title,//title
|
|||
_label['contacts'+Number(key2 + 1)]= propsData[_options.contacts] || propsData.contacts,//客户名称
|
|||
_label['customerAddressCode'+Number(key2 + 1)]=propsData[_options.customerAddressCode] || propsData.customerAddressCode,//客户地址
|
|||
_label['supplierCode'+Number(key2 + 1)]= propsData[_options.supplierCode] || propsData.supplierCode,//供应商代码
|
|||
_label['supplierSimpleName'+Number(key2 + 1)]= propsData[_options.supplierSimpleName] || propsData.supplierSimpleName,//供应商名称（简称）
|
|||
_label['remark'+Number(key2 + 1)]= propsData[_options.remark] || propsData.remark,//备注
|
|||
_label['planArriveDate'+Number(key2 + 1)]=propsData[_options.planArriveDate] || propsData.planArriveDate,//要求到货时间
|
|||
_label['poNumber'+Number(key2 + 1)]= propsData[_options.poNumber] || propsData.poNumber,//订单号
|
|||
_label['asnNumber'+Number(key2 + 1)]= propsData[_options.asnNumber] || propsData.asnNumber,//发货单号
|
|||
|
|||
_label['supplierItemName'+Number(key2 + 1)] = item[_options.supplierItemName] || item2.supplierItemName;//零件名(供应商零件名)
|
|||
_label['supplierItemCode'+Number(key2 + 1)] = item[_options.supplierItemCode] || item2.supplierItemCode;//零件号(供应商零件号)
|
|||
_label['specifications'+Number(key2 + 1)] = item[_options.specifications] || item2.specifications;//规格
|
|||
_label['produceDate'+Number(key2 + 1)] = item[_options.produceDate] || item2.produceDate;//生产时间
|
|||
_label['lot'+Number(key2 + 1)] = item[_options.lot] || item2.lot;//生产批次
|
|||
_label['locationErpCode'+Number(key2 + 1)] = item[_options.locationErpCode] || item2.locationErpCode;//储位
|
|||
_label['itemCode'+Number(key2 + 1)] = item[_options.itemCode] || item2.itemCode;//物品代码（ERP号）
|
|||
_label['stdPackQty'+Number(key2 + 1)] = item[_options.stdPackQty] || item2.stdPackQty;//整包数量 暂未使用
|
|||
_label['qty'+Number(key2 + 1)] = item[_options.qty] || item2.qty;//要货数量 + 整包数量
|
|||
_label['packingCode'+Number(key2 + 1)] = item[_options.packingCode] || item2.packingCode;//条形码
|
|||
_label['printIndex'+Number(key2 + 1)] = item[_options.printIndex] || item2.printIndex;//序号
|
|||
|
|||
_printData.boxlabel[_index] = _label |
|||
}) |
|||
}) |
|||
let data = { |
|||
reportName: name || 'xiangbq_many.rdlx', |
|||
dataUrl: url || 'ccc', |
|||
jsonData: JSON.stringify(_printData) |
|||
}; |
|||
return data |
|||
} |
|||
|
|||
// 字典转义
|
|||
const printEnumOption = { |
|||
UnqualifiedReason:{reportStr:'reasonStr',staName:'UnqualifiedReason',value:'reason'}, |
|||
PurReturnReason:{reportStr:'reasonStr',staName:'PurReturnReason',value:'reason'}, |
|||
Reason:{reportStr:'reasonStr',staName:'Reason',value:'reasonCode'}, |
|||
AdjustmentReason:{reportStr:'reasonStr',staName:'AdjustmentReason',value:'reasonCode'}, |
|||
} |
|||
|
|||
/**/ |
|||
// 打印【全部数据】
|
|||
/** |
|||
* @param {*} propsData 必填 详情数据 示例：this.propsData |
|||
* @param {*} name 必填 reportName |
|||
* @param {*} enumOption 选填 转义状态 如果是字符串直接走[printEnumOption]格式， |
|||
* 如果自定义格式：{reportStr:'报表中用到的值'，staName:'localStorage中的名称'，value:'要转义的detail中的值',label:"可不填，默认label"} |
|||
* @param {*} options 选填 自定义特殊配置值 示例：{'number':'poNumber'} (number值将传为poNumber) |
|||
* @param {*} url 选填 dataUrl |
|||
* @returns |
|||
*/ |
|||
//
|
|||
export function initPrintAllData(propsData,name,enumOption,options,url){ |
|||
if(!propsData || propsData.details.length <= 0)return false |
|||
let _printData = {details:[]} |
|||
let _outData = {} |
|||
for(var key in propsData){ |
|||
if(key != 'details')_outData[key] = propsData[key] |
|||
if(options){ |
|||
for(var op in options){ |
|||
if(op != 'details')_outData[op] = propsData[options[op]] |
|||
} |
|||
} |
|||
} |
|||
_outData.title = propsData.title || '' |
|||
_outData.headerName = propsData.headerName || localStorage.getItem('companyName') |
|||
propsData.details.forEach((item,key) => { |
|||
// 序号
|
|||
item.xh = Number(key) + 1; |
|||
// 特殊配置
|
|||
if(options && options.details){ |
|||
for(var op in options.details){ |
|||
item[op] = item[options.details[op]] |
|||
} |
|||
} |
|||
// 转义字典
|
|||
if(enumOption){ |
|||
let _enumOption = (typeof enumOption == 'string') ? printEnumOption[enumOption] : enumOption |
|||
item[_enumOption.reportStr] = Enum(store.getters.dictionaries[_enumOption.staName], item[_enumOption.value] , _enumOption.label || 'label') |
|||
} |
|||
let _item = Object.assign({},item, _outData); |
|||
_printData.details.push(_item) |
|||
}); |
|||
let data = { |
|||
reportName: name, |
|||
dataUrl: url || 'ccc', |
|||
jsonData: JSON.stringify(_printData) |
|||
}; |
|||
return data |
|||
} |
|||
|
|||
// 当前模板数据
|
|||
/**todo:储位，预计量，字段确定 */ |
|||
// cgshd.rdlx 使用参数
|
|||
// 使用位置:采购收货记录-合格品收货明细tab页 (PurchaseReceiptNote-msQuery.vue)
|
|||
// 发货单号:asnNumber; 制表日:creationTime; 供应商:supplierCode; 供应商简称:supplierShortName
|
|||
// 物品代码:itemCode; 物品名称:itemName; 箱码:packingCode; 单位:uom; 数量:qty; 状态:statusStr; 不合格原因:reasonStr;
|
|||
|
|||
// thd.rdlx 使用参数
|
|||
// 使用位置:上架前退货记录 (beforeGroundingReturnNote.vue) | 上架后退货记录 (purchaseReturn => returnNote.vue PurchaseReturnNote)
|
|||
// 使用位置:采购收货记录-不合格品收货明细tab页 (PurchaseReceiptNote-msQuery.vue)
|
|||
// 退货单号:number; 发货单号:asnNumber; 制表日:creationTime; 供应商:supplierCode; 供应商简称:supplierShortName
|
|||
// 物品代码:itemCode; 物品名称:itemName; 箱码:packingCode; 单位:uom; 数量:qty; 退货原因:reasonStr;
|
|||
|
|||
// lineSideWarehouse.rdlx 使用参数
|
|||
// 使用位置:线边仓调拨记录 (lineSideWarehouseAllocationNote.vue)
|
|||
// 调拨单号:number; 参考单据:poNumber; 制表日:creationTime; 调拨部门:deptCode; 部门名称:deptName
|
|||
// 物品代码:itemCode; 单位:uom; 预计调拨量:preQty; 调入储位:toLocationCode; 实际调拨量:qty; 调出储位:fromLocationCode;
|
|||
|
|||
// fscll.rdlx | fsctl.rdlx 使用参数
|
|||
// 使用位置:非生产领料申请 (pickingRequest.vue - fscll.rdlx)
|
|||
// 使用位置:非生产退料申请 (materialReturnRequest.vue - fsctl.rdlx)
|
|||
// 单号:number; 参考单据：？; 制表日:creationTime; 部门代码:deptCode; 部门名称:deptName; 项目分类名称:projCapacityName; 专案代码:caseCode; 说明:remark
|
|||
// 料品编号:itemCode; 品名:itemName; 单位:uom; 预计量:preQty; 实际量:qty; 储位:locationCode; 配置:configuration
|
|||
|
|||
// cwdbd.rdlx 使用参数
|
|||
// 使用位置:储位调拨记录 (interStorageAllocationNote.vue)
|
|||
// 调拨单号:number; 制表日:creationTime; 调拨日期:activeDate
|
|||
// 物品代码:itemCode; 物品名称:itemName; 单位:uom; 调出储位:fromLocationCode; 调入储位:toLocationCode; 调拨量:qty;
|
|||
|
|||
// khcwdbd.rdlx 使用参数
|
|||
// 使用位置:客户储位调拨记录 (customerStorageAllocationNote.vue)
|
|||
// 调拨单号:number; 制表日:creationTime; 使用者:worker; 部门代码:deptCode; 客户储位:toLocationCode
|
|||
// 序号:xh; 物品代码:itemCode; 物品名称:itemName; 预计调拨量:preQty; 实际调拨量:qty; 调出储位:fromLocationCode;
|
|||
|
|||
// xbcbfd.rdlx 使用参数
|
|||
// 使用位置:线边仓报废记录 (lineSideWarehouseScrappingNote.vue)
|
|||
// 报废单号:number; 制表日:creationTime;
|
|||
// 物品代码:itemCode; 物品名称:itemName; 储位:fromLocationCode; 数量:qty; 原因说明:reasonStr; 参考单据:scrapRequestNumber;
|
|||
|
|||
// tzd.rdlx 使用参数
|
|||
// 使用位置:线边仓调整记录 (lineSideWarehouseAdjustmentSheetNote.vue)
|
|||
// 单号:number; 制表日:creationTime;
|
|||
// 物品代码:itemCode; 物品名称:itemName; 储位:locationCode; 数量:adjustQty; 原因说明:reasonStr; 参考单据:requestNumber;
|
|||
|
|||
// xbcll.rdlx 使用参数
|
|||
// 使用位置:?自动发料任务 (automaticCallJob-msQuery.vue) | 自动发料记录 (automaticCallNote.vue)
|
|||
// 使用位置:人工发料任务 (IssueJob.vue) | 人工发料记录 (IssueNote.vue)
|
|||
// 单号:number; 制表日:creationTime; 部门名称:deptName;
|
|||
// 物品代码:itemCode; 物品名称:itemName; 物品描述:itemDesc1; 零件号:itemCode; 来源库位:fromLocationCode;
|
|||
// 实际数量:qty; 单位:uom; 批次:fromLot; 调入储位:toLocationErpCode; 调出储位:fromLocationErpCode;
|
|||
|
|||
// xbctl.rdlx 使用参数 xbctl.rdlx报表 和 xbcll.rdlx报表 目前字段相同，除了领/退字段
|
|||
// 使用位置:生产退库记录 (productionReturn => returnNote.vue productionReturnNote)
|
|||
|
|||
// zjfl.rdlx 使用参数
|
|||
// 使用位置:直接发料记录 (directIssueNote.vue)
|
|||
// 单号:number; 制表日:creationTime; 部门名称:deptName;
|
|||
// 物品代码:itemCode; 物品名称:itemName; 物品描述:itemDesc1; 零件号:itemCode; 来源库位:fromLocationCode;
|
|||
// 实际数量:qty; 单位:uom; 批次:fromLot; 调入储位:toLocationErpCode; 调出储位:fromLocationErpCode;
|
|||
|
|||
// hslrkd.rdlx 使用参数
|
|||
// 使用位置:回收料收货记录 (materialsReceipt.vue recycledMaterialsReceipt)
|
|||
// 入库单号:number; 制表日:creationTime; 入库日期:activeDate; 部门代码:deptCode; 部门名称:deptName;
|
|||
// 物品代码:itemCode; 物品名称:itemName; 物品描述1:itemDesc1; 物品描述2:itemDesc2; 数量:qty; 储位:locationErpCode;
|
|||
|
|||
// chdmxb.rdlx 使用参数
|
|||
// 使用位置:原料直发客户记录 (materialDirectSendNote.vue)
|
|||
// 出货单号:number; 出货日期:deliverTime; 制表日:creationTime; 客户名称:customerCode; 客户地址:customerAddressCode;
|
|||
// 序号:xh, 物品代码:itemCode; 物品名称:itemName; 单位:uom; 箱标签:packingCode, 出货数量:qty;
|
|||
|
|||
// ysd.rdlx 使用参数
|
|||
// 使用位置:采购上架记录 (PutawayNote.vue)
|
|||
// 供应商代码:supplierCode; 供应商名称:supplierSimpleName; 制表日:creationTime; 采购单:poNumber; 收货单号:receiptNumber; 验收口:dockCode; 请购部门:deptName;
|
|||
// 物品代码:itemCode; 验收备注:remark; 厂商料品单号:supplierItemCode; 物品名称:itemName; 收料量:qty; 验收日期:arriveDate; 单位:uom; 储位:toLocationErpCode;
|
|||
@ -1,178 +0,0 @@ |
|||
import router from './router' |
|||
import store from './store' |
|||
import { Message } from 'element-ui' |
|||
import NProgress from 'nprogress' // progress bar
|
|||
import 'nprogress/nprogress.css' // progress bar style
|
|||
import { getToken } from '@/utils/auth' // get token from cookie
|
|||
import getPageTitle from '@/utils/get-page-title' |
|||
import { asyncRoutes } from '@/router' |
|||
import { login,getUsersByUserName } from "@/api/wms-auth" |
|||
|
|||
NProgress.configure({ |
|||
showSpinner: false |
|||
}) // NProgress Configuration
|
|||
|
|||
router.beforeEach(async (to, from, next) => { |
|||
// start progress bar
|
|||
NProgress.start() |
|||
// set page title
|
|||
document.title = getPageTitle() |
|||
|
|||
// 获取枚举数据
|
|||
if(!store.getters.enumList || store.getters.enumList.length <= 0){ |
|||
await store.dispatch('definition/getDefinitionConfig') |
|||
} |
|||
|
|||
// // 获取表头转义
|
|||
// if(!store.getters.columZHList || store.getters.columZHList.length <= 0){
|
|||
// await store.dispatch('definition/getColumZHList')
|
|||
// }
|
|||
|
|||
// 判断是否自动登录
|
|||
let isAutoLogin = JSON.parse(localStorage.getItem('isAutoLogin')) |
|||
const columZHList = store.getters.columZHList |
|||
// 如果路径中有isAutoLogin参数则优先，否则读取配置文件中的isAutoLogin参数
|
|||
let _url_isAutoLogin = to.query.isAutoLogin |
|||
if( _url_isAutoLogin== 'false' || _url_isAutoLogin == 'true'){ |
|||
isAutoLogin = JSON.parse(_url_isAutoLogin) |
|||
} |
|||
// 是否有用户信息：
|
|||
const userInfo = store.getters.currentUserInfo |
|||
// 1、如果没有判断是否为自动登录（是自动登录则自动执行登录，账号密码为配置信息中的值，不是自动登录则跳到登录页）
|
|||
// 2、有/没有：则检查是否有api接口的表头数据，没有的话重新获取
|
|||
if(userInfo){ |
|||
console.log('有store.getters.currentUserInfo',store.getters.currentUserInfo) |
|||
if(store.getters.permission_routes && store.getters.permission_routes.length > 0){ |
|||
console.log('有store.getters.permission_routes',store.getters.permission_routes) |
|||
next() |
|||
} |
|||
else{ |
|||
console.log('没有store.getters.permission_routes',store.getters.permission_routes) |
|||
const accessRoutes = await store.dispatch('permission/getApiColumnsNames') |
|||
router.addRoutes(accessRoutes) |
|||
next({ |
|||
...to, |
|||
query:{ |
|||
loginName:to.query.loginName, |
|||
isAutoLogin:to.query.isAutoLogin, |
|||
isSinglePage:to.query.isSinglePage |
|||
}, |
|||
replace: true |
|||
}) |
|||
} |
|||
}else{ |
|||
// console.log('没有store.getters.currentUserInfo',store.getters.currentUserInfo)
|
|||
if(!columZHList){ |
|||
console.log('没有columZHList',columZHList) |
|||
await store.dispatch('definition/getColumZHList') |
|||
// const accessRoutes = await store.dispatch('permission/getApiColumnsNames')
|
|||
// router.addRoutes(accessRoutes)
|
|||
next({ |
|||
...to, |
|||
query:{ |
|||
loginName:to.query.loginName, |
|||
isAutoLogin:to.query.isAutoLogin, |
|||
isSinglePage:to.query.isSinglePage |
|||
}, |
|||
replace: true |
|||
}) |
|||
} |
|||
if(isAutoLogin || to.query.loginName){ |
|||
console.log('有自动登录',isAutoLogin,to.query.loginName) |
|||
// let loginForm= {
|
|||
// userNameOrEmailAddress:localStorage.getItem("userNameOrEmailAddress"),
|
|||
// password:localStorage.getItem("client_secret"),
|
|||
// // rememberMe:true,
|
|||
// // grant_type: 'password',
|
|||
// // client_id: 'Auth_App',
|
|||
// }
|
|||
// // store.dispatch('user/login', loginForm).then(() => {
|
|||
// login(loginForm).then(()=>{
|
|||
let _username = to.query.loginName || localStorage.getItem("isLoginName") || localStorage.getItem("userNameOrEmailAddress") |
|||
if(to.path != '/login'){ |
|||
await store.dispatch('user/getUserInfo',_username).then(()=>{ |
|||
next({ |
|||
...to, |
|||
query:{ |
|||
loginName:to.query.loginName, |
|||
isAutoLogin:to.query.isAutoLogin, |
|||
isSinglePage:to.query.isSinglePage |
|||
}, |
|||
replace: true |
|||
}) |
|||
}).catch(()=>{ |
|||
next() |
|||
// next({
|
|||
// path:'/login',
|
|||
// query:{
|
|||
// isAutoLogin:to.query.isAutoLogin,
|
|||
// isSinglePage:to.query.isSinglePage
|
|||
// },
|
|||
// replace: true
|
|||
// })
|
|||
// next(`/login?loginName=${to.query.loginName}&isAutoLogin=${to.query.isAutoLogin}`)
|
|||
// next(`/login`)
|
|||
Message.error('获取用户信息失败，请重试!') |
|||
}) |
|||
}else{ |
|||
next() |
|||
// next({
|
|||
// ...to,
|
|||
// query:{
|
|||
// loginName:to.query.loginName,
|
|||
// isAutoLogin:to.query.isAutoLogin,
|
|||
// isSinglePage:to.query.isSinglePage
|
|||
// },
|
|||
// replace: true
|
|||
// })
|
|||
} |
|||
// })
|
|||
// .catch((error) => {
|
|||
// console.log('登录失败')
|
|||
// })
|
|||
} |
|||
else{ |
|||
console.log('不自动登录',isAutoLogin,to.query.loginName) |
|||
if (to.path != '/login') { |
|||
Message.error('获取用户信息失败，请重新登录') |
|||
next({ |
|||
path:'/login', |
|||
query:{ |
|||
isAutoLogin:to.query.isAutoLogin, |
|||
loginName:to.query.loginName, |
|||
isSinglePage:to.query.isSinglePage |
|||
}, |
|||
replace: true |
|||
}) |
|||
// next(`/login?loginName=${to.query.loginName}&isAutoLogin=${to.query.isAutoLogin}`)
|
|||
// next(`/login`)
|
|||
}else{ |
|||
// next({
|
|||
// ...to,
|
|||
// query:{
|
|||
// isAutoLogin:to.query.isAutoLogin,
|
|||
// loginName:to.query.loginName,
|
|||
// },
|
|||
// replace: true
|
|||
// })
|
|||
next() |
|||
} |
|||
} |
|||
NProgress.done() |
|||
} |
|||
}) |
|||
|
|||
router.afterEach(() => { |
|||
// element-ui 使用 Tooltip 提示时候，更换页面，提示依旧存在偶现bug处理。
|
|||
const mytooltipList = document.querySelectorAll('.el-tooltip__popper') // 获取页面所有tooltip的dom集合
|
|||
setTimeout(() => { |
|||
mytooltipList.forEach((value) => { |
|||
value.style.display = 'none' |
|||
if(value.parentElement){ |
|||
value.parentElement.removeChild(value) |
|||
} |
|||
}) |
|||
}, 1000) |
|||
// finish progress bar
|
|||
NProgress.done() |
|||
}) |
|||
@ -1,228 +0,0 @@ |
|||
import Vue from 'vue' |
|||
import Router from 'vue-router' |
|||
|
|||
|
|||
Vue.use(Router) |
|||
|
|||
/* Layout */ |
|||
import Layout from '@/layout' |
|||
|
|||
/* Router Modules */ |
|||
|
|||
// import basicDataRouter from './modules/basicData'
|
|||
// import personRouter from './modules/person'
|
|||
// import inventoryManageRouter from "./modules/inventoryManage"
|
|||
// import systemManageRouter from "./modules/systemManage"
|
|||
// import activeReportManageRouter from "./modules/activeReport"
|
|||
// import manageRouter from "./modules/manageRouter"
|
|||
// import rawMaterialManage from "./modules/rawMaterialManage"
|
|||
// import finishedProductManage from "./modules/finishedProductManage"
|
|||
// import labelManageRouter from "./modules/labelManageRouter"
|
|||
|
|||
// import storageManageRouter from "./modules/StorageManage"
|
|||
// import productionManageRouter from "./modules/productionManage"
|
|||
// import allocationManageRouter from "./modules/allocationManage"
|
|||
// import deliverGoodsRouter from "./modules/deliverGoods"
|
|||
// import recordQueryRouter from "./modules/recordQuery"
|
|||
// import qualityManageRouter from "./modules/qualityManage"
|
|||
// import taskManageRouter from "./modules/taskManage"
|
|||
|
|||
|
|||
|
|||
/** |
|||
* Note: sub-menu only appear when route children.length >= 1 |
|||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
|||
* |
|||
* hidden: true if set true, item will not show in the sidebar(default is false) |
|||
* alwaysShow: true if set true, will always show the root menu |
|||
* if not set alwaysShow, when item has more than one children route, |
|||
* it will becomes nested mode, otherwise not show the root menu |
|||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb |
|||
* name:'router-name' the name is used by <keep-alive> (must set!!!) |
|||
* meta : { |
|||
roles: ['admin','editor'] control the page roles (you can set multiple roles) |
|||
title: 'title' the name show in sidebar and breadcrumb (recommend set) |
|||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar |
|||
noCache: true if set true, the page will no be cached(default is false) |
|||
affix: true if set true, the tag will affix in the tags-view |
|||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) |
|||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set |
|||
} |
|||
*/ |
|||
|
|||
/** |
|||
* constantRoutes |
|||
* a base page that does not have permission requirements |
|||
* all roles can be accessed |
|||
*/ |
|||
export const constantRoutes = [ |
|||
{ |
|||
path: '/redirect', |
|||
component: Layout, |
|||
hidden: true, |
|||
children: [{ |
|||
path: '/redirect/:path(.*)', |
|||
component: () => import('@/views/redirect/index') |
|||
}] |
|||
}, |
|||
// {
|
|||
// path: '/testForm',
|
|||
// component: () => import('@/views/testForm/index'),
|
|||
// hidden: true
|
|||
// },
|
|||
{ |
|||
path: '/login', |
|||
component: () => import('@/views/login/index'), |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/404', |
|||
component: () => import('@/views/error-page/404'), |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/401', |
|||
component: () => import('@/views/error-page/401'), |
|||
hidden: true |
|||
}, |
|||
{ |
|||
path: '/profileuser', |
|||
component: Layout, |
|||
redirect: '/profileuser/index', |
|||
hidden: true, |
|||
children: [{ |
|||
path: 'index', |
|||
component: () => import('@/views/profileuser/index'), |
|||
name: 'Profileuser', |
|||
meta: { |
|||
title: '个人中心', |
|||
icon: 'user', |
|||
noCache: true |
|||
} |
|||
}] |
|||
}, |
|||
{ |
|||
path: '/', |
|||
component: Layout, |
|||
redirect: '/dashboard', |
|||
// hidden: true,
|
|||
children: [{ |
|||
path: 'dashboard', |
|||
component: () => import('@/views/dashboard/index'), |
|||
name: 'Dashboard', |
|||
meta: { |
|||
keepAlive : true, |
|||
title: '系统首页', |
|||
icon: '系统首页', |
|||
outerFirst:true |
|||
// affix: true
|
|||
} |
|||
}] |
|||
}, |
|||
// {
|
|||
// path: '/',
|
|||
// component: Layout,
|
|||
// redirect: '/gridlayout',
|
|||
// hidden: true,
|
|||
// children: [{
|
|||
// path: 'gridlayout',
|
|||
// component: () => import('@/views/gridLayout/indexShow'),
|
|||
// name: 'Gridlayout',
|
|||
// meta: {
|
|||
// keepAlive : true,
|
|||
// title: '首页编辑器',
|
|||
// icon: '系统首页',
|
|||
// }
|
|||
// }]
|
|||
// },
|
|||
|
|||
// 开发中模拟路由
|
|||
// {
|
|||
// path: '/',
|
|||
// component: Layout,
|
|||
// redirect: '/TestSchool',
|
|||
// hidden: true,
|
|||
// children: [{
|
|||
// path: 'TestSchool',
|
|||
// component: () => import('@/views/interfaceBoard/TestSchool.vue'),
|
|||
// name: 'TestSchool',
|
|||
// meta: {
|
|||
// title: 'TestSchool',
|
|||
// icon: '拆分记录',
|
|||
// }
|
|||
// }]
|
|||
// },
|
|||
// {
|
|||
// path: '/',
|
|||
// component: Layout,
|
|||
// redirect: '/_dashboard2',
|
|||
// hidden: true,
|
|||
// children: [{
|
|||
// path: '_dashboard2',
|
|||
// component: () => import('@/views/dashboard/_index2'),
|
|||
// name: '_dashboard2',
|
|||
// meta: {
|
|||
// title: '_dashboard2',
|
|||
// icon: '系统首页',
|
|||
// }
|
|||
// }]
|
|||
// },
|
|||
] |
|||
/** |
|||
* asyncRoutes |
|||
* the routes that need to be dynamically loaded based on user roles |
|||
*/ |
|||
// 动态获取菜单信息
|
|||
export let asyncRoutes = [ |
|||
/** when your routing map is too long, you can split it into small modules **/ |
|||
// 404 page must be placed at the end !!!
|
|||
{ |
|||
path: '*', |
|||
redirect: '/404', |
|||
hidden: true |
|||
} |
|||
] |
|||
|
|||
// export const asyncRoutes = [
|
|||
// /** when your routing map is too long, you can split it into small modules **/
|
|||
// // 404 page must be placed at the end !!!
|
|||
// personRouter,
|
|||
// basicDataRouter,
|
|||
// rawMaterialManage,
|
|||
// finishedProductManage,
|
|||
// labelManageRouter,
|
|||
// // storageManageRouter,
|
|||
// inventoryManageRouter,
|
|||
// // productionManageRouter,
|
|||
// // qualityManageRouter,
|
|||
// // taskManageRouter,
|
|||
// // recordQueryRouter,
|
|||
// manageRouter,
|
|||
// activeReportManageRouter,
|
|||
// systemManageRouter,
|
|||
// // allocationManageRouter,
|
|||
// // deliverGoodsRouter,
|
|||
// {
|
|||
// path: '*',
|
|||
// redirect: '/404',
|
|||
// hidden: true
|
|||
// }
|
|||
// ]
|
|||
|
|||
const createRouter = () => new Router({ |
|||
// mode: 'history', // require service support
|
|||
scrollBehavior: () => ({ |
|||
y: 0 |
|||
}), |
|||
routes: constantRoutes |
|||
}) |
|||
|
|||
const router = createRouter() |
|||
|
|||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
|||
export function resetRouter() { |
|||
const newRouter = createRouter() |
|||
router.matcher = newRouter.matcher // reset router
|
|||
} |
|||
|
|||
export default router |
|||
@ -1,33 +0,0 @@ |
|||
import { dictFormatData } from "@/utils/index" |
|||
const state = { |
|||
dict: {} |
|||
} |
|||
|
|||
const mutations = { |
|||
ADD_DICT: (state, dict) => { |
|||
Object.assign(state.dict,dict) |
|||
}, |
|||
CLEAR_DICT: (state) => { |
|||
state.dict = {} |
|||
} |
|||
} |
|||
|
|||
const actions = { |
|||
// addDict({ commit }, dict) {
|
|||
// dictFormatData().then(res => {
|
|||
// res.forEach(item => {
|
|||
// commit('ADD_DICT', item)
|
|||
// })
|
|||
// })
|
|||
// },
|
|||
clearDict({ commit }) { |
|||
commit('CLEAR_DICT') |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -1,163 +0,0 @@ |
|||
import { |
|||
asyncRoutes, |
|||
constantRoutes |
|||
} from '@/router' |
|||
import Layout from '@/layout' |
|||
import { getWebMenu } from '@/api/wms-auth' |
|||
/** |
|||
* 静态路由懒加载 |
|||
* @param view 格式必须为 xxx/xxx 开头不要加斜杠 |
|||
* @returns |
|||
*/ |
|||
export const loadView = (view) => { |
|||
return (resolve) => require([`@/views/${view}`], resolve) |
|||
} |
|||
/** |
|||
* 把从后端查询的菜单数据拼装成路由格式的数据 |
|||
* @param routes |
|||
* @param data 后端返回的菜单数据 |
|||
*/ |
|||
export function generaMenu(routes, data) { |
|||
data.forEach(item => { |
|||
const menu = { |
|||
path: item.code, |
|||
component: item.component === '@/layout' ? Layout : loadView(item.component), |
|||
// hidden: item.status === 0, // 状态为0的隐藏
|
|||
children: [], |
|||
name: item.code, |
|||
// meta: item.meta
|
|||
meta: { |
|||
title: item.name, |
|||
icon: item.icon || '', |
|||
roles: item.permission |
|||
}, |
|||
|
|||
} |
|||
// 一级菜单 二级菜单 特定属性
|
|||
if (item.component == '@/layout' || item.component == 'index') { |
|||
menu.alwaysShow = true |
|||
menu.redirect = 'noRedirect' |
|||
} |
|||
if (item.sort < 99) { |
|||
menu.level = 1 |
|||
} else if (item.sort > 99 && item.sort < 9999) { |
|||
menu.level = 2 |
|||
} else { |
|||
menu.level = 3 |
|||
} |
|||
// iframe页面处理
|
|||
// if (item.permission.indexOf('Report') > -1) {
|
|||
// // delete menu.component
|
|||
// menu.iframeComponent = item.component === '@/layout' ? Layout : loadView(item.component)
|
|||
// menu.hasOpen = false // 是否打开过，默认false
|
|||
// }
|
|||
if (item.children && item.children.length > 0) { |
|||
generaMenu(menu.children, item.children) |
|||
} |
|||
// if (item.permission == 'skip' && item.children.length == 0) {
|
|||
// }
|
|||
routes.push(menu) |
|||
}) |
|||
return routes |
|||
} |
|||
|
|||
/** |
|||
* Use meta.role to determine if the current user has permission |
|||
* @param roles |
|||
* @param route |
|||
*/ |
|||
function hasPermission(roles, route) { |
|||
if (route.meta && route.meta.roles) { |
|||
if (route.meta.roles == "skip") { |
|||
return true |
|||
} else { |
|||
return roles.some(role => route.meta.roles.includes(role)) |
|||
} |
|||
} else { |
|||
return false |
|||
} |
|||
} |
|||
const filterAccessedRoutes = (items,indexVal,childrenIndex) => { |
|||
const route = JSON.parse(JSON.stringify(items)) |
|||
route.forEach((val, index) => { |
|||
// debugger;
|
|||
if(val.meta && val.meta.roles == "skip"){ |
|||
if (val.children && val.children.length != 0) { |
|||
filterAccessedRoutes(items[index-indexVal].children,childrenIndex) |
|||
} |
|||
if(items[index-indexVal].children && items[index-indexVal].children.length == 0){ |
|||
items.splice(index-indexVal, 1) |
|||
indexVal++ |
|||
} |
|||
} |
|||
}) |
|||
indexVal = 0 |
|||
} |
|||
/** |
|||
* Filter asynchronous routing tables by recursion |
|||
* @param routes asyncRoutes |
|||
* @param roles |
|||
*/ |
|||
export function filterAsyncRoutes(routes, roles) { |
|||
const res = [] |
|||
routes.forEach(route => { |
|||
const tmp = { |
|||
...route |
|||
} |
|||
if (hasPermission(roles, tmp)) { |
|||
if (tmp.children) { |
|||
tmp.children = filterAsyncRoutes(tmp.children, roles) |
|||
} |
|||
res.push(tmp) |
|||
} |
|||
}) |
|||
return res |
|||
} |
|||
|
|||
const state = { |
|||
routes: [], |
|||
addRoutes: [] |
|||
} |
|||
|
|||
const mutations = { |
|||
SET_ROUTES: (state, routes) => { |
|||
state.addRoutes = routes |
|||
state.routes = constantRoutes.concat(routes) |
|||
} |
|||
} |
|||
// todo-new:有token后使用generateRoutes,去掉下方一行代码
|
|||
// state.routes = constantRoutes.concat(asyncRoutes)
|
|||
|
|||
const actions = { |
|||
generateRoutes({ |
|||
commit |
|||
}, userId) { |
|||
return new Promise(resolve => { |
|||
// let accessedRoutes = asyncRoutes
|
|||
// // accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
|
|||
// let indexVal = 0
|
|||
// let childrenIndex = 0
|
|||
// filterAccessedRoutes(accessedRoutes,indexVal,childrenIndex)
|
|||
// commit('SET_ROUTES', accessedRoutes)
|
|||
// resolve(accessedRoutes)
|
|||
// todo-new:动态路由(等token接口恢复后处理)
|
|||
getWebMenu({userId: userId}).then(res => { |
|||
let accessedRoutes = generaMenu(asyncRoutes, res) |
|||
let indexVal = 0 |
|||
let childrenIndex = 0 |
|||
filterAccessedRoutes(accessedRoutes,indexVal,childrenIndex) |
|||
commit('SET_ROUTES', accessedRoutes) |
|||
resolve(accessedRoutes) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -1,209 +0,0 @@ |
|||
// 申请流程按钮name值统一封装
|
|||
const requestDataNames = { |
|||
submit:'submitRequest',//提交
|
|||
agree:'agreeRequest',//审批
|
|||
handle:'handleRequest',//处理
|
|||
againHandle:"againHandleRequest",//执行
|
|||
abort:'abortRequest',//中止
|
|||
refuse:'refuseRequest',//驳回
|
|||
cancel:'cancelRequest',//取消
|
|||
} |
|||
export default requestDataNames; |
|||
|
|||
//申请流程按钮
|
|||
/** |
|||
* @param {*} that 主页this |
|||
* @param {*} label 特殊label名称更改 示例：{againHandleRequest:'确认提交'} |
|||
* @param {*} initHide 自定义返回是否隐藏函数 {againHandleRequest:() => {return false)} |
|||
* @param {*} noShow 不显示的按钮 示例：['againHandleRequest'] |
|||
* initHide优先级大于noShow 如果initHide和noShow中都有对应数据，则noShow无效 |
|||
* vue调用文件参考示例： |
|||
* 1、使用 label 更改按钮名称 |
|||
DrawerButtonData: [ |
|||
...requestData(this,{againHandleRequest:'新按钮名称'}), |
|||
] |
|||
* 2、使用 initHide 函数处理是否隐藏 againHandleRequestInit为业务线判断隐藏函数，返回值为false/true |
|||
DrawerButtonData: [ |
|||
...requestData(this,false,{ |
|||
againHandleRequest:() => {return this.againHandleRequestInit([9])} |
|||
}), |
|||
] |
|||
* 3、使用 noShow 隐藏按钮 |
|||
DrawerButtonData: [ |
|||
...requestData(this,false,false,['againHandleRequest']), |
|||
] |
|||
* @returns |
|||
*/ |
|||
export function requestData(that,label,initHide,noShow){ |
|||
return [ |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
// label: label==undefined?'提交':label,
|
|||
label: changeLabelText(label,requestDataNames.submit)?changeLabelText(label,requestDataNames.submit):'提交', |
|||
name: requestDataNames.submit, |
|||
hide: () => { return hideButtonRequest(that, [1], initHide, noShow , requestDataNames.submit) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
// label: label==undefined?'审批':label,
|
|||
label: changeLabelText(label,requestDataNames.agree)?changeLabelText(label,requestDataNames.agree):'审批', |
|||
name: requestDataNames.agree, |
|||
hide: () => { return hideButtonRequest(that, [2], initHide, noShow , requestDataNames.agree) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
// label: label==undefined?'处理':label,
|
|||
label: changeLabelText(label,requestDataNames.handle)?changeLabelText(label,requestDataNames.handle):'处理', |
|||
name: requestDataNames.handle, |
|||
hide: () => { return hideButtonRequest(that, [4], initHide, noShow , requestDataNames.handle) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
// label: '执行',
|
|||
label: changeLabelText(label,requestDataNames.againHandle)?changeLabelText(label,requestDataNames.againHandle):'执行', |
|||
name: requestDataNames.againHandle, |
|||
hide: () => { return hideButtonRequest(that, [9], initHide, noShow , requestDataNames.againHandle) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete-solid', |
|||
// label: '中止',
|
|||
label: changeLabelText(label,requestDataNames.abort)?changeLabelText(label,requestDataNames.abort):'中止', |
|||
name: requestDataNames.abort, |
|||
hide: () => { return hideButtonRequest(that, [5], initHide, noShow , requestDataNames.abort) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-circle-check', |
|||
// label: '驳回',
|
|||
label: changeLabelText(label,requestDataNames.refuse)?changeLabelText(label,requestDataNames.refuse):'驳回', |
|||
name: requestDataNames.refuse, |
|||
hide: () => { return hideButtonRequest(that, [2], initHide, noShow , requestDataNames.refuse) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete-solid', |
|||
// label: '取消',
|
|||
label: changeLabelText(label,requestDataNames.cancel)?changeLabelText(label,requestDataNames.cancel):'取消', |
|||
name: requestDataNames.cancel, |
|||
hide: () => { return hideButtonRequest(that, [1,2,4], initHide, noShow , requestDataNames.cancel) }, |
|||
size: 'mini' |
|||
}, |
|||
// {
|
|||
// type: 'primary',
|
|||
// icon: 'el-icon-circle-check',
|
|||
// label: '执行完成',
|
|||
// name: "completeRequest",
|
|||
// hide: () => { return hideButtonRequest(that, [5]) },
|
|||
// size: 'mini'
|
|||
// },
|
|||
] |
|||
} |
|||
|
|||
//任务流程按钮
|
|||
/** |
|||
* @param {*} that 主页this |
|||
* @returns |
|||
*/ |
|||
export function jobData(that){ |
|||
return [ |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
label: '接受', |
|||
name: "acceptJob", |
|||
hide: () => { return hideButtonJob(that, [1]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
label: '执行', |
|||
name: "handleJob", |
|||
hide: () => { return hideButtonJob(that, [2]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
label: '打开', |
|||
name: "openJob", |
|||
hide: () => { return hideButtonJob(that, [4]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-circle-close', |
|||
label: '关闭', |
|||
name: "closeJob", |
|||
hide: () => { return hideButtonJob(that, [1]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete-solid', |
|||
label: '作废', |
|||
name: "invalidJob", |
|||
hide: () => { return hideButtonJob(that, [1, 4]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-circle-close', |
|||
label: '取消', |
|||
name: "cancelAcceptJob", |
|||
hide: () => { return hideButtonJob(that, [2]) }, |
|||
size: 'mini' |
|||
}, |
|||
] |
|||
} |
|||
|
|||
|
|||
|
|||
function hideButtonRequest(that, val, initHide, noShow, name) { |
|||
let data = true |
|||
// 走自定义是否隐藏事件
|
|||
if(initHide && initHide[name]){ |
|||
data = initHide[name]() |
|||
}else{ |
|||
// 隐藏按钮中是否有此按钮
|
|||
if(noShow && noShow.indexOf(name) >= 0){ |
|||
data = true |
|||
}else{ |
|||
val.forEach(key => { |
|||
if (that.propsData.requestStatus == key) { |
|||
data = false |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
return data |
|||
} |
|||
|
|||
function hideButtonJob(that, val) { |
|||
let data = true |
|||
val.forEach(key => { |
|||
if (that.propsData.jobStatus == key) { |
|||
data = false |
|||
} |
|||
}) |
|||
return data |
|||
} |
|||
|
|||
// 更改按钮自定义特殊名称
|
|||
function changeLabelText(labels,name){ |
|||
if(labels && labels[name]){ |
|||
return labels[name] |
|||
} |
|||
return false |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
import zh from '@/lang/zh' |
|||
let _Public = zh.ColumsPublic // 字段通用
|
|||
let _Names = zh.ColumsNames // 接口监控看板
|
|||
@ -1,246 +0,0 @@ |
|||
<template> |
|||
<div class="countDownOuterPage" :class="[countDownConfig.boxShadow?'shadow':'']"> |
|||
<!-- 标题 --> |
|||
<div |
|||
class="countDown-title" |
|||
:style="countDownConfig.titleStyle" |
|||
|
|||
>{{countDownConfig.title}}</div> |
|||
<!-- 时间 --> |
|||
<el-statistic |
|||
v-if="countDownConfig.format && countDownConfig.format.length > 0" |
|||
:format="countDownConfig.format" |
|||
:value="countDownConfig.value" |
|||
:value-style="countDownConfig.valueStyle" |
|||
time-indices |
|||
></el-statistic> |
|||
<!-- 默认毫秒的 --> |
|||
<el-statistic |
|||
v-else |
|||
:value="countDownConfig.value" |
|||
:value-style="countDownConfig.valueStyle" |
|||
time-indices |
|||
></el-statistic> |
|||
|
|||
<!-- 编辑按钮 --> |
|||
<el-button |
|||
v-if="!isHome" |
|||
class="gridItem-edit-button" |
|||
type="warning" |
|||
circle |
|||
icon="el-icon-edit" |
|||
@click="moreHandle" |
|||
size="mini" |
|||
></el-button> |
|||
|
|||
<!-- 更多配置弹窗 --> |
|||
<el-dialog |
|||
:visible.sync="showMoreEdit" |
|||
width="40%" |
|||
:append-to-body="true" |
|||
:show-close="true" |
|||
:close-on-click-modal="true" |
|||
:close-on-press-escape="true" |
|||
title="更多配置" |
|||
> |
|||
<el-form |
|||
class="countDownForm" |
|||
:model="countDownForm" |
|||
label-position="right" |
|||
label-width="150px" |
|||
> |
|||
<!-- 基础设置 --> |
|||
<div class="gridLayout-editTitle-line">基础设置</div> |
|||
<el-form-item label="显示底部阴影"> |
|||
<el-radio-group v-model="countDownForm.boxShadow"> |
|||
<el-radio border :label="true">显示</el-radio> |
|||
<el-radio border :label="false">不显示</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<!-- 标题设置 --> |
|||
<div class="gridLayout-editTitle-line">标题设置</div> |
|||
<!-- 标题内容 --> |
|||
<el-form-item label="标题内容"> |
|||
<el-input v-model="countDownForm.title"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题字号 --> |
|||
<el-form-item label="标题字号"> |
|||
<el-input v-model="countDownForm.titleStyle.fontSize"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题颜色 --> |
|||
<el-form-item label="标题颜色"> |
|||
<el-color-picker |
|||
v-model="countDownForm.titleStyle.color" |
|||
show-alpha |
|||
:predefine="predefineColors" |
|||
></el-color-picker> |
|||
</el-form-item> |
|||
<!-- 标题行高 --> |
|||
<el-form-item label="标题行高"> |
|||
<el-input v-model="countDownForm.titleStyle.lineHeight"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题粗体 --> |
|||
<el-form-item label="标题是否粗体"> |
|||
<el-radio-group v-model="countDownForm.titleStyle.fontWeight"> |
|||
<el-radio border label="normal">正常</el-radio> |
|||
<el-radio border label="bold">粗体</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<!-- 时间设置 --> |
|||
<div class="gridLayout-editTitle-line">时间设置</div> |
|||
<!-- 到期时间 --> |
|||
<el-form-item label="到期时间"> |
|||
<el-date-picker |
|||
v-model="countDownForm.value" |
|||
type="datetime" |
|||
placeholder="到期日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<!-- 时间格式 --> |
|||
<el-form-item label="时间格式"> |
|||
<!-- <el-input v-model="countDownForm.format"></el-input> --> |
|||
<el-select v-model="countDownForm.format" placeholder="请选择时间格式"> |
|||
<el-option |
|||
v-for="item in formatOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- 时间字号 --> |
|||
<el-form-item :label="'时间字号'"> |
|||
<el-input v-model="countDownForm.valueStyle.fontSize"></el-input> |
|||
</el-form-item> |
|||
<!--时间颜色 --> |
|||
<el-form-item :label="'时间颜色'"> |
|||
<el-color-picker |
|||
v-model="countDownForm.valueStyle.color" |
|||
show-alpha |
|||
:predefine="predefineColors" |
|||
></el-color-picker> |
|||
</el-form-item> |
|||
<!-- 时间粗体 --> |
|||
<el-form-item :label="'时间是否粗体'"> |
|||
<el-radio-group v-model="countDownForm.valueStyle.fontWeight"> |
|||
<el-radio border label="normal">正常</el-radio> |
|||
<el-radio border label="bold">粗体</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="settingCancleHandle">取消</el-button> |
|||
<el-button type="primary" @click="settingSureHandle">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getPredefineColors } from "../gridLayout" |
|||
export default { |
|||
name: "countDown", |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页 |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data(){ |
|||
return{ |
|||
showMoreEdit:false, |
|||
//页面数据 |
|||
countDownConfig:{}, |
|||
//form表单数据 ，与countDownConfig分开是为了避免，没有点击确定时候，页面数据直接更改 |
|||
countDownForm:{ |
|||
value: null, |
|||
valueStyle:{ |
|||
fontSize:'20px', |
|||
color:'#303133', |
|||
fontWeight:'normal', |
|||
}, |
|||
title:"倒计时", |
|||
titleStyle:{ |
|||
fontSize:'14px', |
|||
color:'#666', |
|||
lineHeight:'24px', |
|||
fontWeight:'bold', |
|||
}, |
|||
format:'HH:mm:ss', |
|||
boxShadow:true |
|||
}, |
|||
formatOptions:[{ |
|||
value: false, |
|||
label: '精确到毫秒' |
|||
},{ |
|||
value: 'HH:mm:ss', |
|||
label: '精确到秒' |
|||
}, { |
|||
value: 'HH:mm', |
|||
label: '精确到分' |
|||
}, { |
|||
value: 'HH时', |
|||
label: '精确到时' |
|||
}], |
|||
predefineColors:getPredefineColors(), |
|||
} |
|||
}, |
|||
created() { |
|||
if(this.gridItem.gridSettings){ |
|||
this.countDownForm = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
} |
|||
this.countDownConfig = JSON.parse(JSON.stringify(this.countDownForm)) |
|||
}, |
|||
methods:{ |
|||
// 点击编辑按钮 |
|||
moreHandle(){ |
|||
this.showMoreEdit = true |
|||
}, |
|||
// 点击更多配置[确定]按钮 |
|||
settingSureHandle(){ |
|||
this.countDownConfig = JSON.parse(JSON.stringify(this.countDownForm)) |
|||
this.countDownConfig.value = new Date(this.countDownConfig.value).getTime() |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 点击更多配置[取消]按钮 |
|||
settingCancleHandle(){ |
|||
this.countDownForm = JSON.parse(JSON.stringify(this.countDownConfig)) |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 获取所有配置信息 |
|||
getSettings(){ |
|||
return this.countDownConfig |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
.countDownOuterPage{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
|
|||
&.shadow{ |
|||
box-shadow: 2px 2px 10px #ddd; |
|||
} |
|||
} |
|||
.countDown-title{ |
|||
text-align: center; |
|||
padding: 10px 0 5px 0; |
|||
color: #666; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 24px; |
|||
} |
|||
</style> |
|||
@ -1,222 +0,0 @@ |
|||
<template> |
|||
<div class="gridTextOuter" :class="[gridTextConfig.boxShadow?'shadow':'']"> |
|||
<div class="editShowContent"> |
|||
<!-- 确定后的值及配置样式 --> |
|||
<div |
|||
class="finishText" |
|||
:style="{ |
|||
'font-size':gridTextConfig.fontSize, |
|||
'color':gridTextConfig.fontColor, |
|||
'line-height':gridTextConfig.lineHeight, |
|||
'font-weight':gridTextConfig.fontWeight, |
|||
'text-align':gridTextConfig.centerValue, |
|||
}" |
|||
>{{gridTextConfig.text}}</div> |
|||
<!-- 编辑按钮 --> |
|||
<el-button |
|||
v-if="!isHome" |
|||
class="gridItem-edit-button" |
|||
type="warning" |
|||
circle |
|||
icon="el-icon-edit" |
|||
@click="moreHandle" |
|||
size="mini" |
|||
></el-button> |
|||
</div> |
|||
<!-- 更多配置弹窗 --> |
|||
<el-dialog |
|||
:visible.sync="showMoreEdit" |
|||
width="40%" |
|||
:append-to-body="true" |
|||
:show-close="true" |
|||
:close-on-click-modal="true" |
|||
:close-on-press-escape="true" |
|||
title="编辑配置" |
|||
> |
|||
<el-form |
|||
class="gridTextForm" |
|||
:model="gridTextForm" |
|||
label-position="right" |
|||
label-width="120px" |
|||
> |
|||
<!-- 文本内容 --> |
|||
<el-form-item label="文本内容"> |
|||
<el-input v-model="gridTextForm.text" type="textarea" autosize></el-input> |
|||
</el-form-item> |
|||
<!-- 字号 --> |
|||
<el-form-item label="字号"> |
|||
<el-input v-model="gridTextForm.fontSize"></el-input> |
|||
</el-form-item> |
|||
<!-- 行高 --> |
|||
<el-form-item label="行高"> |
|||
<el-input v-model="gridTextForm.lineHeight"></el-input> |
|||
</el-form-item> |
|||
<!-- 字体颜色 --> |
|||
<el-form-item label="字体颜色"> |
|||
<el-color-picker |
|||
v-model="gridTextForm.fontColor" |
|||
show-alpha |
|||
:predefine="predefineColors" |
|||
></el-color-picker> |
|||
</el-form-item> |
|||
<!-- 粗体 --> |
|||
<el-form-item label="是否粗体"> |
|||
<el-radio-group v-model="gridTextForm.fontWeight"> |
|||
<el-radio border label="normal">正常</el-radio> |
|||
<el-radio border label="bold">粗体</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<!-- 是否显示底部阴影 --> |
|||
<el-form-item label="显示"> |
|||
<el-radio-group v-model="gridTextForm.boxShadow"> |
|||
<el-radio border :label="true">显示</el-radio> |
|||
<el-radio border :label="false">不显示</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<!-- 对齐方式 --> |
|||
<el-form-item label="对齐方式"> |
|||
<el-select v-model="gridTextForm.centerValue" placeholder="请选择对齐方式"> |
|||
<el-option |
|||
v-for="item in centerOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="settingCancleHandle">取消</el-button> |
|||
<el-button type="primary" @click="settingSureHandle">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getPredefineColors } from "../gridLayout" |
|||
export default { |
|||
name: "gridText", |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页 |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data(){ |
|||
return{ |
|||
gridTextConfig:{},//页面数据 |
|||
//form表单数据 ，与gridTextConfig分开是为了避免，没有点击确定时候，页面数据直接更改 |
|||
gridTextForm:{}, |
|||
showMoreEdit:false,//是否显示更多编辑框 |
|||
// 对齐方式 |
|||
centerOptions: [{ |
|||
value: 'left', |
|||
label: '左对齐' |
|||
}, { |
|||
value: 'center', |
|||
label: '居中' |
|||
}, { |
|||
value: 'right', |
|||
label: '右对齐' |
|||
}], |
|||
predefineColors:getPredefineColors() |
|||
} |
|||
}, |
|||
mounted() { |
|||
if(this.gridItem.gridSettings){ |
|||
this.gridTextForm = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
}else{ |
|||
if(this.gridItem.name == 'gridTitle'){ |
|||
this.gridTextForm = { |
|||
text:'标题内容',//文本框输入值 |
|||
fontSize:"22px",//字号 |
|||
fontColor:"#333",//字色 |
|||
lineHeight:"34px", |
|||
fontWeight:'bold',//是否粗体 |
|||
boxShadow:false,//是否显示底部背景阴影 |
|||
centerValue:'center',//对齐方式值 |
|||
} |
|||
} |
|||
if(this.gridItem.name == 'gridText'){ |
|||
this.gridTextForm = { |
|||
text:'文本内容',//文本框输入值 |
|||
fontSize:"14px",//字号 |
|||
fontColor:"#666",//字色 |
|||
lineHeight:"30px", |
|||
fontWeight:'normal',//是否粗体 |
|||
boxShadow:true,//是否显示底部背景阴影 |
|||
centerValue:'left',//对齐方式值 |
|||
} |
|||
} |
|||
} |
|||
this.gridTextConfig = JSON.parse(JSON.stringify(this.gridTextForm)) |
|||
}, |
|||
methods:{ |
|||
// 点击编辑按钮 |
|||
moreHandle(){ |
|||
this.showMoreEdit = true |
|||
}, |
|||
// 点击更多配置[确定]按钮 |
|||
settingSureHandle(){ |
|||
this.gridTextConfig = JSON.parse(JSON.stringify(this.gridTextForm)) |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 点击更多配置[取消]按钮 |
|||
settingCancleHandle(){ |
|||
this.gridTextForm = JSON.parse(JSON.stringify(this.gridTextConfig)) |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 获取所有配置信息 |
|||
getSettings(){ |
|||
return this.gridTextForm |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
.gridTextOuter{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 0 40px 0 25px; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
|
|||
&.shadow{ |
|||
box-shadow: 2px 2px 10px #ddd; |
|||
} |
|||
} |
|||
.editShowContent{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.finishText{ |
|||
width: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
line-height: 34px; |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.finishText{ |
|||
padding-left: 15px; |
|||
} |
|||
} |
|||
.gridTextForm{ |
|||
.el-input,.el-select{ |
|||
width: 80%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,366 +0,0 @@ |
|||
<template> |
|||
<div class="statisticOuterPage" :class="[statisticsConfig.boxShadow?'shadow':'']"> |
|||
<!-- 标题 --> |
|||
<div |
|||
class="statistic-title" |
|||
:style="statisticsConfig.titleStyle" |
|||
|
|||
>{{statisticsConfig.title}}</div> |
|||
<!-- 数值 （ el-statistic的precision配置不好用，自己更改赋值）--> |
|||
<div class="elStatisticBox-outer"> |
|||
<div |
|||
class="elStatisticBox" |
|||
v-for="(number_op,index) in statisticsConfig.numberConfig" |
|||
:key="index" |
|||
> |
|||
<el-statistic |
|||
:decimal-separator="number_op.decimalSeparator" |
|||
:group-separator="number_op.groupSeparator" |
|||
:value="number_op.value" |
|||
:prefix="number_op.prefix" |
|||
:suffix="number_op.suffix" |
|||
:value-style="number_op.numberStyle" |
|||
> |
|||
<template slot="suffix"> |
|||
<span |
|||
class="numberConfig-suffix" |
|||
v-if="index < statisticsConfig.numberConfig.length - 1" |
|||
>{{statisticsConfig.numberSuffix}}</span> |
|||
</template> |
|||
</el-statistic> |
|||
</div> |
|||
</div> |
|||
<!-- 编辑按钮 --> |
|||
<el-button |
|||
v-if="!isHome" |
|||
class="gridItem-edit-button" |
|||
type="warning" |
|||
circle |
|||
icon="el-icon-edit" |
|||
@click="moreHandle" |
|||
size="mini" |
|||
></el-button> |
|||
<!-- 更多配置弹窗 --> |
|||
<!-- v-if="showMoreEdit" |
|||
:visible="true" |
|||
width="40%" |
|||
append-to-body |
|||
show-close --> |
|||
<el-dialog |
|||
:visible.sync="showMoreEdit" |
|||
width="40%" |
|||
:append-to-body="true" |
|||
:show-close="true" |
|||
:close-on-click-modal="true" |
|||
:close-on-press-escape="true" |
|||
title="更多配置" |
|||
> |
|||
<el-form |
|||
class="statisticstForm" |
|||
:model="statisticsForm" |
|||
label-position="right" |
|||
label-width="150px" |
|||
> |
|||
<!-- 基础设置 --> |
|||
<el-collapse v-model="activeNames"> |
|||
<el-collapse-item name="nav1"> |
|||
<template slot="title"> |
|||
<div class="gridLayout-editTitle-line">基础设置</div> |
|||
</template> |
|||
<el-form-item label="显示底部阴影"> |
|||
<el-radio-group v-model="statisticsForm.boxShadow"> |
|||
<el-radio border :label="true">显示</el-radio> |
|||
<el-radio border :label="false">不显示</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="多数值间连接符"> |
|||
<el-input v-model="statisticsForm.numberSuffix"></el-input> |
|||
</el-form-item> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
|
|||
<!-- 标题设置 --> |
|||
<el-collapse v-model="activeNames"> |
|||
<el-collapse-item name="nav2"> |
|||
<template slot="title"> |
|||
<div class="gridLayout-editTitle-line">标题设置</div> |
|||
</template> |
|||
<!-- 标题内容 --> |
|||
<el-form-item label="标题内容"> |
|||
<el-input v-model="statisticsForm.title"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题字号 --> |
|||
<el-form-item label="标题字号"> |
|||
<el-input v-model="statisticsForm.titleStyle.fontSize"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题颜色 --> |
|||
<el-form-item label="标题颜色"> |
|||
<el-color-picker |
|||
v-model="statisticsForm.titleStyle.color" |
|||
show-alpha |
|||
:predefine="predefineColors" |
|||
></el-color-picker> |
|||
</el-form-item> |
|||
<!-- 标题行高 --> |
|||
<el-form-item label="标题行高"> |
|||
<el-input v-model="statisticsForm.titleStyle.lineHeight"></el-input> |
|||
</el-form-item> |
|||
<!-- 标题粗体 --> |
|||
<el-form-item label="标题是否粗体"> |
|||
<el-radio-group v-model="statisticsForm.titleStyle.fontWeight"> |
|||
<el-radio border label="normal">正常</el-radio> |
|||
<el-radio border label="bold">粗体</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
|
|||
<!-- 数值 --> |
|||
<el-collapse v-model="activeNames"> |
|||
<el-collapse-item |
|||
v-for="(number_op,index) in statisticsForm.numberConfig" |
|||
:key="index" |
|||
:name="'nav3-'+ Number(index + 1)" |
|||
> |
|||
<template slot="title"> |
|||
<div class="gridLayout-editTitle-line"> |
|||
数值{{Number(index+1)}}设置 |
|||
<el-button |
|||
type="danger" |
|||
icon="el-icon-minus" |
|||
circle |
|||
@click="removeNumberRow(index,number_op)" |
|||
class="remove-numberRow-Btn" |
|||
size="mini" |
|||
></el-button> |
|||
</div> |
|||
</template> |
|||
<el-form-item :label="'数值'+Number(index+1)"> |
|||
<el-input v-model="number_op.number"></el-input> |
|||
</el-form-item> |
|||
<!-- 数值字号 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'字号'"> |
|||
<el-input v-model="number_op.numberStyle.fontSize"></el-input> |
|||
</el-form-item> |
|||
<!-- 数值颜色 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'颜色'"> |
|||
<el-color-picker |
|||
v-model="number_op.numberStyle.color" |
|||
show-alpha |
|||
:predefine="predefineColors" |
|||
></el-color-picker> |
|||
</el-form-item> |
|||
<!-- 数值粗体 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'是否粗体'"> |
|||
<el-radio-group v-model="number_op.numberStyle.fontWeight"> |
|||
<el-radio border label="normal">正常</el-radio> |
|||
<el-radio border label="bold">粗体</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<!-- 千分位标识符 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'千分位标识符'"> |
|||
<el-input v-model="number_op.groupSeparator"></el-input> |
|||
</el-form-item> |
|||
<!-- 小数点标识符 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'小数点标识符'"> |
|||
<el-input v-model="number_op.decimalSeparator"></el-input> |
|||
</el-form-item> |
|||
<!-- 保留小数点位数 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'保留小数点位数'"> |
|||
<el-input v-model="number_op.precision"></el-input> |
|||
</el-form-item> |
|||
<!-- 数值前缀字符 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'前缀字符'"> |
|||
<el-input v-model="number_op.prefix"></el-input> |
|||
</el-form-item> |
|||
<!-- 数值后缀字符 --> |
|||
<el-form-item :label="'数值'+Number(index+1)+'后缀字符'"> |
|||
<el-input v-model="number_op.suffix"></el-input> |
|||
</el-form-item> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
<el-button |
|||
@click="addNumberRow" |
|||
style="width:100%" |
|||
type="primary" |
|||
>添加数值</el-button> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="settingCancleHandle">取消</el-button> |
|||
<el-button type="primary" @click="settingSureHandle">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getPredefineColors } from "../gridLayout" |
|||
export default { |
|||
name: "statistics", |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页 |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data(){ |
|||
return{ |
|||
showMoreEdit:false, |
|||
// 展开项 |
|||
activeNames:[], |
|||
// 默认值配置 |
|||
defaultNumberOP:{ |
|||
number:null, |
|||
value:null, |
|||
numberStyle:{ |
|||
fontSize:'20px', |
|||
color:'#303133', |
|||
fontWeight:'normal', |
|||
}, |
|||
groupSeparator:",",//设置千分位标识符 |
|||
decimalSeparator:".",// 设置小数点标识符 |
|||
precision:2,//保留位数 |
|||
prefix:'',//设置数值的前缀 |
|||
suffix:'',//设置数值的后缀 |
|||
}, |
|||
// 默认所有配置 |
|||
defaultForm:{ |
|||
numberConfig:[], |
|||
title:"数值", |
|||
titleStyle:{ |
|||
fontSize:'14px', |
|||
color:'#666', |
|||
lineHeight:'24px', |
|||
fontWeight:'bold', |
|||
}, |
|||
boxShadow:true, |
|||
numberSuffix:'—',//多数值连接字符 |
|||
}, |
|||
//页面数据 |
|||
statisticsConfig:{}, |
|||
//form表单数据 ，与statisticsConfig分开是为了避免，没有点击确定时候，页面数据直接更改 |
|||
statisticsForm:{}, |
|||
predefineColors:getPredefineColors() |
|||
} |
|||
}, |
|||
created() { |
|||
if(this.gridItem.gridSettings){ |
|||
this.statisticsForm = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
}else{ |
|||
this.defaultForm.numberConfig = [] |
|||
this.defaultForm.numberConfig.push(JSON.parse(JSON.stringify(this.defaultNumberOP))) |
|||
this.statisticsForm = JSON.parse(JSON.stringify(this.defaultForm)) |
|||
} |
|||
// todo:接口获取number值，界面中不应该更改 |
|||
this.initNumberConfig() |
|||
}, |
|||
methods:{ |
|||
// 初始化数据 |
|||
initNumberConfig(){ |
|||
this.statisticsConfig = JSON.parse(JSON.stringify(this.statisticsForm)) |
|||
// todo:整数时候是否也要显示.00，目前整数显示小数后无用 |
|||
this.statisticsConfig.numberConfig.forEach(item => { |
|||
item.value = Number( |
|||
(Number(item.number)).toFixed(Number(item.precision)) |
|||
) |
|||
}); |
|||
}, |
|||
// 全部展开编辑框内容 |
|||
initActiveNames(){ |
|||
this.activeNames=['nav1','nav2'] |
|||
this.statisticsForm.numberConfig.forEach((item,key)=>{ |
|||
this.activeNames.push('nav3-'+ Number(key + 1)) |
|||
}) |
|||
}, |
|||
// 点击编辑按钮 |
|||
moreHandle(){ |
|||
this.initActiveNames() |
|||
this.showMoreEdit = true |
|||
}, |
|||
// 点击更多配置[确定]按钮 |
|||
settingSureHandle(){ |
|||
this.initNumberConfig() |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 点击更多配置[取消]按钮 |
|||
settingCancleHandle(){ |
|||
this.statisticsForm = JSON.parse(JSON.stringify(this.statisticsConfig)) |
|||
this.showMoreEdit = false |
|||
}, |
|||
// 添加数值行 |
|||
addNumberRow(){ |
|||
this.statisticsForm.numberConfig.push(JSON.parse(JSON.stringify(this.defaultNumberOP))) |
|||
this.initActiveNames() |
|||
}, |
|||
// 删除数值行 |
|||
removeNumberRow(index,item){ |
|||
if(this.statisticsForm.numberConfig.length <= 1){ |
|||
this.$message.error("数据值至少保留一项") |
|||
return |
|||
} |
|||
this.statisticsForm.numberConfig.splice(index,1) |
|||
}, |
|||
// 获取所有配置信息 |
|||
getSettings(){ |
|||
return this.statisticsConfig |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
.statisticOuterPage{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
|
|||
&.shadow{ |
|||
box-shadow: 2px 2px 10px #ddd; |
|||
} |
|||
} |
|||
.elStatisticBox-outer{ |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
.numberConfig-suffix{ |
|||
padding: 0 10px; |
|||
color: #999; |
|||
} |
|||
.elStatisticBox{ |
|||
padding-bottom: 10px; |
|||
} |
|||
} |
|||
.el-collapse{ |
|||
margin-bottom: 20px !important; |
|||
} |
|||
.statistic-title{ |
|||
text-align: center; |
|||
padding: 10px 0 5px 0; |
|||
color: #666; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 24px; |
|||
} |
|||
.gridLayout-editTitle-line{ |
|||
margin-top: 0; |
|||
border-top: none; |
|||
|
|||
.remove-numberRow-Btn{ |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 20px; |
|||
} |
|||
|
|||
&::before{ |
|||
top: 26px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,186 +0,0 @@ |
|||
<template> |
|||
<div :id="gridItem.name+'-chart'+gridItem.i" class="chartMainOuter"> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import { getList } from "@/views/gridLayout/components/gridLayout" |
|||
import { createEachartAreaStyleColor } from "@/views/gridLayout/components/gridLayout" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
export default { |
|||
name: "mesBar", |
|||
data () { |
|||
return { |
|||
xAxisData: [], |
|||
seriesData: [], |
|||
dialogVisible: false, |
|||
title: '', |
|||
settings:{ |
|||
lineColorArr:[], |
|||
areaStyles:[], |
|||
}, |
|||
} |
|||
}, |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页（是否执行点击标题事件） |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 模块唯一标识 |
|||
dataSourceId: { |
|||
type: String, |
|||
default: () => { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
getList(JSON.parse(localStorage.getItem(this.dataSourceId))).then( rs => { |
|||
this.title = rs.title, |
|||
this.xAxisData = rs.xAxisData, |
|||
this.seriesData = rs.seriesData |
|||
this.initSettings() |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 初始化图表样式配置 |
|||
initSettings(){ |
|||
// 获取已有数据 |
|||
if(this.gridItem.gridSettings){ |
|||
this.settings = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
}else{ |
|||
// 重新配置数据 |
|||
this.setEchartColor() |
|||
} |
|||
}, |
|||
// 设置颜色 |
|||
setEchartColor(){ |
|||
let _finalSettings = createEachartAreaStyleColor(this.seriesData,0.8,0.5) |
|||
this.settings.lineColorArr = _finalSettings.lineColorArr |
|||
this.settings.areaStyles = [] |
|||
this.seriesData.forEach((item,key) => { |
|||
this.settings.areaStyles.push({ |
|||
color: new this.$echarts.graphic.LinearGradient( |
|||
0,1,0,0, _finalSettings.areaStyles[key].color |
|||
) |
|||
}) |
|||
}) |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
}, |
|||
drawChart() { |
|||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 |
|||
let myChart = this.$echarts.init(document.getElementById(this.gridItem.name+"-chart"+this.gridItem.i)); |
|||
// 指定图表的配置项和数据 |
|||
// 解析seriesData 数据 |
|||
let series = [] |
|||
let series_legend = [] |
|||
this.seriesData.forEach((item,key) => { |
|||
series.push({ |
|||
name: item.name, |
|||
type: "bar", |
|||
// barMaxWidth: 30, |
|||
// barWidth: 30, |
|||
itemStyle: this.settings.areaStyles[key], |
|||
data: item.data |
|||
}) |
|||
series_legend.push(item.name) |
|||
}) |
|||
|
|||
let option = { |
|||
title: { |
|||
text: this.title==null?"柱状图":this.title, |
|||
left:'center', |
|||
top:'10', |
|||
triggerEvent: this.isHome |
|||
}, |
|||
tooltip: {}, |
|||
grid: { |
|||
left: "30", |
|||
right: "30", |
|||
bottom: "40", |
|||
top:"70", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
// icon: "roundRect",// 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none |
|||
align:'left',//字在后方 |
|||
right:'center', |
|||
bottom:'10', |
|||
data: series_legend, |
|||
}, |
|||
xAxis: { |
|||
data: this.xAxisData, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#ddd', |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#666' |
|||
} |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#666' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#fff', |
|||
} |
|||
}, |
|||
axisTick:{ |
|||
show:false |
|||
} |
|||
}, |
|||
series: series |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
window.addEventListener('resize',function(){ |
|||
myChart.resize() |
|||
}) |
|||
myChart.off('click');//先解绑事件，防止事件重复触发 |
|||
myChart.on('click', params => { // 给图表绑定点击事件 |
|||
if (params.componentType === 'title') { // 确认点击部分为title |
|||
this.dialogVisible = true |
|||
} |
|||
}) |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
}, |
|||
// 获取样式配置信息 |
|||
getSettings(){ |
|||
return this.settings |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
</style> |
|||
@ -1,194 +0,0 @@ |
|||
<template> |
|||
<div :id="gridItem.name+'-chart'+gridItem.i" class="chartMainOuter"> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getList } from "@/views/gridLayout/components/gridLayout" |
|||
import { createEachartAreaStyleColor } from "@/views/gridLayout/components/gridLayout" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
export default { |
|||
name: "mesLine", |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页（是否执行点击标题事件） |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 模块唯一标识 |
|||
dataSourceId: { |
|||
type: String, |
|||
default: () => { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
xAxisData: [], |
|||
seriesData: [], |
|||
dialogVisible: false, |
|||
title: '', |
|||
settings:{ |
|||
lineColorArr:[], |
|||
areaStyles:[], |
|||
}, |
|||
} |
|||
}, |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
mounted() { |
|||
getList(JSON.parse(localStorage.getItem(this.dataSourceId))).then( rs => { |
|||
this.title = rs.title, |
|||
this.xAxisData = rs.xAxisData, |
|||
this.seriesData = rs.seriesData |
|||
this.initSettings() |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 初始化图表样式配置 |
|||
initSettings(){ |
|||
// 获取已有数据 |
|||
if(this.gridItem.gridSettings){ |
|||
this.settings = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
} |
|||
else{ |
|||
// 重新配置数据 |
|||
this.setEchartColor() |
|||
} |
|||
}, |
|||
// 设置颜色 |
|||
setEchartColor(){ |
|||
let _finalSettings = createEachartAreaStyleColor(this.seriesData) |
|||
this.settings.lineColorArr = _finalSettings.lineColorArr |
|||
this.settings.areaStyles = [] |
|||
this.seriesData.forEach((item,key) => { |
|||
this.settings.areaStyles.push({ |
|||
color: new this.$echarts.graphic.LinearGradient( |
|||
0,0,0,1, _finalSettings.areaStyles[key].color |
|||
) |
|||
}) |
|||
}) |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
}, |
|||
drawChart() { |
|||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 |
|||
let myChart = this.$echarts.init(document.getElementById(this.gridItem.name+"-chart"+this.gridItem.i)); |
|||
// 指定图表的配置项和数据 |
|||
// 解析seriesData 数据 |
|||
let series = [] |
|||
let series_legend = [] |
|||
this.seriesData.forEach((item,key) => { |
|||
series.push({ |
|||
name: item.name, |
|||
data: item.data, |
|||
type: 'line', |
|||
showSymbol:false, |
|||
smooth: true, |
|||
stack: "总量", |
|||
areaStyle: this.settings.areaStyles[key], |
|||
}) |
|||
series_legend.push(item.name) |
|||
}) |
|||
let option = { |
|||
color:this.settings.lineColorArr, |
|||
title: { |
|||
text: this.title==null?"折线图":this.title, |
|||
left:'center', |
|||
top:'10', |
|||
triggerEvent: this.isHome |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
legend: { |
|||
// icon: "circle",// 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none |
|||
align:'left',//字在后方 |
|||
right:'center', |
|||
bottom:'10', |
|||
data: series_legend, |
|||
}, |
|||
grid: { |
|||
left: "30", |
|||
right: "30", |
|||
bottom: "40", |
|||
top:"70", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
boundaryGap: false, |
|||
data: this.xAxisData, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#666' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#ddd', |
|||
} |
|||
}, |
|||
axisTick:{ |
|||
show:false |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#666' |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#fff', |
|||
} |
|||
}, |
|||
axisTick:{ |
|||
show:false |
|||
} |
|||
}, |
|||
series: series |
|||
} |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
window.addEventListener('resize',function(){ |
|||
myChart.resize() |
|||
}) |
|||
myChart.off('click');//先解绑事件，防止事件重复触发 |
|||
myChart.on('click', params => { // 给图表绑定点击事件 |
|||
if (params.componentType === 'title') { // 确认点击部分为title |
|||
this.dialogVisible = true |
|||
} |
|||
}) |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
}, |
|||
// 获取样式配置信息 |
|||
getSettings(){ |
|||
return this.settings |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
@import "../gridLayout.scss"; |
|||
</style> |
|||
@ -1,112 +0,0 @@ |
|||
<template> |
|||
<div style="height:100%" class="chartMainOuter"> |
|||
<div class="grid-item-header"> |
|||
<span @click="showNewsClick">{{this.title}}</span> |
|||
</div> |
|||
<el-table |
|||
v-loading="notReadLoading" |
|||
:data="tableData" |
|||
height="calc(100% - 45px)" |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="count" |
|||
label="数量" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getList } from "@/views/gridLayout/components/gridLayout" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
export default { |
|||
name: 'list', |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
notReadLoading: false, |
|||
tableData: [], |
|||
title: '', |
|||
} |
|||
}, |
|||
props:{ |
|||
//是否为首页（是否执行点击标题事件） |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
getList(JSON.parse(localStorage.getItem(this.dataSourceId))).then( rs => { |
|||
this.title = rs.title==null?"数据列表":this.title, |
|||
this.xAxisData = rs.xAxisData, |
|||
this.seriesData = rs.seriesData |
|||
this.xAxisData.forEach((item,index) => { |
|||
this.tableData.push({ |
|||
name: item, |
|||
count: rs.seriesData[0].data[index] |
|||
}) |
|||
}); |
|||
}) |
|||
}, |
|||
methods: { |
|||
showNewsClick() { |
|||
if (this.isHome) { |
|||
this.dialogVisible = true |
|||
} |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
.grid-item-header{ |
|||
height: 45px; |
|||
line-height: 45px; |
|||
padding: 0 15px; |
|||
background: #fff; |
|||
border-bottom: #ddd solid 1px; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 18px; |
|||
overflow: hidden; |
|||
} |
|||
.message-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-right: 8px; |
|||
} |
|||
.Footer { |
|||
padding: 40px 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
::v-deep .number { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,160 +0,0 @@ |
|||
<template> |
|||
<div :id="gridItem.name+'-chart'+gridItem.i" class="chartMainOuter"> |
|||
<dialogIndex :dialogVisible="dialogVisible" @close="close"></dialogIndex> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getList } from "@/views/gridLayout/components/gridLayout" |
|||
import dialogIndex from "@/components/News/dialogIndex" |
|||
import { get_chart_cycleColor_alpha } from "../gridLayout" |
|||
export default { |
|||
name: "mesPie", |
|||
components: { |
|||
dialogIndex |
|||
}, |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
//是否为首页（是否执行点击标题事件） |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
// 模块唯一标识 |
|||
dataSourceId: { |
|||
type: String, |
|||
default: () => { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
xAxisData: [], |
|||
seriesData: [], |
|||
dialogVisible: false, |
|||
title: '', |
|||
settings:{ |
|||
colors:[] |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
getList(JSON.parse(localStorage.getItem(this.dataSourceId))).then( rs => { |
|||
this.title = rs.title, |
|||
this.xAxisData = rs.xAxisData, |
|||
// 饼状图 数据结构需要特殊处理 |
|||
this.xAxisData.forEach((item,index) => { |
|||
this.seriesData.push({ |
|||
name: item, |
|||
value: rs.seriesData[0].data[index] |
|||
}) |
|||
}) |
|||
this.initSettings() |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 初始化图表样式配置 |
|||
initSettings(){ |
|||
// 获取已有数据 |
|||
if(this.gridItem.gridSettings){ |
|||
this.settings = JSON.parse(JSON.stringify(this.gridItem.gridSettings)) |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
} |
|||
else{ |
|||
// 重新配置数据 |
|||
this.setEchartColor() |
|||
} |
|||
}, |
|||
// 设置颜色 |
|||
setEchartColor(){ |
|||
this.settings.colors = [] |
|||
let _colors = get_chart_cycleColor_alpha(this.seriesData.length,true); |
|||
_colors.sort(()=>Math.random() - 0.5) |
|||
this.settings.colors = _colors |
|||
setTimeout(() => { |
|||
this.drawChart(); |
|||
},200) |
|||
}, |
|||
drawChart() { |
|||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 |
|||
let myChart = this.$echarts.init(document.getElementById(this.gridItem.name+"-chart"+this.gridItem.i)); |
|||
// 指定图表的配置项和数据 |
|||
let series = [] |
|||
series.push({ |
|||
type: "pie", // type设置为饼图 |
|||
radius: ["35%","55%"], |
|||
center: ['50%', '46%'], |
|||
itemStyle: { |
|||
borderRadius:10, |
|||
borderColor: '#fff', |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '28', |
|||
fontWeight: 'bold', |
|||
formatter:'{b}\n{d}%', |
|||
} |
|||
}, |
|||
data: this.seriesData |
|||
}) |
|||
const option = { |
|||
color: this.settings.colors, |
|||
title: { |
|||
text: this.title==null?"饼状图":this.title, |
|||
left:'center', |
|||
top:'10', |
|||
triggerEvent: this.isHome |
|||
}, |
|||
tooltip : { |
|||
trigger: 'item', |
|||
// formatter: "{b}<br/>{c}" |
|||
}, |
|||
legend: { |
|||
icon: "circle", |
|||
align:'left',//字在后方 |
|||
// orient : 'vertical', |
|||
bottom:'30', |
|||
data: this.xAxisData |
|||
}, |
|||
series: series |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
window.addEventListener('resize',function(){ |
|||
myChart.resize() |
|||
}) |
|||
myChart.off('click');//先解绑事件，防止事件重复触发 |
|||
myChart.on('click', params => { // 给图表绑定点击事件 |
|||
if (params.componentType === 'title') { // 确认点击部分为title |
|||
this.dialogVisible = true |
|||
} |
|||
}) |
|||
}, |
|||
close() { |
|||
this.dialogVisible = false |
|||
}, |
|||
// 获取样式配置信息 |
|||
getSettings(){ |
|||
return this.settings |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../gridLayout.scss"; |
|||
</style> |
|||
@ -1,196 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog :visible.sync="dataSourceDialogVisible" width="40%" top="8vh" append-to-body> |
|||
<div slot="title"> |
|||
<span style="padding-right: 10px;">数据源配置-{{ this.dataSourceId }}</span> |
|||
</div> |
|||
|
|||
<el-form :model="form" :rules="rules" ref="form" label-width="80px"> |
|||
<el-form-item label="图形标题" prop="title"> |
|||
<el-input v-model="form.title" placeholder="图形标题"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="请求地址" prop="url"> |
|||
<el-input v-model="form.url" placeholder="请求地址" > |
|||
<template slot="prepend">api/</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="请求类型"> |
|||
<el-radio-group v-model="form.type"> |
|||
<el-radio-button label="get" value="get"></el-radio-button> |
|||
<el-radio-button label="post" value="post"></el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="请求参数"> |
|||
<el-button type="success" @click="addTableData">新增</el-button> |
|||
</el-form-item> --> |
|||
<el-button type="text" @click="addTableData">+ 新增请求参数</el-button> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
max-height="250" |
|||
> |
|||
<el-table-column fixed="left" label="序号" width="50" > |
|||
<template slot-scope="scop"> |
|||
{{scop.$index+1}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="名称" |
|||
width="210"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="scope.row.name" placeholder="名称"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="value" |
|||
label="值" |
|||
width="210"> |
|||
<template slot-scope="scope"> |
|||
<el-input v-model="scope.row.value" placeholder="值"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
fixed="right" |
|||
label="操作" |
|||
width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleClick(scope)" icon="el-icon-delete" size="small" circle></el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="closeDataSource">取 消</el-button> |
|||
<el-button type="primary" @click="save('form')">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'dataSource', |
|||
data() { |
|||
return { |
|||
DialogLoading: false, |
|||
tableData: [], |
|||
form: { |
|||
title: '', |
|||
url: '', |
|||
type: 'post', |
|||
}, |
|||
//新增table表 |
|||
childTableData: [ |
|||
{ |
|||
name: '', |
|||
value: '', |
|||
} |
|||
], |
|||
rules: { |
|||
url: [ |
|||
{ |
|||
required: true, |
|||
message: '请求地址不能为空', |
|||
trigger: 'blur', |
|||
}, |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
props:{ |
|||
dataSourceDialogVisible: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
}, |
|||
dataSourceId: { |
|||
type: String, |
|||
default: () => { |
|||
return '' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dataSourceDialogVisible (){ |
|||
this.getList() |
|||
} |
|||
}, |
|||
mounted () { |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
let rs = JSON.parse(localStorage.getItem(this.dataSourceId)) |
|||
if (rs) { |
|||
this.form.title = rs.title |
|||
this.form.url = rs.url |
|||
this.form.type = rs.type |
|||
this.tableData = rs.tableData |
|||
} else { |
|||
this.form.title = '' |
|||
this.form.url = '' |
|||
this.form.type = 'post' |
|||
this.tableData = [] |
|||
} |
|||
}, |
|||
addTableData() { |
|||
let data = JSON.parse(JSON.stringify(...this.childTableData)) |
|||
this.tableData.push(data) |
|||
}, |
|||
save(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
// 无后端接口 临时本地缓存 |
|||
// 数据库表结构 |
|||
// id |
|||
// gridLayoutId : this.dataSourceId 当前用户模块组件唯一标识 |
|||
// work 当前用户 |
|||
// requestType 请求类型 this.form.type ----- post get |
|||
// requestUrl 请求地址 this.form.url ------ url |
|||
// requestParams 请求参数 this.tableData ----- json类型 [{name:11,value:12},{name:22,value:33}] |
|||
let rs = { |
|||
title: this.form.title, |
|||
type: this.form.type, |
|||
url: this.form.url, |
|||
tableData: this.tableData |
|||
} |
|||
localStorage.setItem(this.dataSourceId,JSON.stringify(rs)) |
|||
this.$message.success('数据源配置成功') |
|||
this.closeDataSource() |
|||
} |
|||
}) |
|||
}, |
|||
closeDataSource() { |
|||
this.$refs['form'].resetFields() |
|||
this.tableData = [] |
|||
this.$emit('closeDataSource') |
|||
}, |
|||
handleClick(row) { |
|||
this.tableData.splice(row.$index, 1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.message-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
font-weight: bold; |
|||
padding-right: 8px; |
|||
} |
|||
.Footer { |
|||
padding: 40px 40px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
::v-deep .number { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<div :id="gridItem.name+'-chart'+gridItem.i" class="chartMainOuter"></div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "demo", |
|||
props:{ |
|||
gridItem: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 如果为接口等异步后渲染图表，可取消setTimeout |
|||
setTimeout(()=>{ |
|||
this.drawChart(); |
|||
},0) |
|||
}, |
|||
methods: { |
|||
drawChart() { |
|||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应 |
|||
let myChart = this.$echarts.init(document.getElementById(this.gridItem.name+"-chart"+this.gridItem.i)); |
|||
// 指定图表的配置项和数据 |
|||
let option = { |
|||
title: { |
|||
text: "消息待办-柱状图", |
|||
}, |
|||
tooltip: {}, |
|||
legend: { |
|||
data: ["销量"], |
|||
}, |
|||
xAxis: { |
|||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], |
|||
}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{ |
|||
name: "销量", |
|||
type: "bar", |
|||
data: [5, 20, 36, 10, 10, 20], |
|||
}, |
|||
], |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
// 浏览器窗口大小更改变化 |
|||
window.addEventListener('resize',function(){ |
|||
myChart.resize() |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "gridLayout.scss"; |
|||
</style> |
|||
@ -1,131 +0,0 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// echart的重新渲染
|
|||
export function gridLayout_chart_resize(dom) { |
|||
dom.resize() |
|||
} |
|||
// 循环颜色(支持透明度)
|
|||
/** |
|||
* 循环echart图的颜色(支持透明度) |
|||
* @param {*} number 一共需要多少个颜色，可以不传，不传默认返回全部1组颜色 |
|||
* @param {*} isCreate 是否直接生成rgba颜色，true:返回['rgba(1,110,224)']格式,false:返回[{r:"1",g:"110",b:"244"}]格式 |
|||
* @param {*} alpha 透明度，默认为1，直接生成rgba颜色值参数为真时使用 |
|||
* @param {*} colors 自定义颜色组,color格式必须为：[{r:"1",g:"110",b:"244"}] |
|||
* @param {*} append 是否追加，true：colors值将追加进去， false:返回值直接用colors代替 |
|||
* @returns |
|||
*/ |
|||
export function get_chart_cycleColor_alpha(number,isCreate,alpha = 1,colors,append){ |
|||
// let _color_item = {
|
|||
// r:parseInt(Math.random() * 255),
|
|||
// g:parseInt(Math.random() * 255),
|
|||
// b:parseInt(Math.random() * 255)
|
|||
// }
|
|||
// let _colors = colors || ['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc','#529FDB','#FF8000','#88D36C','#FCC12B',
|
|||
// '#D38C6C','#AB9DF3','#40C03A','#ED94F5','#6CBED3']
|
|||
let _colors = [ |
|||
{r:"84",g:"112",b:"198"}, |
|||
{r:"171",g:"157",b:"243"}, |
|||
{r:"237",g:"148",b:"245"}, |
|||
{r:"1",g:"110",b:"244"}, |
|||
{r:"82",g:"159",b:"219"}, |
|||
{r:"108",g:"190",b:"211"}, |
|||
{r:"60",g:"161",b:"112"}, |
|||
{r:"64",g:"192",b:"58"}, |
|||
{r:"136",g:"211",b:"108"}, |
|||
// {r:"145",g:"205",b:"119"},
|
|||
{r:"211",g:"140",b:"108"}, |
|||
{r:"239",g:"101",b:"103"}, |
|||
// {r:"249",g:"201",b:"86"},
|
|||
// {r:"117",g:"190",b:"220"},
|
|||
{r:"255",g:"128",b:"0"}, |
|||
{r:"252",g:"193",b:"43"}, |
|||
] |
|||
if(colors){_colors = append ? _colors.concat(colors) : colors} |
|||
let _all = [] |
|||
let _length = number ? Math.ceil(number/_colors.length) : 1 |
|||
for(let i = 0;i<_length;i++){ |
|||
_all= _all.concat(_colors) |
|||
} |
|||
if(isCreate){ |
|||
let _create = [] |
|||
_all.forEach(item=>{ |
|||
let _item = `rgba(${item.r},${item.g},${item.b},${alpha})` |
|||
_create.push(_item) |
|||
}) |
|||
_all = _create |
|||
} |
|||
return _all |
|||
} |
|||
// 模块获取数据
|
|||
export function getList(dataSource){ |
|||
return new Promise((resolve, reject) => { |
|||
if (dataSource) { |
|||
const params = {} |
|||
dataSource.tableData.forEach(item => { |
|||
params[item.name] = item.value |
|||
}) |
|||
getGridLayout(dataSource.url, dataSource.type, params).then( res => { |
|||
// TODO：赋值获取后端数据
|
|||
const rs = { |
|||
title: dataSource.title, |
|||
xAxisData: res.xAxisData, // ['a','b','c','d','e','f']
|
|||
seriesData: res.seriesData // [{name:'说明1',data:[1,2,3,4,5,6]},{name:'说明2',data:[3,4,10,12,1,5]}]
|
|||
} |
|||
resolve(rs) |
|||
}) |
|||
} else { |
|||
// 默认静态数据
|
|||
const rs = { |
|||
xAxisData: ['a','b','c','d','e','f'], |
|||
seriesData: [{name:'说明1',data:[1,2,3,4,5,6]},{name:'说明2',data:[3,4,10,12,1,5]}] |
|||
} |
|||
resolve(rs) |
|||
} |
|||
}) |
|||
} |
|||
// 数据源请求接口
|
|||
function getGridLayout(url, method, params) { |
|||
return request({ |
|||
url: localStorage.getItem('base') + '/api/' + url, |
|||
method: method, |
|||
params: params |
|||
}) |
|||
} |
|||
|
|||
// 颜色选择器-预订颜色
|
|||
export function getPredefineColors(number,iscreate = true,alpha = 1) { |
|||
return get_chart_cycleColor_alpha(number,iscreate,alpha,[ |
|||
{r:"255",g:"255",b:"255"}, |
|||
{r:"102",g:"102",b:"102"}, |
|||
{r:"0",g:"0",b:"0"}, |
|||
],true) |
|||
} |
|||
|
|||
|
|||
// 循环随机颜色echart配置
|
|||
export function createEachartAreaStyleColor(seriesData,alpha1=0.8,alpha2=0.2){ |
|||
let _settings = { |
|||
lineColorArr:[], |
|||
areaStyles:[], |
|||
} |
|||
// 生成颜色
|
|||
function __createRgbaColor(color,alpha = 0.8,append){ |
|||
let _item = `rgba(${color.r},${color.g},${color.b},${alpha})` |
|||
if(append)_settings.lineColorArr.push(_item) |
|||
return _item |
|||
} |
|||
seriesData.forEach((item) => { |
|||
let _colors = get_chart_cycleColor_alpha(seriesData.length) |
|||
let _color_item = _colors[parseInt(Math.random() * _colors.length)] |
|||
_settings.areaStyles.push({ |
|||
color:[{ |
|||
offset: 0, |
|||
color: __createRgbaColor(_color_item,alpha1,true) |
|||
}, { |
|||
offset: 1, |
|||
color: __createRgbaColor(_color_item,alpha2) |
|||
}] |
|||
}) |
|||
}) |
|||
return _settings |
|||
} |
|||
@ -1,59 +0,0 @@ |
|||
// echart外部框样式 |
|||
.chartMainOuter{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
box-shadow: 2px 2px 10px #ddd; |
|||
} |
|||
// 编辑按钮 |
|||
.gridItem-edit-button{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
box-shadow: 1px 1px 5px #aaa; |
|||
margin: 0 !important; |
|||
} |
|||
// 删除按钮 |
|||
.gridItem-remove-button { |
|||
position: absolute; |
|||
right: 0px; |
|||
top: 0px; |
|||
box-shadow: 1px 1px 5px #aaa; |
|||
margin: 0; |
|||
} |
|||
// 刷新按钮 |
|||
.gridItem-refresh-button{ |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 0; |
|||
box-shadow: 1px 1px 5px #aaa; |
|||
margin: 0 !important; |
|||
} |
|||
// 更多配置内标题样式 |
|||
.gridLayout-editTitle-line{ |
|||
width: 100%; |
|||
margin-top: 50px; |
|||
border-top: #ddd solid 1px; |
|||
padding: 10px 20px; |
|||
font-weight: bold; |
|||
position: relative; |
|||
|
|||
&:first-child{ |
|||
margin-top: 0; |
|||
} |
|||
|
|||
&::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 8px; |
|||
top: 13px; |
|||
width: 3px; |
|||
height: 14px; |
|||
background: #409EFF; |
|||
} |
|||
} |
|||
// 颜色选择器-预设值方块 |
|||
.el-color-predefine__color-selector{ |
|||
border: #eee solid 1px; |
|||
box-sizing: border-box; |
|||
} |
|||
@ -1,500 +0,0 @@ |
|||
<template> |
|||
<div class="gridlayoutEditPage"> |
|||
<!-- <div> |
|||
<div class="layoutJSON"> |
|||
Displayed as <code>[x, y, w, h]</code>: |
|||
<div class="columns"> |
|||
<div class="layoutItem" v-for="item in layout" :key="item.i" > |
|||
<b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}] |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<br/> --> |
|||
<!-- 左侧列表 --> |
|||
<div class="leftNav" v-if="!isHome"> |
|||
<!-- 左侧菜单 --> |
|||
<el-collapse class="navList"> |
|||
<el-collapse-item |
|||
v-for="(item,index) in navList" |
|||
:key="index" |
|||
:title="item.label" |
|||
:name="item.name" |
|||
> |
|||
<div |
|||
v-for="(item2,index2) in item.inner" |
|||
:key="index2" |
|||
@drag="drag(item2,item,arguments)" |
|||
@dragend="dragend(item2,item,arguments)" |
|||
class="droppable-element" |
|||
draggable="true" |
|||
unselectable="on" |
|||
>{{item2.title}}</div> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
<!-- 左侧按钮 --> |
|||
<div class="btnBox" style="display:flex"> |
|||
<!-- <el-button type="success" @click="viewHandle(true)" icon="el-icon-view" circle></el-button> --> |
|||
<el-button type="success" @click="viewHandle(true)">预览</el-button> |
|||
<el-button type="primary" style="width:calc(100% - 95px)" @click="save">保存</el-button> |
|||
</div> |
|||
</div> |
|||
<!-- 右侧编辑处 --> |
|||
<div class="rightContain" :style="{padding:!isHome ? '20px' : ''}"> |
|||
<div |
|||
id="content" |
|||
class="editContent" |
|||
:class="[!isHome ? 'editContent-bg':'']" |
|||
> |
|||
<grid-layout ref="gridlayout" :layout.sync="layout" |
|||
:col-num="12" |
|||
:row-height="30" |
|||
:is-draggable="!isHome" |
|||
:is-resizable="!isHome" |
|||
:responsive="false" |
|||
:vertical-compact="false" |
|||
:prevent-collision="false" |
|||
:use-css-transforms="true" |
|||
:margin="[20, 20]" |
|||
> |
|||
<grid-item :key="item.i" v-for="item in layout" |
|||
:x="item.x" |
|||
:y="item.y" |
|||
:w="item.w" |
|||
:h="item.h" |
|||
:i="item.i" |
|||
@resize="resizedEvent(item,arguments)" |
|||
@resized="resizedEvent(item,arguments)" |
|||
> |
|||
<!-- 标题/文本 --> |
|||
<gridText v-if="item.name=='gridText' || item.name=='gridTitle'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i"></gridText> |
|||
<!-- 数值统计 --> |
|||
<statistics v-else-if="item.name=='statistics'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i"></statistics> |
|||
<!-- 倒计时 --> |
|||
<countDown v-else-if="item.name=='countDown'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i"></countDown> |
|||
<!-- 消息待办-饼状图 --> |
|||
<chartPie v-else-if="item.name=='pie'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i" :dataSourceId ="item.name+item.i"></chartPie> |
|||
<!-- 消息待办-柱状图 --> |
|||
<chartBar v-else-if="item.name=='bar'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i" :dataSourceId ="item.name+item.i"></chartBar> |
|||
<!-- 消息待办-折线图 --> |
|||
<chartLine v-else-if="item.name=='line'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i" :dataSourceId ="item.name+item.i"></chartLine> |
|||
<!-- 消息待办-列表 --> |
|||
<chartList v-else-if="item.name=='list'" :gridItem="item" :isHome="isHome" :ref="'ref-'+item.name+item.i" :dataSourceId ="item.name+item.i"></chartList> |
|||
<div class="dragOuter" v-else> |
|||
{{ item.name }} |
|||
</div> |
|||
<!-- 删除 --> |
|||
<el-button |
|||
v-if="!isHome" |
|||
type="danger" |
|||
icon="el-icon-delete" |
|||
circle |
|||
class="gridItem-remove-button" |
|||
@click="removeItem(item.i)" |
|||
size="mini" |
|||
></el-button> |
|||
<!-- 数据源配置 --> |
|||
<el-button |
|||
v-if="!isHome && (item.type=='echarts' || item.name=='list')" |
|||
type="warning" |
|||
icon="el-icon-edit" |
|||
circle |
|||
class="gridItem-edit-button" |
|||
@click="editItem(item.i)" |
|||
size="mini" |
|||
></el-button> |
|||
<!-- 颜色刷新 --> |
|||
<el-button |
|||
v-if="!isHome && (item.type=='echarts')" |
|||
type="success" |
|||
icon="el-icon-refresh" |
|||
circle |
|||
class="gridItem-refresh-button" |
|||
@click="refreshItem(item)" |
|||
size="mini" |
|||
></el-button> |
|||
</grid-item> |
|||
</grid-layout> |
|||
</div> |
|||
</div> |
|||
<dataSource :dataSourceDialogVisible="dataSourceDialogVisible" :dataSourceId="dataSourceId" @closeDataSource="closeDataSource"></dataSource> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import {GridLayout, GridItem} from "vue-grid-layout" |
|||
import gridText from "@/views/gridLayout/components/baseConfig/gridText" |
|||
import statistics from "@/views/gridLayout/components/baseConfig/statistics" |
|||
import countDown from "@/views/gridLayout/components/baseConfig/countDown" |
|||
import chartList from "@/views/gridLayout/components/chart/list" |
|||
import chartBar from "@/views/gridLayout/components/chart/bar" |
|||
import chartPie from "@/views/gridLayout/components/chart/pie" |
|||
import chartLine from "@/views/gridLayout/components/chart/line" |
|||
import dataSource from "@/views/gridLayout/components/dataSource" |
|||
import { gridLayout_chart_resize } from "./components/gridLayout" |
|||
|
|||
export default { |
|||
name:"Gridlayout", |
|||
components: { |
|||
GridLayout, |
|||
GridItem, |
|||
gridText, |
|||
statistics, |
|||
countDown, |
|||
chartList, |
|||
chartBar, |
|||
chartPie, |
|||
chartLine, |
|||
dataSource |
|||
}, |
|||
watch:{ |
|||
// 导航收缩监听，页面echart图渲染处理 |
|||
'sidebar.opened'(){ |
|||
setTimeout(()=>{ |
|||
this.layout.forEach(item=>{ |
|||
if(item.type == "echarts"){ |
|||
this.resizedEvent(item) |
|||
} |
|||
}) |
|||
},100) |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(["sidebar"]), |
|||
}, |
|||
props: { |
|||
//是否为首页 |
|||
isHome: { |
|||
type: Boolean, |
|||
default: () => { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
DragPosW: 5, |
|||
DragPosH: 10, |
|||
mouseXY: { |
|||
"x": null, |
|||
"y": null |
|||
}, |
|||
DragPos: { |
|||
"x": null, |
|||
"y": null, |
|||
// "w": this.DragPosW, |
|||
// "h": this.DragPosH, |
|||
"i": null |
|||
}, |
|||
navList:[ |
|||
{label:'基础组件',name:'title',inner:[ |
|||
{title:'标题',name:'gridTitle'}, |
|||
{title:'文本',name:'gridText'}, |
|||
{title:'数值统计',name:'statistics'}, |
|||
{title:'倒计时',name:'countDown'}, |
|||
]}, |
|||
{label:'图表组件',name:'chart',inner:[ |
|||
{title:'饼状图',name:'pie',type:"echarts"}, |
|||
{title:'柱状图',name:'bar',type:"echarts"}, |
|||
{title:'折线图',name:'line',type:"echarts"}, |
|||
{title:'列表',name:'list'}, |
|||
]}, |
|||
], |
|||
layout: [ |
|||
// {"x": 0, "y": 0, "w": 2, "h": 2, "i": "0"}, |
|||
], |
|||
index: 0, |
|||
// 配置数据源是否显示 |
|||
dataSourceDialogVisible: false, |
|||
// 配置数据源类型 例：pie , bar, line |
|||
dataSourceId: '', |
|||
showView:false |
|||
} |
|||
}, |
|||
mounted() { |
|||
let that = this |
|||
document.addEventListener("dragover", function (e) { |
|||
that.mouseXY.x = e.clientX; |
|||
that.mouseXY.y = e.clientY; |
|||
}, false); |
|||
// 配置默认布局，防止进入首页留白 |
|||
let _defaultData = [ |
|||
{"x":0,"y":8,"w":3,"h":7,"i":0,"name":"line","moved":false,"type":"echarts","gridSettings":{"lineColorArr":["rgba(171,157,243,0.8)","rgba(136,211,108,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(171,157,243,0.8)"},{"offset":1,"color":"rgba(171,157,243,0.2)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(136,211,108,0.8)"},{"offset":1,"color":"rgba(136,211,108,0.2)"}]}}]}}, |
|||
{"x":7,"y":4,"w":5,"h":7,"i":1,"name":"line","moved":false,"type":"echarts","gridSettings":{"lineColorArr":["rgba(249,201,86,0.8)","rgba(117,190,220,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(249,201,86,0.8)"},{"offset":1,"color":"rgba(249,201,86,0.2)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(117,190,220,0.8)"},{"offset":1,"color":"rgba(117,190,220,0.2)"}]}}]}}, |
|||
{"x":0,"y":15,"w":3,"h":6,"i":2,"name":"line","moved":false,"type":"echarts","gridSettings":{"lineColorArr":["rgba(117,190,220,0.8)","rgba(255,128,0,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(117,190,220,0.8)"},{"offset":1,"color":"rgba(117,190,220,0.2)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(255,128,0,0.8)"},{"offset":1,"color":"rgba(255,128,0,0.2)"}]}}]}}, |
|||
{"x":3,"y":8,"w":4,"h":13,"i":3,"name":"pie","moved":false,"type":"echarts","gridSettings":{"colors":["rgba(82,159,219,1)","rgba(64,192,58,1)","rgba(255,128,0,1)","rgba(1,110,244,1)","rgba(136,211,108,1)","rgba(239,101,103,1)","rgba(237,148,245,1)","rgba(252,193,43,1)","rgba(171,157,243,1)","rgba(60,161,112,1)","rgba(211,140,108,1)","rgba(108,190,211,1)","rgba(84,112,198,1)"]}}, |
|||
{"x":7,"y":11,"w":5,"h":10,"i":4,"name":"line","moved":false,"type":"echarts","gridSettings":{"lineColorArr":["rgba(84,112,198,0.8)","rgba(249,201,86,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(84,112,198,0.8)"},{"offset":1,"color":"rgba(84,112,198,0.2)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"rgba(249,201,86,0.8)"},{"offset":1,"color":"rgba(249,201,86,0.2)"}]}}]}}, |
|||
{"x":8,"y":23,"w":4,"h":10,"i":5,"name":"bar","moved":false,"type":"echarts","gridSettings":{"lineColorArr":["rgba(211,140,108,0.8)","rgba(117,190,220,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":1,"color":"rgba(211,140,108,0.8)"},{"offset":0,"color":"rgba(211,140,108,0.4)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":1,"color":"rgba(117,190,220,0.8)"},{"offset":0,"color":"rgba(117,190,220,0.4)"}]}}]}}, |
|||
{"x":5,"y":23,"w":3,"h":10,"i":6,"name":"list","moved":false}, |
|||
{"x":0,"y":4,"w":7,"h":2,"i":7,"name":"statistics","moved":false,"gridSettings":{"numberConfig":[{"number":"111.15115415","value":111.2,"numberStyle":{"fontSize":"20px","color":"#ff9000","fontWeight":"bold"},"groupSeparator":",","decimalSeparator":".","precision":"1","prefix":"","suffix":""},{"number":"222.22555555","value":222.23,"numberStyle":{"fontSize":"20px","color":"rgba(0, 206, 209, 1)","fontWeight":"normal"},"groupSeparator":",","decimalSeparator":".","precision":"2","prefix":"","suffix":""},{"number":"333.5415453","value":333.542,"numberStyle":{"fontSize":"20px","color":"#303133","fontWeight":"bold"},"groupSeparator":",","decimalSeparator":".","precision":"3","prefix":"","suffix":""},{"number":"444.445452524","value":444.4455,"numberStyle":{"fontSize":"20px","color":"#ff9000","fontWeight":"normal"},"groupSeparator":",","decimalSeparator":".","precision":"4","prefix":"","suffix":""}],"title":"今年增长数","titleStyle":{"fontSize":"14px","color":"#666","lineHeight":"24px","fontWeight":"bold"},"boxShadow":true,"numberSuffix":"—"}}, |
|||
{"x":0,"y":6,"w":3,"h":2,"i":8,"name":"statistics","moved":false,"gridSettings":{"numberConfig":[{"number":"11111.515515","value":11112,"numberStyle":{"fontSize":"20px","color":"#409EFF","fontWeight":"bold"},"groupSeparator":",","decimalSeparator":".","precision":"0","prefix":"","suffix":"个"}],"title":"开始数值","titleStyle":{"fontSize":"14px","color":"#666","lineHeight":"24px","fontWeight":"bold"},"boxShadow":true,"numberSuffix":"—"}}, |
|||
{"x":0,"y":0,"w":12,"h":1,"i":9,"name":"gridTitle","moved":false,"gridSettings":{"text":"数据汇总图表","fontSize":"22px","fontColor":"#2f80ea","lineHeight":"34px","fontWeight":"bold","boxShadow":false,"centerValue":"center"}}, |
|||
{"x":0,"y":1,"w":12,"h":3,"i":10,"name":"gridText","moved":false,"gridSettings":{"text":"百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 [1] “百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。 百度拥有数万名研发工程师，这是中国乃至全球都顶尖的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗斯和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。 [1] ","fontSize":"14px","fontColor":"#666","lineHeight":"30px","fontWeight":"normal","boxShadow":false,"centerValue":"left"}}, |
|||
{"x":0,"y":21,"w":12,"h":2,"i":11,"name":"gridText","moved":false,"gridSettings":{"text":"「路漫漫其修远兮，吾将上下而求索」 古有屈原天问，后世登月问天 心之所向，所以求索不止，行之所至 现在，文心一言与搜索整合 从心之所向到「心」之「索」向 共同探索更广阔的世界 我们，一言为定 ","fontSize":"12px","fontColor":"#666","lineHeight":"34px","fontWeight":"bold","boxShadow":true,"centerValue":"center"}}, |
|||
{"x":3,"y":6,"w":4,"h":2,"i":12,"name":"countDown","moved":false,"gridSettings":{"value":1678438800000,"valueStyle":{"fontSize":"24px","color":"rgba(255, 69, 0, 1)","fontWeight":"bold"},"title":"倒计时","titleStyle":{"fontSize":"14px","color":"#666","lineHeight":"24px","fontWeight":"bold"},"format":"HH:mm:ss","boxShadow":true}}, |
|||
{"x":0,"y":23,"w":5,"h":10,"i":13,"name":"bar","type":"echarts","moved":false,"gridSettings":{"lineColorArr":["rgba(60,161,112,0.8)","rgba(249,201,86,0.8)"],"areaStyles":[{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":1,"color":"rgba(60,161,112,0.8)"},{"offset":0,"color":"rgba(60,161,112,0.4)"}]}},{"color":{"x":0,"y":0,"x2":0,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":1,"color":"rgba(249,201,86,0.8)"},{"offset":0,"color":"rgba(249,201,86,0.4)"}]}}]}} |
|||
] |
|||
this.layout = localStorage.getItem('gridLayoutConfig')==null?_defaultData:JSON.parse(localStorage.getItem('gridLayoutConfig')) |
|||
let indexMax = 0 |
|||
this.layout.forEach(item => { |
|||
if (item.i > indexMax) { |
|||
indexMax = item.i |
|||
} |
|||
}) |
|||
this.index = indexMax + 1 |
|||
}, |
|||
beforeDestroy() { |
|||
}, |
|||
methods: { |
|||
// 预览 |
|||
viewHandle(show){ |
|||
this.$emit('isViewHanlde',show,this.layout,) |
|||
}, |
|||
// 配置占位符大小 |
|||
setDragPosWH(item){ |
|||
let _DragPosWH = { |
|||
w:this.DragPosW, |
|||
h:this.DragPosH |
|||
} |
|||
switch (item.name){ |
|||
// 标题 |
|||
case "gridTitle": |
|||
// 文本 |
|||
case "gridText": |
|||
_DragPosWH.w = 12; |
|||
_DragPosWH.h = 1; |
|||
break; |
|||
// 数值统计 |
|||
case "statistics": |
|||
// 倒计时 |
|||
case "countDown": |
|||
_DragPosWH.w = 4; |
|||
_DragPosWH.h = 2; |
|||
break; |
|||
|
|||
} |
|||
return _DragPosWH |
|||
}, |
|||
drag: function (item,itemParent,e) { |
|||
let _DragPosW = this.setDragPosWH(item).w, |
|||
_DragPosH = this.setDragPosWH(item).h |
|||
let parentRect = document.getElementById('content').getBoundingClientRect(); |
|||
let mouseInGrid = false; |
|||
if (((this.mouseXY.x > parentRect.left) && (this.mouseXY.x < parentRect.right)) && ((this.mouseXY.y > parentRect.top) && (this.mouseXY.y < parentRect.bottom))) { |
|||
mouseInGrid = true; |
|||
} |
|||
if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) { |
|||
this.layout.push({ |
|||
x: (this.layout.length * 2) % (this.colNum || 12), |
|||
y: this.layout.length + (this.colNum || 12), // puts it at the bottom |
|||
w: _DragPosW, |
|||
h: _DragPosH, |
|||
i: 'drop', |
|||
}); |
|||
} |
|||
let index = this.layout.findIndex(item => item.i === 'drop'); |
|||
if (index !== -1) { |
|||
try { |
|||
this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = "none"; |
|||
} catch { |
|||
} |
|||
let el = this.$refs.gridlayout.$children[index]; |
|||
el.dragging = {"top": this.mouseXY.y - parentRect.top, "left": this.mouseXY.x - parentRect.left}; |
|||
let new_pos = el.calcXY(this.mouseXY.y - parentRect.top, this.mouseXY.x - parentRect.left); |
|||
if (mouseInGrid === true) { |
|||
this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, _DragPosH, _DragPosW); |
|||
this.DragPos.i = String(index); |
|||
this.DragPos.x = this.layout[index].x; |
|||
this.DragPos.y = this.layout[index].y; |
|||
} |
|||
if (mouseInGrid === false) { |
|||
this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, _DragPosH, _DragPosW); |
|||
this.layout = this.layout.filter(obj => obj.i !== 'drop'); |
|||
} |
|||
} |
|||
}, |
|||
dragend: function (item,itemParent, e) { |
|||
// if (this.index > 10) { |
|||
// this.$alert('组件元素最多放置10个') |
|||
// return |
|||
// } |
|||
let _DragPosW = this.setDragPosWH(item).w, |
|||
_DragPosH = this.setDragPosWH(item).h |
|||
let parentRect = document.getElementById('content').getBoundingClientRect(); |
|||
let mouseInGrid = false; |
|||
if (((this.mouseXY.x > parentRect.left) && (this.mouseXY.x < parentRect.right)) && ((this.mouseXY.y > parentRect.top) && (this.mouseXY.y < parentRect.bottom))) { |
|||
mouseInGrid = true; |
|||
} |
|||
if (mouseInGrid === true) { |
|||
// alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`); |
|||
this.$refs.gridlayout.dragEvent('dragend', 'drop', this.DragPos.x, this.DragPos.y, _DragPosH, _DragPosW); |
|||
this.layout = this.layout.filter(obj => obj.i !== 'drop'); |
|||
this.layout.push({ |
|||
x: this.DragPos.x, |
|||
y: this.DragPos.y, |
|||
w: _DragPosW, |
|||
h: _DragPosH, |
|||
// i: DragPos.i, |
|||
i: this.index, // 修改——带有删除功能 |
|||
name: item.name, |
|||
type: item.type |
|||
}); |
|||
this.index++ |
|||
// this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1); |
|||
try { |
|||
this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block"; |
|||
} catch { |
|||
} |
|||
} |
|||
}, |
|||
// 更改echart内表格宽高变化重新赋值 |
|||
resizedEvent: function(item){ |
|||
if(item.type != 'echarts') return |
|||
let dom = this.$refs['ref-'+item.name+item.i] |
|||
if(dom && dom[0]){ |
|||
gridLayout_chart_resize(this.$echarts.init(document.getElementById(item.name+"-chart"+item.i))) |
|||
} |
|||
}, |
|||
// 删除节点 |
|||
removeItem: function (val) { |
|||
this.$confirm('您确定删除吗, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const index = this.layout.map(item => item.i).indexOf(val); |
|||
this.layout.splice(index, 1); |
|||
}).catch(() => { |
|||
|
|||
}); |
|||
}, |
|||
// 刷新节点颜色 |
|||
refreshItem(item){ |
|||
if(item.type != 'echarts') return |
|||
let dom = this.$refs['ref-'+item.name+item.i] |
|||
if(dom && dom[0]){ |
|||
dom[0].setEchartColor(item) |
|||
} |
|||
}, |
|||
// 关闭数据源配置 |
|||
closeDataSource() { |
|||
this.dataSourceDialogVisible = false |
|||
}, |
|||
editItem (val) { |
|||
const index = this.layout.map(item => item.i).indexOf(val) |
|||
this.dataSourceId = this.layout[index].name + this.layout[index].i |
|||
this.dataSourceDialogVisible = true |
|||
}, |
|||
// 保存 |
|||
save() { |
|||
// 特殊配置数据回显，如基础组件的：标题/文本/数值统计 |
|||
this.layout.forEach((item,key)=>{ |
|||
if( |
|||
this.$refs['ref-'+item.name+item.i] && |
|||
this.$refs['ref-'+item.name+item.i].length > 0 && |
|||
this.$refs['ref-'+item.name+item.i][0].getSettings |
|||
){ |
|||
this.layout[key]['gridSettings'] = this.$refs['ref-'+item.name+item.i][0].getSettings() |
|||
} |
|||
}) |
|||
localStorage.setItem('gridLayoutConfig', JSON.stringify(this.layout)) |
|||
this.$message.success('保存成功') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
@import "components/gridLayout.scss"; |
|||
/* 右侧固定框背景色 */ |
|||
.gridlayoutEditPage .vue-grid-item{ |
|||
touch-action: none; |
|||
border: none !important; |
|||
.vue-grid-placeholder{ |
|||
background: #777 !important; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
// 基础布局 |
|||
.gridlayoutEditPage{ |
|||
::-webkit-scrollbar { |
|||
width: 5px; |
|||
height: 5px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
border-radius: 10px; |
|||
background-color:#ddd; |
|||
} |
|||
|
|||
user-select: none; |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
.leftNav{ |
|||
width: 240px; |
|||
flex-shrink: 0; |
|||
padding: 5px 0 20px 20px; |
|||
box-shadow: 1px 1px 5px #ddd; |
|||
border:solid 1px #eee; |
|||
|
|||
.navList{ |
|||
height: calc(100% - 60px); |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0 0 25px 0; |
|||
overflow: auto; |
|||
border: none; |
|||
|
|||
.droppable-element { |
|||
margin: 0; |
|||
padding: 5px 0; |
|||
text-align: center; |
|||
width: calc(100% - 20px); |
|||
border:solid 1px #ddd; |
|||
color: #666; |
|||
cursor: pointer; |
|||
margin-bottom: 12px; |
|||
|
|||
&:hover{ |
|||
border-color: #409eff; |
|||
color: #409eff; |
|||
box-shadow: 1px 1px 5px #ddd; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.rightContain{ |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: auto; |
|||
min-height: 100%; |
|||
padding-top: 10px; |
|||
|
|||
.editContent{ |
|||
min-height: calc(100% - 50px); |
|||
|
|||
&.editContent-bg{ |
|||
min-height: 100%; |
|||
background-color: #efefef; |
|||
background-image: linear-gradient(#f8f8f8 20px,transparent 0),linear-gradient(90deg,#f8f8f8 20px,transparent 0); |
|||
background-size: calc(8.43333% - 3px) 50px; |
|||
} |
|||
} |
|||
|
|||
// 右侧固定框 |
|||
.vue-grid-item:not(.vue-grid-placeholder) { |
|||
background: #eee; |
|||
border: 1px solid #ddd; |
|||
|
|||
.dragOuter{ |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,100 +0,0 @@ |
|||
<template> |
|||
<div style="height:100%;width:100%"> |
|||
<gridLayout |
|||
v-if="!showView" |
|||
:isHome="false" |
|||
@isViewHanlde="isViewHanlde" |
|||
ref="gridLayoutRef" |
|||
> |
|||
</gridLayout> |
|||
<!-- 预览 --> |
|||
<gridLayout |
|||
v-if="showView" |
|||
:isHome="true" |
|||
ref="gridLayoutRef" |
|||
> |
|||
</gridLayout> |
|||
<!-- 左下预览返回按钮 --> |
|||
<el-button |
|||
v-if="showView" |
|||
type="danger" |
|||
class="closeViewBtn" |
|||
@click="isViewHanlde(false)" |
|||
>取消预览</el-button> |
|||
<!-- 右上预览返回按钮x --> |
|||
<el-button |
|||
v-if="showView" |
|||
icon="el-icon-close" |
|||
class="closeViewBtn-close" |
|||
@click="isViewHanlde(false)" |
|||
circle |
|||
size="mini" |
|||
></el-button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import gridLayout from "@/views/gridLayout/index" |
|||
export default { |
|||
name:"Gridlayout", |
|||
// 此页没有缓存，切换页面提醒是否保存 |
|||
beforeRouteLeave(to,from,next){ |
|||
// 判断是否存在页面tag |
|||
let hasTag = false |
|||
this.$store.state.tagsView.visitedViews.forEach((item)=>{ |
|||
if(item.path == '/gridlayout'){ |
|||
hasTag = true |
|||
return |
|||
} |
|||
}) |
|||
if(!hasTag){ next();return} |
|||
if(from.path == '/gridlayout' && !this.isHome){ |
|||
this.$confirm('请确定是否已保存，离开后操作将丢失，是否确定离开此页?', '提示', { |
|||
confirmButtonText: '确定离开', |
|||
cancelButtonText: '留在此页', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
next() |
|||
}).catch((action) => { |
|||
//console.log(action) |
|||
}); |
|||
}else{ |
|||
next() |
|||
} |
|||
}, |
|||
components: { |
|||
gridLayout |
|||
}, |
|||
data(){ |
|||
return { |
|||
showView:false, |
|||
pageData:null, |
|||
} |
|||
}, |
|||
methods: { |
|||
isViewHanlde(show,list){ |
|||
if(list)this.pageData = list |
|||
this.showView = show |
|||
setTimeout(()=>{ |
|||
this.pageData.forEach(item=>{ |
|||
if(item.type == "echarts"){ |
|||
this.$refs.gridLayoutRef.resizedEvent(item) |
|||
} |
|||
}) |
|||
},100) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.closeViewBtn{ |
|||
position: absolute; |
|||
left: 30px; |
|||
bottom: 35px; |
|||
} |
|||
.closeViewBtn-close{ |
|||
position: absolute; |
|||
top: 30px; |
|||
right: 40px; |
|||
} |
|||
</style> |
|||
@ -1,140 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6" :xs="24"> |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span style="font-size: 18px">个人信息</span> |
|||
</div> |
|||
<!-- <div> |
|||
{{ $t("wms20.itemCode") }} |
|||
</div> --> |
|||
<div style="padding-bottom:70px"> |
|||
<!-- <div class="text-center"> |
|||
<img src="../../../static/image/common/f778738c-e4f8-4870-b634-56703b4acafe.gif" title="点击上传头像" class="img-circle img-lg" /> |
|||
</div> --> |
|||
<ul class="list-group list-group-striped"> |
|||
<li class="list-group-item"> |
|||
<div class="left"><i class="icon el-icon-user-solid"></i></div> |
|||
<!-- <div class="title-row"><svg-icon icon-class="user" /> 账号</div> --> |
|||
<div class="pull-right"> |
|||
<p class="title">用户名</p> |
|||
<p class="name">{{ user.userName }}</p> |
|||
</div> |
|||
</li> |
|||
<li class="list-group-item"> |
|||
<div class="left"><i class="icon el-icon-user-solid"></i></div> |
|||
<!-- <div class="title-row"><svg-icon icon-class="user" /> 账号</div> --> |
|||
<div class="pull-right"> |
|||
<p class="title">姓名</p> |
|||
<p class="name">{{ user.name }}</p> |
|||
</div> |
|||
</li> |
|||
<!-- <li class="list-group-item"> |
|||
<div class="left"><i class="icon el-icon-phone"></i></div> |
|||
<div class="pull-right"> |
|||
<p class="title">手机号码</p> |
|||
<p class="name">{{ user.phoneNumber }}</p> |
|||
</div> |
|||
</li> |
|||
<li class="list-group-item"> |
|||
<div class="left"><i class="icon el-icon-platform-eleme" style="font-size:20px"></i></div> |
|||
<div class="pull-right"> |
|||
<p class="title">用户邮箱</p> |
|||
<p class="name">{{ user.email }}</p> |
|||
</div> |
|||
</li> --> |
|||
<!-- <li class="list-group-item"> |
|||
<svg-icon icon-class="tree" /> 所属部门 |
|||
<div class="pull-right" v-if="user.dept"> / </div> |
|||
</li> |
|||
<li class="list-group-item"> |
|||
<svg-icon icon-class="peoples" /> 所属角色 |
|||
<div class="pull-right"></div> |
|||
</li> --> |
|||
</ul> |
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :span="18" :xs="24"> |
|||
<el-card> |
|||
<div slot="header" class="clearfix"> |
|||
<span style="font-size: 18px">基本资料</span> |
|||
</div> |
|||
<el-tabs v-model="activeTab"> |
|||
<!-- <el-tab-pane label="基本资料" name="userinfo"> |
|||
<userInfo :user="user" /> |
|||
</el-tab-pane> --> |
|||
<el-tab-pane label="修改密码" name="resetPwd"> |
|||
<resetPwd :user="user" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import userInfo from "./userInfo"; |
|||
import resetPwd from "./resetPwd"; |
|||
import { loadLoginUserInfo } from "@/api/wms-auth"; |
|||
|
|||
export default { |
|||
name: "Profileuser", |
|||
components: { userInfo, resetPwd }, |
|||
data() { |
|||
return { |
|||
user: {}, |
|||
roleGroup: {}, |
|||
postGroup: {}, |
|||
activeTab: "resetPwd", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getUser(); |
|||
}, |
|||
methods: { |
|||
getUser() { |
|||
loadLoginUserInfo(this.$store.getters.currentUserInfo.id).then((response) => { |
|||
this.user = response; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.list-group-striped{ |
|||
list-style: none; |
|||
padding-left: 10px; |
|||
li{ |
|||
display: flex; |
|||
padding-bottom: 15px; |
|||
background: #e9f6ff; |
|||
padding: 15px; |
|||
border-radius: 4px; |
|||
margin-bottom: 18px; |
|||
} |
|||
.icon{ |
|||
font-size: 22px; |
|||
padding-right: 5px; |
|||
vertical-align: top; |
|||
color: #49a4f7; |
|||
width: 24px; |
|||
flex-shrink: 0; |
|||
padding-top: 8px; |
|||
} |
|||
.pull-right{ |
|||
padding-left: 10px; |
|||
color: #999; |
|||
p{ |
|||
margin: 0; |
|||
} |
|||
|
|||
.title{ |
|||
padding-bottom: 5px; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,99 +0,0 @@ |
|||
<template> |
|||
<el-form ref="form" :model="user" :rules="rules" label-width="80px"> |
|||
<el-form-item label="旧密码" prop="oldPassword"> |
|||
<el-input |
|||
v-model="user.oldPassword" |
|||
placeholder="请输入旧密码" |
|||
type="password" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="新密码" prop="newPassword"> |
|||
<el-input |
|||
v-model="user.newPassword" |
|||
placeholder="请输入新密码" |
|||
type="password" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="确认密码" prop="confirmPassword"> |
|||
<el-input |
|||
v-model="user.confirmPassword" |
|||
placeholder="请确认密码" |
|||
type="password" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="mini" @click="submit">保存</el-button> |
|||
<el-button type="danger" size="mini" @click="close">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script> |
|||
import { postLoginUserInfo } from "@/api/wms-auth"; |
|||
|
|||
export default { |
|||
data() { |
|||
const equalToPassword = (rule, value, callback) => { |
|||
if (this.user.newPassword !== value) { |
|||
callback(new Error("两次输入的密码不一致")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
user: { |
|||
oldPassword: undefined, |
|||
newPassword: undefined, |
|||
confirmPassword: undefined, |
|||
}, |
|||
// 表单校验 |
|||
rules: { |
|||
oldPassword: [ |
|||
{ required: true, message: "旧密码不能为空", trigger: "blur" }, |
|||
], |
|||
newPassword: [ |
|||
{ required: true, message: "新密码不能为空", trigger: "blur" }, |
|||
{ |
|||
min: 6, |
|||
max: 20, |
|||
message: "长度在 6 到 20 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
confirmPassword: [ |
|||
{ required: true, message: "确认密码不能为空", trigger: "blur" }, |
|||
{ required: true, validator: equalToPassword, trigger: "blur" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
postLoginUserInfo({ |
|||
currentPassword: this.user.oldPassword, |
|||
newPassword: this.user.newPassword, |
|||
}, this.$store.getters.currentUserInfo.id) |
|||
.then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "修改成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
// |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$refs["form"].resetFields(); |
|||
//this.$store.dispatch("tagsView/delView", this.$route); |
|||
//this.$router.push({ path: "/index" }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,80 +0,0 @@ |
|||
<template> |
|||
<el-form ref="form" :model="user" :rules="rules" label-width="80px"> |
|||
<el-form-item label="用户姓名" prop="name"> |
|||
<el-input v-model="user.name" /> |
|||
</el-form-item> |
|||
<el-form-item label="手机号码" prop="phoneNumber"> |
|||
<el-input v-model="user.phoneNumber" maxlength="11" /> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="user.email" maxlength="50" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="mini" @click="submit">保存</el-button> |
|||
<el-button type="danger" size="mini" @click="close">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script> |
|||
import { putLoginUserInfo } from "@/api/wms-auth"; |
|||
|
|||
export default { |
|||
props: { |
|||
user: { |
|||
type: Object, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 表单校验 |
|||
rules: { |
|||
nickName: [ |
|||
{ required: true, message: "用户昵称不能为空", trigger: "blur" }, |
|||
], |
|||
email: [ |
|||
{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, |
|||
{ |
|||
type: "email", |
|||
message: "'请输入正确的邮箱地址", |
|||
trigger: ["blur", "change"], |
|||
}, |
|||
], |
|||
phonenumber: [ |
|||
{ required: true, message: "手机号码不能为空", trigger: "blur" }, |
|||
{ |
|||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
|||
message: "请输入正确的手机号码", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.$refs["form"].validate((valid) => { |
|||
if (valid) { |
|||
putLoginUserInfo(this.user) |
|||
.then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "修改成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
// |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$refs["form"].resetFields(); |
|||
//this.$store.dispatch("tagsView/delView", this.$route); |
|||
//this.$router.push({ path: "/dashboard" }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,262 +0,0 @@ |
|||
<template> |
|||
<div class="appMainPage" v-loading="loading"> |
|||
<div class="main"> |
|||
<tableTree |
|||
style="height:calc(100% - 100px)" |
|||
:treeData="tableData" |
|||
:treeColumn="treeColumn" |
|||
:needFormatData="true" |
|||
@freshTreeData="pageList" |
|||
:treeEditData="formData" |
|||
:treeEditRules="rules" |
|||
:treeEditForm="formList" |
|||
:treeEditSubmit="submitForm" |
|||
:treeEditBefore="editBefore" |
|||
@treeEditDelete="Delete" |
|||
@freshTreeEditForm="freshFormList" |
|||
:treeButtons="treeButtons" |
|||
></tableTree> |
|||
<!-- 示例 --> |
|||
<!-- |
|||
:treeButtons="treeButtons" |
|||
:queryLeftButtons="queryLeftButtons" |
|||
:queryHeaderBtn="queryHeaderBtn" |
|||
:queryButtonsHandle="queryButtonsHandle" |
|||
--> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { postCreateMenu, postUpdateMenu, postDeleteMenu, menuPermissions, getDetailedMenu } from "@/api/wms-auth"; |
|||
import tableTree from "@/components/tableTree" |
|||
import { treeDefalutButton,queryDefalutButtons } from "@/utils/tableTree" |
|||
export default { |
|||
components: { |
|||
tableTree |
|||
}, |
|||
name:"pcMenu", |
|||
data() { |
|||
return { |
|||
// table按钮 |
|||
treeButtons:[ |
|||
...treeDefalutButton(function(row){ |
|||
return !(String(row.sort).length < 5) |
|||
}) |
|||
], |
|||
// 示例 |
|||
// queryHeaderBtn:['addFirst','fresh','search','reset','test'], |
|||
// queryLeftButtons:[ |
|||
// ...queryDefalutButtons("left"), |
|||
// { |
|||
// type: 'warning', |
|||
// icon: 'el-icon-edit', |
|||
// label: '测试-left', |
|||
// name: "test", |
|||
// permission:"['Auth.Menu.Update']", |
|||
// size: 'mini' |
|||
// }, |
|||
// ], |
|||
loading:false, |
|||
// 新增/编辑数据 |
|||
formData:{ |
|||
name:"",//菜单名称 |
|||
icon:"",//图标名称 |
|||
code:"",//编码 |
|||
parentCode:"",//父级编码 |
|||
component:"",//项目地址 |
|||
permission:"",//权限 |
|||
route: "",//路由 |
|||
sort:null,//排序 |
|||
status:1,//状态 |
|||
description: "",//描述 |
|||
portal:0,//0:pc 1:pda |
|||
company: localStorage.getItem('company'), |
|||
}, |
|||
// 新增/编辑显示 |
|||
formList:[ |
|||
{ type: "input", label: "菜单名称", prop: "name",placeholder:"例：按序收货"}, |
|||
{ type: "input", label: "图标名称", prop: "icon",placeholder:"例：按序收货"}, |
|||
{ type: "input", label: "编码", prop: "code",placeholder:"例：sortReceipt"}, |
|||
{ type: "input", label: "父级编码", prop: "parentCode",placeholder:"例：sortReceipt"}, |
|||
{ type: "input", label: "项目地址", prop: "component",placeholder:"例：basicData/ItemsManage/ItemBasic"}, |
|||
{ type: "input", label: "权限", prop: "permission",placeholder:"例：base.info"}, |
|||
{ type: "input", label: "路由", prop: "route",placeholder:"例：sortReceipt"}, |
|||
{ type: "input", type:"number",valueType:Number,label: "排序", prop: "sort",}, |
|||
{ type: "select", label: "状态", prop: "status", options: "enableOrStop"}, |
|||
{ type: "input", label: "描述", prop: "description",}, |
|||
], |
|||
//table渲染 |
|||
tableData: [], |
|||
// tree配置 |
|||
treeColumn:[ |
|||
{ label: "菜单名称", prop: "name",width:"250"}, |
|||
{ label: "图标名称", prop: "icon",}, |
|||
{ label: "编码", prop: "code",}, |
|||
{ label: "父级编码", prop: "parentCode",}, |
|||
{ label: "项目地址", prop: "component",}, |
|||
{ label: "权限", prop: "permission",}, |
|||
{ label: "路由", prop: "route",}, |
|||
{ label: "排序", prop: "sort"}, |
|||
{ type: "filter", label: "状态", prop: "status", filters: {"1":"启用","0":"停用"},align:'center',headerAlign:"center" }, |
|||
{ label: "描述", prop: "description"}, |
|||
], |
|||
rules: { |
|||
name: [ { required: true, trigger: "blur", message: "请输入菜单名称" }, ], |
|||
icon: [ { required: true, trigger: "blur", message: "请输入图标名称" }, ], |
|||
code: [ { required: true, trigger: "blur", message: "请输入编码" }, ], |
|||
permission: [ { required: true, trigger: "blur", message: "请输入权限" }, ], |
|||
route: [ { required: true, trigger: "blur", message: "请输入路由" }, ], |
|||
sort: [ { required: true, trigger: "change", message: "请输入排序" }, ], |
|||
status: [ { required: true, trigger: "change", message: "请选择状态" }, ], |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.pageList(); |
|||
}, |
|||
methods: { |
|||
// 示例 |
|||
// treeButtonsHandle(item,searchValue){ |
|||
// return true //return true 可以继续进行组件内的其他操作 |
|||
// return false //return false 原组件内按钮操作不在进行，可自定义操作 |
|||
// }, |
|||
// queryButtonsHandle(item,searchValue){ |
|||
// return true //return true 可以继续进行组件内的其他操作 |
|||
// // return false //return false 原组件内按钮操作不在进行，可自定义操作 |
|||
// }, |
|||
//请求数据渲染table |
|||
pageList() { |
|||
this.tableData=[]; |
|||
this.loading = true |
|||
let filters = [] |
|||
filters.push({ |
|||
logic: "And", |
|||
column: "portal", |
|||
action: "==", |
|||
value: "0" |
|||
}) |
|||
const data = { |
|||
condition: { |
|||
filters: filters |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000, |
|||
}; |
|||
menuPermissions(data).then((res) => { |
|||
this.tableData = res.items |
|||
this.loading = false |
|||
}).catch(()=>{ |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
// 控制编辑菜单disabled处理 |
|||
freshFormList(item,row){ |
|||
// 创建第一级/创建子菜单，父级不让填写 |
|||
if(item.name == "addFirst" || item.name == "add"){ |
|||
if(item.name == "add"){ |
|||
this.formData.parentCode = row.code |
|||
} |
|||
this.formList.forEach(column=>{ |
|||
if(column.prop == 'parentCode'){ |
|||
column.disabled = true |
|||
} |
|||
}) |
|||
} |
|||
// 编辑菜单，如果不是第一级，父级打开填写 |
|||
else if(item.name == "edit"){ |
|||
if(Number(row.sort) > 100){ |
|||
this.formList.forEach(column=>{ |
|||
column.disabled = false |
|||
}) |
|||
}else{ |
|||
this.formList.forEach(column=>{ |
|||
if(column.prop == 'parentCode'){ |
|||
column.disabled = true |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
//编辑默认参数 |
|||
editBefore(row) { |
|||
if (row) { |
|||
return new Promise((resolve,reject) => { |
|||
getDetailedMenu(row.id).then(res=>{ |
|||
// let _res = JSON.parse(JSON.stringify(res)); |
|||
// Object.keys(this.formData).forEach(key=>{ |
|||
// // if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key] |
|||
// if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key] |
|||
// }) |
|||
resolve(res) |
|||
}).catch(()=>{ |
|||
resolve() |
|||
}) |
|||
}) |
|||
} |
|||
}, |
|||
//删除 |
|||
Delete(row) { |
|||
if(row.children && row.children.length > 0){ |
|||
this.$alert("此菜单存在子菜单，请先删除子菜单信息。", "提示", { |
|||
type: "warning", |
|||
}); |
|||
return |
|||
} |
|||
this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.loading = true |
|||
postDeleteMenu(row.id).then((res) => { |
|||
this.loading = false |
|||
this.$successMsg("删除成功！"); |
|||
this.pageList(); |
|||
}).catch((res) => { |
|||
this.loading = false |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
//新建与编辑交互 |
|||
submitForm(isEdit,data,val) { |
|||
data.portal = 0 |
|||
return new Promise((resolve,reject) => { |
|||
if(!isEdit){ |
|||
// 新增 |
|||
postCreateMenu(data) |
|||
.then((res) => { |
|||
this.$successMsg("创建成功！"); |
|||
this.pageList(); |
|||
resolve() |
|||
}) |
|||
.catch((err) => { |
|||
resolve() |
|||
}); |
|||
}else{ |
|||
//编辑 |
|||
postUpdateMenu(data, data.id) |
|||
.then((res) => { |
|||
this.$successMsg("编辑成功！"); |
|||
this.pageList(); |
|||
resolve() |
|||
}) |
|||
.catch((err) => { |
|||
resolve() |
|||
}); |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.appMainPage { |
|||
.main { |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,655 +0,0 @@ |
|||
<template> |
|||
<div class="currentable" v-loading="savePerLoading"> |
|||
<div class="header" /> |
|||
<el-row :gutter="24"> |
|||
<el-col :md="16" style="margin-bottom: 10px"> |
|||
<div class="main"> |
|||
<div class="table-active"> |
|||
<!-- <div class="bttton-box"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
@click="handleCreate" |
|||
v-permission="['AbpIdentity.Roles.Create']" |
|||
>创建角色</el-button |
|||
> |
|||
<el-button |
|||
type="success" |
|||
icon="el-icon-refresh" |
|||
@click.native.prevent="Createview" |
|||
>刷新</el-button |
|||
> |
|||
</div--> |
|||
<div class="query-box"> |
|||
<el-input |
|||
v-model="input" |
|||
placeholder="搜索..." |
|||
@keyup.enter.native="filtrate" |
|||
/> |
|||
<el-button type="primary" @click.native.prevent="filtrate" >搜索</el-button> |
|||
<el-button type="danger" @click.native.prevent="reset" >重置</el-button> |
|||
</div> |
|||
</div> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
height="calc(100vh - 325px)" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowClick" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column |
|||
prop="userName" |
|||
label="用户名" |
|||
width="180" |
|||
align="center" |
|||
sortable="custom" |
|||
/> |
|||
<el-table-column |
|||
prop="email" |
|||
label="邮箱" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="phoneNumber" |
|||
label="电话号码" |
|||
sortable="custom" |
|||
align="center" |
|||
width="180" |
|||
> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="address" label="创建时间" /> |
|||
<el-table-column prop="address" label="编辑" /> --> |
|||
</el-table> |
|||
</div> |
|||
<div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> |
|||
</el-col> |
|||
<el-col :md="8" v-permission="['AbpIdentity.Roles.Update']"> |
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix" style="height: 20px"> |
|||
<el-tooltip |
|||
class="item" |
|||
effect="dark" |
|||
content="选择指定用户的模块权限" |
|||
placement="top" |
|||
> |
|||
<span class="role-span">{{name}} 模块权限</span> |
|||
</el-tooltip> |
|||
<el-button |
|||
:loading="savePerLoading" |
|||
:disabled="multipleSelection.length != 1" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
type="primary" |
|||
@click="savePer" |
|||
>保存 |
|||
</el-button> |
|||
</div> |
|||
<el-tree |
|||
ref="tree" |
|||
v-loading="treeLoading" |
|||
:default-checked-keys="checkedPermission" |
|||
:data="permissionsData" |
|||
:props="defaultProps" |
|||
show-checkbox |
|||
node-key="id" |
|||
class="permission-tree" |
|||
:default-expanded-keys="expandedKeys" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
postCreate, |
|||
postUpdate, |
|||
postDelete, |
|||
getPageList, |
|||
menuPermissions, |
|||
UserPermissions, |
|||
SetUserPermissions, |
|||
} from "@/api/wms-auth"; |
|||
import permission from "@/utils/permission/index"; |
|||
export default { |
|||
name: 'pcUserManage', |
|||
directives: { permission }, |
|||
data() { |
|||
// 自定义验证 |
|||
return { |
|||
URL: 'auth/user-menu/web',//todo-new:使用的时候整合到urlOption.js文件 |
|||
// name |
|||
name:'', |
|||
// 默认展开数据id |
|||
expandedKeys:[], |
|||
//编辑弹出 |
|||
dialogVisible: false, |
|||
//创建与编辑判断 |
|||
isEdit: false, |
|||
//弹出title |
|||
formTitle: "", |
|||
//查询条件 |
|||
input: "", |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
// Thecurrent: '', |
|||
//选择添加分组 |
|||
//筛选栏分组 |
|||
// value1: '', |
|||
//报表组 |
|||
// roleList: [], |
|||
//当前用户ID |
|||
usersId: "", |
|||
//编辑参数 |
|||
concurrencyStamp: "", |
|||
//新增参数 |
|||
form: { |
|||
name: "", |
|||
isDefault: true, |
|||
isPublic: true, |
|||
extraProperties: { |
|||
Describe: "", |
|||
}, |
|||
}, |
|||
//权限模板保存按钮加载 |
|||
savePerLoading: false, |
|||
//权限模板树形控件加载 |
|||
treeLoading: false, |
|||
//权限模板树形控件默认勾选的数组 |
|||
checkedPermission: [], |
|||
//权限模板树形结构渲染数据 |
|||
permissionsData: [], |
|||
//用户ID |
|||
userId:"", |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
//渲染权限模板参数 |
|||
params: { |
|||
providerName: "R", |
|||
providerKey: "", |
|||
}, |
|||
//选择行数据 |
|||
multipleSelection: [], |
|||
//table渲染 |
|||
tableData: [], |
|||
rules: { |
|||
name: [ |
|||
{ required: true, trigger: "blur", message: "请输入姓名" }, |
|||
{ |
|||
min: 1, |
|||
max: 23, |
|||
message: "长度在 1 到 23 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
// watch:{ |
|||
// value1:function(newVal,oldVal){ |
|||
// this.pageList() |
|||
// } |
|||
// }, |
|||
created() { |
|||
// usersroles().then(res => { |
|||
// |
|||
// this.roleList = res.data.items |
|||
// }) |
|||
}, |
|||
mounted() { |
|||
this.pageList(); |
|||
}, |
|||
methods: { |
|||
//sort 按照排序字段(现在为数字) 默认sort |
|||
sortData(sort){ |
|||
return function(a,b){ |
|||
const val1 = a[sort]; |
|||
const val2 = b[sort]; |
|||
return val1 - val2; |
|||
} |
|||
}, |
|||
// 树状图格式化数据 |
|||
initTreeData(list,code = ""){ |
|||
const children = [] |
|||
// 对于list,每个元素.如果他的parentCode==code,他就是当前的children |
|||
list.forEach(item => { |
|||
if (item['parentCode'] == code) { |
|||
// children.push(item) |
|||
children.push( |
|||
{ |
|||
id: item.id, |
|||
displayName: item.permission, |
|||
name: item.name, |
|||
parentCode: item.parentCode, |
|||
code: item.code, |
|||
sort: item.sort, |
|||
company: item.company, |
|||
children: [] |
|||
} |
|||
) |
|||
//排序 |
|||
children.find(findItem => findItem.id == item.id).children=this.initTreeData(list,item['code']).sort(this.sortData('sort')) |
|||
this.rolesAll.forEach(itemRes => { |
|||
if (item.code == itemRes.menuCode) { |
|||
this.checkedPermission.push(item.id); |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
return children |
|||
}, |
|||
//请求数据渲染table |
|||
pageList() { |
|||
const data = { |
|||
Filter: this.input, |
|||
Sorting: this.queryInfo.Sorting, |
|||
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
|||
MaxResultCount: this.queryInfo.pagesize, |
|||
}; |
|||
getPageList(data).then((res) => { |
|||
const data = res; |
|||
this.total = data.totalCount; |
|||
this.tableData = data.items; |
|||
}); |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
// alert(this.listQuery.Sorting) |
|||
this.handleFilter(); |
|||
}, |
|||
//排序触发页面更新 |
|||
handleFilter() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}, |
|||
//筛选 |
|||
filtrate() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}, |
|||
//重置 |
|||
reset() { |
|||
this.input = ""; |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.permissionsData = [] |
|||
this.treeLoading = false |
|||
this.pageList(); |
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.pageList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.pageList(); |
|||
}, |
|||
//重置创建与编辑后的参数 |
|||
resetform() { |
|||
this.$refs.form.resetFields(); |
|||
this.dialogVisible = false; |
|||
this.form.name = ""; |
|||
this.form.extraProperties.Describe = ""; |
|||
this.$refs.multipleTable.clearSelection(); |
|||
}, |
|||
//创建角色 |
|||
handleCreate() { |
|||
this.formTitle = "创建角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = false; |
|||
}, |
|||
//刷新 |
|||
Createview() { |
|||
this.input = ""; |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.pageList(); |
|||
this.$refs.multipleTable.clearSort(); |
|||
}, |
|||
//编辑默认参数 |
|||
Update(row) { |
|||
if (row) { |
|||
this.formTitle = "编辑角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = true; |
|||
this.usersId = row.id; |
|||
this.form.name = row.name; |
|||
this.concurrencyStamp = row.concurrencyStamp; |
|||
this.form.extraProperties.Describe = row.extraProperties.Describe; |
|||
} |
|||
}, |
|||
//删除 |
|||
Delete(row) { |
|||
this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
if (this.tableData.length == 1) { |
|||
this.queryInfo.currentPage = this.queryInfo.currentPage - 1; |
|||
} |
|||
postDelete(row.id).then((res) => { |
|||
this.$successMsg("删除成功！"); |
|||
this.pageList(); |
|||
}) |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
//创建与编辑 |
|||
submitForm() { |
|||
this.$refs.form.validate((valid) => { |
|||
//创建报表组 |
|||
if (valid && !this.isEdit) { |
|||
postCreate(this.form) |
|||
.then((res) => { |
|||
this.resetform(); |
|||
this.$successMsg("创建成功！"); |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}) |
|||
.catch((err) => { |
|||
this.resetform(); |
|||
}); |
|||
} else if (valid && this.isEdit) { |
|||
//编辑报表 |
|||
const data = JSON.parse(JSON.stringify(this.form)); |
|||
data.concurrencyStamp = this.concurrencyStamp; |
|||
postUpdate(data, this.usersId) |
|||
.then((res) => { |
|||
this.$successMsg("编辑成功！"); |
|||
this.pageList(); |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}) |
|||
.catch((err) => { |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}); |
|||
} else { |
|||
this.$errorMsg("请按照提示继续输入！"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
//模板权限保存 |
|||
async savePer() { |
|||
this.savePerLoading = true; |
|||
let data = await this.PromiseData() |
|||
SetUserPermissions(data,{userId:this.userId}, this.URL + '/by-user') |
|||
.then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "更新成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
this.savePerLoading = false; |
|||
}) |
|||
.catch(err => { |
|||
this.savePerLoading = false; |
|||
}) |
|||
}, |
|||
//等待提交数据 |
|||
PromiseData(){ |
|||
return new Promise((resolve)=>{ |
|||
let params = []; |
|||
let checkedKeys = this.$refs.tree.getCheckedKeys(); |
|||
// console.log("选择",checkedKeys); |
|||
console.log(this.permissionsData); |
|||
this.permissionsData.forEach((element) => { |
|||
element.children.forEach((item) => { |
|||
item.children.forEach(itemChildren => { |
|||
// console.log("条件",itemChildren.code); |
|||
if(checkedKeys.indexOf(itemChildren.id) != -1){ |
|||
console.log("itemChildren.company",itemChildren.company); |
|||
let perm = {}; |
|||
perm.userId = this.userId |
|||
perm.menuCode = itemChildren.code |
|||
perm.company = itemChildren.company |
|||
perm.portal = '0' |
|||
params.push(perm) |
|||
} |
|||
}) |
|||
}); |
|||
}); |
|||
resolve(params) |
|||
}) |
|||
}, |
|||
//点击table行渲染权限模板 |
|||
handleRowClick(row, column, event) { |
|||
let that = this |
|||
this.name = row.userName |
|||
this.$refs.multipleTable.clearSelection(); |
|||
this.$refs.multipleTable.toggleRowSelection(row); |
|||
this.treeLoading = true; |
|||
UserPermissions({ userId: row.id }, this.URL + '/by-user') |
|||
.then((response) => { |
|||
this.rolesAll = [] |
|||
this.permissionsData = [] |
|||
this.checkedPermission = [] |
|||
this.userId = row.id |
|||
this.rolesAll = response |
|||
console.log(response) |
|||
console.log(this.rolesAll) |
|||
let filters = [] |
|||
filters.push({ |
|||
logic: "And", |
|||
column: "portal", |
|||
action: "==", |
|||
value: "0" |
|||
}) |
|||
const data = { |
|||
condition: { |
|||
filters: filters |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000, |
|||
}; |
|||
menuPermissions(data).then((res) => { |
|||
let rs = that.initTreeData(res.items,'').sort(that.sortData('sort')) |
|||
rs.forEach(item => { |
|||
that.permissionsData.push(item); |
|||
}) |
|||
that.$nextTick(() => { |
|||
that.$refs.tree.setCheckedKeys(that.checkedPermission) |
|||
}) |
|||
// console.log('菜单树',that.permissionsData) |
|||
// console.log('拥有权限',that.checkedPermission) |
|||
// console.log('所有权限',that.rolesAll) |
|||
that.treeLoading = false; |
|||
}).catch((err)=>{ |
|||
that.treeLoading = false; |
|||
console.log(err) |
|||
}) |
|||
}) |
|||
.catch(err => { |
|||
that.treeLoading = false; |
|||
}) |
|||
}, |
|||
setTree(data, userData) { |
|||
let root = {}; |
|||
root.id = "1"; |
|||
root.name = "PDA权限菜单"; |
|||
root.children = []; |
|||
let childrenId = 10 |
|||
this.expandedKeys.push(root.id) |
|||
data.forEach((element) => { |
|||
// 根据 groupName 进行分组 |
|||
let isGroup = true |
|||
root.children.forEach(item => { |
|||
if (item.name == element.groupName) { |
|||
isGroup = false |
|||
let childrenChildren = {} |
|||
childrenChildren.id = element.code; |
|||
childrenChildren.name = element.name |
|||
childrenChildren.company = element.company |
|||
childrenChildren.menuCode = element.code; |
|||
this.expandedKeys.push(element.code) |
|||
item.children.push(childrenChildren) |
|||
} |
|||
}) |
|||
if (isGroup) { |
|||
let children = {}; |
|||
children.name = element.groupName |
|||
children.id = childrenId |
|||
childrenId += 1 |
|||
children.children = []; |
|||
let childrenChildren = {} |
|||
childrenChildren.id = element.code; |
|||
childrenChildren.name = element.name |
|||
childrenChildren.company = element.company |
|||
childrenChildren.menuCode = element.code; |
|||
children.children.push(childrenChildren) |
|||
root.children.push(children); |
|||
// console.log("已有权限",userData); |
|||
// console.log("目前ID",element.id); |
|||
} |
|||
|
|||
// let children = {}; |
|||
// children.id = element.code; |
|||
// children.name = element.name |
|||
// children.company = element.company |
|||
// children.menuCode = element.code; |
|||
// children.children = []; |
|||
// root.children.push(children); |
|||
// console.log("已有权限",userData); |
|||
// console.log("目前ID",element.id); |
|||
|
|||
if (userData.indexOf(element.code) != -1) { |
|||
// console.log('已有权限NAME',element.name); |
|||
this.checkedPermission.push(element.code); |
|||
} |
|||
}); |
|||
this.permissionsData.push(root); |
|||
// console.log("第一个数据",data[0]); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.currentable { |
|||
.header { |
|||
background-color: #fff; |
|||
height: 40px; |
|||
} |
|||
|
|||
.main { |
|||
padding: 0 40px; |
|||
background-color: #f2f2f2; |
|||
|
|||
.table-active { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-bottom: 20px; |
|||
|
|||
.bttton-box { |
|||
padding-top: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.query-box { |
|||
padding-top: 20px; |
|||
display: flex; |
|||
|
|||
.el-input { |
|||
margin: 0 5px; |
|||
} |
|||
.el-select { |
|||
::v-deep .el-input { |
|||
width: 100px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
tbody { |
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Footer { |
|||
padding: 40px 40px; |
|||
background-color: #f2f2f2; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
::v-deep .number { |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-dialog { |
|||
.el-dialog__header { |
|||
button { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.permission-tree{ |
|||
padding: 20px; |
|||
height: 690px; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,705 +0,0 @@ |
|||
<template> |
|||
<div class="appMainPage"> |
|||
<el-row :gutter="24"> |
|||
<el-col :md="16" style="margin-bottom: 10px"> |
|||
<div class="main"> |
|||
<div class="table-active"> |
|||
<div class="bttton-box"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
@click="handleCreate" |
|||
size="mini" |
|||
v-permission="['AbpIdentity.Roles.Create']" |
|||
>创建角色</el-button |
|||
> |
|||
<el-button |
|||
type="success" |
|||
icon="el-icon-refresh" |
|||
@click.native.prevent="Createview" |
|||
size="mini" |
|||
>刷新</el-button |
|||
> |
|||
</div> |
|||
<div class="query-box"> |
|||
<!-- 搜索 --> |
|||
<searchNormal |
|||
ref="normalSearch_roleManage" |
|||
@searchNormalClick="filtrate" |
|||
@searchNormalClear="filtrate" |
|||
></searchNormal> |
|||
</div> |
|||
</div> |
|||
<el-table |
|||
border="" |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
height="calc(100vh - 265px)" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowClick" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column |
|||
prop="name" |
|||
label="角色名" |
|||
sortable="custom" |
|||
width="180" |
|||
align="left" |
|||
/> |
|||
<el-table-column |
|||
prop="extraProperties.Description" |
|||
label="角色描述" |
|||
align="left" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column label="操作" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="text" |
|||
@click="Update(scope.row)" |
|||
v-permission="['AbpIdentity.Roles.Update']" |
|||
v-if="scope.row.name == 'admin' ? false : true" |
|||
>编辑</el-button |
|||
> |
|||
<el-button |
|||
type="text" |
|||
@click="Delete(scope.row)" |
|||
v-permission="['AbpIdentity.Roles.Delete']" |
|||
v-if="scope.row.name == 'admin' ? false : true" |
|||
style="color:red" |
|||
>删除</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="address" label="创建时间" /> |
|||
<el-table-column prop="address" label="编辑" /> --> |
|||
</el-table> |
|||
</div> |
|||
<div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> |
|||
</el-col> |
|||
<el-col :md="8" v-permission="['AbpIdentity.Roles.Update']"> |
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix" style="height: 20px"> |
|||
<el-tooltip |
|||
class="item" |
|||
effect="dark" |
|||
content="选择指定角色的模块权限" |
|||
placement="top" |
|||
> |
|||
<span class="role-span">【{{name}}角色】模块权限</span> |
|||
</el-tooltip> |
|||
<el-button |
|||
:loading="savePerLoading" |
|||
:disabled="multipleSelection.length != 1" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
type="primary" |
|||
@click="savePer" |
|||
>保存 |
|||
</el-button> |
|||
</div> |
|||
<el-tree |
|||
ref="tree" |
|||
v-loading="treeLoading" |
|||
:check-strictly="false" |
|||
:data="permissionsData" |
|||
:props="defaultProps" |
|||
show-checkbox |
|||
node-key="id" |
|||
class="permission-tree" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
:visible.sync="dialogVisible" |
|||
width="600px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-form |
|||
ref="form" |
|||
:model="form" |
|||
label-width="70px" |
|||
:rules="rules" |
|||
size="small" |
|||
:inline="true" |
|||
> |
|||
<el-form-item label="名称" prop="name"> |
|||
<el-input v-model="form.name" style="width: 380px" maxlength="23" /> |
|||
</el-form-item> |
|||
<el-form-item label="描述"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="2" |
|||
placeholder="请输入描述信息" |
|||
style="width: 380px" |
|||
v-model="form.extraProperties.Description" |
|||
> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="resetform">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
postCreateRoles, |
|||
postUpdateRoles, |
|||
postDeleteRoles, |
|||
getPageListRoles, |
|||
getpermissionsRoles, |
|||
putpermissionsRoles, |
|||
menuPermissions, |
|||
saveOrUpdateDescribe |
|||
} from "@/api/wms-auth"; |
|||
import permission from "@/utils/permission/index"; |
|||
import searchNormal from "@/components/searchNormal/index.vue" |
|||
export default { |
|||
directives: { permission }, |
|||
components:{ |
|||
searchNormal |
|||
}, |
|||
name:"RoleManage", |
|||
data() { |
|||
// 自定义验证 |
|||
return { |
|||
URL: 'identity/roles',//todo-new:使用的时候整合到urlOption.js文件 |
|||
// 角色名称 |
|||
name: '', |
|||
//所有权限 |
|||
rolesAll: [], |
|||
//编辑弹出 |
|||
dialogVisible: false, |
|||
//创建与编辑判断 |
|||
isEdit: false, |
|||
//弹出title |
|||
formTitle: "", |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
// Thecurrent: '', |
|||
//选择添加分组 |
|||
//筛选栏分组 |
|||
// value1: '', |
|||
//报表组 |
|||
// roleList: [], |
|||
//当前用户ID |
|||
usersId: "", |
|||
//编辑参数 |
|||
concurrencyStamp: "", |
|||
//新增参数 |
|||
form: { |
|||
name: "", |
|||
isDefault: true, |
|||
isPublic: true, |
|||
extraProperties: { |
|||
Description: "", |
|||
}, |
|||
}, |
|||
//权限模板保存按钮加载 |
|||
savePerLoading: false, |
|||
//权限模板树形控件加载 |
|||
treeLoading: false, |
|||
//权限模板树形控件默认勾选的数组 |
|||
checkedPermission: [], |
|||
//权限模板树形结构渲染数据 |
|||
permissionsData: [], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
//渲染权限模板参数 |
|||
params: { |
|||
providerName: "R", |
|||
providerKey: "", |
|||
}, |
|||
//选择行数据 |
|||
multipleSelection: [], |
|||
//table渲染 |
|||
tableData: [], |
|||
rules: { |
|||
name: [ |
|||
{ required: true, trigger: "blur", message: "请输入姓名" }, |
|||
{ |
|||
min: 1, |
|||
max: 23, |
|||
message: "长度在 1 到 23 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.pageList(); |
|||
}, |
|||
methods: { |
|||
//sort 按照排序字段(现在为数字) 默认sort |
|||
sortData(sort){ |
|||
return function(a,b){ |
|||
const val1 = a[sort]; |
|||
const val2 = b[sort]; |
|||
return val1 - val2; |
|||
} |
|||
}, |
|||
// 树状图格式化数据 |
|||
initTreeData(list,code = ""){ |
|||
const children = [] |
|||
// 对于list,每个元素.如果他的parentCode==code,他就是当前的children |
|||
list.forEach(item => { |
|||
if (item['parentCode'] == code) { |
|||
// children.push(item) |
|||
children.push( |
|||
{ |
|||
id: item.id, |
|||
displayName: item.permission, |
|||
name: item.name, |
|||
parentCode: item.parentCode, |
|||
code: item.code, |
|||
sort: item.sort, |
|||
children: [] |
|||
} |
|||
) |
|||
//排序 |
|||
children.find(findItem => findItem.id == item.id).children=this.initTreeData(list,item['code']).sort(this.sortData('sort')) |
|||
this.rolesAll.forEach(itemRes => { |
|||
if (item.permission == itemRes.name) { |
|||
if (itemRes.isGranted) { |
|||
this.checkedPermission.push(item.id); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
return children |
|||
}, |
|||
//请求数据渲染table |
|||
pageList(val) { |
|||
const data = { |
|||
Filter: val || '', |
|||
Sorting: this.queryInfo.Sorting, |
|||
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
|||
MaxResultCount: this.queryInfo.pagesize, |
|||
}; |
|||
getPageListRoles(data).then((res) => { |
|||
const data = res; |
|||
this.total = data.totalCount; |
|||
this.tableData = data.items; |
|||
}); |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
// alert(this.listQuery.Sorting) |
|||
this.handleFilter(); |
|||
}, |
|||
//排序触发页面更新 |
|||
handleFilter() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}, |
|||
//筛选 |
|||
filtrate(val) { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(val); |
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.pageList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.pageList(); |
|||
}, |
|||
//重置创建与编辑后的参数 |
|||
resetform() { |
|||
this.$refs.form.resetFields(); |
|||
this.dialogVisible = false; |
|||
this.form.name = ""; |
|||
this.form.extraProperties.Description = ""; |
|||
this.$refs.multipleTable.clearSelection(); |
|||
}, |
|||
//创建角色 |
|||
handleCreate() { |
|||
this.formTitle = "创建角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = false; |
|||
}, |
|||
//刷新 |
|||
Createview() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.$refs.normalSearch_roleManage.searchNormalClear()//清空搜索 |
|||
this.$refs.multipleTable.clearSort(); |
|||
}, |
|||
//编辑默认参数 |
|||
Update(row) { |
|||
if (row) { |
|||
this.formTitle = "编辑角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = true; |
|||
this.usersId = row.id; |
|||
this.form.name = row.name; |
|||
this.concurrencyStamp = row.concurrencyStamp; |
|||
this.form.extraProperties.Description = row.extraProperties.Description; |
|||
} |
|||
}, |
|||
//删除 |
|||
Delete(row) { |
|||
this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
if (this.tableData.length == 1) { |
|||
this.queryInfo.currentPage = this.queryInfo.currentPage - 1; |
|||
} |
|||
postDeleteRoles(row.id).then((res) => { |
|||
this.$successMsg("删除成功！"); |
|||
this.pageList(); |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
//创建与编辑 |
|||
submitForm() { |
|||
this.$refs.form.validate((valid) => { |
|||
//创建报表组 |
|||
if (valid && !this.isEdit) { |
|||
postCreateRoles(this.form) |
|||
.then((res) => { |
|||
this.saveOrUpdateDescribe(res.id) |
|||
this.resetform(); |
|||
this.$successMsg("创建成功！"); |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}) |
|||
.catch((err) => { |
|||
this.resetform(); |
|||
}); |
|||
} else if (valid && this.isEdit) { |
|||
//编辑报表 |
|||
const data = JSON.parse(JSON.stringify(this.form)); |
|||
data.concurrencyStamp = this.concurrencyStamp; |
|||
postUpdateRoles(data, this.usersId) |
|||
.then((res) => { |
|||
this.$successMsg("编辑成功！"); |
|||
this.saveOrUpdateDescribe(this.usersId) |
|||
this.pageList(); |
|||
this.resetform(); |
|||
}) |
|||
.catch((err) => { |
|||
this.resetform(); |
|||
}); |
|||
} else { |
|||
this.$errorMsg("请按照提示继续输入！"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 描述特殊储存处理 |
|||
saveOrUpdateDescribe (id) { |
|||
saveOrUpdateDescribe({description:this.form.extraProperties.Description}, id).then(res => { |
|||
// console.log(res) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
//模板权限保存 |
|||
savePer() { |
|||
this.savePerLoading = true; |
|||
let params = {}; |
|||
let checkedKeys = this.$refs.tree.getCheckedKeys(); |
|||
params.permissions = []; |
|||
this.permissionsData.forEach((element) => { |
|||
element.children.forEach((item) => { |
|||
let perm = {}; |
|||
perm.name = item.displayName; |
|||
perm.isGranted = false; |
|||
if (checkedKeys.indexOf(item.id) > -1) { |
|||
perm.isGranted = true; |
|||
} |
|||
// 赋值节点下的增删改权限 |
|||
this.getZSG(item.displayName, params, perm.isGranted) |
|||
params.permissions.push(perm); |
|||
item.children.forEach((i) => { |
|||
let perm = {}; |
|||
perm.name = i.displayName; |
|||
perm.isGranted = false; |
|||
if (checkedKeys.indexOf(i.id) > -1) { |
|||
perm.isGranted = true; |
|||
} |
|||
// 赋值节点下的增删改权限 |
|||
this.getZSG(i.displayName, params, perm.isGranted) |
|||
params.permissions.push(perm); |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
params.permissions.forEach((item,index) => { |
|||
// 排除二级菜单 |
|||
if (item.name == 'skip') { |
|||
params.permissions.splice(index, 1) |
|||
} |
|||
|
|||
// 用户权限 | 角色权限 包含其子节点 创建，编辑，删除，更改 |
|||
if (item.name == 'AbpIdentity.Users' ) { |
|||
if (item.isGranted) { |
|||
params.permissions.push({ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Users.Create' |
|||
},{ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Users.Update' |
|||
},{ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Users.Delete' |
|||
},{ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Users.ManagePermissions' |
|||
}) |
|||
} else { |
|||
params.permissions.push({ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Users.Create' |
|||
},{ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Users.Update' |
|||
},{ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Users.Delete' |
|||
},{ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Users.ManagePermissions' |
|||
}) |
|||
} |
|||
} |
|||
if (item.name == 'AbpIdentity.Roles' ) { |
|||
if (item.isGranted) { |
|||
params.permissions.push({ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Roles.Create' |
|||
},{ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Roles.Update' |
|||
},{ |
|||
isGranted: true, |
|||
name: 'AbpIdentity.Roles.Delete' |
|||
}) |
|||
} else { |
|||
params.permissions.push({ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Roles.Create' |
|||
},{ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Roles.Update' |
|||
},{ |
|||
isGranted: false, |
|||
name: 'AbpIdentity.Roles.Delete' |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
// 修改必备权限，否则菜单无法正常显示 ************************* |
|||
params.permissions.filter((item) => { |
|||
if (item.name == 'AbpIdentity.Roles.ManagePermissions' || item.name == 'Auth.UserMenu') { |
|||
item.isGranted = true |
|||
} |
|||
}) |
|||
|
|||
putpermissionsRoles( |
|||
"/permission-management/permissions?providerName=R&providerKey=" + |
|||
this.multipleSelection[0].name, |
|||
params |
|||
).then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "更新成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
this.savePerLoading = false; |
|||
}).catch(err=>{ |
|||
this.savePerLoading = false; |
|||
}); |
|||
}, |
|||
// 节点下的增删改权限 |
|||
getZSG(name,params,isGranted) { |
|||
if (name !== 'skip') { |
|||
this.rolesAll.forEach(item => { |
|||
if (item.parentName == name ) { |
|||
let perm = {} |
|||
perm.name = item.name |
|||
perm.isGranted = isGranted |
|||
params.permissions.push(perm) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
//点击table行渲染权限模板 |
|||
handleRowClick(row, column, event) { |
|||
let that = this |
|||
this.name = row.name |
|||
this.treeLoading = true; |
|||
// if (row.name == "admin") { |
|||
// this.$notify({ |
|||
// title: "提示", |
|||
// message: "不可更改超级管理员权限", |
|||
// type: "warning", |
|||
// duration: 2000, |
|||
// }); |
|||
// this.$refs.multipleTable.clearSelection(); |
|||
// this.permissionsData = []; |
|||
// this.checkedPermission = []; |
|||
// } else { |
|||
this.$refs.multipleTable.clearSelection(); |
|||
this.$refs.multipleTable.toggleRowSelection(row); |
|||
// } |
|||
|
|||
this.params.providerKey = row.name; |
|||
getpermissionsRoles(this.params).then((res) => { |
|||
this.rolesAll = [] |
|||
this.permissionsData = []; |
|||
this.checkedPermission = []; |
|||
// 根据前端菜单，进行重置分组 |
|||
res.groups.forEach(itemRes => { |
|||
itemRes.permissions.forEach(item => { |
|||
// if (item.displayName !== '创建' && item.displayName !== '编辑' && item.displayName !== '删除' && item.displayName !== '修改') { |
|||
this.rolesAll.push(item) |
|||
// } |
|||
}) |
|||
}) |
|||
let filters = [] |
|||
filters.push({ |
|||
logic: "And", |
|||
column: "portal", |
|||
action: "==", |
|||
value: "0" |
|||
}) |
|||
const data = { |
|||
condition: { |
|||
filters: filters |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000, |
|||
}; |
|||
menuPermissions(data).then((res) => { |
|||
let rs = that.initTreeData(res.items,'').sort(that.sortData('sort')) |
|||
rs.forEach(item => { |
|||
that.permissionsData.push(item); |
|||
}) |
|||
that.$nextTick(() => { |
|||
that.$refs.tree.setCheckedKeys(that.checkedPermission) |
|||
}) |
|||
// console.log('菜单树',that.permissionsData) |
|||
// console.log('拥有权限',that.checkedPermission) |
|||
// console.log('所有权限',that.rolesAll) |
|||
that.treeLoading = false; |
|||
}).catch((err)=>{ |
|||
that.treeLoading = false; |
|||
console.log(err) |
|||
}) |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.appMainPage { |
|||
padding: 20px; |
|||
.main { |
|||
|
|||
.table-active { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 5px 0 15px 0; |
|||
|
|||
.bttton-box { |
|||
display: flex; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
tbody { |
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Footer { |
|||
padding: 25px 0; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
::v-deep .el-dialog { |
|||
.el-dialog__header { |
|||
button { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.permission-tree{ |
|||
padding: 20px; |
|||
height: 690px; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,818 +0,0 @@ |
|||
<template> |
|||
<div class="appMainPage" v-loading="loading"> |
|||
<div class="main"> |
|||
<div class="table-active"> |
|||
<div class="bttton-box"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
@click="handleCreate" |
|||
size="mini" |
|||
v-permission="['AbpIdentity.Users.Create']" |
|||
>创建用户</el-button |
|||
> |
|||
<el-button |
|||
type="success" |
|||
icon="el-icon-refresh" |
|||
@click.native.prevent="Createview" |
|||
size="mini" |
|||
>刷新</el-button |
|||
> |
|||
</div> |
|||
<div class="query-box"> |
|||
<!-- 搜索 --> |
|||
<searchNormal |
|||
ref="normalSearch_UserManage" |
|||
@searchNormalClick="filtrate" |
|||
@searchNormalClear="filtrate" |
|||
></searchNormal> |
|||
</div> |
|||
</div> |
|||
<el-table |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
height="calc(100vh - 260px)" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@selection-change="handleSelectionChange" |
|||
@row-click="handleRowClick" |
|||
border |
|||
> |
|||
<el-table-column align="center" type="selection" width="55" /> |
|||
<el-table-column |
|||
prop="userName" |
|||
label="用户名" |
|||
width="180" |
|||
align="left" |
|||
sortable="custom" |
|||
/> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名" |
|||
width="180" |
|||
align="left" |
|||
sortable="custom" |
|||
/> |
|||
<!-- <el-table-column |
|||
prop="email" |
|||
label="邮箱" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="phoneNumber" |
|||
label="电话号码" |
|||
sortable="custom" |
|||
align="center" |
|||
width="180" |
|||
> |
|||
</el-table-column> --> |
|||
<el-table-column |
|||
prop="extraProperties.IsActive" |
|||
label="是否启用" |
|||
sortable="custom" |
|||
align="center" |
|||
width="180" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row['extraProperties']['IsActive'] | trigger('whetherOrNot', "label") }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" width="230"> |
|||
<template slot-scope="scope"> |
|||
<!-- icon="el-icon-edit" --> |
|||
<el-button |
|||
type="text" |
|||
@click="Update(scope.row)" |
|||
v-permission="['AbpIdentity.Users.Update']" |
|||
v-if="scope.row.name == 'admin' ? false : true" |
|||
>编辑</el-button |
|||
> |
|||
<!-- <el-button |
|||
type="primary" |
|||
size="mini" |
|||
icon="el-icon-circle-check" |
|||
@click="Delete(scope.row)" |
|||
v-permission="['AbpIdentity.Users.Update']" |
|||
v-if="scope.row.name == 'admin' ? false : true && !scope.row.lockoutEnabled" |
|||
>启用</el-button |
|||
> |
|||
<el-button |
|||
type="danger" |
|||
size="mini" |
|||
icon="el-icon-circle-close" |
|||
@click="Delete(scope.row)" |
|||
v-permission="['AbpIdentity.Users.Update']" |
|||
v-if="scope.row.name == 'admin' ? false : true && scope.row.lockoutEnabled" |
|||
>禁用</el-button |
|||
> --> |
|||
<!-- <el-tooltip |
|||
content="重置用户密码" |
|||
placement="bottom" |
|||
effect="light" |
|||
> --> |
|||
<!-- icon="el-icon-refresh-right" --> |
|||
<el-button |
|||
type="text" |
|||
@click="resetPassword(scope.row)" |
|||
v-if="scope.row.name == 'admin' ? false : true" |
|||
>重置密码</el-button> |
|||
<!-- </el-tooltip> --> |
|||
<!-- icon="el-icon-delete" --> |
|||
<el-button |
|||
type="text" |
|||
@click="deleteUser(scope.row)" |
|||
v-if="scope.row.name == 'admin' ? false : true" |
|||
style="color:red" |
|||
>删除用户</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="address" label="创建时间" /> |
|||
<el-table-column prop="address" label="编辑" /> --> |
|||
</el-table> |
|||
</div> |
|||
<div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> |
|||
<el-dialog |
|||
:title="formTitle" |
|||
:visible.sync="dialogVisible" |
|||
width="600px" |
|||
:close-on-click-modal="false" |
|||
> |
|||
<el-form |
|||
ref="form" |
|||
:model="form" |
|||
label-width="70px" |
|||
:rules="rules" |
|||
size="small" |
|||
:inline="true" |
|||
> |
|||
<el-form-item label="用户名" prop="userName"> |
|||
<el-input |
|||
v-model="form.userName" |
|||
style="width: 184px" |
|||
maxlength="20" |
|||
/> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="电话" prop="phoneNumber"> |
|||
<el-input |
|||
v-model="form.phoneNumber" |
|||
style="width: 184px" |
|||
maxlength="11" |
|||
/> |
|||
</el-form-item> --> |
|||
<el-form-item label="姓名" prop="name"> |
|||
<el-input v-model="form.name" style="width: 184px" maxlength="20" /> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="邮箱" prop="email"> |
|||
<el-input v-model="form.email" style="width: 184px" /> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item label="角色" prop="roleNames"> |
|||
<el-select |
|||
v-model="form.roleNames" |
|||
multiple |
|||
style="width: 188px" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.name" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="是否启用" prop="extraProperties.IsActive"> |
|||
<el-select |
|||
v-model="form.extraProperties.IsActive" |
|||
style="width: 188px" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in userOptions('whetherOrNot')" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="密码" prop="password" v-if="!isEdit"> |
|||
<el-input |
|||
ref="password" |
|||
v-model="form.password" |
|||
style="width: 184px" |
|||
maxlength="16" |
|||
minlength="6" |
|||
:type="passwordType" |
|||
/> |
|||
<span class="show-pwd" @click="showPwd"> |
|||
<svg-icon |
|||
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" |
|||
/> |
|||
</span> |
|||
</el-form-item> |
|||
<el-form-item label="部门" prop="extraProperties.DepartmentCode"> |
|||
<el-select |
|||
v-model="form.extraProperties.DepartmentCode" |
|||
style="width: 188px" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in departmentOptions" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.code" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="描述"> |
|||
<el-input |
|||
type="textarea" |
|||
:rows="2" |
|||
placeholder="请输入描述信息" |
|||
style="width: 450px" |
|||
v-model="form.extraProperties.IsActive" |
|||
> |
|||
</el-input> |
|||
</el-form-item> --> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="resetform">取 消</el-button> |
|||
<el-button type="primary" @click="submitForm">确 定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { isvalidPhone } from "@/utils/validate"; |
|||
import { |
|||
postCreate, |
|||
postUpdate, |
|||
postDelete, |
|||
getPageList, |
|||
getusersID, |
|||
usersroles, |
|||
putpassword, |
|||
departmentList |
|||
} from "@/api/wms-auth"; |
|||
import permission from "@/utils/permission/index"; |
|||
import searchNormal from "@/components/searchNormal/index.vue" |
|||
export default { |
|||
directives: { permission }, |
|||
components:{ |
|||
searchNormal |
|||
}, |
|||
name:"UserManage", |
|||
data() { |
|||
// 自定义验证 |
|||
const validPhone = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error("请输入电话号码")); |
|||
} else if (!isvalidPhone(value)) { |
|||
callback(new Error("请输入正确的11位手机号码")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
const validName = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error("请输入登录名称")); |
|||
} else if (/[\u4E00-\u9FA5]/g.test(value)) { |
|||
callback(new Error("登录名不能输入汉字")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
// 简单 |
|||
// const validpassword = (rule, value, callback) => { |
|||
// if (!value) { |
|||
// callback(new Error("请输入密码")); |
|||
// } else { |
|||
// if ( |
|||
// /^(?=.*\d)(?=.*[a-z]).{6,16}$/.test( |
|||
// value |
|||
// ) |
|||
// ) { |
|||
// callback(); |
|||
// } else { |
|||
// callback(new Error("密码必须包含字母,数字混合,最小长度为6位")); |
|||
// } |
|||
// } |
|||
// }; |
|||
// 中等 |
|||
// const validpassword = (rule, value, callback) => { |
|||
// if (!value) { |
|||
// callback(new Error("请输入密码")); |
|||
// } else { |
|||
// if ( |
|||
// /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/.test( |
|||
// value |
|||
// ) |
|||
// ) { |
|||
// callback(); |
|||
// } else { |
|||
// callback(new Error("密码必须包含大小写,数字混合,最小长度为6位")); |
|||
// } |
|||
// } |
|||
// }; |
|||
// 复杂 |
|||
const validpassword = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error("请输入密码")); |
|||
} else { |
|||
if ( |
|||
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~@#$%\*-\+=:,\\?\[\]\{}]).{6,16}$/.test( |
|||
value |
|||
) |
|||
) { |
|||
callback(); |
|||
} else { |
|||
callback(new Error("密码必须包含大小写,数字与特殊字符混合,最小长度为6位")); |
|||
} |
|||
} |
|||
}; |
|||
const checkEmail = (rule, value, callback) => { |
|||
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; |
|||
if (!value) { |
|||
return callback(new Error("邮箱不能为空")); |
|||
} |
|||
setTimeout(() => { |
|||
if (mailReg.test(value)) { |
|||
callback(); |
|||
} else { |
|||
callback(new Error("请输入正确的邮箱格式")); |
|||
} |
|||
}, 100); |
|||
}; |
|||
return { |
|||
loading:false, |
|||
//编辑弹出 |
|||
dialogVisible: false, |
|||
//密码显示 |
|||
isEdit: false, |
|||
//弹出title |
|||
formTitle: "", |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
// Thecurrent: '', |
|||
//选择添加分组 |
|||
//筛选栏分组 |
|||
// value1: '', |
|||
//角色组 |
|||
options: [], |
|||
//部门组 |
|||
departmentOptions: [], |
|||
//当前用户ID |
|||
usersId: "", |
|||
//编辑参数 |
|||
concurrencyStamp: "", |
|||
//新增参数 |
|||
form: { |
|||
userName: "", |
|||
phoneNumber: "", |
|||
name: "", |
|||
email: "", |
|||
roleNames: [], |
|||
password: "", |
|||
surname: "", |
|||
lockoutEnabled: true, |
|||
extraProperties: { |
|||
DepartmentCode: '', |
|||
IsActive: true, |
|||
}, |
|||
}, |
|||
//密码明文 |
|||
passwordType: "password", |
|||
// |
|||
multipleSelection: [], |
|||
//table渲染 |
|||
tableData: [], |
|||
rules: { |
|||
userName: [ |
|||
{ required: true, trigger: "blur", validator: validName }, |
|||
{ |
|||
min: 2, |
|||
max: 20, |
|||
message: "长度在 2 到 20 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
name: [ |
|||
{ required: true, trigger: "blur", message: "请输入姓名" }, |
|||
{ |
|||
min: 2, |
|||
max: 20, |
|||
message: "长度在 2 到 20 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
email: [{ required: true, validator: checkEmail, trigger: "blur" }], |
|||
phoneNumber: [ |
|||
{ required: true, trigger: "blur", validator: validPhone }, |
|||
], |
|||
password: [ |
|||
// { required: true, trigger: "blur", validator: validpassword }, |
|||
{ required: true, trigger: "blur", message: "请输入密码" }, |
|||
{ |
|||
min: 6, |
|||
max: 16, |
|||
message: "长度在 6 到 16 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
roleNames: [ |
|||
{ required: true, message: "请选择角色", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
// watch:{ |
|||
// value1:function(newVal,oldVal){ |
|||
// this.pageList() |
|||
// } |
|||
// }, |
|||
created() { |
|||
//获取所有角色 |
|||
usersroles().then((res) => { |
|||
this.options = res.items; |
|||
}); |
|||
//获取所有部门 |
|||
departmentList({},'auth/department').then(res => { |
|||
this.departmentOptions = res.items; |
|||
}) |
|||
}, |
|||
mounted() { |
|||
this.pageList(); |
|||
}, |
|||
methods: { |
|||
userOptions(val){ |
|||
let options = this.$staticOptions[val] |
|||
return options() |
|||
}, |
|||
//请求数据渲染table |
|||
pageList(val) { |
|||
this.loading = true |
|||
const data = { |
|||
Filter: val || '', |
|||
Sorting: this.queryInfo.Sorting, |
|||
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
|||
MaxResultCount: this.queryInfo.pagesize, |
|||
}; |
|||
getPageList(data).then((res) => { |
|||
this.loading = false |
|||
const data = res; |
|||
this.total = data.totalCount; |
|||
this.tableData = data.items; |
|||
}).catch(()=>{ |
|||
this.loading = false |
|||
}); |
|||
}, |
|||
//密码明文显示 |
|||
showPwd() { |
|||
if (this.passwordType === "password") { |
|||
this.passwordType = ""; |
|||
} else { |
|||
this.passwordType = "password"; |
|||
} |
|||
this.$nextTick(() => { |
|||
this.$refs.password.focus(); |
|||
}); |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
// alert(this.listQuery.Sorting) |
|||
this.handleFilter(); |
|||
}, |
|||
//排序触发页面更新 |
|||
handleFilter() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}, |
|||
//筛选 |
|||
filtrate(val) { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(val); |
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.pageList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.pageList(); |
|||
}, |
|||
//重置新建与编辑后的参数 |
|||
resetform() { |
|||
this.$refs.form.resetFields(); |
|||
this.dialogVisible = false; |
|||
this.form.userName = ""; |
|||
this.form.phoneNumber = ""; |
|||
this.form.name = ""; |
|||
this.form.email = ""; |
|||
this.form.roleNames = []; |
|||
this.form.password = ""; |
|||
this.form.surname = ""; |
|||
this.form.extraProperties.IsActive = ""; |
|||
this.form.extraProperties.DepartmentCode = ""; |
|||
this.$refs.multipleTable.clearSelection(); |
|||
}, |
|||
handleCreate() { |
|||
this.formTitle = "创建用户"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = false; |
|||
this.form.phoneNumber = this.getRandomPhoneNumber() |
|||
this.form.email = this.getRandomEmail() |
|||
usersroles().then((res) => { |
|||
this.options = res.items |
|||
}) |
|||
|
|||
}, |
|||
//刷新 |
|||
Createview() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.$refs.normalSearch_UserManage.searchNormalClear()//清空搜索 |
|||
usersroles().then((res) => { |
|||
this.options = res.items; |
|||
}); |
|||
this.$refs.multipleTable.clearSort(); |
|||
}, |
|||
//获取当前角色 |
|||
usersID(data) { |
|||
getusersID(data).then((res) => { |
|||
const data = res.items; |
|||
this.form.roleNames = data.map((item) => { |
|||
return item.name; |
|||
}); |
|||
}); |
|||
}, |
|||
//编辑默认参数 |
|||
Update(row) { |
|||
if (row) { |
|||
this.formTitle = "编辑用户"; |
|||
this.usersId = row.id; |
|||
this.usersID(row.id); |
|||
this.form.userName = row.userName; |
|||
this.form.phoneNumber = row.phoneNumber; |
|||
this.form.name = row.name; |
|||
this.form.email = row.email; |
|||
this.form.surname = row.name; |
|||
this.form.lockoutEnabled = row.lockoutEnabled |
|||
this.concurrencyStamp = row.concurrencyStamp; |
|||
this.form.extraProperties.IsActive = row.extraProperties.IsActive; |
|||
this.form.extraProperties.DepartmentCode = row.extraProperties.DepartmentCode; |
|||
departmentList({},'auth/department').then(res => { |
|||
this.departmentOptions = res.items |
|||
}) |
|||
usersroles().then((res) => { |
|||
this.options = res.items; |
|||
}); |
|||
this.isEdit = true; |
|||
this.dialogVisible = true; |
|||
} |
|||
// else { |
|||
// if (this.multipleSelection.length != 1) { |
|||
// this.$message({ |
|||
// message: "编辑必须选择单行", |
|||
// type: "warning", |
|||
// }); |
|||
// return; |
|||
// } else { |
|||
// this.formTitle = '修改用户' |
|||
// this.dialogVisible = true |
|||
// this.isEdit = true |
|||
// const row = this.multipleSelection[0] |
|||
// this.usersId = row.id |
|||
// this.usersID(row.id); |
|||
// this.form.userName = row.userName |
|||
// this.form.phoneNumber = row.phoneNumber |
|||
// this.form.name = row.name |
|||
// this.form.email = row.email |
|||
// this.form.surname = row.name |
|||
// this.concurrencyStamp = row.concurrencyStamp |
|||
// } |
|||
// } |
|||
}, |
|||
//删除 |
|||
// Delete(row) { |
|||
// this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", { |
|||
// confirmButtonText: "确定", |
|||
// cancelButtonText: "取消", |
|||
// type: "warning", |
|||
// }) |
|||
// .then(() => { |
|||
// if (this.tableData.length == 1) { |
|||
// this.queryInfo.currentPage = this.queryInfo.currentPage - 1; |
|||
// } |
|||
// postDelete(row.id).then((res) => { |
|||
// this.$successMsg("删除成功！"); |
|||
// this.pageList(); |
|||
// }); |
|||
// }) |
|||
// .catch(() => {}); |
|||
// }, |
|||
//新建与编辑 |
|||
submitForm() { |
|||
this.$refs.form.validate((valid) => { |
|||
//新建报表组 |
|||
if (valid && !this.isEdit) { |
|||
this.form.surname = this.form.name; |
|||
postCreate(this.form) |
|||
.then((res) => { |
|||
this.resetform(); |
|||
this.$successMsg("创建成功！"); |
|||
this.pageList(); |
|||
}) |
|||
.catch((err) => { |
|||
this.resetform(); |
|||
}); |
|||
} else if (valid && this.isEdit) { |
|||
//编辑报表 |
|||
const data = JSON.parse(JSON.stringify(this.form)); |
|||
delete data.password; |
|||
data.concurrencyStamp = this.concurrencyStamp; |
|||
postUpdate(data, this.usersId) |
|||
.then((res) => { |
|||
this.$successMsg("编辑成功！"); |
|||
// this.queryInfo.currentPage = 1 |
|||
this.pageList(); |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}) |
|||
.catch((err) => { |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}); |
|||
} else { |
|||
this.$errorMsg("请按照提示继续输入！"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
//重置密码 |
|||
resetPassword (row) { |
|||
this.$confirm("是否修改" + row.userName + "密码?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
putpassword(row.id).then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "重置成功, 密码是: 000000", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
}); |
|||
}) |
|||
.catch(() => { |
|||
this.$message({ |
|||
type: "info", |
|||
message: "已取消修改", |
|||
}); |
|||
}); |
|||
}, |
|||
// 删除用户 |
|||
deleteUser(row){ |
|||
this.$confirm("您确认删除 " + row.userName + " 用户吗？", "提示", { |
|||
confirmButtonText: "确认删除用户", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.loading = true |
|||
postDelete(row.id) |
|||
.then((res) => { |
|||
this.loading = false |
|||
this.$successMsg("删除成功！"); |
|||
this.pageList(); |
|||
}) |
|||
.catch((err) => { |
|||
this.loading = false |
|||
}) |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
//点击table行选择 |
|||
handleRowClick(row, column, event) { |
|||
if ( |
|||
this.multipleSelection.length == 1 && |
|||
this.multipleSelection[0].id == row.id |
|||
) { |
|||
this.$refs.multipleTable.clearSelection(); |
|||
return; |
|||
} |
|||
this.$refs.multipleTable.clearSelection(); |
|||
this.$refs.multipleTable.toggleRowSelection(row); |
|||
}, |
|||
// 创建用户，随机生成11位电话号，去掉电话校验 |
|||
getRandomPhoneNumber () { |
|||
return '1' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) |
|||
}, |
|||
getRandomEmail () { |
|||
return '' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + '@' + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + Math.floor(Math.random()*9+1) + '.com' |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.appMainPage { |
|||
.main { |
|||
.table-active { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20px 0; |
|||
|
|||
.bttton-box { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
tbody { |
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Footer { |
|||
padding: 25px; |
|||
// background-color: #f2f2f2; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
::v-deep button { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
// ::v-deep .number { |
|||
// background-color: #fff; |
|||
// } |
|||
} |
|||
|
|||
::v-deep .el-dialog { |
|||
.el-dialog__header { |
|||
button { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.el-form-item{ |
|||
margin-bottom: 30px; |
|||
} |
|||
.show-pwd { |
|||
position: absolute; |
|||
right: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,661 +0,0 @@ |
|||
<template> |
|||
<div class="appMainPage" v-loading="pageLoading"> |
|||
<div class="pageCenter"> |
|||
<div class="leftInfo"> |
|||
<div class="main"> |
|||
<div class="table-active"> |
|||
<!-- <div class="bttton-box"> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
@click="handleCreate" |
|||
v-permission="['AbpIdentity.Roles.Create']" |
|||
>创建角色</el-button |
|||
> |
|||
<el-button |
|||
type="success" |
|||
icon="el-icon-refresh" |
|||
@click.native.prevent="Createview" |
|||
>刷新</el-button |
|||
> |
|||
</div--> |
|||
<div class="query-box"> |
|||
<!-- 搜索 --> |
|||
<searchNormal |
|||
ref="normalSearch_UserWorkGroup" |
|||
@searchNormalClick="filtrate" |
|||
@searchNormalClear="filtrate" |
|||
></searchNormal> |
|||
<el-button |
|||
style="margin-left:10px" |
|||
type="danger" |
|||
@click.native.prevent="reset" |
|||
size="mini" |
|||
>重置</el-button> |
|||
</div> |
|||
</div> |
|||
<el-table |
|||
border="" |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
height="calc(100vh - 265px)" |
|||
style="width: 100%" |
|||
@sort-change="sortChange" |
|||
@row-click="handleRowClick" |
|||
@selection-change="handleSelectionChange" |
|||
> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55" |
|||
:selectable="selectEvent" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
prop="userName" |
|||
label="用户名" |
|||
width="180" |
|||
align="left" |
|||
sortable="custom" |
|||
/> |
|||
<el-table-column |
|||
prop="email" |
|||
label="邮箱" |
|||
align="left" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
<el-table-column |
|||
prop="phoneNumber" |
|||
label="电话号码" |
|||
sortable="custom" |
|||
align="left" |
|||
width="180" |
|||
> |
|||
</el-table-column> |
|||
<!-- <el-table-column prop="address" label="创建时间" /> |
|||
<el-table-column prop="address" label="编辑" /> --> |
|||
</el-table> |
|||
</div> |
|||
<div class="Footer"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="queryInfo.currentPage" |
|||
:page-sizes="[10, 15, 20]" |
|||
:page-size="queryInfo.pagesize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="total" |
|||
> |
|||
</el-pagination> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
style="margin-left: 10px; background-color: #409eff" |
|||
>确定</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div v-permission="['AbpIdentity.Roles.Update']" class="rightInfo"> |
|||
<el-card class="box-card" shadow="never"> |
|||
<div slot="header" class="clearfix" style="height: 20px"> |
|||
<el-tooltip |
|||
class="item" |
|||
effect="dark" |
|||
content="选择指定用户的工作组" |
|||
placement="top" |
|||
> |
|||
<span class="role-span">工作组</span> |
|||
</el-tooltip> |
|||
<el-button |
|||
:loading="savePerLoading" |
|||
:disabled="multipleSelection.length != 1" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
type="primary" |
|||
@click="savePer" |
|||
>保存 |
|||
</el-button> |
|||
</div> |
|||
<el-tree |
|||
ref="tree" |
|||
v-loading="treeLoading" |
|||
:default-checked-keys="checkedPermission" |
|||
:check-strictly="false" |
|||
:data="permissionsData" |
|||
:props="defaultProps" |
|||
show-checkbox |
|||
node-key="id" |
|||
class="permission-tree" |
|||
:default-expand-all='true' |
|||
/> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
postCreate, |
|||
postUpdate, |
|||
postDelete, |
|||
getPageList, |
|||
userWorkgroupPermissions, |
|||
SetUserWorkgroupPermissions, |
|||
} from "@/api/wms-auth"; |
|||
import {getPageList as workgroupGetList } from "@/api/wms-api" |
|||
import permission from "@/utils/permission/index"; |
|||
import searchNormal from "@/components/searchNormal/index.vue" |
|||
export default { |
|||
name:"UserWorkGroup", |
|||
directives: { permission }, |
|||
components:{ |
|||
searchNormal |
|||
}, |
|||
data() { |
|||
// 自定义验证 |
|||
return { |
|||
pageLoading:false, |
|||
//编辑弹出 |
|||
dialogVisible: false, |
|||
//创建与编辑判断 |
|||
isEdit: false, |
|||
//弹出title |
|||
formTitle: "", |
|||
//总条数 |
|||
total: 0, |
|||
//分页器 |
|||
queryInfo: { |
|||
//当前页数 |
|||
currentPage: 1, |
|||
//每页条数 |
|||
pagesize: 20, |
|||
Sorting: "", |
|||
}, |
|||
// Thecurrent: '', |
|||
//选择添加分组 |
|||
//筛选栏分组 |
|||
// value1: '', |
|||
//报表组 |
|||
// roleList: [], |
|||
//当前用户ID |
|||
usersId: "", |
|||
//编辑参数 |
|||
concurrencyStamp: "", |
|||
//新增参数 |
|||
form: { |
|||
name: "", |
|||
isDefault: true, |
|||
isPublic: true, |
|||
extraProperties: { |
|||
Describe: "", |
|||
}, |
|||
}, |
|||
//权限模板保存按钮加载 |
|||
savePerLoading: false, |
|||
//权限模板树形控件加载 |
|||
treeLoading: false, |
|||
//权限模板树形控件默认勾选的数组 |
|||
checkedPermission: [], |
|||
//权限模板树形结构渲染数据 |
|||
permissionsData: [], |
|||
//用户ID |
|||
userId:"", |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
//渲染权限模板参数 |
|||
params: { |
|||
providerName: "R", |
|||
providerKey: "", |
|||
}, |
|||
//选择行数据 |
|||
multipleSelection: [], |
|||
//table渲染 |
|||
tableData: [], |
|||
rules: { |
|||
name: [ |
|||
{ required: true, trigger: "blur", message: "请输入姓名" }, |
|||
{ |
|||
min: 1, |
|||
max: 23, |
|||
message: "长度在 1 到 23 个字符", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
// watch:{ |
|||
// value1:function(newVal,oldVal){ |
|||
// this.pageList() |
|||
// } |
|||
// }, |
|||
created() { |
|||
// usersroles().then(res => { |
|||
// |
|||
// this.roleList = res.data.items |
|||
// }) |
|||
}, |
|||
mounted() { |
|||
this.pageList(); |
|||
}, |
|||
methods: { |
|||
//请求数据渲染table |
|||
pageList(val) { |
|||
this.pageLoading = true |
|||
const data = { |
|||
condition: { |
|||
filters: [] |
|||
}, |
|||
Filter: val || '', |
|||
Sorting: this.queryInfo.Sorting, |
|||
SkipCount: (this.queryInfo.currentPage - 1) * this.queryInfo.pagesize, |
|||
MaxResultCount: this.queryInfo.pagesize, |
|||
}; |
|||
getPageList(data).then((res) => { |
|||
this.pageLoading = false |
|||
const data = res; |
|||
this.total = data.totalCount; |
|||
this.tableData = data.items; |
|||
}).catch(err => { |
|||
this.pageLoading = false |
|||
}) |
|||
}, |
|||
//排序 |
|||
sortChange(data) { |
|||
const { prop, order } = data; |
|||
if (!prop || !order) { |
|||
this.queryInfo.Sorting = ""; |
|||
this.handleFilter(); |
|||
return; |
|||
} |
|||
this.queryInfo.Sorting = prop + " " + order; |
|||
// alert(this.listQuery.Sorting) |
|||
this.handleFilter(); |
|||
}, |
|||
//排序触发页面更新 |
|||
handleFilter() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}, |
|||
//筛选 |
|||
filtrate(val) { |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(val); |
|||
}, |
|||
//选择每页条数分页 |
|||
handleSizeChange(val) { |
|||
this.queryInfo.pagesize = val; |
|||
this.pageList(); |
|||
}, |
|||
//选择当前页分页 |
|||
handleCurrentChange(val) { |
|||
this.queryInfo.currentPage = val; |
|||
this.pageList(); |
|||
}, |
|||
//重置 |
|||
reset() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.permissionsData = [] |
|||
this.$refs.normalSearch_UserWorkGroup.searchNormalClear()//清空搜索 |
|||
}, |
|||
//重置创建与编辑后的参数 |
|||
resetform() { |
|||
this.$refs.form.resetFields(); |
|||
this.dialogVisible = false; |
|||
this.form.name = ""; |
|||
this.form.extraProperties.Describe = ""; |
|||
this.$refs.multipleTable.clearSelection(); |
|||
}, |
|||
//创建角色 |
|||
handleCreate() { |
|||
this.formTitle = "创建角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = false; |
|||
}, |
|||
//刷新 |
|||
Createview() { |
|||
this.queryInfo.currentPage = 1; |
|||
this.queryInfo.Sorting = ""; |
|||
this.$refs.normalSearch_UserWorkGroup.searchNormalClear()//清空搜索 |
|||
this.$refs.multipleTable.clearSort(); |
|||
}, |
|||
//编辑默认参数 |
|||
Update(row) { |
|||
if (row) { |
|||
this.formTitle = "编辑角色"; |
|||
this.dialogVisible = true; |
|||
this.isEdit = true; |
|||
this.usersId = row.id; |
|||
this.form.name = row.name; |
|||
this.concurrencyStamp = row.concurrencyStamp; |
|||
this.form.extraProperties.Describe = row.extraProperties.Describe; |
|||
} |
|||
// else { |
|||
// if (this.multipleSelection.length != 1) { |
|||
// this.$message({ |
|||
// message: "编辑必须选择单行", |
|||
// type: "warning", |
|||
// }); |
|||
// return; |
|||
// } else { |
|||
// this.formTitle = '修改角色' |
|||
// this.dialogVisible = true |
|||
// this.isEdit = true |
|||
// const row = this.multipleSelection[0] |
|||
// this.usersId = row.id |
|||
// this.form.name = row.name |
|||
// this.concurrencyStamp = row.concurrencyStamp |
|||
// } |
|||
// } |
|||
}, |
|||
//删除 |
|||
Delete(row) { |
|||
this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
if (this.tableData.length == 1) { |
|||
this.queryInfo.currentPage = this.queryInfo.currentPage - 1; |
|||
} |
|||
this.pageLoading = true |
|||
postDelete(row.id).then((res) => { |
|||
this.pageLoading = false |
|||
this.$successMsg("删除成功！"); |
|||
this.pageList(); |
|||
}).catch(() => { |
|||
this.pageLoading = false |
|||
}); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
//创建与编辑 |
|||
submitForm() { |
|||
this.$refs.form.validate((valid) => { |
|||
//创建报表组 |
|||
if (valid && !this.isEdit) { |
|||
this.pageLoading = true |
|||
postCreate(this.form) |
|||
.then((res) => { |
|||
this.resetform(); |
|||
this.pageLoading = false |
|||
this.$successMsg("创建成功！"); |
|||
this.queryInfo.currentPage = 1; |
|||
this.pageList(); |
|||
}) |
|||
.catch((err) => { |
|||
this.pageLoading = false |
|||
this.resetform(); |
|||
}); |
|||
} else if (valid && this.isEdit) { |
|||
//编辑报表 |
|||
const data = JSON.parse(JSON.stringify(this.form)); |
|||
data.concurrencyStamp = this.concurrencyStamp; |
|||
this.pageLoading = true |
|||
postUpdate(data, this.usersId) |
|||
.then((res) => { |
|||
this.pageLoading = false |
|||
this.$successMsg("编辑成功！"); |
|||
this.pageList(); |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}) |
|||
.catch((err) => { |
|||
this.pageLoading = false |
|||
// this.Thecurrent = '' |
|||
this.resetform(); |
|||
}); |
|||
} else { |
|||
this.$errorMsg("请按照提示继续输入！"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
//复选框禁用 |
|||
selectEvent(row, index) { |
|||
// if (row.name == "admin") { |
|||
// return false; |
|||
// } else { |
|||
return true; |
|||
// } |
|||
}, |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
this.treeLoading = true; |
|||
if (val.length == 1) { |
|||
// this.params.providerKey = val[0].name; |
|||
workgroupGetList({ |
|||
condition: { |
|||
filters: [] |
|||
}, |
|||
Sorting: "", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000,},'basedata/work-group').then((res) => { |
|||
userWorkgroupPermissions({ userGuid: val[0].id }) |
|||
.then((response) => { |
|||
// const objKey = Object.keys(response) |
|||
let objKey = []; |
|||
for (let i = 0; i < response.length; i++) { |
|||
objKey.push(response[i].workGroupCode); |
|||
} |
|||
this.permissionsData = []; |
|||
this.checkedPermission = []; |
|||
this.userId = val[0].id |
|||
this.setTree(res.items, objKey); |
|||
this.treeLoading = false; |
|||
}) |
|||
.catch((err) => { |
|||
this.treeLoading = false; |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
this.treeLoading = false; |
|||
}); |
|||
} else { |
|||
this.treeLoading = false; |
|||
this.permissionsData = []; |
|||
this.checkedPermission = []; |
|||
if (val.length > 1) { |
|||
this.$notify({ |
|||
title: "提示", |
|||
message: "不接受多行", |
|||
type: "warning", |
|||
duration: 2000, |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
//模板权限保存 |
|||
async savePer() { |
|||
this.savePerLoading = true; |
|||
let data = await this.PromiseData() |
|||
SetUserWorkgroupPermissions(data,{userid:this.userId}).then((response) => { |
|||
this.$notify({ |
|||
title: "成功", |
|||
message: "更新成功", |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
this.savePerLoading = false; |
|||
}).catch((err) => { |
|||
this.savePerLoading = false; |
|||
}); |
|||
}, |
|||
//等待提交数据 |
|||
PromiseData(){ |
|||
return new Promise((resolve)=>{ |
|||
let params = []; |
|||
let checkedKeys = this.$refs.tree.getCheckedKeys(); |
|||
// console.log("选择",checkedKeys); |
|||
this.permissionsData.forEach((element) => { |
|||
element.children.forEach((item) => { |
|||
// console.log("条件",item.code); |
|||
if(checkedKeys.indexOf(item.id) != -1){ |
|||
// console.log("提交",item); |
|||
let perm = {}; |
|||
perm.userId = this.userId |
|||
perm.remark = item.remark |
|||
perm.workGroupCode = item.id |
|||
perm.company = item.company |
|||
params.push(perm) |
|||
} |
|||
}); |
|||
}); |
|||
resolve(params) |
|||
}) |
|||
}, |
|||
//树形控件复选框 |
|||
checkNode(data, state) { |
|||
if (!data.parentId) { |
|||
if (state.checkedKeys.indexOf(data.id) === -1) { |
|||
data.children.forEach((element) => { |
|||
this.$refs.tree.setChecked(element.id, false); |
|||
}); |
|||
} |
|||
} else { |
|||
if (state.checkedKeys.indexOf(data.id) > -1) { |
|||
this.$refs.tree.setChecked(data.parentId, true); |
|||
} |
|||
} |
|||
}, |
|||
//点击table行渲染权限模板 |
|||
handleRowClick(row, column, event) { |
|||
// console.log("用户", row); |
|||
if ( |
|||
this.multipleSelection.length == 1 && |
|||
this.multipleSelection[0].id == row.id |
|||
) { |
|||
this.$refs.multipleTable.clearSelection(); |
|||
return; |
|||
} |
|||
// this.treeLoading = true; |
|||
// if (row.name == "admin") { |
|||
// this.$notify({ |
|||
// title: "提示", |
|||
// message: "不可更改超级管理员权限", |
|||
// type: "warning", |
|||
// duration: 2000, |
|||
// }); |
|||
// this.$refs.multipleTable.clearSelection(); |
|||
// this.permissionsData = []; |
|||
// this.checkedPermission = []; |
|||
// } else { |
|||
this.$refs.multipleTable.clearSelection(); |
|||
this.$refs.multipleTable.toggleRowSelection(row); |
|||
// } |
|||
// this.params.providerKey = row.name; |
|||
// getpermissions(this.params).then(res => { |
|||
// this.permissionsData = []; |
|||
// this.checkedPermission = []; |
|||
// this.setTree(res.data.groups); |
|||
// this.treeLoading = false; |
|||
// }) |
|||
}, |
|||
setTree(data, userData) { |
|||
let root = {}; |
|||
root.id = "1"; |
|||
root.name = "工作组菜单"; |
|||
root.children = []; |
|||
data.forEach((element) => { |
|||
let children = {}; |
|||
children.id = element.code; |
|||
children.name = element.name |
|||
children.userId = element.id |
|||
children.company = element.company |
|||
children.remark =element.remark |
|||
children.children = []; |
|||
root.children.push(children); |
|||
// console.log("已有权限",userData); |
|||
// console.log("目前ID",element.id); |
|||
if (userData.indexOf(element.code) != -1) { |
|||
// console.log('已有权限NAME',element.code); |
|||
this.checkedPermission.push(element.code); |
|||
} |
|||
}); |
|||
this.permissionsData.push(root); |
|||
// console.log("第一个数据",this.permissionsData); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.appMainPage { |
|||
padding:20px; |
|||
|
|||
.pageCenter{ |
|||
display: flex; |
|||
height: 100%; |
|||
} |
|||
|
|||
.main { |
|||
|
|||
.table-active { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding:5px 0 15px 0; |
|||
|
|||
.bttton-box { |
|||
display: flex; |
|||
} |
|||
|
|||
.query-box { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftInfo{ |
|||
width: 65%; |
|||
} |
|||
|
|||
.rightInfo{ |
|||
width: 35%; |
|||
padding: 0; |
|||
margin-left: 25px; |
|||
|
|||
.el-card{ |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.el-table__body-wrapper { |
|||
tbody { |
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Footer { |
|||
padding: 25px 0; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
::v-deep .el-dialog { |
|||
.el-dialog__header { |
|||
button { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.permission-tree{ |
|||
padding: 20px; |
|||
height: calc(100vh - 240px); |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue