421 lines
12 KiB
JavaScript
421 lines
12 KiB
JavaScript
const content = `
|
||
<!--
|
||
此代码由renderVue工具自动生成
|
||
作者：mask
|
||
-->
|
||
<template>
|
||
<div class="demo-demo-form-dialog-container">
|
||
<el-dialog v-model="state.showDialog" destroy-on-close :title="state.title" draggable :close-on-click-modal="false"
|
||
:close-on-press-escape="false" width="70%" @close="resetForm">
|
||
<el-form :model="state.form" ref="formRef" size="default" label-width="150px">
|
||
<el-row :gutter="35">
|
||
<%- column %>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click.stop="onCancel" size="default">取 消</el-button>
|
||
<el-button type="primary" @click.stop="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, toRefs, ref, getCurrentInstance, defineAsyncComponent, defineProps, watch, computed } from 'vue'
|
||
import { <%= dirName %>UpdateInput } from '/@/api/interface'
|
||
import {
|
||
<%= lowerCasedirName %>Get,
|
||
<%= lowerCasedirName %>Add,
|
||
<%= lowerCasedirName %>Update,
|
||
} from "/@/api/controller";
|
||
import { useDictListInfo } from '/@/stores/dictListInfo'
|
||
import { storeToRefs } from 'pinia'
|
||
import pinia from '/@/stores/index'
|
||
import { useUserInfo } from '/@/stores/userInfo';
|
||
const storesUserInfo = useUserInfo(pinia)
|
||
|
||
const { proxy } = getCurrentInstance() as any
|
||
const DictSelect = defineAsyncComponent(() => import('/@/components/DictSelect/index.vue'))
|
||
const CommonInterfaceSelect = defineAsyncComponent(() => import('/@/components/CommonInterfaceSelect/index.vue'))
|
||
|
||
const storesUseUserInfo = useDictListInfo()
|
||
|
||
const { dictListInfo } = storeToRefs(storesUseUserInfo)
|
||
|
||
const formRef = ref()
|
||
const state = reactive({
|
||
title: '新增',
|
||
showDialog: false,
|
||
sureLoading: false,
|
||
form: {} as <%= dirName %>UpdateInput,
|
||
upload:{
|
||
<%= uploadVar %>
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(["refresh"])
|
||
function resetForm() {
|
||
state.form = {} as <%= dirName %>UpdateInput
|
||
<%= uploadVarReset %>
|
||
}
|
||
|
||
|
||
// 打开对话框
|
||
const open = async (row: any) => {
|
||
if (row && row.id) {
|
||
try {
|
||
state.title = '修改'
|
||
const res = await <%= lowerCasedirName %>Get({ id: row.id })
|
||
if (res?.success) {
|
||
state.form = res.data
|
||
<%= uploadEcho %>
|
||
}
|
||
|
||
} catch (error) {
|
||
proxy.$modal.closeLoading()
|
||
|
||
}
|
||
}
|
||
state.showDialog = true
|
||
}
|
||
|
||
// 取消
|
||
const onCancel = () => {
|
||
resetForm()
|
||
state.showDialog = false
|
||
}
|
||
|
||
// 确定
|
||
const onSure = () => {
|
||
formRef.value.validate(async (valid: boolean) => {
|
||
if (!valid) return
|
||
state.sureLoading = true
|
||
let res = {} as any
|
||
if (state.form.id) {
|
||
try {
|
||
res = await <%= lowerCasedirName %>Update(state.form)
|
||
if (res.success) {
|
||
proxy.$modal.msgSuccess('修改成功')
|
||
resetForm()
|
||
}
|
||
} catch (error) {
|
||
} finally {
|
||
state.sureLoading = false
|
||
}
|
||
} else {
|
||
try {
|
||
res = await <%= lowerCasedirName %>Add(state.form)
|
||
if (res.success) {
|
||
proxy.$modal.msgSuccess('新增成功')
|
||
resetForm()
|
||
}
|
||
} catch (error) {
|
||
} finally {
|
||
state.sureLoading = false
|
||
}
|
||
}
|
||
|
||
if (res?.success) {
|
||
emit('refresh')
|
||
state.showDialog = false
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
defineExpose({
|
||
open,
|
||
})
|
||
</script>
|
||
`;
|
||
let ejs = require('ejs');
|
||
let { toCapitalizeFirstLetter } = require('../utils/index.js');
|
||
/**
|
||
* 上传接口的后缀 例如：/api/business-manage/contract/upload-attachment 后缀为upload-attachment
|
||
*/
|
||
const uploadSuffix = 'upload-attachment';
|
||
|
||
/**
|
||
* 生成el-form-item数据
|
||
* @param {*} barr { label: string, prop: string ,type: string}[]
|
||
*/
|
||
function renderColumn(barr, permissionPrefix, requiredArr) {
|
||
/**
|
||
* 生成的el-form-item数据
|
||
*/
|
||
let column = '';
|
||
/**
|
||
* 保存附件上传所用到的函数部分代码
|
||
*/
|
||
let uploadFuncStr = '';
|
||
/**
|
||
* 保存附件上传所用到的变量部分代码
|
||
*/
|
||
let uploadVar = '';
|
||
/**
|
||
* 保存附件上传所用到的变量重置部分代码
|
||
*/
|
||
let uploadVarReset = '';
|
||
/**
|
||
* 保存附件上传所用到的变量回显部分代码
|
||
*/
|
||
let uploadEcho = '';
|
||
// 遍历过滤后的数组
|
||
for (let i = 0; i < barr.length; i++) {
|
||
let item = barr[i];
|
||
let label = item.label ? item.label : '';
|
||
// 如果对象标签中包含字典
|
||
if (label.indexOf('字典') != -1) {
|
||
column += renderDictColumn(item, requiredArr);
|
||
// 如果对象标签中包含是否
|
||
} else if (label.indexOf('是否') != -1) {
|
||
column += renderBooleanColumn(item, requiredArr);
|
||
} else if (label.indexOf('日期') != -1 || label.indexOf('时间') != -1) {
|
||
column += renderDateColumn(item, requiredArr);
|
||
} else if (label.indexOf('备注') != -1 || label.indexOf('描述') != -1) {
|
||
column += renderTextAreaColumn(item, requiredArr);
|
||
} else if (label.indexOf('附件') != -1) {
|
||
let { formItem, formFuncStr } = renderUploadColumn(item, requiredArr);
|
||
column += formItem;
|
||
if (!uploadFuncStr) {
|
||
uploadFuncStr += `//上传
|
||
const fileAction = computed(() => {
|
||
return import.meta.env.VITE_API_URL + '/${permissionPrefix.replaceAll(':', '/')}/upload-attachment'
|
||
})
|
||
const fileHeaders = computed(() => {
|
||
return { Authorization: 'Bearer ' + storesUserInfo.getToken() }
|
||
})\n`;
|
||
}
|
||
uploadFuncStr += `${formFuncStr}\n`;
|
||
uploadVar += `${item.prop}: [],\n`;
|
||
uploadVarReset += `state.upload.${item.prop}= [];\n`;
|
||
uploadEcho += `if (state.form.${item.prop}) state.upload.${item.prop} = state.form.${item.prop}\n`;
|
||
} else {
|
||
// 调用renderDateColumn函数，生成el-descriptions-item数据
|
||
column += renderInputColumn(item, requiredArr);
|
||
}
|
||
}
|
||
|
||
return { column, uploadVar, uploadVarReset, uploadFuncStr, uploadEcho };
|
||
}
|
||
|
||
/**
|
||
* 生成表单页
|
||
* @param {object} obj swagger信息
|
||
* @param {string} dirName 文件夹名称
|
||
* @param {string} permissionPrefix 权限前缀
|
||
*/
|
||
function renderForm(obj, dirName, permissionPrefix) {
|
||
// 过滤掉不需要生成的字段
|
||
// let filter = ['附件'];
|
||
let filter = [];
|
||
let schemas = obj.components.schemas[dirName + 'AddInput'];
|
||
let properties = schemas.properties;
|
||
let requiredArr = schemas.required;
|
||
let arr = [];
|
||
|
||
for (let key in properties) {
|
||
arr.push({ label: properties[key].description, prop: key, type: properties[key].type });
|
||
}
|
||
|
||
// 过滤数组
|
||
let barr = arr.filter((item) => {
|
||
// 声明一个布尔值
|
||
let isFlag = true;
|
||
// 遍历过滤字段
|
||
filter.map((filterItem) => {
|
||
// 如果过滤字段在对象标签中，则将布尔值设置为false
|
||
if (item.label.indexOf(filterItem) !== -1) {
|
||
return (isFlag = false);
|
||
}
|
||
});
|
||
// 如果布尔值为false，则返回false
|
||
if (!isFlag) {
|
||
return false;
|
||
// 如果布尔值为true，则返回true
|
||
} else {
|
||
return true;
|
||
}
|
||
});
|
||
|
||
let { column, uploadVar, uploadVarReset, uploadFuncStr, uploadEcho } = renderColumn(barr, permissionPrefix, requiredArr ? requiredArr : []);
|
||
|
||
let lowerCasedirName = dirName.charAt(0).toLowerCase() + dirName.slice(1);
|
||
let templateStr = ejs.render(content, {
|
||
permissionPrefix,
|
||
column,
|
||
dirName,
|
||
lowerCasedirName,
|
||
uploadVar,
|
||
uploadVarReset,
|
||
uploadFuncStr,
|
||
uploadEcho,
|
||
});
|
||
|
||
return templateStr;
|
||
}
|
||
|
||
//生成字典行
|
||
function renderDictColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请选择${item.label}', trigger: ['blur', 'change'] }]"`;
|
||
}
|
||
}
|
||
return `${`<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||
<el-form-item label="${item.label}" prop="${item.prop}" ${str}>
|
||
<DictSelect v-model="state.form.${item.prop}" placeholder="请选择${item.label}"
|
||
:options="dictListInfo.${item.prop}" clearable />
|
||
</el-form-item>
|
||
</el-col>`}\n`;
|
||
}
|
||
|
||
//生成 是否 字段的行
|
||
function renderBooleanColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请选择${item.label}', trigger: ['blur', 'change'] }]"`;
|
||
}
|
||
}
|
||
|
||
return `${`<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||
<el-form-item label="${item.label}" prop="${item.prop}" ${str}>
|
||
<el-switch v-model="state.form.${item.prop}" />
|
||
</el-form-item>
|
||
</el-col>`}\n`;
|
||
}
|
||
|
||
//生成 日期 字段的行
|
||
function renderDateColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请选择${item.label}', trigger: ['blur', 'change'] }]"`;
|
||
}
|
||
}
|
||
|
||
return `${`<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||
<el-form-item label="${item.label}" prop="${item.prop}" ${str}>
|
||
<el-date-picker v-model="state.form.${item.prop}" format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date"
|
||
placeholder="请选择${item.label}" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>\n`}`;
|
||
}
|
||
|
||
/**
|
||
* 生成input输入框
|
||
*/
|
||
function renderInputColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请输入${item.label}', trigger: ['blur', 'change'] }]"`;
|
||
}
|
||
}
|
||
|
||
return `${`<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||
<el-form-item label="${item.label}" prop="${item.prop}" ${str}>
|
||
<el-input v-model="state.form.${item.prop}" placeholder="请输入${item.label}" clearable />
|
||
</el-form-item>
|
||
</el-col>\n`}`;
|
||
}
|
||
|
||
/**
|
||
* 生成多行文本输入框
|
||
*/
|
||
function renderTextAreaColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请输入${item.label}', trigger: ['blur', 'change'] }]"`;
|
||
}
|
||
}
|
||
|
||
return `${`<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-form-item label="${item.label}" prop="${item.prop}" ${str}>
|
||
<el-input v-model="state.form.${item.prop}" placeholder="请输入${item.label}" type="textarea" :rows="5" clearable />
|
||
</el-form-item>
|
||
</el-col>\n`}`;
|
||
}
|
||
/**
|
||
*
|
||
* @param {*} item
|
||
* @param {*} requiredArr 必填项prop列表
|
||
* @returns {*} formItem:表单部分， formFuncStr: 函数部分
|
||
*/
|
||
function renderUploadColumn(item, requiredArr) {
|
||
let str = '';
|
||
|
||
for (let item of requiredArr) {
|
||
if (item.includes(item.prop)) {
|
||
str = `:rules="[{ required: true, message: '请选择${item.label}', trigger: ['change'] }]"`;
|
||
}
|
||
}
|
||
|
||
return {
|
||
formItem: `${`<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-form-item label="上传附件" prop="${item.prop}" ${str}>
|
||
<el-upload ref="upload" v-model:file-list="state.upload.${item.prop}" class="w100" :on-change="handleChange${toCapitalizeFirstLetter(item.prop)}"
|
||
:action="fileAction" multiple :headers="fileHeaders" :before-upload="() => {
|
||
import${toCapitalizeFirstLetter(item.prop)}Loading = true
|
||
}" :on-success="onImportSuccess${toCapitalizeFirstLetter(item.prop)}" :on-error="onFileError${toCapitalizeFirstLetter(item.prop)}">
|
||
<el-button type="primary" :loading="import${toCapitalizeFirstLetter(item.prop)}Loading">选择文件</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-col>\n`}`,
|
||
formFuncStr: `${`
|
||
const import${toCapitalizeFirstLetter(item.prop)}Loading = ref(false)
|
||
//上传成功
|
||
const onImportSuccess${toCapitalizeFirstLetter(item.prop)} = (res: {
|
||
data: never; success: any; msg: any
|
||
}) => {
|
||
import${toCapitalizeFirstLetter(item.prop)}Loading.value = false
|
||
|
||
}
|
||
//上传失败
|
||
const onFileError${toCapitalizeFirstLetter(item.prop)} = (error: any) => {
|
||
import${toCapitalizeFirstLetter(item.prop)}Loading.value = false
|
||
let message = ''
|
||
if (error.message) {
|
||
try {
|
||
message = JSON.parse(error.message)?.msg
|
||
} catch (err) {
|
||
message = error.message || ''
|
||
}
|
||
}
|
||
if (message) proxy.$modal.msgError(message)
|
||
}
|
||
|
||
const handleChange${toCapitalizeFirstLetter(item.prop)} = (uploadFile: any, uploadFiles: any) => {
|
||
if (uploadFiles) {
|
||
let arr: any = []
|
||
uploadFiles.forEach((item: any, index: number) => {
|
||
if (item.url && item.status == 'success') {
|
||
arr.push(item)
|
||
} else if (item.status == 'success' && item.response && item.response.success) {
|
||
arr.push(item.response.data)
|
||
} else if (item.status == 'success' && item.response && !item.response.success) {
|
||
proxy.$modal.msgError(item.response.msg)
|
||
state.upload.${item.prop}.pop()
|
||
}
|
||
})
|
||
|
||
state.form.files = arr
|
||
}
|
||
}\n`}`,
|
||
};
|
||
}
|
||
|
||
module.exports = {
|
||
renderForm,
|
||
};
|