feat: 代码生成器优化

autumnal_wind@yeah.net

2024-05-28 b6d4f6632a22fb299ca4cf1ac8ae8bca9cfa23e9

feat: 代码生成器优化

 hs-modules/hs-generator/src/main/java/com/sunsail/generator/util/VelocityUtils.java

@@ -134,6 +134,7 @@
        } else if (GenConstants.TPL_TREE.equals(tplCategory)) {
            templates.add("vm/vue/index-tree.vue.vm");
        }
        templates.add("vm/vue/DetailForm.vue.vm");
        return templates;
    }


 hs-modules/hs-generator/src/main/resources/generator.yml

@@ -1,7 +1,7 @@
# 代码生成
gen:
  # 作者
  author: Lion Li
  author: Bo Yu
  # 默认生成包路径 system 需改成自己的模块名称 如 system monitor tool
  packageName: com.sunsail.system
  # 自动去除表前缀，默认是false

 hs-modules/hs-generator/src/main/resources/vm/vue/DetailForm.vue.vm

New file
@@ -0,0 +1,222 @@
<template>
  <div class="p-2">
    <Dialog :title="dialog.title" v-model="dialog.visible" width="600px" :draggable="draggable">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
#foreach($column in $columns)
#set($field=$column.javaField)
#if(($column.insert || $column.edit) && !$column.pk)
#set($parentheseIndex=$column.columnComment.indexOf("（"))
#if($parentheseIndex != -1)
#set($comment=$column.columnComment.substring(0, $parentheseIndex))
#else
#set($comment=$column.columnComment)
#end
#set($dictType=$column.dictType)
#if($column.htmlType == "input")
        <el-form-item label="${comment}" prop="${field}">
          <el-input v-model="formData.${field}" placeholder="请输入${comment}" />
        </el-form-item>
#elseif($column.htmlType == "imageUpload")
        <el-form-item label="${comment}" prop="${field}">
          <image-upload v-model="formData.${field}"/>
        </el-form-item>
#elseif($column.htmlType == "fileUpload")
        <el-form-item label="${comment}" prop="${field}">
          <file-upload v-model="formData.${field}"/>
        </el-form-item>
#elseif($column.htmlType == "editor")
        <el-form-item label="${comment}">
          <editor v-model="formData.${field}" :min-height="192"/>
        </el-form-item>
#elseif($column.htmlType == "select" && "" != $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-select v-model="formData.${field}" placeholder="请选择${comment}">
            <el-option
                v-for="dict in ${dictType}"
                :key="dict.value"
                :label="dict.label"
#if($column.javaType == "Integer" || $column.javaType == "Long")
                :value="parseInt(dict.value)"
#else
                :value="dict.value"
#end
            ></el-option>
          </el-select>
        </el-form-item>
#elseif($column.htmlType == "select" && $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-select v-model="formData.${field}" placeholder="请选择${comment}">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
#elseif($column.htmlType == "checkbox" && "" != $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-checkbox-group v-model="formData.${field}">
            <el-checkbox
                v-for="dict in ${dictType}"
                :key="dict.value"
                :label="dict.value">
                {{dict.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
#elseif($column.htmlType == "checkbox" && $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-checkbox-group v-model="formData.${field}">
            <el-checkbox>请选择字典生成</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
#elseif($column.htmlType == "radio" && "" != $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-radio-group v-model="formData.${field}">
            <el-radio
                v-for="dict in ${dictType}"
                :key="dict.value"
#if($column.javaType == "Integer" || $column.javaType == "Long")
                :label="parseInt(dict.value)"
#else
                :label="dict.value"
#end
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
#elseif($column.htmlType == "radio" && $dictType)
        <el-form-item label="${comment}" prop="${field}">
          <el-radio-group v-model="formData.${field}">
                <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
#elseif($column.htmlType == "datetime")
        <el-form-item label="${comment}" prop="${field}">
          <el-date-picker clearable
            v-model="form.${field}"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择${comment}">
          </el-date-picker>
        </el-form-item>
#elseif($column.htmlType == "textarea")
        <el-form-item label="${comment}" prop="${field}">
            <el-input v-model="formData.${field}" type="textarea" placeholder="请输入内容" />
        </el-form-item>
#end
#end
#end
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="formLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup name="${BusinessName}" lang="ts">
import * as ${businessName}Api from '@/api/${moduleName}/${businessName}';
import { ${BusinessName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
import {useI18n} from "vue-i18n";

defineOptions({ name: '${BusinessName}Form' })

// 接收父组件传入属性
// const props = defineProps({})

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
#if(${dicts} != '')
#set($dictsNoSymbol=$dicts.replace("'", ""))
/** 数据字典 */
const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
#end
// 对话框
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});
// 窗体是否可以拖动
const draggable = ref(true)
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formLoading = ref(false)
// 表单的类型：create - 新增；update - 修改
const formType = ref('')
// 表单引用
const formRef = ref<ElFormInstance>();
// 表单数据
const formData = ref<${BusinessName}Form>({
#foreach ($column in $columns)
#if($column.query)
#if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
$column.javaField: undefined,
#end
#end
#end
})
// 表单校验规则
const formRules = reactive({
    #foreach ($column in $columns)
        #if($column.insert || $column.edit)
            #if($column.required)
                #set($parentheseIndex=$column.columnComment.indexOf("（"))
                #if($parentheseIndex != -1)
                    #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                #else
                    #set($comment=$column.columnComment)
                #end
                    $column.javaField: [
                    { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
                ]#if($foreach.count != $columns.size()),#end
            #end
        #end
    #end
})

/** 表单重置 */
const resetForm = () => {
    formData.value = {
        #foreach ($column in $columns)
            #if($column.query)
                #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
                        $column.javaField: undefined,
                #end
            #end
        #end
    }
  formRef.value?.resetFields();
}
// 传回给父组件的属性与方法
// 提供 open 方法，用于打开弹窗
defineExpose({open})
/** 触发父组件的事件 */
/** 定义 success 事件，用于操作成功后的回调 */
const emit = defineEmits(['success'])
/** 提交按钮 */
const submitForm = async () => {
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value?.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
        const data = formData.value as unknown as ${BusinessName}Form
        if (formType.value === 'create') {
            await ${BusinessName}Api.add${BusinessName}(data)
            proxy?.$modal.msgSuccess("新增成功");
        } else {
            await ${BusinessName}Api.update${BusinessName}(data)
            proxy?.$modal.msgSuccess("修改成功");
        }
        dialog.visible = false
        // 发送操作成功的事件
        emit('success')
    } finally {
        formLoading.value = false
    }
}

/** 初始化 */
onMounted(() => {

});
</script>

 hs-modules/hs-generator/src/main/resources/vm/vue/index.vue.vm

@@ -2,7 +2,7 @@
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px" class="-mb-15px">
#foreach($column in $columns)
#if($column.query)
#set($dictType=$column.dictType)
@@ -70,10 +70,7 @@
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
            <el-button type="primary" plain icon="Plus" @click="openForm('create')" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
@@ -258,91 +255,113 @@
</template>

<script setup name="${BusinessName}" lang="ts">
import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
import { ${BusinessName}VO, ${BusinessName}Query, ${BusinessName}Form } from '@/api/${moduleName}/${businessName}/types';
/** 模块导入 */
import { list${BusinessName}, del${BusinessName}} from '@/api/${moduleName}/${businessName}';
import { ${BusinessName}VO, ${BusinessName}Query} from '@/api/${moduleName}/${businessName}/types';

defineOptions({ name: '${BusinessName}' })

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
#if(${dicts} != '')
/** 当前页面引用的数据字典 */
#set($dictsNoSymbol=$dicts.replace("'", ""))
const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts}));
#end

const ${businessName}List = ref<${BusinessName}VO[]>([]);
const buttonLoading = ref(false);
// 是否加载遮罩层
const loading = ref(true);
// 是否显示查询项
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const ${businessName}List = ref<${BusinessName}VO[]>([]);
// 列表选中的记录Id
const ids = ref<Array<number | string>>([]);
// 单选
const single = ref(true);
// 多选
const multiple = ref(true);
// 总记录数
const total = ref(0);

#foreach ($column in $columns)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
// 日期范围
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']);
#end
#end

const queryFormRef = ref<ElFormInstance>();
const ${businessName}FormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ${BusinessName}Form = {
#foreach ($column in $columns)
#if($column.insert || $column.edit)
#if($column.htmlType == "checkbox")
  $column.javaField: []#if($foreach.count != $columns.size()),#end
#else
  $column.javaField: undefined#if($foreach.count != $columns.size()),#end
#end
#end
#end
}
const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
  form: {...initFormData},
  queryParams: {
// 查询参数
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
#foreach ($column in $columns)
#if($column.query)
#if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
    $column.javaField: undefined,
#end
#end
#end
    params: {
#foreach ($column in $columns)
#if($column.query)
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
      $column.javaField: undefined#if($foreach.count != $columns.size()),#end
#end
#end
#end
    }
  },
  rules: {
#foreach ($column in $columns)
#if($column.insert || $column.edit)
#if($column.required)
#set($parentheseIndex=$column.columnComment.indexOf("（"))
#if($parentheseIndex != -1)
#set($comment=$column.columnComment.substring(0, $parentheseIndex))
#else
#set($comment=$column.columnComment)
#end
    $column.javaField: [
      { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
    ]#if($foreach.count != $columns.size()),#end
#end
#end
#end
  }
});
    #foreach ($column in $columns)
        #if($column.query)
            #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
    $column.javaField: '',
            #end
        #end
    #end
})
## const ${businessName}FormRef = ref<ElFormInstance>();
##
## const dialog = reactive<DialogOption>({
##   visible: false,
##   title: ''
## });

const { queryParams, form, rules } = toRefs(data);
## const initFormData: ${BusinessName}Form = {
## #foreach ($column in $columns)
## #if($column.insert || $column.edit)
## #if($column.htmlType == "checkbox")
##   $column.javaField: []#if($foreach.count != $columns.size()),#end
## #else
##   $column.javaField: undefined#if($foreach.count != $columns.size()),#end
## #end
## #end
## #end
## }
## const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
##   form: {...initFormData},
##   queryParams: {
##     pageNum: 1,
##     pageSize: 10,
## #foreach ($column in $columns)
## #if($column.query)
## #if($column.htmlType != "datetime" || $column.queryType != "BETWEEN")
##     $column.javaField: undefined,
## #end
## #end
## #end
##     params: {
## #foreach ($column in $columns)
## #if($column.query)
## #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
##       $column.javaField: undefined#if($foreach.count != $columns.size()),#end
## #end
## #end
## #end
##     }
##   },
##   rules: {
## #foreach ($column in $columns)
## #if($column.insert || $column.edit)
## #if($column.required)
## #set($parentheseIndex=$column.columnComment.indexOf("（"))
## #if($parentheseIndex != -1)
## #set($comment=$column.columnComment.substring(0, $parentheseIndex))
## #else
## #set($comment=$column.columnComment)
## #end
##     $column.javaField: [
##       { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
##     ]#if($foreach.count != $columns.size()),#end
## #end
## #end
## #end
##   }
## });
##
## const { queryParams, form, rules } = toRefs(data);

/** 查询${functionName}列表 */
const getList = async () => {
@@ -359,22 +378,10 @@
  proxy?.addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}');
#end
#end
  const res = await list${BusinessName}(queryParams.value);
  const res = await list${BusinessName}(queryParams);
  ${businessName}List.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  ${businessName}FormRef.value?.resetFields();
}

/** 搜索按钮操作 */
@@ -402,50 +409,6 @@
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加${functionName}";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: ${BusinessName}VO) => {
  reset();
  const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0]
  const res = await get${BusinessName}(_${pkColumn.javaField});
  Object.assign(form.value, res.data);
#foreach ($column in $columns)
  #if($column.htmlType == "checkbox")
  form.value.$column.javaField = form.value.${column.javaField}.split(",");
  #end
#end
  dialog.visible = true;
  dialog.title = "修改${functionName}";
}

/** 提交按钮 */
const submitForm = () => {
  ${businessName}FormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      #foreach ($column in $columns)
        #if($column.htmlType == "checkbox")
        form.value.$column.javaField = form.value.${column.javaField}.join(",");
        #end
      #end
      if (form.value.${pkColumn.javaField}) {
        await update${BusinessName}(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await add${BusinessName}(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.#[[$modal]]#.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: ${BusinessName}VO) => {
  const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value;
@@ -458,10 +421,14 @@
/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('${moduleName}/${businessName}/export', {
    ...queryParams.value
    ...queryParams
  }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
}

/** 弹出框(增加、修改) */
const detailFormRef = ref();
const openForm = (type: string, id?: number) => {
    detailFormRef?.value.open(type, id)
}
onMounted(() => {
  getList();
});