界面更新优化

This commit is contained in:
xielue 2022-11-18 22:54:06 +08:00
parent 1da2e35468
commit 3bde5e1473
26 changed files with 1453 additions and 532 deletions

View File

@ -5,7 +5,7 @@ import mk from './mk'
export default {
install(Vue) {
Vue.component("mk-toolbar",mk.toolbar);
Vue.prototype.$mk = mk;
}

View File

@ -0,0 +1,56 @@
<template>
<div class="mk-toolbar mk-toolbar-right">
<a-tooltip placement="topRight" title="日志" v-if="isShowLog">
<a class="iconlink" @click="toolbarClick({name:'log'})"> <a-icon type="file-text"></a-icon></a>
</a-tooltip>
<a-tooltip placement="topRight" title="设置" v-if="isShowSetting">
<a class="iconlink" title="设置" @click="toolbarClick({name:'setting'})"> <a-icon type="setting"></a-icon></a>
</a-tooltip>
<a-button type="primary" @click="toolbarClick({name:'add'})">
新增
</a-button>
</div>
</template>
<script>
export default {
name: "mktoolbar",
props: {
isShowLog : {
type: Boolean,
default: true
},
isShowSetting : {
type: Boolean,
default: true
},
},
data() {
return {
};
},
methods: {
toolbarClick(e){
this.$emit("toolbarClick",e);
},
gotoLog(){
},
gotoSetting(){
}
},
};
</script>

View File

@ -35,6 +35,7 @@ export default {
checkboxConfig: {
reserve: true,
highlight: true,
trigger:'row',
range: true
}
},

View File

@ -12,7 +12,9 @@ var mk = {
config: config,
dialog: dialog
dialog: dialog,
toolbar :()=>import("./components/toolbar/toolbar")
};
export default mk;

View File

@ -15,4 +15,29 @@
color: #606266;
text-align: center;
cursor: pointer;
}
.mk-toolbar-right{
display: flex;
flex-direction: row-reverse;
}
.mk-toolbar-right .iconlink{
margin: 10px 6px;
}
.mk-toolbar-right .iconlink a-icon{
font-size: 18px;
}
.vxe-form .vxe-form--gather .ant-form-item{
margin-bottom: 0;
}
.footerbar{
margin-top: 4px;
padding-left: 8px;
}
.oplinks a{
margin-right: 8px;
}

View File

@ -23,6 +23,7 @@
import PageHeader from '@/components/page/header/PageHeader' //
import {mapState, mapMutations} from 'vuex' // vuex
import {getI18nKey} from '@/utils/routerUtil' //
export default {
name: 'PageLayout', //
@ -55,6 +56,7 @@ export default {
},
created() { //
this.page = this.$route.meta.page //
},
beforeDestroy() { //
this.updatePageHeight(0) //

View File

@ -64,7 +64,7 @@ export default {
rules: {
name: [
{ required: true, message: '请输入名称' }
{ required: true, message: '请输入名称' }
],
email: [
{
@ -77,7 +77,7 @@ export default {
}
],
mobile: [
{ required: true, message: '请输入手机号' } ,
{ required: true, message: '请输入手机号' },
{
validator({ itemValue }) {
//
@ -104,23 +104,23 @@ export default {
};
pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
return pageData;
},
},
created() {
if (this.dataId) {
this.$mk.post({
url: this.actions.get,
loading : "加载中...",
data : {
loading: "加载中...",
data: {
id: this.dataId
}
}).then(a => {
this.formOptions.data = a.data.AdminUser;
}).catch((a)=>{
this.$mk.error(a.data.msg);
});
}).then(a => {
this.formOptions.data = a.data.AdminUser;
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
},
@ -144,10 +144,10 @@ export default {
url: action,
loading: "保存中...",
data: postdata
}).then(() => {
this.$mk.success("保存成功");
this.$emit("callback", { success: true });
}).catch((a)=>{
}).then(() => {
this.$mk.success("保存成功");
this.$emit("callback", { success: true });
}).catch((a) => {
this.$mk.error(a.data.msg);
});
};

View File

@ -2,44 +2,44 @@
<div class="page-body">
<!-- 工具条 -->
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">
新增
</a-button>
<a-button @click="pageEdit">编辑</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="delete">
删除
</a-menu-item>
</a-menu>
<a-button> 操作
<a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
<!-- 搜索区 -->
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
<template #date="{}">
<a-form-item label="创建时间" :style="{ display: 'inline-block',width:120 }">
<a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
<a-range-picker @change="onDateChange" />
</a-form-item>
</template>
</vxe-form>
<vxe-toolbar ref="xToolbar" custom>
<template #buttons>
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
</template>
</vxe-toolbar>
<!-- 表格区 -->
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
<div class="gridPanel">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
</vxe-grid>
</div>
</div>
</template>
@ -56,14 +56,14 @@ export default {
//
var pageData = {
keyName : 'id',
keyName: 'id',
actions: {
getList: `${BASE_URL.BASE_URL}/AdminUser/v1/list`,
delete: `${BASE_URL.BASE_URL}/AdminUser/v1/batchDelete`
},
start_time :0,
end_time :0,
start_time: 0,
end_time: 0,
//
searchFormData: {
@ -94,7 +94,7 @@ export default {
//
gridOptions: {
height: 600,
height: '100%',
id: 'datagrid_1',
proxyConfig: {
@ -129,6 +129,7 @@ export default {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ title: '操作', slots: { default: 'op' },width:100 },
{ field: 'name', sortable: true, title: '名称' },
{ field: 'nick_name', sortable: true, title: '昵称', showHeaderOverflow: true },
{ field: 'email', sortable: true, title: 'email', showHeaderOverflow: true },
@ -137,10 +138,21 @@ export default {
}
};
pageData.gridOptions = Object.assign({},this.$mk.config.defaults.gridOptions, pageData.gridOptions);
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
return pageData;
},
computed: {
desc() {
return this.$t('pageDesc')
}
},
created() {
this.$nextTick(() => {
//
this.$refs.xGrid.connect(this.$refs.xToolbar)
});
},
// -
onLoad() {
@ -148,14 +160,14 @@ export default {
//
methods: {
onDateChange(date) {
if(date && date.length){
this.start_time = parseInt(date[0]._d.getTime()/ 1000);
this.end_time = parseInt(date[1]._d.getTime()/ 1000);
}else{
if (date && date.length) {
this.start_time = parseInt(date[0]._d.getTime() / 1000);
this.end_time = parseInt(date[1]._d.getTime() / 1000);
} else {
this.start_time = 0;
this.end_time = 0;
}
},
getSearchParms() {
var rules = [];
@ -170,8 +182,8 @@ export default {
let value = this.searchFormData[key];
if (value) {
let mode = findMode(key);
if(mode == "like"){
value = "%" + value +"%";
if (mode == "like") {
value = "%" + value + "%";
}
rules.push({
column: key,
@ -199,20 +211,24 @@ export default {
return this.$mk.getPagedData({ url: this.actions.getList, data: params });
},
pageAdd() {
this.$mk.dialog.open({
page: editPage,
title: "新增用户信息",
pageMode: "add",
dataId: 0,
callback: ({ success }) => {
success && this.$refs.xGrid.commitProxy('query')
}
})
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
this.$mk.dialog.open({
page: editPage,
title: "新增用户信息",
pageMode: "add",
dataId: 0,
callback: ({ success }) => {
success && this.$refs.xGrid.commitProxy('query')
}
})
}
},
pageEdit() {
let row = this.getSelectdRow();
pageEdit(row) {
if (!row) {
this.$mk.msg("请选择行");
return;
@ -228,40 +244,39 @@ export default {
})
},
handleMenuClick(e) {
if (e.key == "delete") {
let rows = this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$mk.confirm('您确定要删除吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.delete,
loading: "删除中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("删除成功");
this.onSearch();
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
pageDelete(row) {
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
console.log(rows);
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$mk.confirm('您确定要删除吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.delete,
loading: "删除中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("删除成功");
this.onSearch();
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
},
onSearch() {
this.$refs.xGrid.commitProxy('query')
@ -279,4 +294,7 @@ export default {
padding: 10px 10px;
background: white;
}
.gridPanel{
height: calc(100vh - 430px);
}
</style>

View File

@ -1,6 +1,7 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理用户账号'
},
HK: {

View File

@ -4,7 +4,16 @@
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #auth_stop_date="{}">
<a-date-picker v-model="auth_stop_date" />
<a-date-picker placeholder="请选择日期" style="width:100%;" v-model="auth_stop_date" />
</template>
<template #company_type="{data}">
<a-select :default-value="companyTypeData[0]" v-model="data.company_type" style="width: 100%" >
<a-select-option v-for="companyType in companyTypeData" :key="companyType">
{{ companyType }}
</a-select-option>
</a-select>
</template>
</vxe-form>
@ -17,7 +26,7 @@
</div>
</template>
<script>
<script>
import BASE_URL from '@/services/base/api.js';
export default {
@ -38,14 +47,14 @@ export default {
//
var pageData = {
companyTypeData : ['普通', '星级','特星级'],
actions: {
create: `${BASE_URL.BASE_URL}/BaseAgent/v1/create`,
update: `${BASE_URL.BASE_URL}/BaseAgent/v1/update`,
get: `${BASE_URL.BASE_URL}/BaseAgent/v1/detail`
},
auth_stop_date:'',
auth_stop_date:'2030-01-01',
formOptions: {
data: {
@ -53,7 +62,7 @@ export default {
"short_name": "",
"logo": "",
"desc": "",
"company_type": "",
"company_type": "普通",
"auth_stop_date": new Date("2080-01-01").getTime() /1000,
"status": 1,
"token": ""
@ -65,10 +74,7 @@ export default {
rules: {
title: [
{ required: true, message: '请输入名称' }
],
company_type: [
{ required: true, message: '请输入代理商类型' }
],
],
},
@ -78,7 +84,7 @@ export default {
children: [
{ field: 'title', title: '代理商名称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商名称' } } },
{ field: 'short_name', title: '代理商简写', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商简写' } } },
{ field: 'company_type', title: '代理商类型', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商类型' } } },
{ title: '代理商类型', span: 24, slots: { default: 'company_type' } },
{ title: '截止时间', span: 24, slots: { default: 'auth_stop_date' } },
{ field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },

View File

@ -0,0 +1,14 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理代理商'
},
HK: {
},
US: {
}
}
}

View File

@ -2,43 +2,42 @@
<div class="page-body">
<!-- 工具条 -->
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">
新增
</a-button>
<a-button @click="pageEdit">编辑</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="delete">
删除
</a-menu-item>
</a-menu>
<a-button> 操作
<a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
<!-- 搜索区 -->
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
<template #date="{}">
<template #date="{}">
<a-form-item label="创建时间" :style="{ display: 'inline-block',width:120 }">
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
<a-range-picker @change="onDateChange" />
</a-form-item>
</a-form-item>
</template>
</vxe-form>
<vxe-toolbar ref="xToolbar" custom>
<template #buttons>
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
</template>
</vxe-toolbar>
<!-- 表格区 -->
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
<div class="gridPanel">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template> awS QSE8WQE
</vxe-grid>
</div>
</div>
</template>
@ -50,6 +49,13 @@ let editPage = () => import("./edit");
export default {
name: 'BaseAgentList',
i18n: require('./i18n'),
props: {
pageMode: {
type: String,
default: "edit"
}
},
data() {
//
@ -83,6 +89,7 @@ export default {
children: [
{ field: 'title', title: '代理商名称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ field: 'short_name', title: '代理商简写', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
{ span: 10, slots: { default: 'date' } }
]
},
@ -93,7 +100,7 @@ export default {
//
gridOptions: {
height: 600,
height: '100%',
id: 'datagrid_1',
proxyConfig: {
@ -128,8 +135,10 @@ export default {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ title: '操作', slots: { default: 'op' },width:100 },
{ field: 'title', sortable: true, title: '代理商名称' },
{ field: 'short_name', sortable: true, title: '代理商简写', showHeaderOverflow: true },
{ field: 'company_type', sortable: true, title: '代理商类型', showHeaderOverflow: true },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true }
]
}
@ -139,7 +148,17 @@ export default {
return pageData;
},
// -
computed: {
desc() {
return this.$t('pageDesc')
}
},
created() {
this.$nextTick(() => {
//
this.$refs.xGrid.connect(this.$refs.xToolbar)
});
},
onLoad() {
},
@ -197,8 +216,10 @@ export default {
return this.$mk.getPagedData({ url: this.actions.getList, data: params });
},
pageAdd() {
this.$mk.dialog.open({
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
this.$mk.dialog.open({
page: editPage,
title: "新增代理商信息",
pageMode: "add",
@ -207,10 +228,10 @@ export default {
success && this.$refs.xGrid.commitProxy('query')
}
})
},
}
},
pageEdit() {
let row = this.getSelectdRow();
pageEdit(row) {
if (!row) {
this.$mk.msg("请选择行");
return;
@ -226,10 +247,10 @@ export default {
})
},
handleMenuClick(e) {
if (e.key == "delete") {
pageDelete(row) {
let rows = this.$refs.xGrid.getCheckboxRecords();
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
@ -259,7 +280,7 @@ export default {
});
}
},
onSearch() {
this.$refs.xGrid.commitProxy('query')
@ -277,4 +298,7 @@ export default {
padding: 10px 10px;
background: white;
}
.gridPanel{
height: calc(100vh - 400px);
}
</style>

View File

@ -1,28 +1,62 @@
<template>
<div class="page-body">
<page-layout :desc="desc">
<div class="page-body">
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #myregion="{}">
<a-input-search placeholder="input search text" enter-button />
</template>
</vxe-form>
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #company_type="{ data }">
<a-select :default-value="companyTypeData[0]" v-model="data.company_type" style="width: 100%">
<a-select-option v-for="companyType in companyTypeData" :key="companyType">
{{ companyType }}
</a-select-option>
</a-select>
</template>
<template #beid="{ data }">
<a-select v-model="data.beid" style="width: 100%">
<a-select-option v-for=" item in config_list" :key="item.id" :value="item.id">
{{ item.title }}
</a-select-option>
</a-select>
</template>
</vxe-form>
<div class="mk-toolbar" v-if="isEdit">
<a-button type="primary" @click="pageAdd">增加服务</a-button>
<a-button @click="pageDel">删除服务</a-button>
</div>
<div class="gridPanel" v-if="isEdit">
<vxe-grid ref='gridService' v-bind="gridServiceOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
</vxe-grid>
</div>
<div>
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
<div class="footerbar">
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</div>
</page-layout>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
import PageLayout from '@/layouts/PageLayout'
let serviceListPage = () => import("../BaseService/list");
export default {
name: 'BaseCompanyEdit',
name: 'BaseCompanyUpdate',
i18n: require('./i18n'),
components: { PageLayout },
props: {
pageMode: {
type: String,
@ -38,91 +72,241 @@ export default {
//
var pageData = {
companyTypeData: ['普通', '星级', '特星级'],
config_list: [],
currentBeid : 0,
actions: {
create: `${BASE_URL.BASE_URL}/BaseCompany/v1/create`,
update: `${BASE_URL.BASE_URL}/BaseCompany/v1/update`,
get: `${BASE_URL.BASE_URL}/BaseCompany/v1/detail`
get: `${BASE_URL.BASE_URL}/BaseCompany/v1/detail`,
configList: `${BASE_URL.BASE_URL}/BaseConfig/v1/list`,
serviceList: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/list`,
serviceAdd: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/add`,
serviceDel: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/detele`,
serviceOpen: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/open`,
serviceClose: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/close`
},
keyName: 'id',
isEdit: false,
formOptions: {
data: {
"name": "",
"nick_name": "",
"avatar": "",
"email": "",
"mobile": "",
"password": "",
"status": 1,
"is_super": 0,
"level": 1,
"token": ""
data: {
"beid": 0,
"ptyid": 0,
"title": "",
"agentid": 0,
"logo": "",
"desc": "",
"domain": "",
"devdomain": "",
"company_type": "",
"address": "",
"longitude": "",
"latitude": "",
"appid": "",
"appsecret": "",
"is_private_cloud": 0,
"auth_stop_date": 0,
"status": 1,
"short_title": "",
"token": "",
"admin_count": 0,
"staff_count": 0,
"store_count": 0
},
titleWidth: 100,
titleAlign: 'right',
rules: {
name: [
{ required: true, message: '请输入名称' }
]
title: [
{ required: true, message: '请输入标题' }
],
desc: [
{ required: true, message: '请输入描述' }
],
},
items: [
{
title: '左侧',
children: [
{ field: 'name', title: '名称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ field: 'mobile', title: '联系电话', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入联系电话' } } },
{ field: 'nick_name', title: '昵称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
{ field: 'email', title: 'email', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入email' } } }
{ field: 'title', title: '公司名', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入公司名' } } },
{ title: '归属项目', span: 6, slots: { default: 'beid' } },
{ title: '公司类型', span: 6, slots: { default: 'company_type' } },
{ field: 'logo', title: 'logo', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
{ field: 'domain', title: 'domain', span: 6, itemRender: { name: '$input' } },
{ field: 'devdomain', title: 'devdomain', span: 6, itemRender: { name: '$input' } },
{ field: 'desc', title: '描述', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ field: 'appid', title: 'appid', span: 6, itemRender: { name: '$input' } },
{ field: 'appsecret', title: 'appsecret', span: 6, itemRender: { name: '$input' } },
{ field: 'token', title: 'token', span: 6, itemRender: { name: '$input' } }
]
}
]
},
// -
gridServiceOptions: {
height: '110%',
id: 'datagrid_service_1',
proxyConfig: {
sort: true, // query
filter: true, // query
props: {
result: 'list', //
total: 'total' //
},
// Promise
ajax: {
// queryreload
query: (options) => {
const { page, sorts } = options;
var params = {};
params.page = page.currentPage;
params.limit = page.pageSize;
params.order_bys = [];
params.search_rules = [];
if (sorts) {
sorts.forEach((v) => {
params.order_bys.push({
column: v.property,
order: v.order
})
});
}
return this.loadDetailData1({ params });
}
}
},
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ field: 'name', sortable: true, title: '服务名' },
{ field: 'title', sortable: true, title: '标题', showHeaderOverflow: true },
{ field: 'port', sortable: true, title: '端口', showHeaderOverflow: true },
{ field: 'status', sortable: true, title: '是否启用', slots: { default: 'status' } }
]
}
};
pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
pageData.gridServiceOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridServiceOptions);
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
return pageData;
},
computed: {
desc() {
return this.$t('editPageDesc')
}
},
created() {
if (this.dataId) {
let dataId = this.getDataId();
if (dataId) {
this.$mk.post({
url: this.actions.get,
loading : "加载中...",
data : {
id: this.dataId
loading: "加载中...",
data: {
id: parseInt(dataId)
}
}).then(a => {
this.formOptions.data = a.data.BaseCompany;
}).catch((a)=>{
this.$mk.error(a.data.msg);
});
}).then(a => {
this.formOptions.data = a.data.BaseCompany;
this.currentBeid = this.formOptions.data.beid;
console.log(this.currentBeid)
}).catch((a) => {
this.$mk.error(a.data.msg);
});
this.isEdit = true;
}
this.$mk.getPagedData({
url: this.actions.configList, data: {
"page": 0,
"limit": 0,
"start_time": 0,
"end_time": 0,
"search_rules": [
],
"order_bys": [
]
}
}).then(r => {
this.config_list = r.list;
this.config_list.splice(0,0,{id:0,title:"请选择"})
});
},
//
methods: {
loadData() {
},
onSwitch(row) {
row.status = row.status ? 0 : 1;
this.$mk.post({
url: row.status ? this.actions.serviceOpen : this.actions.serviceClose,
data: { id: row.id },
}).then(() => {
this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
this.$emit("callback", { success: true });
}).catch((a) => {
this.$mk.error(a.data.msg);
});
},
getDataId() {
let dataId = this.dataId;
if (this.$route.params.id) {
dataId = this.$route.params.id;
}
return parseInt(dataId || 0);
},
loadDetailData1({ params }) {
params.start_time = 0;
params.end_time = 0;
params.beid = this.getDataId();
return this.$mk.getPagedData({ url: this.actions.serviceList, data: params });
},
back() {
if (!this.isEdit) {
this.$closePage({
closeRoute: "/BaseCompany/BaseCompanyAdd"
});
} else {
this.$closePage({
closeRoute: "/BaseCompany/BaseCompanyUpdate"
});
}
this.$openPage('/BaseCompany/BaseCompanyList')
},
ok() {
let save = () => {
let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
let action = !this.isEdit ? this.actions.create : this.actions.update;
let postdata = !this.isEdit ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
if (this.isEdit) {
// postdata = { BaseCompany: postdata }
}
this.$mk.post({
url: action,
loading: "保存中...",
data: postdata
}).then(() => {
this.$mk.success("保存成功");
this.$emit("callback", { success: true });
}).catch((a)=>{
data: postdata,
}).then(() => {
this.$mk.success("保存成功");
if (!this.isEdit) {
this.back();
}
}).catch((a) => {
this.$mk.error(a.data.msg);
});
};
@ -143,9 +327,69 @@ export default {
},
pageDel() {
let rows = this.$refs.gridService.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$mk.confirm('您确定要移除服务吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.serviceDel,
loading: "移除服务中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("移除服务成功");
this.$refs.gridService.commitProxy('query')
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
},
pageAdd() {
this.$mk.dialog.open({
page: serviceListPage,
title: "选择要添加的服务",
pageMode: "select",
pageOptions:{
config_id : this.currentBeid
},
width: 1000,
height: 870,
dataId: 0,
callback: ({ data }) => {
this.$mk.post({
url: this.actions.serviceAdd,
loading: "添加中...",
data: {
"beid": this.getDataId(),
"service_id": data.ids
},
}).then(() => {
this.$mk.success("添加成功");
this.$refs.gridService.commitProxy('query')
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
},
cancel() {
this.$emit("callback", {});
this.back();
}
},
//
@ -156,5 +400,21 @@ export default {
</script>
<style>
.page-body {
background: white;
padding: 10px;
}
.formtabs .ant-tabs-tabpane {
background: white;
padding: 12px;
}
.gridPanel {
height: calc(100vh - 600px);
}
.footerbar {
padding-left: 10px;
}
</style>

View File

@ -0,0 +1,16 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理公司',
editPageDesc:'编辑更新公司'
},
HK: {
},
US: {
}
}
}

View File

@ -2,76 +2,84 @@
<div class="page-body">
<!-- 工具条 -->
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">
新增
</a-button>
<a-button @click="pageEdit">编辑</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="delete">
删除
</a-menu-item>
</a-menu>
<a-button> 操作
<a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
<!-- 搜索区 -->
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
<template #date="{}">
<a-form-item label="创建时间" :style="{ display: 'inline-block',width:120 }">
<a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
<a-range-picker @change="onDateChange" />
</a-form-item>
</template>
</vxe-form>
<vxe-toolbar ref="xToolbar" custom>
<template #buttons>
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
</template>
</vxe-toolbar>
<!-- 表格区 -->
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
<div class="gridPanel">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
</vxe-grid>
</div>
</div>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
let editPage = () => import("./edit");
export default {
name: 'BaseCompanyList',
name: 'BaseConfigList',
i18n: require('./i18n'),
props: {
pageMode: {
type: String,
default: "edit"
}
},
data() {
//
var pageData = {
keyName : 'id',
keyName: 'id',
actions: {
getList: `${BASE_URL.BASE_URL}/BaseCompany/v1/list`,
delete: `${BASE_URL.BASE_URL}/BaseCompany/v1/batchDelete`
},
start_time :0,
end_time :0,
start_time: 0,
end_time: 0,
//
searchFormData: {
name: '',
nick_name: '',
title: '',
desc: '',
},
searchRules: [
{ key: "name", mode: "like" },
{ key: "nick_name", mode: "like" }
{ key: "title", mode: "like" },
{ key: "desc", mode: "like" }
],
@ -81,8 +89,8 @@ export default {
title: '左侧',
span: 20,
children: [
{ field: 'name', title: '名称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
{ field: 'nick_name', title: '昵称', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
{ field: 'title', title: '标题', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
{ field: 'desc', title: '描述', span: 7, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ span: 10, slots: { default: 'date' } }
]
},
@ -93,7 +101,7 @@ export default {
//
gridOptions: {
height: 600,
height: '100%',
id: 'datagrid_1',
proxyConfig: {
@ -128,33 +136,48 @@ export default {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ field: 'name', sortable: true, title: '名称' },
{ field: 'nick_name', sortable: true, title: '昵称', showHeaderOverflow: true },
{ field: 'email', sortable: true, title: 'email', showHeaderOverflow: true },
{ field: 'mobile', sortable: true, title: '电话', showHeaderOverflow: true }
{ title: '操作', slots: { default: 'op' },width:100 },
{ field: 'title', sortable: true, title: '标题' },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
{ field: 'logo', sortable: true, title: 'logo', showHeaderOverflow: true },
{ field: 'domain', sortable: true, title: 'domain', showHeaderOverflow: true },
{ field: 'devdomain', sortable: true, title: 'devdomain', showHeaderOverflow: true },
{ field: 'token', sortable: true, title: 'token', showHeaderOverflow: true }
]
}
};
pageData.gridOptions = Object.assign({},this.$mk.config.defaults.gridOptions, pageData.gridOptions);
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
return pageData;
},
// -
computed: {
desc() {
return this.$t('pageDesc')
}
},
created() {
this.$nextTick(() => {
//
this.$refs.xGrid.connect(this.$refs.xToolbar)
});
},
onLoad() {
},
//
methods: {
onDateChange(date) {
if(date && date.length){
this.start_time = parseInt(date[0]._d.getTime()/ 1000);
this.end_time = parseInt(date[1]._d.getTime()/ 1000);
}else{
if (date && date.length) {
this.start_time = parseInt(date[0]._d.getTime() / 1000);
this.end_time = parseInt(date[1]._d.getTime() / 1000);
} else {
this.start_time = 0;
this.end_time = 0;
}
},
getSearchParms() {
var rules = [];
@ -169,8 +192,8 @@ export default {
let value = this.searchFormData[key];
if (value) {
let mode = findMode(key);
if(mode == "like"){
value = "%" + value +"%";
if (mode == "like") {
value = "%" + value + "%";
}
rules.push({
column: key,
@ -198,39 +221,30 @@ export default {
return this.$mk.getPagedData({ url: this.actions.getList, data: params });
},
pageAdd() {
this.$mk.dialog.open({
page: editPage,
title: "新增公司信息",
pageMode: "add",
dataId: 0,
callback: ({ success }) => {
success && this.$refs.xGrid.commitProxy('query')
}
})
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
this.$openPage("/BaseCompany/BaseCompanyAdd");
}
},
pageEdit() {
let row = this.getSelectdRow();
pageEdit(row) {
if (!row) {
this.$mk.msg("请选择行");
return;
}
this.$mk.dialog.open({
page: editPage,
title: "编辑公司信息",
pageMode: "edit",
dataId: row[this.keyName],
callback: ({ success }) => {
success && this.$refs.xGrid.commitProxy('query')
}
})
this.$openPage("/BaseCompany/BaseCompanyUpdate/" + row[this.keyName]);
},
handleMenuClick(e) {
if (e.key == "delete") {
pageDelete(row) {
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
let rows = this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
@ -260,7 +274,7 @@ export default {
});
}
},
onSearch() {
this.$refs.xGrid.commitProxy('query')
@ -278,4 +292,7 @@ export default {
padding: 10px 10px;
background: white;
}
.gridPanel{
height: calc(100vh - 400px);
}
</style>

View File

@ -1,53 +1,55 @@
<template>
<div class="page-body">
<page-layout :desc="desc">
<div class="page-body">
<a-tabs default-active-key="1" class="formtabs">
<a-tab-pane key="1" tab="基本信息">
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
</vxe-form>
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #myregion="{}">
<a-input-search placeholder="input search text" enter-button />
</template>
</vxe-form>
<a-tabs default-active-key="1" class="formtabs" v-if="isEdit">
<a-tab-pane key="1" tab="服务管理">
<div>
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">增加服务</a-button>
<a-button @click="pageDel">删除服务</a-button>
</div>
<div class="gridPanel">
<vxe-grid ref='gridService' v-bind="gridServiceOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
</vxe-grid>
</div>
</a-tab-pane>
</a-tab-pane>
<a-tab-pane key="2" tab="服务管理" force-render v-if="isEdit">
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">增加服务</a-button>
<a-button @click="pageDel">删除服务</a-button>
</div>
<vxe-grid ref='gridService' v-bind="gridServiceOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
</vxe-grid>
</a-tab-pane>
</a-tabs>
</a-tabs>
</div>
<div class="footerbar">
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</page-layout>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
import PageLayout from '@/layouts/PageLayout'
let serviceListPage = () => import("../BaseService/list");
export default {
name: 'BaseConfigUpdate',
i18n: require('./i18n'),
components: { PageLayout },
props: {
pageMode: {
type: String,
@ -83,11 +85,17 @@ export default {
"logo": "",
"domain": "",
"devdomain": "",
"appid": "0",
"appid": "",
"appsecret": "",
"token": "1",
"token": "",
"status": 1,
"accessexpire": 0
"accessexpire": 73,
"en_title": "",
"en_desc": "",
"sub_title": "",
"en_sub_title": "",
"copy_right": "",
"en_copy_right": ""
},
titleWidth: 100,
@ -106,14 +114,14 @@ export default {
{
title: '左侧',
children: [
{ field: 'title', title: '项目名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ field: 'logo', title: 'logo', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
{ field: 'domain', title: 'domain', span: 24, itemRender: { name: '$input' } },
{ field: 'devdomain', title: 'devdomain', span: 24, itemRender: { name: '$input' } },
{ field: 'appid', title: 'appid', span: 24, itemRender: { name: '$input' } },
{ field: 'appsecret', title: 'appsecret', span: 24, itemRender: { name: '$input' } },
{ field: 'token', title: 'token', span: 24, itemRender: { name: '$input' } }
{ field: 'title', title: '项目名', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
{ field: 'logo', title: 'logo', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入LOGO' } } },
{ field: 'domain', title: 'domain', span: 6, itemRender: { name: '$input' } },
{ field: 'devdomain', title: 'devdomain', span: 6, itemRender: { name: '$input' } },
{ field: 'desc', title: '描述', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ field: 'appid', title: 'appid', span: 6, itemRender: { name: '$input' } },
{ field: 'appsecret', title: 'appsecret', span: 6, itemRender: { name: '$input' } },
{ field: 'token', title: 'token', span: 6, itemRender: { name: '$input' } }
]
}
]
@ -122,7 +130,7 @@ export default {
// -
gridServiceOptions: {
height: 600,
height: '110%',
id: 'datagrid_service_1',
proxyConfig: {
@ -170,6 +178,11 @@ export default {
return pageData;
},
computed: {
desc() {
return this.$t('editPageDesc')
}
},
created() {
let dataId = this.getDataId();
@ -224,16 +237,16 @@ export default {
return this.$mk.getPagedData({ url: this.actions.serviceList, data: params });
},
back(){
if(!this.isEdit){
back() {
if (!this.isEdit) {
this.$closePage({
closeRoute:"/BaseConfig/BaseConfigAdd"
});
}else{
closeRoute: "/BaseConfig/BaseConfigAdd"
});
} else {
this.$closePage({
closeRoute:"/BaseConfig/BaseConfigUpdate"
});
}
closeRoute: "/BaseConfig/BaseConfigUpdate"
});
}
this.$openPage('/BaseConfig/BaseConfigList')
},
ok() {
@ -250,7 +263,7 @@ export default {
data: postdata,
}).then(() => {
this.$mk.success("保存成功");
if(!this.isEdit){
if (!this.isEdit) {
this.back();
}
}).catch((a) => {
@ -344,8 +357,20 @@ export default {
</script>
<style>
.page-body {
background: white;
}
.formtabs .ant-tabs-tabpane {
background: white;
padding: 12px;
}
.gridPanel {
height: calc(100vh - 580px);
}
.footerbar {
padding-left: 10px;
}
</style>

View File

@ -0,0 +1,16 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理项目',
editPageDesc:'编辑更新项目'
},
HK: {
},
US: {
}
}
}

View File

@ -2,27 +2,10 @@
<div class="page-body">
<!-- 工具条 -->
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">
新增
</a-button>
<a-button @click="pageEdit">编辑</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="delete">
删除
</a-menu-item>
</a-menu>
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
<a-button> 操作
<a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<!-- 搜索区 -->
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
@ -39,12 +22,25 @@
</template>
</vxe-form>
<vxe-toolbar ref="xToolbar" custom>
<template #buttons>
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
</template>
</vxe-toolbar>
<!-- 表格区 -->
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
<div class="gridPanel">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
</vxe-grid>
</div>
</div>
@ -55,8 +51,13 @@ import BASE_URL from '@/services/base/api.js';
export default {
name: 'BaseConfigList',
i18n: require('./i18n'),
props: {
pageMode: {
type: String,
default: "edit"
}
},
data() {
//
@ -73,8 +74,8 @@ export default {
//
searchFormData: {
name: '',
nick_name: '',
title: '',
desc: '',
},
searchRules: [
{ key: "title", mode: "like" },
@ -100,7 +101,7 @@ export default {
//
gridOptions: {
height: 600,
height: '100%',
id: 'datagrid_1',
proxyConfig: {
@ -135,6 +136,7 @@ export default {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ title: '操作', slots: { default: 'op' },width:100 },
{ field: 'title', sortable: true, title: '标题' },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
{ field: 'logo', sortable: true, title: 'logo', showHeaderOverflow: true },
@ -145,11 +147,21 @@ export default {
}
};
pageData.gridOptions = Object.assign(this.$mk.config.defaults.gridOptions, pageData.gridOptions);
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
return pageData;
},
// -
computed: {
desc() {
return this.$t('pageDesc')
}
},
created() {
this.$nextTick(() => {
//
this.$refs.xGrid.connect(this.$refs.xToolbar)
});
},
onLoad() {
},
@ -209,14 +221,16 @@ export default {
return this.$mk.getPagedData({ url: this.actions.getList, data: params });
},
pageAdd() {
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
this.$openPage("/BaseConfig/BaseConfigAdd");
}
},
pageEdit() {
let row = this.getSelectdRow();
pageEdit(row) {
if (!row) {
this.$mk.msg("请选择行");
return;
@ -226,10 +240,11 @@ export default {
},
handleMenuClick(e) {
if (e.key == "delete") {
pageDelete(row) {
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
let rows = this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
@ -259,7 +274,7 @@ export default {
});
}
},
onSearch() {
this.$refs.xGrid.commitProxy('query')
@ -277,4 +292,7 @@ export default {
padding: 10px 10px;
background: white;
}
.gridPanel{
height: calc(100vh - 400px);
}
</style>

View File

@ -0,0 +1,14 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理用户账号'
},
HK: {
},
US: {
}
}
}

View File

@ -1,38 +1,47 @@
<template>
<template>
<page-layout :desc="desc" >
<div class="page-body">
<a-tabs default-active-key="1" class="formtabs">
<a-tab-pane key="1" tab="基本信息">
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
<template #myregion="{}">
<a-input-search placeholder="input search text" enter-button />
</template>
</vxe-form>
<div>
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="路由管理" force-render v-if="isEdit">
<a-tabs default-active-key="1" class="formtabs">
<a-tab-pane key="1" tab="路由管理" v-if="isEdit">
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd">增加路由</a-button>
</div>
<vxe-grid ref='gridRouter' v-bind="gridRouterOptions">
<div class="gridPanel">
<vxe-grid ref='gridRouter' v-bind="gridRouterOptions">
<template #op="{ row }">
<vxe-button status="primary" icon="vxe-icon-edit" @click="pageEdit(row)">编辑</vxe-button>
<vxe-button icon="vxe-icon-delete" @click="pageDel(row)">删除</vxe-button>
</template>
</vxe-grid>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="权限管理" force-render v-if="isEdit">
<div class="mk-toolbar">
<a-button type="primary" @click="pageAdd2">增加权限</a-button>
</div>
<div class="gridPanel">
<vxe-grid ref='gridPermission' v-bind="gridPermissionOptions">
<template #op="{ row }">
<vxe-button status="primary" icon="vxe-icon-edit" @click="pageEdit2(row)">编辑</vxe-button>
<vxe-button icon="vxe-icon-delete" @click="pageDel2(row)">删除</vxe-button>
</template>
</vxe-grid>
</div>
</a-tab-pane>
@ -40,17 +49,29 @@
</div>
<div class="footerbar">
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</page-layout>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
import PageLayout from '@/layouts/PageLayout'
let routerEditPage = () => import("./routerEdit");
const routerEditPage = () => import("./routerEdit");
const permissionEditPage = () =>import("./permissionEdit");
export default {
name: 'BaseServiceUpdate',
i18n: require('./i18n'),
components: {PageLayout},
props: {
pageMode: {
type: String,
@ -72,6 +93,8 @@ export default {
get: `${BASE_URL.BASE_URL}/BaseService/v1/detail`,
routerList: `${BASE_URL.BASE_URL}/BaseService/v1/router/list`,
routerDel: `${BASE_URL.BASE_URL}/BaseService/v1/router/batchDelete`,
permissionList:`${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/list`,
permissionDel: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/batchDelete`,
},
keyName: 'id',
@ -105,11 +128,11 @@ export default {
{
title: '左侧',
children: [
{ field: 'name', title: '服务名', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入服务名' } } },
{ field: 'title', title: '服务标题', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入服务标题' } } },
{ field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ field: 'port', title: '端口', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入端口' } } },
{ field: 'version', title: '版本号', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入版本号' } } }
{ field: 'name', title: '服务名', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入服务名' } } },
{ field: 'title', title: '服务标题', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入服务标题' } } },
{ field: 'port', title: '端口', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入端口' } } },
{ field: 'desc', title: '描述', span: 16, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
{ field: 'version', title: '版本号', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入版本号' } } }
]
}
]
@ -119,7 +142,7 @@ export default {
// -
gridRouterOptions: {
height: 600,
height: '110%',
id: 'datagrid_router_1',
proxyConfig: {
@ -168,14 +191,73 @@ export default {
{ field: 'parent_router.name', sortable: true, title: '上级路由', showHeaderOverflow: true },
{ title: '操作', slots: { default: 'op' } }
]
},
// -
gridPermissionOptions: {
height: '110%',
id: 'datagrid_permission_1',
proxyConfig: {
sort: true, // query
filter: true, // query
props: {
result: 'BasePermission', //
total: 'total' //
},
// Promise
ajax: {
// queryreload
query: (options) => {
const { page, sorts } = options;
var params = {};
params.page = page.currentPage;
params.limit = page.pageSize;
params.order_bys = [];
params.search_rules = [];
if (sorts) {
sorts.forEach((v) => {
params.order_bys.push({
column: v.property,
order: v.order
})
});
}
return this.loadDetailData2({ params });
}
}
},
treeConfig: {
transform: true,
expandAll: true,
rowField: 'id',
parentField: 'parent_id'
},
checkboxConfig: {
reserve: true,
highlight: true
},
columns: [
{ field: 'title', sortable: true, title: '权限名' },
{ field: 'permission_code', sortable: true, title: '编号', showHeaderOverflow: true },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
{ title: '操作', slots: { default: 'op' } }
]
}
};
pageData.gridPermissionOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridPermissionOptions);
pageData.gridRouterOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridRouterOptions);
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
return pageData;
},
computed: {
desc() {
return this.$t('editPageDesc')
}
},
created() {
let dataId = this.getDataId();
@ -226,6 +308,17 @@ export default {
}
});
},
loadDetailData2({ params }) {
params.start_time = 0;
params.end_time = 0;
params.service_id = this.getDataId();
return this.$mk.getPagedData({
url: this.actions.permissionList, data: params
});
},
back() {
if (!this.isEdit) {
this.$closePage({
@ -298,6 +391,27 @@ export default {
}
});
},
pageDel2(row) {
let ids = [row.id];
this.$mk.confirm('您确定要移除权限吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.permissionDel,
loading: "移除权限中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("移除权限成功");
this.$refs.gridPermission.commitProxy('query')
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
},
pageAdd() {
this.$mk.dialog.open({
@ -317,7 +431,25 @@ export default {
}
});
},
pageAdd2() {
this.$mk.dialog.open({
page: permissionEditPage,
title: "添加权限",
pageMode: "add",
pageOptions: {
service_id: this.getDataId(),
service : this.formOptions.data.name
},
width: 800,
height: 600,
dataId: 0,
callback: ({ success }) => {
if (success) {
this.$refs.gridPermission.commitProxy('query')
}
}
});
},
getSelectdRow(grid) {
let row = grid.getCurrentRecord();
if (!row) {
@ -345,7 +477,26 @@ export default {
}
});
},
pageEdit2(row) {
this.$mk.dialog.open({
page: permissionEditPage,
title: "编辑权限",
pageMode: "edit",
pageOptions: {
service_id: this.getDataId(),
service : this.formOptions.data.name
},
width: 800,
height: 600,
dataId: row.id,
callback: ({ success }) => {
if (success) {
this.$refs.gridPermission.commitProxy('query')
}
}
});
},
cancel() {
this.back();
}
@ -358,8 +509,16 @@ export default {
</script>
<style>
.page-body{
background: white;
}
.formtabs .ant-tabs-tabpane {
background: white;
padding: 12px;
}
.gridPanel{
height: calc(100vh - 580px);
}
</style>

View File

@ -0,0 +1,16 @@
module.exports = {
messages: {
CN: {
pageDesc:'管理服务,包括路由和权限',
editPageDesc:'编辑更新服务,包括路由和权限'
},
HK: {
},
US: {
}
}
}

View File

@ -2,76 +2,80 @@
<div class="page-body">
<!-- 工具条 -->
<div class="mk-toolbar" v-if="pageMode != 'select'">
<a-button type="primary" @click="pageAdd">
新增
</a-button>
<a-button @click="pageEdit">编辑</a-button>
<a-dropdown>
<a-menu slot="overlay" @click="handleMenuClick">
<a-menu-item key="delete">
删除
</a-menu-item>
</a-menu>
<a-button> 操作
<a-icon type="down" />
</a-button>
</a-dropdown>
</div>
<mk-toolbar v-if="pageMode != 'select'" @toolbarClick="toolbarClick"></mk-toolbar>
<div class="mk-toolbar" v-if="pageMode == 'select'">
<a-button type="primary" @click="pageSelect">
选择
</a-button>
<a-button type="primary" @click="pageSelect">选择</a-button>
</div>
<!-- 搜索区 -->
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
<template #date="{}">
<a-form-item label="创建时间" :style="{ display: 'inline-block',width:120 }">
<a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
<a-range-picker @change="onDateChange" />
</a-form-item>
</template>
</vxe-form>
<vxe-toolbar ref="xToolbar" custom>
<template #buttons>
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
</template>
</vxe-toolbar>
<!-- 表格区 -->
<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
<div class="gridPanel">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<template #status="{ row }">
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
</template>
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
</div>
</template>
</vxe-grid>
</div>
</div>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
export default {
name :'BaseServiceList',
import BASE_URL from '@/services/base/api.js';
export default {
name: 'BaseServiceList',
i18n: require('./i18n'),
props: {
pageMode: {
type: String,
default: "edit"
}
},
pageOptions: {
type: Object
},
},
data() {
//
var pageData = {
keyName : 'id',
keyName: 'id',
actions: {
getList: `${BASE_URL.BASE_URL}/BaseService/v1/list`,
delete: `${BASE_URL.BASE_URL}/BaseService/v1/batchDelete`
delete: `${BASE_URL.BASE_URL}/BaseService/v1/batchDelete`,
serviceOpen: `${BASE_URL.BASE_URL}/BaseService/v1/open`,
serviceClose: `${BASE_URL.BASE_URL}/BaseService/v1/close`,
getConfigServiceList: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/list`,
},
start_time :0,
end_time :0,
start_time: 0,
end_time: 0,
//
searchFormData: {
@ -102,7 +106,7 @@ export default {
//
gridOptions: {
height: 600,
height: '100%',
id: 'datagrid_1',
proxyConfig: {
@ -137,34 +141,65 @@ export default {
columns: [
{ type: 'checkbox', width: 50 },
{ type: 'seq', width: 50 },
{ field: 'name', sortable: true, title: '名称' },
{ field: 'title', sortable: true, title: '标题', showHeaderOverflow: true },
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true },
{ field: 'port', sortable: true, title: '端口', showHeaderOverflow: true },
{ field: 'version', sortable: true, title: '版本', showHeaderOverflow: true }
{ title: '操作', slots: { default: 'op' },width:100 },
{ field: 'name', sortable: true, title: '名称' ,width:180},
{ field: 'title', sortable: true, title: '标题', showHeaderOverflow: true ,width:180},
{ field: 'desc', sortable: true, title: '描述', showHeaderOverflow: true ,width:180},
{ field: 'port', sortable: true, title: '端口', showHeaderOverflow: true ,width:100 },
{ field: 'version', sortable: true, title: '版本', showHeaderOverflow: true ,width:100 },
{ field: 'status', sortable: true, title: '是否启用', slots: { default: 'status' } ,width:100 }
]
}
};
pageData.gridOptions = Object.assign(this.$mk.config.defaults.gridOptions, pageData.gridOptions);
for(let i = 0;i<20;i++){
pageData.gridOptions.columns.push({title:'列'+i,width: 100});
}
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
return pageData;
},
// -
computed: {
desc() {
return this.$t('pageDesc')
}
},
created() {
this.$nextTick(() => {
//
this.$refs.xGrid.connect(this.$refs.xToolbar)
});
},
onLoad() {
},
//
methods: {
onSwitch(row) {
row.status = row.status ? 0 : 1;
this.$mk.post({
url: row.status ? this.actions.serviceOpen : this.actions.serviceClose,
data: { service_id: row.id },
}).then(() => {
this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
this.$emit("callback", { success: true });
}).catch((a) => {
this.$mk.error(a.data.msg);
});
},
onDateChange(date) {
if(date && date.length){
this.start_time = parseInt(date[0]._d.getTime()/ 1000);
this.end_time = parseInt(date[1]._d.getTime()/ 1000);
}else{
if (date && date.length) {
this.start_time = parseInt(date[0]._d.getTime() / 1000);
this.end_time = parseInt(date[1]._d.getTime() / 1000);
} else {
this.start_time = 0;
this.end_time = 0;
}
},
getSearchParms() {
var rules = [];
@ -179,8 +214,8 @@ export default {
let value = this.searchFormData[key];
if (value) {
let mode = findMode(key);
if(mode == "like"){
value = "%" + value +"%";
if (mode == "like") {
value = "%" + value + "%";
}
rules.push({
column: key,
@ -203,76 +238,74 @@ export default {
params.start_time = this.start_time;
params.end_time = this.end_time;
if(this.pageOptions && this.pageOptions.config_id){
params.beid = this.pageOptions.config_id;
return this.$mk.getPagedData({ url: this.actions.getConfigServiceList, data: params });
}
return this.$mk.getPagedData({ url: this.actions.getList, data: params });
},
pageAdd() {
this.$openPage("/BaseService/BaseServiceAdd");
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
this.$openPage("/BaseService/BaseServiceAdd");
}
},
pageEdit() {
let row = this.getSelectdRow();
if (!row) {
this.$mk.msg("请选择行");
return;
}
pageEdit(row) {
this.$openPage("/BaseService/BaseServiceUpdate/" + row[this.keyName]);
},
pageSelect(){
pageSelect() {
let rows = this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
});
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$emit("callback", { data: {ids:ids} });
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$emit("callback", { data: { ids: ids } });
},
handleMenuClick(e) {
if (e.key == "delete") {
let rows = this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$mk.confirm('您确定要删除吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.delete,
loading: "删除中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("删除成功");
this.onSearch();
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
pageDelete(row) {
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords();
let ids = [];
rows.forEach((row) => {
ids.push(row[this.keyName]);
});
if (!ids.length) {
this.$mk.error("请选择行");
return;
}
this.$mk.confirm('您确定要删除吗?').then(type => {
if (type == 'confirm') {
this.$mk.post({
url: this.actions.delete,
loading: "删除中...",
data: {
ids: ids
}
}).then(() => {
this.$mk.success("删除成功");
this.onSearch();
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
});
},
onSearch() {
this.$refs.xGrid.commitProxy('query')
@ -290,4 +323,7 @@ export default {
padding: 10px 10px;
background: white;
}
.gridPanel{
height: calc(100vh - 400px);
}
</style>

View File

@ -0,0 +1,191 @@
<template>
<div class="page-body router-edit-page">
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
</vxe-form>
<div>
<a-button type="primary" @click="ok">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</template>
<script>
import BASE_URL from '@/services/base/api.js';
export default {
props: {
pageMode: {
type: String,
default: "edit"
},
pageOptions: {
type: Object
},
dataId: {
}
},
data() {
//
var pageData = {
actions: {
create: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/create`,
update: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/update`,
get: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/detail`,
list: `${BASE_URL.BASE_URL}/BasePermission/v1/base/permission/list`
},
service_id: 0,
service: '',
parentName: '',
formOptions: {
data: {
"title": "",
"service_id": 0,
"service": "",
"permission_code": "",
"desc": ""
},
titleWidth: 100,
titleAlign: 'right',
rules: {
title: [
{ required: true, message: '请输入标题' }
],
permission_code: [
{ required: true, message: '请输入权限编号' }
],
},
items: [
{
title: '左侧',
children: [
{ field: 'title', title: '权限标题', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入权限标题' } } },
{ field: 'permission_code', title: '权限编号', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入权限编号' } } },
{ field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } }
]
}
]
}
};
pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
return pageData;
},
created() {
this.service_id = this.pageOptions.service_id;
this.service = this.pageOptions.service;
if (this.dataId) {
this.$mk.post({
url: this.actions.get,
loading: "加载中...",
data: {
id: this.dataId
}
}).then(a => {
this.formOptions.data = a.data.router;
if (this.formOptions.data.parent_router) {
this.parentName = this.formOptions.data.parent_router.name;
}
}).catch((a) => {
this.$mk.error(a.data.msg);
});
}
},
//
methods: {
loadData() {
},
loadParentGrid({ params }) {
params.start_time = 0;
params.end_time = 0;
params.service_id = this.service_id;
return this.$mk.getPagedData({ url: this.actions.list, data: params });
},
ok() {
let save = () => {
let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
postdata.service_id = this.service_id;
postdata.service = this.service;
if (this.pageMode != "add") {
//postdata = { BaseService:postdata}
}
this.$mk.post({
url: action,
loading: "保存中...",
data: postdata,
}).then(() => {
this.$mk.success("保存成功");
this.$emit("callback", { success: true });
}).catch((a) => {
this.$mk.error(a.data.msg);
});
};
this.$refs.xForm.validate((a) => {
if (a) {
let count = 0;
for (let name in a) {
a[name];
count++;
}
this.$mk.error(`存在${count}项错误,请检查`);
} else {
save();
}
});
},
cancel() {
this.$emit("callback", {});
},
},
//
watch: {
}
};
</script>
<style>
.router-edit-page .vxe-pulldown {
width: 100%;
}
</style>

View File

@ -167,7 +167,7 @@ export default {
};
pageData.gridRouterParentOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridRouterParentOptions);
pageData.formOptions = Object.assign(this.$mk.config.defaults.formOptions, pageData.formOptions);
pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);
return pageData;
},

View File

@ -91,7 +91,7 @@ export default {
error: '',
form: this.$form.createForm(this),
user: {
mobile: '18678390480',
mobile: '18192398883',
password: '888888'
},
Project: [],

View File

@ -1,4 +1,4 @@
// 视图组件
@ -8,59 +8,63 @@ const view = {
page: () => import('@/layouts/PageView')
}
// 路由组件注册
const BasePermissionRouterMap = {
BasePermission:{
BasePermission: {
name: '权限管理',
icon: 'idcard',
icon: 'idcard',
component: view.page,
meta: {
meta: {
invisible: true,
},
authority: {
permission:[],
permission: [],
}
},
BasePermissionList:{
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionList',
component: () => import('@/pages/Middle/Base/BasePermission/list'),
authority: {
permission:[],
}
BasePermissionList: {
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionList',
component: () => import('@/pages/Middle/Base/BasePermission/list'),
meta: {
invisible: true,
},
BasePermissionAdd:{
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionAdd',
component: () => import('@/pages/Middle/Base/BasePermission/edit'),
meta: {
invisible:true,
},
authority: {
permission:[],
}
},
BasePermissionUpdate:{
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionUpdate/:id',
component: () => import('@/pages/Middle/Base/BasePermission/edit'),
meta: {
invisible:true,
},
authority: {
permission:[],
}
},
BasePermissionDetail:{
meta: {
invisible:true,
},
authority: {
permission: [],
}
},
BasePermissionAdd: {
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionAdd',
component: () => import('@/pages/Middle/Base/BasePermission/edit'),
meta: {
invisible: true,
},
authority: {
permission: [],
}
},
BasePermissionUpdate: {
name: '权限管理',
icon: 'idcard',
path: '/BasePermission/BasePermissionUpdate/:id',
component: () => import('@/pages/Middle/Base/BasePermission/edit'),
meta: {
invisible: true,
},
authority: {
permission: [],
}
},
BasePermissionDetail: {
meta: {
invisible: true,
},
}
}
export default BasePermissionRouterMap