374 lines
12 KiB
Vue
374 lines
12 KiB
Vue
<template>
|
||
<div class="page-body">
|
||
|
||
<a-row type="flex">
|
||
<a-col :flex="$mk.config.ui.searchFlex">
|
||
<!-- 搜索区 -->
|
||
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
|
||
<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>
|
||
</template>
|
||
</vxe-form>
|
||
</a-col>
|
||
<a-col :flex="$mk.config.ui.toolbarFlex">
|
||
<!-- 工具条 -->
|
||
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
|
||
|
||
|
||
<vxe-toolbar ref="xToolbar" custom>
|
||
<template #buttons>
|
||
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
<!-- 表格区 -->
|
||
<div class="gridPanel">
|
||
<vxe-grid ref='xGrid' v-bind="gridOptions">
|
||
<template #status="{ row }"><!-- 这里是自定义列 -->
|
||
<!-- 转换 row.status 的值 如果是true显示开，否则显示关-->
|
||
<a-switch :checked="row.status ? true : false" @change="onSwitch(row, 'status')" />
|
||
</template>
|
||
<template #op="{ row }">
|
||
<div class="oplinks">
|
||
<a @click.stop="pageEditSql(row)" title="SQL配置"><a-icon type="database" /></a>
|
||
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
|
||
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
|
||
</div>
|
||
</template>
|
||
|
||
<template #logo="{ row }">
|
||
<img v-if="row.logo" :src="row.logo" style="width: 60px;" />
|
||
<span v-else>无</span>
|
||
</template>
|
||
</vxe-grid>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import BASE_URL from '@/services/base/api.js';
|
||
|
||
export default {
|
||
name: 'BaseConfigList',
|
||
i18n: require('./i18n'), // 国际化
|
||
props: {
|
||
pageMode: {
|
||
type: String,
|
||
default: "edit"
|
||
}
|
||
},
|
||
data() {
|
||
|
||
// 页面数据
|
||
var pageData = { // 页面数据变量
|
||
|
||
keyName: 'id', // 主键字段名
|
||
|
||
|
||
// 接口动作
|
||
actions: { // Api 接口地址
|
||
getList: `${BASE_URL.BASE_URL}/BaseCompany/v1/list`,
|
||
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, // 结束时间
|
||
|
||
|
||
//搜索区
|
||
searchFormData: {
|
||
title: '',
|
||
desc: '',
|
||
},
|
||
|
||
|
||
// 搜索区配置
|
||
searchRules: [
|
||
{ key: "title", mode: "like" },
|
||
{ key: "desc", mode: "like" }
|
||
],
|
||
|
||
|
||
//搜索区
|
||
searchFormItems: [
|
||
{
|
||
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' } }, // 自定义列
|
||
{
|
||
align: 'right', span: 4, itemRender: { // 按钮列
|
||
name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, // 搜索按钮
|
||
{ props: { type: 'reset', content: '重置' } }]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
|
||
|
||
//数据区
|
||
gridOptions: { // 表格配置
|
||
height: '100%', // 表格高度 100% 会自动撑满父容器
|
||
stripe: true, // 启用斑马纹
|
||
id: 'datagrid_1', // 表格唯一标识
|
||
|
||
// 接口获取数据
|
||
proxyConfig: { // 配置代理
|
||
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
||
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
||
props: {
|
||
result: 'list', // 配置响应结果列表字段
|
||
total: 'total' // 配置响应结果总页数字段
|
||
},
|
||
// 接收Promise
|
||
ajax: {
|
||
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
|
||
query: (options) => { // options 为当前表格的配置项
|
||
const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
|
||
var params = {}; // 定义请求参数
|
||
params.page = page.currentPage; // 当前页码
|
||
params.limit = page.pageSize; // 每页条数
|
||
params.order_bys = []; // 排序信息
|
||
params.search_rules = this.getSearchParms(); // 搜索信息
|
||
if (sorts) { // 如果有排序信息
|
||
sorts.forEach((v) => { // 遍历排序信息
|
||
params.order_bys.push({ // 添加排序信息
|
||
column: v.property, // 字段名
|
||
order: v.order // 排序方式
|
||
})
|
||
});
|
||
}
|
||
return this.loadData({ params }); // 返回请求结果
|
||
}
|
||
}
|
||
},
|
||
|
||
|
||
// 表格列配置
|
||
columns: [
|
||
{ 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', formatter: "formatDate", width: 120, 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', formatter: "formatDate", width: 160, sortable: true, title: '创建时间', showHeaderOverflow: true }, // 创建时间
|
||
{ title: '操作', slots: { default: 'op' }, width: 150 }
|
||
]
|
||
}
|
||
|
||
};
|
||
|
||
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions); // 合并表格数据
|
||
|
||
return pageData; // 返回页面数据
|
||
},
|
||
|
||
// 计算属性
|
||
computed: {
|
||
// 页面描述
|
||
desc() {
|
||
return this.$t('pageDesc')
|
||
}
|
||
},
|
||
|
||
// 创建完成
|
||
created() {
|
||
this.$nextTick(() => { // 在下次 DOM 更新循环结束之后执行延迟回调
|
||
// 将表格和工具栏进行关联
|
||
this.$refs.xGrid.connect(this.$refs.xToolbar) // 将表格和工具栏进行关联
|
||
});
|
||
},
|
||
// 挂载完成
|
||
onLoad() {
|
||
|
||
},
|
||
// 动作
|
||
methods: {
|
||
|
||
// 切换服务状态
|
||
onSwitch(row) {
|
||
row.status = row.status ? 0 : 1; // 切换状态
|
||
// post请求数据
|
||
this.$mk.post({
|
||
// 通过判断状态来判断是开启还是关闭服务
|
||
url: row.status ? this.actions.open : this.actions.close,
|
||
loading: "设置中...",
|
||
data: { company_id: row.id },
|
||
}).then(() => { // 成功回调
|
||
this.$mk.msg(row.status ? "启用公司完成" : "停用公司完成");
|
||
}).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 { // 如果没有值
|
||
this.start_time = 0; // 将日期转换为时间戳
|
||
this.end_time = 0; // 将日期转换为时间戳
|
||
}
|
||
},
|
||
|
||
// 获取搜索参数
|
||
getSearchParms() { // 获取搜索参数
|
||
var rules = []; // 定义搜索参数
|
||
let findMode = k => { // 查找搜索模式
|
||
for (let i in this.searchRules) { // 遍历搜索规则
|
||
if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
|
||
}
|
||
return "equal"; // 如果没有找到就返回等于
|
||
};
|
||
|
||
for (let key in this.searchFormData) { // 遍历搜索表单数据
|
||
let value = this.searchFormData[key]; // 获取值
|
||
if (value) { // 如果有值
|
||
let mode = findMode(key); // 获取搜索模式
|
||
if (mode == "like") { // 如果是模糊搜索
|
||
value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
|
||
}
|
||
rules.push({ // 添加搜索参数
|
||
column: key, // 字段名
|
||
mode: mode, // 搜索模式
|
||
value: value // 值
|
||
});
|
||
}
|
||
}
|
||
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 }); // 获取分页数据
|
||
},
|
||
|
||
// 工具栏点击事件 add / log / setting
|
||
toolbarClick(e) {
|
||
if (e.name == "add") { // 如果是添加
|
||
this.$openPage("/BaseCompany/BaseCompanyAdd"); // 打开页面
|
||
}
|
||
},
|
||
|
||
// 编辑
|
||
pageEdit(row) {
|
||
if (!row) { // 如果没有选中行
|
||
this.$mk.msg("请选择行"); // 提示
|
||
return; // 返回
|
||
}
|
||
this.$openPage("/BaseCompany/BaseCompanyUpdate/" + row[this.keyName]); // 打开页面
|
||
},
|
||
pageEditSql(row) {
|
||
if (!row) { // 如果没有选中行
|
||
this.$mk.msg("请选择行"); // 提示
|
||
return; // 返回
|
||
}
|
||
|
||
this.$mk.dialog.open({
|
||
page: () => import("./server"),
|
||
title: "修改SQL配置",
|
||
dataId: row[this.keyName],
|
||
callback: ({ success }) => {
|
||
success && this.$refs.xGrid.commitProxy('query')
|
||
}
|
||
})
|
||
|
||
},
|
||
|
||
|
||
// 删除
|
||
pageDelete(row) {
|
||
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
|
||
let ids = []; // 定义id数组
|
||
rows.forEach((row) => { // 遍历选中行
|
||
ids.push(row[this.keyName]); // 将选择行的id添加到id数组
|
||
});
|
||
|
||
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 // 传递id数组
|
||
}
|
||
}).then(() => { // 成功
|
||
this.$mk.success("删除成功"); // 提示成功
|
||
this.onSearch(); // 重新加载数据
|
||
}).catch((a) => { // 失败
|
||
this.$mk.error(a.data.msg); // 提示错误信息
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 搜索
|
||
onSearch() {
|
||
this.$refs.xGrid.commitProxy('query') // 提交搜索
|
||
},
|
||
|
||
|
||
},
|
||
// 监听属性
|
||
watch: {
|
||
|
||
}
|
||
};
|
||
|
||
</script>
|
||
<style scoped lang="less">
|
||
.page-body {
|
||
padding: 30px;
|
||
background: @base-bg-color;
|
||
}
|
||
|
||
.gridPanel {
|
||
height: calc((100vh*2) - 400px);
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.oplinks svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
margin: 0 5px 0 0;
|
||
}
|
||
</style> |