cxc/qiaoba-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
ailanyin
2023-06-13 17:21:00 +08:00
parent 0e68f536d6
commit 69cde791e2
16 changed files with 587 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/api/tenant/tenant.js
View File

@ -58,3 +58,62 @@ export function refreshCache() {
method: "delete",
});
}
// 租户模式设置
export function tenantSetting(params) {
return request({
url: "/tenant/setting",
method: "put",
params,
});
}
/**
* 获取数据源列表
* @return {*}
*/
export function datasourceList(tenantId) {
return request({
url: "/tenant/datasource/list",
method: "GET",
params: { tenantId },
});
}
/**
* 添加数据源
* @param data
* @return {*}
*/
export function insertDatasource(data) {
return request({
url: "/tenant/datasource",
method: "POST",
data,
});
}
/**
* 修改数据源
* @param data
* @return {*}
*/
export function updateDatasource(data) {
return request({
url: "/tenant/datasource",
method: "PUT",
data,
});
}
/**
* 删除数据源
* @param ids
* @return {*}
*/
export function deleteDatasource(ids) {
return request({
url: `/tenant/datasource/${ids}`,
method: "DELETE",
});
}

1
src/components/ImageUpload/index.vue
View File

@ -32,6 +32,7 @@
</div>
<el-dialog
draggable
v-model="dialogVisible"
title="预览"
width="800px"

2
src/components/RightToolbar/index.vue
View File

@ -23,7 +23,7 @@
<el-button circle icon="Menu" @click="showColumn()" />
</el-tooltip>
</el-row>
<el-dialog :title="title" v-model="open" append-to-body>
<el-dialog draggable :title="title" v-model="open" append-to-body>
<el-transfer
:titles="['显示', '隐藏']"
v-model="value"

40
src/constant/dict.js
View File

@ -73,3 +73,43 @@ export const database_type_dict = [
elTagType: "",
},
];
export const tenantModeDict = [
{
label: "字段",
value: "1",
elTagType: "primary",
},
{
label: "数据库",
value: "2",
elTagType: "warning",
},
{
label: "数据源",
value: "3",
elTagType: "success",
},
];
export const tenantStatusDict = [
{
label: "正常",
value: "1",
elTagType: "success",
},
{
label: "过期",
value: "2",
elTagType: "warning",
},
{
label: "异常",
value: "3",
elTagType: "danger",
},
{
label: "禁用",
value: "0",
elTagType: "warning",
},
];

8
src/views/system/config/index.vue
View File

@ -197,7 +197,13 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="500px">
<el-dialog
draggable
v-model="open"
:title="title"
append-to-body
width="500px"
>
<el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="参数名称" prop="configName">
<el-input v-model="form.configName" placeholder="请输入参数名称" />

8
src/views/system/dept/index.vue
View File

@ -134,7 +134,13 @@
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="600px">
<el-dialog
draggable
v-model="open"
:title="title"
append-to-body
width="600px"
>
<el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col v-if="form.parentId !== '0'" :span="24">

8
src/views/system/dict/data.vue
View File

@ -171,7 +171,13 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-dialog
draggable
:title="title"
v-model="open"
width="500px"
append-to-body
>
<el-form ref="dataRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典类型">
<el-input v-model="form.dictType" :disabled="true" />

8
src/views/system/dict/index.vue
View File

@ -191,7 +191,13 @@
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-dialog
draggable
:title="title"
v-model="open"
width="500px"
append-to-body
>
<el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典名称" />

8
src/views/system/menu/index.vue
View File

@ -154,7 +154,13 @@
</el-table>
<!-- 添加或修改菜单对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="680px">
<el-dialog
draggable
v-model="open"
:title="title"
append-to-body
width="680px"
>
<el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24">

8
src/views/system/post/index.vue
View File

@ -157,7 +157,13 @@
/>
<!-- 添加或修改岗位对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-dialog
draggable
:title="title"
v-model="open"
width="500px"
append-to-body
>
<el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="岗位名称" prop="postName">
<el-input

9
src/views/system/role/index.vue
View File

@ -235,7 +235,13 @@
/>
<!-- 添加或修改角色配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-dialog
draggable
:title="title"
v-model="open"
width="500px"
append-to-body
>
<el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
@ -316,6 +322,7 @@
<!-- 分配角色数据权限对话框 -->
<el-dialog
draggable
:title="title"
v-model="openDataScope"
width="500px"

1
src/views/system/role/selectUser.vue
View File

@ -1,6 +1,7 @@
<template>
<!-- 授权用户 -->
<el-dialog
draggable
@open="resetQuery"
title="选择用户"
v-model="visible"

9
src/views/system/user/index.vue
View File

@ -290,7 +290,13 @@
</el-row>
<!-- 添加或修改用户配置对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="600px">
<el-dialog
draggable
v-model="open"
:title="title"
append-to-body
width="600px"
>
<el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
@ -441,6 +447,7 @@
<!-- 用户导入对话框 -->
<el-dialog
draggable
v-model="upload.open"
:title="upload.title"
append-to-body

1
src/views/system/user/profile/userAvatar.vue
View File

@ -2,6 +2,7 @@
<div class="user-info-head" @click="editCropper()">
<img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
<el-dialog
draggable
:title="title"
v-model="open"
width="800px"

534
src/views/tenant/index.vue
View File

@ -84,6 +84,16 @@
>刷新缓存
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
:disabled="single"
icon="Refresh"
plain
type="primary"
@click="handleInitialize"
>初始化
</el-button>
</el-col>
<right-toolbar
v-model:showSearch="showSearch"
@queryTable="getList"
@ -96,11 +106,9 @@
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="55" />
<el-table-column align="center" label="编码" prop="tenantId" />
<el-table-column align="center" label="公司名称" prop="companyName" />
<el-table-column align="center" label="联系人名称" prop="contactName" />
<el-table-column align="center" label="联系人电话" prop="contactPhone" />
<el-table-column align="center" label="公司地址" prop="address" />
<el-table-column
align="center"
label="过期时间"
@ -112,26 +120,60 @@
</template>
</el-table-column>
<el-table-column align="center" label="用户数量" prop="accountCount" />
<el-table-column align="center" label="状态" prop="status" />
<el-table-column align="center" label="状态">
<template #default="{ row }">
<dict-tag :options="tenantStatusDict" :value="row.status" />
</template>
</el-table-column>
<el-table-column align="center" label="初始化状态">
<template #default="{ row }">
<el-tag :type="row.initialized === '1' ? 'success' : 'warning'"
>{{ row.initialized === "1" ? "是" : "否" }}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="模式">
<template #default="{ row }">
<dict-tag :options="tenantModeDict" :value="row.mode" />
</template>
</el-table-column>
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="290"
>
<template #default="scope">
<template #default="{ row }">
<el-tooltip
:disabled="row.initialized !== '1'"
class="box-item"
content="初始化之后不可再更改"
effect="light"
placement="top"
>
<el-button
:disabled="row.initialized === '1'"
icon="Setting"
link
type="primary"
@click="handleSetting(row)"
>模式
</el-button>
</el-tooltip>
<el-button
icon="Setting"
v-if="row.mode === '3'"
icon="plus"
link
type="primary"
@click="handleSetting(scope.row)"
>设置
@click="handleOpenDataSource(row.tenantId)"
>数据源
</el-button>
<el-button
v-hasPermi="['tenant:edit']"
icon="Edit"
link
type="primary"
@click="handleUpdate(scope.row)"
@click="handleUpdate(row)"
>修改
</el-button>
<el-button
@ -139,7 +181,7 @@
icon="Delete"
link
type="primary"
@click="handleDelete(scope.row)"
@click="handleDelete(row)"
>删除
</el-button>
</template>
@ -155,7 +197,13 @@
/>
<!-- 添加或修改租户对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="500px">
<el-dialog
v-model="open"
:title="title"
append-to-body
draggable
width="500px"
>
<el-form ref="tenantRef" :model="form" :rules="rules" label-width="130px">
<el-form-item label="公司名称" prop="companyName">
<el-input v-model="form.companyName" placeholder="请输入公司名称" />
@ -214,111 +262,206 @@
</template>
</el-dialog>
<!-- 添加或修改租户对话框 -->
<!-- 修改租户模式 -->
<el-dialog
v-model="showTenantSetting"
append-to-body
title="租户设置"
draggable
title="模式设置"
width="500px"
>
<el-form
ref="tenantSettingRef"
:model="tenantSettingForm"
:rules="tenantSettingRules"
label-width="130px"
label-width="0"
>
<!--TODO:-->
<el-form-item label="模式">
<el-form-item class="mode-setting-radio">
<el-radio-group v-model="tenantSettingForm.mode">
<el-radio label="1">字段</el-radio>
<el-radio label="2">数据库</el-radio>
<el-radio label="3">数据源</el-radio>
<el-radio
v-for="option in tenantModeDict"
:key="option.value"
:label="option.value"
>{{ option.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="tenantSettingForm.mode === '3'">
<div
v-for="item in tenantSettingForm.datasourceList"
:key="`${item.ip}-${item.port}-${item.name}`"
class="data-source-item"
>
<div class="left">
<div class="database-type">{{ "MySQL" }}</div>
<div class="database-url">{{ "127.0.0.1" }} : {{ 3306 }}</div>
<div class="database-name">{{ "ry-vue" }}</div>
</div>
<div class="right">
<el-button
circle
icon="edit"
plain
size="small"
type="primary"
></el-button>
<el-button
circle
icon="delete"
plain
size="small"
type="danger"
></el-button>
</div>
</div>
<el-button
icon="plus"
plain
size="small"
style="margin-top: 18px"
type="primary"
>新增数据源</el-button
>
<!-- <el-form-item label="数据库类型" prop="type">-->
<!-- <el-select v-model="tenantSettingForm.host">-->
<!-- <el-option v-for="option in database_type_dict" :key="option.value" :label="option.label"-->
<!-- :value="option.value"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库IP" prop="ip">-->
<!-- <el-input v-model="tenantSettingForm.ip"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库端口" prop="port">-->
<!-- <el-input v-model="tenantSettingForm.port"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库名称" prop="name">-->
<!-- <el-input v-model="tenantSettingForm.name"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库账号" prop="username">-->
<!-- <el-input v-model="tenantSettingForm.username"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="数据库密码" prop="password">-->
<!-- <el-input v-model="tenantSettingForm.password"/>-->
<!-- </el-form-item>-->
</template>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitTenantSetting"
>确 定</el-button
>
>确 定
</el-button>
<el-button @click="cancelSettingTenant">取 消</el-button>
</div>
</template>
</el-dialog>
<!--查看数据源列表-->
<el-dialog
v-model="showDatasourceDialog"
append-to-body
draggable
title="数据源设置"
width="800px"
>
<!--添加或修改数据源-->
<el-form
v-if="isEditDatasource"
ref="datasourceFormRef"
:model="dataSourceForm"
:rules="dataSourceRules"
label-position="left"
label-width="100px"
>
<el-form-item label="数据库类型" prop="type">
<el-select v-model="dataSourceForm.type">
<el-option
v-for="option in database_type_dict"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="数据库IP" prop="ip">
<el-input v-model="dataSourceForm.ip" />
</el-form-item>
<el-form-item label="数据库端口" prop="port">
<el-input-number
v-model="dataSourceForm.port"
:max="65535"
:min="1"
/>
</el-form-item>
<el-form-item label="数据库名称" prop="name">
<el-input v-model="dataSourceForm.name" />
</el-form-item>
<el-form-item label="数据库账号" prop="username">
<el-input v-model="dataSourceForm.username" />
</el-form-item>
<el-form-item label="数据库密码" prop="password">
<el-input v-model="dataSourceForm.password" />
</el-form-item>
<el-form-item label="状态" prop="isUse">
<el-switch
v-model="dataSourceForm.isUse"
active-value="1"
inactive-value="0"
/>
</el-form-item>
</el-form>
<template v-else>
<el-row justify="end">
<el-col :span="1.5">
<el-button
icon="plus"
plain
type="primary"
@click="handleAddDataSource"
>新增
</el-button>
</el-col>
</el-row>
<el-table :data="datasource" style="margin-top: 12px">
<el-table-column
align="center"
label="类型"
prop="type"
></el-table-column>
<el-table-column
align="center"
label="IP"
prop="ip"
></el-table-column>
<el-table-column
align="center"
label="端口"
prop="port"
></el-table-column>
<el-table-column
align="center"
label="名称"
prop="name"
></el-table-column>
<el-table-column
align="center"
label="账号"
prop="username"
></el-table-column>
<el-table-column
align="center"
label="密码"
prop="password"
></el-table-column>
<el-table-column align="center" label="操作" width="140">
<template #default="{ row }">
<el-button
icon="edit"
link
size="small"
type="warning"
@click="handleUpdateDataSource(row)"
>修改
</el-button>
<el-button
icon="delete"
link
size="small"
type="danger"
@click="handleDeleteDataSource(row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<template #footer>
<div class="dialog-footer">
<template v-if="isEditDatasource">
<el-button type="primary" @click="submitDatasource"
>确 定
</el-button>
<el-button @click="isEditDatasource = false">取 消</el-button>
</template>
<el-button v-else type="primary" @click="handleCloseDatasource"
>关闭
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script name="Tenant" setup>
<script lang="jsx" name="Tenant" setup>
import {
addTenant,
datasourceList,
deleteDatasource,
delTenant,
getSetting,
getTenant,
insertDatasource,
listTenant,
updateTenant,
refreshCache,
tenantSetting,
updateDatasource,
updateTenant,
} from "@/api/tenant/tenant";
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
database_type_dict,
tenantModeDict,
tenantStatusDict,
} from "@/constant/dict";
import DictTag from "@/components/DictTag/index.vue";
import { cloneDeep } from "lodash-es";
const { proxy } = getCurrentInstance();
const router = useRouter();
const tenantList = ref([]);
const open = ref(false);
const loading = ref(true);
@ -328,9 +471,12 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const showTenantSetting = ref(false); /*是否显示租户设置对话框*/
const tenantSettingRef = ref();
const editDatasourceIndex = ref(-1);
const datasourceFormRef = ref();
const showTenantSetting = ref(false); /*是否显示租户设置对话框*/
const showDatasourceDialog = ref(false); /*显示数据源列表dialog*/
const tempTenantId = ref(null); /*临时的租户id状态, 用于在新添加的数据源中提交*/
const isEditDatasource = ref(false); /*是否处于添加或修改状态*/
const data = reactive({
form: {},
queryParams: {
@ -354,27 +500,67 @@ const data = reactive({
{ required: true, message: "公司名称不能为空", trigger: "blur" },
],
},
tenantSettingForm: {
// TODO:
// dataSource: [
// {
// type: "MySQL",
// ip: "127.0.0.1",
// port: "",
// name: "",
// username: "",
// password: ""
// }
// ],
// mode: '3'
tenantSettingForm: {},
dataSourceForm: {} /*数据源项目*/,
dataSourceRules: {
type: [
{
required: true,
message: "请选择数据库类型",
trigger: "blur",
},
],
ip: [
{
required: true,
message: "请输入ip",
trigger: "blur",
},
],
port: [
{
required: true,
message: "请输入端口",
trigger: "blur",
},
],
name: [
{
required: true,
message: "请输入数据库名称",
trigger: "blur",
},
],
username: [
{
required: true,
message: "请输入账号",
trigger: "blur",
},
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
],
},
tenantSettingRules: {
/*TODO:*/
},
});
const { queryParams, form, rules, tenantSettingForm, tenantSettingRules } =
toRefs(data);
const {
queryParams,
form,
rules,
tenantSettingForm,
tenantSettingRules,
dataSourceRules,
dataSourceForm,
} = toRefs(data);
const datasource = ref([]);
/** 查询租户列表 */
function getList() {
@ -427,22 +613,84 @@ function reset() {
* 重置租户设置表单
*/
const resetSettingTenant = () => {
form.value = {
/*TODO:*/
datasourceList: [
{
type: null,
ip: null,
port: null,
name: null,
username: null,
password: null,
},
],
};
tenantSettingForm.value = {};
tenantSettingRef.value?.resetFields();
};
/**
* 查看数据源
*/
const handleOpenDataSource = async (tenantId) => {
isEditDatasource.value = false;
tempTenantId.value = tenantId;
const resp = await datasourceList(tenantId);
datasource.value = resp.data;
showDatasourceDialog.value = true;
};
const handleCloseDatasource = () => {
isEditDatasource.value = false;
tempTenantId.value = null;
datasource.value = [];
showDatasourceDialog.value = false;
};
const resetDataSource = () => {
dataSourceForm.value = {};
datasourceFormRef.value?.resetFields();
};
/**
* 添加数据源
*/
const handleAddDataSource = () => {
resetDataSource();
dataSourceForm.value.tenantId = tempTenantId.value;
isEditDatasource.value = true;
};
/**
* 删除数据源
* @param row
*/
const handleDeleteDataSource = (row) => {
ElMessageBox.confirm(`确认删除此数据源: ${row.ip}`, "删除数据源", {}).then(
async () => {
await deleteDatasource(row);
ElMessage.success("已删除数据源");
const resp = await datasourceList(tempTenantId.value);
datasource.value = resp.data;
}
);
};
/**
* 修噶数据源
* @param row
*/
const handleUpdateDataSource = (row) => {
resetDataSource();
dataSourceForm.value = cloneDeep(row);
try {
dataSourceForm.value.port = parseInt(dataSourceForm.value.port);
} catch (e) {
console.log(e);
}
isEditDatasource.value = true;
};
const submitDatasource = async () => {
await datasourceFormRef.value.validate();
if (dataSourceForm.value.id) {
/*TODO 修改数据源*/
await updateDatasource(dataSourceForm.value);
ElMessage.success("修改数据源成功");
} else {
await insertDatasource(dataSourceForm.value);
ElMessage.success("添加数据源成功");
}
isEditDatasource.value = false;
const resp = await datasourceList(tempTenantId.value);
datasource.value = resp.data;
};
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
@ -481,16 +729,16 @@ function handleUpdate(row) {
}
/**
* 打开租户设置
* 打开模式设置
* @param row
*/
const handleSetting = (row) => {
// editDatasourceIndex.value = 0
resetSettingTenant();
getSetting(row.tenantId).then((resp) => {
tenantSettingForm.value = resp.data;
showTenantSetting.value = true;
});
tenantSettingForm.value = {
tenantId: row.tenantId,
mode: row.mode,
oriMode: row.mode /*旧mode*/,
};
showTenantSetting.value = true;
};
/** 提交按钮 */
@ -517,8 +765,23 @@ function submitForm() {
/**
* 提交租户设置
*/
const submitTenantSetting = () => {
/*TODO:*/
const submitTenantSetting = async () => {
const ori = tenantSettingForm.value.oriMode;
const cur = tenantSettingForm.value.mode;
const warningText = () => (
<span style="color:red">
切换到其他模式会清除已有的数据源配置, 是否继续?
</span>
);
if (ori === "3" && (cur === "1" || cur === "2")) {
await ElMessageBox.confirm(warningText, {
type: "warning",
});
}
await tenantSettingRef.value.validate();
await tenantSetting(tenantSettingForm.value);
getList();
ElMessage.success("模式设置成功");
showTenantSetting.value = false;
};
@ -555,6 +818,19 @@ function handleRefreshCache() {
});
}
/**
* 前往初始化页面
*/
const handleInitialize = () => {
const tenantId = ids.value;
router.push({
path: "/tenant/initialize",
query: {
id: tenantId,
},
});
};
getList();
</script>
<style lang="scss" scoped>
@ -568,6 +844,10 @@ getList();
justify-content: space-between;
padding: 0 20px 0 20px;
&:not(:first-child) {
margin-top: 12px;
}
.left {
display: flex;
align-items: center;
@ -576,7 +856,14 @@ getList();
font-size: 15px;
}
.database-url {
.database-host {
width: 100px;
margin-left: 12px;
font-size: 13px;
}
.database-port {
width: 30px;
margin-left: 12px;
font-size: 13px;
}
@ -592,4 +879,9 @@ getList();
align-items: center;
}
}
:deep(.mode-setting-radio .el-form-item__content) {
display: flex;
justify-content: center;
}
</style>

13
src/views/tenant/initialize.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="app-container">
<el-steps align-center>
<el-step description="步骤描述" title="步骤1" />
<el-step description="步骤描述" title="步骤2" />
<el-step description="步骤描述" title="步骤3" />
<el-step description="步骤描述" title="步骤4" />
</el-steps>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>