init
This commit is contained in:
19
src/views/error-page/401.vue
Normal file
19
src/views/error-page/401.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<error-content code="401" desc="Oh~~您没有浏览这个页面的权限~" :src="src"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import error401 from '@/assets/images/error-page/error-401.svg'
|
||||
import errorContent from './error-content.vue'
|
||||
export default {
|
||||
name: 'error_401',
|
||||
components: {
|
||||
errorContent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: error401
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
src/views/error-page/404.vue
Normal file
19
src/views/error-page/404.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<error-content code="404" desc="Oh~~您的页面好像飞走了~" :src="src"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import error404 from '@/assets/images/error-page/error-404.svg'
|
||||
import errorContent from './error-content.vue'
|
||||
export default {
|
||||
name: 'error_404',
|
||||
components: {
|
||||
errorContent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: error404
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
src/views/error-page/500.vue
Normal file
19
src/views/error-page/500.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<error-content code="500" desc="Oh~~鬼知道服务器经历了什么~" :src="src"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import error404 from '@/assets/images/error-page/error-500.svg'
|
||||
import errorContent from './error-content.vue'
|
||||
export default {
|
||||
name: 'error_500',
|
||||
components: {
|
||||
errorContent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: error404
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
src/views/error-page/back-btn-group.vue
Normal file
38
src/views/error-page/back-btn-group.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<Button size="large" type="text" @click="backHome">返回首页</Button>
|
||||
<!-- <Button size="large" type="text" @click="backPrev">返回上一页({{ second }}s)</Button> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './error.less'
|
||||
export default {
|
||||
name: 'backBtnGroup',
|
||||
data() {
|
||||
return {
|
||||
second: 5,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backHome() {
|
||||
this.$router.replace({
|
||||
name: this.$config.homeName
|
||||
})
|
||||
},
|
||||
backPrev() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.timer = setInterval(() => {
|
||||
// if (this.second === 0) this.backPrev()
|
||||
// else this.second--
|
||||
// }, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
src/views/error-page/error-content.vue
Normal file
30
src/views/error-page/error-content.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="content-con">
|
||||
<img :src="src" :alt="code">
|
||||
<div class="text-con">
|
||||
<h4>{{ code }}</h4>
|
||||
<h5>{{ desc }}</h5>
|
||||
</div>
|
||||
<back-btn-group class="back-btn-group"></back-btn-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './error.less'
|
||||
import backBtnGroup from './back-btn-group.vue'
|
||||
export default {
|
||||
name: 'error_content',
|
||||
components: {
|
||||
backBtnGroup
|
||||
},
|
||||
props: {
|
||||
code: String,
|
||||
desc: String,
|
||||
src: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
46
src/views/error-page/error.less
Normal file
46
src/views/error-page/error.less
Normal file
@@ -0,0 +1,46 @@
|
||||
.error-page{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #f8f8f9;
|
||||
.content-con{
|
||||
width: 700px;
|
||||
height: 600px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.text-con{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
h4{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
color: #348EED;
|
||||
}
|
||||
h5{
|
||||
position: absolute;
|
||||
width: 700px;
|
||||
left: 0px;
|
||||
top: 100px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #67647D;
|
||||
}
|
||||
}
|
||||
.back-btn-group{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/views/login/login.less
Normal file
29
src/views/login/login.less
Normal file
@@ -0,0 +1,29 @@
|
||||
.login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/images/login-bg.jpg");
|
||||
background-size: cover;
|
||||
|
||||
position: relative;
|
||||
&-con {
|
||||
position: absolute;
|
||||
right: 160px;
|
||||
top: 50%;
|
||||
transform: translateY(-60%);
|
||||
width: 300px;
|
||||
&-header {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.form-con {
|
||||
padding: 10px 0 0;
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: #c3c3c3;
|
||||
}
|
||||
}
|
||||
}
|
||||
83
src/views/login/login.vue
Normal file
83
src/views/login/login.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<style lang="less" scoped>
|
||||
@import './login.less';
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="title-box">
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
|
||||
<div class="login-con">
|
||||
<Card icon="log-in" title="欢迎登录" style="width:350px;height:300px;" :bordered="false">
|
||||
<div class="form-con">
|
||||
<login-form @on-success-valid="handleSubmit"></login-form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="bottom-box">
|
||||
<span>Copyright ©2019 </span>|
|
||||
|
||||
<span>推荐浏览器(360极速浏览器、谷歌浏览器、Edge for win10) </span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import LoginForm from '@component/login-form'
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: config.title,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LoginForm,
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['handleLogin']),
|
||||
async handleSubmit({ userName, password }) {
|
||||
let user = { name: userName, password: password }
|
||||
await this.handleLogin(user)
|
||||
window.location.reload()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title-box {
|
||||
position: absolute;
|
||||
|
||||
top: 0px;
|
||||
left: 15px;
|
||||
width: 440px;
|
||||
text-align: center;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-box h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: '黑体';
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-box span {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
176
src/views/system/sys_log.vue
Normal file
176
src/views/system/sys_log.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="content-view ">
|
||||
<div class="tree-box">
|
||||
<div class="btn-top-box pa10">
|
||||
<Button type="warning" size="small" @click="delAll">全部删除</Button>
|
||||
</div>
|
||||
<Tree class="mt10" :data="treeData" :render="renderContent" @on-select-change="selectChange"></Tree>
|
||||
</div>
|
||||
<div class="content ">
|
||||
<h1 class="title ">{{selectRow}}</h1>
|
||||
<div class="edit-text">
|
||||
<aceEditor ref="aceEditor" v-model="detail" @init="editorInit"></aceEditor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import sys_log_serve from '@/api/system/sys_log_serve'
|
||||
import aceEditor from 'vue2-ace-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
aceEditor: aceEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectRow: '',
|
||||
treeData: [],
|
||||
detail: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.list()
|
||||
},
|
||||
editorInit() {
|
||||
require('brace/ext/language_tools') //语言扩展先决条件...
|
||||
require('brace/mode/html')
|
||||
require('brace/mode/javascript') //语言
|
||||
require('brace/mode/less')
|
||||
require('brace/theme/chrome')
|
||||
require('brace/theme/xcode')
|
||||
require('brace/theme/monokai')
|
||||
require('brace/theme/cobalt')
|
||||
require('brace/theme/twilight')
|
||||
},
|
||||
|
||||
async list() {
|
||||
let res = await sys_log_serve.all()
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.treeData = res.data
|
||||
this.selectChange([res.data[0]])
|
||||
} else {
|
||||
this.treeData = []
|
||||
this.selectRow = ''
|
||||
}
|
||||
},
|
||||
renderContent(h, { root, node, data }) {
|
||||
let color = data.title.indexOf('logError') > -1 ? 'red' : '#000'
|
||||
return h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
width: '100%',
|
||||
margin: '5px',
|
||||
color: color
|
||||
}
|
||||
},
|
||||
[
|
||||
h('span', [
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: 'ios-paper-outline'
|
||||
},
|
||||
style: {
|
||||
marginRight: '8px'
|
||||
}
|
||||
}),
|
||||
h('span', data.title),
|
||||
h('Icon', {
|
||||
props: {
|
||||
type: 'ios-trash',
|
||||
size: '18'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.deleteLog(data)
|
||||
}
|
||||
},
|
||||
style: {
|
||||
'margin-left': '8px'
|
||||
}
|
||||
})
|
||||
])
|
||||
]
|
||||
)
|
||||
},
|
||||
async selectChange(row) {
|
||||
row[0].selected = true
|
||||
this.selectRow = row[0].title
|
||||
let res = await sys_log_serve.detail({ title: this.selectRow })
|
||||
this.detail = res.data
|
||||
|
||||
let aceEditor = this.$refs['aceEditor']
|
||||
aceEditor.editor.setReadOnly(true)
|
||||
aceEditor.editor.setOption('wrap', 'free')
|
||||
aceEditor.editor.setFontSize(18) //设置字号
|
||||
aceEditor.editor.session.setMode('ace/mode/javascript') // 设置编辑语言
|
||||
aceEditor.editor.setTheme('ace/theme/xcode') // 设置主题 cobalt monokai,twilight,(暗黑),xcode(亮白)
|
||||
},
|
||||
|
||||
async deleteLog(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await sys_log_serve.delete({ title: row.title })
|
||||
this.list()
|
||||
})
|
||||
},
|
||||
async delAll() {
|
||||
uiTool.delConfirm(async () => {
|
||||
await sys_log_serve.delete_all()
|
||||
this.list()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.tree-box {
|
||||
height: 90vh;
|
||||
width: 300px;
|
||||
border-right: solid 1px #ccc;
|
||||
overflow: auto;
|
||||
|
||||
.btn-top-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 0px 10px;
|
||||
border-bottom: solid 1px #ccc;
|
||||
}
|
||||
.edit-text {
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
height: 8rem;
|
||||
color: #423e3e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/views/system/sys_param_setup.vue
Normal file
111
src/views/system/sys_param_setup.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
|
||||
</tables>
|
||||
</div>
|
||||
|
||||
<editModal ref="editModal" :columns="gridOption.columns" :rules="gridOption.rules">
|
||||
</editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import paramSetupServer from '@/api/system_high/paramSetupServer'
|
||||
|
||||
export default {
|
||||
name: 'tables_page',
|
||||
|
||||
data() {
|
||||
return {
|
||||
gridOption: {
|
||||
addTitle: '新增',
|
||||
editRow: {},
|
||||
rules: {
|
||||
key: [{ required: true, message: '请填写键名称' }],
|
||||
value: [{ required: true, message: '请填写值' }],
|
||||
},
|
||||
columns: [
|
||||
{ title: 'id', key: 'id', minWidth: 80, is_show_edit: 0 },
|
||||
{ title: '键名称', key: 'key', disabled: false },
|
||||
{ title: '值', key: 'value', type: 'textarea', isRow: true },
|
||||
{ title: '备注', key: 'remark', type: 'textarea', isRow: true },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
let res = await paramSetupServer.getAll()
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
|
||||
async showAddWarp() {
|
||||
let col = this.gridOption.columns.find((p) => p.key === 'key')
|
||||
if (col) {
|
||||
col.disabled = false
|
||||
}
|
||||
|
||||
this.$refs.editModal.addShow({}, async (row) => {
|
||||
await paramSetupServer.add(row)
|
||||
rootVue.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async showEditWarp(row) {
|
||||
let col = this.gridOption.columns.find((p) => p.key === 'key')
|
||||
if (col) {
|
||||
col.disabled = true
|
||||
}
|
||||
|
||||
this.gridOption.editRow = row
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
await paramSetupServer.edit(newRow)
|
||||
rootVue.$Message.success('修改成功!')
|
||||
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await paramSetupServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
exportExcel() {
|
||||
this.$refs.tables.exportCsv({
|
||||
filename: `table-${new Date().valueOf()}.csv`,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
149
src/views/system/sys_role.vue
Normal file
149
src/views/system/sys_role.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables ref="tables" v-model="gridOption.data" :columns="gridOption.columns" />
|
||||
</div>
|
||||
|
||||
<editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
|
||||
</editModal>
|
||||
|
||||
<Modal v-model="isShowPermission" title="权限设置" @on-ok="submitPermission">
|
||||
<Tree ref="trees" :check-strictly='true' :data="treeData" show-checkbox></Tree>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import roleServer from '@/api/system/roleServer'
|
||||
import menuServer from '@/api/system_high/menuServer'
|
||||
|
||||
export default {
|
||||
name: 'tables_page',
|
||||
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
isShowPermission: false,
|
||||
expandTreeAll: [],
|
||||
gridOption: {
|
||||
columns: [
|
||||
{ title: '序号', key: 'id' },
|
||||
{ title: '角色名称', key: 'name' },
|
||||
{
|
||||
title: '操作',
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '配置权限',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.configPermission(params.row)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
return uiTool.getBtn(h, btns)
|
||||
}
|
||||
}
|
||||
],
|
||||
data: []
|
||||
},
|
||||
treeData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
let res = await roleServer.list()
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.addShow({}, async (row) => {
|
||||
await roleServer.add(row)
|
||||
this.init()
|
||||
await rootVue.$Message.success('新增成功!')
|
||||
})
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
await roleServer.edit(newRow)
|
||||
await this.init()
|
||||
rootVue.$Message.success('修改成功!')
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await roleServer.del(row)
|
||||
await this.init()
|
||||
rootVue.$Message.success('删除成功!')
|
||||
})
|
||||
},
|
||||
async submitPermission() {
|
||||
let checkNodes = this.$refs['trees'].getCheckedNodes()
|
||||
let checkNodeIds = checkNodes.map((p) => p.id)
|
||||
let param = {
|
||||
id: this.row.id,
|
||||
name: this.row.name,
|
||||
menus: JSON.stringify(checkNodeIds)
|
||||
}
|
||||
|
||||
await roleServer.edit(param)
|
||||
await this.init()
|
||||
rootVue.$Message.success('权限修改成功!')
|
||||
|
||||
this.isShowPermission = false
|
||||
},
|
||||
async configPermission(row) {
|
||||
this.row = row
|
||||
this.expandTreeAll = []
|
||||
|
||||
let res = await menuServer.list()
|
||||
let tree = uiTool.transformTree(res.data)
|
||||
if (row.menus) {
|
||||
this.expandTreeAll = JSON.parse(row.menus)
|
||||
this.treeData = this.mapTree(tree)
|
||||
} else {
|
||||
this.treeData = this.mapTree(tree)
|
||||
}
|
||||
|
||||
this.isShowPermission = true
|
||||
},
|
||||
|
||||
mapTree(tree) {
|
||||
return tree.map((p) => {
|
||||
if (p.children && p.children.length > 0) {
|
||||
p.children = this.mapTree(p.children)
|
||||
}
|
||||
|
||||
let row = this.expandTreeAll.find((p2) => p2 === p.id)
|
||||
if (row) {
|
||||
p.checked = true
|
||||
}
|
||||
|
||||
return Object.assign({}, p, { title: p.name, expand: false })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
139
src/views/system/sys_user.vue
Normal file
139
src/views/system/sys_user.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<Tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
|
||||
</Tables>
|
||||
</div>
|
||||
|
||||
<editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
|
||||
</editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import userServer from '@/api/system/userServer'
|
||||
import roleServer from '@/api/system/roleServer'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
|
||||
export default {
|
||||
name: 'tables_page',
|
||||
|
||||
data() {
|
||||
return {
|
||||
gridOption: {
|
||||
editRow: {},
|
||||
columns: [
|
||||
{ title: '登陆名', key: 'name' },
|
||||
|
||||
{
|
||||
title: '密码',
|
||||
key: 'password',
|
||||
render(h, params) {
|
||||
return <span>******</span>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属角色',
|
||||
key: 'roleId',
|
||||
com: 'Select',
|
||||
render: (h, params) => {
|
||||
if (params.row.role) {
|
||||
return h('span', params.row.role.name)
|
||||
} else {
|
||||
return h('span', '')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
shopList: 'shop/shopList',
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.initCol()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
let res = await userServer.all()
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
async initCol() {
|
||||
let res = await roleServer.list()
|
||||
this.roles = res.data
|
||||
let roleSource = this.roles.map((p) => {
|
||||
return {
|
||||
key: p.id,
|
||||
value: p.name,
|
||||
}
|
||||
})
|
||||
|
||||
let roleRow = this.gridOption.columns.find((p) => p.key === 'roleId')
|
||||
if (roleRow) {
|
||||
roleRow.source = roleSource
|
||||
}
|
||||
},
|
||||
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.addShow({}, async (newRow) => {
|
||||
await userServer.add(newRow)
|
||||
rootVue.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
await userServer.edit(newRow)
|
||||
rootVue.$Message.success('修改成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await userServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
async exportCsv(row) {
|
||||
await userServer.exportCsv(row)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
145
src/views/system/wch_cities.vue
Normal file
145
src/views/system/wch_cities.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem :label-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import wch_citiesServer from '@/api/venues/wch_cities_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["cn_city"] = [{ required: true, message: '请填写城市名称' }];
|
||||
rules["city_code"] = [{ required: true, message: '请填写城市代码' }];
|
||||
rules["cn_state"] = [{ required: false, message: '请填写省份' }];
|
||||
rules["cn_country"] = [{ required: false, message: '请填写国家' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'cn_city', value: '城市名称' },
|
||||
{ key: 'city_code', value: '城市代码' },
|
||||
{ key: 'cn_state', value: '省份' },
|
||||
{ key: 'cn_country', value: '国家' }
|
||||
],
|
||||
seachTypePlaceholder: '请选择搜索类型',
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: 'cn_city',
|
||||
value: ''
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||||
{ title: '城市名称', key: 'cn_city', minWidth: 120 },
|
||||
{ title: '城市代码', key: 'city_code', minWidth: 100 },
|
||||
{ title: '省份', key: 'cn_state', minWidth: 120 },
|
||||
{ title: '国家', key: 'cn_country', minWidth: 100 },
|
||||
{ title: '英文城市', key: 'city', minWidth: 120 },
|
||||
{ title: '英文省份', key: 'state', minWidth: 120 },
|
||||
{ title: '英文国家', key: 'country', minWidth: 100 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.del(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
}
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{ title: '城市名称(中文)', key: 'cn_city', type: 'text', required: true },
|
||||
{ title: '城市代码', key: 'city_code', type: 'text', required: true },
|
||||
{ title: '省份(中文)', key: 'cn_state', type: 'text' },
|
||||
{ title: '国家(中文)', key: 'cn_country', type: 'text' },
|
||||
{ title: '城市名称(英文)', key: 'city', type: 'text' },
|
||||
{ title: '省份(英文)', key: 'state', type: 'text' },
|
||||
{ title: '国家(英文)', key: 'country', type: 'text' },
|
||||
{ title: '省份代码', key: 'state_code', type: 'text' },
|
||||
{ title: '国家代码', key: 'country_code', type: 'text' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
query(page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
wch_citiesServer.page(this.gridOption.param).then(res => {
|
||||
this.gridOption.data = res.data.rows;
|
||||
this.gridOption.param.pageOption.total = res.data.count;
|
||||
});
|
||||
},
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.showModal();
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.showModal(row);
|
||||
},
|
||||
del(row) {
|
||||
this.$Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条记录吗?',
|
||||
onOk: () => {
|
||||
wch_citiesServer.del({ id: row.id }).then(res => {
|
||||
this.$Message.success('删除成功');
|
||||
this.query(1);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
exportCsv() {
|
||||
wch_citiesServer.exportCsv(this.gridOption.param).then(res => {
|
||||
tools.downloadFile(res, '城市管理.csv');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
239
src/views/system/wch_professions.vue
Normal file
239
src/views/system/wch_professions.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem :label-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import menuServer from '@/api/system_high/menuServer.js'
|
||||
import wch_professionsServer from '@/api/system/wch_professions_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["level_one"] = [{ required: true, message: '请填写一级分类' }];
|
||||
rules["level_two"] = [{ required: true, message: '请填写二级分类' }];
|
||||
rules["level_three"] = [{ required: true, message: '请填写三级分类' }];
|
||||
rules["sort_order"] = [{ required: false, type: "number", message: '请填写排序', trigger: 'change' }];
|
||||
rules["is_active"] = [{ required: false, message: '请选择是否启用', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: "id", value: "ID" },
|
||||
{ key: "level_one", value: "一级分类" },
|
||||
{ key: "level_two", value: "二级分类" },
|
||||
{ key: "level_three", value: "三级分类" }
|
||||
],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: { key: "level_one", value: "" },
|
||||
pageOption: {
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
rules,
|
||||
columns: [
|
||||
{ key: "id", title: "ID", disabled: true, is_show_edit: 1, is_show_list: 1, com: "Input" },
|
||||
{
|
||||
key: "level_one",
|
||||
title: "一级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'blue' } }, params.row.level_one);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "level_two",
|
||||
title: "二级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'green' } }, params.row.level_two);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "level_three",
|
||||
title: "三级分类",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Input",
|
||||
render: (h, params) => {
|
||||
return h('Tag', { props: { color: 'orange' } }, params.row.level_three);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "sort_order",
|
||||
title: "排序",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
data_type: "number",
|
||||
com: "InputNumber",
|
||||
render: (h, params) => {
|
||||
return h('span', params.row.sort_order || 0);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
title: "状态",
|
||||
disabled: false,
|
||||
is_show_edit: 1,
|
||||
is_show_list: 1,
|
||||
com: "Radio",
|
||||
options: [
|
||||
{ value: "1", label: "启用" },
|
||||
{ value: "0", label: "禁用" }
|
||||
],
|
||||
render: (h, params) => {
|
||||
const statusMap = {
|
||||
'1': { text: '启用', color: 'success' },
|
||||
'0': { text: '禁用', color: 'default' }
|
||||
};
|
||||
const status = statusMap[params.row.is_active] || { text: '未知', color: 'default' };
|
||||
return h('Tag', { props: { color: status.color } }, status.text);
|
||||
}
|
||||
},
|
||||
{ key: 'create_time', title: '创建时间', minWidth: 160, is_show_edit: 0 },
|
||||
{ key: 'last_modify_time', title: '更新时间', minWidth: 160, is_show_edit: 0 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
is_show_list: 1,
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
},
|
||||
],
|
||||
data: []
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
return this.seachTypes.map(p => p.value).slice(0, 3).join('/')
|
||||
},
|
||||
editColumns() {
|
||||
let editTempColumns = this.gridOption.columns.filter(p => p.is_show_edit === 1)
|
||||
return editTempColumns
|
||||
},
|
||||
listColumns() {
|
||||
let listTempColumns = this.gridOption.columns.filter(p => p.is_show_list === 1)
|
||||
return listTempColumns
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.initCol()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.query(1)
|
||||
},
|
||||
async initCol() {
|
||||
let columnRows = []
|
||||
let columnKeys = columnRows.map(p => p.key)
|
||||
let newColumns = this.gridOption.columns.filter(p => columnKeys.indexOf(p.key) > -1)
|
||||
for (let i = 0; i < newColumns.length; i++) {
|
||||
let curColumn = newColumns[i]
|
||||
let modelMap = columnRows[i].map_option
|
||||
let res = await menuServer.modelInterface({ model_key: columnRows[i].modelKey, map_option: modelMap })
|
||||
curColumn.source = res.data
|
||||
}
|
||||
},
|
||||
async inquiry() {
|
||||
let res = await wch_professionsServer.all(this.gridOption.param)
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
async query(page) {
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page
|
||||
}
|
||||
let res = await wch_professionsServer.page(this.gridOption.param)
|
||||
this.gridOption.data = res.data.rows
|
||||
this.gridOption.param.pageOption.total = res.data.count
|
||||
},
|
||||
async showAddWarp() {
|
||||
this.$refs.editModal.addShow({
|
||||
'level_one': '',
|
||||
'level_two': '',
|
||||
'level_three': '',
|
||||
'sort_order': 0,
|
||||
'is_active': '1'
|
||||
}, async (newRow) => {
|
||||
let res = await wch_professionsServer.add(newRow)
|
||||
this.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
let valid = await this.$refs['editModal'].$refs['From'].validate()
|
||||
if (valid) {
|
||||
let res = await wch_professionsServer.edit(newRow)
|
||||
this.$Message.success('修改成功!')
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await wch_professionsServer.del(row)
|
||||
this.$Message.success('删除成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async exportCsv() {
|
||||
let res = await wch_professionsServer.exportCsv(this.gridOption.param)
|
||||
tools.downloadFile(res, '职业管理.csv')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
33
src/views/system_high/com/databaseType.vue
Normal file
33
src/views/system_high/com/databaseType.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<Select @on-change="changeInput" :value="value">
|
||||
<Option v-for="item in source" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
source: [
|
||||
{ key: 'STRING', value: '字符串-STRING' },
|
||||
{ key: 'TEXT', value: '富文本-TEXT' },
|
||||
{ key: 'JSON', value: 'JSON' },
|
||||
{ key: 'INTEGER', value: '整型-INTEGER' },
|
||||
{ key: 'BOOLEAN', value: '布尔值-BOOLEAN' },
|
||||
{ key: 'DOUBLE', value: '双精度浮点数-DOUBLE' },
|
||||
{ key: 'DATE', value: '日期-DATE' },
|
||||
{ key: 'ENUM', value: '枚举-ENUM' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeInput(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
251
src/views/system_high/com/frontEndControlType.vue
Normal file
251
src/views/system_high/com/frontEndControlType.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<Card class="pa5" dis-hover v-if="value">
|
||||
<Select :value="value.comType" @on-change="changeComType">
|
||||
<Option v-for="item in sourceCom" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<div style="width:100%;" v-if="value.comType==='Select'|| value.comType==='Radio'|| value.comType==='Checkbox'">
|
||||
|
||||
<div class="select-form ">
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5"> 数据源类型</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<RadioGroup :value="value.interfaceType" @on-change="changeInterfaceType">
|
||||
<Radio :label="item.key" :key="item.key" v-for="item in sourceType">
|
||||
<span>{{ item.value }}</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="value.interfaceType==='接口'">
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">选择model</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
|
||||
<Select :value="value.modelKey" placeholder="请选择model" @on-change="changeModel">
|
||||
<Option v-for="item in modelRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">key(映射)</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<Select :value="value.modelMap.key" placeholder="请选择字段" @on-change="changeKey">
|
||||
<Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="select-item">
|
||||
<label class="label">
|
||||
<span class="red"> *</span>
|
||||
<span class="ml5">value(映射)</span>
|
||||
</label>
|
||||
<div class="item-com">
|
||||
<Select :value="value.modelMap.value" placeholder="请选择字段" @on-change="changeValue">
|
||||
<Option v-for="item in fieldRows" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="bd tag-box">
|
||||
<Tag v-for="item in value.localData" :key="item.key" :name="item.name" closable @on-close="handleClose(item.key)">{{ item.key+':'+item.value }}</Tag>
|
||||
</div>
|
||||
|
||||
<div class="mt5">
|
||||
<Input :max="10" :min="1" v-model="localVal.key" type="number" size="small" placeholder="输入key" style="width: 60px"></Input>
|
||||
<Input class="ml5" v-model="localVal.value" size="small" placeholder="输入value" style="width: 80px" />
|
||||
<Button class="ml10" size="small" @click="handleAdd">添加数据</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modelServer from '@/api/system_high/modelServer'
|
||||
import modelFieldServer from '@/api/system_high/modelFieldServer'
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
localData: [],
|
||||
localVal: { key: 0, value: '' },
|
||||
sourceCom: [
|
||||
{ key: 'Input', value: '文本输入框-Input', default_option: { data_type: 'STRING', data_length: 50 } },
|
||||
{ key: 'TextArea', value: '文本区域框-TextArea', default_option: { data_type: 'STRING', data_length: 500 } },
|
||||
{ key: 'InputNumber', value: '数字输入框-InputNumber', default_option: { data_type: 'INTEGER', data_length: 11, defaultValue: 0 } },
|
||||
{ key: 'i-switch', value: '开关-Switch', default_option: { data_type: 'BOOLEAN', data_length: 2 } },
|
||||
{ key: 'Radio', value: '单选框-Radio', default_option: { data_type: 'INTEGER', data_length: 2 } },
|
||||
{ key: 'Select', value: '下拉选择器-Select', default_option: { data_type: 'STRING', data_length: 50 } },
|
||||
{ key: 'Checkbox', value: '多选框-Checkbox', default_option: { data_type: 'INTEGER', data_length: 11 } },
|
||||
{ key: 'DatePicker', value: '日期选择器-DatePicker', default_option: { data_type: 'DATE', data_length: 50 } },
|
||||
{ key: 'Editor', value: '富文本-Editor', default_option: { data_type: 'TEXT', data_length: 0 } },
|
||||
{ key: 'UploadSingle', value: '图片框-UploadSingle', default_option: { data_type: 'STRING', data_length: 1000 } }
|
||||
],
|
||||
sourceType: [
|
||||
{ key: '接口', value: '接口' },
|
||||
{ key: '本地数据', value: '本地数据' }
|
||||
],
|
||||
modelRows: [],
|
||||
fieldRows: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
comType() {
|
||||
return this.value.comType
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
await this.getModel()
|
||||
await this.getField()
|
||||
},
|
||||
handleClose(key) {
|
||||
const index = this.localData.findIndex((p) => p.key === key)
|
||||
this.localData.splice(index, 1)
|
||||
let { comType, localData } = this
|
||||
let newVal = Object.assign({}, this.value, { comType, localData })
|
||||
this.$emit('input', newVal)
|
||||
},
|
||||
handleAdd() {
|
||||
if ((this.localVal.key || this.localVal.key === 0) && this.localVal.value) {
|
||||
const index = this.localData.findIndex((p) => p.key === this.localVal.key)
|
||||
if (index === -1) {
|
||||
this.localData.push(this.localVal)
|
||||
let { comType, localData } = this
|
||||
let newVal = Object.assign({}, this.value, { comType, localData })
|
||||
this.$emit('input', newVal)
|
||||
this.localVal = { key: this.localData.length, value: '' }
|
||||
} else {
|
||||
this.$Message.error('不能添加重复项')
|
||||
}
|
||||
} else {
|
||||
this.$Message.error('请输入值')
|
||||
}
|
||||
},
|
||||
|
||||
async getField() {
|
||||
this.$nextTick(async () => {
|
||||
if (this.value) {
|
||||
let key = this.value.modelKey
|
||||
if (key) {
|
||||
let res = await modelFieldServer.allByKey({ key })
|
||||
let data = res.data.map((p) => {
|
||||
let { key, name } = p
|
||||
return { key, value: key }
|
||||
})
|
||||
|
||||
this.fieldRows = [{ key: 'id', value: 'id' }, ...data]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async getModel() {
|
||||
let res = await modelServer.all()
|
||||
this.modelRows = res.data.map((p) => {
|
||||
let { key, name } = p
|
||||
return { key, value: key + '-' + name }
|
||||
})
|
||||
},
|
||||
|
||||
changeComType(val) {
|
||||
let remoteKeys = ['Select', 'Radio', 'Checkbox']
|
||||
let newRow = { comType: val }
|
||||
if (remoteKeys.indexOf(val) > -1) {
|
||||
newRow = Object.assign(newRow, { interfaceType: '接口', modelKey: '', modelMap: { key: 'id', value: 'name' } })
|
||||
}
|
||||
|
||||
this.$emit('input', newRow)
|
||||
let com = this.sourceCom.find((p) => p.key === val)
|
||||
if (com && com.default_option) {
|
||||
this.$emit('changeOption', com.default_option)
|
||||
}
|
||||
},
|
||||
changeModel(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { modelKey: val })
|
||||
this.$emit('input', newRow)
|
||||
this.getField()
|
||||
},
|
||||
|
||||
changeInterfaceType(val) {
|
||||
if (val === '接口') {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
|
||||
this.$emit('input', newRow)
|
||||
} else {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value, { interfaceType: val })
|
||||
console.log(newRow, val)
|
||||
this.$emit('input', newRow)
|
||||
}
|
||||
},
|
||||
changeKey(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
|
||||
newRow.modelMap.key = val
|
||||
this.$emit('input', newRow)
|
||||
},
|
||||
changeValue(val) {
|
||||
let newRow = Object.assign({ modelMap: { key: '', value: '' } }, this.value)
|
||||
newRow.modelMap.value = val
|
||||
this.$emit('input', newRow)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.select-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
.select-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10px 0px;
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.item-com {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.bd {
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
</style>
|
||||
148
src/views/system_high/sys_control.vue
Normal file
148
src/views/system_high/sys_control.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool ">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem label="搜索" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width:120px" placeholder="请选择字段">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width:200px;" search placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="gridOption.columns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="gridOption.columns" :rules="gridOption.rules"></editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tools from '@/utils/tools'
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import modelServer from '@/api/system_high/modelServer.js'
|
||||
import sysControlTypeServer from '@/api/system_high/sysControlTypeServer.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules['nick_name'] = [{ required: true, message: '请填写昵称' }]
|
||||
rules['open_id'] = [{ required: true, message: '请填写open_id' }]
|
||||
rules['head_portrait'] = [{ required: true, message: '请填写头像' }]
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'name', value: '名称' },
|
||||
{ key: 'module_key', value: '组件Key' },
|
||||
{ key: 'option', value: '配置' },
|
||||
],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: { key: '', value: '' },
|
||||
pageOption: {
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
},
|
||||
rules,
|
||||
columns: [
|
||||
{ key: 'name', title: '名称', com: 'Input' },
|
||||
{ key: 'module_key', title: '组件Key', com: 'Input' },
|
||||
{ key: 'data_lenght', title: '数据长度' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.initCol()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.query(1)
|
||||
},
|
||||
async initCol() {
|
||||
let columnRows = []
|
||||
let columnKeys = columnRows.map((p) => p.key)
|
||||
let newColumns = this.gridOption.columns.filter((p) => columnKeys.indexOf(p.key) > -1)
|
||||
for (let i = 0; i < newColumns.length; i++) {
|
||||
let curColumn = newColumns[i]
|
||||
let modelMap = columnRows[i].map_option
|
||||
let res = await modelServer.interface({ model_key: columnRows[i].modelKey, map_option: modelMap })
|
||||
curColumn.source = res.data
|
||||
}
|
||||
},
|
||||
|
||||
async inquiry() {
|
||||
let res = await sysControlTypeServer.all(this.gridOption.param)
|
||||
this.gridOption.data = res.data
|
||||
},
|
||||
|
||||
async query(page) {
|
||||
if (page) {
|
||||
this.gridOption.param.pageOption.page = page
|
||||
}
|
||||
|
||||
let res = await sysControlTypeServer.page(this.gridOption.param)
|
||||
this.gridOption.data = res.data.rows
|
||||
this.gridOption.param.pageOption.total = res.data.count
|
||||
},
|
||||
async showAddWarp() {
|
||||
this.$refs.editModal.addShow({}, async (newRow) => {
|
||||
let res = await sysControlTypeServer.add(newRow)
|
||||
rootVue.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async showEditWarp(row) {
|
||||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||||
let valid = await this.$refs['editModal'].$refs['From'].validate()
|
||||
if (valid) {
|
||||
let res = await sysControlTypeServer.edit(newRow)
|
||||
rootVue.$Message.success('修改成功!')
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await sysControlTypeServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
402
src/views/system_high/sys_menu.vue
Normal file
402
src/views/system_high/sys_menu.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="addWarp()">新增</Button>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<card class="tree-box">
|
||||
<TreeGrid :columns="gridOption.columns" :data="gridOption.data"></TreeGrid>
|
||||
</card>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="gridOption.editColumns" :rules="gridOption.rules">
|
||||
<div slot="bottom">
|
||||
|
||||
<fieldItem name='类别'>
|
||||
<RadioGroup v-model="editRow.type">
|
||||
<Radio :label="item.key" :key="item.key" v-for="item in typeSource">
|
||||
{{item.value}}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</fieldItem>
|
||||
|
||||
<div v-if="editRow.type==='页面'||editRow.type==='功能'">
|
||||
<fieldItem name='数据模型'>
|
||||
<Select v-model="editRow.model_id">
|
||||
<Option v-for="item in modelRows" :value="item.id" :key="item.id">{{ item.value }}</Option>
|
||||
</Select>
|
||||
</fieldItem>
|
||||
|
||||
<fieldItem name='组件地址'>
|
||||
<Input v-model="editRow.component" placeholder="(模块+路由).vue" />
|
||||
</fieldItem>
|
||||
|
||||
<fieldItem name='api地址'>
|
||||
<Input v-model="editRow.api_path" placeholder="(模型).js" />
|
||||
</fieldItem>
|
||||
</div>
|
||||
|
||||
<fieldItem name='地址' v-if="editRow.type==='外链'">
|
||||
<Input v-model="editRow.component" placeholder="请输入网址" />
|
||||
</fieldItem>
|
||||
|
||||
</div>
|
||||
</editModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiTool from '@/utils/uiTool'
|
||||
import menuServer from '@/api/system_high/menuServer'
|
||||
|
||||
export default {
|
||||
name: 'tree_table_page',
|
||||
data() {
|
||||
let rules = {}
|
||||
rules['name'] = [{ required: true, message: '请填写昵称' }]
|
||||
rules['path'] = [{ required: true, message: '请填写路由' }]
|
||||
rules['icon'] = [{ required: true, message: '请选择图标' }]
|
||||
rules['is_show_menu'] = [{ required: true, message: '请选择是否在菜单' }]
|
||||
rules['is_show'] = [{ required: true, message: '请选择是否启用' }]
|
||||
rules['sort'] = [{ required: true, message: '请填写排序' }]
|
||||
|
||||
const source = [
|
||||
{ key: 0, value: '否' },
|
||||
{ key: 1, value: '是' }
|
||||
]
|
||||
let that = this
|
||||
|
||||
const editColumns = [
|
||||
{ key: 'name', title: '名称' },
|
||||
{
|
||||
key: 'parent_node_ids',
|
||||
title: '父菜单',
|
||||
editRender(h, value) {
|
||||
let val = value || []
|
||||
return h('Cascader', {
|
||||
props: {
|
||||
filterable: true,
|
||||
'change-on-select': true,
|
||||
value: val,
|
||||
data: that.gridOption.menuData
|
||||
},
|
||||
on: {
|
||||
'on-change'(value, selectedData) {
|
||||
that.parent_node_ids = value
|
||||
that.editRow.parent_id = value[value.length - 1]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
{ key: 'path', title: '路由', placeholder: '例:system,user' },
|
||||
{
|
||||
key: 'icon',
|
||||
title: '图标',
|
||||
com: 'SelectIcon',
|
||||
render(h, params) {
|
||||
return h('Icon', { props: { type: params.row.icon, size: '24' } })
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
key: 'is_show_menu',
|
||||
title: '是否显示在菜单',
|
||||
com: 'Radio',
|
||||
source: source,
|
||||
render(h, param) {
|
||||
if (param.row.is_show_menu) {
|
||||
return <span>是</span>
|
||||
} else {
|
||||
return <span>否</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'is_show',
|
||||
title: '是否启用',
|
||||
com: 'Radio',
|
||||
source: source,
|
||||
render(h, param) {
|
||||
if (param.row.is_show) {
|
||||
return <span>是</span>
|
||||
} else {
|
||||
return <span>否</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
{ key: 'sort', title: '排序' }
|
||||
]
|
||||
|
||||
return {
|
||||
parent_node_ids: [],
|
||||
editRow: {
|
||||
type: '',
|
||||
model_id: '',
|
||||
parent_id: '',
|
||||
path: '',
|
||||
component: ''
|
||||
},
|
||||
typeSource: [
|
||||
{ key: '菜单', value: '菜单' },
|
||||
{ key: '页面', value: '页面' },
|
||||
{ key: '功能', value: '功能' },
|
||||
{ key: '外链', value: '外链' }
|
||||
],
|
||||
menuRows: [],
|
||||
modelRows: [{ id: 0, value: '自定义模板', key: 'custom_template' }],
|
||||
gridOption: {
|
||||
rules,
|
||||
editColumns,
|
||||
columns: [
|
||||
{ title: 'id', key: 'id', width: '120', is_show_edit: 0 },
|
||||
...editColumns,
|
||||
{
|
||||
key: 'type',
|
||||
title: '类别',
|
||||
com: 'Radio',
|
||||
source: [
|
||||
{ key: '菜单', value: '菜单' },
|
||||
{ key: '页面', value: '页面' },
|
||||
{ key: '外链', value: '外链' }
|
||||
]
|
||||
},
|
||||
|
||||
{ key: 'component', title: '组件地址' },
|
||||
{ key: 'api_path', title: 'api地址' },
|
||||
{ key: 'model_id', title: '模型id' },
|
||||
{
|
||||
key: 'operat',
|
||||
title: '操作',
|
||||
type: 'template',
|
||||
width: 500,
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.editModal(params.row)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
if (params.row.type === '菜单') {
|
||||
btns.push({
|
||||
title: '新增页面',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.addSonWarp(params.row)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (params.row.model_id) {
|
||||
btns.push({
|
||||
title: '自动生成(前端)',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.generate(params.row)
|
||||
}
|
||||
})
|
||||
|
||||
btns.push({
|
||||
title: '自动生成(api)',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.generateModel(params.row)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return uiTool.getBtn(h, btns)
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [],
|
||||
menuData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.initCol()
|
||||
},
|
||||
watch: {
|
||||
'editRow.parent_id'() {
|
||||
this.calculate()
|
||||
},
|
||||
'editRow.path'(val) {
|
||||
this.calculate()
|
||||
},
|
||||
'editRow.model_id'(val) {
|
||||
this.calculate()
|
||||
},
|
||||
'editRow.type'(val) {
|
||||
this.calculate()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async init() {
|
||||
let res = await menuServer.list()
|
||||
let tree = uiTool.transformTree(res.data)
|
||||
this.gridOption.data = this.mapTree(tree)
|
||||
|
||||
let menuRows = res.data.filter((p) => p.type === '菜单')
|
||||
this.menuRows = menuRows
|
||||
let menuTree = uiTool.transformTree(menuRows)
|
||||
this.gridOption.menuData = this.mapTree(menuTree)
|
||||
|
||||
this.$store.dispatch('setAuthorityMenus')
|
||||
},
|
||||
async initCol() {
|
||||
let res = await menuServer.modelAll()
|
||||
|
||||
let data = res.data.map((row) => {
|
||||
let { id, key, name } = row
|
||||
let value = key
|
||||
if (name) {
|
||||
value = value + '-' + name
|
||||
}
|
||||
|
||||
return { id, value, key }
|
||||
})
|
||||
this.modelRows = [{ id: 0, value: '自定义模板', key: 'custom_template' }, ...data] || []
|
||||
},
|
||||
|
||||
calculate() {
|
||||
let modulePath = ''
|
||||
let parent_node_ids = this.parent_node_ids
|
||||
parent_node_ids.forEach((id) => {
|
||||
let menuRow = this.menuRows.find((p) => p.id === id)
|
||||
if (menuRow) {
|
||||
modulePath += menuRow.path + '/'
|
||||
}
|
||||
})
|
||||
|
||||
if (this.editRow.type === '菜单' || this.editRow.type === '外链') {
|
||||
this.editRow.component = ''
|
||||
this.editRow.api_path = ''
|
||||
return
|
||||
}
|
||||
|
||||
if (this.editRow.path) {
|
||||
let path = this.editRow.path.replace(/\//g, '_').replace(/:/g, '')
|
||||
|
||||
this.editRow.component = modulePath + path + '.vue'
|
||||
this.editRow.api_path = modulePath + path + '_server.js'
|
||||
}
|
||||
},
|
||||
mapTree(tree) {
|
||||
let curTree = tree.map((p) => {
|
||||
if (p.children && p.children.length > 0) {
|
||||
p.children = this.mapTree(p.children)
|
||||
}
|
||||
|
||||
return {
|
||||
...p,
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
expand: false,
|
||||
children: p.children
|
||||
}
|
||||
})
|
||||
|
||||
return curTree
|
||||
},
|
||||
editModal(row) {
|
||||
this.parent_node_ids = row.parent_node_ids
|
||||
this.editRow = row
|
||||
this.$refs.editModal.editShow(this.editRow, async (newRow) => {
|
||||
let param = Object.assign({}, this.editRow, newRow)
|
||||
await menuServer.edit(param)
|
||||
rootVue.$Message.success('修改成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
addWarp() {
|
||||
this.editRow = {
|
||||
type: '菜单',
|
||||
model_id: 0,
|
||||
component: '',
|
||||
parent_id: 0,
|
||||
parent_node_ids: [],
|
||||
path: '',
|
||||
is_show: 1,
|
||||
is_show_menu: 1
|
||||
}
|
||||
this.$refs.editModal.addShow(this.editRow, async (newRow) => {
|
||||
let param = Object.assign({}, newRow)
|
||||
await menuServer.add(param)
|
||||
rootVue.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
addSonWarp(row) {
|
||||
let { parent_node_ids, id, model_id } = row
|
||||
this.parent_node_ids = parent_node_ids
|
||||
this.editRow = {
|
||||
type: '页面',
|
||||
parent_id: id,
|
||||
model_id,
|
||||
component: '',
|
||||
parent_node_ids,
|
||||
is_show: 1,
|
||||
is_show_menu: 1
|
||||
}
|
||||
this.$refs.editModal.addShow(this.editRow, async (newRow) => {
|
||||
let param = Object.assign({}, newRow)
|
||||
await menuServer.add(param)
|
||||
rootVue.$Message.success('新增成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await menuServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
async generate(row) {
|
||||
uiTool.showConfirm(
|
||||
{
|
||||
content: '你确定生成吗,生成将覆盖原来已存在apiServer和vuePage,请谨慎操作'
|
||||
},
|
||||
async () => {
|
||||
let res = await menuServer.generate(row)
|
||||
rootVue.$Message.success('生成成功!')
|
||||
this.init()
|
||||
}
|
||||
)
|
||||
},
|
||||
async generateModel(row) {
|
||||
uiTool.showConfirm(
|
||||
{
|
||||
content: '你确定生成吗,生成将覆盖原来已存在model和controller,请谨慎操作'
|
||||
},
|
||||
async () => {
|
||||
let res = await menuServer.generateModel(row)
|
||||
rootVue.$Message.success('生成成功!')
|
||||
this.init()
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tree-box {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
||||
63
src/views/system_high/sys_title.vue
Normal file
63
src/views/system_high/sys_title.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<Form ref="form" class="mt30 w60" :model="formModel" :rules="rules" :label-width="80">
|
||||
<FormItem label="标题" prop="title">
|
||||
<Input v-model="formModel.title" placeholder="请输入标题"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="logo" prop="logoUrl">
|
||||
<UploadSingle v-model="formModel.logoUrl" ref="uploadSingle"></UploadSingle>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="">
|
||||
<Button type="primary" @click="handleSubmit()">保存</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import paramSetupServer from '@/api/system_high/paramSetupServer'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
||||
logoUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
|
||||
},
|
||||
formModel: {
|
||||
title: '',
|
||||
logoUrl: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
sysFormModel: 'sysFormModel',
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let { title, logoUrl } = this.sysFormModel
|
||||
this.formModel = { title, logoUrl }
|
||||
},
|
||||
async handleSubmit() {
|
||||
this.$refs['form'].validate(async (valid) => {
|
||||
if (valid) {
|
||||
await paramSetupServer.setSysConfig(this.formModel)
|
||||
await this.$store.dispatch('getSysTitle')
|
||||
this.$Message.success('修改成功!')
|
||||
} else {
|
||||
this.$Message.error('请检查表单!')
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user