@@ -61,7 +61,7 @@ import BASE_URL from '@/services/base/api.js';
export default {
name: 'BaseConfigList',
- i18n: require('./i18n'),
+ i18n: require('./i18n'), // 国际化
props: {
pageMode: {
type: String,
@@ -70,41 +70,50 @@ export default {
},
data() {
- // 页面数据变量
- var pageData = {
+ // 页面数据
+ var pageData = { // 页面数据变量
- keyName: 'id',
- actions: {
+ keyName: 'id', // 主键字段名
+
+
+ // 接口动作
+ actions: { // Api 接口地址
getList: `${BASE_URL.BASE_URL}/BaseCompany/v1/list`,
- delete: `${BASE_URL.BASE_URL}/BaseCompany/v1/batchDelete`
+ delete: `${BASE_URL.BASE_URL}/BaseCompany/v1/batchDelete`,
+ open: `${BASE_URL.BASE_URL}/BaseCompany/v1/open`,
+ close: `${BASE_URL.BASE_URL}/BaseCompany/v1/close`,
},
- start_time: 0,
- end_time: 0,
+ start_time: 0, // 开始时间
+ end_time: 0, // 结束时间
+
//搜索区
searchFormData: {
title: '',
desc: '',
},
+
+
+ // 搜索区配置
searchRules: [
{ key: "title", mode: "like" },
{ key: "desc", mode: "like" }
],
-
+ //搜索区
searchFormItems: [
{
- title: '左侧',
- span: 20,
- children: [
+ title: '左侧', // 标题
+ span: 20, // 栅格宽度
+ children: [ // 子项
{ field: 'title', title: '标题', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入标题' } } },
{ field: 'desc', title: '描述', span: 5, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
- { span: 8, slots: { default: 'date' } },
+ { span: 8, slots: { default: 'date' } }, // 自定义列
{
- align: 'right', span: 4, itemRender: {
- name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } },
+ align: 'right', span: 4, itemRender: { // 按钮列
+ name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, // 搜索按钮
{ props: { type: 'reset', content: '重置' } }]
}
}
@@ -113,14 +122,15 @@ export default {
],
-
//数据区
- gridOptions: {
- height: '100%',
- id: 'datagrid_1',
+ gridOptions: { // 表格配置
+ height: '100%', // 表格高度 100% 会自动撑满父容器
+ stripe: true, // 启用斑马纹
+ id: 'datagrid_1', // 表格唯一标识
- proxyConfig: {
- sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
+ // 接口获取数据
+ proxyConfig: { // 配置代理
+ sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
props: {
result: 'list', // 配置响应结果列表字段
@@ -148,53 +158,66 @@ export default {
}
}
},
+
+
+ // 表格列配置
columns: [
- { type: 'checkbox', width: 50 },
- { type: 'seq', width: 50 },
- { slots: { default: 'logo' }, width: 120, sortable: true, title: '公司Logo', showHeaderOverflow: true },
- { field: 'title', sortable: true, title: '公司名称', width: 250 },
+ { type: 'checkbox', width: 50 }, // 多选框
+ { type: 'seq', width: 30 }, // 序号
+ { slots: { default: 'logo' }, width: 120, sortable: true, title: '公司Logo', showHeaderOverflow: true }, // logo 自定义列
+ { field: 'title', sortable: true, title: '公司名称', width: 250 }, // 公司名称
// 将 auth_stop_date 时间戵转换为日期格式
{ field: 'auth_stop_date', slots: { default: 'auth_stop_date' }, width: 120, sortable: true, title: '授权截止日期', showHeaderOverflow: true },
- { field: 'token', width: 120, sortable: true, title: 'token', showHeaderOverflow: true },
- { field: 'is_private_cloud', width: 110, sortable: true, title: '私有云', showHeaderOverflow: true },
- { field: 'admin_count', width: 110, sortable: true, title: '用户数', showHeaderOverflow: true },
+ { field: 'token', width: 120, sortable: true, title: 'token', showHeaderOverflow: true }, // 公司token
+ { field: 'is_private_cloud', width: 110, sortable: true, title: '私有云', showHeaderOverflow: true }, // 是否私有云
+ { field: 'admin_count', width: 110, sortable: true, title: '用户数', showHeaderOverflow: true }, // 用户数
+ { field: 'status', slots: { default: 'status' }, width: 80, sortable: true, title: '状态', showHeaderOverflow: true }, // 状态
+ { field: 'create_time', width: 160, sortable: true, title: '创建时间', showHeaderOverflow: true }, // 创建时间
{ title: '操作', slots: { default: 'op' }, width: 120 }
]
}
+
};
- pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions); // 合并默认配置
+ pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions); // 合并表格数据
- return pageData;
+ return pageData; // 返回页面数据
},
+
+ // 计算属性
computed: {
+ // 页面描述
desc() {
return this.$t('pageDesc')
}
},
+
+ // 创建完成
created() {
this.$nextTick(() => { // 在下次 DOM 更新循环结束之后执行延迟回调
// 将表格和工具栏进行关联
- this.$refs.xGrid.connect(this.$refs.xToolbar)
+ 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 {
+ } else { // 如果没有值
this.start_time = 0; // 将日期转换为时间戳
this.end_time = 0; // 将日期转换为时间戳
}
-
},
+
+ // 获取搜索参数
getSearchParms() { // 获取搜索参数
var rules = []; // 定义搜索参数
let findMode = k => { // 查找搜索模式
@@ -220,52 +243,46 @@ export default {
}
return rules; // 返回搜索参数
},
+
+ // 获取选中行
getSelectdRow() { // 获取选中行
let row = this.$refs.xGrid.getCurrentRecord(); // 获取当前行
if (!row) { // 如果没有选中行
let rows = this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
if (rows && rows.length) { row = rows[0]; } // 如果有选中行就取第一行
}
- return row;
- },
- loadData({ params }) { // 加载数据
-
- params.start_time = this.start_time;
- params.end_time = this.end_time;
-
-
- return this.$mk.getPagedData({ url: this.actions.getList, data: params });
+ return row; // 返回选中行
},
- //add / log / setting
- toolbarClick(e) { // 工具栏点击事件
- if (e.name == "add") {
+ // 加载数据
+ loadData({ params }) {
+ params.start_time = this.start_time; // 开始时间
+ params.end_time = this.end_time; // 结束时间
+ return this.$mk.getPagedData({ url: this.actions.getList, data: params }); // 获取分页数据
+ },
- this.$openPage("/BaseCompany/BaseCompanyAdd");
+ // 工具栏点击事件 add / log / setting
+ toolbarClick(e) {
+ if (e.name == "add") { // 如果是添加
+ this.$openPage("/BaseCompany/BaseCompanyAdd"); // 打开页面
}
},
- pageEdit(row) { // 编辑
-
+ // 编辑
+ pageEdit(row) {
if (!row) { // 如果没有选中行
this.$mk.msg("请选择行"); // 提示
return; // 返回
}
-
this.$openPage("/BaseCompany/BaseCompanyUpdate/" + row[this.keyName]); // 打开页面
-
},
-
- pageDelete(row) { // 删除
-
-
+ // 删除
+ pageDelete(row) {
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
-
- let ids = [];
+ let ids = []; // 定义id数组
rows.forEach((row) => { // 遍历选中行
- ids.push(row[this.keyName]); // 添加到数组中
-
+ ids.push(row[this.keyName]); // 将选择行的id添加到id数组
});
if (!ids.length) { // 如果没有选中行
@@ -273,28 +290,27 @@ export default {
return;
}
- this.$mk.confirm('您确定要删除吗？').then(type => {
- if (type == 'confirm') {
+ this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
+ if (type == 'confirm') { // 如果确认删除
this.$mk.post({
- url: this.actions.delete,
- loading: "删除中...",
+ url: this.actions.delete, // 请求删除数据地址
+ loading: "删除中...", // 加载提示
data: {
- ids: ids
+ ids: ids // 传递id数组
}
- }).then(() => {
- this.$mk.success("删除成功");
- this.onSearch();
- }).catch((a) => {
- this.$mk.error(a.data.msg);
+ }).then(() => { // 成功
+ this.$mk.success("删除成功"); // 提示成功
+ this.onSearch(); // 重新加载数据
+ }).catch((a) => { // 失败
+ this.$mk.error(a.data.msg); // 提示错误信息
});
}
});
-
-
-
},
- onSearch() { // 搜索
- this.$refs.xGrid.commitProxy('query')
+
+ // 搜索
+ onSearch() {
+ this.$refs.xGrid.commitProxy('query') // 提交搜索
},
diff --git a/src/pages/Middle/Base/BaseConfig/edit.vue b/src/pages/Middle/Base/BaseConfig/edit.vue
index c754a7b..b4d9660 100644
--- a/src/pages/Middle/Base/BaseConfig/edit.vue
+++ b/src/pages/Middle/Base/BaseConfig/edit.vue
@@ -11,7 +11,7 @@
-
+
@@ -70,7 +70,7 @@ export default {
// 页面数据变量
var pageData = {
-
+ // 接口地址
actions: {
create: `${BASE_URL.BASE_URL}/BaseConfig/v1/create`,
update: `${BASE_URL.BASE_URL}/BaseConfig/v1/update`,
@@ -81,10 +81,13 @@ export default {
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": "",
@@ -106,8 +109,9 @@ export default {
"slogan": "",
"en_slogan": ""
},
-
+ // 表单标题宽度
titleWidth: 100,
+ // 表单标题对齐方式
titleAlign: 'right',
rules: {
@@ -204,19 +208,22 @@ export default {
}
},
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 => {
+ }).then(a => { // 成功回调
this.formOptions.data = a.data.BaseConfig;
- }).catch((a) => {
+ }).catch((a) => { // 失败回调
this.$mk.error(a.data.msg);
});
@@ -226,63 +233,79 @@ export default {
},
// 函数
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;
+ 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;
+ 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(() => {
+ }).then(() => { // 成功回调
this.$mk.msg(row.status ? "开启服务完成" : "停止服务完成");
this.$emit("callback", { success: true });
- }).catch((a) => {
+ }).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);
+ return parseInt(dataId || 0); // 返回ID 格式化为数字
},
+
+ // 加载详情数据
loadDetailData1({ params }) {
-
-
- params.start_time = 0;
- params.end_time = 0;
- params.beid = this.getDataId();
-
+ 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() {
+ // 保存
+ 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 }
}
@@ -290,18 +313,18 @@ export default {
url: action,
loading: "保存中...",
data: postdata,
- }).then(() => {
+ }).then(() => { // 成功回调
this.$mk.success("保存成功");
if (!this.isEdit) {
this.back();
}
- }).catch((a) => {
+ }).catch((a) => { // 失败回调
this.$mk.error(a.data.msg);
});
};
-
+ // 验证表单
this.$refs.xForm.validate((a) => {
-
+ // 如果有错误则提示错误
if (a) {
let count = 0;
for (let name in a) {
@@ -310,59 +333,82 @@ export default {
}
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(() => {
+ }).then(() => { // 成功回调
this.$mk.success("移除服务成功");
+ // 刷新服务列表
this.$refs.gridService.commitProxy('query')
- }).catch((a) => {
+ }).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: "添加中...",
@@ -370,16 +416,18 @@ export default {
"beid": this.getDataId(),
"service_id": ids
},
- }).then(() => {
+ }).then(() => { // 成功回调
this.$mk.success("添加成功");
-
+ // 刷新数据
this.$refs.gridService.commitProxy('query')
- }).catch((a) => {
+ }).catch((a) => { // 失败回调
this.$mk.error(a.data.msg);
});
}
});
},
+
+ // 取消
cancel() {
this.back();
}
diff --git a/src/pages/Middle/Base/BaseConfig/list.vue b/src/pages/Middle/Base/BaseConfig/list.vue
index 65311bf..0f032ba 100644
--- a/src/pages/Middle/Base/BaseConfig/list.vue
+++ b/src/pages/Middle/Base/BaseConfig/list.vue
@@ -177,7 +177,7 @@ export default {
// 函数
methods: {
-
+ // 日期选择
onDateChange(date) {
if (date && date.length) {
this.start_time = parseInt(date[0]._d.getTime() / 1000);
@@ -188,6 +188,8 @@ export default {
}
},
+
+ // 获取搜索条件
getSearchParms() {
var rules = [];
let findMode = k => {
@@ -204,7 +206,7 @@ export default {
if (mode == "like") {
value = "%" + value + "%";
}
- rules.push({
+ rules.push({ // 搜索条件
column: key,
mode: mode,
value: value
@@ -213,6 +215,8 @@ export default {
}
return rules;
},
+
+ // 获取选中行
getSelectdRow() {
let row = this.$refs.xGrid.getCurrentRecord();
if (!row) {
@@ -221,6 +225,8 @@ export default {
}
return row;
},
+
+ // 加载数据
loadData({ params }) {
params.start_time = this.start_time;
@@ -233,11 +239,11 @@ export default {
//add / log / setting
toolbarClick(e) {
if (e.name == "add") {
-
this.$openPage("/BaseConfig/BaseConfigAdd");
}
},
+ // 编辑
pageEdit(row) {
if (!row) {
@@ -249,6 +255,7 @@ export default {
},
+ // 删除
pageDelete(row) {
diff --git a/src/pages/Middle/Base/BaseService/edit.vue b/src/pages/Middle/Base/BaseService/edit.vue
index a235fe3..9e737a9 100644
--- a/src/pages/Middle/Base/BaseService/edit.vue
+++ b/src/pages/Middle/Base/BaseService/edit.vue
@@ -490,6 +490,7 @@ export default {
dataId: row.id,
callback: ({ success }) => {
if (success) {
+ // 触发 commitProxy 的query方法 刷新表格
this.$refs.gridPermission.commitProxy('query')
}
}