471 lines
15 KiB
Vue
471 lines
15 KiB
Vue
<template>
|
||
<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 #logo="{}">
|
||
<div class="imagePanel">
|
||
<img :src="formOptions.data.logo || uploadDefaultImg" @click.stop="selectFile()">
|
||
</div>
|
||
</template>
|
||
</vxe-form>
|
||
|
||
<!-- 如果是编辑模式，显示服务管理 -->
|
||
<a-tabs default-active-key="1" class="formtabs" v-if="isEdit">
|
||
<a-tab-pane key="1" tab="服务管理">
|
||
|
||
<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-tabs>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="footerbar">
|
||
<a-button type="primary" @click="ok">确定</a-button>
|
||
<a-button @click="cancel">取消</a-button>
|
||
</div>
|
||
|
||
<input type="file" ref="imageInput" @change="upload()" style="display:none;">
|
||
</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,
|
||
default: "edit"
|
||
},
|
||
dataId: {
|
||
}
|
||
|
||
},
|
||
|
||
data() {
|
||
|
||
// 页面数据变量
|
||
var pageData = {
|
||
// 接口地址
|
||
actions: {
|
||
create: `${BASE_URL.BASE_URL}/BaseConfig/v1/create`,
|
||
update: `${BASE_URL.BASE_URL}/BaseConfig/v1/update`,
|
||
get: `${BASE_URL.BASE_URL}/BaseConfig/v1/detail`,
|
||
serviceList: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/list`,
|
||
serviceAdd: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/add`,
|
||
serviceDel: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/detele`,
|
||
serviceOpen: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/open`,
|
||
serviceClose: `${BASE_URL.BASE_URL}/BaseConfig/v1/service/close`
|
||
},
|
||
// 上传默认图片
|
||
uploadDefaultImg: null,
|
||
// 主键id名
|
||
keyName: 'id',
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 表单数据
|
||
formOptions: {
|
||
data: {
|
||
"title": "",
|
||
"desc": "",
|
||
"logo": "",
|
||
"domain": "",
|
||
"devdomain": "",
|
||
"appid": "",
|
||
"appsecret": "",
|
||
"token": "",
|
||
"status": 1,
|
||
"accessexpire": 73,
|
||
"en_title": "",
|
||
"en_desc": "",
|
||
"sub_title": "",
|
||
"en_sub_title": "",
|
||
"copy_right": "",
|
||
"en_copy_right": "",
|
||
"slogan": "",
|
||
"en_slogan": ""
|
||
},
|
||
// 表单标题宽度
|
||
titleWidth: 100,
|
||
// 表单标题对齐方式
|
||
titleAlign: 'right',
|
||
|
||
rules: {
|
||
title: [
|
||
{ required: true, message: '请输入标题' }
|
||
],
|
||
desc: [
|
||
{ required: true, message: '请输入描述' }
|
||
],
|
||
},
|
||
|
||
items: [
|
||
{
|
||
title: '左侧',
|
||
children: [
|
||
{ field: 'title', title: '项目名称', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
|
||
{ field: 'en_title', title: '项目名称(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入项目名' } } },
|
||
{ field: 'sub_title', title: '副标题', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
|
||
{ field: 'en_sub_title', title: '副标题(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入副标题' } } },
|
||
{ field: 'copy_right', title: '版权', span: 12,defaultValue:'显示Copyright 2022 广东正极科技有限公司出品', itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
|
||
{ field: 'en_copy_right', title: '版权(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入版权' } } },
|
||
{ field: 'slogan', title: '标语', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入标语' } } },
|
||
{ field: 'en_slogan', title: '标语(英文)', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入标语' } } },
|
||
{ field: 'desc', title: '项目描述', span: 24, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } },
|
||
{ field: 'en_desc', title: '项目描述(英文)', span: 24, itemRender: { name: '$textarea', props: { placeholder: '请输入描述' } } },
|
||
|
||
|
||
{ field: 'logo', title: 'Logo', slots: { default: 'logo' }, span: 24 },
|
||
{ field: 'domain', title: '网址域名', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'devdomain', title: '开发域名', span: 12, itemRender: { name: '$input' } },
|
||
|
||
{ field: 'appid', title: 'AppID', span: 24, itemRender: { name: '$input' } },
|
||
{ field: 'appsecret', title: 'AppSecret', span: 24, itemRender: { name: '$textarea' } },
|
||
{ field: 'token', title: '项目Token', span: 24, itemRender: { name: '$textarea' } }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
|
||
|
||
//服务管理 - 数据区
|
||
gridServiceOptions: {
|
||
height: '110%',
|
||
id: 'datagrid_service_1',
|
||
|
||
proxyConfig: {
|
||
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
||
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
||
props: {
|
||
result: 'list', // 配置响应结果列表字段
|
||
total: 'total' // 配置响应结果总页数字段
|
||
},
|
||
// 接收Promise
|
||
ajax: {
|
||
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
|
||
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.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() {
|
||
// 设置图片默认地址
|
||
this.uploadDefaultImg = this.$mk.config.uploadDefaultImg;
|
||
// 获取页面路由ID
|
||
let dataId = this.getDataId();
|
||
// 如果有ID则为编辑模式 需要加载数据
|
||
if (dataId) {
|
||
// post请求数据
|
||
this.$mk.post({
|
||
url: this.actions.get,
|
||
loading: "加载中...",
|
||
data: {
|
||
id: parseInt(dataId)
|
||
}
|
||
}).then(a => { // 成功回调
|
||
this.formOptions.data = a.data.BaseConfig;
|
||
}).catch((a) => { // 失败回调
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
|
||
this.isEdit = true;
|
||
}
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
// 查询文件列表
|
||
selectFile() {
|
||
this.$refs.imageInput.click();
|
||
},
|
||
// 上传文件
|
||
upload() {
|
||
const imgFile = this.$refs.imageInput.files[0] // 获取文件
|
||
this.$mk.uploadFile(imgFile, 'png', (url) => { // 上传文件
|
||
this.formOptions.data.logo = url; // 设置图片地址
|
||
});
|
||
},
|
||
// 切换服务状态
|
||
onSwitch(row) {
|
||
row.status = row.status ? 0 : 1; // 切换状态
|
||
// post请求数据
|
||
this.$mk.post({
|
||
// 通过判断状态来判断是开启还是关闭服务
|
||
url: row.status ? this.actions.serviceOpen : this.actions.serviceClose,
|
||
loading: "加载中...",
|
||
data: { id: row.id },
|
||
}).then(() => { // 成功回调
|
||
this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
|
||
this.$emit("callback", { success: true });
|
||
}).catch((a) => { // 失败回调
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
|
||
},
|
||
// 获取页面路由ID
|
||
getDataId() {
|
||
let dataId = this.dataId;
|
||
// 如果有路由ID则使用路由ID
|
||
if (this.$route.params.id) {
|
||
dataId = this.$route.params.id;
|
||
}
|
||
return parseInt(dataId || 0); // 返回ID 格式化为数字
|
||
},
|
||
|
||
// 加载详情数据
|
||
loadDetailData1({ params }) {
|
||
params.start_time = 0; // 开始时间
|
||
params.end_time = 0; // 结束时间
|
||
params.beid = this.getDataId(); // 项目ID
|
||
// 获取项目的服务列表
|
||
return this.$mk.getPagedData({ url: this.actions.serviceList, data: params });
|
||
},
|
||
|
||
// 返回
|
||
back() {
|
||
// 如果是新增页面则关闭当前页面
|
||
if (!this.isEdit) {
|
||
this.$closePage({
|
||
closeRoute: "/BaseConfig/BaseConfigAdd"
|
||
});
|
||
} else {
|
||
// 如果是编辑页面则关闭当前页面
|
||
this.$closePage({
|
||
closeRoute: "/BaseConfig/BaseConfigUpdate"
|
||
});
|
||
}
|
||
// 打开列表页面
|
||
this.$openPage('/BaseConfig/BaseConfigList')
|
||
},
|
||
|
||
// 保存
|
||
ok() {
|
||
// 保存函数
|
||
let save = () => {
|
||
// 判断是否是编辑模式 如果是编辑模式则使用更新接口 如果是新增模式则使用新增接口
|
||
let action = !this.isEdit ? this.actions.create : this.actions.update;
|
||
// 如果是新增模式则需要添加ID 如果是编辑模式则不需要添加ID 如果是编辑模式则需要添加BaseConfig
|
||
let postdata = !this.isEdit ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
|
||
// 如果是编辑模式则需要添加BaseConfig
|
||
if (this.isEdit) {
|
||
postdata = { BaseConfig: postdata }
|
||
}
|
||
this.$mk.post({
|
||
url: action,
|
||
loading: "保存中...",
|
||
data: postdata,
|
||
}).then(() => { // 成功回调
|
||
this.$mk.success("保存成功");
|
||
if (!this.isEdit) {
|
||
this.back();
|
||
}
|
||
}).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();
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
// 移除服务
|
||
pageDel() {
|
||
// 获取选中的行
|
||
let rows = this.$refs.gridService.getCheckboxRecords();
|
||
// 获取选中行的ID
|
||
let ids = [];
|
||
// 遍历选中行
|
||
rows.forEach((row) => {
|
||
// 添加ID
|
||
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",
|
||
// 设置页面宽度
|
||
width: 1000,
|
||
// 设置页面高度
|
||
height: 870,
|
||
// 设置页面ID数据
|
||
dataId: 0,
|
||
// 设置回调函数
|
||
callback: ({ data }) => {
|
||
// 如果没有选中行则提示错误
|
||
if (!data || !data.length) {
|
||
return;
|
||
}
|
||
// 获取选中行的ID
|
||
let ids = [];
|
||
// 遍历选中行
|
||
data.forEach(item => {
|
||
ids.push(item.id)
|
||
})
|
||
// 添加服务
|
||
this.$mk.post({
|
||
url: this.actions.serviceAdd,
|
||
loading: "添加中...",
|
||
data: {
|
||
"beid": this.getDataId(),
|
||
"service_id": ids
|
||
},
|
||
}).then(() => { // 成功回调
|
||
this.$mk.success("添加成功");
|
||
// 刷新数据
|
||
this.$refs.gridService.commitProxy('query')
|
||
}).catch((a) => { // 失败回调
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 取消
|
||
cancel() {
|
||
this.back();
|
||
}
|
||
},
|
||
// 监听属性
|
||
watch: {
|
||
|
||
}
|
||
};
|
||
|
||
</script>
|
||
<style scoped lang="less">
|
||
.page-body {
|
||
padding: 30px;
|
||
background: @base-bg-color;
|
||
}
|
||
|
||
.formtabs .ant-tabs-tabpane {
|
||
/* background: white; */
|
||
padding: 12px;
|
||
}
|
||
|
||
.gridPanel {
|
||
height: calc(100vh - 580px);
|
||
}
|
||
|
||
.footerbar {
|
||
padding-left: 10px;
|
||
}
|
||
.imagePanel {
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
width: 100px;
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
}
|
||
</style>
|