Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工厂数据源切换

Browse Source
yangwl
zhaoxiaolin 1 year ago
parent f3c14a5417
commit c827648fe5
3 changed files with 717 additions and 0 deletions
Show Stats Download Patch File Download Diff File

183
src/views/system/datasource/authUser.vue
Unescape Escape View File

@ -0,0 +1,183 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
<el-form-item label="数据源姓名" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入数据源姓名"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="openSelectUser"
v-hasPermi="['system:role:add']"
>添加数据源</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-circle-close"
size="mini"
:disabled="multiple"
@click="cancelAuthUserAll"
v-hasPermi="['system:role:remove']"
>批量取消授权</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-close"
size="mini"
@click="handleClose"
>关闭</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="数据源账号" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="数据源姓名" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="false"}>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-circle-close"
@click="cancelAuthUser(scope.row)"
v-hasPermi="['system:role:remove']"
>取消授权</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<select-user ref="select" :datasourceId="queryParams.datasourceId" @ok="handleQuery" />
</div>
</template>
<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/datasource";
import selectUser from "./selectUser";
export default {
name: "AuthUser",
dicts: ['sys_normal_disable'],
components: { selectUser },
data() {
return {
// 遮罩层
loading: true,
// 选中数据源组
userIds: [],
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 数据源表格数据
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
datasourceId: undefined,
userName: undefined,
phonenumber: undefined
}
};
},
created() {
const datasourceId = this.$route.params && this.$route.params.datasourceId;
if (datasourceId) {
this.queryParams.datasourceId = datasourceId;
this.getList();
}
},
methods: {
/** 查询授权数据源列表 */
getList() {
this.loading = true;
allocatedUserList(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
// 返回按钮
handleClose() {
const obj = { path: "/system/datasource" };
this.$tab.closeOpenPage(obj);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId)
this.multiple = !selection.length
},
/** 打开授权数据源表弹窗 */
openSelectUser() {
this.$refs.select.show();
},
/** 取消授权按钮操作 */
cancelAuthUser(row) {
const datasourceId = this.queryParams.datasourceId;
this.$modal.confirm('确认要取消该数据源"' + row.userName + '"角色吗？').then(function() {
return authUserCancel({ userId: row.userId, datasourceId: datasourceId });
}).then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
},
/** 批量取消授权按钮操作 */
cancelAuthUserAll(row) {
const datasourceId = this.queryParams.datasourceId;
const userIds = this.userIds.join(",");
this.$modal.confirm('是否取消选中数据源授权数据项？').then(function() {
return authUserCancelAll({ datasourceId: datasourceId, userIds: userIds });
}).then(() => {
this.getList();
this.$modal.msgSuccess("取消授权成功");
}).catch(() => {});
}
}
};
</script>

396
src/views/system/datasource/index.vue
Unescape Escape View File

@ -0,0 +1,396 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="ip:端口" prop="ipPort">
<el-input
v-model="queryParams.ipPort"
placeholder="请输入ip:端口"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="数据源名称" prop="parkName">
<el-input
v-model="queryParams.parkName"
placeholder="请输入数据源名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['energy:datasource:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['energy:datasource:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['energy:datasource:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['energy:datasource:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="datasourceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" v-if="false"/>
<el-table-column label="地址" align="center" prop="url" v-if="false"/>
<!--<el-table-column label="所属系统" align="center" prop="systemType">
<template slot-scope="scope">
<dict-tag :options="dict.type.system_type" :value="scope.row.systemType"/>
</template>
</el-table-column>-->
<el-table-column label="ip:端口" align="center" prop="ipPort"/>
<el-table-column label="用户名" align="center" prop="userName" />
<el-table-column label="密码" align="center" prop="password" />
<el-table-column label="驱动" align="center" prop="driveClassName" v-if="false"/>
<el-table-column label="数据源标识" align="center" prop="poolName" />
<el-table-column label="数据源名称" align="center" prop="parkName" />
<el-table-column label="数据库状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="数据所属部门" align="center" prop="deptName" />
<el-table-column label="0未创建" align="center" prop="schemaCreated" v-if="false"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150px">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['energy:datasource:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['energy:datasource:remove']"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-add"
@click="handleAuthUser(scope.row)"
v-hasPermi="['energy:datasource:edit']"
>分配用户</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-add"
@click="handleTestDB(scope.row)"
v-hasPermi="['energy:datasource:add']"
>测试链接</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改工厂数据库对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<!--
<el-form-item label="所属系统" prop="systemType">
<el-select v-model="form.systemType" placeholder="请选择能源类型名称" size="small">
<el-option
v-for="dict in dict.type.system_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="ip:端口" prop="ipPort">
<el-input v-model="form.ipPort" placeholder="请输入ip:端口/数据库" />
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码" />
</el-form-item>
<!--
<el-form-item label="驱动" prop="driveClassName">
<el-input v-model="form.driveClassName" placeholder="请输入驱动" />
</el-form-item>-->
<el-form-item label="归属部门" prop="deptId">
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
@select="selectDepart" />
</el-form-item>
<el-form-item label="数据源名称" prop="parkName">
<el-input v-model="form.parkName" placeholder="请输入数据源名称" disabled/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDatasource, getDatasource, delDatasource, addDatasource, updateDatasource,changeDBStatus } from "@/api/system/datasource";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "Datasource",
dicts: ['sys_normal_disable','system_type'],
components: { Treeselect },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 工厂数据库表格数据
datasourceList: [],
// 部门树选项
deptOptions: undefined,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
url: null,
ipPort: null,
userName: null,
password: null,
driveClassName: null,
poolName: null,
parkName: null,
status: null,
deptId: null,
schemaCreated: null
},
// 表单参数
form: {},
// 表单校验
rules: {
systemType: [
{ required: true, message: "所属系统不能为空", trigger: "blur" }
],
ipPort: [
{ required: true, message: "地址不能为空", trigger: "blur" }
],
userName: [
{ required: true, message: "用户名不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" }
],
poolName: [
{ required: true, message: "数据源标识不能为空", trigger: "blur" }
],
//parkName: [
// { required: true, message: "数据源名称不能为空", trigger: "blur" }
//],
deptId: [
{ required: true, message: "所属部门不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
/** 查询工厂数据库列表 */
getList() {
this.loading = true;
listDatasource(this.queryParams).then(response => {
this.datasourceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
url: null,
ipPort: null,
userName: null,
password: null,
driveClassName: null,
poolName: null,
parkName: null,
status: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
deptId: null,
schemaCreated: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加工厂数据库";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDatasource(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改工厂数据库";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateDatasource(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDatasource(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除工厂数据库编号为"' + ids + '"的数据项？').then(function() {
return delDatasource(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/datasource/export', {
...this.queryParams
}, `datasource_${new Date().getTime()}.xlsx`)
},
/** 分配用户操作 */
handleAuthUser: function(row) {
const datasourceId = row.id;
this.$router.push("/system/datasource-auth/user/" + datasourceId);
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
selectDepart(val) {
this.form.parkName = val.label
},
/**测试数据库链接**/
handleTestDB:function(row) {
const datasourceId = row.id;
changeDBStatus(datasourceId).then(response => {
debugger
this.$modal.msgSuccess(response.msg);
this.getList();
});
},
}
};
</script>

138
src/views/system/datasource/selectUser.vue
Unescape Escape View File

@ -0,0 +1,138 @@
<template>
<!-- 授权用户 -->
<el-dialog title="选择用户" :visible.sync="visible" width="800px" top="5vh" append-to-body>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input
v-model="queryParams.phonenumber"
placeholder="请输入手机号码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row>
<el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
<el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSelectUser">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { unallocatedUserList, authUserSelectAll} from "@/api/system/datasource";
export default {
dicts: ['sys_normal_disable'],
props: {
// 角色编号
datasourceId: {
type: [Number, String]
}
},
data() {
return {
// 遮罩层
visible: false,
// 选中数组值
userIds: [],
// 总条数
total: 0,
// 未授权用户数据
userList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
datasourceId: undefined,
userName: undefined,
phonenumber: undefined
}
};
},
methods: {
// 显示弹框
show() {
this.queryParams.datasourceId = this.datasourceId;
this.getList();
this.visible = true;
},
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.userIds = selection.map(item => item.userId);
},
// 查询表数据
getList() {
unallocatedUserList(this.queryParams).then(res => {
this.userList = res.rows;
this.total = res.total;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 选择授权用户操作 */
handleSelectUser() {
const datasourceId = this.queryParams.datasourceId;
const userIds = this.userIds.join(",");
if (userIds == "") {
this.$modal.msgError("请选择要分配的用户");
return;
}
authUserSelectAll({ datasourceId: datasourceId, userIds: userIds }).then(res => {
this.$modal.msgSuccess(res.msg);
if (res.code === 200) {
this.visible = false;
this.$emit("ok");
}
});
}
}
};
</script>
Write Preview
Loading…
Cancel
Save