first commit
This commit is contained in:
@@ -0,0 +1,299 @@
|
||||
<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"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span class="name-link" @click="handlePreview(scope.row)">
|
||||
{{ scope.row.tenant_name }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<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="160" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-icons">
|
||||
<el-tooltip content="编辑" placement="top">
|
||||
<el-button text size="small" @click="editRef.open(scope.row.id)">
|
||||
<el-icon><Edit /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
text
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<EditModal ref="editRef" @success="refresh" />
|
||||
<DetailDrawer ref="detailRef" />
|
||||
<Qualification ref="qualificationRef" />
|
||||
|
||||
<!-- 分页 -->
|
||||
<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 { ElMessage, ElMessageBox } from "element-plus";
|
||||
import EditModal from "./components/edit.vue";
|
||||
import DetailDrawer from "./components/detail.vue";
|
||||
import Qualification from "./components/qualification.vue";
|
||||
import { Edit, Delete } from "@element-plus/icons-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 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 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;
|
||||
}
|
||||
|
||||
.action-icons {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user