编辑页的列数由原先1列调整为多(1-4)列

This commit is contained in:
晨曦 2024-04-16 18:57:41 +08:00
parent 108bd8e7c4
commit d86def6036
3 changed files with 102 additions and 8 deletions

View File

@ -78,6 +78,9 @@
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['${moduleName}:${businessName}:import']">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
</el-col>
@ -144,7 +147,7 @@
/>
</el-card>
<!-- 添加或修改${functionName}对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
<el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" append-to-body>
<el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="100px">
<el-row>
#foreach($column in $columns)
@ -265,7 +268,6 @@
#end
</el-col>
#end
#end
</el-row>
#if($table.sub)
@ -348,16 +350,54 @@
</div>
</template>
</el-dialog>
<!-- 导入对话框 -->
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
<el-upload
ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<template #tip>
<div class="text-center el-upload__tip">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的${functionName}数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板 </el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="${BusinessName}" lang="ts">
<script setup lang="ts">
import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
#if($table.sub)
import { ${BusinessName}VO, ${subClassName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
#else
import { ${BusinessName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
#end
import { globalHeaders } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
#if(${dicts} != '')
@ -395,6 +435,23 @@
const queryFormRef = ref<ElFormInstance>();
const ${businessName}FormRef = ref<ElFormInstance>();
const uploadRef = ref<ElUploadInstance>();
/*** 导入参数 */
const upload = reactive<ImportOption>({
// 是否显示弹出层(导入)
open: false,
// 弹出层标题(导入)
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 1,
// 设置上传的请求头部
headers: globalHeaders(),
// 上传的地址
url: import.meta.env.VITE_APP_BASE_API + '/${moduleName}/${businessName}/importData'
});
const dialog = reactive<DialogOption>({
visible: false,
@ -627,6 +684,37 @@
}, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
};
/** 导入按钮操作 */
const handleImport = () => {
upload.title = '${functionName}导入';
upload.open = true;
};
/** 下载模板操作 */
const importTemplate = () => {
proxy?.download('${moduleName}/${businessName}/importTemplate', {}, `${businessName}_template.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = () => {
upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
upload.open = false;
upload.isUploading = false;
uploadRef.value?.handleRemove(file);
ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
getList();
};
/** 提交上传文件 */
function submitFileForm() {
uploadRef.value?.submit();
}
onMounted(() => {
getList();
});

View File

@ -72,3 +72,6 @@ insert into sys_menu values('130', 'EasyRetry控制台', '2', '6', 'easyret
-- 增加ancestors字段
ALTER TABLE `mf_product` ADD COLUMN `ancestors` VARCHAR(760) NULL DEFAULT '' COMMENT '祖级列表' AFTER `parent_id`;
ALTER TABLE `demo_product` ADD COLUMN `ancestors` VARCHAR(760) NULL DEFAULT '' COMMENT '祖级列表' AFTER `parent_id`;
--edit_columns字段
ALTER TABLE `gen_table` ADD COLUMN `edit_columns` TINYINT NULL DEFAULT 1 AFTER `remark`;

View File

@ -133,3 +133,6 @@ insert into sys_menu values('130', 'EasyRetry控制台', '2', '6', 'easyret
-- 增加ancestors字段
ALTER TABLE "mf_product" ADD "ancestors" VARCHAR(760) NULL;
COMMENT ON COLUMN "mf_product"."ancestors" IS '祖级列表';
--edit_columns字段
ALTER TABLE `gen_table` ADD COLUMN `edit_columns` TINYINT NULL DEFAULT 1 AFTER `remark`;