签入版本
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.visible"
|
||||
title="{{ module_comment }}详情"
|
||||
width="750"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="dialogClose"
|
||||
>
|
||||
<el-descriptions column="2" border>
|
||||
{% for field in form_fields %}
|
||||
<el-descriptions-item label="{{ field.label }}:" label-class-name="des-width">
|
||||
{% if field.is_image %}
|
||||
<el-image
|
||||
v-if="formData.{{ field.camel_name }}"
|
||||
:src="formData.{{ field.camel_name }}"
|
||||
:preview-src-list="[formData.{{ field.camel_name }}]"
|
||||
fit="cover"
|
||||
style="width: 80px; height: 80px"
|
||||
/>
|
||||
<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' %}
|
||||
<el-tag :type="formData.{{ field.camel_name }} ? 'success' : 'danger'">
|
||||
{{ '{{ formData.' + field.camel_name + ' ? "是" : "否" }}' }}
|
||||
</el-tag>
|
||||
{% elif field.type == 'IntegerField' and field.choices %}
|
||||
<span>{{ '{{ getChoiceLabel(\'' + field.camel_name + '\', formData.' + field.camel_name + ') }}' }}</span>
|
||||
{% else %}
|
||||
{{ '{{ formData.' + field.camel_name + ' || \'-\' }}' }}
|
||||
{% endif %}
|
||||
</el-descriptions-item>
|
||||
{% endfor %}
|
||||
</el-descriptions>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogClose">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { get{{ model_class_name }}Detail } from '@/api/{{ api_path }}';
|
||||
import { onMounted, reactive, watch } from 'vue';
|
||||
{% if has_image_field %}
|
||||
import { ElImage } from 'element-plus';
|
||||
{% 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 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 = () => {
|
||||
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();
|
||||
} else if (newVal && !props.{{ primary_key }}) {
|
||||
resetFormData();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.visible && props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.des-width) {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<!-- file name: ui/edit_tree.vue.tpl -->
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.visible"
|
||||
:title="props.{{ primary_key }} ? '编辑{{ module_comment }}' : '新增{{ module_comment }}'"
|
||||
width="500"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="dialogClose"
|
||||
>
|
||||
<!-- 表单 -->
|
||||
<el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
|
||||
{% for field in form_fields %}
|
||||
{% if field.camel_name == parent_id_field %}
|
||||
<!-- {{ field.comment }}（树形选择器） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-tree-select
|
||||
v-model="formData.{{ field.camel_name }}"
|
||||
:data="treeOptions"
|
||||
clearable
|
||||
node-key="{{ primary_key }}"
|
||||
:props="{
|
||||
label: '{{ display_field_camel }}',
|
||||
}"
|
||||
:default-expand-all="true"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
check-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
{% elif field.is_image %}
|
||||
<!-- {{ field.comment }}（图片上传） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请上传{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<UploadImg
|
||||
@changeFileName="(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>
|
||||
</el-form-item>
|
||||
{% elif field.type == 'CharField' and ('备注' in field.comment or '介绍' in field.comment or '描述' in field.comment or '说明' in field.comment) %}
|
||||
<!-- {{ field.comment }}（多行文本） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-input type="textarea" v-model="formData.{{ field.camel_name }}" placeholder="请输入{{ field.comment }}" :rows="3" clearable />
|
||||
</el-form-item>
|
||||
{% elif field.type == 'CharField' %}
|
||||
<!-- {{ field.comment }} -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-input class="ls-input" v-model="formData.{{ field.camel_name }}" placeholder="请输入{{ field.comment }}" clearable />
|
||||
</el-form-item>
|
||||
{% elif field.type == 'IntegerField' and field.choices %}
|
||||
<!-- {{ field.comment }}（{% if field.choices|length <= 2 %}单选{% else %}下拉选择{% endif %}） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
{% if field.choices|length <= 2 %}
|
||||
<el-radio-group v-model="formData.{{ field.camel_name }}">
|
||||
{% for choice in field.choices %}
|
||||
<el-radio :value="{{ choice.value }}">{{ choice.label }}</el-radio>
|
||||
{% endfor %}
|
||||
</el-radio-group>
|
||||
{% else %}
|
||||
<el-select
|
||||
v-model="formData.{{ field.camel_name }}"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsData.{{ field.camel_name }}List"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
{% endif %}
|
||||
</el-form-item>
|
||||
{% elif field.type == 'IntegerField' and not field.choices %}
|
||||
<!-- {{ field.comment }}（数字输入） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-input-number v-model="formData.{{ field.camel_name }}" :min="{{ field.min_value or 0 }}" :max="{{ field.max_value or 99999 }}" />
|
||||
</el-form-item>
|
||||
{% elif field.type == 'BooleanField' %}
|
||||
<!-- {{ field.comment }}（开关） -->
|
||||
<el-form-item label="{{ field.label }}" prop="{{ field.camel_name }}">
|
||||
<el-switch v-model="formData.{{ field.camel_name }}" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
{% elif field.type == 'DateField' %}
|
||||
<!-- {{ field.comment }}（日期选择） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formData.{{ field.camel_name }}"
|
||||
type="date"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
{% elif field.type == 'DateTimeField' %}
|
||||
<!-- {{ field.comment }}（日期时间选择） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请选择{{ field.comment }}', trigger: 'change' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formData.{{ field.camel_name }}"
|
||||
type="datetime"
|
||||
placeholder="请选择{{ field.comment }}"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
{% elif field.type == 'TextField' %}
|
||||
<!-- {{ field.comment }}（文本域） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-input type="textarea" v-model="formData.{{ field.camel_name }}" placeholder="请输入{{ field.comment }}" :rows="3" />
|
||||
</el-form-item>
|
||||
{% elif field.type == 'FloatField' or field.type == 'DecimalField' %}
|
||||
<!-- {{ field.comment }}（数字输入） -->
|
||||
<el-form-item
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
{% if field.required %}
|
||||
:rules="{ required: true, message: '请输入{{ field.comment }}', trigger: 'blur' }"
|
||||
{% endif %}
|
||||
>
|
||||
<el-input-number
|
||||
v-model="formData.{{ field.camel_name }}"
|
||||
:min="{{ field.min_value or 0 }}"
|
||||
:max="{{ field.max_value or 999999 }}"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
</el-form-item>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</el-form>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogClose">取消</el-button>
|
||||
<el-button :loading="subLoading" type="primary" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus';
|
||||
import { get{{ model_class_name }}List, get{{ model_class_name }}Detail, {{ model_class_name_camel }}Add, {{ model_class_name_camel }}Update } from '@/api/{{ api_path }}';
|
||||
import { onMounted, reactive, shallowRef, watch, ref } from 'vue';
|
||||
import { message, buildTree } from '@/utils/auth';
|
||||
import { useLockFn } from '@/utils/useLockFn';
|
||||
{% if has_image_field %}
|
||||
import UploadImg from '@/components/Upload/Image.vue';
|
||||
{% endif %}
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
|
||||
// 表单引用
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
|
||||
// 树形选项数据
|
||||
const treeOptions = ref<any[]>([]);
|
||||
|
||||
/**
|
||||
* 定义选项数据
|
||||
*/
|
||||
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 %}
|
||||
{
|
||||
id: {% if choice.value_type == 'string' %}'{{ choice.value }}'{% else %}{{ choice.value }}{% endif %},
|
||||
name: '{{ choice.label }}',
|
||||
},
|
||||
{% 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,
|
||||
},
|
||||
// 新增时传入的父级ID（驼峰格式）
|
||||
parentId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取树形数据
|
||||
*/
|
||||
const get{{ model_class_name }}Tree = async () => {
|
||||
const data = await get{{ model_class_name }}List();
|
||||
const tree: any = [{ id: 0, {{ display_field_camel }}: '顶级', children: [] }];
|
||||
const lists = buildTree(data);
|
||||
tree[0].children.push(...lists);
|
||||
treeOptions.value = tree;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
* 根据是否有ID判断是新增还是编辑
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
// 表单验证
|
||||
await formRef.value?.validate();
|
||||
|
||||
// 调用接口
|
||||
props.{{ primary_key }} ? await {{ model_class_name_camel }}Update(formData) : await {{ model_class_name_camel }}Add(formData);
|
||||
|
||||
message('操作成功');
|
||||
emit('update:visible', false);
|
||||
emit('success');
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const dialogClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
// 防抖处理，防止重复提交
|
||||
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
* 编辑时获取详情并填充表单
|
||||
*/
|
||||
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);
|
||||
message('获取数据失败', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
const resetForm = () => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
// 设置父级ID默认值（使用驼峰格式）
|
||||
formData.{{ parent_id_field }} = props.parentId || 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听对话框打开
|
||||
* 编辑时加载数据，新增时重置表单
|
||||
*/
|
||||
onMounted(() => {
|
||||
get{{ model_class_name }}Tree();
|
||||
if (props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听visible变化，重新加载数据
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal && props.{{ primary_key }}) {
|
||||
setFormData();
|
||||
} else if (newVal && !props.{{ primary_key }}) {
|
||||
resetForm();
|
||||
get{{ model_class_name }}Tree();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="{{ app_name }}-index">
|
||||
<el-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<div>
|
||||
<el-button type="primary" @click="handleAdd()" v-perm="['{{ permission_prefix }}:add']">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<plus />
|
||||
</el-icon>
|
||||
</template>
|
||||
新增{{ module_comment }}
|
||||
</el-button>
|
||||
<el-button @click="handleExpand"> 展开/折叠</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<el-table
|
||||
border
|
||||
v-loading="loading"
|
||||
ref="tableRef"
|
||||
:data="tableData"
|
||||
row-key="{{ primary_key }}"
|
||||
:height="tableHeight"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
{% for field in list_fields %}
|
||||
{% if field.choices %}
|
||||
<el-table-column
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{% for choice in field.choices %}
|
||||
<el-tag {% if loop.index0 == 0 %}v-if="row.{{ field.camel_name }} == {{ choice.value }}"{% endif %}
|
||||
{% if loop.index0 > 0 %}v-else-if="row.{{ field.camel_name }} == {{ choice.value }}"{% endif %}
|
||||
{% if choice.type %}type="{{ choice.type }}"{% endif %}> {{ choice.label }} </el-tag>
|
||||
{% endfor %}
|
||||
</template>
|
||||
</el-table-column>
|
||||
{% elif field.is_image %}
|
||||
<el-table-column
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
align="center"
|
||||
min-width="100"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-image
|
||||
v-if="row.{{ field.camel_name }}"
|
||||
:src="row.{{ field.camel_name }}"
|
||||
:preview-src-list="[row.{{ field.camel_name }}]"
|
||||
fit="cover"
|
||||
style="width: 40px; height: 40px; border-radius: 4px;"
|
||||
/>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
{% else %}
|
||||
<el-table-column
|
||||
label="{{ field.label }}"
|
||||
prop="{{ field.camel_name }}"
|
||||
min-width="150"
|
||||
{% if field.camel_name != display_field_camel %}
|
||||
align="center"
|
||||
{% endif %}
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<el-table-column align="center" label="操作" width="400" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
@click="handleAdd(row.id)"
|
||||
v-perm="['{{ permission_prefix }}:add']"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="Edit"
|
||||
@click="handleEdit(row)"
|
||||
v-perm="['{{ permission_prefix }}:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
icon="View"
|
||||
@click="handleDetail(row)"
|
||||
v-perm="['{{ permission_prefix }}:detail']"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
@click="handleDelete(row)"
|
||||
v-perm="['{{ permission_prefix }}:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<editDialog
|
||||
ref="editRef"
|
||||
v-if="editVisible"
|
||||
:{{ primary_key }}="{{ primary_key }}Value"
|
||||
:parentId="parentId"
|
||||
v-model:visible="editVisible"
|
||||
@success="getLists"
|
||||
/>
|
||||
<!-- 查看详情对话框组件 -->
|
||||
<detailDialog
|
||||
v-if="detailVisible"
|
||||
:{{ primary_key }}="{{ primary_key }}Value"
|
||||
v-model:visible="detailVisible"
|
||||
@success="getLists"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="{{ model_class_name }}Index">
|
||||
import { defineAsyncComponent, nextTick, onMounted, ref, shallowRef } from 'vue';
|
||||
import { get{{ model_class_name }}List, {{ model_class_name_camel }}Delete } from '@/api/{{ api_path }}';
|
||||
import type { ElTable } from 'element-plus';
|
||||
import { confirm, message, buildTree } from '@/utils/auth';
|
||||
|
||||
// 动态导入编辑对话框组件
|
||||
const editDialog = defineAsyncComponent(() => import('./edit.vue'));
|
||||
// 动态导入详情对话框组件
|
||||
const detailDialog = defineAsyncComponent(() => import('./detail.vue'));
|
||||
|
||||
// 表格引用
|
||||
const tableRef = shallowRef<InstanceType<typeof ElTable>>();
|
||||
|
||||
// 表格高度
|
||||
const tableHeight = document.body.clientHeight - 320;
|
||||
|
||||
// 响应式状态
|
||||
const isExpand = ref(false);
|
||||
const loading = ref(false);
|
||||
const editVisible = ref(false);
|
||||
const detailVisible = ref(false); // 详情对话框显示状态
|
||||
const {{ primary_key }}Value = ref(0);
|
||||
const parentId = ref(0);
|
||||
const tableData = ref([]);
|
||||
|
||||
/**
|
||||
* 获取数据列表
|
||||
*/
|
||||
const getLists = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await get{{ model_class_name }}List();
|
||||
tableData.value = buildTree(data);
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行添加
|
||||
* @param parentIdParam 上级ID
|
||||
*/
|
||||
const handleAdd = async (parentIdParam?: number) => {
|
||||
{{ primary_key }}Value.value = 0;
|
||||
parentId.value = parentIdParam || 0;
|
||||
await nextTick();
|
||||
editVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleEdit = async (row: any) => {
|
||||
{{ primary_key }}Value.value = row.id;
|
||||
await nextTick();
|
||||
editVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行查看详情
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleDetail = async (row: any) => {
|
||||
{{ primary_key }}Value.value = row.id;
|
||||
await nextTick();
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param row 当前行数据
|
||||
*/
|
||||
const handleDelete = async (row: any) => {
|
||||
await confirm('确定要删除？');
|
||||
try {
|
||||
loading.value = true;
|
||||
await {{ model_class_name_camel }}Delete(row.id);
|
||||
message('删除成功');
|
||||
getLists();
|
||||
} catch (e) {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行展开/折叠
|
||||
*/
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value;
|
||||
toggleExpand(tableData.value, isExpand.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 递归展开/折叠所有节点
|
||||
* @param children 子级数据
|
||||
* @param unfold 是否展开
|
||||
*/
|
||||
const toggleExpand = (children: any[], unfold = true) => {
|
||||
for (const key in children) {
|
||||
tableRef.value?.toggleRowExpansion(children[key], unfold);
|
||||
if (children[key].children) {
|
||||
toggleExpand(children[key].children!, unfold);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
getLists();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user