签入版本
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
/**
|
||||
* @description: {{ module_comment }}分页列表
|
||||
*/
|
||||
export function get{{ model_class_name }}Page(params?) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/page',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取全部{{ module_comment }}列表
|
||||
* @param params 参数
|
||||
* @returns 返回结果
|
||||
*/
|
||||
export function get{{ model_class_name }}List(params?) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/list',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 根据ID获取{{ module_comment }}详情
|
||||
* @param {{ primary_key }} {{ module_comment }}ID
|
||||
*/
|
||||
export function get{{ model_class_name }}Detail({{ primary_key }}) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/detail/' + {{ primary_key }},
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 添加{{ module_comment }}
|
||||
* @param data {{ module_comment }}数据
|
||||
*/
|
||||
export function {{ model_class_name_camel }}Add(data: any) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/add',
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 更新{{ module_comment }}
|
||||
* @param data {{ module_comment }}数据
|
||||
*/
|
||||
export function {{ model_class_name_camel }}Update(data: any) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/update',
|
||||
method: 'PUT',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 删除{{ module_comment }}
|
||||
* @param {{ primary_key }} {{ module_comment }}ID
|
||||
*/
|
||||
export function {{ model_class_name_camel }}Delete({{ primary_key }}) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/delete/' + {{ primary_key }},
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 批量删除{{ module_comment }}
|
||||
* @param data {{ module_comment }}ID数组
|
||||
*/
|
||||
export function {{ model_class_name_camel }}BatchDelete(data: any) {
|
||||
return http.request({
|
||||
url: '/{{ route_prefix }}/batchDelete',
|
||||
method: 'DELETE',
|
||||
data,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag, NAvatar, NImage } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 表格列配置
|
||||
* 定义表格显示的列
|
||||
*/
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection', // 多选框列
|
||||
width: 50,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{% for field in list_fields %}
|
||||
{
|
||||
title: '{{ field.label }}',
|
||||
key: '{{ field.camel_name }}',
|
||||
width: {% if field.type == 'CharField' %}150{% elif field.type == 'IntegerField' %}100{% elif field.type == 'DateTimeField' %}180{% else %}120{% endif %},
|
||||
{% if field.is_image %}
|
||||
// 图片渲染
|
||||
render(record) {
|
||||
return record.{{ field.camel_name }}
|
||||
? h(NAvatar, {
|
||||
src: record.{{ field.camel_name }},
|
||||
size: 48,
|
||||
shape: 'square',
|
||||
fit: 'cover',
|
||||
style: {
|
||||
borderRadius: '4px',
|
||||
},
|
||||
})
|
||||
: h('span', '-');
|
||||
},
|
||||
{% elif field.choices %}
|
||||
// 选项标签渲染
|
||||
render(record) {
|
||||
const statusMap = {
|
||||
{% for choice in field.choices %}
|
||||
{{ choice.value }}: { text: '{{ choice.label }}', type: {% if choice.value == 1 %}'success'{% elif choice.value == 2 %}'error'{% elif choice.value == 3 %}'warning'{% else %}'info'{% endif %} },
|
||||
{% endfor %}
|
||||
};
|
||||
const status = statusMap[record.{{ field.camel_name }}];
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
bordered: false,
|
||||
type: status?.type || 'info',
|
||||
},
|
||||
{
|
||||
default: () => status?.text || record.{{ field.camel_name }},
|
||||
},
|
||||
);
|
||||
},
|
||||
{% elif field.camel_name == 'status' %}
|
||||
// 状态标签渲染
|
||||
render(record) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
bordered: false,
|
||||
type: record.status == 1 ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (record.status == 1 ? '正常' : '停用'),
|
||||
},
|
||||
);
|
||||
},
|
||||
{% elif field.type == 'CharField' and field.camel_name|lower in ['website', 'site', 'url', 'link'] %}
|
||||
// 链接渲染
|
||||
render(record) {
|
||||
const url = record.{{ field.camel_name }};
|
||||
return h(
|
||||
'a',
|
||||
{
|
||||
href: url,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
},
|
||||
{
|
||||
default: () => url || '点击查看',
|
||||
},
|
||||
);
|
||||
},
|
||||
{% else %}
|
||||
// 普通文本渲染（无需额外配置）
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
{% endif %}
|
||||
},
|
||||
{% endfor %}
|
||||
{
|
||||
title: '创建人',
|
||||
key: 'createUser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
>
|
||||
<template #default>
|
||||
<n-descriptions
|
||||
class="margin-top"
|
||||
:column="2"
|
||||
bordered
|
||||
:label-style="{ width: '120px' }"
|
||||
label-placement="left"
|
||||
>
|
||||
{% for field in form_fields %}
|
||||
<n-descriptions-item label="{{ field.label }}:">
|
||||
{% if field.is_image %}
|
||||
<n-image
|
||||
v-if="formData.{{ field.camel_name }}"
|
||||
:src="formData.{{ field.camel_name }}"
|
||||
width="80"
|
||||
height="80"
|
||||
fit="cover"
|
||||
:preview-disabled="false"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
{% elif field.is_rich_text %}
|
||||
<div class="rich-text-content" v-html="formData.{{ field.camel_name }}"></div>
|
||||
{% elif field.type == 'BooleanField' %}
|
||||
<n-tag :type="formData.{{ field.camel_name }} ? 'success' : 'error'" :bordered="false">
|
||||
{{ '{{ formData.' + field.camel_name + ' ? "是" : "否" }}' }}
|
||||
</n-tag>
|
||||
{% elif field.type == 'IntegerField' and field.choices %}
|
||||
<span>{{ '{{ getChoiceLabel(\'' + field.camel_name + '\', formData.' + field.camel_name + ') }}' }}</span>
|
||||
{% else %}
|
||||
<span>{{ '{{ formData.' + field.camel_name + ' || \'-\' }}' }}</span>
|
||||
{% endif %}
|
||||
</n-descriptions-item>
|
||||
{% endfor %}
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="dialogClose">关闭</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { get{{ model_class_name }}Detail } from '@/api/{{ api_path }}';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
{% if has_image_field %}
|
||||
import { NImage } from 'naive-ui';
|
||||
{% endif %}
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['update:visible']);
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
{% for field in form_fields %}
|
||||
{{ field.camel_name }}: {% if field.type == 'CharField' %}''{% elif field.type == 'IntegerField' %}0{% elif field.type == 'BooleanField' %}false{% elif field.type == 'FloatField' %}0{% else %}''{% endif %},
|
||||
{% endfor %}
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
{{ primary_key }}: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义模态框
|
||||
*/
|
||||
const [modalRegister, { openModal, closeModal }] = useModal({
|
||||
title: '{{ module_comment }}详情',
|
||||
width: 750,
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取选项字段的标签
|
||||
*/
|
||||
const getChoiceLabel = (fieldName: string, value: any) => {
|
||||
const choiceMap: Record<string, Record<string, string>> = {
|
||||
{% for field in form_fields %}
|
||||
{% if field.type == 'IntegerField' and field.choices %}
|
||||
{{ field.camel_name }}: {
|
||||
{% for choice in field.choices %}
|
||||
{{ choice.value }}: '{{ choice.label }}',
|
||||
{% endfor %}
|
||||
},
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
};
|
||||
return choiceMap[fieldName]?.[value] || value || '-';
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const dialogClose = () => {
|
||||
closeModal();
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
try {
|
||||
const data = await get{{ model_class_name }}Detail(props.{{ primary_key }});
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取{{ module_comment }}详情失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置表单数据
|
||||
*/
|
||||
const resetFormData = () => {
|
||||
for (const key in formData) {
|
||||
//@ts-ignore
|
||||
if (typeof formData[key] === 'string') {
|
||||
//@ts-ignore
|
||||
formData[key] = '';
|
||||
} else if (typeof formData[key] === 'number') {
|
||||
//@ts-ignore
|
||||
formData[key] = 0;
|
||||
} else if (typeof formData[key] === 'boolean') {
|
||||
//@ts-ignore
|
||||
formData[key] = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听visible变化，重新加载数据
|
||||
*/
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal && props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
openModal();
|
||||
} else if (newVal && !props.{{ primary_key }}) {
|
||||
resetFormData();
|
||||
openModal();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.visible) {
|
||||
if (props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
} else {
|
||||
resetFormData();
|
||||
}
|
||||
openModal();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 暴露openModal方法
|
||||
*/
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rich-text-content {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f9fa;
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-descriptions-table) {
|
||||
.n-descriptions-table-body {
|
||||
.n-descriptions-table-row {
|
||||
.n-descriptions-table-body-cell {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="dialogClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-placement="left"
|
||||
label-width="80px"
|
||||
>
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_image %}
|
||||
<!-- {{ field.comment }}（图片上传） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请上传{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<UploadImg
|
||||
@change-file-name="(name) => (formData.{{ field.camel_name }}ImgName = name)"
|
||||
:fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp']"
|
||||
name="{{ app_name }}"
|
||||
:fileSize="20"
|
||||
v-model:image-url="formData.{{ field.camel_name }}"
|
||||
>
|
||||
<template #tip>支持扩展名: jpg png jpeg gif webp; 文件大小不超过20M</template>
|
||||
</UploadImg>
|
||||
</n-form-item>
|
||||
{% elif field.is_rich_text %}
|
||||
<!-- {{ field.comment }}（富文本编辑器） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="flex w-full">
|
||||
<Editor
|
||||
ref="{{ field.camel_name }}EditorRef"
|
||||
:height="editorHeight"
|
||||
class="flex-1"
|
||||
name="{{ app_name }}"
|
||||
/>
|
||||
</div>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'CharField' and ('备注' in field.comment or '介绍' in field.comment or '描述' in field.comment or '说明' in field.comment) %}
|
||||
<!-- {{ field.comment }}（多行文本） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
placeholder="请输入{{ field.comment }}"
|
||||
:rows="3"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'CharField' %}
|
||||
<!-- {{ field.comment }} -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-input
|
||||
class="ls-input"
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
placeholder="请输入{{ field.comment }}"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'IntegerField' and field.choices %}
|
||||
<!-- {{ field.comment }}（{% if field.choices|length <= 2 %}单选{% else %}下拉选择{% endif %}） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ type: 'number', required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
{% if field.choices|length <= 2 %}
|
||||
<n-radio-group v-model:value="formData.{{ field.camel_name }}">
|
||||
{% for choice in field.choices %}
|
||||
<n-radio :value="{{ choice.value }}">{{ choice.label }}</n-radio>
|
||||
{% endfor %}
|
||||
</n-radio-group>
|
||||
{% else %}
|
||||
<n-select
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
clearable
|
||||
filterable
|
||||
:options="optionsData.{{ field.camel_name }}List"
|
||||
/>
|
||||
{% endif %}
|
||||
</n-form-item>
|
||||
{% elif field.type == 'IntegerField' and not field.choices %}
|
||||
<!-- {{ field.comment }}（数字输入） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ type: 'number', required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-input-number
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
:min="{{ field.min_value or 0 }}"
|
||||
:max="{{ field.max_value or 99999 }}"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'BooleanField' %}
|
||||
<!-- {{ field.comment }}（开关） -->
|
||||
<n-form-item label="{{ field.label }}" path="{{ field.camel_name }}">
|
||||
<n-switch
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
:checked-value="1"
|
||||
:unchecked-value="0"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'DateField' %}
|
||||
<!-- {{ field.comment }}（日期选择） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-date-picker
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
type="date"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
format="yyyy-MM-dd"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'DateTimeField' %}
|
||||
<!-- {{ field.comment }}（日期时间选择） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-date-picker
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
type="datetime"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'TextField' %}
|
||||
<!-- {{ field.comment }}（文本域） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
placeholder="请输入{{ field.comment }}"
|
||||
:rows="3"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% elif field.type == 'FloatField' or field.type == 'DecimalField' %}
|
||||
<!-- {{ field.comment }}（数字输入） -->
|
||||
<n-form-item
|
||||
label="{{ field.label }}"
|
||||
path="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rule="{ type: 'number', required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<n-input-number
|
||||
v-model:value="formData.{{ field.camel_name }}"
|
||||
:min="{{ field.min_value or 0 }}"
|
||||
:max="{{ field.max_value or 999999 }}"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
</n-form-item>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { get{{ model_class_name }}Detail, {{ model_class_name_camel }}Add, {{ model_class_name_camel }}Update } from '@/api/{{ api_path }}';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { useModal } from '@/components/Modal';
|
||||
{% if has_image_field %}
|
||||
import UploadImg from '@/components/Upload/Image.vue';
|
||||
{% endif %}
|
||||
{% if has_rich_text_field %}
|
||||
import Editor from '@/components/Editor/tinymce.vue';
|
||||
{% endif %}
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
|
||||
// 消息提示
|
||||
const message = useMessage();
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref();
|
||||
|
||||
{% if has_rich_text_field %}
|
||||
// 富文本编辑器高度
|
||||
const editorHeight = document.body.clientHeight - 400;
|
||||
|
||||
// 富文本编辑器引用
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_rich_text %}
|
||||
const {{ field.camel_name }}EditorRef = ref();
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
/**
|
||||
* 定义选项数据
|
||||
*/
|
||||
const optionsData = reactive({
|
||||
{% for field in form_fields %}
|
||||
{% if field.type == 'IntegerField' and field.choices and field.choices|length > 2 %}
|
||||
{{ field.camel_name }}List: [
|
||||
{% for choice in field.choices %}
|
||||
{
|
||||
label: '{{ choice.label }}',
|
||||
value: {% if choice.value_type == 'string' %}'{{ choice.value }}'{% else %}{{ choice.value }}{% endif %},
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义表单数据
|
||||
* 初始化默认值
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '', // ID字段，新增时为0
|
||||
{% for field in form_fields %}
|
||||
{{ field.camel_name }}: {% if field.type == 'CharField' %}''{% elif field.type == 'IntegerField' %}{{ field.default or 0 }}{% elif field.type == 'BooleanField' %}{{ field.default or 0 }}{% elif field.type == 'FloatField' %}{{ field.default or 0 }}{% else %}''{% endif %},
|
||||
{% endfor %}
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_image %}
|
||||
{{ field.camel_name }}ImgName: '', // {{ field.comment }}文件名
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
{{ primary_key }}: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义模态框
|
||||
*/
|
||||
const [modalRegister, { openModal, setSubLoading, closeModal }] = useModal({
|
||||
title: props.{{ primary_key }} ? '编辑{{ module_comment }}' : '新增{{ module_comment }}',
|
||||
subBtuText: '确定',
|
||||
width: {% if has_rich_text_field %}850{% else %}500{% endif %},
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
* 根据是否有ID判断是新增还是编辑
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
// 获取富文本编辑器内容
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_rich_text %}
|
||||
if ({{ field.camel_name }}EditorRef.value) {
|
||||
formData.{{ field.camel_name }} = {{ field.camel_name }}EditorRef.value.myValue;
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
try {
|
||||
props.{{ primary_key }}
|
||||
? await {{ model_class_name_camel }}Update(formData)
|
||||
: await {{ model_class_name_camel }}Add(formData);
|
||||
message.success('操作成功');
|
||||
setSubLoading(false);
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
setSubLoading(false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const dialogClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
* 编辑时获取详情并填充表单
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
try {
|
||||
const data = await get{{ model_class_name }}Detail(props.{{ primary_key }});
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
// @ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
// 设置富文本编辑器内容
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_rich_text %}
|
||||
if ({{ field.camel_name }}EditorRef.value && formData.{{ field.camel_name }}) {
|
||||
{{ field.camel_name }}EditorRef.value.myValue = formData.{{ field.camel_name }};
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
} catch (error) {
|
||||
console.error('获取{{ module_comment }}详情失败', error);
|
||||
message.error('获取数据失败');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.restoreValidation();
|
||||
}
|
||||
// 重置表单数据
|
||||
for (const key in formData) {
|
||||
if (key === 'id') continue;
|
||||
// @ts-ignore
|
||||
if (typeof formData[key] === 'string') {
|
||||
// @ts-ignore
|
||||
formData[key] = '';
|
||||
} else if (typeof formData[key] === 'number') {
|
||||
// @ts-ignore
|
||||
formData[key] = 0;
|
||||
}
|
||||
}
|
||||
// 清空富文本编辑器内容
|
||||
{% for field in form_fields %}
|
||||
{% if field.is_rich_text %}
|
||||
if ({{ field.camel_name }}EditorRef.value) {
|
||||
{{ field.camel_name }}EditorRef.value.myValue = '';
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听visible变化，重新加载数据
|
||||
*/
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal && props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
openModal();
|
||||
} else if (newVal && !props.{{ primary_key }}) {
|
||||
resetForm();
|
||||
openModal();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.visible) {
|
||||
if (props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
openModal();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 暴露openModal方法
|
||||
*/
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索表单卡片 -->
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
|
||||
</n-card>
|
||||
|
||||
<!-- 数据表格卡片 -->
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="basicTableRef"
|
||||
:actionColumn="actionColumn"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
:auto-scroll-x="true"
|
||||
>
|
||||
<!-- 表格顶部工具栏 -->
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<!-- 新增按钮 -->
|
||||
<n-button type="primary" @click="handleAdd" v-perm="['{{ permission_prefix }}:add']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
添加{{ module_comment }}
|
||||
</n-button>
|
||||
|
||||
<!-- 批量删除按钮 -->
|
||||
<n-button
|
||||
type="error"
|
||||
@click="handleDelete()"
|
||||
:disabled="!rowKeys.length"
|
||||
v-perm="['{{ permission_prefix }}:batchDelete']"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
批量删除
|
||||
</n-button>
|
||||
{% if has_export %}
|
||||
<!-- 导出按钮 -->
|
||||
<n-button
|
||||
type="success"
|
||||
@click="handleExport"
|
||||
v-perm="['{{ permission_prefix }}:export']"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DownloadOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
导出
|
||||
</n-button>
|
||||
{% endif %}
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
|
||||
<!-- 编辑对话框组件 -->
|
||||
<editDialog
|
||||
ref="editModalRef"
|
||||
v-if="editVisible"
|
||||
:{{ primary_key }}="currentId"
|
||||
v-model:visible="editVisible"
|
||||
@success="reloadTable('noRefresh')"
|
||||
/>
|
||||
<!-- 查看详情对话框组件 -->
|
||||
<detailDialog
|
||||
ref="detailModalRef"
|
||||
v-if="detailVisible"
|
||||
:{{ primary_key }}="currentId"
|
||||
v-model:visible="detailVisible"
|
||||
@success="reloadTable('noRefresh')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { PlusOutlined, DeleteOutlined, EditOutlined, EyeOutlined } from '@vicons/antd';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { get{{ model_class_name }}Page, {{ model_class_name_camel }}Delete, {{ model_class_name_camel }}BatchDelete } from '@/api/{{ api_path }}';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
import { columns } from './columns';
|
||||
import { schemas } from './querySchemas';
|
||||
|
||||
// 动态导入编辑对话框组件
|
||||
import editDialog from './edit.vue';
|
||||
// 动态导入详情对话框组件
|
||||
import detailDialog from './detail.vue';
|
||||
|
||||
// 消息提示和对话框
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
|
||||
// 表格引用
|
||||
const basicTableRef = ref();
|
||||
const editModalRef = ref();
|
||||
const detailModalRef = ref();
|
||||
|
||||
// 响应式状态定义
|
||||
const currentId = ref(0); // 当前操作的ID
|
||||
const editVisible = ref(false); // 编辑对话框显示状态
|
||||
const detailVisible = ref(false); // 详情对话框显示状态
|
||||
const rowKeys = ref([]); // 表格选中行Key
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
* 用于存储搜索表单的值
|
||||
*/
|
||||
const formParams = reactive({
|
||||
{% for field in filter_fields %}
|
||||
{{ field.name }}: '',
|
||||
{% endfor %}
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义操作栏配置
|
||||
* 包含编辑、详情和删除按钮
|
||||
*/
|
||||
const actionColumn = reactive({
|
||||
width: 280,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
icon: renderIcon(EditOutlined),
|
||||
type: 'info',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
auth: ['{{ permission_prefix }}:update'],
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'default',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['{{ permission_prefix }}:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['{{ permission_prefix }}:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 加载数据列表
|
||||
* @param params 分页参数
|
||||
* @returns 表格数据
|
||||
*/
|
||||
const loadDataTable = async (params: any) => {
|
||||
// 清空选中行
|
||||
rowKeys.value = [];
|
||||
const result = await get{{ model_class_name }}Page({ ...formParams, ...params });
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新表格数据
|
||||
* @param noRefresh 是否重置页码
|
||||
*/
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册搜索表单
|
||||
* 配置表单布局和字段
|
||||
*/
|
||||
const [register, {}] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 提交搜索表单
|
||||
* @param values 表单值
|
||||
*/
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置搜索表单
|
||||
*/
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格选择项变化时的回调
|
||||
* @param keys 选中的key数组
|
||||
*/
|
||||
function onCheckedRow(keys: (string | number)[]) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理新增按钮点击
|
||||
*/
|
||||
const handleAdd = async () => {
|
||||
currentId.value = 0;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
editModalRef.value?.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理编辑按钮点击
|
||||
* @param record 当前行数据
|
||||
*/
|
||||
const handleEdit = async (record: Recordable) => {
|
||||
currentId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
editModalRef.value?.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理详情按钮点击
|
||||
* @param record 当前行数据
|
||||
*/
|
||||
const handleDetail = async (record: Recordable) => {
|
||||
currentId.value = record.id;
|
||||
detailVisible.value = true;
|
||||
await nextTick();
|
||||
detailModalRef.value?.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理删除操作
|
||||
* @param record 当前行数据（可选，不传时表示批量删除）
|
||||
*/
|
||||
async function handleDelete(record?: Recordable) {
|
||||
let ids = [];
|
||||
if (!record) {
|
||||
// 批量删除：获取选中行的ID
|
||||
ids = rowKeys.value;
|
||||
if (!ids.length) {
|
||||
message.warning('请选择要删除的数据');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的{{ module_comment }}吗？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
record
|
||||
? await {{ model_class_name_camel }}Delete(record.id)
|
||||
: await {{ model_class_name_camel }}BatchDelete(ids);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
{% if has_export %}
|
||||
/**
|
||||
* 处理导出操作
|
||||
*/
|
||||
async function handleExport() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要导出{{ module_comment }}数据吗？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
// TODO: 调用导出API
|
||||
message.success('导出成功');
|
||||
} catch (error) {
|
||||
message.error('导出失败');
|
||||
console.error('导出失败', error);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,30 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
|
||||
/**
|
||||
* 查询表单配置
|
||||
* 定义搜索区域的表单项
|
||||
*/
|
||||
export const schemas: FormSchema[] = [
|
||||
{% for field in filter_fields %}
|
||||
{
|
||||
field: '{{ field.name }}',
|
||||
component: '{% if field.type == 'CharField' %}NInput{% elif field.choices %}NSelect{% elif field.type == 'IntegerField' and not field.choices %}NInputNumber{% elif field.type == 'DateField' %}NDatePicker{% else %}NInput{% endif %}',
|
||||
label: '{{ field.label }}',
|
||||
componentProps: {
|
||||
placeholder: '请输入{{ field.label }}',
|
||||
clearable: true,
|
||||
filterable: {% if field.choices %}true{% else %}false{% endif %},
|
||||
{% if field.choices %}
|
||||
options: [
|
||||
{% for choice in field.choices %}
|
||||
{
|
||||
label: '{{ choice.label }}',
|
||||
value: {{ choice.value }},
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
},
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
Reference in New Issue
Block a user