294 lines
7.0 KiB
Vue
294 lines
7.0 KiB
Vue
<template>
|
|
<div class="container-box">
|
|
<div class="header-bar">
|
|
<h2>租户管理</h2>
|
|
<div class="header-actions">
|
|
<el-button type="primary" @click="editRef.open()">
|
|
<el-icon>
|
|
<Plus />
|
|
</el-icon>
|
|
添加租户
|
|
</el-button>
|
|
<el-button @click="refresh">
|
|
<el-icon>
|
|
<Refresh />
|
|
</el-icon>
|
|
刷新
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-divider></el-divider>
|
|
|
|
<el-form :inline="true" :model="searchForm" class="search-form">
|
|
<el-form-item label="租户名称">
|
|
<el-input
|
|
v-model="searchForm.tenant_name"
|
|
placeholder="请输入租户名称"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="租户编码">
|
|
<el-input
|
|
v-model="searchForm.tenant_code"
|
|
placeholder="请输入租户编码"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="联系人">
|
|
<el-input
|
|
v-model="searchForm.contact_person"
|
|
placeholder="请输入联系人"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话">
|
|
<el-input
|
|
v-model="searchForm.contact_phone"
|
|
placeholder="请输入联系电话"
|
|
clearable
|
|
@keyup.enter="handleSearch"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
<el-button @click="resetSearch">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 租户列表表格 -->
|
|
<el-table :data="tenants" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="id" label="ID" align="center" fixed="left" />
|
|
<el-table-column
|
|
prop="tenant_name"
|
|
label="租户名称"
|
|
min-width="220"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="tenant_code"
|
|
label="租户编码"
|
|
min-width="120"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="contact_person"
|
|
label="联系人"
|
|
min-width="120"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="contact_phone"
|
|
label="联系电话"
|
|
min-width="120"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="contact_email"
|
|
label="电子邮箱"
|
|
min-width="180"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="address"
|
|
label="租户地址"
|
|
min-width="300"
|
|
align="center"
|
|
/>
|
|
<el-table-column prop="status" label="租户状态" width="80" align="center">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
|
|
scope.row.status === 1 ? "启用" : "禁用"
|
|
}}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="280" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<!-- <el-button size="small" @click="handleQualification(scope.row)">资质</el-button> -->
|
|
<el-button text size="small" @click="handleAddUser(scope.row)"
|
|
>增加用户</el-button
|
|
>
|
|
<el-button text size="small" @click="handlePreview(scope.row)"
|
|
>查看</el-button
|
|
>
|
|
<el-button text size="small" @click="editRef.open(scope.row.id)"
|
|
>编辑</el-button
|
|
>
|
|
<el-button
|
|
text
|
|
size="small"
|
|
type="danger"
|
|
@click="handleDelete(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<EditModal ref="editRef" @success="refresh" />
|
|
<DetailDrawer ref="detailRef" />
|
|
<Qualification ref="qualificationRef" />
|
|
<AddUser ref="addUserRef" />
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-bar">
|
|
<el-pagination
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
@current-change="handlePageChange"
|
|
layout="total, prev, pager, next"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getTenantList, deleteTenant } from "@/api/tenant";
|
|
import { onMounted, ref, reactive } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import EditModal from "./components/edit.vue";
|
|
import DetailDrawer from "./components/detail.vue";
|
|
import Qualification from "./components/qualification.vue";
|
|
import AddUser from "./components/adduser.vue";
|
|
|
|
const total = ref(0);
|
|
const page = ref(1);
|
|
const pageSize = ref(10);
|
|
const loading = ref(false);
|
|
const router = useRouter();
|
|
const tenants = ref([]);
|
|
|
|
const editRef = ref();
|
|
const detailRef = ref();
|
|
const addUserRef = ref();
|
|
const qualificationRef = ref();
|
|
|
|
// 删除
|
|
const handleDelete = (row) => {
|
|
ElMessageBox.confirm("确定要删除该租户吗？", "提示", {
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
deleteTenant(row.id).then((res) => {
|
|
if (res.code === 200) {
|
|
ElMessage.success("删除成功");
|
|
refresh();
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
// 查看
|
|
const handlePreview = (row: any) => {
|
|
detailRef.value.open(row.id);
|
|
};
|
|
|
|
//增加用户
|
|
const handleAddUser = (row: any) => {
|
|
addUserRef.value.open(row.id);
|
|
};
|
|
|
|
// 资质
|
|
const handleQualification = (row: any) => {
|
|
qualificationRef.value.open(row.id);
|
|
};
|
|
|
|
// 分页改变
|
|
const handlePageChange = (val: number) => {
|
|
page.value = val;
|
|
refresh();
|
|
};
|
|
|
|
// 搜索表单数据
|
|
const searchForm = reactive({
|
|
tenant_name: "",
|
|
tenant_code: "",
|
|
contact_person: "",
|
|
contact_phone: "",
|
|
});
|
|
|
|
// 执行查询（回到第一页再刷新）
|
|
const handleSearch = () => {
|
|
page.value = 1;
|
|
refresh();
|
|
};
|
|
|
|
// 重置查询
|
|
const resetSearch = () => {
|
|
searchForm.tenant_name = "";
|
|
searchForm.tenant_code = "";
|
|
searchForm.contact_person = "";
|
|
searchForm.contact_phone = "";
|
|
handleSearch();
|
|
};
|
|
|
|
// 刷新
|
|
const refresh = () => {
|
|
loading.value = true;
|
|
|
|
// 整合分页参数和搜索参数
|
|
const queryParams = {
|
|
page: page.value,
|
|
pageSize: pageSize.value,
|
|
...searchForm,
|
|
};
|
|
|
|
getTenantList(queryParams)
|
|
.then((res) => {
|
|
if (res.code === 200) {
|
|
tenants.value = res.data.list;
|
|
total.value = res.data.total;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
// 获取租户列表
|
|
onMounted(() => {
|
|
refresh();
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
:deep(.el-alert__title) {
|
|
color: #f56c6c !important;
|
|
}
|
|
|
|
.name-link {
|
|
color: #3973ff;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
|
|
&:hover {
|
|
color: #66b1ff;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.search-form {
|
|
background: #f9f9f9;
|
|
padding: 20px 20px 0 20px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|