Skip to content

S
saas-manage
Commit 4b465e6b by qinjianhui
Options

Merge branch 'dev' into 'master' 

Dev

See merge request !1
parents 23ecc5ca 80cc2748
Showing with 3346 additions and 126 deletions
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
node: true,
},
extends: [
'plugin:vue/essential',
'@vue/standard'
'@vue/standard',
],
parserOptions: {
parser: '@babel/eslint-parser'
parser: '@babel/eslint-parser',
},
rules: {
"space-before-function-paren": 0,
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': 'off',
indent: 'off',
'multiline-ternary': 'off',
},
}
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -8,10 +8,15 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.1.3",
"core-js": "^3.8.3",
"element-ui": "^2.15.10",
"js-md5": "^0.7.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
"vuex": "^3.6.2",
"vxe-table": "^3.5.9",
"xe-utils": "^3.5.7"
},
"devDependencies": {
"@babel/core": "^7.12.16",
......@@ -29,6 +34,8 @@
"eslint-plugin-vue": "^8.0.3",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"vue-template-compiler": "^2.6.14"
}
}
public/config.js 0 → 100644
window.apiHostSetting = {
VUE_APP_BASE_URL: '',
}
public/index.html
......@@ -4,8 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>config.js"></script>
</head>
<body>
<noscript>
......
src/.prettierrc 0 → 100644
{
"singleQuote": true,
"semi": false,
"trailingComma": "all",
"printWidth": 60
}
src/App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {
addEventListener('keydown', (e) => {
this.$store.dispatch('setKeyCode', e.key)
})
addEventListener('keyup', () => {
this.$store.dispatch('setKeyCode', null)
})
},
}
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
body,
html {
height: 100%;
overflow: hidden;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
height: 100%;
overflow: hidden;
}
</style>
src/common/api/axios.js 0 → 100644
import Axios from 'axios'
import { getToken } from '@/utils/auth'
import Vue from 'vue'
import router from '@/router'
const axios = Axios.create({
baseURL: window.apiHostSetting.VUE_APP_BASE_URL + '/api',
timeout: 30 * 1000,
})
axios.interceptors.request.use((config) => {
if (config.data && typeof config.data === 'object') {
const data = config.data
for (const key in data) {
if (data[key] === '') {
data[key] = null
}
}
config.data = data
}
config.headers['jwt-token'] = getToken()
return config
})
axios.interceptors.response.use(
(res) => {
if (res.status === 200) {
if (res.data.code === 401) {
// token过期
Vue.prototype.$message({
type: 'error',
message: res.data.message,
})
sessionStorage.setItem('active', 'true')
// router
// .replace({
// name: 'login',
// })
// .catch((err) => {
// console.log(err)
// })
return Promise.reject(res.data)
} else if (res.data.code === 402) {
Vue.prototype.$message({
message: res.data.message,
type: 'warning',
})
return Promise.reject(res.data)
} else if (res.data.code === 403) {
console.log(Vue)
// token过期
Vue.prototype.$message({
type: 'error',
message: res.data.message,
})
router
.replace({
name: 'login',
})
.catch((err) => {
console.log(err)
})
return Promise.reject(res.data)
} else if (res.data.code === 500) {
Vue.prototype.$alert(
'<div style="max-height:500px;overflow:auto">' +
res.data.message +
'</div>',
'错误提示',
{
dangerouslyUseHTMLString: true,
},
)
}
} else {
if (res.status === 400) {
if (res.data) {
const fileReader = new FileReader()
fileReader.readAsText(res.data)
fileReader.onload = function (ev) {
console.log(ev.target.result)
Vue.prototype.$alert(ev.target.result, '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
} else {
Vue.prototype.$alert('请求参数有误', '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
} else if (res.status === 404) {
Vue.prototype.$alert('请求不存在', '提示', {
confirmButtonText: '确定',
callback: () => {},
})
}
}
return res.data
},
// 服务器状态码不是200的情况
(error) => {
Vue.prototype.$alert(error.message, 'Error', {
confirmButtonText: '确定',
callback: () => {},
})
return Promise.reject(error)
},
)
export default axios
src/common/api/cancelToken.js 0 → 100644
import axios from 'axios'
import md5 from 'js-md5'
export default class PendingRequest {
request = new Map()
add(config) {
const requestKey = this.generateReqKey(config)
config.cancelToken =
config.cancelToken ||
new axios.CancelToken((cancel) => {
if (!this.request.has(requestKey)) {
this.request.set(requestKey, cancel)
} else {
cancel(`${requestKey} 取消请求`)
}
})
}
generateReqKey(config) {
let { method, url, params, data } = config
if (data && typeof data === 'string') {
data = JSON.parse(data)
}
const pwd = md5(
JSON.stringify({ method, url, params, data }),
)
return pwd
}
remove(config) {
const requestKey = this.generateReqKey(config)
if (this.request.has(requestKey)) {
this.request.delete(requestKey)
}
}
clear() {
this.request.clear()
}
}
src/common/api/login.js 0 → 100644
import axios from './axios'
export function getLoginState({ userName, password }) {
return axios.post('sys/saasUserLogin/login', null, {
params: { userName, password },
})
}
export function logout() {
return axios.get('sys/saasUserLogin/logout')
}
src/common/api/manage/index.js 0 → 100644
import axios from '../axios'
export function getManageData(
{ ym, status, companyName, user, beginDate, endDate, timeProp },
currentPage,
pageSize,
) {
return axios.post('/sys/domain/list_page', {
ym,
status,
companyName,
user,
beginDate,
endDate,
timeProp,
currentPage,
pageSize,
})
}
export function addManageData(data) {
return axios.post('/sys/domain/add', data)
}
export function updateManageData(data) {
return axios.post('/sys/domain/update', data)
}
export function getDataById(id) {
return axios.get('/sys/domain/get', {
params: { id },
})
}
export function deleteData(ids) {
return axios.get('/sys/domain/delete', {
params: { ids },
})
}
src/common/api/sys/index.js 0 → 100644
import axios from '../axios'
export function updateSysmenu({ id, enable, type }) {
return axios.post('/sysMenu/update', null, {
params: { id, enable, type },
})
}
export function getAllMenusTree() {
return axios.get('sysSaasMenu/getAllMenusTree')
}
export function addMenu(data) {
return axios.post('sysSaasMenu/add', data)
}
export function updateMenu(data) {
return axios.post('sysSaasMenu/update', data)
}
export function deleteMenu(id) {
return axios.post(`sysSaasMenu/delete/${id}`)
}
src/common/components/base/myLayout.vue 0 → 100644
<script>
export default {
name: 'myLayout',
inheritAttrs: false,
props: {
isleftshow: {
default: true,
type: Boolean,
},
},
data() {
return {
isLeft: true,
}
},
methods: {
leftChange() {
this.isLeft = !this.isLeft
},
},
render() {
const {
$scopedSlots,
$attrs,
isLeft,
isleftshow,
$vnode,
} = this
const leftStyle = $attrs?.leftStyle || {}
let { width, ...attrs } = leftStyle
if (!width) width = '200px'
return (
<div class="page_main">
{$scopedSlots.header && (
<div class="page_header">
{$scopedSlots.header()}
</div>
)}
<div
class="layout_wrap"
style={$vnode.data.staticStyle}
>
{$scopedSlots.page_left && (
<div
class="page_left"
style={{
...attrs,
width: isLeft ? width : '1px',
}}
>
{$scopedSlots.page_left()}
</div>
)}
{isleftshow && (
<div class="separation">
<span
class="left_toggle"
title={isLeft ? '点击收起' : '点击展开'}
onClick={this.leftChange}
>
<i
class={
isLeft
? 'el-icon-caret-left'
: 'el-icon-caret-right'
}
></i>
</span>
</div>
)}
{$scopedSlots.page_right && (
<div
class="page_right"
style={$attrs?.rightStyle || {}}
>
{$scopedSlots.page_right()}
</div>
)}
{$scopedSlots.default && $scopedSlots.default()}
</div>
</div>
)
},
}
</script>
<style scoped>
.page_main {
height: calc(100vh - 86px);
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: 0;
overflow: hidden;
position: relative;
}
.page_main .layout_wrap {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.page_main:not(.mobile) {
margin-right: 40px;
}
/* .page_main.home .tool_warper {
display: none;
} */
.page_main.row .layout_wrap {
flex-direction: row;
}
.page_main.wrap .layout_wrap {
background: #fff;
box-sizing: border-box;
border-radius: 10px;
padding-top: 10px;
}
.page_main.wrap .layout_wrap >>> form:nth-of-type(1) {
margin-left: 10px;
}
.page_main.mobile {
height: calc(100vh - 56px);
}
.page_header {
background: #fff;
padding-top: 10px;
margin-bottom: 10px;
}
.page_left {
position: relative;
display: flex;
flex-direction: column;
width: 200px;
height: 100%;
background: var(--background-color);
box-sizing: border-box;
border-radius: 5px 5px 0 0;
overflow: auto;
}
.separation {
display: none;
position: relative;
width: 1px;
}
.row .separation {
display: block;
}
.separation .left_toggle {
position: absolute;
right: -16px;
width: 17px;
height: 24px;
background: #dedede;
z-index: 1000;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.separation .left_toggle::before {
position: absolute;
width: 0px;
height: 0px;
content: '';
top: 10px;
left: -12px;
pointer-events: none;
transform: rotate(45deg);
border-width: 12px;
border-style: solid;
border-color: rgba(0, 0, 0, 0) #dedede rgba(0, 0, 0, 0)
rgba(0, 0, 0, 0);
border-radius: 5px;
}
.separation .left_toggle::after {
position: absolute;
width: 0px;
height: 0px;
top: -10px;
left: -12px;
pointer-events: none;
content: '';
transform: rotate(-45deg);
border-width: 12px;
border-style: solid;
border-color: rgba(0, 0, 0, 0) #dedede rgba(0, 0, 0, 0)
rgba(0, 0, 0, 0);
border-radius: 5px;
}
.separation .left_toggle i {
display: block;
margin-top: 3px;
pointer-events: none;
}
.separation:hover .left_toggle {
display: block;
}
.page_right {
flex: 1;
display: flex;
flex-direction: column;
margin-left: 10px;
box-sizing: border-box;
overflow: hidden;
}
.page_main:not(.drag) .page_right {
background: var(--background-color);
border-radius: 5px 5px 0 0;
padding-top: 10px;
box-sizing: border-box;
}
.page_main .page_right >>> form:nth-of-type(1),
.page_main .page_left >>> form,
.page_main.drag >>> form {
padding-left: 10px;
}
/* .page_right >>> .top {
padding-top: 0;
} */
.page_main.drag .page_right {
/* padding-top: 10px; */
background: transparent;
}
</style>
src/common/components/base/tableView.vue 0 → 100644
<script>
import { mapState } from 'vuex'
const globalIndex = Math.random()
function getKey() {
return Math.random().toString().substr(3, 10)
}
export default {
name: 'my-table',
components: {},
props: {
rowKey: {
type: String,
default: '_id',
},
tableColumns: {
type: Array,
default: () => [],
},
sourceData: {
type: Array,
default: () => [],
},
selectMore: {
type: Boolean,
default: false,
},
// 排序
serverSort: {
type: Boolean,
default: false,
},
treeConfig: {
type: Object,
default: () => {},
},
expandConfig: {
type: Object,
default: () => {},
},
stripe: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
isFooter: {
type: Boolean,
default: false,
},
more: {
type: Boolean,
default: false,
},
pageSize: {
type: Number,
default: 100,
},
serialNumber: {
type: Boolean,
default: true,
},
selection: {
type: Boolean,
default: false,
},
radio: {
type: Boolean,
default: false,
},
footerMethod: {
type: Function,
default: () => {},
},
cellClick: {
type: Function,
default: () => {},
},
footerSpanMethod: {
type: Function,
default: () => {},
},
rowClassName: {
type: Function,
default: () => {},
},
highIds: {
// 高亮显示行
type: Array,
default: () => [],
},
highFirst: {
type: Boolean,
default: false,
},
spanMethod: {
type: Function,
default: () => {},
},
checkboxConfig: {
type: Object,
default: () => {},
},
customRightMenu: {
type: Object,
default: () => ({
code: '',
name: '',
prefixIcon: '',
disabled: false,
}),
},
virtualScroll: {
type: Boolean,
default: true,
},
},
computed: {
...mapState({
keyCode: 'keyCode',
// oldSelection: (state) => state.Order.oldSelection,
}),
tableMenu() {
const obj = {
header: {
options: [
[
{
code: 'hideColumn',
name: '隐藏列',
disabled: false,
},
{
code: 'showAllColumn',
name: '取消所有隐藏列',
disabled: false,
},
],
],
},
body: {
options: [
[
{
code: 'checkAll',
name: '全部选择',
disabled: false,
},
{
code: 'cancelSelection',
name: '取消选择',
disabled: true,
},
{
code: 'copy',
name: '复制',
prefixIcon: 'fa fa-copy',
disabled: false,
},
],
],
},
// visibleMethod: this.visibleMethod
}
if (this.$props.customRightMenu?.name) {
const { code, name, prefixIcon, disabled } =
this.$props.customRightMenu
obj.body.options[0].push({
code,
name,
prefixIcon,
disabled,
})
}
return obj
},
},
watch: {
sourceData(data) {
this.$refs.vxetable.clearCheckboxRow()
setTimeout(() => {
if (data.length > 0 && this.highFirst) {
if (this.selection) {
this.$refs.vxetable.setCheckboxRow(
[data[0]],
true,
)
} else if (this.radio) {
this.$refs.vxetable.setRadioRow(
this.sourceData[0],
)
this.$refs.vxetable.setCurrentRow(data[0])
} else {
this.$refs.vxetable.setCurrentRow(data[0])
}
this.$emit('selectionChange', [data[0]])
this.$emit('currentChange', { row: data[0] })
} else {
this.$emit('selectionChange', [])
this.$emit('currentChange', { row: null })
}
}, 100)
},
tableColumns(newdata, olddata) {
console.log('tableColumns')
if (
newdata &&
olddata &&
olddata.length > 0 &&
newdata !== olddata
) {
this.tableKey = getKey()
setTimeout(() => {
if (
this.sourceData.length > 0 &&
this.highFirst
) {
if (this.selection) {
this.$refs.vxetable.setCheckboxRow(
[this.sourceData[0]],
true,
)
} else if (this.radio) {
this.$refs.vxetable.setRadioRow(
this.sourceData[0],
)
this.$refs.vxetable.setCurrentRow(
this.sourceData[0],
)
} else {
this.$refs.vxetable.setCurrentRow(
this.sourceData[0],
)
}
this.$emit('selectionChange', [
this.sourceData[0],
])
// this.$emit('currentChange', { row: this.sourceData[0] })
}
}, 200)
}
},
// oldSelection(list) {
// setTimeout(() => {
// this.$refs.vxetable.clearCheckboxRow()
// this.$refs.vxetable.setCheckboxRow(list, true)
// this.$emit('selectionChange', list)
// this.$emit('currentChange', { row: null })
// }, 200)
// },
selection() {
this.tableKey = getKey()
},
},
data() {
return {
loading: false,
notSelected: false,
tableData: [],
selections: [],
startIndex: null,
tableKey: getKey(),
}
},
methods: {
reloadData() {
this.$refs.vxetable.reloadData(this.sourceData)
},
toggleRowExpand(obj) {
this.$emit('toggleRowExpand', obj)
},
syncResize() {
if (this.selectMore && this.notSelected) {
return '1'
} else {
return '2'
}
},
setCheckboxRow(rows, checked) {
this.$nextTick(() => {
this.$refs.vxetable.clearCheckboxRow()
this.$refs.vxetable.setCheckboxRow(rows, checked)
this.$emit('selectionChange', rows)
})
},
// 行点击
currentChange(options) {
const { row, $rowIndex } = options
if (this.keyCode) {
if (this.keyCode === 'Shift') {
this.$refs.vxetable.clearCheckboxRow()
let m, l
if ($rowIndex > this.startIndex) {
m = this.startIndex
l = $rowIndex
} else {
m = $rowIndex
l = this.startIndex
}
const arr = []
for (let i = m; i <= l; i++) {
arr.push(this.sourceData[i])
}
this.$refs.vxetable.setCheckboxRow(arr, true)
this.$emit('selectionChange', arr)
} else if (this.keyCode === 'Control') {
this.$refs.vxetable.setCheckboxRow([row], true)
const arr1 =
this.$refs.vxetable.getCheckboxRecords()
this.$emit('selectionChange', arr1)
} else {
this.startIndex = $rowIndex
this.$emit('currentChange', options)
try {
if (this.selection) {
this.$refs.vxetable.clearCheckboxRow()
this.$refs.vxetable.setCheckboxRow(
[row],
true,
)
this.$emit('selectionChange', [options.row])
}
if (this.radio) {
this.$refs.vxetable.clearRadioRow()
this.$refs.vxetable.setRadioRow(row)
this.$emit('selectionChange', [options.row])
}
} catch (error) {
this.$alert(error, '错误提示')
}
}
} else {
this.startIndex = $rowIndex
this.$emit('currentChange', options)
try {
if (this.selection) {
this.$refs.vxetable.clearCheckboxRow()
this.$refs.vxetable.setCheckboxRow([row], true)
this.$emit('selectionChange', [options.row])
}
if (this.radio) {
this.$refs.vxetable.clearRadioRow()
this.$refs.vxetable.setRadioRow(row)
this.$emit('selectionChange', [options.row])
}
} catch (error) {
this.$alert(error, '错误提示')
}
}
},
cellClassName({ row }) {
const item = this.highIds.find(
(item) => item === row.id,
)
if (item) {
return 'green'
}
return ''
},
// 单选
radioChange(options) {
this.$emit('currentChange', options)
this.$emit('selectionChange', [options.row])
},
// 多选
checkboxChange({ records }) {
if (records > 0) {
this.tableMenu.body.options[0][1].disabled = false
} else {
this.tableMenu.body.options[0][1].disabled = true
}
this.$emit('selectionChange', records)
},
// 全选
checkboxAll({ records, checked }) {
this.notSelected = checked
if (records > 0) {
this.tableMenu.body.options[0][1].disabled = false
} else {
this.tableMenu.body.options[0][1].disabled = true
}
if (checked) {
this.$emit('selectAll', false)
}
this.$emit('selectionChange', records)
},
// 复制
copyText(text) {
const input = document.createElement('input')
// input.style.display = 'none'
document.body.appendChild(input)
input.value = text
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
document.body.removeChild(input)
},
selectAll(e) {
e && e.stopPropagation()
this.$emit('selectAll', true)
},
// 右键菜单
menuClick({ menu, row, column, $event }) {
switch (menu.code) {
case 'copy': // 复制
if (row && column) {
let text = $event.target.innerHTML
if (/<.+?>/g.test(text)) {
text = row[column.property]
}
if (!text) {
text = 'null'
}
this.copyText(text)
}
break
case 'checkAll': // 全选
this.$refs.vxetable.setAllCheckboxRow(true)
this.tableMenu.body.options[0][0].disabled = true
this.tableMenu.body.options[0][1].disabled = false
// this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break
case 'cancelSelection': // 取消全选
this.$refs.vxetable.setAllCheckboxRow(false)
this.tableMenu.body.options[0][0].disabled = false
this.tableMenu.body.options[0][1].disabled = true
// this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break
case 'hideColumn': // 隐藏列
if (!column.property) {
return this.$message.warning(
'当前列不支持此操作',
)
}
this.$emit('columnChange', {
column: column.property,
key: 'show',
value: false,
})
// this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break
case 'showAllColumn': // 显示所有列
this.$emit('columnChange', {
column: 'all',
key: 'show',
value: true,
})
// this.$set(this.tableMenu.body.options[0][0],'disabled',true)
break
}
if (this.$props.customRightMenu?.func) {
if (
this.$props.customRightMenu.code === menu.code
) {
this.$props.customRightMenu.func(
row,
column,
$event,
)
}
}
},
// 排序
sortChange({ property, order }) {
this.$emit('sortChange', { property, order })
},
// 手动设置排序
setSort({ order, prop }) {
this.$refs.vxetable.sort(prop, order)
},
showToggle() {
this.loading = !this.loading
},
getIndex(index) {
return globalIndex + index
},
// 列宽拖动
resizableChange({ column }) {
this.$emit('columnChange', {
column: column.property,
key: 'width',
value: column.resizeWidth,
})
},
renderColumn(item, index, classname) {
const slots = {
default: ({ row, $rowIndex }) => {
if (item.type) return null
if (item.render) {
return item.render(row, item.key, $rowIndex)
}
return row[item.key]
},
}
if (item.content) {
slots.content = ({ row }) =>
item.content ? item.content(row, item.key) : null
}
if (item.title) {
slots.header = () =>
item.title ? item.title(item.label) : item.label
}
return (
<vxe-table-column
type={item.type}
title={item.label}
field={item.key}
tree-node={item.treeNode}
fixed={item.fixed}
header-class-name={classname}
key={this.getIndex(index)}
width={item.width}
min-width={item.minWidth}
header-align="center"
sortable={item.sortable}
align={item.align || 'center'}
scopedSlots={slots}
></vxe-table-column>
)
},
},
render() {
const isShow = this.tableColumns.length > 0
const checkboxconfig = {
reserve: true,
highlight: true,
}
if (this.checkboxConfig) {
for (const key in this.checkboxConfig) {
checkboxconfig[key] = this.checkboxConfig[key]
}
}
return (
<vxe-table
ref="vxetable"
border
size="mini"
class="my-table"
resizable
sort-config={{
trigger: 'cell',
remote: this.serverSort,
orders: ['desc', 'asc', 'null'],
}}
menu-config={this.tableMenu}
checkbox-config={checkboxconfig}
data={this.sourceData}
auto-resize
sync-resize={this.syncResize()}
highlight-current-row
highlight-hover-row
show-header={this.showHeader}
onCell-click={this.cellClick}
show-header-overflow
show-overflow
height="100%"
scroll-x={{ gt: 30 }}
scroll-y={{ gt: 30, enabled: this.virtualScroll }}
row-id={this.rowKey}
empty-text="暂无数据"
loading={this.loading}
cell-class-name={this.cellClassName}
row-class-name={this.rowClassName}
onCurrent-change={this.currentChange}
onCheckbox-change={this.checkboxChange}
onCheckbox-all={this.checkboxAll}
onResizable-change={this.resizableChange}
onMenu-click={this.menuClick}
onToggle-row-expand={this.toggleRowExpand}
expand-config={this.expandConfig}
span-method={this.spanMethod}
onRadio-change={this.radioChange}
onSort-change={this.sortChange}
show-footer={this.isFooter}
footer-method={this.footerMethod}
footer-span-method={this.footerSpanMethod}
tree-config={this.treeConfig}
stripe={this.stripe}
{...{ props: this.$attrs, on: this.$listeners }}
key={this.tableKey}
>
{isShow && this.selection && (
<vxe-table-column
fixed="left"
field="selection"
type="checkbox"
align="center"
width={
this.selectMore && this.notSelected ? 120 : 40
}
// width="120"
scopedSlots={{
title: ({ checked }) =>
this.selectMore && checked ? (
<el-button
slot="header"
type="text"
size="default"
onClick={this.selectAll}
style={{
color: this.more ? 'red' : '#4168FF',
}}
>
{this.more
? `${this.pageSize}+ selected`
: `select ${this.pageSize}+`}
</el-button>
) : null,
}}
></vxe-table-column>
)}
{isShow && this.radio && (
<vxe-table-column
fixed="left"
type="radio"
title=""
field="radio"
align="center"
width="40"
></vxe-table-column>
)}
{isShow && this.serialNumber && (
<vxe-table-column
type="seq"
title="序号"
field="num"
scopedSlots={{
default: this.$scopedSlots.serialNumberRender,
}}
align="center"
width="60"
></vxe-table-column>
)}
{this.tableColumns.map((item, index) => {
if (item.show === false) {
return null
}
if (item.subTitle) {
return (
<vxe-table-colgroup
header-align="center"
header-class-name="tablecolgroup"
title={item.label}
>
{item.subTitle.map((subitem, index1) => {
return this.renderColumn(
subitem,
index1,
'tablecolgroup',
)
})}
</vxe-table-colgroup>
)
} else {
return this.renderColumn(item, index)
}
})}
</vxe-table>
)
},
}
</script>
<style scoped>
.scroller {
height: 100%;
}
.my-table {
vertical-align: middle;
}
/* .my-table >>> .vxe-body--column,
.my-table >>> .vxe-header--column.col--ellipsis,
.my-table >>> .vxe-body--column.col--ellipsis,
.my-table >>> .vxe-footer--column.col--ellipsis {
height: 30px;
} */
.my-table >>> .vxe-checkbox--label {
padding-left: 0;
}
.my-table >>> .vxe-header--column.tablecolgroup,
.my-table
>>> .vxe-header--column.col--ellipsis.tablecolgroup {
height: 22px !important;
}
.my-table >>> .vxe-cell {
/* max-height: 30px !important; */
padding-left: 5px;
padding-right: 5px;
}
.my-table >>> .green {
background: green;
color: #fff;
}
</style>
src/common/components/element-ui.js 0 → 100644
import 'element-ui/lib/theme-chalk/index.css'
import {
Button,
Table,
TableColumn,
Dialog,
Form,
FormItem,
Input,
Message,
MessageBox,
Pagination,
Loading,
DatePicker,
Switch,
Select,
Option,
Cascader,
Radio,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Tag,
Checkbox,
} from 'element-ui'
const components = [
Button,
Table,
TableColumn,
Dialog,
Form,
FormItem,
Input,
DatePicker,
Pagination,
Switch,
Select,
Option,
Cascader,
Radio,
Menu,
MenuItem,
Submenu,
MenuItemGroup,
Tag,
Checkbox,
]
export default {
install(Vue) {
components.forEach((c) => {
Vue.component(c.name, c)
})
Vue.use(Loading)
Vue.prototype.$message = (message) =>
typeof message === 'string'
? Message({
duration: 2500,
message,
})
: Message({
duration: 2500,
...message,
})
Vue.prototype.$message.success = (message) =>
typeof message === 'string'
? Message.success({ duration: 2500, message })
: Message.success({ duration: 2500, ...message })
Vue.prototype.$message.warning = (message) =>
typeof message === 'string'
? Message.warning({ duration: 2500, message })
: Message.warning({ duration: 2500, ...message })
Vue.prototype.$message.info = (message) =>
typeof message === 'string'
? Message.info({ duration: 2500, message })
: Message.info({ duration: 2500, ...message })
Vue.prototype.$message.error = (message) =>
typeof message === 'string'
? Message.error({ duration: 2500, message })
: Message.error({ duration: 2500, ...message })
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
},
}
src/common/components/vxeTable.js 0 → 100644
import 'xe-utils'
import 'vxe-table/lib/style.css'
import {
Table,
Column,
Header,
Footer,
Filter,
Edit,
Menu,
Export,
Keyboard,
Validator,
Icon,
Grid,
Toolbar,
Pager,
Checkbox,
Radio,
Input,
Button,
Modal,
Tooltip,
Form,
Select,
Switch,
List,
Colgroup,
} from 'vxe-table'
const vxes = [
Column,
Header,
Footer,
Filter,
Edit,
Menu,
Export,
Keyboard,
Validator,
Icon,
Grid,
Toolbar,
Pager,
Checkbox,
Radio,
Input,
Button,
Modal,
Tooltip,
Form,
Select,
Switch,
List,
Colgroup,
Table,
]
export default {
install(Vue) {
vxes.forEach((v) => {
Vue.use(v)
})
},
}
// 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print
// Vue.prototype.$XSaveFile = VXETable.saveFile
// Vue.prototype.$XReadFile = VXETable.readFile
src/common/style/index.scss 0 → 100644
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.15);
transition: color 0.2s ease;
}
// loading
.el-loading-mask.is-fullscreen {
background-color: rgba(0, 0, 0, 0.4);
}
.el-loading-spinner {
.circular {
display: none;
}
&::after {
content: '';
display: block;
width: 100px;
height: 100px;
background-image: url('~@/assets/loading.gif');
background-size: 100% 100%;
margin: 0 auto;
}
}
.el-button--primary {
background-color: #1565C0;
border-color: #1565C0;
}
.card {
padding: 10px;
background-color: #fff;
border-radius: 8px;
}
.el-dialog__footer {
text-align: center;
padding: 10px;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px;
}
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js
......@@ -2,11 +2,37 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from '@/common/components/element-ui.js'
import vxeTable from '@/common/components/vxeTable.js'
import './common/style/index.scss'
import { getToken } from '@/utils/auth'
Vue.config.productionTip = false
Vue.use(element)
Vue.use(vxeTable)
router.afterEach((to, from) => {
if (to.path === '/login') return
store.commit('tags/add', {
name: to.name,
path: to.fullPath,
title: to.meta?.title || to.name,
})
store.commit('tags/setActive', to.name)
})
router.beforeEach((to, form, next) => {
const auth = getToken()
if (!auth && to.path !== '/login') {
next({ path: '/login' })
} else {
next()
}
})
new Vue({
router,
store,
render: h => h(App)
render: (h) => h(App),
}).$mount('#app')
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import HomeView from '../views/home/HomeView.vue'
import SaasManage from '@/views/saasManage/indexPage.vue'
import LoginPage from '@/views/LoginPage.vue'
import menuPage from '@/views/menu.vue'
export const DEFAULT_DASHBOARD = 'saasManage'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'login',
component: LoginPage,
},
{
path: '/',
name: 'home',
component: HomeView
component: HomeView,
redirect: '/saas/manage',
children: [
{
path: '/saas/manage',
name: 'saasManage',
meta: { title: 'SaaS管理页面' },
component: SaasManage,
},
{
path: '/saas/menu',
component: menuPage,
name: 'saasMenu',
meta: { title: '菜单管理' },
},
],
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
routes,
})
export default router
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tags from './tags'
// import { getLoginState } from '@/common/api/login'
import { getUser } from '@/utils/auth'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
keyCode: null,
userInfo: getUser(),
},
getters: {
},
getters: {},
mutations: {
setKeyCode(state, msg) {
state.keyCode = msg
},
setUserInfo(state, profile) {
console.log(profile)
state.userInfo = profile
},
},
actions: {
setKeyCode({ commit }, msg) {
commit('setKeyCode', msg)
},
},
modules: {
}
tags,
},
})
src/store/tags.js 0 → 100644
const lastSavedTags = localStorage.getItem('tags') ? JSON.parse(localStorage.getItem('tags')) || [] : []
let tagId = lastSavedTags.reduce(
(a, c) => Math.max(a, c.id),
0,
)
console.log(lastSavedTags)
/**
* @type {import('vuex').StoreOptions}
*/
const tags = {
namespaced: true,
state: {
tags: lastSavedTags || [],
activeTag: undefined,
},
getters: {
currentTag(state) {
return state.tags.find(
(e) => e.name === state.activeTag,
)
},
},
mutations: {
add(state, tag) {
const item = {
...tag,
id: ++tagId,
}
const index = state.tags.findIndex(
(t) => t.name === tag.name,
)
if (index === -1) {
state.tags.push(item)
}
localStorage.setItem(
'tags',
JSON.stringify(state.tags),
)
return item.id
},
setActive(state, name) {
if (!state.tags.some((e) => e.name === name)) return
state.activeTag = name
},
remove(state, name) {
const index = state.tags.findIndex(
(e) => e.name === name,
)
if (index === -1) return
state.tags.splice(index, 1)
// 如果关闭的是当前的 tag，就转到前一个标签
if (state.activeTag === name) {
let prevIndex = index - 1
if (prevIndex < 0) prevIndex = 0
if (state.tags.length === 0) {
state.activeTag = undefined
} else {
state.activeTag = state.tags[prevIndex].name
}
}
localStorage.setItem(
'tags',
JSON.stringify(state.tags),
)
},
removeAllTags(state) {
state.tags = []
},
},
}
export default tags
src/utils/auth.js 0 → 100644
export function setToken(token) {
localStorage.setItem('token', token)
}
export function getToken() {
return localStorage.getItem('token')
}
export function setUser(user) {
localStorage.setItem('user', JSON.stringify(user))
}
export function getUser() {
try {
return JSON.parse(localStorage.getItem('user'))
} catch {
return null
}
}
src/views/AboutView.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/HomeView.vue deleted 100644 → 0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
src/views/LoginPage.vue 0 → 100644
<template>
<div class="login-page">
<div class="system-name">SAAS 管理平台</div>
<div class="login-view">
<h2>登录</h2>
<el-form ref="loginForm" :model="loginForm" class="login-form">
<el-form-item
prop="userName"
:rules="[
{ required: true, message: '请输入用户名' },
]"
>
<el-input
prefix-icon="el-icon-user"
v-model="loginForm.userName"
placeholder="User Name"
clearable
></el-input>
</el-form-item>
<el-form-item
prop="password"
:rules="[
{ required: true, message: '请输入密码' },
]"
>
<el-input
:type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock"
v-model="loginForm.password"
placeholder="Password"
@keyup.enter.native="login"
clearable
>
<i
@click="showPwd = !showPwd"
slot="suffix"
:class="{
eyes: true,
open: !showPwd,
close: showPwd,
}"
></i>
</el-input>
</el-form-item>
<el-form-item class="operate">
<el-button type="primary" @click="login"
>登录</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { getLoginState } from '@/common/api/login'
import { setToken, setUser } from '@/utils/auth'
import { mapMutations } from 'vuex'
export default {
name: 'LoginPage',
data() {
return {
loginForm: {
userName: '',
password: '',
},
showPwd: false,
}
},
mounted() {
// this.loginForm = {}
},
methods: {
...mapMutations(['setUserInfo']),
async login() {
try {
await this.$refs.loginForm.validate()
} catch {
return
}
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
const res = await getLoginState(this.loginForm)
if (res.code === 200) {
setToken(res.data.token)
setUser(res.data.saasUser)
this.setUserInfo(res.data.saasUser)
this.$router.push('/saas/manage')
}
} catch (e) {
console.error(e)
} finally {
l.close()
}
},
},
}
</script>
<style lang="scss" scoped>
.login-page {
height: 100%;
background: url(../assets/background.png) center / cover
no-repeat;
.background-image {
width: 100%;
height: 100%;
}
}
.system-name {
position: absolute;
color: #fff;
top: 10%;
left: 5%;
font-size: 50px;
font-weight: bold;
font-family: fangsong;
font-style: italic;
}
.login-view {
padding: 18px;
background: hsla(0, 0%, 100%, 0.4);
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 400px;
border-radius: 6px;
transform: translate(-50%, -50%);
box-sizing: border-box;
background-position: 100% 0, 50%;
background-repeat: no-repeat;
background-size: 528px auto, contain;
}
h2 {
text-align: center;
}
.operate {
text-align: center;
}
.login-form {
padding: 20px;
}
.eyes {
display: inline-block;
height: 14px;
width: 18px;
margin-top: 11px;
margin-right: 5px;
cursor: pointer;
}
.eyes.open {
background: url('../assets/login/eyes-open.png') no-repeat
center / cover;
}
.eyes.close {
background: url('../assets/login/eyes-closed.png')
no-repeat center / cover;
}
.el-button--primary {
padding-right: 100px;
padding-left: 100px;
}
</style>
src/views/home/HomeHeader.vue 0 → 100644
<template>
<div class="home-header">
<page-tags />
<div class="user-area">
<span class="user-name">{{ userInfo && userInfo.userName }}</span>
<el-button type="text" @click="logout"
>退出登录</el-button
>
</div>
</div>
</template>
<script>
import pageTags from './pageTags.vue'
import { logout } from '@/common/api/login'
import { setToken, setUser } from '@/utils/auth'
import { mapState } from 'vuex'
export default {
components: { pageTags },
name: 'HomeHeader',
computed: {
...mapState(['userInfo']),
},
methods: {
async logout() {
try {
await logout()
} catch (e) {
console.error(e)
}
setUser(null)
setToken('')
localStorage.setItem('tags', null)
this.$store.commit('tags/removeAllTags')
this.$router.push('/login')
},
},
}
</script>
<style lang="scss" scoped>
.home-header {
display: flex;
overflow: hidden;
}
.page-tags {
flex: 1;
overflow: auto hidden;
}
.user-area {
display: flex;
align-items: center;
flex-shrink: 0;
padding-right: 16px;
.user-name {
margin-right: 10px;
}
}
</style>
src/views/home/HomeView.vue 0 → 100644
<template>
<div class="home">
<nav-menu></nav-menu>
<div class="right">
<home-header />
<div class="content">
<keep-alive :include="cacheView">
<router-view :key="$route.name" />
</keep-alive>
</div>
</div>
</div>
</template>
<script>
import NavMenu from './navMenu.vue'
import HomeHeader from './HomeHeader.vue'
import { mapState } from 'vuex'
// @ is an alias to /src
export default {
name: 'HomeView',
components: {
NavMenu,
HomeHeader,
},
computed: {
...mapState('tags', ['tags']),
cacheView() {
const arr = []
return arr.concat(this.tags.map((item) => item.name))
},
},
data() {
return {}
},
}
</script>
<style lang="scss" scoped>
.home {
height: 100%;
display: flex;
overflow: hidden;
&::v-deep {
.el-menu {
height: 100%;
}
}
}
.nav-menu {
height: 100%;
width: 240px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.home-header {
height: 50px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
z-index: 100;
}
.content {
flex: 1;
padding: 10px 10px 0px 10px;
background-color: #f1f1f1;
}
</style>
src/views/home/navMenu.vue 0 → 100644
<template>
<div class="nav-menu">
<div class="header-logo">
<span>SAAS 管理平台</span>
</div>
<el-menu
ref="menu"
router
:default-active="this.$route.path"
class="el-menu-vertical-demo"
text-color="#fff"
background-color="#1565C0"
@click.native="onClickMenus"
active-text-color="#ffd04b"
>
<div
class="menu-list"
v-for="nav in menuList"
:key="nav.id"
>
<el-menu-item
v-if="nav.children.length === 0"
:index="nav.index"
>
<template slot="title">
<i :class="nav.icon"></i>
<span class="label">{{ nav.label }}</span>
</template>
</el-menu-item>
<el-submenu v-else :index="nav.index">
<template slot="title">
<i :class="nav.icon"></i>
<span class="label">{{ nav.label }}</span>
</template>
<el-menu-item
:index="subs.index"
v-for="subs in nav.children"
:key="subs.id"
>
<template slot="title">
<i :class="subs.icon"></i>
<span class="label">{{
subs.label
}}</span></template
>
</el-menu-item>
</el-submenu>
</div>
</el-menu>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'navMenu',
data() {
return {
menuList: [
{
id: 1,
path: '',
label: 'SaaS管理页面',
icon: 'el-icon-menu',
index: '/saas/manage',
children: [],
},
{
id: 2,
path: '',
label: '系统管理',
icon: 'el-icon-setting',
index: '/system',
children: [
{
id: 3,
path: '',
label: '菜单管理',
icon: '',
index: '/saas/menu',
children: [],
},
],
},
],
}
},
computed: {
...mapGetters('tags', ['currentTag']),
},
watch: {
currentTag(v) {
if (!v) return
const parent = this.menuList.find((e) => {
if (e.path === v.path) return true
if (e.children) {
return e.children.some((ee) => ee.path === v.path)
}
return false
})
if (parent) {
this.$refs.menu.open(parent.path)
}
},
},
methods: {
onClickMenus() {},
},
}
</script>
<style lang="scss" scoped>
.nav-menu {
&::v-deep {
.el-submenu__title i {
color: #fff;
}
}
i {
color: #fff;
}
}
.header-logo {
font-size: 20px;
color: #fff;
font-weight: bold;
padding: 12px 20px;
font-style: italic;
border-right: 1px solid #e6e6e6;
background-color: #1565C0;
}
.label {
font-size: 16px;
}
</style>
src/views/home/pageTags.vue 0 → 100644
<template>
<div class="page-tags">
<div
v-for="t in tags"
:key="t.id"
class="page-tag"
:class="{ active: activeTag === t.name }"
@click="switchTag(t)"
>
<span class="page-tag-title">{{ t.title }}</span>
<span
v-if="t.name !== DEFAULT_DASHBOARD"
class="page-tag-close"
@click.stop="closeTag(t)"
><i class="el-icon-close"></i
></span>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { DEFAULT_DASHBOARD } from '@/router'
export default {
name: 'pageTags',
data() {
return {
DEFAULT_DASHBOARD,
}
},
computed: {
...mapState('tags', ['tags', 'activeTag']),
...mapGetters('tags', ['currentTag']),
},
methods: {
switchTag(t) {
this.$store.commit('tags/setActive', t.name)
this.$router.push(t.path)
},
closeTag(t) {
this.$store.commit('tags/remove', t.name)
if (this.currentTag) {
// 切换到前一个标签页
if (this.$route.fullPath !== this.currentTag.path) {
this.$router.push({
path: this.currentTag.path,
})
}
}
},
},
}
</script>
<style lang="scss" scoped>
.page-tags {
display: flex;
padding-left: 10px;
align-items: center;
}
.page-tag {
position: relative;
display: flex;
align-items: center;
padding: 0 8px;
line-height: 30px;
line-height: 30px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: #f5f5f5;
}
&:not(:last-child) {
&:after {
content: '';
position: absolute;
right: 0;
top: 15px;
bottom: 15px;
border-right: solid 1px #ddd;
}
}
&.active {
background-color: #1565C0;
color: #fff;
border: 1px solid #1565C0;
}
}
.page-tag:not(:last-child) {
margin-right: 6px;
}
.page-tag-close {
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
background-color: #fff;
color: #409eff;
}
}
.page-tag-title {
margin-right: 6px;
}
</style>
src/views/menu.vue 0 → 100644
<template>
<div class="system-menu card">
<div class="header">
<el-form
size="mini"
:inline="true"
label-width="80px"
>
<el-form-item label>
<el-button
type="primary"
@click="showDialog({ id: 0 }, 2)"
>
新增
</el-button>
</el-form-item>
</el-form>
</div>
<div class="table-wrap" v-loading="loading">
<table-view
:tableColumns="tableColumns"
rowKey="id"
:serialNumber="false"
:treeConfig="{
children: 'children',
reserve: true,
}"
:sourceData="sourceData"
></table-view>
</div>
<el-dialog
:title="isEdit ? '修改' : '新增'"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:before-close="beforeClose"
width="620px"
>
<el-form
size="mini"
:inline="true"
label-width="100px"
:rules="rules"
ref="editForm"
:model="editForm"
>
<el-form-item label="菜单名称" prop="name" required>
<el-input
style="width: 164px"
v-model="editForm.name"
></el-input>
</el-form-item>
<el-form-item label="父级菜单">
<el-cascader
:show-all-levels="false"
v-model="editForm.pid"
:disabled="editForm.type === 1"
style="width: 164px"
:options="showMenu"
:props="{
checkStrictly: true,
label: 'name',
value: 'id',
emitPath: false,
}"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="类型" prop="type" required>
<el-select
style="width: 164px"
v-model="editForm.type"
placeholder="请选择"
>
<el-option label="菜单" :value="0"></el-option>
<el-option label="按钮" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="路径名称"
:required="editForm.pid !== 0"
prop="path"
>
<el-input
style="width: 164px"
:disabled="isEdit"
v-model="editForm.path"
></el-input>
</el-form-item>
<el-form-item label="路径地址">
<el-input
style="width: 164px"
v-model="editForm.route"
></el-input>
</el-form-item>
<el-form-item label="接口路径">
<el-input
style="width: 164px"
v-model="editForm.url"
></el-input>
</el-form-item>
<el-form-item label="等级" prop="level">
<el-input
style="width: 164px"
v-model="editForm.level"
/>
</el-form-item>
<el-form-item label="启用状态">
<div style="width: 164px; display: inline-block">
<el-radio
v-model="editForm.enable"
:label="true"
>启用</el-radio
>
<el-radio
v-model="editForm.enable"
:label="false"
>禁用</el-radio
>
</div>
</el-form-item>
<el-form-item label=" 排序">
<el-input
style="width: 164px"
v-model="editForm.sortNo"
placeholder
></el-input>
</el-form-item>
<el-form-item label="标题">
<el-input
style="width: 164px"
v-model="editForm.title"
></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input
style="width: 164px"
v-model="editForm.describe"
></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button size="small" @click="clone"
>取 消</el-button
>
<el-button
size="small"
type="primary"
@click="submit"
>保 存</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import tableView from '@/common/components/base/tableView.vue'
// import myLayout from '@/common/components/base/myLayout.vue'
import {
updateSysmenu,
getAllMenusTree,
updateMenu,
addMenu,
deleteMenu,
} from '../common/api/sys'
export default {
name: 'saasMenu',
components: {
tableView,
// myLayout,
},
data() {
return {
loading: false,
sourceData: [],
dialogVisible: false,
editForm: {
name: '',
pid: '0',
type: '',
path: '',
url: '',
title: '',
describe: '',
enable: true,
},
rules: {
type: [
{
required: true,
message: ' ',
trigger: 'change',
},
],
},
isEdit: false,
}
},
computed: {
tableColumns() {
return [
{
label: '菜单名称',
key: 'name',
width: '',
align: 'left',
treeNode: true,
},
{
label: '类型',
key: 'type',
width: '',
render: (item) =>
item.type === 1 ? '按钮' : '菜单',
},
{ label: '路径名称', key: 'path', width: '' },
{ label: '路径地址', key: 'route', width: '' },
{ label: '接口路径', key: 'url', width: '' },
{ label: '排序', key: 'sortNo', width: '' },
{
label: '启动状态',
key: 'url',
width: '',
render: (item) => (
<el-checkbox
value={item.enable}
onChange={(v) => this.enableChange(item, v)}
label=""
></el-checkbox>
),
},
{ label: '标题', key: 'title', width: '' },
{ label: '备注', key: 'describe', width: '' },
{
label: '操作',
key: '',
width: '',
align: 'left',
render: (item) => (
<div>
<el-button
size="mini"
type="text"
onClick={() => this.showDialog(item, 1)}
>
修改
</el-button>
<el-button
size="mini"
type="text"
onClick={() => this.remove(item)}
>
删除
</el-button>
{item.type !== 1 && (
<el-button
size="mini"
type="text"
onClick={() => this.showDialog(item, 2)}
>
新增下级
</el-button>
)}
</div>
),
},
]
},
showMenu() {
const data = JSON.parse(
JSON.stringify(this.sourceData),
)
const arr = []
for (const iterator of data) {
const children = []
for (const iterato of iterator.children) {
if (iterato.type === 0) {
children.push(iterato)
}
delete iterato.children
}
iterator.children = children
arr.push(iterator)
}
return [
{
id: 0,
name: '顶级菜单',
children: arr,
describe: '',
enable: true,
path: '',
pid: '',
route: '',
sortNo: 0,
title: '',
type: 0,
url: '',
},
]
},
},
mounted() {
this.getlist()
},
methods: {
async enableChange(item, v) {
try {
const res = await updateSysmenu({
id: item.id,
enable: v,
type: item.type,
})
if (res.code === 200) {
this.$message.success(res.message)
item.enable = v
}
} catch (e) {
console.error(e)
}
},
async getlist(id, cb) {
this.loading = true
try {
const res = await getAllMenusTree()
if (res.code === 200) {
if (cb) {
cb(res.data)
} else {
this.sourceData = res.data
}
}
} catch (e) {
console.error(e)
} finally {
this.loading = false
}
},
resetForm() {
for (const key in this.editForm) {
if (key === 'enable') continue
this.editForm[key] = ''
}
},
showDialog(item, t) {
if (t === 2) {
this.editForm.pid = item.id
this.isEdit = false
} else {
this.isEdit = true
this.editForm = { ...item, enable: true }
}
this.$nextTick(() => {
this.$refs.editForm &&
this.$refs.editForm.clearValidate()
})
this.dialogVisible = true
},
async submit() {
try {
if (!(await this.$refs.editForm.validate())) return
} catch {
return
}
const api = this.isEdit ? updateMenu : addMenu
delete this.editForm.children
try {
const res = await api({ ...this.editForm })
if (res.code === 200) {
this.$message.success(res.message)
this.getlist()
}
} catch (e) {
console.error(e)
} finally {
this.resetForm()
this.dialogVisible = false
}
},
async remove(item) {
try {
await this.$confirm('确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
} catch {
return
}
try {
const res = await deleteMenu(item.id)
if (res.code === 200) {
this.$message.success(res.message)
this.getlist()
}
} catch (e) {
console.error(e)
}
},
clone() {
this.resetForm()
this.dialogVisible = false
},
beforeClose(clone) {
this.resetForm()
clone()
},
},
}
</script>
<style lang="scss" scoped>
.system-menu {
height: 100%;
display: flex;
flex-direction: column;
padding: 0 20px;
padding-top: 10px;
}
.table-wrap {
flex: 1;
}
</style>
src/views/saasManage/indexPage.vue 0 → 100644
<template>
<div class="saas-manage card">
<div class="search">
<el-form
:model="searchForm"
size="small"
:inline="true"
>
<el-form-item label="">
<el-select
style="width: 80px"
v-model="searchForm.timeProp"
placeholder="请选择"
>
<el-option
label="创建时间"
value="createTime"
></el-option>
<el-option
label="过期时间"
value=""
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
style="width: 360px"
v-model="period"
type="datetimerange"
value-format="yyyy-MM-dd HH:ss:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="域名">
<el-input
size="small"
style="width: 160px"
v-model.trim="searchForm.domain"
placeholder="请输入域名"
></el-input>
</el-form-item>
<el-form-item label="状态">
<el-input
v-model="searchForm.status"
style="width: 160px"
size="small"
placeholder="请选择状态"
></el-input>
</el-form-item>
<el-form-item label="公司名称">
<el-input
size="small"
style="width: 160px"
v-model="searchForm.companyName"
placeholder="请输入公司名称"
></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-input
size="small"
style="width: 160px"
v-model="searchForm.headName"
placeholder="请输入负责人"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="search"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="success"
size="small"
icon="el-icon-plus"
@click="addData"
>开通erp</el-button
>
</el-form-item>
<el-form-item>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="deleteData"
>删除</el-button
>
</el-form-item>
</el-form>
</div>
<div class="table-wrap" v-loading="loading">
<el-table
ref="table"
:data="manageData"
border
width="100%"
height="100%"
:highlight-current-row="true"
@selection-change="handleSelectionChange"
@row-click="rowClick"
header-row-class-name="header-row-class-name"
>
<el-table-column
type="selection"
width="55"
header-align="center"
align="center"
>
</el-table-column>
<el-table-column
label="序号"
type="index"
width="50"
align="center"
header-align="center"
>
</el-table-column>
<el-table-column
label="域名"
prop="domain"
min-width="180"
header-align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="公司名称"
prop="companyName"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="负责人"
prop="headName"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="联系电话"
prop="contactPhone"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="套餐"
prop="packages"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="资费"
prop="charges"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="数据库地址"
prop="dataHost"
header-align="center"
align="left"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="数据库名称"
prop="databaseName"
header-align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="状态"
header-align="center"
align="center"
width="120"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
disabled
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="创建时间"
prop="createTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="过期时间"
prop="expireTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="操作"
header-align="center"
align="center"
width="55"
fixed="right"
>
<template slot-scope="scope">
<i
class="el-icon-edit"
style="cursor: pointer"
@click="handleEdit(scope.row)"
></i>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange"
>
</el-pagination>
</div>
<el-dialog
:title="editId ? '编辑' : '新增'"
:visible.sync="addVisible"
:close-on-click-modal="false"
width="700px"
>
<el-form
:model="editForm"
size="small"
ref="form"
:inline="true"
label-width="110px"
label-position="right"
>
<el-form-item
label="域名"
prop="domain"
:rules="[
{ required: true, message: '请输入域名' },
]"
>
<el-input
style="width: 200px"
v-model.trim="editForm.domain"
size="small"
:disabled="!!editId"
clearable
@change="onChange"
placeholder="请输入域名"
>
<template slot="append">.jomalls.com</template>
</el-input>
</el-form-item>
<el-form-item
label="状态"
prop="status"
:rules="[
{ required: true, message: '请选择状态' },
]"
>
<el-select
style="width: 200px"
v-model="editForm.status"
clearable
placeholder="请选择状态"
>
<el-option
label="启用"
:value="true"
></el-option>
<el-option
label="禁用"
:value="false"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item
label="二级域名"
prop="customDomain"
:rules="[
{ required: true, message: '请输入二级域名' },
]"
>
<el-input
style="width: 200px"
v-model.trim="editForm.customDomain"
placeholder="请输入二级域名"
size="small"
clearable
></el-input>
</el-form-item> -->
<!-- <el-form-item
label="Api Name"
prop="apiName"
:rules="[
{ required: true, message: '请输入Api Name' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.apiName"
placeholder="请输入Api Name"
size="small"
disabled
clearable
></el-input>
</el-form-item> -->
<el-form-item
label="数据库类型"
prop="databaseType"
:rules="[
{ required: true, message: '请输入数据库类型' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库类型"
v-model.trim="editForm.databaseType"
clearable
/>
</el-form-item>
<el-form-item
label="数据源地址"
prop="dataHost"
:rules="[
{ required: true, message: '请输入数据源地址' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据源地址"
v-model="editForm.dataHost"
clearable
/>
</el-form-item>
<el-form-item
label="数据源端口"
prop="dataPort"
:rules="[
{ required: true, message: '请输入数据源端口' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据源端口"
v-model.trim="editForm.dataPort"
clearable
/>
</el-form-item>
<el-form-item
label="数据库名称"
>
<el-input
style="width: 200px"
:value="`saas_${editForm.databaseName || ''}`"
size="small"
disabled
placeholder="请输入数据库名称"
>
</el-input>
</el-form-item>
<el-form-item
label="数据库用户名"
prop="databaseUserName"
:rules="[
{
required: true,
message: '请输入数据库用户名',
},
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库用户名"
v-model="editForm.databaseUserName"
clearable
/>
</el-form-item>
<el-form-item
label="数据库密码"
prop="databasePwd"
:rules="[
{ required: true, message: '请输入数据库密码' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库密码"
v-model="editForm.databasePwd"
clearable
/>
</el-form-item>
<el-form-item
label="过期时间"
prop="expireTime"
:rules="[
{ required: true, message: '请选择过期时间' },
]"
>
<el-date-picker
style="width: 200px"
v-model="editForm.expireTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="公司名称"
prop="companyName"
:rules="[
{ required: true, message: '请输入公司名称' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.companyName"
size="small"
placeholder="请输入公司名称"
/>
</el-form-item>
<el-form-item
label="负责人"
prop="headName"
:rules="[
{ required: true, message: '请输入负责人' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.headName"
size="small"
placeholder="负责人"
/>
</el-form-item>
<el-form-item
label="联系电话"
prop="contactPhone"
:rules="[
{ required: true, message: '请输入联系电话' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码格式', trigger: 'blur' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.contactPhone"
size="small"
placeholder="请输入联系电话"
/>
</el-form-item>
<el-form-item
label="套餐"
prop="packages"
:rules="[
{ required: true, message: '请输入套餐' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.packages"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item
label="资费"
prop="charges"
:rules="[
{ required: true, message: '请输入资费' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.charges"
size="small"
placeholder="请输入资费"
/>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="addVisible = false" size="small"
>取消</el-button
>
<el-button @click="save" type="primary" size="small"
>保存</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getManageData,
addManageData,
updateManageData,
getDataById,
deleteData,
} from '@/common/api/manage/index'
export default {
name: 'saasManage',
data() {
return {
period: [],
manageData: [],
searchForm: {},
editId: undefined,
editForm: {
domain: '',
},
total: 0,
pageSize: 50,
currentPage: 1,
addVisible: false,
selection: [],
cloneEditForm: {},
loading: false,
}
},
async created() {
this.cloneEditForm = JSON.parse(
JSON.stringify(this.editForm),
)
this.getList()
},
methods: {
onChange(e) {
this.$set(this.editForm, 'apiName', e)
this.$set(this.editForm, 'databaseName', e)
},
async getList() {
this.loading = true
try {
const res = await getManageData(
{
...this.searchForm,
beginDate: this.period && this.period[0],
endDate: this.period && this.period[1],
},
this.currentPage,
this.pageSize,
)
this.manageData = res.data.records
this.total = res.data.total
} catch (e) {
console.error(e)
} finally {
this.loading = false
}
},
search() {
this.getList()
},
addData() {
this.addVisible = true
this.editId = undefined
this.editForm = JSON.parse(
JSON.stringify(this.cloneEditForm),
)
this.$nextTick(() => {
this.$refs.form.clearValidate()
})
},
async handleEdit(row) {
this.editId = row.id
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
const res = await getDataById(row.id)
res.data.domain =
res.data.domain && res.data.domain.split('.')[0]
res.data.databaseName =
res.data.databaseName &&
res.data.databaseName.substring(5)
this.editForm = res.data
} catch (e) {
this.$message.error(e)
} finally {
l.close()
}
this.addVisible = true
},
async save() {
try {
await this.$refs.form.validate()
} catch {
return
}
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
this.editForm.databaseName =
'saas_' + this.editForm.databaseName
this.editForm.domain =
this.editForm.domain + '.joshine.cn'
try {
if (this.editId) {
const res = await updateManageData(this.editForm)
if (res.code === 200) {
this.$message.success(res.message)
this.getList()
}
} else {
const res = await addManageData(this.editForm)
if (res.code === 200) {
this.$message.success(res.message)
this.getList()
}
}
} catch (e) {
this.$message.warning(e)
} finally {
this.addVisible = false
l.close()
}
},
async deleteData() {
if (this.selection.length === 0) {
this.$message.error('请至少选择一条记录')
return
}
let ids = []
ids = this.selection.map((item) => item.id)
ids = ids.join()
const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)',
})
try {
await deleteData(ids)
this.getList()
} catch (e) {
console.error(e)
} finally {
l.close()
}
},
handleSelectionChange(selection) {
this.selection = selection
},
onCurrentChange(currentPage) {
this.currentPage = currentPage
this.getList()
},
sizeChange(pageSize) {
this.pageSize = pageSize
this.getList()
},
rowClick(row) {
if (this.selection.length === 1 && this.selection[0] === row) {
this.selection = []
this.$refs.table.clearSelection()
} else {
this.selection = [row]
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row, true)
}
},
},
}
</script>
<style lang="scss" scoped>
.saas-manage {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
&::v-deep {
.el-table .el-table__cell {
padding: 6px 0;
}
.el-input__inner {
padding: 0 4px;
}
.el-input--small .el-input__inner {
height: 30px;
line-height: 30px;
}
.el-icon-time:before {
content: '';
}
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-icon-edit:before {
color: #ff9800;
font-weight: bold;
}
.el-range-editor--small .el-range-separator {
line-height: 31px;
}
.header-row-class-name th {
background-color: #f8f8f9;
}
.el-input-group__append {
padding-left: 0;
}
}
}
.search {
background: #fff;
}
.table-wrap {
background: #fff;
flex: 1;
overflow: hidden;
}
.pagination {
text-align: center;
padding-top: 10px;
}
</style>
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
transpileDependencies: true,
devServer: {
port: 8082,
host: 'wjz.local.cn',
},
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment