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

status

Browse Source
This commit is contained in:
ailanyin
2023-06-07 17:35:32 +08:00
parent 17679d0d31
commit 6feec83997
3 changed files with 348 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,43 +2,51 @@ import request from "@/utils/request";
// 查询租户列表 // 查询租户列表
export function listTenant(query) { export function listTenant(query) {
return request({ return request({
url: "/tenant/list", url: "/tenant/list",
method: "get", method: "get",
params: query, params: query,
}); });
} }
// 查询租户详细 // 查询租户详细
export function getTenant(tenantId) { export function getTenant(tenantId) {
return request({ return request({
url: "/tenant/" + tenantId, url: "/tenant/" + tenantId,
method: "get", method: "get",
}); });
} }
// 新增租户 // 新增租户
export function addTenant(data) { export function addTenant(data) {
return request({ return request({
url: "/tenant", url: "/tenant",
method: "post", method: "post",
data: data, data: data,
}); });
} }
// 修改租户 // 修改租户
export function updateTenant(data) { export function updateTenant(data) {
return request({ return request({
url: "/tenant", url: "/tenant",
method: "put", method: "put",
data: data, data: data,
}); });
} }
// 删除租户 // 删除租户
export function delTenant(tenantId) { export function delTenant(tenantId) {
return request({ return request({
url: "/tenant/" + tenantId, url: "/tenant/" + tenantId,
method: "delete", method: "delete",
}); });
}
// 查看设置
export function getSetting(tenantId) {
return request({
url: `/tenant/getSetting/${tenantId}`,
method: "get",
});
} }

82
src/constant/dict.js
View File

@ -1,52 +1,36 @@
export const sys_normal_disable = [ export const sys_normal_disable = [{
{ label: "正常", value: "1", elTagType: "success",
label: "正常", }, {
value: "1", label: "禁用", value: "0", elTagType: "danger",
elTagType: "success", },];
},
{
label: "禁用",
value: "0",
elTagType: "danger",
},
];
export const sys_user_gender = [ export const sys_user_gender = [{
{ label: "男", value: "0",
label: "男", }, {
value: "0", label: "女", value: "1",
}, }, {
{ label: "未知", value: "2",
label: "女", },];
value: "1",
},
{
label: "未知",
value: "2",
},
];
export const menu_show_hide = [ export const menu_show_hide = [{
{ label: "隐藏", value: "0", elTagType: "warning",
label: "隐藏", }, {
value: "0", label: "显示", value: "1", elTagType: "success",
elTagType: "warning", },];
},
{
label: "显示",
value: "1",
elTagType: "success",
},
];
export const sys_yes_no = [ export const sys_yes_no = [{
{ label: "否", value: "N",
label: "否", }, {
value: "N", label: "是", value: "Y", elTagType: "danger",
}, },];
{
label: "是", export const database_type_dict = [{
value: "Y", label: "MySQL", value: "MySQL", elTagType: "",
elTagType: "danger", }, {
}, label: "Oracle", value: "Oracle", elTagType: "",
]; }, {
label: "PostgreSQL", value: "PostgreSQL", elTagType: "",
},
{
label: "Microsoft SQL Server", value: "Microsoft SQL Server", elTagType: "",
}];

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

@ -1,31 +1,32 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
:model="queryParams" v-show="showSearch"
ref="queryRef" ref="queryRef"
:inline="true" :inline="true"
v-show="showSearch" :model="queryParams"
label-width="68px" label-width="68px"
> >
<el-form-item label="公司名称" prop="companyName"> <el-form-item label="公司名称" prop="companyName">
<el-input <el-input
v-model="queryParams.companyName" v-model="queryParams.companyName"
placeholder="请输入公司名称" clearable
clearable placeholder="请输入公司名称"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="联系人" prop="contactName"> <el-form-item label="联系人" prop="contactName">
<el-input <el-input
v-model="queryParams.contactName" v-model="queryParams.contactName"
placeholder="请输入联系人名称" clearable
clearable placeholder="请输入联系人名称"
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" <el-button icon="Search" type="primary" @click="handleQuery"
>搜索</el-button >搜索
</el-button
> >
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
@ -34,158 +35,172 @@
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" v-hasPermi="['tenant:add']"
plain icon="Plus"
icon="Plus" plain
@click="handleAdd" type="primary"
v-hasPermi="['tenant:add']" @click="handleAdd"
>新增</el-button >新增
</el-button
> >
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="success" v-hasPermi="['tenant:edit']"
plain :disabled="single"
icon="Edit" icon="Edit"
:disabled="single" plain
@click="handleUpdate" type="success"
v-hasPermi="['tenant:edit']" @click="handleUpdate"
>修改</el-button >修改
</el-button
> >
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="danger" v-hasPermi="['tenant:remove']"
plain :disabled="multiple"
icon="Delete" icon="Delete"
:disabled="multiple" plain
@click="handleDelete" type="danger"
v-hasPermi="['tenant:remove']" @click="handleDelete"
>删除</el-button >删除
</el-button
> >
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="warning" v-hasPermi="['tenant:export']"
plain icon="Download"
icon="Download" plain
@click="handleExport" type="warning"
v-hasPermi="['tenant:export']" @click="handleExport"
>导出</el-button >导出
</el-button
> >
</el-col> </el-col>
<right-toolbar <right-toolbar
v-model:showSearch="showSearch" v-model:showSearch="showSearch"
@queryTable="getList" @queryTable="getList"
></right-toolbar> ></right-toolbar>
</el-row> </el-row>
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="tenantList" :data="tenantList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column align="center" type="selection" width="55"/>
<el-table-column label="编码" align="center" prop="tenantId" /> <el-table-column align="center" label="编码" prop="tenantId"/>
<el-table-column label="公司名称" align="center" prop="companyName" /> <el-table-column align="center" label="公司名称" prop="companyName"/>
<el-table-column label="联系人名称" align="center" prop="contactName" /> <el-table-column align="center" label="联系人名称" prop="contactName"/>
<el-table-column label="联系人电话" align="center" prop="contactPhone" /> <el-table-column align="center" label="联系人电话" prop="contactPhone"/>
<el-table-column label="公司地址" align="center" prop="address" /> <el-table-column align="center" label="公司地址" prop="address"/>
<el-table-column <el-table-column
label="过期时间" align="center"
align="center" label="过期时间"
prop="expireTime" prop="expireTime"
width="180" width="180"
> >
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.expireTime, "{y}-{m}-{d}") }}</span> <span>{{ parseTime(scope.row.expireTime, "{y}-{m}-{d}") }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="用户数量" align="center" prop="accountCount" /> <el-table-column align="center" label="用户数量" prop="accountCount"/>
<el-table-column label="状态" align="center" prop="status" /> <el-table-column align="center" label="状态" prop="status"/>
<el-table-column <el-table-column
label="操作" align="center"
align="center" class-name="small-padding fixed-width"
class-name="small-padding fixed-width" label="操作"
> >
<template #default="scope"> <template #default="scope">
<el-button <el-button
link icon="Setting"
type="primary" link
icon="Edit" type="primary"
@click="handleUpdate(scope.row)" @click="handleSetting(scope.row)"
v-hasPermi="['tenant:edit']" >设置
>修改</el-button </el-button
> >
<el-button <el-button
link v-hasPermi="['tenant:edit']"
type="primary" icon="Edit"
icon="Delete" link
@click="handleDelete(scope.row)" type="primary"
v-hasPermi="['tenant:remove']" @click="handleUpdate(scope.row)"
>删除</el-button >修改
</el-button
>
<el-button
v-hasPermi="['tenant:remove']"
icon="Delete"
link
type="primary"
@click="handleDelete(scope.row)"
>删除
</el-button
> >
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNum" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" :total="total"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改租户对话框 --> <!-- 添加或修改租户对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog v-model="open" :title="title" append-to-body width="500px">
<el-form ref="tenantRef" :model="form" :rules="rules" label-width="130px"> <el-form ref="tenantRef" :model="form" :rules="rules" label-width="130px">
<el-form-item label="公司名称" prop="companyName"> <el-form-item label="公司名称" prop="companyName">
<el-input v-model="form.companyName" placeholder="请输入公司名称" /> <el-input v-model="form.companyName" placeholder="请输入公司名称"/>
</el-form-item> </el-form-item>
<el-form-item label="联系人名称" prop="contactName"> <el-form-item label="联系人名称" prop="contactName">
<el-input v-model="form.contactName" placeholder="请输入联系人名称" /> <el-input v-model="form.contactName" placeholder="请输入联系人名称"/>
</el-form-item> </el-form-item>
<el-form-item label="联系人电话" prop="contactPhone"> <el-form-item label="联系人电话" prop="contactPhone">
<el-input <el-input
v-model="form.contactPhone" v-model="form.contactPhone"
placeholder="请输入联系人电话" placeholder="请输入联系人电话"
/> />
</el-form-item> </el-form-item>
<el-form-item label="公司地址" prop="address"> <el-form-item label="公司地址" prop="address">
<el-input v-model="form.address" placeholder="请输入公司地址" /> <el-input v-model="form.address" placeholder="请输入公司地址"/>
</el-form-item> </el-form-item>
<el-form-item label="公司简介" prop="profile"> <el-form-item label="公司简介" prop="profile">
<el-input <el-input
v-model="form.profile" v-model="form.profile"
type="textarea" placeholder="请输入内容"
placeholder="请输入内容" type="textarea"
/> />
</el-form-item> </el-form-item>
<el-form-item label="统一社会信用代码" prop="licenseNumber"> <el-form-item label="统一社会信用代码" prop="licenseNumber">
<el-input <el-input
v-model="form.licenseNumber" v-model="form.licenseNumber"
placeholder="请输入统一社会信用代码" placeholder="请输入统一社会信用代码"
/> />
</el-form-item> </el-form-item>
<el-form-item label="过期时间" prop="expireTime"> <el-form-item label="过期时间" prop="expireTime">
<el-date-picker <el-date-picker
clearable v-model="form.expireTime"
v-model="form.expireTime" clearable
type="datetime" placeholder="请选择过期时间"
value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
placeholder="请选择过期时间" value-format="YYYY-MM-DD HH:mm:ss"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="用户数量" prop="accountCount"> <el-form-item label="用户数量" prop="accountCount">
<el-input v-model="form.accountCount" placeholder="请输入用户数量" /> <el-input v-model="form.accountCount" placeholder="请输入用户数量"/>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input <el-input
v-model="form.remark" v-model="form.remark"
type="textarea" placeholder="请输入内容"
placeholder="请输入内容" type="textarea"
/> />
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -196,19 +211,68 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<!-- 添加或修改租户对话框 -->
<el-dialog v-model="showTenantSetting" append-to-body title="租户设置" width="500px">
<el-form ref="tenantSettingRef" :model="tenantSettingForm" :rules="tenantSettingRules" label-width="130px">
<!--TODO:-->
<el-form-item label="模式">
<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-group>
</el-form-item>
<template v-if="tenantSettingForm.mode==='3'">
<div 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 @click="cancelSettingTenant">取 消</el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script setup name="Tenant"> <script name="Tenant" setup>
import { import {addTenant, delTenant, getSetting, getTenant, listTenant, updateTenant,} from "@/api/tenant/tenant";
listTenant,
getTenant,
delTenant,
addTenant,
updateTenant,
} from "@/api/tenant/tenant";
const { proxy } = getCurrentInstance(); const {proxy} = getCurrentInstance();
const tenantList = ref([]); const tenantList = ref([]);
const open = ref(false); const open = ref(false);
@ -219,7 +283,8 @@ const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const total = ref(0); const total = ref(0);
const title = ref(""); const title = ref("");
const showTenantSetting = ref(false) /*是否显示租户设置对话框*/
const tenantSettingRef = ref()
const data = reactive({ const data = reactive({
form: {}, form: {},
queryParams: { queryParams: {
@ -240,12 +305,30 @@ const data = reactive({
}, },
rules: { rules: {
companyName: [ companyName: [
{ required: true, message: "公司名称不能为空", trigger: "blur" }, {required: true, message: "公司名称不能为空", trigger: "blur"},
], ],
}, },
tenantSettingForm: {
// TODO:
dataSource: [
{
type: "MySQL",
ip: "127.0.0.1",
port: "",
name: "",
username: "",
password: ""
}
],
mode: '3'
}
,
tenantSettingRules: {
/*TODO:*/
}
}); });
const { queryParams, form, rules } = toRefs(data); const {queryParams, form, rules, tenantSettingForm, tenantSettingRules} = toRefs(data);
/** 查询租户列表 */ /** 查询租户列表 */
function getList() { function getList() {
@ -263,6 +346,14 @@ function cancel() {
reset(); reset();
} }
/**
* 取消租户设置
*/
const cancelSettingTenant = () => {
showTenantSetting.value = false
resetSettingTenant()
}
// 表单重置 // 表单重置
function reset() { function reset() {
form.value = { form.value = {
@ -286,6 +377,17 @@ function reset() {
proxy.resetForm("tenantRef"); proxy.resetForm("tenantRef");
} }
/**
* 重置租户设置表单
*/
const resetSettingTenant = () => {
form.value = {
/*TODO:*/
datasourceList: []
}
tenantSettingRef.value?.resetFields()
}
/** 搜索按钮操作 */ /** 搜索按钮操作 */
function handleQuery() { function handleQuery() {
queryParams.value.pageNum = 1; queryParams.value.pageNum = 1;
@ -323,6 +425,18 @@ function handleUpdate(row) {
}); });
} }
/**
* 打开租户设置
* @param row
*/
const handleSetting = (row) => {
resetSettingTenant()
getSetting(row.tenantId).then(resp => {
tenantSettingForm.value = resp.data
showTenantSetting.value = true
})
}
/** 提交按钮 */ /** 提交按钮 */
function submitForm() { function submitForm() {
proxy.$refs["tenantRef"].validate((valid) => { proxy.$refs["tenantRef"].validate((valid) => {
@ -344,31 +458,77 @@ function submitForm() {
}); });
} }
/**
* 提交租户设置
*/
const submitTenantSetting = () => {
/*TODO:*/
showTenantSetting.value = false
}
/** 删除按钮操作 */ /** 删除按钮操作 */
function handleDelete(row) { function handleDelete(row) {
const _tenantIds = row.tenantId || ids.value; const _tenantIds = row.tenantId || ids.value;
proxy.$modal proxy.$modal
.confirm('是否确认删除租户编号为"' + _tenantIds + '"的数据项？') .confirm('是否确认删除租户编号为"' + _tenantIds + '"的数据项？')
.then(function () { .then(function () {
return delTenant(_tenantIds); return delTenant(_tenantIds);
}) })
.then(() => { .then(() => {
getList(); getList();
proxy.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .catch(() => {
});
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
function handleExport() { function handleExport() {
proxy.download( proxy.download(
"tenant/tenant/export", "tenant/tenant/export",
{ {
...queryParams.value, ...queryParams.value,
}, },
`tenant_${new Date().getTime()}.xlsx` `tenant_${new Date().getTime()}.xlsx`
); );
} }
getList(); getList();
</script> </script>
<style lang="scss" scoped>
.data-source-item {
height: 32px;
width: 100%;
border-radius: 6px;
border: 1px solid rgb(203 213 225);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px 0 20px;
.left {
display: flex;
align-items: center;
.database-type {
font-size: 15px;
}
.database-url {
margin-left: 12px;
font-size: 13px;
}
.database-name {
margin-left: 10px;
font-size: 13px;
}
}
.right {
display: flex;
align-items: center;
}
}
</style>