作者 RuoYi

新增Vue3前端代码生成模板

  1 +<template>
  2 + <div class="app-container">
  3 + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4 +#foreach($column in $columns)
  5 +#if($column.query)
  6 +#set($dictType=$column.dictType)
  7 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  8 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  9 +#if($parentheseIndex != -1)
  10 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  11 +#else
  12 +#set($comment=$column.columnComment)
  13 +#end
  14 +#if($column.htmlType == "input")
  15 + <el-form-item label="${comment}" prop="${column.javaField}">
  16 + <el-input
  17 + v-model="queryParams.${column.javaField}"
  18 + placeholder="请输入${comment}"
  19 + clearable
  20 + size="small"
  21 + @keyup.enter="handleQuery"
  22 + />
  23 + </el-form-item>
  24 +#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
  25 + <el-form-item label="${comment}" prop="${column.javaField}">
  26 + <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  27 + <el-option
  28 + v-for="dict in ${dictType}"
  29 + :key="dict.value"
  30 + :label="dict.label"
  31 + :value="dict.value"
  32 + />
  33 + </el-select>
  34 + </el-form-item>
  35 +#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
  36 + <el-form-item label="${comment}" prop="${column.javaField}">
  37 + <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  38 + <el-option label="请选择字典生成" value="" />
  39 + </el-select>
  40 + </el-form-item>
  41 +#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
  42 + <el-form-item label="${comment}" prop="${column.javaField}">
  43 + <el-date-picker clearable size="small"
  44 + v-model="queryParams.${column.javaField}"
  45 + type="date"
  46 + value-format="YYYY-MM-DD"
  47 + placeholder="选择${comment}">
  48 + </el-date-picker>
  49 + </el-form-item>
  50 +#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  51 + <el-form-item label="${comment}">
  52 + <el-date-picker
  53 + v-model="daterange${AttrName}"
  54 + size="small"
  55 + style="width: 240px"
  56 + value-format="YYYY-MM-DD"
  57 + type="daterange"
  58 + range-separator="-"
  59 + start-placeholder="开始日期"
  60 + end-placeholder="结束日期"
  61 + ></el-date-picker>
  62 + </el-form-item>
  63 +#end
  64 +#end
  65 +#end
  66 + <el-form-item>
  67 + <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
  68 + <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
  69 + </el-form-item>
  70 + </el-form>
  71 +
  72 + <el-row :gutter="10" class="mb8">
  73 + <el-col :span="1.5">
  74 + <el-button
  75 + type="primary"
  76 + plain
  77 + icon="Plus"
  78 + size="mini"
  79 + @click="handleAdd"
  80 + v-hasPermi="['${moduleName}:${businessName}:add']"
  81 + >新增</el-button>
  82 + </el-col>
  83 + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  84 + </el-row>
  85 +
  86 + <el-table
  87 + v-loading="loading"
  88 + :data="${businessName}List"
  89 + row-key="${treeCode}"
  90 + default-expand-all
  91 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  92 + >
  93 +#foreach($column in $columns)
  94 +#set($javaField=$column.javaField)
  95 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  96 +#if($parentheseIndex != -1)
  97 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  98 +#else
  99 +#set($comment=$column.columnComment)
  100 +#end
  101 +#if($column.pk)
  102 +#elseif($column.list && $column.htmlType == "datetime")
  103 + <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
  104 + <template #default="scope">
  105 + <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
  106 + </template>
  107 + </el-table-column>
  108 +#elseif($column.list && "" != $column.dictType)
  109 + <el-table-column label="${comment}" align="center" prop="${javaField}">
  110 + <template #default="scope">
  111 +#if($column.htmlType == "checkbox")
  112 + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
  113 +#else
  114 + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
  115 +#end
  116 + </template>
  117 + </el-table-column>
  118 +#elseif($column.list && "" != $javaField)
  119 +#if(${foreach.index} == 1)
  120 + <el-table-column label="${comment}" prop="${javaField}" />
  121 +#else
  122 + <el-table-column label="${comment}" align="center" prop="${javaField}" />
  123 +#end
  124 +#end
  125 +#end
  126 + <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  127 + <template #default="scope">
  128 + <el-button
  129 + size="mini"
  130 + type="text"
  131 + icon="Edit"
  132 + @click="handleUpdate(scope.row)"
  133 + v-hasPermi="['${moduleName}:${businessName}:edit']"
  134 + >修改</el-button>
  135 + <el-button
  136 + size="mini"
  137 + type="text"
  138 + icon="Plus"
  139 + @click="handleAdd(scope.row)"
  140 + v-hasPermi="['${moduleName}:${businessName}:add']"
  141 + >新增</el-button>
  142 + <el-button
  143 + size="mini"
  144 + type="text"
  145 + icon="Delete"
  146 + @click="handleDelete(scope.row)"
  147 + v-hasPermi="['${moduleName}:${businessName}:remove']"
  148 + >删除</el-button>
  149 + </template>
  150 + </el-table-column>
  151 + </el-table>
  152 +
  153 + <!-- 添加或修改${functionName}对话框 -->
  154 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  155 + <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
  156 +#foreach($column in $columns)
  157 +#set($field=$column.javaField)
  158 +#if($column.insert && !$column.pk)
  159 +#if(($column.usableColumn) || (!$column.superColumn))
  160 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  161 +#if($parentheseIndex != -1)
  162 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  163 +#else
  164 +#set($comment=$column.columnComment)
  165 +#end
  166 +#set($dictType=$column.dictType)
  167 +#if("" != $treeParentCode && $column.javaField == $treeParentCode)
  168 + <el-form-item label="${comment}" prop="${treeParentCode}">
  169 + <tree-select
  170 + v-model:value="form.${treeParentCode}"
  171 + :options="${businessName}Options"
  172 + :objMap="{ value: '${treeCode}', label: '${treeName}', children: 'children' }"
  173 + placeholder="请选择${comment}"
  174 + />
  175 + </el-form-item>
  176 +#elseif($column.htmlType == "input")
  177 + <el-form-item label="${comment}" prop="${field}">
  178 + <el-input v-model="form.${field}" placeholder="请输入${comment}" />
  179 + </el-form-item>
  180 +#elseif($column.htmlType == "imageUpload")
  181 + <el-form-item label="${comment}">
  182 + <imageUpload v-model="form.${field}"/>
  183 + </el-form-item>
  184 +#elseif($column.htmlType == "fileUpload")
  185 + <el-form-item label="${comment}">
  186 + <fileUpload v-model="form.${field}"/>
  187 + </el-form-item>
  188 +#elseif($column.htmlType == "editor")
  189 + <el-form-item label="${comment}">
  190 + <editor v-model="form.${field}" :min-height="192"/>
  191 + </el-form-item>
  192 +#elseif($column.htmlType == "select" && "" != $dictType)
  193 + <el-form-item label="${comment}" prop="${field}">
  194 + <el-select v-model="form.${field}" placeholder="请选择${comment}">
  195 + <el-option
  196 + v-for="dict in ${dictType}"
  197 + :key="dict.value"
  198 + :label="dict.label"
  199 + #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end
  200 +
  201 + ></el-option>
  202 + </el-select>
  203 + </el-form-item>
  204 +#elseif($column.htmlType == "select" && $dictType)
  205 + <el-form-item label="${comment}" prop="${field}">
  206 + <el-select v-model="form.${field}" placeholder="请选择${comment}">
  207 + <el-option label="请选择字典生成" value="" />
  208 + </el-select>
  209 + </el-form-item>
  210 +#elseif($column.htmlType == "checkbox" && "" != $dictType)
  211 + <el-form-item label="${comment}">
  212 + <el-checkbox-group v-model="form.${field}">
  213 + <el-checkbox
  214 + v-for="dict in ${dictType}"
  215 + :key="dict.value"
  216 + :label="dict.value">
  217 + {{dict.label}}
  218 + </el-checkbox>
  219 + </el-checkbox-group>
  220 + </el-form-item>
  221 +#elseif($column.htmlType == "checkbox" && $dictType)
  222 + <el-form-item label="${comment}">
  223 + <el-checkbox-group v-model="form.${field}">
  224 + <el-checkbox>请选择字典生成</el-checkbox>
  225 + </el-checkbox-group>
  226 + </el-form-item>
  227 +#elseif($column.htmlType == "radio" && "" != $dictType)
  228 + <el-form-item label="${comment}">
  229 + <el-radio-group v-model="form.${field}">
  230 + <el-radio
  231 + v-for="dict in ${dictType}"
  232 + :key="dict.value"
  233 + #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end
  234 +
  235 + >{{dict.label}}</el-radio>
  236 + </el-radio-group>
  237 + </el-form-item>
  238 +#elseif($column.htmlType == "radio" && $dictType)
  239 + <el-form-item label="${comment}">
  240 + <el-radio-group v-model="form.${field}">
  241 + <el-radio label="1">请选择字典生成</el-radio>
  242 + </el-radio-group>
  243 + </el-form-item>
  244 +#elseif($column.htmlType == "datetime")
  245 + <el-form-item label="${comment}" prop="${field}">
  246 + <el-date-picker clearable size="small"
  247 + v-model="form.${field}"
  248 + type="date"
  249 + value-format="YYYY-MM-DD"
  250 + placeholder="选择${comment}">
  251 + </el-date-picker>
  252 + </el-form-item>
  253 +#elseif($column.htmlType == "textarea")
  254 + <el-form-item label="${comment}" prop="${field}">
  255 + <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
  256 + </el-form-item>
  257 +#end
  258 +#end
  259 +#end
  260 +#end
  261 + </el-form>
  262 + <template #footer>
  263 + <div class="dialog-footer">
  264 + <el-button type="primary" @click="submitForm">确 定</el-button>
  265 + <el-button @click="cancel">取 消</el-button>
  266 + </div>
  267 + </template>
  268 + </el-dialog>
  269 + </div>
  270 +</template>
  271 +
  272 +<script setup name="${BusinessName}">
  273 +import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
  274 +
  275 +const { proxy } = getCurrentInstance();
  276 +#if(${dicts} != '')
  277 +#set($dictsNoSymbol=$dicts.replace("'", ""))
  278 +const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
  279 +#end
  280 +
  281 +const ${businessName}List = ref([]);
  282 +const ${businessName}Options = ref([]);
  283 +const open = ref(false);
  284 +const loading = ref(true);
  285 +const showSearch = ref(true);
  286 +const title = ref("");
  287 +#foreach ($column in $columns)
  288 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  289 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  290 +const daterange${AttrName} = ref([]);
  291 +#end
  292 +#end
  293 +
  294 +const data = reactive({
  295 + form: {},
  296 + queryParams: {
  297 + #foreach ($column in $columns)
  298 +#if($column.query)
  299 + $column.javaField: null#if($foreach.count != $columns.size()),#end
  300 +#end
  301 +#end
  302 + },
  303 + rules: {
  304 + #foreach ($column in $columns)
  305 +#if($column.required)
  306 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  307 +#if($parentheseIndex != -1)
  308 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  309 +#else
  310 +#set($comment=$column.columnComment)
  311 +#end
  312 + $column.javaField: [
  313 + { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }
  314 + ]#if($foreach.count != $columns.size()),#end
  315 +#end
  316 +#end
  317 + }
  318 +});
  319 +
  320 +const { queryParams, form, rules } = toRefs(data);
  321 +
  322 +/** 查询${functionName}列表 */
  323 +function getList() {
  324 + loading.value = true;
  325 +#foreach ($column in $columns)
  326 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  327 + queryParams.value.params = {};
  328 +#break
  329 +#end
  330 +#end
  331 +#foreach ($column in $columns)
  332 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  333 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  334 + if (null != daterange${AttrName} && '' != daterange${AttrName}) {
  335 + queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
  336 + queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
  337 + }
  338 +#end
  339 +#end
  340 + list${BusinessName}(queryParams.value).then(response => {
  341 + ${businessName}List.value = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}");
  342 + loading.value = false;
  343 + });
  344 +}
  345 +
  346 +/** 查询${functionName}下拉树结构 */
  347 +async function getTreeselect() {
  348 + await list${BusinessName}().then(response => {
  349 + ${businessName}Options.value = [];
  350 + const data = { ${treeCode}: 0, ${treeName}: '顶级节点', children: [] };
  351 + data.children = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}");
  352 + ${businessName}Options.value.push(data);
  353 + });
  354 +}
  355 +
  356 +// 取消按钮
  357 +function cancel() {
  358 + open.value = false;
  359 + reset();
  360 +}
  361 +
  362 +// 表单重置
  363 +function reset() {
  364 + form.value = {
  365 +#foreach ($column in $columns)
  366 +#if($column.htmlType == "radio")
  367 + $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else"0"#end#if($foreach.count != $columns.size()),#end
  368 +
  369 +#elseif($column.htmlType == "checkbox")
  370 + $column.javaField: []#if($foreach.count != $columns.size()),#end
  371 +#else
  372 + $column.javaField: null#if($foreach.count != $columns.size()),#end
  373 +#end
  374 +#end
  375 + };
  376 + proxy.resetForm("${businessName}Ref");
  377 +}
  378 +
  379 +/** 搜索按钮操作 */
  380 +function handleQuery() {
  381 + getList();
  382 +}
  383 +
  384 +/** 重置按钮操作 */
  385 +function resetQuery() {
  386 +#foreach ($column in $columns)
  387 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  388 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  389 + daterange${AttrName}.value = [];
  390 +#end
  391 +#end
  392 + proxy.resetForm("queryRef");
  393 + handleQuery();
  394 +}
  395 +
  396 +/** 新增按钮操作 */
  397 +async function handleAdd(row) {
  398 + reset();
  399 + await getTreeselect();
  400 + if (row != null && row.${treeCode}) {
  401 + form.value.${treeParentCode} = row.${treeCode};
  402 + } else {
  403 + form.value.${treeParentCode} = 0;
  404 + }
  405 + open.value = true;
  406 + title.value = "添加${functionName}";
  407 +}
  408 +
  409 +/** 修改按钮操作 */
  410 +async function handleUpdate(row) {
  411 + reset();
  412 + await getTreeselect();
  413 + if (row != null) {
  414 + form.value.${treeParentCode} = row.${treeCode};
  415 + }
  416 + get${BusinessName}(row.${pkColumn.javaField}).then(response => {
  417 + form.value = response.data;
  418 +#foreach ($column in $columns)
  419 +#if($column.htmlType == "checkbox")
  420 + form.value.$column.javaField = form.value.${column.javaField}.split(",");
  421 +#end
  422 +#end
  423 + open.value = true;
  424 + title.value = "修改${functionName}";
  425 + });
  426 +}
  427 +
  428 +/** 提交按钮 */
  429 +function submitForm() {
  430 + proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
  431 + if (valid) {
  432 +#foreach ($column in $columns)
  433 +#if($column.htmlType == "checkbox")
  434 + form.value.$column.javaField = form.value.${column.javaField}.join(",");
  435 +#end
  436 +#end
  437 + if (form.value.${pkColumn.javaField} != null) {
  438 + update${BusinessName}(form.value).then(response => {
  439 + proxy.#[[$modal]]#.msgSuccess("修改成功");
  440 + open.value = false;
  441 + getList();
  442 + });
  443 + } else {
  444 + add${BusinessName}(form.value).then(response => {
  445 + proxy.#[[$modal]]#.msgSuccess("新增成功");
  446 + open.value = false;
  447 + getList();
  448 + });
  449 + }
  450 + }
  451 + });
  452 +}
  453 +
  454 +/** 删除按钮操作 */
  455 +function handleDelete(row) {
  456 + proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项?').then(function() {
  457 + return del${BusinessName}(row.${pkColumn.javaField});
  458 + }).then(() => {
  459 + getList();
  460 + proxy.#[[$modal]]#.msgSuccess("删除成功");
  461 + }).catch(() => {});
  462 +}
  463 +
  464 +getList();
  465 +</script>
  1 +<template>
  2 + <div class="app-container">
  3 + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4 +#foreach($column in $columns)
  5 +#if($column.query)
  6 +#set($dictType=$column.dictType)
  7 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  8 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  9 +#if($parentheseIndex != -1)
  10 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  11 +#else
  12 +#set($comment=$column.columnComment)
  13 +#end
  14 +#if($column.htmlType == "input")
  15 + <el-form-item label="${comment}" prop="${column.javaField}">
  16 + <el-input
  17 + v-model="queryParams.${column.javaField}"
  18 + placeholder="请输入${comment}"
  19 + clearable
  20 + size="small"
  21 + @keyup.enter="handleQuery"
  22 + />
  23 + </el-form-item>
  24 +#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType)
  25 + <el-form-item label="${comment}" prop="${column.javaField}">
  26 + <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  27 + <el-option
  28 + v-for="dict in ${dictType}"
  29 + :key="dict.value"
  30 + :label="dict.label"
  31 + :value="dict.value"
  32 + />
  33 + </el-select>
  34 + </el-form-item>
  35 +#elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType)
  36 + <el-form-item label="${comment}" prop="${column.javaField}">
  37 + <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${comment}" clearable size="small">
  38 + <el-option label="请选择字典生成" value="" />
  39 + </el-select>
  40 + </el-form-item>
  41 +#elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN")
  42 + <el-form-item label="${comment}" prop="${column.javaField}">
  43 + <el-date-picker clearable size="small"
  44 + v-model="queryParams.${column.javaField}"
  45 + type="date"
  46 + value-format="YYYY-MM-DD"
  47 + placeholder="选择${comment}">
  48 + </el-date-picker>
  49 + </el-form-item>
  50 +#elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  51 + <el-form-item label="${comment}">
  52 + <el-date-picker
  53 + v-model="daterange${AttrName}"
  54 + size="small"
  55 + style="width: 240px"
  56 + value-format="YYYY-MM-DD"
  57 + type="daterange"
  58 + range-separator="-"
  59 + start-placeholder="开始日期"
  60 + end-placeholder="结束日期"
  61 + ></el-date-picker>
  62 + </el-form-item>
  63 +#end
  64 +#end
  65 +#end
  66 + <el-form-item>
  67 + <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
  68 + <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
  69 + </el-form-item>
  70 + </el-form>
  71 +
  72 + <el-row :gutter="10" class="mb8">
  73 + <el-col :span="1.5">
  74 + <el-button
  75 + type="primary"
  76 + plain
  77 + icon="Plus"
  78 + size="mini"
  79 + @click="handleAdd"
  80 + v-hasPermi="['${moduleName}:${businessName}:add']"
  81 + >新增</el-button>
  82 + </el-col>
  83 + <el-col :span="1.5">
  84 + <el-button
  85 + type="success"
  86 + plain
  87 + icon="Edit"
  88 + size="mini"
  89 + :disabled="single"
  90 + @click="handleUpdate"
  91 + v-hasPermi="['${moduleName}:${businessName}:edit']"
  92 + >修改</el-button>
  93 + </el-col>
  94 + <el-col :span="1.5">
  95 + <el-button
  96 + type="danger"
  97 + plain
  98 + icon="Delete"
  99 + size="mini"
  100 + :disabled="multiple"
  101 + @click="handleDelete"
  102 + v-hasPermi="['${moduleName}:${businessName}:remove']"
  103 + >删除</el-button>
  104 + </el-col>
  105 + <el-col :span="1.5">
  106 + <el-button
  107 + type="warning"
  108 + plain
  109 + icon="Download"
  110 + size="mini"
  111 + @click="handleExport"
  112 + v-hasPermi="['${moduleName}:${businessName}:export']"
  113 + >导出</el-button>
  114 + </el-col>
  115 + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  116 + </el-row>
  117 +
  118 + <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
  119 + <el-table-column type="selection" width="55" align="center" />
  120 +#foreach($column in $columns)
  121 +#set($javaField=$column.javaField)
  122 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  123 +#if($parentheseIndex != -1)
  124 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  125 +#else
  126 +#set($comment=$column.columnComment)
  127 +#end
  128 +#if($column.pk)
  129 + <el-table-column label="${comment}" align="center" prop="${javaField}" />
  130 +#elseif($column.list && $column.htmlType == "datetime")
  131 + <el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
  132 + <template #default="scope">
  133 + <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
  134 + </template>
  135 + </el-table-column>
  136 +#elseif($column.list && "" != $column.dictType)
  137 + <el-table-column label="${comment}" align="center" prop="${javaField}">
  138 + <template #default="scope">
  139 +#if($column.htmlType == "checkbox")
  140 + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
  141 +#else
  142 + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/>
  143 +#end
  144 + </template>
  145 + </el-table-column>
  146 +#elseif($column.list && "" != $javaField)
  147 + <el-table-column label="${comment}" align="center" prop="${javaField}" />
  148 +#end
  149 +#end
  150 + <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  151 + <template #default="scope">
  152 + <el-button
  153 + size="mini"
  154 + type="text"
  155 + icon="Edit"
  156 + @click="handleUpdate(scope.row)"
  157 + v-hasPermi="['${moduleName}:${businessName}:edit']"
  158 + >修改</el-button>
  159 + <el-button
  160 + size="mini"
  161 + type="text"
  162 + icon="Delete"
  163 + @click="handleDelete(scope.row)"
  164 + v-hasPermi="['${moduleName}:${businessName}:remove']"
  165 + >删除</el-button>
  166 + </template>
  167 + </el-table-column>
  168 + </el-table>
  169 +
  170 + <pagination
  171 + v-show="total>0"
  172 + :total="total"
  173 + v-model:p:page="queryParams.pageNum"
  174 + v-model:p:limit="queryParams.pageSize"
  175 + @pagination="getList"
  176 + />
  177 +
  178 + <!-- 添加或修改${functionName}对话框 -->
  179 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  180 + <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px">
  181 +#foreach($column in $columns)
  182 +#set($field=$column.javaField)
  183 +#if($column.insert && !$column.pk)
  184 +#if(($column.usableColumn) || (!$column.superColumn))
  185 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  186 +#if($parentheseIndex != -1)
  187 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  188 +#else
  189 +#set($comment=$column.columnComment)
  190 +#end
  191 +#set($dictType=$column.dictType)
  192 +#if($column.htmlType == "input")
  193 + <el-form-item label="${comment}" prop="${field}">
  194 + <el-input v-model="form.${field}" placeholder="请输入${comment}" />
  195 + </el-form-item>
  196 +#elseif($column.htmlType == "imageUpload")
  197 + <el-form-item label="${comment}">
  198 + <imageUpload v-model="form.${field}"/>
  199 + </el-form-item>
  200 +#elseif($column.htmlType == "fileUpload")
  201 + <el-form-item label="${comment}">
  202 + <fileUpload v-model="form.${field}"/>
  203 + </el-form-item>
  204 +#elseif($column.htmlType == "editor")
  205 + <el-form-item label="${comment}">
  206 + <editor v-model="form.${field}" :min-height="192"/>
  207 + </el-form-item>
  208 +#elseif($column.htmlType == "select" && "" != $dictType)
  209 + <el-form-item label="${comment}" prop="${field}">
  210 + <el-select v-model="form.${field}" placeholder="请选择${comment}">
  211 + <el-option
  212 + v-for="dict in ${dictType}"
  213 + :key="dict.value"
  214 + :label="dict.label"
  215 + #if($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end
  216 +
  217 + ></el-option>
  218 + </el-select>
  219 + </el-form-item>
  220 +#elseif($column.htmlType == "select" && $dictType)
  221 + <el-form-item label="${comment}" prop="${field}">
  222 + <el-select v-model="form.${field}" placeholder="请选择${comment}">
  223 + <el-option label="请选择字典生成" value="" />
  224 + </el-select>
  225 + </el-form-item>
  226 +#elseif($column.htmlType == "checkbox" && "" != $dictType)
  227 + <el-form-item label="${comment}">
  228 + <el-checkbox-group v-model="form.${field}">
  229 + <el-checkbox
  230 + v-for="dict in ${dictType}"
  231 + :key="dict.value"
  232 + :label="dict.value">
  233 + {{dict.label}}
  234 + </el-checkbox>
  235 + </el-checkbox-group>
  236 + </el-form-item>
  237 +#elseif($column.htmlType == "checkbox" && $dictType)
  238 + <el-form-item label="${comment}">
  239 + <el-checkbox-group v-model="form.${field}">
  240 + <el-checkbox>请选择字典生成</el-checkbox>
  241 + </el-checkbox-group>
  242 + </el-form-item>
  243 +#elseif($column.htmlType == "radio" && "" != $dictType)
  244 + <el-form-item label="${comment}">
  245 + <el-radio-group v-model="form.${field}">
  246 + <el-radio
  247 + v-for="dict in ${dictType}"
  248 + :key="dict.value"
  249 + #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end
  250 +
  251 + >{{dict.label}}</el-radio>
  252 + </el-radio-group>
  253 + </el-form-item>
  254 +#elseif($column.htmlType == "radio" && $dictType)
  255 + <el-form-item label="${comment}">
  256 + <el-radio-group v-model="form.${field}">
  257 + <el-radio label="1">请选择字典生成</el-radio>
  258 + </el-radio-group>
  259 + </el-form-item>
  260 +#elseif($column.htmlType == "datetime")
  261 + <el-form-item label="${comment}" prop="${field}">
  262 + <el-date-picker clearable size="small"
  263 + v-model="form.${field}"
  264 + type="date"
  265 + value-format="YYYY-MM-DD"
  266 + placeholder="选择${comment}">
  267 + </el-date-picker>
  268 + </el-form-item>
  269 +#elseif($column.htmlType == "textarea")
  270 + <el-form-item label="${comment}" prop="${field}">
  271 + <el-input v-model="form.${field}" type="textarea" placeholder="请输入内容" />
  272 + </el-form-item>
  273 +#end
  274 +#end
  275 +#end
  276 +#end
  277 +#if($table.sub)
  278 + <el-divider content-position="center">${subTable.functionName}信息</el-divider>
  279 + <el-row :gutter="10" class="mb8">
  280 + <el-col :span="1.5">
  281 + <el-button type="primary" icon="Plus" size="mini" @click="handleAdd${subClassName}">添加</el-button>
  282 + </el-col>
  283 + <el-col :span="1.5">
  284 + <el-button type="danger" icon="Delete" size="mini" @click="handleDelete${subClassName}">删除</el-button>
  285 + </el-col>
  286 + </el-row>
  287 + <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
  288 + <el-table-column type="selection" width="50" align="center" />
  289 + <el-table-column label="序号" align="center" prop="index" width="50"/>
  290 +#foreach($column in $subTable.columns)
  291 +#set($javaField=$column.javaField)
  292 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  293 +#if($parentheseIndex != -1)
  294 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  295 +#else
  296 +#set($comment=$column.columnComment)
  297 +#end
  298 +#if($column.pk || $javaField == ${subTableFkclassName})
  299 +#elseif($column.list && "" != $javaField)
  300 + <el-table-column label="$comment" prop="${javaField}">
  301 + <template #default="scope">
  302 + <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
  303 + </template>
  304 + </el-table-column>
  305 +#end
  306 +#end
  307 + </el-table>
  308 +#end
  309 + </el-form>
  310 + <template #footer>
  311 + <div class="dialog-footer">
  312 + <el-button type="primary" @click="submitForm">确 定</el-button>
  313 + <el-button @click="cancel">取 消</el-button>
  314 + </div>
  315 + </template>
  316 + </el-dialog>
  317 + </div>
  318 +</template>
  319 +
  320 +<script setup name="${BusinessName}">
  321 +import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${businessName}";
  322 +
  323 +const { proxy } = getCurrentInstance();
  324 +#if(${dicts} != '')
  325 +#set($dictsNoSymbol=$dicts.replace("'", ""))
  326 +const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
  327 +#end
  328 +
  329 +const ${businessName}List = ref([]);
  330 +#if($table.sub)
  331 +const ${subclassName}List = ref([]);
  332 +#end
  333 +const open = ref(false);
  334 +const loading = ref(true);
  335 +const showSearch = ref(true);
  336 +const ids = ref([]);
  337 +#if($table.sub)
  338 +const checked${subClassName} = ref([]);
  339 +#end
  340 +const single = ref(true);
  341 +const multiple = ref(true);
  342 +const total = ref(0);
  343 +const title = ref("");
  344 +#foreach ($column in $columns)
  345 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  346 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  347 +const daterange${AttrName} = ref([]);
  348 +#end
  349 +#end
  350 +
  351 +const data = reactive({
  352 + form: {},
  353 + queryParams: {
  354 + pageNum: 1,
  355 + pageSize: 10,
  356 + #foreach ($column in $columns)
  357 +#if($column.query)
  358 + $column.javaField: null#if($foreach.count != $columns.size()),#end
  359 +#end
  360 +#end
  361 + },
  362 + rules: {
  363 + #foreach ($column in $columns)
  364 +#if($column.required)
  365 +#set($parentheseIndex=$column.columnComment.indexOf("("))
  366 +#if($parentheseIndex != -1)
  367 +#set($comment=$column.columnComment.substring(0, $parentheseIndex))
  368 +#else
  369 +#set($comment=$column.columnComment)
  370 +#end
  371 + $column.javaField: [
  372 + { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }
  373 + ]#if($foreach.count != $columns.size()),#end
  374 +#end
  375 +#end
  376 + }
  377 +});
  378 +
  379 +const { queryParams, form, rules } = toRefs(data);
  380 +
  381 +/** 查询${functionName}列表 */
  382 +function getList() {
  383 + loading.value = true;
  384 +#foreach ($column in $columns)
  385 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  386 + queryParams.value.params = {};
  387 +#break
  388 +#end
  389 +#end
  390 +#foreach ($column in $columns)
  391 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  392 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  393 + if (null != daterange${AttrName} && '' != daterange${AttrName}) {
  394 + queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0];
  395 + queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1];
  396 + }
  397 +#end
  398 +#end
  399 + list${BusinessName}(queryParams.value).then(response => {
  400 + ${businessName}List.value = response.rows;
  401 + total.value = response.total;
  402 + loading.value = false;
  403 + });
  404 +}
  405 +
  406 +// 取消按钮
  407 +function cancel() {
  408 + open.value = false;
  409 + reset();
  410 +}
  411 +
  412 +// 表单重置
  413 +function reset() {
  414 + form.value = {
  415 +#foreach ($column in $columns)
  416 +#if($column.htmlType == "radio")
  417 + $column.javaField: #if($column.javaType == "Integer" || $column.javaType == "Long")0#else"0"#end#if($foreach.count != $columns.size()),#end
  418 +#elseif($column.htmlType == "checkbox")
  419 + $column.javaField: []#if($foreach.count != $columns.size()),#end
  420 +#else
  421 + $column.javaField: null#if($foreach.count != $columns.size()),#end
  422 +#end
  423 +#end
  424 + };
  425 +#if($table.sub)
  426 + ${subclassName}List.value = [];
  427 +#end
  428 + proxy.resetForm("${businessName}Ref");
  429 +}
  430 +
  431 +/** 搜索按钮操作 */
  432 +function handleQuery() {
  433 + queryParams.value.pageNum = 1;
  434 + getList();
  435 +}
  436 +
  437 +/** 重置按钮操作 */
  438 +function resetQuery() {
  439 +#foreach ($column in $columns)
  440 +#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
  441 +#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  442 + daterange${AttrName}.value = [];
  443 +#end
  444 +#end
  445 + proxy.resetForm("queryRef");
  446 + handleQuery();
  447 +}
  448 +
  449 +// 多选框选中数据
  450 +function handleSelectionChange(selection) {
  451 + ids.value = selection.map(item => item.${pkColumn.javaField});
  452 + single.value = selection.length != 1;
  453 + multiple.value = !selection.length;
  454 +}
  455 +
  456 +/** 新增按钮操作 */
  457 +function handleAdd() {
  458 + reset();
  459 + open.value = true;
  460 + title.value = "添加${functionName}";
  461 +}
  462 +
  463 +/** 修改按钮操作 */
  464 +function handleUpdate(row) {
  465 + reset();
  466 + const ${pkColumn.javaField} = row.${pkColumn.javaField} || ids.value
  467 + get${BusinessName}(${pkColumn.javaField}).then(response => {
  468 + form.value = response.data;
  469 +#foreach ($column in $columns)
  470 +#if($column.htmlType == "checkbox")
  471 + form.value.$column.javaField = form.value.${column.javaField}.split(",");
  472 +#end
  473 +#end
  474 +#if($table.sub)
  475 + ${subclassName}List.value = response.data.${subclassName}List;
  476 +#end
  477 + open.value = true;
  478 + title.value = "修改${functionName}";
  479 + });
  480 +}
  481 +
  482 +/** 提交按钮 */
  483 +function submitForm() {
  484 + proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
  485 + if (valid) {
  486 +#foreach ($column in $columns)
  487 +#if($column.htmlType == "checkbox")
  488 + form.value.$column.javaField = form.value.${column.javaField}.join(",");
  489 +#end
  490 +#end
  491 +#if($table.sub)
  492 + form.value.${subclassName}List = ${subclassName}List.value;
  493 +#end
  494 + if (form.value.${pkColumn.javaField} != null) {
  495 + update${BusinessName}(form.value).then(response => {
  496 + proxy.#[[$modal]]#.msgSuccess("修改成功");
  497 + open.value = false;
  498 + getList();
  499 + });
  500 + } else {
  501 + add${BusinessName}(form.value).then(response => {
  502 + proxy.#[[$modal]]#.msgSuccess("新增成功");
  503 + open.value = false;
  504 + getList();
  505 + });
  506 + }
  507 + }
  508 + });
  509 +}
  510 +
  511 +/** 删除按钮操作 */
  512 +function handleDelete(row) {
  513 + const ${pkColumn.javaField}s = row.${pkColumn.javaField} || ids.value;
  514 + proxy.#[[$modal]]#.confirm('是否确认删除${functionName}编号为"' + ${pkColumn.javaField}s + '"的数据项?').then(function() {
  515 + return del${BusinessName}(${pkColumn.javaField}s);
  516 + }).then(() => {
  517 + getList();
  518 + proxy.#[[$modal]]#.msgSuccess("删除成功");
  519 + }).catch(() => {});
  520 +}
  521 +
  522 +#if($table.sub)
  523 +/** ${subTable.functionName}序号 */
  524 +function row${subClassName}Index({ row, rowIndex }) {
  525 + row.index = rowIndex + 1;
  526 +}
  527 +
  528 +/** ${subTable.functionName}添加按钮操作 */
  529 +function handleAdd${subClassName}() {
  530 + let obj = {};
  531 +#foreach($column in $subTable.columns)
  532 +#if($column.pk || $column.javaField == ${subTableFkclassName})
  533 +#elseif($column.list && "" != $javaField)
  534 + obj.$column.javaField = "";
  535 +#end
  536 +#end
  537 + ${subclassName}List.value.push(obj);
  538 +}
  539 +
  540 +/** ${subTable.functionName}删除按钮操作 */
  541 +function handleDelete${subClassName}() {
  542 + if (checked${subClassName}.value.length == 0) {
  543 + proxy.#[[$modal]]#.msgError("请先选择要删除的${subTable.functionName}数据");
  544 + } else {
  545 + const ${subclassName}s = ${subclassName}List.value;
  546 + const checked${subClassName}s = checked${subClassName}.value;
  547 + ${subclassName}List.value = ${subclassName}s.filter(function(item) {
  548 + return checked${subClassName}s.indexOf(item.index) == -1
  549 + });
  550 + }
  551 +}
  552 +
  553 +/** 复选框选中数据 */
  554 +function handle${subClassName}SelectionChange(selection) {
  555 + checked${subClassName}.value = selection.map(item => item.index)
  556 +}
  557 +
  558 +#end
  559 +/** 导出按钮操作 */
  560 +function handleExport() {
  561 + proxy.download('${moduleName}/${businessName}/export', {
  562 + ...queryParams.value
  563 + }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
  564 +}
  565 +
  566 +getList();
  567 +</script>
  1 +如果使用的是RuoYi-Vue3前端,那么需要覆盖一下此目录的模板index.vue.vm、index-tree.vue.vm文件到上级vue目录。