zhanglei
10 hours ago
13 changed files with 161 additions and 1343 deletions
@ -0,0 +1,66 @@ |
|||
package {{ package.Controller }}; |
|||
|
|||
//VUE 固定引入 CommonEnums |
|||
import {{ package.Entity }}.CommonEnums; |
|||
import {{ package.Service }}.{{ table.entity }}Service; |
|||
import {{ package.Common }}.vo.Result; |
|||
|
|||
//--- import 固定引入 ---// |
|||
import io.swagger.annotations.Api; |
|||
import io.swagger.annotations.ApiOperation; |
|||
import org.springframework.web.bind.annotation.*; |
|||
|
|||
import javax.annotation.Resource; |
|||
import javax.validation.Valid; |
|||
import java.util.List; |
|||
//--- import 固定引入 ---// |
|||
|
|||
/** |
|||
* <p> |
|||
* 后台枚举 前端控制器 |
|||
* </p> |
|||
* |
|||
* @author tiger |
|||
* @since 2026-03-17 |
|||
*/ |
|||
@Api(tags = "公共方法对外接口") |
|||
@RestController |
|||
@RequestMapping("/model/common") |
|||
public class CommonController { |
|||
|
|||
@Resource |
|||
private {{ table.entity }}Service {{table.lowerEntity}}Service; |
|||
|
|||
|
|||
@ApiOperation(value = "枚举列表查询", response = {{ table.entity }}.class) |
|||
@PostMapping(value = "/optionList") |
|||
public Result<?> optionList(@Valid @RequestBody {{ table.entity }} param, |
|||
@RequestHeader("token") String token, |
|||
@RequestHeader(value = "version", defaultValue = "1.0") String version) { |
|||
|
|||
List<{{ table.entity }}> list = {{table.lowerEntity}}Service.list(param); |
|||
if (list == null) { |
|||
return Result.error("无数据"); |
|||
} |
|||
List<CommonVueEnumsEntity> option = new ArrayList<>(); |
|||
list.forEach(item -> { |
|||
AtomicReference<Boolean> isExt = new AtomicReference<>(false); |
|||
option.forEach(item2 -> { |
|||
if (item.getFieldName().equals(item2.getFieldName()) |
|||
&& item.getFieldLabel().equals(item2.getFieldLabel())) { |
|||
item2.getOptions().add(item); |
|||
isExt.set(true); |
|||
} |
|||
}); |
|||
if(!isExt.get()){ |
|||
CommonVueEnumsEntity optionItem = new CommonVueEnumsEntity(); |
|||
optionItem.setFieldName(item.getFieldName()); |
|||
optionItem.setFieldLabel(item.getFieldLabel()); |
|||
optionItem.setOptions(new ArrayList<>()); |
|||
optionItem.getOptions().add(item); |
|||
option.add(optionItem); |
|||
} |
|||
}); |
|||
return Result.OK( option ); |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
package {{ package.Entity }}; |
|||
|
|||
import lombok.Data; |
|||
|
|||
import java.util.List; |
|||
|
|||
/** |
|||
* <p> |
|||
* 枚举自增 |
|||
* </p> |
|||
* |
|||
* @author zmm |
|||
* @since 2026-03-12 |
|||
*/ |
|||
@Data |
|||
public class CommonVueEnumsEntity { |
|||
private static final long serialVersionUID = 1L; |
|||
private String fieldName; |
|||
private String fieldLabel; |
|||
private List<AdminEnums> options; |
|||
} |
|||
@ -1,69 +0,0 @@ |
|||
/** |
|||
* 自动生成 API |
|||
* 负责调用后端接口 |
|||
*/ |
|||
|
|||
import { requestClient } from '#/api/request'; |
|||
import { useAppConfig } from '@vben/hooks'; |
|||
import { useAccessStore } from '@vben/stores'; |
|||
|
|||
export namespace funApi { |
|||
|
|||
const applicationConfig = useAppConfig(import.meta.env, import.meta.env.PROD); |
|||
console.log('=== 接口域名 ===', applicationConfig.javaURL) |
|||
|
|||
/** |
|||
* 分页查询 |
|||
*/ |
|||
export function page(params: any) { |
|||
return requestClient.post(applicationConfig.javaURL+'/health-fun/page', params, |
|||
{ headers: {'Content-Type': 'application/json', Token: useAccessStore().accessToken, version: '1.0.1'}}); |
|||
} |
|||
|
|||
/** |
|||
* 获取详情 |
|||
*/ |
|||
export function get(id: number) { |
|||
return requestClient.get(applicationConfig.javaURL+'/health-fun/' + id); |
|||
} |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
export function add(data: any) { |
|||
return requestClient.post(applicationConfig.javaURL+'/health-fun/add', data, |
|||
{ headers: {'Content-Type': 'application/json', Token: useAccessStore().accessToken, version: '1.0.1'}}); |
|||
} |
|||
|
|||
/** |
|||
* 修改 |
|||
*/ |
|||
export function save(data: any) { |
|||
return requestClient.post(applicationConfig.javaURL+'/health-fun/modify', data, |
|||
{ headers: {'Content-Type': 'application/json', Token: useAccessStore().accessToken, version: '1.0.1'}}); |
|||
} |
|||
|
|||
/** |
|||
* 删除 |
|||
*/ |
|||
export function remove(id: number) { |
|||
return requestClient.delete(applicationConfig.javaURL+'/health-fun/' + id); |
|||
} |
|||
|
|||
/** |
|||
* 枚举列表 |
|||
*/ |
|||
export function enumList(params: any) { |
|||
return requestClient.post(applicationConfig.javaURL+'/health-enums/optionList', params, |
|||
{ headers: {'Content-Type': 'application/json', Token: useAccessStore().accessToken, version: '1.0.1'}}); |
|||
} |
|||
|
|||
/** |
|||
* 上传图片 |
|||
*/ |
|||
export function upload(params: any) { |
|||
return requestClient.post(applicationConfig.javaURL+'/file/up', params, |
|||
{ headers: {'Content-Type': 'multipart/form-data', Token: useAccessStore().accessToken, version: '1.0.1'}}); |
|||
} |
|||
|
|||
} |
|||
@ -1,31 +0,0 @@ |
|||
/** |
|||
* 自动生成路由 |
|||
*/ |
|||
|
|||
import type { RouteRecordRaw } from 'vue-router'; |
|||
|
|||
const routes: RouteRecordRaw[] = [ |
|||
|
|||
{ |
|||
path: '/fun', |
|||
name: '功能配置表模块', |
|||
meta: { |
|||
icon: 'ic:baseline-view-in-ar', |
|||
order: 1000, |
|||
keepAlive: true, |
|||
title: '', |
|||
}, |
|||
children: [ |
|||
{ |
|||
meta: { |
|||
title: "功能配置表列表", |
|||
}, |
|||
name: 'funList', |
|||
path: '/fun', |
|||
component: () => import('#/views/fun/index.vue'), |
|||
}, |
|||
], |
|||
} |
|||
]; |
|||
|
|||
export default routes; |
|||
@ -1,253 +0,0 @@ |
|||
/** |
|||
* 表格列配置 |
|||
*/ |
|||
|
|||
import type { VxeGridProps } from '#/adapter/vxe-table'; |
|||
|
|||
export const columns: VxeGridProps['columns'] = [ |
|||
|
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '主键ID', |
|||
|
|||
// 对应字段
|
|||
field: 'id', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '父类ID', |
|||
|
|||
// 对应字段
|
|||
field: 'funParentId', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '功能名称', |
|||
|
|||
// 对应字段
|
|||
field: 'funName', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '功能码对外做映射用', |
|||
|
|||
// 对应字段
|
|||
field: 'funCode', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '功能数值', |
|||
|
|||
// 对应字段
|
|||
field: 'funValue', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '告警级别: 0默认，1级，2级，3级', |
|||
|
|||
// 对应字段
|
|||
field: 'funWarnLevel', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '用位运算组合', |
|||
|
|||
// 对应字段
|
|||
field: 'funWarnType', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '是否在首页展示: 0展示，1不展示', |
|||
|
|||
// 对应字段
|
|||
field: 'funIndex', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '创建时间', |
|||
|
|||
// 对应字段
|
|||
field: 'createdAt', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '创建人', |
|||
|
|||
// 对应字段
|
|||
field: 'createdBy', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '更新时间', |
|||
|
|||
// 对应字段
|
|||
field: 'updatedAt', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '更新人', |
|||
|
|||
// 对应字段
|
|||
field: 'updatedBy', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '删除 0 默认 1删除', |
|||
|
|||
// 对应字段
|
|||
field: 'deletedFlag', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '用户ID', |
|||
|
|||
// 对应字段
|
|||
field: 'userId', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '设备唯一标识', |
|||
|
|||
// 对应字段
|
|||
field: 'deviceCode', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '功能图', |
|||
|
|||
// 对应字段
|
|||
field: 'funImg', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '设备类型', |
|||
|
|||
// 对应字段
|
|||
field: 'deviceType', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '功能状态: 默认 0开通，1关闭，2隐藏', |
|||
|
|||
// 对应字段
|
|||
field: 'funStatus', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '完成10,30,60逐级提升告警持续', |
|||
|
|||
// 对应字段
|
|||
field: 'graduallyIntervalTime', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '消息展示语', |
|||
|
|||
// 对应字段
|
|||
field: 'funMsgTitle', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '持续时间默认值', |
|||
|
|||
// 对应字段
|
|||
field: 'funStatisticsTimes', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
{ |
|||
// 列标题
|
|||
title: '短消息提示语言', |
|||
|
|||
// 对应字段
|
|||
field: 'funShortMsg', |
|||
|
|||
// 宽度
|
|||
width: 150 |
|||
}, |
|||
|
|||
|
|||
]; |
|||
@ -1,276 +0,0 @@ |
|||
/** |
|||
* 表单 schema |
|||
* component 类型来自 parse_component() |
|||
*/ |
|||
|
|||
import type { VbenFormSchema } from '#/adapter/form'; |
|||
|
|||
export const formSchema: VbenFormSchema[] = [ |
|||
|
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'id', |
|||
|
|||
// label
|
|||
label: '主键ID', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funParentId', |
|||
|
|||
// label
|
|||
label: '父类ID', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funName', |
|||
|
|||
// label
|
|||
label: '功能名称', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funCode', |
|||
|
|||
// label
|
|||
label: '功能码对外做映射用', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funValue', |
|||
|
|||
// label
|
|||
label: '功能数值', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funWarnLevel', |
|||
|
|||
// label
|
|||
label: '告警级别: 0默认，1级，2级，3级', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funWarnType', |
|||
|
|||
// label
|
|||
label: '用位运算组合', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funIndex', |
|||
|
|||
// label
|
|||
label: '是否在首页展示: 0展示，1不展示', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'createdAt', |
|||
|
|||
// label
|
|||
label: '创建时间', |
|||
|
|||
// 自动组件
|
|||
component: 'DatePicker' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'createdBy', |
|||
|
|||
// label
|
|||
label: '创建人', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'updatedAt', |
|||
|
|||
// label
|
|||
label: '更新时间', |
|||
|
|||
// 自动组件
|
|||
component: 'DatePicker' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'updatedBy', |
|||
|
|||
// label
|
|||
label: '更新人', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'deletedFlag', |
|||
|
|||
// label
|
|||
label: '删除 0 默认 1删除', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'userId', |
|||
|
|||
// label
|
|||
label: '用户ID', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'deviceCode', |
|||
|
|||
// label
|
|||
label: '设备唯一标识', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funImg', |
|||
|
|||
// label
|
|||
label: '功能图', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'deviceType', |
|||
|
|||
// label
|
|||
label: '设备类型', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funStatus', |
|||
|
|||
// label
|
|||
label: '功能状态: 默认 0开通，1关闭，2隐藏', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'graduallyIntervalTime', |
|||
|
|||
// label
|
|||
label: '完成10,30,60逐级提升告警持续', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funMsgTitle', |
|||
|
|||
// label
|
|||
label: '消息展示语', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funStatisticsTimes', |
|||
|
|||
// label
|
|||
label: '持续时间默认值', |
|||
|
|||
// 自动组件
|
|||
component: 'InputNumber' |
|||
|
|||
}, |
|||
|
|||
{ |
|||
// 字段名
|
|||
fieldName: 'funShortMsg', |
|||
|
|||
// label
|
|||
label: '短消息提示语言', |
|||
|
|||
// 自动组件
|
|||
component: 'Input' |
|||
|
|||
}, |
|||
|
|||
|
|||
]; |
|||
@ -1,675 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
/** |
|||
* fun管理页面 |
|||
*/ |
|||
import {ref, reactive, onMounted, watch, h} from 'vue'; |
|||
import {useVbenVxeGrid} from '#/adapter/vxe-table'; |
|||
import {useVbenModal} from '@vben/common-ui'; |
|||
import {useVbenForm} from '#/adapter/form'; |
|||
import {Upload, message, Image} from 'ant-design-vue'; |
|||
import dayjs from 'dayjs'; |
|||
import {columns} from './data'; |
|||
import {formSchema} from './form'; |
|||
import { funApi } from '#/api/fun'; |
|||
// ========== 获取 API 基础 URL ========== |
|||
const API_BASE_URL = import.meta.env.VITE_GLOB_API_URL || ''; |
|||
|
|||
// ========== 状态变量 ========== |
|||
const currentRow = ref(null); |
|||
const isEdit = ref(false); |
|||
const modalTitle = ref('新增'); |
|||
const uploadFieldName = ref(''); |
|||
const uploadImageUrl = ref(''); |
|||
const uploadedUrl = ref(''); // 上传成功后返回的 |
|||
const formUploadUrls = ref<Record<string, string>>({}); // 存储新增弹窗中各字段的上传 URL |
|||
|
|||
// ========== 动态生成的查询表单 Schema ========== |
|||
const querySchema = ref([]); |
|||
// ========== 枚举数据配置 ========== |
|||
const enumData = reactive({ |
|||
loading: true, |
|||
list: [], // 存储接口返回的原始枚举数据 |
|||
}); |
|||
//todo 枚举数据在查询里面不展示的配置 |
|||
const hiddenColumns = ref(['fun_code', 'graduallyIntervalTime', 'funMsgTitle', 'funImg', 'createdAt', 'updatedBy', 'updatedAt', 'userPassword', 'userId', 'userSys', 'deletedFlag', "userFace"]) |
|||
const editFields = ['userId','createdAt','createdBy','updatedAt','updatedBy','deletedFlag']; |
|||
|
|||
// ========== 判断是否是图片字段 ========== |
|||
function isImageField(field: string) { |
|||
return /img|face|picture/i.test(field); |
|||
} |
|||
// ========== 初始化枚举数据和查询表单 ========== |
|||
async function initEnumData() { |
|||
try { |
|||
enumData.loading = true; |
|||
|
|||
// 调用枚举列表接口 |
|||
const res = await funApi.enumList({}); |
|||
const enums = res.result || res; |
|||
|
|||
// 保存原始枚举数据 |
|||
enumData.list = enums; |
|||
|
|||
// 根据 queryFields 和枚举数据动态生成查询表单 schema` |
|||
querySchema.value = formSchema.filter(formItem => { |
|||
// 2. 排除隐藏的字段 |
|||
if (hiddenColumns.value.includes(formItem.fieldName)) { |
|||
console.log('跳过隐藏字段:', formItem.fieldName) |
|||
return false; |
|||
} |
|||
return true; |
|||
}).map(formSchemaTmp => { |
|||
// 在枚举列表中查找匹配的字段 |
|||
const matchedEnums = enums.filter(item => item.fieldName === formSchemaTmp.fieldName); |
|||
|
|||
// 合并相同 fieldName 的所有 options |
|||
const allOptions = matchedEnums.reduce((acc, item) => { |
|||
if (item.options && Array.isArray(item.options)) { |
|||
return [...acc, ...item.options]; |
|||
} |
|||
return acc; |
|||
}, []); |
|||
// 判断是否有匹配的枚举选项 |
|||
if (allOptions.length > 0) { |
|||
return { |
|||
component: 'Select', |
|||
fieldName: formSchemaTmp.fieldName, |
|||
label: formSchemaTmp.label, |
|||
componentProps: { |
|||
placeholder: `请选择`, |
|||
allowClear: true, |
|||
options: allOptions.map(opt => ({ |
|||
label: opt.label, |
|||
value: String(opt.value), // 确保 value 是字符串 |
|||
})), |
|||
}, |
|||
}; |
|||
} else { |
|||
// ❌ 未匹配到枚举 → 使用 Input 组件 |
|||
return { |
|||
component: 'Input', |
|||
fieldName: formSchemaTmp.fieldName, |
|||
label: formSchemaTmp.label, |
|||
componentProps: { |
|||
placeholder: `请输入${formSchemaTmp.label}`, |
|||
allowClear: true, |
|||
}, |
|||
}; |
|||
} |
|||
}); |
|||
} catch (error) { |
|||
} finally { |
|||
enumData.loading = false; |
|||
} |
|||
} |
|||
|
|||
// 页面加载时自动执行初始化 |
|||
onMounted(() => { |
|||
initEnumData(); |
|||
}); |
|||
|
|||
// ========== 查询表单配置 (初始为空 schema) ========== |
|||
const [QueryForm, queryFormApi] = useVbenForm({ |
|||
schema: [], // 初始化为空数组 |
|||
layout: 'inline', |
|||
showDefaultActions: false, |
|||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-5', |
|||
}) |
|||
// ========== 监听 querySchema 变化并更新表单 ========== |
|||
watch( |
|||
querySchema, |
|||
(newSchema) => { |
|||
if (newSchema && newSchema.length > 0) { |
|||
console.log('🔄 更新查询表单 schema:', newSchema); |
|||
// ✅ 使用 setState 方法更新 schema |
|||
queryFormApi.setState({ |
|||
schema: newSchema, |
|||
}); |
|||
} |
|||
}, |
|||
{immediate: false} |
|||
); |
|||
|
|||
|
|||
// ========== 表格配置 ========== |
|||
function getFullUrl(url: string) { |
|||
if (!url) return ''; |
|||
if (url.startsWith('http')) return url; |
|||
return `${API_BASE_URL}${url}`; |
|||
} |
|||
const gridOptions = { |
|||
columns: [ |
|||
...columns.map(col => { |
|||
// ✅ 如果是图片字段 (包含 img, face, picture)，使用图片渲染 + 上传按钮 |
|||
if (isImageField(col.field)) { |
|||
return { |
|||
...col, |
|||
width: 200, |
|||
align: 'center', |
|||
slots: { |
|||
default: ({row}: any) => { |
|||
const imgUrl = row[col.field]; |
|||
const handleClick = (e: Event) => { |
|||
e.stopPropagation(); |
|||
currentRow.value = row; |
|||
isEdit.value = true; |
|||
openUploadDialog(col.field, imgUrl); |
|||
}; |
|||
if (!imgUrl) { |
|||
return h('div', { class: 'flex items-center justify-center gap-2 h-[50px]' }, [ |
|||
h('span', { class: 'text-gray-400 text-xs' }, '无图片'), |
|||
h('button', { onClick: handleClick, class: 'text-blue-500 text-xs' }, '上传'), |
|||
]); |
|||
} |
|||
return h('div', { class: 'flex items-center gap-2 justify-center' }, [ |
|||
h(Image, { |
|||
src: getFullUrl(imgUrl), |
|||
width: 80, |
|||
height: 60, |
|||
preview: true, |
|||
}), |
|||
h('button', { onClick: handleClick, class: 'text-blue-500 text-xs' }, '更换'), |
|||
]); |
|||
} |
|||
} |
|||
}; |
|||
} |
|||
return col; |
|||
}), |
|||
{ |
|||
field: 'action', |
|||
title: '操作', |
|||
width: 120, |
|||
fixed: 'right', |
|||
slots: {default: 'action'}, |
|||
}, |
|||
], |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async ({page}) => { |
|||
try { |
|||
// 获取查询表单的值 |
|||
const queryValues = await queryFormApi.getValues(); |
|||
const res = await funApi.page({ |
|||
pageNum: page.currentPage || 1, |
|||
pageSize: page?.pageSize || 10, |
|||
...queryValues, // 携带查询条件 |
|||
}) |
|||
|
|||
const data = res.error?.result || res.result || res |
|||
return { |
|||
items: data.records || [], |
|||
total: data.total || 0 |
|||
} |
|||
} catch (error) { |
|||
console.error('查询列表失败:', error) |
|||
throw error |
|||
} |
|||
} |
|||
}, |
|||
response: { |
|||
result: 'items', |
|||
total: 'total' |
|||
} |
|||
}, |
|||
pagerConfig: { |
|||
enabled: true, |
|||
pageSize: 10, |
|||
}, |
|||
showOverflow: true, |
|||
minHeight: '100%', |
|||
maxHeight: 'auto', |
|||
showHeaderOverflow: true, |
|||
} |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({gridOptions}) |
|||
// ========== 过滤后的编辑表单 Schema ========== |
|||
const editFormSchema = formSchema.filter(item => !editFields.includes(item.fieldName)); |
|||
// ========== 弹窗配置 ========== |
|||
const [Modal, modalApi] = useVbenModal({ |
|||
centered: true, |
|||
closable: true, |
|||
maskClosable: false, |
|||
draggable: true, |
|||
width: 800, |
|||
onCancel() { |
|||
modalApi.close(); |
|||
}, |
|||
onConfirm: async () => { |
|||
let loadingMessage: any = null; |
|||
try { |
|||
const values = await formApi.validateAndSubmitForm(); |
|||
if (!values) return; |
|||
|
|||
// 合并上传的 URL 到提交数据中（只在新增模式下） |
|||
const submitValues = !isEdit.value |
|||
? {...values, ...formUploadUrls.value} |
|||
: values; |
|||
|
|||
// 处理日期格式，将 Day.js 对象转换为字符串 |
|||
const finalSubmitValues = { |
|||
...submitValues, |
|||
userBirthday: submitValues.userBirthday ? dayjs(submitValues.userBirthday).format('YYYY-MM-DD') : null, |
|||
}; |
|||
// 显示 loading 提示 |
|||
loadingMessage = message.loading(isEdit.value ? '保存中...' : '新增中...', 0); |
|||
|
|||
if (isEdit.value && currentRow.value?.id) { |
|||
await funApi.save({...finalSubmitValues, id: currentRow.value.id}); |
|||
Object.assign(currentRow.value, finalSubmitValues); |
|||
modalApi.close(); |
|||
gridApi.reloadRow(currentRow.value); |
|||
loadingMessage(); |
|||
isEdit.value = false; |
|||
message.success('保存成功！'); |
|||
} else { |
|||
await funApi.add(finalSubmitValues); |
|||
// 新增才 reload（必须） |
|||
modalApi.close(); |
|||
gridApi.reload(); |
|||
formUploadUrls.value = {}; |
|||
loadingMessage(); |
|||
message.success('新增成功！'); |
|||
} |
|||
} catch (error) { |
|||
console.error('保存失败:', error); |
|||
if (loadingMessage) { |
|||
loadingMessage(); |
|||
} |
|||
} |
|||
}, |
|||
onOpenChange(isOpen: boolean) { |
|||
if (!isOpen && !isEdit.value) { |
|||
formApi.resetForm(); |
|||
formUploadUrls.value = {}; |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
|
|||
// ========== 上传弹窗配置 ========== |
|||
const uploadFileList = ref<any[]>([]); |
|||
const [UploadModal, uploadModalApi] = useVbenModal({ |
|||
centered: true, |
|||
closable: true, |
|||
maskClosable: false, |
|||
draggable: true, |
|||
width: 600, |
|||
title: '上传图片', |
|||
onCancel() { |
|||
uploadModalApi.close(); |
|||
uploadFileList.value = []; |
|||
uploadedUrl.value = ''; |
|||
}, |
|||
onConfirm: async () => { |
|||
let loadingMessage: any = null; |
|||
console.log('=== 点击确认保存 ===', { |
|||
uploadedUrl: uploadedUrl.value, |
|||
isEdit: isEdit.value, |
|||
currentRowId: currentRow.value?.id, |
|||
uploadFieldName: uploadFieldName.value, |
|||
currentRowData: currentRow.value, |
|||
}); |
|||
|
|||
// 如果有上传成功的 URL，更新到当前行并保存 |
|||
if (uploadedUrl.value) { |
|||
try { |
|||
// 更新当前行的图片 URL |
|||
if (currentRow.value) { |
|||
currentRow.value[uploadFieldName.value] = uploadedUrl.value; |
|||
console.log('✅ 已更新当前行图片字段:', { |
|||
fieldName: uploadFieldName.value, |
|||
newUrl: uploadedUrl.value, |
|||
updatedRow: currentRow.value, |
|||
}); |
|||
} |
|||
|
|||
// 调用 save 接口保存修改（只在编辑模式下） |
|||
if (isEdit.value && currentRow.value?.id) { |
|||
const submitData = { |
|||
...currentRow.value, |
|||
id: currentRow.value.id |
|||
}; |
|||
console.log('📤 提交保存数据:', submitData); |
|||
// 显示 loading 提示 |
|||
loadingMessage = message.loading('保存图片中...', 0); |
|||
await funApi.save(submitData); |
|||
message.success('保存成功！'); |
|||
|
|||
// 关闭弹窗并刷新表格 |
|||
uploadModalApi.close(); |
|||
// gridApi.reload(); |
|||
loadingMessage() |
|||
// 重置状态 |
|||
uploadFileList.value = []; |
|||
uploadedUrl.value = ''; |
|||
} else { |
|||
console.warn('⚠️ 不满足保存条件:', { |
|||
isEdit: isEdit.value, |
|||
hasId: !!currentRow.value?.id, |
|||
}); |
|||
message.warning('非编辑模式或无 ID，仅更新预览'); |
|||
|
|||
// 只更新预览，不保存 |
|||
uploadModalApi.close(); |
|||
// gridApi.reload(); |
|||
} |
|||
|
|||
} catch (error: any) { |
|||
console.error('❌ 保存失败:', error); |
|||
if (loadingMessage) { |
|||
loadingMessage(); |
|||
} |
|||
message.error(error?.message || '保存失败'); |
|||
} |
|||
} else { |
|||
message.warning('请先选择并上传图片'); |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
// ========== 动态计算编辑表单 Schema ========== |
|||
// 新增时：过滤掉 id 字段，并为图片字段添加上传按钮 |
|||
// 编辑时：包含 id 字段 |
|||
const getEditFormSchema = () => { |
|||
return formSchema.filter(item => { |
|||
// 不在 editFields 中的才显示 |
|||
if (!editFields.includes(item.fieldName)) { |
|||
// 新增时排除 id 字段 |
|||
if (!isEdit.value && item.fieldName === 'id') { |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
return false; |
|||
}).map(item => { |
|||
// 只在新增模式下，且是图片字段，添加上传组件 |
|||
if (!isEdit.value && isImageField(item.fieldName)) { |
|||
// 优先使用 formUploadUrls 中存储的 URL，其次使用表单值 |
|||
const currentImageUrl = formUploadUrls.value[item.fieldName] || ''; |
|||
return { |
|||
...item, |
|||
component: 'Upload', |
|||
componentProps: { |
|||
class: 'w-full', |
|||
accept: 'image/*', |
|||
maxCount: 1, |
|||
listType: 'picture-card', |
|||
fileList: currentImageUrl && typeof currentImageUrl === 'string' ? [{ |
|||
uid: '-1', |
|||
name: 'image.png', |
|||
status: 'done', |
|||
url: currentImageUrl, |
|||
}] : (Array.isArray(currentImageUrl) ? currentImageUrl : []), |
|||
beforeUpload: async (file: any) => { |
|||
console.log('📦 新增表单内上传文件:', file); |
|||
|
|||
try { |
|||
const resultUrl = await uploadFile(file); |
|||
console.log(item.fieldName + ' 新增表单内上传成功，URL:', resultUrl); |
|||
message.success('上传成功！'); |
|||
|
|||
// 保存上传返回的 URL 到专用存储 |
|||
formUploadUrls.value[item.fieldName] = resultUrl; |
|||
|
|||
// 上传成功后，重新生成 schema 以更新 fileList 显示 |
|||
setTimeout(() => { |
|||
formApi.setState({ |
|||
schema: getEditFormSchema(), |
|||
}); |
|||
}, 0); |
|||
|
|||
// Deleted:formApi.resetForm(); |
|||
// 返回 false 阻止默认上传行为 |
|||
return false; |
|||
} catch (error: any) { |
|||
console.error('❌ 新增表单内上传失败:', error); |
|||
message.error(error?.message || '上传失败'); |
|||
return false; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
} |
|||
return item; |
|||
}); |
|||
}; |
|||
// ========== 表单配置 ========== |
|||
const [Form, formApi] = useVbenForm({ |
|||
schema: editFormSchema, |
|||
showDefaultActions: false, |
|||
wrapperClass: 'grid-cols-1 md:grid-cols-2', |
|||
commonConfig: { |
|||
componentProps: { |
|||
class: 'w-full', |
|||
autocomplete: 'off', |
|||
}, |
|||
}, |
|||
}) |
|||
|
|||
// ========== 上传文件 ========== |
|||
|
|||
async function uploadFile(file: File) { |
|||
let loadingMessage: any = null; |
|||
// 显示 loading 提示 |
|||
loadingMessage = message.loading('图片上传中...', 0); |
|||
const formData = new FormData(); |
|||
formData.append('file', file); |
|||
const res = await funApi.upload(formData); |
|||
loadingMessage(); |
|||
return res.result || res.message || res.url || res; |
|||
} |
|||
|
|||
// ========== 打开上传对话框 ========== |
|||
function openUploadDialog(fieldName: string, currentUrl: string) { |
|||
console.log('=== 打开上传对话框 ===', { |
|||
fieldName, |
|||
currentUrl, |
|||
isEdit: isEdit.value, |
|||
currentRowId: currentRow.value?.id, |
|||
currentRowFull: currentRow.value, |
|||
}); |
|||
|
|||
uploadFieldName.value = fieldName; |
|||
uploadImageUrl.value = currentUrl || ''; |
|||
uploadedUrl.value = ''; // 重置上传后的 URL |
|||
uploadFileList.value = []; // 清空文件列表 |
|||
uploadModalApi.open(); |
|||
} |
|||
|
|||
// ========== 处理图片上传 - 使用 custom-request ========== |
|||
async function handleCustomRequest(options: any) { |
|||
const {file, onSuccess, onError} = options; |
|||
|
|||
try { |
|||
console.log('📦 开始上传文件:', file); |
|||
console.log('📦 文件详情:', { |
|||
name: file.name, |
|||
type: file.type, |
|||
size: file.size, |
|||
lastModified: file.lastModified, |
|||
}); |
|||
const resultUrl = await uploadFile(file); |
|||
console.log('✅ 上传成功，URL:', resultUrl); |
|||
message.success('上传成功！'); |
|||
// 保存上传返回的 URL |
|||
uploadedUrl.value = resultUrl; |
|||
console.log('=== uploadedUrl 赋值后 ===', uploadedUrl.value); |
|||
|
|||
// 添加到文件列表用于显示 |
|||
uploadFileList.value = [{ |
|||
uid: file.uid, |
|||
name: file.name, |
|||
status: 'done', |
|||
url: resultUrl, |
|||
}]; |
|||
|
|||
// 通知组件上传成功 |
|||
onSuccess({url: resultUrl}); |
|||
|
|||
} catch (error: any) { |
|||
console.error('❌ 上传失败:', error); |
|||
message.error(error?.message || '上传失败'); |
|||
onError(error); |
|||
} |
|||
} |
|||
|
|||
// ========== 打开新增弹窗 ========== |
|||
function handleAdd() { |
|||
isEdit.value = false; |
|||
modalTitle.value = '功能配置表新增'; |
|||
// 重置上传 URL 记录 |
|||
formUploadUrls.value = {}; |
|||
// 更新表单 schema (不包含 id) |
|||
formApi.setState({ |
|||
schema: getEditFormSchema(), |
|||
}); |
|||
formApi.resetForm(); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
// ========== 打开编辑弹窗 ========== |
|||
function handleEdit(row: any) { |
|||
isEdit.value = true; |
|||
currentRow.value = row; |
|||
modalTitle.value = '功能配置表编辑'; |
|||
// 更新表单 schema (包含 id) |
|||
formApi.setState({ |
|||
schema: getEditFormSchema(), |
|||
}); |
|||
// 设置表单值，只设置 editFields 中包含的字段 |
|||
const formValues: any = {}; |
|||
editFormSchema.forEach(item => { |
|||
const field = item.fieldName; |
|||
if (row[field] !== undefined && row[field] !== null) { |
|||
formValues[field] = row[field]; |
|||
} |
|||
}); |
|||
|
|||
formApi.setValues(formValues); |
|||
modalApi.open(); |
|||
} |
|||
|
|||
// ========== 删除确认 ========== |
|||
function handleDelete(row: any) { |
|||
if (!row.id) return; |
|||
window.confirm(`确定要删除 "${row.userName}" 吗？`) && |
|||
funApi.remove(row.id).then(() => { |
|||
gridApi.reload(); |
|||
}); |
|||
} |
|||
|
|||
// ========== 查询功能 ========== |
|||
function handleSearch() { |
|||
console.log('=== 点击查询按钮 ===') |
|||
// 先重置到第一页，然后执行查询 |
|||
gridApi.query(); |
|||
} |
|||
|
|||
// ========== 重置查询 ========== |
|||
function handleReset() { |
|||
queryFormApi.resetForm(); |
|||
gridApi.reload(); |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<template> |
|||
<div |
|||
style="height: 100vh; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column;"> |
|||
<!-- 查询表单 --> |
|||
<div class="bg-card mb-4 p-4 rounded shadow flex-shrink-0"> |
|||
<h3 class="text-lg font-semibold mb-3">查询条件</h3> |
|||
<div v-if="enumData.loading" class="text-center py-4 text-gray-500"> |
|||
正在加载查询条件... |
|||
</div> |
|||
<QueryForm v-else/> |
|||
<div class="mt-3 flex gap-2"> |
|||
<button @click="handleSearch" |
|||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"> |
|||
🔍 查询 |
|||
</button> |
|||
<button @click="handleReset" |
|||
class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"> |
|||
🔄 重置 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 数据表格 (可滚动区域) --> |
|||
<div class="flex-1 overflow-hidden bg-card rounded shadow"> |
|||
<Grid> |
|||
<template #toolbar-tools> |
|||
<button @click="handleAdd" class="mr-2">➕ 新增</button> |
|||
<button @click="() => gridApi.reload()">🔄 刷新</button> |
|||
</template> |
|||
|
|||
<template #action="{ row }"> |
|||
<div class="flex gap-2"> |
|||
<button @click="() => handleEdit(row)" class="text-blue-500 hover:text-blue-700">✏️ 编辑 |
|||
</button> |
|||
<button @click="() => handleDelete(row)" class="text-red-500 hover:text-red-700">🗑️ 删除 |
|||
</button> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
</div> |
|||
|
|||
<Modal :title="modalTitle"> |
|||
<Form/> |
|||
</Modal> |
|||
<!-- 上传对话框 --> |
|||
<UploadModal> |
|||
<div style="padding: 20px;margin-top: 16px; text-align: center;"> |
|||
<Upload |
|||
name="file" |
|||
:file-list="uploadFileList" |
|||
:custom-request="handleCustomRequest" |
|||
:show-upload-list="true" |
|||
accept="image/*" style="width: 100%;" |
|||
> |
|||
<div |
|||
style="width: 100%; height: 150px; border: 2px dashed #d9d9d9; border-radius: 8px; background: #fafafa; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;"> |
|||
<!-- 使用 SVG 图标代替 --> |
|||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1890ff" |
|||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
|||
style="margin-bottom: 8px;"> |
|||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> |
|||
<polyline points="17 8 12 3 7 8"></polyline> |
|||
<line x1="12" y1="3" x2="12" y2="15"></line> |
|||
</svg> |
|||
<span style="color: #666;">点击或拖拽图片到此上传</span> |
|||
<span style="color: #999; font-size: 12px; margin-top: 4px;">支持 JPG、PNG 格式</span> |
|||
</div> |
|||
</Upload> |
|||
|
|||
<!-- 展示上传成功后的图片 --> |
|||
<div v-if="uploadedUrl" style="margin-top: 16px; text-align: center;"> |
|||
<p style="color: #67c23a; font-size: 14px; margin-bottom: 8px;">✅ 上传成功！</p> |
|||
<p style="color: #999; font-size: 12px; margin-bottom: 8px;">新图片预览:</p> |
|||
<Image |
|||
:src="uploadedUrl" |
|||
style="max-width: 200px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" |
|||
:preview="true" |
|||
/> |
|||
<p style="color: #999; font-size: 12px; margin-top: 8px; word-break: break-all;"></p> |
|||
</div> |
|||
|
|||
<!-- 展示原图（如果有） --> |
|||
<div v-if="uploadImageUrl && !uploadedUrl" style="margin-top: 16px; text-align: center;"> |
|||
<p style="color: #999; font-size: 12px; margin-bottom: 8px;">当前图片:</p> |
|||
<Image |
|||
:src="getFullUrl(uploadImageUrl)" |
|||
style="max-width: 200px; border-radius: 4px;" |
|||
:preview="true" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</UploadModal> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
:deep(.vxe-pager--wrapper) { |
|||
margin-bottom: 0.5rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue