mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-22 21:06:32 +00:00
feat: 新增租户、客户和令牌模块及相关功能
refactor: 重构用户、角色、部门等模块的字段长度和校验逻辑 fix: 修复前端接口类型定义和字段显示问题 style: 优化代码格式和注释 perf: 提升数据库连接性能和查询效率 docs: 更新README和配置文档 test: 添加字段校验和数据库连接测试 chore: 更新依赖包和配置文件
This commit is contained in:
zhangtao
@@ -164,8 +164,8 @@ export interface JobTable extends BaseType {
|
||||
trigger_args?: string;
|
||||
start_date?: string;
|
||||
end_date?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface JobForm extends BaseFormType {
|
||||
|
||||
@@ -97,8 +97,8 @@ export interface ApplicationInfo extends BaseType {
|
||||
name?: string;
|
||||
access_url?: string;
|
||||
icon_url?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -92,8 +92,8 @@ export interface DemoPageQuery extends PageQuery {
|
||||
|
||||
export interface DemoTable extends BaseType {
|
||||
name?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface DemoForm extends BaseFormType {
|
||||
|
||||
@@ -166,8 +166,8 @@ export interface GenTableSchema extends BaseType {
|
||||
sub_table?: GenTableSchema;
|
||||
/** 是否为子表 */
|
||||
sub?: boolean;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
/** 代码生成业务表列模型 */
|
||||
@@ -212,6 +212,6 @@ export interface GenTableColumnSchema extends BaseType {
|
||||
dict_type?: string;
|
||||
/** 排序 */
|
||||
sort?: number;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const API_PATH = "/system/customer";
|
||||
|
||||
const CustomerAPI = {
|
||||
listCustomer(query: CustomerPageQuery) {
|
||||
return request<ApiResponse<PageResult<CustomerTable[]>>>({
|
||||
url: `${API_PATH}/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
},
|
||||
|
||||
detailCustomer(query: number) {
|
||||
return request<ApiResponse<CustomerTable>>({
|
||||
url: `${API_PATH}/detail/${query}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
createCustomer(body: CustomerForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/create`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
updateCustomer(id: number, body: CustomerForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/update/${id}`,
|
||||
method: "put",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
deleteCustomer(body: number[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
batchCustomer(body: BatchType) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/available/setting`,
|
||||
method: "patch",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
exportCustomer(body: CustomerPageQuery) {
|
||||
return request<Blob>({
|
||||
url: `${API_PATH}/export`,
|
||||
method: "post",
|
||||
data: body,
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
downloadCustomer() {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/download/template`,
|
||||
method: "post",
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
importCustomer(body: FormData) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/import`,
|
||||
method: "post",
|
||||
data: body,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default CustomerAPI;
|
||||
|
||||
export interface CustomerPageQuery extends PageQuery {
|
||||
name?: string;
|
||||
status?: string;
|
||||
created_time?: string[];
|
||||
}
|
||||
|
||||
export interface CustomerTable extends BaseType {
|
||||
name?: string;
|
||||
code?: string;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
tenant?: CommonType;
|
||||
}
|
||||
|
||||
export interface CustomerForm extends BaseFormType {
|
||||
name?: string;
|
||||
code?: string;
|
||||
}
|
||||
@@ -60,6 +60,6 @@ export interface LogTable extends BaseType {
|
||||
request_payload?: string;
|
||||
response_json?: string;
|
||||
process_time?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
@@ -83,8 +83,8 @@ export interface NoticeTable extends BaseType {
|
||||
notice_title?: string;
|
||||
notice_type?: string;
|
||||
notice_content?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface NoticeForm extends BaseFormType {
|
||||
|
||||
@@ -73,8 +73,8 @@ export interface PositionPageQuery extends PageQuery {
|
||||
export interface PositionTable extends BaseType {
|
||||
name?: string;
|
||||
order?: number;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface PositionForm extends BaseFormType {
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const API_PATH = "/system/tenant";
|
||||
|
||||
const TenantAPI = {
|
||||
listTenant(query: TenantPageQuery) {
|
||||
return request<ApiResponse<PageResult<TenantTable[]>>>({
|
||||
url: `${API_PATH}/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
},
|
||||
|
||||
detailTenant(query: number) {
|
||||
return request<ApiResponse<TenantTable>>({
|
||||
url: `${API_PATH}/detail/${query}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
createTenant(body: TenantForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/create`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
updateTenant(id: number, body: TenantForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/update/${id}`,
|
||||
method: "put",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
deleteTenant(body: number[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
batchTenant(body: BatchType) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/available/setting`,
|
||||
method: "patch",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
exportTenant(body: TenantPageQuery) {
|
||||
return request<Blob>({
|
||||
url: `${API_PATH}/export`,
|
||||
method: "post",
|
||||
data: body,
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
downloadTenant() {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/download/template`,
|
||||
method: "post",
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
importTenant(body: FormData) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/import`,
|
||||
method: "post",
|
||||
data: body,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default TenantAPI;
|
||||
|
||||
export interface TenantPageQuery extends PageQuery {
|
||||
name?: string;
|
||||
status?: string;
|
||||
created_time?: string[];
|
||||
}
|
||||
|
||||
export interface TenantTable extends BaseType {
|
||||
name?: string;
|
||||
code?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
}
|
||||
|
||||
export interface TenantForm extends BaseFormType {
|
||||
name?: string;
|
||||
code?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const API_PATH = "/system/token";
|
||||
|
||||
const TokenAPI = {
|
||||
getTokenList(query: TokenPageQuery) {
|
||||
return request<ApiResponse<PageResult<TokenTable[]>>>({
|
||||
url: `${API_PATH}/list`,
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
},
|
||||
|
||||
getTokenDetail(query: number) {
|
||||
return request<ApiResponse<TokenTable>>({
|
||||
url: `${API_PATH}/detail/${query}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
|
||||
createToken(body: TokenForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/create`,
|
||||
method: "post",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
updateToken(id: number, body: TokenForm) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/update/${id}`,
|
||||
method: "put",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
deleteToken(body: number[]) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/delete`,
|
||||
method: "delete",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
batchToken(body: BatchType) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/available/setting`,
|
||||
method: "patch",
|
||||
data: body,
|
||||
});
|
||||
},
|
||||
|
||||
exportToken(body: TokenPageQuery) {
|
||||
return request<Blob>({
|
||||
url: `${API_PATH}/export`,
|
||||
method: "post",
|
||||
data: body,
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
downloadTemplateToken() {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/download/template`,
|
||||
method: "post",
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
|
||||
importToken(body: FormData) {
|
||||
return request<ApiResponse>({
|
||||
url: `${API_PATH}/import`,
|
||||
method: "post",
|
||||
data: body,
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default TokenAPI;
|
||||
|
||||
export interface TokenPageQuery extends PageQuery {
|
||||
name?: string;
|
||||
status?: string;
|
||||
created_time?: string[];
|
||||
updated_time?: string[];
|
||||
created_id?: number;
|
||||
updated_id?: number;
|
||||
}
|
||||
|
||||
export interface TokenTable extends BaseType {
|
||||
name?: string;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface TokenForm extends BaseFormType {
|
||||
name?: string;
|
||||
}
|
||||
@@ -188,8 +188,8 @@ export interface UserInfo extends BaseType {
|
||||
position_ids?: positionSelectorType["id"][];
|
||||
is_superuser?: boolean;
|
||||
last_login?: string;
|
||||
created_by?: creatorType;
|
||||
updated_by?: updatorType;
|
||||
created_by?: CommonType;
|
||||
updated_by?: CommonType;
|
||||
}
|
||||
|
||||
export interface deptTreeType {
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
{{ noticeDetail.created_by?.username }}
|
||||
{{ noticeDetail.created_by?.name }}
|
||||
</span>
|
||||
<span class="ml-2 flex-y-center">
|
||||
<el-icon>
|
||||
|
||||
Vendored
-18
@@ -136,24 +136,6 @@ declare global {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建人
|
||||
*/
|
||||
interface creatorType {
|
||||
id?: number;
|
||||
name?: string;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新人
|
||||
*/
|
||||
interface updatorType {
|
||||
id?: number;
|
||||
name?: string;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础类型
|
||||
*/
|
||||
|
||||
@@ -1,15 +1,882 @@
|
||||
<!-- 演示示例 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p>工作流--开发中...</p>
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="workflow-header">
|
||||
<h2>流程编排</h2>
|
||||
<div class="header-actions">
|
||||
<ElButton type="primary" @click="handleSave">保存流程</ElButton>
|
||||
<ElButton type="warning" @click="handleValidate">验证流程</ElButton>
|
||||
<ElButton @click="handleClear">清空画布</ElButton>
|
||||
<ElButton @click="handleLoadExample">加载示例</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="workflow-main">
|
||||
<!-- 左侧节点库 -->
|
||||
<div class="node-library">
|
||||
<div class="node-library-title">节点库</div>
|
||||
<div class="node-library-search">
|
||||
<ElInput
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索节点"
|
||||
prefix-icon="el-icon-search"
|
||||
size="small"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div id="dnd-panel" class="dnd-panel-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- 中央画布区域 -->
|
||||
<div class="canvas-wrapper">
|
||||
<div id="logicflow-canvas"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧属性面板 -->
|
||||
<div v-if="selectedNode" class="property-panel">
|
||||
<div class="property-panel-title">节点属性</div>
|
||||
<div class="property-panel-content">
|
||||
<ElForm :model="nodeProperties" label-width="80px">
|
||||
<ElFormItem label="节点名称">
|
||||
<ElInput v-model="nodeProperties.text" placeholder="请输入节点名称"></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="节点ID">
|
||||
<ElInput v-model="nodeProperties.id" disabled placeholder="节点ID"></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="节点类型">
|
||||
<ElInput v-model="nodeProperties.type" disabled placeholder="节点类型"></ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="X坐标">
|
||||
<ElInputNumber v-model="nodeProperties.x" :min="0" :precision="0"></ElInputNumber>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="Y坐标">
|
||||
<ElInputNumber v-model="nodeProperties.y" :min="0" :precision="0"></ElInputNumber>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton type="primary" @click="saveNodeProperties">保存属性</ElButton>
|
||||
<ElButton @click="cancelEdit">取消</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import { Control, Menu, DndPanel, SelectionSelect } from "@logicflow/extension";
|
||||
import { ElMessage, ElForm, ElFormItem, ElInput, ElInputNumber, ElButton } from "element-plus";
|
||||
import "@logicflow/core/lib/style/index.css";
|
||||
import "@logicflow/extension/lib/style/index.css";
|
||||
|
||||
defineOptions({
|
||||
name: "Workflow",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
//图方法
|
||||
// 放大或缩小画布
|
||||
// lf.zoom(isZoomIn);
|
||||
|
||||
// // 将图形移动到画布中心
|
||||
// lf.focusOn(focusOnArgs);
|
||||
|
||||
// 监听事件
|
||||
// lf.on(evt, callback);
|
||||
|
||||
// // 撤销
|
||||
// lf.undo();
|
||||
|
||||
// // 获取画布数据
|
||||
// lf.getGraphData();
|
||||
|
||||
// // 节点方法
|
||||
// // 添加节点
|
||||
// lf.addNode(nodeConfig);
|
||||
|
||||
// // 删除节点
|
||||
// lf.deleteNode(nodeId);
|
||||
|
||||
// // 克隆节点
|
||||
// lf.cloneNode(nodeId);
|
||||
|
||||
// // 获取节点的model数据
|
||||
// lf.getNodeModel(nodeId);
|
||||
|
||||
// 连线方法
|
||||
// 创建边
|
||||
// lf.createEdge(edgeConfig);
|
||||
|
||||
// // 根据连线Id来删除边
|
||||
// lf.deleteEdge(edgeId);
|
||||
|
||||
// // 根据连线两端节点的Id来删除边
|
||||
// lf.removeEdge(sourceNodeId, targetNodeId);
|
||||
|
||||
// // 获取边的model数据
|
||||
// lf.getEdge(config);
|
||||
|
||||
// // 获取边的数据属性
|
||||
// lf.getEdgeData(edgeId);
|
||||
|
||||
// // 设置边的数据属性
|
||||
// lf.setEdgeData(edgeAttribute);
|
||||
|
||||
// LogicFlow实例
|
||||
let lf: LogicFlow | null = null;
|
||||
|
||||
// 选中的节点
|
||||
const selectedNode = ref<any>(null);
|
||||
|
||||
// 节点属性
|
||||
const nodeProperties = reactive({
|
||||
id: "",
|
||||
type: "",
|
||||
text: "",
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
|
||||
// 搜索关键字
|
||||
const searchKeyword = ref("");
|
||||
|
||||
// 搜索处理函数（暂时保留，可用于后续搜索功能扩展）
|
||||
const handleSearch = () => {
|
||||
console.log("搜索节点:", searchKeyword.value);
|
||||
};
|
||||
|
||||
// 节点类型定义可以在setPatternItems中配置
|
||||
|
||||
// 事件处理函数
|
||||
const bindEvents = () => {
|
||||
if (!lf) return;
|
||||
|
||||
// 节点添加事件
|
||||
lf.on("node:add", (params: any) => {
|
||||
console.log("节点添加:", params);
|
||||
});
|
||||
|
||||
// DndPanel会自动处理拖拽事件，无需手动监听drop事件
|
||||
|
||||
// 节点删除事件
|
||||
lf.on("node:remove", (params: any) => {
|
||||
console.log("节点删除:", params);
|
||||
if (selectedNode.value && selectedNode.value.id === params.data.id) {
|
||||
selectedNode.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 连线添加事件
|
||||
lf.on("edge:add", (params: any) => {
|
||||
console.log("连线添加:", params);
|
||||
});
|
||||
|
||||
// 连线删除事件
|
||||
lf.on("edge:remove", (params: any) => {
|
||||
console.log("连线删除:", params);
|
||||
});
|
||||
|
||||
// 节点选中事件
|
||||
lf.on("node:select", (params: any) => {
|
||||
console.log("节点选中:", params);
|
||||
selectedNode.value = params.data;
|
||||
// 填充属性表单
|
||||
nodeProperties.id = params.data.id;
|
||||
nodeProperties.type = params.data.type;
|
||||
nodeProperties.text = params.data.text || "";
|
||||
nodeProperties.x = params.data.x;
|
||||
nodeProperties.y = params.data.y;
|
||||
});
|
||||
|
||||
// 连线选中事件
|
||||
lf.on("edge:select", (params: any) => {
|
||||
console.log("连线选中:", params);
|
||||
selectedNode.value = null; // 选中连线时隐藏属性面板
|
||||
});
|
||||
|
||||
// 画布点击事件
|
||||
lf.on("canvas:click", (params: any) => {
|
||||
console.log("画布点击:", params);
|
||||
selectedNode.value = null; // 点击画布空白处隐藏属性面板
|
||||
});
|
||||
};
|
||||
|
||||
// 保存节点属性
|
||||
const saveNodeProperties = () => {
|
||||
if (!lf || !selectedNode.value) return;
|
||||
|
||||
// 更新节点属性
|
||||
lf.updateNode({ ...nodeProperties });
|
||||
ElMessage.success("节点属性保存成功");
|
||||
};
|
||||
|
||||
// 取消编辑
|
||||
const cancelEdit = () => {
|
||||
if (selectedNode.value) {
|
||||
// 恢复原始属性
|
||||
nodeProperties.id = selectedNode.value.id;
|
||||
nodeProperties.type = selectedNode.value.type;
|
||||
nodeProperties.text = selectedNode.value.text || "";
|
||||
nodeProperties.x = selectedNode.value.x;
|
||||
nodeProperties.y = selectedNode.value.y;
|
||||
}
|
||||
};
|
||||
|
||||
// 定义节点配置，接近参考demo的实现方式
|
||||
const nodeConfigs = {
|
||||
startNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 80,
|
||||
height: 40,
|
||||
fill: "#e6f7ff",
|
||||
stroke: "#1890ff",
|
||||
radius: 20,
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#1890ff",
|
||||
};
|
||||
},
|
||||
},
|
||||
endNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 80,
|
||||
height: 40,
|
||||
fill: "#fff2f0",
|
||||
stroke: "#ff4d4f",
|
||||
radius: 20,
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#ff4d4f",
|
||||
};
|
||||
},
|
||||
},
|
||||
taskNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 100,
|
||||
height: 60,
|
||||
fill: "#ffffff",
|
||||
stroke: "#1890ff",
|
||||
radius: 4,
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
conditionNode: {
|
||||
extendsNode: "diamond",
|
||||
getShape() {
|
||||
return {
|
||||
type: "diamond",
|
||||
attr: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
fill: "#fffbe6",
|
||||
stroke: "#faad14",
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
approvalNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 100,
|
||||
height: 60,
|
||||
fill: "#f6ffed",
|
||||
stroke: "#722ed1",
|
||||
radius: 4,
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
parallelNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 100,
|
||||
height: 60,
|
||||
fill: "#e6fffb",
|
||||
stroke: "#13c2c2",
|
||||
radius: 4,
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
subprocessNode: {
|
||||
extendsNode: "rect",
|
||||
getShape() {
|
||||
return {
|
||||
type: "rect",
|
||||
attr: {
|
||||
width: 100,
|
||||
height: 60,
|
||||
fill: "#fff0f6",
|
||||
stroke: "#eb2f96",
|
||||
radius: 4,
|
||||
strokeDasharray: "5,5",
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
timerNode: {
|
||||
extendsNode: "circle",
|
||||
getShape() {
|
||||
return {
|
||||
type: "circle",
|
||||
attr: {
|
||||
r: 30,
|
||||
fill: "#fff7e6",
|
||||
stroke: "#fa8c16",
|
||||
},
|
||||
};
|
||||
},
|
||||
getTextStyle() {
|
||||
return {
|
||||
fontSize: 14,
|
||||
fill: "#333333",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 注册自定义节点，参考demo的实现方式
|
||||
const registerCustomNodes = () => {
|
||||
if (!lf) return;
|
||||
|
||||
// 注册所有节点配置
|
||||
Object.entries(nodeConfigs).forEach(([type, config]) => {
|
||||
lf.register(type, config);
|
||||
});
|
||||
};
|
||||
|
||||
// 功能按钮处理函数
|
||||
const handleSave = () => {
|
||||
if (!lf) return;
|
||||
const graphData = lf.getGraphData();
|
||||
console.log("保存流程数据:", graphData);
|
||||
ElMessage.success("流程保存成功");
|
||||
};
|
||||
|
||||
const handleValidate = () => {
|
||||
if (!lf) return;
|
||||
const graphData = lf.getGraphData();
|
||||
const { nodes, edges } = graphData;
|
||||
const errors: string[] = [];
|
||||
|
||||
// 检查开始节点
|
||||
const startNodes = nodes.filter((node) => node.type === "startNode");
|
||||
if (startNodes.length === 0) {
|
||||
errors.push("流程缺少开始节点");
|
||||
} else if (startNodes.length > 1) {
|
||||
errors.push("流程只能有一个开始节点");
|
||||
}
|
||||
|
||||
// 检查结束节点
|
||||
const endNodes = nodes.filter((node) => node.type === "endNode");
|
||||
if (endNodes.length === 0) {
|
||||
errors.push("流程缺少结束节点");
|
||||
} else if (endNodes.length > 1) {
|
||||
errors.push("流程只能有一个结束节点");
|
||||
}
|
||||
|
||||
// 检查孤立节点
|
||||
const nodeIds = new Set(nodes.map((node) => node.id));
|
||||
const connectedNodeIds = new Set<string>();
|
||||
|
||||
edges.forEach((edge) => {
|
||||
connectedNodeIds.add(edge.sourceNodeId);
|
||||
connectedNodeIds.add(edge.targetNodeId);
|
||||
});
|
||||
|
||||
nodeIds.forEach((nodeId) => {
|
||||
if (!connectedNodeIds.has(nodeId)) {
|
||||
const node = nodes.find((n) => n.id === nodeId);
|
||||
if (node) {
|
||||
errors.push(`节点 "${node.text || node.id}" 是孤立节点，没有任何连线`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 检查结束节点是否有出边
|
||||
endNodes.forEach((endNode) => {
|
||||
const endNodeEdges = edges.filter((edge) => edge.sourceNodeId === endNode.id);
|
||||
if (endNodeEdges.length > 0) {
|
||||
errors.push(`结束节点 "${endNode.text || endNode.id}" 不能有出边`);
|
||||
}
|
||||
});
|
||||
|
||||
// 检查开始节点是否有入边
|
||||
startNodes.forEach((startNode) => {
|
||||
const startNodeEdges = edges.filter((edge) => edge.targetNodeId === startNode.id);
|
||||
if (startNodeEdges.length > 0) {
|
||||
errors.push(`开始节点 "${startNode.text || startNode.id}" 不能有入边`);
|
||||
}
|
||||
});
|
||||
|
||||
// 检查循环路径
|
||||
const hasCycle = checkCycle(nodes, edges);
|
||||
if (hasCycle) {
|
||||
errors.push("流程中存在循环路径");
|
||||
}
|
||||
|
||||
// 显示验证结果
|
||||
if (errors.length > 0) {
|
||||
ElMessage.error({
|
||||
message: `流程验证失败，发现 ${errors.length} 个问题：\n${errors.join("\n")}`,
|
||||
duration: 5000,
|
||||
showClose: true,
|
||||
});
|
||||
} else {
|
||||
ElMessage.success("流程验证通过！");
|
||||
}
|
||||
};
|
||||
|
||||
// 检查是否有循环路径
|
||||
const checkCycle = (nodes: any[], edges: any[]) => {
|
||||
const nodeMap = new Map(nodes.map((node) => [node.id, []]));
|
||||
const visited = new Set<string>();
|
||||
const recStack = new Set<string>();
|
||||
|
||||
// 构建邻接表
|
||||
edges.forEach((edge) => {
|
||||
const neighbors = nodeMap.get(edge.sourceNodeId) || [];
|
||||
neighbors.push(edge.targetNodeId);
|
||||
nodeMap.set(edge.sourceNodeId, neighbors);
|
||||
});
|
||||
|
||||
// DFS 检测循环
|
||||
const dfs = (nodeId: string): boolean => {
|
||||
if (!visited.has(nodeId)) {
|
||||
visited.add(nodeId);
|
||||
recStack.add(nodeId);
|
||||
|
||||
const neighbors = nodeMap.get(nodeId) || [];
|
||||
for (const neighbor of neighbors) {
|
||||
if (!visited.has(neighbor) && dfs(neighbor)) {
|
||||
return true;
|
||||
} else if (recStack.has(neighbor)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
recStack.delete(nodeId);
|
||||
return false;
|
||||
};
|
||||
|
||||
// 对每个未访问的节点执行 DFS
|
||||
for (const node of nodes) {
|
||||
if (dfs(node.id)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
if (!lf) return;
|
||||
lf.clear();
|
||||
ElMessage.info("画布已清空");
|
||||
};
|
||||
|
||||
const handleLoadExample = () => {
|
||||
if (!lf) return;
|
||||
const exampleData = {
|
||||
nodes: [
|
||||
{
|
||||
id: "start1",
|
||||
type: "startNode",
|
||||
x: 200,
|
||||
y: 100,
|
||||
text: "开始",
|
||||
},
|
||||
{
|
||||
id: "task1",
|
||||
type: "taskNode",
|
||||
x: 200,
|
||||
y: 200,
|
||||
text: "任务1",
|
||||
},
|
||||
{
|
||||
id: "condition1",
|
||||
type: "conditionNode",
|
||||
x: 200,
|
||||
y: 300,
|
||||
text: "条件",
|
||||
},
|
||||
{
|
||||
id: "approval1",
|
||||
type: "approvalNode",
|
||||
x: 100,
|
||||
y: 400,
|
||||
text: "审批",
|
||||
},
|
||||
{
|
||||
id: "task2",
|
||||
type: "taskNode",
|
||||
x: 300,
|
||||
y: 400,
|
||||
text: "任务2",
|
||||
},
|
||||
{
|
||||
id: "end1",
|
||||
type: "endNode",
|
||||
x: 200,
|
||||
y: 500,
|
||||
text: "结束",
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: "edge1",
|
||||
sourceNodeId: "start1",
|
||||
targetNodeId: "task1",
|
||||
},
|
||||
{
|
||||
id: "edge2",
|
||||
sourceNodeId: "task1",
|
||||
targetNodeId: "condition1",
|
||||
},
|
||||
{
|
||||
id: "edge3",
|
||||
sourceNodeId: "condition1",
|
||||
targetNodeId: "approval1",
|
||||
text: "是",
|
||||
},
|
||||
{
|
||||
id: "edge4",
|
||||
sourceNodeId: "condition1",
|
||||
targetNodeId: "task2",
|
||||
text: "否",
|
||||
},
|
||||
{
|
||||
id: "edge5",
|
||||
sourceNodeId: "approval1",
|
||||
targetNodeId: "end1",
|
||||
},
|
||||
{
|
||||
id: "edge6",
|
||||
sourceNodeId: "task2",
|
||||
targetNodeId: "end1",
|
||||
},
|
||||
],
|
||||
};
|
||||
lf.render(exampleData);
|
||||
ElMessage.success("示例流程加载成功");
|
||||
};
|
||||
|
||||
// 窗口大小变化处理
|
||||
const handleResize = () => {
|
||||
if (lf) {
|
||||
lf.resize(window.innerWidth - 350 - 300, window.innerHeight - 100);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化LogicFlow
|
||||
const initLogicFlow = () => {
|
||||
if (lf) return;
|
||||
|
||||
lf = new LogicFlow({
|
||||
container: document.querySelector("#logicflow-canvas"),
|
||||
// 画布配置
|
||||
width: window.innerWidth - 350 - 300,
|
||||
height: window.innerHeight - 100,
|
||||
background: {
|
||||
color: "#F0F0F0",
|
||||
},
|
||||
grid: {
|
||||
type: "dot",
|
||||
size: 20,
|
||||
},
|
||||
snapline: true,
|
||||
textEdit: true,
|
||||
isSilentMode: false,
|
||||
edgeType: "line",
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
plugins: [Control, Menu, SelectionSelect],
|
||||
});
|
||||
|
||||
// 注册自定义节点
|
||||
registerCustomNodes();
|
||||
|
||||
// 增强节点和连线的视觉效果
|
||||
enhanceVisuals();
|
||||
|
||||
// 绑定事件
|
||||
bindEvents();
|
||||
|
||||
// 使用DndPanel的setPatternItems方法配置节点面板
|
||||
lf.extension.dndPanel.setPatternItems([
|
||||
{ type: "startNode", label: "开始节点" },
|
||||
{ type: "endNode", label: "结束节点" },
|
||||
{ type: "taskNode", label: "任务节点" },
|
||||
{ type: "conditionNode", label: "条件节点" },
|
||||
{ type: "approvalNode", label: "审批节点" },
|
||||
{ type: "parallelNode", label: "并行节点" },
|
||||
{ type: "subprocessNode", label: "子流程节点" },
|
||||
{ type: "timerNode", label: "定时节点" },
|
||||
]);
|
||||
|
||||
// 渲染 - 提供空的图数据
|
||||
lf.render({ nodes: [], edges: [] });
|
||||
};
|
||||
|
||||
// 增强节点和连线的视觉效果
|
||||
const enhanceVisuals = () => {
|
||||
if (!lf) return;
|
||||
|
||||
// 为节点添加鼠标悬停效果
|
||||
lf.on("node:mouseenter", (params) => {
|
||||
const node = params.data;
|
||||
lf?.setNodeStyle(node.id, {
|
||||
boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
|
||||
transition: "all 0.3s ease",
|
||||
scale: 1.05,
|
||||
});
|
||||
});
|
||||
|
||||
lf.on("node:mouseleave", (params) => {
|
||||
const node = params.data;
|
||||
lf?.setNodeStyle(node.id, {
|
||||
boxShadow: "none",
|
||||
transition: "all 0.3s ease",
|
||||
scale: 1,
|
||||
});
|
||||
});
|
||||
|
||||
// 节点选中效果
|
||||
lf.on("node:select", (params) => {
|
||||
const node = params.data;
|
||||
lf?.setNodeStyle(node.id, {
|
||||
strokeWidth: 3,
|
||||
boxShadow: "0 0 15px rgba(24, 144, 255, 0.5)",
|
||||
});
|
||||
});
|
||||
|
||||
// 节点取消选中效果
|
||||
lf.on("node:unselect", (params) => {
|
||||
const node = params.data;
|
||||
lf?.setNodeStyle(node.id, {
|
||||
strokeWidth: 2,
|
||||
boxShadow: "none",
|
||||
});
|
||||
});
|
||||
|
||||
// 连线样式增强
|
||||
lf.on("edge:select", (params) => {
|
||||
const edge = params.data;
|
||||
lf?.setEdgeStyle(edge.id, {
|
||||
strokeWidth: 3,
|
||||
stroke: "#1890ff",
|
||||
});
|
||||
});
|
||||
|
||||
lf.on("edge:unselect", (params) => {
|
||||
const edge = params.data;
|
||||
lf?.setEdgeStyle(edge.id, {
|
||||
strokeWidth: 2,
|
||||
stroke: "#aaa",
|
||||
});
|
||||
});
|
||||
|
||||
// 连线鼠标悬停效果
|
||||
lf.on("edge:mouseenter", (params) => {
|
||||
const edge = params.data;
|
||||
lf?.setEdgeStyle(edge.id, {
|
||||
strokeWidth: 3,
|
||||
stroke: "#1890ff",
|
||||
});
|
||||
});
|
||||
|
||||
lf.on("edge:mouseleave", (params) => {
|
||||
const edge = params.data;
|
||||
lf?.setEdgeStyle(edge.id, {
|
||||
strokeWidth: 2,
|
||||
stroke: edge.selected ? "#1890ff" : "#aaa",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initLogicFlow();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (lf) {
|
||||
lf.destroy();
|
||||
lf = null;
|
||||
}
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
.workflow-header {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.workflow-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.node-library {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.node-library-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.node-library-search {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
#dnd-panel {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
|
||||
.dnd-node-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: move;
|
||||
transition: all 0.3s ease;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f9ff;
|
||||
border-color: #91d5ff;
|
||||
box-shadow: 0 4px 8px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
#logicflow-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.property-panel {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.property-panel-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.property-panel-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,745 @@
|
||||
<!-- 租户 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div v-show="visible" class="search-container">
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:model="queryFormData"
|
||||
label-suffix=":"
|
||||
:inline="true"
|
||||
@submit.prevent="handleQuery"
|
||||
>
|
||||
<el-form-item prop="name" label="名称">
|
||||
<el-input v-model="queryFormData.name" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select
|
||||
v-model="queryFormData.status"
|
||||
placeholder="请选择状态"
|
||||
style="width: 170px"
|
||||
clearable
|
||||
>
|
||||
<el-option value="true" label="启用" />
|
||||
<el-option value="false" label="停用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="start_time" label="创建时间">
|
||||
<DatePicker v-model="dateRange" @update:model-value="handleDateRangeChange" />
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:query']"
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:query']"
|
||||
icon="refresh"
|
||||
@click="handleResetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
租户列表
|
||||
<el-tooltip content="租户列表">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--left">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:create']"
|
||||
type="success"
|
||||
icon="plus"
|
||||
@click="handleOpenDialog('create')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:delete']"
|
||||
type="danger"
|
||||
icon="delete"
|
||||
:disabled="selectIds.length === 0"
|
||||
@click="handleDelete(selectIds)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-dropdown v-hasPerm="['module_system:customer:batch']" trigger="click">
|
||||
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
|
||||
更多
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Check" @click="handleMoreClick('0')">
|
||||
批量启用
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
|
||||
批量停用
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="data-table__toolbar--right">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导入">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:import']"
|
||||
type="success"
|
||||
icon="upload"
|
||||
circle
|
||||
@click="handleOpenImportDialog"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导出">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:export']"
|
||||
type="warning"
|
||||
icon="download"
|
||||
circle
|
||||
@click="handleOpenExportsModal"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="搜索显示/隐藏">
|
||||
<el-button
|
||||
v-hasPerm="['*:*:*']"
|
||||
type="info"
|
||||
icon="search"
|
||||
circle
|
||||
@click="visible = !visible"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:query']"
|
||||
type="primary"
|
||||
icon="refresh"
|
||||
circle
|
||||
@click="handleRefresh"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-popover placement="bottom" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="danger" icon="operation" circle></el-button>
|
||||
</template>
|
||||
<el-scrollbar max-height="350px">
|
||||
<template v-for="column in tableColumns" :key="column.prop">
|
||||
<el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="pageTableData"
|
||||
highlight-current-row
|
||||
class="data-table__content"
|
||||
:height="450"
|
||||
border
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
|
||||
type="selection"
|
||||
min-width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'index')?.show"
|
||||
fixed
|
||||
label="序号"
|
||||
min-width="60"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'name')?.show"
|
||||
label="名称"
|
||||
prop="name"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'code')?.show"
|
||||
label="编码"
|
||||
prop="code"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'status')?.show"
|
||||
label="状态"
|
||||
prop="status"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status ? 'success' : 'info'">
|
||||
{{ scope.row.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'description')?.show"
|
||||
label="描述"
|
||||
prop="description"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
|
||||
label="创建时间"
|
||||
prop="created_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
|
||||
label="更新时间"
|
||||
prop="updated_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<!-- <el-table-column v-if="tableColumns.find((col) => col.prop === 'creator')?.show" label="创建人" prop="creator" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.created_by?.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:query']"
|
||||
type="info"
|
||||
size="small"
|
||||
link
|
||||
icon="document"
|
||||
@click="handleOpenDialog('detail', scope.row.id)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:update']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:customer:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleDelete([scope.row.id])"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination
|
||||
v-model:total="total"
|
||||
v-model:page="queryFormData.page_no"
|
||||
v-model:limit="queryFormData.page_size"
|
||||
@pagination="loadingData"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="名称" :span="2">
|
||||
{{ detailFormData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="编码" :span="2">
|
||||
{{ detailFormData.code }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="detailFormData.status ? 'success' : 'danger'">
|
||||
{{ detailFormData.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.created_by?.name }}
|
||||
</el-descriptions-item> -->
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_time }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入名称" :maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入编码" :maxlength="20" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :value="0">启用</el-radio>
|
||||
<el-radio :value="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
:rows="4"
|
||||
:maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<ImportModal
|
||||
v-model="importDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
@upload="handleUpload"
|
||||
/>
|
||||
|
||||
<!-- 导出弹窗 -->
|
||||
<ExportModal
|
||||
v-model="exportsDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
:query-params="queryFormData"
|
||||
:page-data="pageTableData"
|
||||
:selection-data="selectionRows"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Customer",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ResultEnum } from "@/enums/api/result.enum";
|
||||
import ImportModal from "@/components/CURD/ImportModal.vue";
|
||||
import ExportModal from "@/components/CURD/ExportModal.vue";
|
||||
import DatePicker from "@/components/DatePicker/index.vue";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
|
||||
import { formatToDateTime } from "@/utils/dateUtil";
|
||||
import CustomerAPI, { CustomerTable, CustomerForm, CustomerPageQuery } from "@/api/module_system/customer";
|
||||
|
||||
const visible = ref(true);
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const selectionRows = ref<CustomerTable[]>([]);
|
||||
const loading = ref(false);
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<CustomerTable[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: "selection", label: "选择框", show: true },
|
||||
{ prop: "index", label: "序号", show: true },
|
||||
{ prop: "name", label: "名称", show: true },
|
||||
{ prop: "code", label: "编码", show: true },
|
||||
{ prop: "status", label: "状态", show: true },
|
||||
{ prop: "description", label: "描述", show: true },
|
||||
{ prop: "created_time", label: "创建时间", show: true },
|
||||
{ prop: "updated_time", label: "更新时间", show: true },
|
||||
{ prop: "creator", label: "创建人", show: true },
|
||||
{ prop: "operation", label: "操作", show: true },
|
||||
]);
|
||||
|
||||
// 仅用于导出字段的列（排除非数据列及嵌套对象列）
|
||||
const exportColumns = [
|
||||
{ prop: "name", label: "名称" },
|
||||
{ prop: "code", label: "编码" },
|
||||
{ prop: "status", label: "状态" },
|
||||
{ prop: "description", label: "描述" },
|
||||
{ prop: "created_time", label: "创建时间" },
|
||||
{ prop: "updated_time", label: "更新时间" },
|
||||
];
|
||||
|
||||
// 导入/导出配置
|
||||
const curdContentConfig = {
|
||||
permPrefix: "module_system:customer",
|
||||
cols: exportColumns as any,
|
||||
importTemplate: () => CustomerAPI.downloadCustomer(),
|
||||
exportsAction: async (params: any) => {
|
||||
const query: any = { ...params };
|
||||
if (typeof query.status === "string") {
|
||||
query.status = query.status === "true";
|
||||
}
|
||||
query.page_no = 1;
|
||||
query.page_size = 9999;
|
||||
const all: any[] = [];
|
||||
while (true) {
|
||||
const res = await CustomerAPI.listCustomer(query);
|
||||
const items = res.data?.data?.items || [];
|
||||
const total = res.data?.data?.total || 0;
|
||||
all.push(...items);
|
||||
if (all.length >= total || items.length === 0) break;
|
||||
query.page_no += 1;
|
||||
}
|
||||
return all;
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
// 详情表单
|
||||
const detailFormData = ref<CustomerTable>({});
|
||||
// 日期范围临时变量
|
||||
const dateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
function handleDateRangeChange(range: [Date, Date]) {
|
||||
dateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
|
||||
} else {
|
||||
queryFormData.created_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<CustomerPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
created_time: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<CustomerForm>({
|
||||
id: undefined,
|
||||
name: "",
|
||||
code: "",
|
||||
status: "0",
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: "create" as "create" | "update" | "detail",
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入编码", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 导入弹窗显示状态
|
||||
const importDialogVisible = ref(false);
|
||||
|
||||
// 导出弹窗显示状态
|
||||
const exportsDialogVisible = ref(false);
|
||||
|
||||
// 打开导入弹窗
|
||||
function handleOpenImportDialog() {
|
||||
importDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 打开导出弹窗
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh() {
|
||||
await loadingData();
|
||||
}
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await CustomerAPI.listCustomer(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
// 重置日期范围选择器
|
||||
dateRange.value = [];
|
||||
queryFormData.created_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: CustomerForm = {
|
||||
id: undefined,
|
||||
name: "",
|
||||
code: "",
|
||||
status: "0",
|
||||
description: "",
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
selectionRows.value = selection;
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await CustomerAPI.detailCustomer(id);
|
||||
if (type === "detail") {
|
||||
dialogVisible.title = "详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === "update") {
|
||||
dialogVisible.title = "修改";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增客户";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
// 提交表单（防抖）
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await CustomerAPI.updateCustomer(id, { id, ...formData });
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await CustomerAPI.createCustomer(formData);
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await CustomerAPI.deleteCustomer(ids);
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
// 批量启用/停用
|
||||
async function handleMoreClick(status: string) {
|
||||
if (selectIds.value.length) {
|
||||
ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await CustomerAPI.batchCustomer({ ids: selectIds.value, status: status ? "1" : "0" });
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传
|
||||
const handleUpload = async (formData: FormData) => {
|
||||
try {
|
||||
const response = await CustomerAPI.importCustomer(formData);
|
||||
if (response.data.code === ResultEnum.SUCCESS) {
|
||||
ElMessage.success(`${response.data.msg}，${response.data.data}`);
|
||||
importDialogVisible.value = false;
|
||||
await handleQuery();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,757 @@
|
||||
<!-- 租户 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div v-show="visible" class="search-container">
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:model="queryFormData"
|
||||
label-suffix=":"
|
||||
:inline="true"
|
||||
@submit.prevent="handleQuery"
|
||||
>
|
||||
<el-form-item prop="name" label="名称">
|
||||
<el-input v-model="queryFormData.name" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select
|
||||
v-model="queryFormData.status"
|
||||
placeholder="请选择状态"
|
||||
style="width: 170px"
|
||||
clearable
|
||||
>
|
||||
<el-option value="true" label="启用" />
|
||||
<el-option value="false" label="停用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isExpand" prop="creator" label="创建人">
|
||||
<UserTableSelect
|
||||
v-model="queryFormData.created_id"
|
||||
@confirm-click="handleConfirm"
|
||||
@clear-click="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="start_time" label="创建时间">
|
||||
<DatePicker v-model="dateRange" @update:model-value="handleDateRangeChange" />
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:query']"
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:query']"
|
||||
icon="refresh"
|
||||
@click="handleResetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
租户列表
|
||||
<el-tooltip content="租户列表">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--left">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:create']"
|
||||
type="success"
|
||||
icon="plus"
|
||||
@click="handleOpenDialog('create')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:delete']"
|
||||
type="danger"
|
||||
icon="delete"
|
||||
:disabled="selectIds.length === 0"
|
||||
@click="handleDelete(selectIds)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-dropdown v-hasPerm="['module_system:tenant:batch']" trigger="click">
|
||||
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
|
||||
更多
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Check" @click="handleMoreClick('0')">
|
||||
批量启用
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
|
||||
批量停用
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="data-table__toolbar--right">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导入">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:import']"
|
||||
type="success"
|
||||
icon="upload"
|
||||
circle
|
||||
@click="handleOpenImportDialog"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导出">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:export']"
|
||||
type="warning"
|
||||
icon="download"
|
||||
circle
|
||||
@click="handleOpenExportsModal"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="搜索显示/隐藏">
|
||||
<el-button
|
||||
v-hasPerm="['*:*:*']"
|
||||
type="info"
|
||||
icon="search"
|
||||
circle
|
||||
@click="visible = !visible"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:query']"
|
||||
type="primary"
|
||||
icon="refresh"
|
||||
circle
|
||||
@click="handleRefresh"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-popover placement="bottom" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="danger" icon="operation" circle></el-button>
|
||||
</template>
|
||||
<el-scrollbar max-height="350px">
|
||||
<template v-for="column in tableColumns" :key="column.prop">
|
||||
<el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="pageTableData"
|
||||
highlight-current-row
|
||||
class="data-table__content"
|
||||
:height="450"
|
||||
border
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
|
||||
type="selection"
|
||||
min-width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'index')?.show"
|
||||
fixed
|
||||
label="序号"
|
||||
min-width="60"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'name')?.show"
|
||||
label="名称"
|
||||
prop="name"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'code')?.show"
|
||||
label="编码"
|
||||
prop="code"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'status')?.show"
|
||||
label="状态"
|
||||
prop="status"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status ? 'success' : 'info'">
|
||||
{{ scope.row.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'description')?.show"
|
||||
label="描述"
|
||||
prop="description"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
|
||||
label="创建时间"
|
||||
prop="created_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
|
||||
label="更新时间"
|
||||
prop="updated_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<!-- <el-table-column v-if="tableColumns.find((col) => col.prop === 'creator')?.show" label="创建人" prop="creator" min-width="120">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.created_by?.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:query']"
|
||||
type="info"
|
||||
size="small"
|
||||
link
|
||||
icon="document"
|
||||
@click="handleOpenDialog('detail', scope.row.id)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:update']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:tenant:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleDelete([scope.row.id])"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination
|
||||
v-model:total="total"
|
||||
v-model:page="queryFormData.page_no"
|
||||
v-model:limit="queryFormData.page_size"
|
||||
@pagination="loadingData"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="名称" :span="2">
|
||||
{{ detailFormData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="编码" :span="2">
|
||||
{{ detailFormData.code }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="detailFormData.status ? 'success' : 'danger'">
|
||||
{{ detailFormData.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.created_by?.name }}
|
||||
</el-descriptions-item> -->
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_time }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入名称" :maxlength="64" />
|
||||
</el-form-item>
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入编码" :maxlength="20" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :value="0">启用</el-radio>
|
||||
<el-radio :value="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
:rows="4"
|
||||
:maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<ImportModal
|
||||
v-model="importDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
@upload="handleUpload"
|
||||
/>
|
||||
|
||||
<!-- 导出弹窗 -->
|
||||
<ExportModal
|
||||
v-model="exportsDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
:query-params="queryFormData"
|
||||
:page-data="pageTableData"
|
||||
:selection-data="selectionRows"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Tenant",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ResultEnum } from "@/enums/api/result.enum";
|
||||
import ImportModal from "@/components/CURD/ImportModal.vue";
|
||||
import ExportModal from "@/components/CURD/ExportModal.vue";
|
||||
import DatePicker from "@/components/DatePicker/index.vue";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
|
||||
import { formatToDateTime } from "@/utils/dateUtil";
|
||||
import TenantAPI, { TenantTable, TenantForm, TenantPageQuery } from "@/api/module_system/tenant";
|
||||
|
||||
const visible = ref(true);
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const selectionRows = ref<TenantTable[]>([]);
|
||||
const loading = ref(false);
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<TenantTable[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: "selection", label: "选择框", show: true },
|
||||
{ prop: "index", label: "序号", show: true },
|
||||
{ prop: "name", label: "名称", show: true },
|
||||
{ prop: "code", label: "编码", show: true },
|
||||
{ prop: "status", label: "状态", show: true },
|
||||
{ prop: "description", label: "描述", show: true },
|
||||
{ prop: "created_time", label: "创建时间", show: true },
|
||||
{ prop: "updated_time", label: "更新时间", show: true },
|
||||
{ prop: "creator", label: "创建人", show: true },
|
||||
{ prop: "operation", label: "操作", show: true },
|
||||
]);
|
||||
|
||||
// 仅用于导出字段的列（排除非数据列及嵌套对象列）
|
||||
const exportColumns = [
|
||||
{ prop: "name", label: "名称" },
|
||||
{ prop: "code", label: "编码" },
|
||||
{ prop: "status", label: "状态" },
|
||||
{ prop: "description", label: "描述" },
|
||||
{ prop: "created_time", label: "创建时间" },
|
||||
{ prop: "updated_time", label: "更新时间" },
|
||||
];
|
||||
|
||||
// 导入/导出配置
|
||||
const curdContentConfig = {
|
||||
permPrefix: "module_system:tenant",
|
||||
cols: exportColumns as any,
|
||||
importTemplate: () => TenantAPI.downloadTenant(),
|
||||
exportsAction: async (params: any) => {
|
||||
const query: any = { ...params };
|
||||
if (typeof query.status === "string") {
|
||||
query.status = query.status === "true";
|
||||
}
|
||||
query.page_no = 1;
|
||||
query.page_size = 9999;
|
||||
const all: any[] = [];
|
||||
while (true) {
|
||||
const res = await TenantAPI.listTenant(query);
|
||||
const items = res.data?.data?.items || [];
|
||||
const total = res.data?.data?.total || 0;
|
||||
all.push(...items);
|
||||
if (all.length >= total || items.length === 0) break;
|
||||
query.page_no += 1;
|
||||
}
|
||||
return all;
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
// 详情表单
|
||||
const detailFormData = ref<TenantTable>({});
|
||||
// 日期范围临时变量
|
||||
const dateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理日期范围变化
|
||||
function handleDateRangeChange(range: [Date, Date]) {
|
||||
dateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
|
||||
} else {
|
||||
queryFormData.created_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<TenantPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
created_time: undefined, created_id: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<TenantForm>({
|
||||
id: undefined,
|
||||
name: "",
|
||||
code: "",
|
||||
status: '0',
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: "create" as "create" | "update" | "detail",
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入编码", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 导入弹窗显示状态
|
||||
const importDialogVisible = ref(false);
|
||||
|
||||
// 导出弹窗显示状态
|
||||
const exportsDialogVisible = ref(false);
|
||||
|
||||
// 打开导入弹窗
|
||||
function handleOpenImportDialog() {
|
||||
importDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 打开导出弹窗
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh() {
|
||||
await loadingData();
|
||||
}
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await TenantAPI.listTenant(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 选择创建人后触发查询
|
||||
function handleConfirm() {
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
// 重置日期范围选择器
|
||||
dateRange.value = [];
|
||||
queryFormData.created_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: TenantForm = {
|
||||
id: undefined,
|
||||
name: "",
|
||||
code: "",
|
||||
status: '0',
|
||||
description: "",
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
selectionRows.value = selection;
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await TenantAPI.detailTenant(id);
|
||||
if (type === "detail") {
|
||||
dialogVisible.title = "详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === "update") {
|
||||
dialogVisible.title = "修改";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增租户";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
// 提交表单（防抖）
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await TenantAPI.updateTenant(id, { id, ...formData });
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await TenantAPI.createTenant(formData);
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await TenantAPI.deleteTenant(ids);
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
// 批量启用/停用
|
||||
async function handleMoreClick(status: string) {
|
||||
if (selectIds.value.length) {
|
||||
ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await TenantAPI.batchTenant({ ids: selectIds.value, status });
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传
|
||||
const handleUpload = async (formData: FormData) => {
|
||||
try {
|
||||
const response = await TenantAPI.importTenant(formData);
|
||||
if (response.data.code === ResultEnum.SUCCESS) {
|
||||
ElMessage.success(`${response.data.msg}，${response.data.data}`);
|
||||
importDialogVisible.value = false;
|
||||
await handleQuery();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,793 @@
|
||||
<!-- 演示示例 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索区域 -->
|
||||
<div v-show="visible" class="search-container">
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:model="queryFormData"
|
||||
label-suffix=":"
|
||||
:inline="true"
|
||||
@submit.prevent="handleQuery"
|
||||
>
|
||||
<el-form-item prop="name" label="名称">
|
||||
<el-input v-model="queryFormData.name" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item prop="status" label="状态">
|
||||
<el-select
|
||||
v-model="queryFormData.status"
|
||||
placeholder="请选择状态"
|
||||
style="width: 170px"
|
||||
clearable
|
||||
>
|
||||
<el-option value="0" label="启用" />
|
||||
<el-option value="1" label="停用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isExpand" prop="created_id" label="创建人">
|
||||
<UserTableSelect
|
||||
v-model="queryFormData.created_id"
|
||||
@confirm-click="handleConfirm"
|
||||
@clear-click="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isExpand" prop="updated_id" label="更新人">
|
||||
<UserTableSelect
|
||||
v-model="queryFormData.updated_id"
|
||||
@confirm-click="handleConfirm"
|
||||
@clear-click="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 时间范围，收起状态下隐藏 -->
|
||||
<el-form-item v-if="isExpand" prop="created_time" label="创建时间">
|
||||
<DatePicker
|
||||
v-model="createdDateRange"
|
||||
@update:model-value="handleCreatedDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isExpand" prop="updated_time" label="更新时间">
|
||||
<DatePicker
|
||||
v-model="updatedDateRange"
|
||||
@update:model-value="handleUpdatedDateRangeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 查询、重置、展开/收起按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:query']"
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="handleQuery"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:query']"
|
||||
icon="refresh"
|
||||
@click="handleResetQuery"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<!-- 展开/收起 -->
|
||||
<template v-if="isExpandable">
|
||||
<el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
|
||||
{{ isExpand ? "收起" : "展开" }}
|
||||
<el-icon>
|
||||
<template v-if="isExpand">
|
||||
<ArrowUp />
|
||||
</template>
|
||||
<template v-else>
|
||||
<ArrowDown />
|
||||
</template>
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<el-card class="data-table">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>
|
||||
演示示例列表
|
||||
<el-tooltip content="演示示例列表">
|
||||
<QuestionFilled class="w-4 h-4 mx-1" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 功能区域 -->
|
||||
<div class="data-table__toolbar">
|
||||
<div class="data-table__toolbar--left">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:create']"
|
||||
type="success"
|
||||
icon="plus"
|
||||
@click="handleOpenDialog('create')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:delete']"
|
||||
type="danger"
|
||||
icon="delete"
|
||||
:disabled="selectIds.length === 0"
|
||||
@click="handleDelete(selectIds)"
|
||||
>
|
||||
批量删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-dropdown v-hasPerm="['module_system:token:patch']" trigger="click">
|
||||
<el-button type="default" :disabled="selectIds.length === 0" icon="ArrowDown">
|
||||
更多
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item icon="Check" @click="handleMoreClick('0')">
|
||||
批量启用
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="CircleClose" @click="handleMoreClick('1')">
|
||||
批量停用
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="data-table__toolbar--right">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导入">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:import']"
|
||||
type="success"
|
||||
icon="upload"
|
||||
circle
|
||||
@click="handleOpenImportDialog"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="导出">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:export']"
|
||||
type="warning"
|
||||
icon="download"
|
||||
circle
|
||||
@click="handleOpenExportsModal"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="搜索显示/隐藏">
|
||||
<el-button
|
||||
v-hasPerm="['*:*:*']"
|
||||
type="info"
|
||||
icon="search"
|
||||
circle
|
||||
@click="visible = !visible"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-tooltip content="刷新">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:query']"
|
||||
type="primary"
|
||||
icon="refresh"
|
||||
circle
|
||||
@click="handleRefresh"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-popover placement="bottom" trigger="click">
|
||||
<template #reference>
|
||||
<el-button type="danger" icon="operation" circle></el-button>
|
||||
</template>
|
||||
<el-scrollbar max-height="350px">
|
||||
<template v-for="column in tableColumns" :key="column.prop">
|
||||
<el-checkbox v-if="column.prop" v-model="column.show" :label="column.label" />
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域：系统配置列表 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="pageTableData"
|
||||
highlight-current-row
|
||||
class="data-table__content"
|
||||
height="500"
|
||||
max-height="500"
|
||||
border
|
||||
stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
|
||||
type="selection"
|
||||
min-width="55"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'index')?.show"
|
||||
fixed
|
||||
label="序号"
|
||||
min-width="60"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ (queryFormData.page_no - 1) * queryFormData.page_size + scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'name')?.show"
|
||||
label="名称"
|
||||
prop="name"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'status')?.show"
|
||||
label="状态"
|
||||
prop="status"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status ? 'success' : 'info'">
|
||||
{{ scope.row.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'description')?.show"
|
||||
label="描述"
|
||||
prop="description"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
|
||||
label="创建时间"
|
||||
prop="created_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
|
||||
label="更新时间"
|
||||
prop="updated_time"
|
||||
min-width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'created_id')?.show"
|
||||
label="创建人"
|
||||
prop="created_id"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.created_by?.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'updated_id')?.show"
|
||||
label="更新人"
|
||||
prop="updated_id"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.updated_by?.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
min-width="180"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:query']"
|
||||
type="info"
|
||||
size="small"
|
||||
link
|
||||
icon="document"
|
||||
@click="handleOpenDialog('detail', scope.row.id)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:update']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
icon="edit"
|
||||
@click="handleOpenDialog('update', scope.row.id)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['module_system:token:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
icon="delete"
|
||||
@click="handleDelete([scope.row.id])"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页区域 -->
|
||||
<template #footer>
|
||||
<pagination
|
||||
v-model:total="total"
|
||||
v-model:page="queryFormData.page_no"
|
||||
v-model:limit="queryFormData.page_size"
|
||||
@pagination="loadingData"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
|
||||
<!-- 弹窗区域 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<!-- 详情 -->
|
||||
<template v-if="dialogVisible.type === 'detail'">
|
||||
<el-descriptions :column="4" border>
|
||||
<el-descriptions-item label="名称" :span="2">
|
||||
{{ detailFormData.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态" :span="2">
|
||||
<el-tag :type="detailFormData.status ? 'success' : 'danger'">
|
||||
{{ detailFormData.status ? "启用" : "停用" }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="描述" :span="2">
|
||||
{{ detailFormData.description }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人" :span="2">
|
||||
{{ detailFormData.created_by?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新人" :span="2">
|
||||
{{ detailFormData.updated_by?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间" :span="2">
|
||||
{{ detailFormData.created_time }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间" :span="2">
|
||||
{{ detailFormData.updated_time }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<!-- 新增、编辑表单 -->
|
||||
<template v-else>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
label-width="auto"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入名称" :maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio value="0">启用</el-radio>
|
||||
<el-radio value="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
:rows="4"
|
||||
:maxlength="100"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<!-- 详情弹窗不需要确定按钮的提交逻辑 -->
|
||||
<el-button @click="handleCloseDialog">取消</el-button>
|
||||
<el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
<el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<ImportModal
|
||||
v-model="importDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
@upload="handleUpload"
|
||||
/>
|
||||
|
||||
<!-- 导出弹窗 -->
|
||||
<ExportModal
|
||||
v-model="exportsDialogVisible"
|
||||
:content-config="curdContentConfig"
|
||||
:query-params="queryFormData"
|
||||
:page-data="pageTableData"
|
||||
:selection-data="selectionRows"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Token",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ResultEnum } from "@/enums/api/result.enum";
|
||||
import TokenAPI, { TokenTable, TokenForm, TokenPageQuery } from "@/api/module_system/token";
|
||||
import ImportModal from "@/components/CURD/ImportModal.vue";
|
||||
import ExportModal from "@/components/CURD/ExportModal.vue";
|
||||
import DatePicker from "@/components/DatePicker/index.vue";
|
||||
import type { IContentConfig } from "@/components/CURD/types";
|
||||
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";
|
||||
import { formatToDateTime } from "@/utils/dateUtil";
|
||||
|
||||
const visible = ref(true);
|
||||
const queryFormRef = ref();
|
||||
const dataFormRef = ref();
|
||||
const total = ref(0);
|
||||
const selectIds = ref<number[]>([]);
|
||||
const selectionRows = ref<TokenTable[]>([]);
|
||||
const loading = ref(false);
|
||||
const isExpand = ref(false);
|
||||
const isExpandable = ref(true);
|
||||
|
||||
// 分页表单
|
||||
const pageTableData = ref<TokenTable[]>([]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ prop: "selection", label: "选择框", show: true },
|
||||
{ prop: "index", label: "序号", show: true },
|
||||
{ prop: "name", label: "名称", show: true },
|
||||
{ prop: "status", label: "状态", show: true },
|
||||
{ prop: "description", label: "描述", show: true },
|
||||
{ prop: "created_time", label: "创建时间", show: true },
|
||||
{ prop: "updated_time", label: "更新时间", show: true },
|
||||
{ prop: "created_id", label: "创建人", show: true },
|
||||
{ prop: "updated_id", label: "更新人", show: true },
|
||||
{ prop: "operation", label: "操作", show: true },
|
||||
]);
|
||||
|
||||
// 仅用于导出字段的列（排除非数据列及嵌套对象列）
|
||||
const exportColumns = [
|
||||
{ prop: "name", label: "名称" },
|
||||
{ prop: "status", label: "状态" },
|
||||
{ prop: "description", label: "描述" },
|
||||
{ prop: "created_time", label: "创建时间" },
|
||||
{ prop: "updated_time", label: "更新时间" },
|
||||
];
|
||||
|
||||
// 导入/导出配置
|
||||
const curdContentConfig = {
|
||||
permPrefix: "module_system:token",
|
||||
cols: exportColumns as any,
|
||||
importTemplate: () => TokenAPI.downloadTemplateToken(),
|
||||
exportsAction: async (params: any) => {
|
||||
const query: any = { ...params };
|
||||
if (typeof query.status === "string") {
|
||||
query.status = query.status === "true";
|
||||
}
|
||||
query.page_no = 1;
|
||||
query.page_size = 9999;
|
||||
const all: any[] = [];
|
||||
while (true) {
|
||||
const res = await TokenAPI.getTokenList(query);
|
||||
const items = res.data?.data?.items || [];
|
||||
const total = res.data?.data?.total || 0;
|
||||
all.push(...items);
|
||||
if (all.length >= total || items.length === 0) break;
|
||||
query.page_no += 1;
|
||||
}
|
||||
return all;
|
||||
},
|
||||
} as unknown as IContentConfig;
|
||||
// 详情表单
|
||||
const detailFormData = ref<TokenTable>({});
|
||||
// 日期范围临时变量
|
||||
const createdDateRange = ref<[Date, Date] | []>([]);
|
||||
// 更新时间范围临时变量
|
||||
const updatedDateRange = ref<[Date, Date] | []>([]);
|
||||
|
||||
// 处理创建时间范围变化
|
||||
function handleCreatedDateRangeChange(range: [Date, Date]) {
|
||||
createdDateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.created_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
|
||||
} else {
|
||||
queryFormData.created_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理更新时间范围变化
|
||||
function handleUpdatedDateRangeChange(range: [Date, Date]) {
|
||||
updatedDateRange.value = range;
|
||||
if (range && range.length === 2) {
|
||||
queryFormData.updated_time = [formatToDateTime(range[0]), formatToDateTime(range[1])];
|
||||
} else {
|
||||
queryFormData.updated_time = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页查询参数
|
||||
const queryFormData = reactive<TokenPageQuery>({
|
||||
page_no: 1,
|
||||
page_size: 10,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
created_time: undefined,
|
||||
updated_time: undefined,
|
||||
created_id: undefined,
|
||||
updated_id: undefined,
|
||||
});
|
||||
|
||||
// 编辑表单
|
||||
const formData = reactive<TokenForm>({
|
||||
id: undefined,
|
||||
name: "",
|
||||
status: "0",
|
||||
description: undefined,
|
||||
});
|
||||
|
||||
// 弹窗状态
|
||||
const dialogVisible = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
type: "create" as "create" | "update" | "detail",
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "blur" }],
|
||||
});
|
||||
|
||||
// 导入弹窗显示状态
|
||||
const importDialogVisible = ref(false);
|
||||
|
||||
// 导出弹窗显示状态
|
||||
const exportsDialogVisible = ref(false);
|
||||
|
||||
// 打开导入弹窗
|
||||
function handleOpenImportDialog() {
|
||||
importDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 打开导出弹窗
|
||||
function handleOpenExportsModal() {
|
||||
exportsDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 列表刷新
|
||||
async function handleRefresh() {
|
||||
await loadingData();
|
||||
}
|
||||
|
||||
// 加载表格数据
|
||||
async function loadingData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await TokenAPI.getTokenList(queryFormData);
|
||||
pageTableData.value = response.data.data.items;
|
||||
total.value = response.data.data.total;
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查询（重置页码后获取数据）
|
||||
async function handleQuery() {
|
||||
queryFormData.page_no = 1;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 选择创建人后触发查询
|
||||
function handleConfirm() {
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
async function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryFormData.page_no = 1;
|
||||
// 重置日期范围选择器
|
||||
createdDateRange.value = [];
|
||||
updatedDateRange.value = [];
|
||||
queryFormData.created_time = undefined;
|
||||
queryFormData.updated_time = undefined;
|
||||
loadingData();
|
||||
}
|
||||
|
||||
// 定义初始表单数据常量
|
||||
const initialFormData: TokenForm = {
|
||||
id: undefined,
|
||||
name: "",
|
||||
status: "0",
|
||||
description: "",
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
async function resetForm() {
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
}
|
||||
// 完全重置 formData 为初始状态
|
||||
Object.assign(formData, initialFormData);
|
||||
}
|
||||
|
||||
// 行复选框选中项变化
|
||||
async function handleSelectionChange(selection: any) {
|
||||
selectIds.value = selection.map((item: any) => item.id);
|
||||
selectionRows.value = selection;
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
async function handleCloseDialog() {
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
|
||||
dialogVisible.type = type;
|
||||
if (id) {
|
||||
const response = await TokenAPI.getTokenDetail(id);
|
||||
if (type === "detail") {
|
||||
dialogVisible.title = "详情";
|
||||
Object.assign(detailFormData.value, response.data.data);
|
||||
} else if (type === "update") {
|
||||
dialogVisible.title = "修改";
|
||||
Object.assign(formData, response.data.data);
|
||||
}
|
||||
} else {
|
||||
dialogVisible.title = "新增令牌";
|
||||
formData.id = undefined;
|
||||
}
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
// 提交表单（防抖）
|
||||
async function handleSubmit() {
|
||||
// 表单校验
|
||||
dataFormRef.value.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
// 根据弹窗传入的参数(deatil\create\update)判断走什么逻辑
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
try {
|
||||
await TokenAPI.updateToken(id, { id, ...formData });
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await TokenAPI.createToken(formData);
|
||||
dialogVisible.visible = false;
|
||||
resetForm();
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 删除、批量删除
|
||||
async function handleDelete(ids: number[]) {
|
||||
ElMessageBox.confirm("确认删除该项数据?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await TokenAPI.deleteToken(ids);
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
|
||||
// 批量启用/停用
|
||||
async function handleMoreClick(status: string) {
|
||||
if (selectIds.value.length) {
|
||||
ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await TokenAPI.batchToken({ ids: selectIds.value, status });
|
||||
handleResetQuery();
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessageBox.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理上传
|
||||
const handleUpload = async (formData: FormData) => {
|
||||
try {
|
||||
const response = await TokenAPI.importToken(formData);
|
||||
if (response.data.code === ResultEnum.SUCCESS) {
|
||||
ElMessage.success(`${response.data.msg}，${response.data.data}`);
|
||||
importDialogVisible.value = false;
|
||||
await handleQuery();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadingData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user