619 lines
18 KiB
Vue
619 lines
18 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 #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" v-if="!isEdit" 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>
|
||
<div v-else>
|
||
{{ currentConfigName || "无" }}
|
||
</div>
|
||
</template>
|
||
<template #logo="{ }">
|
||
<div class="imagePanel">
|
||
<img :src="formOptions.data.logo || uploadDefaultImg" @click.stop="selectFile()">
|
||
</div>
|
||
</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 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: 'BaseCompanyUpdate',
|
||
i18n: require('./i18n'),
|
||
components: {PageLayout},
|
||
props: {
|
||
pageMode: {
|
||
type: String,
|
||
default: "edit"
|
||
},
|
||
dataId: {}
|
||
|
||
},
|
||
|
||
data() {
|
||
|
||
// 页面数据变量
|
||
var pageData = {
|
||
// 公司类型
|
||
companyTypeData: ['日用陶瓷厂', '卫浴工厂', '公司企业', '贸易公司', '其他'],
|
||
// 服务列表
|
||
config_list: [],
|
||
// 当前项目名称
|
||
currentConfigName: "",
|
||
// 当前项目ID
|
||
currentBeid: 0,
|
||
|
||
uploadDefaultImg: null,
|
||
|
||
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`,
|
||
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/batchInsert`,
|
||
serviceDel: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/batchDelete`,
|
||
serviceOpen: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/open`,
|
||
serviceClose: `${BASE_URL.BASE_URL}/BaseCompany/v1/service/close`
|
||
},
|
||
|
||
keyName: 'id',
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 表单数据
|
||
formOptions: {
|
||
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": new Date(2100, 1, 1).getTime() / 10000,
|
||
"status": 1,
|
||
"short_title": "",
|
||
"token": "",
|
||
"name": "",
|
||
"mobile": "",
|
||
"password": "",
|
||
"email": "",
|
||
"admin_count": 0,
|
||
"staff_count": 0,
|
||
"store_count": 0
|
||
},
|
||
// 标题宽度
|
||
titleWidth: 100,
|
||
// 标题对齐方式
|
||
titleAlign: 'right',
|
||
|
||
// 表单校验规则
|
||
rules: {
|
||
title: [
|
||
{message: '请输入标题'}
|
||
],
|
||
beid: [
|
||
{required: true, message: '请选择归属项目'}
|
||
],
|
||
company_type: [
|
||
{required: true, message: '请选择公司类型'}
|
||
],
|
||
name: [
|
||
{required: true, message: '请输入管理员名称'}
|
||
],
|
||
mobile: [
|
||
{required: true, message: '请输入管理员手机号码'}
|
||
],
|
||
password: [
|
||
{required: true, message: '请输入管理员密码'}
|
||
],
|
||
access_expire: [
|
||
{required: true, message: '请输入登录过期截止时间'}
|
||
],
|
||
},
|
||
// 表单项
|
||
items: [
|
||
{
|
||
field: 'title',
|
||
title: '公司名',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {placeholder: '请输入公司名'}}
|
||
},
|
||
{
|
||
field: 'short_title',
|
||
title: '公司简称',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {placeholder: '请输入公司简称'}}
|
||
},
|
||
{field: '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: 'beid', title: '归属项目', span: 12, slots: {default: 'beid'}},
|
||
{field: 'company_type', title: '公司类型', span: 12, slots: {default: 'company_type'}},
|
||
{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: '$textarea', props: {placeholder: '不用填写'}}
|
||
},
|
||
{
|
||
field: 'access_expire',
|
||
dataRule: {type: "timestamp"},
|
||
title: '登录过期截止时间',
|
||
span: 24,
|
||
itemRender: {name: '$input', props: {type: "date", placeholder: '输入登录过期截止时间'}}
|
||
},
|
||
]
|
||
},
|
||
// 新增模式表单项
|
||
addModeItems: [
|
||
{
|
||
field: 'mobile',
|
||
dataRule: {type: "integer"},
|
||
title: '管理员手机',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {placeholder: '请输入管理员手机号'}}
|
||
},
|
||
{
|
||
field: 'password',
|
||
title: '管理员密码',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {type: "password", placeholder: '请输入管理员密码'}}
|
||
},
|
||
{
|
||
field: 'name',
|
||
title: '管理员名称',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {placeholder: '请输入管理员名称'}}
|
||
},
|
||
{
|
||
field: 'email',
|
||
title: '管理员邮箱',
|
||
span: 12,
|
||
itemRender: {name: '$input', props: {placeholder: '请输入管理员邮箱'}}
|
||
}
|
||
],
|
||
|
||
//服务管理 - 数据区
|
||
gridServiceOptions: {
|
||
// 表格高度
|
||
height: '110%',
|
||
// 表格id
|
||
id: 'datagrid_service_1',
|
||
|
||
|
||
// 数据区
|
||
proxyConfig: {
|
||
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
||
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
||
props: {
|
||
result: 'service_detail', // 配置响应结果列表字段
|
||
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: '40'}, // 多选框
|
||
{type: 'seq', width: 50}, // ID序号
|
||
{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) {
|
||
this.$mk.post({
|
||
url: this.actions.get,
|
||
loading: "加载中...",
|
||
data: {
|
||
id: parseInt(dataId)
|
||
}
|
||
}).then(a => {
|
||
if (a.data.BaseCompany.access_expire) {
|
||
a.data.BaseCompany.access_expire = new Date(a.data.BaseCompany.access_expire * 1000);
|
||
}
|
||
this.formOptions.data = a.data.BaseCompany;
|
||
this.currentBeid = this.formOptions.data.beid;
|
||
this.updateCurrentConfigName();
|
||
console.log(this.currentBeid)
|
||
}).catch((a) => {
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
|
||
this.isEdit = true;
|
||
} else {
|
||
// 如果没有id参数，说明是新增模式
|
||
if(this.addModeItems){
|
||
this.addModeItems.forEach(item => {
|
||
this.pageOptions.formOptions.items.push(item);
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
// 通过接口获取数据
|
||
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.updateCurrentConfigName();
|
||
// 获取项目列表
|
||
this.config_list.splice(0, 0, {id: 0, title: "请选择"})
|
||
});
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
// 更新当前项目名称
|
||
updateCurrentConfigName() {
|
||
this.config_list.forEach(item => {
|
||
if (item.id == this.currentBeid) {
|
||
this.currentConfigName = item.title;
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
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;
|
||
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);
|
||
});
|
||
|
||
},
|
||
|
||
// 获取路由的id参数
|
||
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.formOptions.data.beid;
|
||
params.ptyid = 0;
|
||
params.company_id = 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.isEdit ? this.actions.create : this.actions.update;
|
||
// 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
|
||
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.formatFormData({data: postdata, rules: this.formOptions.items});
|
||
|
||
|
||
// 提交数据
|
||
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.$mk.validateForm({form: this.$refs.xForm}).then(() => { // 验证表单
|
||
save(); // 提交保存
|
||
}).catch(count => { // 验证失败
|
||
this.$mk.error(`存在${count}项错误，请检查`);
|
||
});
|
||
|
||
|
||
},
|
||
|
||
// 移除服务
|
||
pageDel() {
|
||
// 获取选中的行
|
||
let rows = this.$refs.gridService.getCheckboxRecords();
|
||
// 数据的id主键
|
||
let ids = [];
|
||
// 遍历选中的行，获取id 主键 赋予到ids数组中
|
||
rows.forEach((row) => {
|
||
ids.push(row[this.keyName]);
|
||
|
||
});
|
||
// 如果ids数组为空，提示请选择行
|
||
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: "选择要添加的服务",
|
||
// 是否显示页脚
|
||
showFooter: true,
|
||
// 传递给服务列表页面的参数
|
||
pageOptions: {
|
||
// 项目id
|
||
config_id: this.currentBeid
|
||
},
|
||
// 选择模式
|
||
pageMode: "select",
|
||
// 宽度
|
||
width: 1000,
|
||
// 高度
|
||
height: 870,
|
||
// 数据主键
|
||
dataId: 0,
|
||
callback: ({data}) => { // 选择服务后的回调
|
||
|
||
// 如果没有选择服务
|
||
if (!data || !data.length) {
|
||
return;
|
||
}
|
||
// 服务的id数组
|
||
let ids = [];
|
||
// 遍历选择的服务，获取服务的id，赋予到ids数组中
|
||
|
||
|
||
data.forEach(item => {
|
||
ids.push(item.service_id)
|
||
})
|
||
// 提交添加服务接口
|
||
this.$mk.post({
|
||
url: this.actions.serviceAdd,
|
||
loading: "添加中...",
|
||
data: {
|
||
// 企业id：获取当前页面的企业路由的id参数
|
||
"company_id": this.getDataId(),
|
||
ptyid: 0,
|
||
// 项目id：获取Beid参数
|
||
beid: this.formOptions.data.beid,
|
||
// 服务id数组
|
||
"services_id": ids
|
||
},
|
||
}).then(() => { // 成功回调
|
||
this.$mk.success("添加成功");
|
||
// 触发 commitProxy 的query方法 刷新服务列表
|
||
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 - 600px);
|
||
}
|
||
|
||
.footerbar {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.imagePanel {
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
width: 100px;
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
}
|
||
</style>
|