From 5bdffdb36828822b6090a559b5b47b45d559f0d8 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期四, 15 八月 2024 14:10:14 +0800 Subject: [PATCH] update 优化 代码生成器 自动适配oss翻译 --- ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm | 426 +++++++++++++++++++++++++++-------------------------- 1 files changed, 217 insertions(+), 209 deletions(-) diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm index 8f4113e..caf3472 100644 --- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm +++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm @@ -1,6 +1,9 @@ <template> - <div class="app-container"> - <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> + <div class="p-2"> + <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> + <div v-show="showSearch" class="mb-[10px]"> + <el-card shadow="hover"> + <el-form ref="queryFormRef" :model="queryParams" :inline="true"> #foreach($column in $columns) #if($column.query) #set($dictType=$column.dictType) @@ -12,90 +15,74 @@ #set($comment=$column.columnComment) #end #if($column.htmlType == "input" || $column.htmlType == "textarea") - <el-form-item label="${comment}" prop="${column.javaField}"> - <el-input - v-model="queryParams.${column.javaField}" - placeholder="璇疯緭鍏�${comment}" - clearable - @keyup.enter="handleQuery" - /> - </el-form-item> + <el-form-item label="${comment}" prop="${column.javaField}"> + <el-input v-model="queryParams.${column.javaField}" placeholder="璇疯緭鍏�${comment}" clearable @keyup.enter="handleQuery" /> + </el-form-item> #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && "" != $dictType) - <el-form-item label="${comment}" prop="${column.javaField}"> - <el-select v-model="queryParams.${column.javaField}" placeholder="璇烽�夋嫨${comment}" clearable> - <el-option - v-for="dict in ${dictType}" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> + <el-form-item label="${comment}" prop="${column.javaField}"> + <el-select v-model="queryParams.${column.javaField}" placeholder="璇烽�夋嫨${comment}" clearable> + <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/> + </el-select> + </el-form-item> #elseif(($column.htmlType == "select" || $column.htmlType == "radio") && $dictType) - <el-form-item label="${comment}" prop="${column.javaField}"> - <el-select v-model="queryParams.${column.javaField}" placeholder="璇烽�夋嫨${comment}" clearable> - <el-option label="璇烽�夋嫨瀛楀吀鐢熸垚" value="" /> - </el-select> - </el-form-item> + <el-form-item label="${comment}" prop="${column.javaField}"> + <el-select v-model="queryParams.${column.javaField}" placeholder="璇烽�夋嫨${comment}" clearable> + <el-option label="璇烽�夋嫨瀛楀吀鐢熸垚" value="" /> + </el-select> + </el-form-item> #elseif($column.htmlType == "datetime" && $column.queryType != "BETWEEN") - <el-form-item label="${comment}" prop="${column.javaField}"> - <el-date-picker clearable - v-model="queryParams.${column.javaField}" - type="date" - value-format="YYYY-MM-DD" - placeholder="閫夋嫨${comment}"> - </el-date-picker> - </el-form-item> + <el-form-item label="${comment}" prop="${column.javaField}"> + <el-date-picker clearable + v-model="queryParams.${column.javaField}" + type="date" + value-format="YYYY-MM-DD" + placeholder="閫夋嫨${comment}" + /> + </el-form-item> #elseif($column.htmlType == "datetime" && $column.queryType == "BETWEEN") - <el-form-item label="${comment}" style="width: 308px"> - <el-date-picker - v-model="daterange${AttrName}" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" - ></el-date-picker> - </el-form-item> + <el-form-item label="${comment}" style="width: 308px"> + <el-date-picker + v-model="dateRange${AttrName}" + value-format="YYYY-MM-DD HH:mm:ss" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" + /> + </el-form-item> #end #end #end - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </el-card> + </div> + </transition> - <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="info" - plain - icon="Sort" - @click="toggleExpandAll" - >灞曞紑/鎶樺彔</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> - - <el-table - v-if="refreshTable" - v-loading="loading" - :data="${businessName}List" - row-key="${treeCode}" - :default-expand-all="isExpandAll" - :tree-props="{children: 'children', hasChildren: 'hasChildren'}" - > + <el-card shadow="never"> + <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="info" plain icon="Sort" @click="handleToggleExpandAll">灞曞紑/鎶樺彔</el-button> + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + </template> + <el-table + ref="${businessName}TableRef" + v-loading="loading" + :data="${businessName}List" + row-key="${treeCode}" + :default-expand-all="isExpandAll" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + > #foreach($column in $columns) #set($javaField=$column.javaField) #set($parentheseIndex=$column.columnComment.indexOf("锛�")) @@ -106,50 +93,56 @@ #end #if($column.pk) #elseif($column.list && $column.htmlType == "datetime") - <el-table-column label="${comment}" align="center" prop="${javaField}" width="180"> - <template #default="scope"> - <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span> - </template> - </el-table-column> -#elseif($column.list && $column.htmlType == "imageUpload") - <el-table-column label="${comment}" align="center" prop="${javaField}" width="100"> + <el-table-column label="${comment}" align="center" prop="${javaField}" width="180"> <template #default="scope"> - <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/> + <span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span> </template> - </el-table-column> + </el-table-column> +#elseif($column.list && $column.htmlType == "imageUpload") + <el-table-column label="${comment}" align="center" prop="${javaField}Url" width="100"> + <template #default="scope"> + <image-preview :src="scope.row.${javaField}Url" :width="50" :height="50"/> + </template> + </el-table-column> #elseif($column.list && $column.dictType && "" != $column.dictType) - <el-table-column label="${comment}" align="center" prop="${javaField}"> - <template #default="scope"> + <el-table-column label="${comment}" align="center" prop="${javaField}"> + <template #default="scope"> #if($column.htmlType == "checkbox") - <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/> + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/> #else - <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/> + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/> #end - </template> - </el-table-column> + </template> + </el-table-column> #elseif($column.list && "" != $javaField) #if(${foreach.index} == 1) - <el-table-column label="${comment}" prop="${javaField}" /> + <el-table-column label="${comment}" prop="${javaField}" /> #else - <el-table-column label="${comment}" align="center" prop="${javaField}" /> + <el-table-column label="${comment}" align="center" prop="${javaField}" /> #end #end #end - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']">淇敼</el-button> - <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']">鏂板</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">鍒犻櫎</el-button> + <el-tooltip content="淇敼" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']" /> + </el-tooltip> + <el-tooltip content="鏂板" placement="top"> + <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']" /> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']" /> + </el-tooltip> </template> - </el-table-column> - </el-table> - + </el-table-column> + </el-table> + </el-card> <!-- 娣诲姞鎴栦慨鏀�${functionName}瀵硅瘽妗� --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="${businessName}Ref" :model="form" :rules="rules" label-width="80px"> + <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> + <el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="80px"> #foreach($column in $columns) #set($field=$column.javaField) -#if($column.insert && !$column.pk) +#if(($column.insert || $column.edit) && !$column.pk) #set($parentheseIndex=$column.columnComment.indexOf("锛�")) #if($parentheseIndex != -1) #set($comment=$column.columnComment.substring(0, $parentheseIndex)) @@ -229,9 +222,9 @@ v-for="dict in ${dictType}" :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long") - :label="parseInt(dict.value)" + :value="parseInt(dict.value)" #else - :label="dict.value" + :value="dict.value" #end >{{dict.label}}</el-radio> </el-radio-group> @@ -239,7 +232,7 @@ #elseif($column.htmlType == "radio" && $dictType) <el-form-item label="${comment}" prop="${field}"> <el-radio-group v-model="form.${field}"> - <el-radio label="1">璇烽�夋嫨瀛楀吀鐢熸垚</el-radio> + <el-radio value="1">璇烽�夋嫨瀛楀吀鐢熸垚</el-radio> </el-radio-group> </el-form-item> #elseif($column.htmlType == "datetime") @@ -248,8 +241,8 @@ v-model="form.${field}" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" - placeholder="閫夋嫨${comment}"> - </el-date-picker> + placeholder="閫夋嫨${comment}" + /> </el-form-item> #elseif($column.htmlType == "textarea") <el-form-item label="${comment}" prop="${field}"> @@ -261,7 +254,7 @@ </el-form> <template #footer> <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button :loading="buttonLoading" type="primary" @click="submitForm">纭� 瀹�</el-button> <el-button @click="cancel">鍙� 娑�</el-button> </div> </template> @@ -269,39 +262,77 @@ </div> </template> -<script setup name="${BusinessName}"> +<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'; -const { proxy } = getCurrentInstance(); +type ${BusinessName}Option = { + ${treeCode}: number; + ${treeName}: string; + children?: ${BusinessName}Option[]; +} + +const { proxy } = getCurrentInstance() as ComponentInternalInstance;; + #if(${dicts} != '') #set($dictsNoSymbol=$dicts.replace("'", "")) -const { ${dictsNoSymbol} } = proxy.useDict(${dicts}); +const { ${dictsNoSymbol} } = toRefs<any>(proxy?.useDict(${dicts})); #end -const ${businessName}List = ref([]); -const ${businessName}Options = ref([]); -const open = ref(false); +const ${businessName}List = ref<${BusinessName}VO[]>([]); +const ${businessName}Options = ref<${BusinessName}Option[]>([]); const buttonLoading = ref(false); -const loading = ref(true); const showSearch = ref(true); -const title = ref(""); const isExpandAll = ref(true); -const refreshTable = ref(true); +const loading = ref(false); + +const queryFormRef = ref<ElFormInstance>(); +const ${businessName}FormRef = ref<ElFormInstance>(); +const ${businessName}TableRef = ref<ElTableInstance>() + +const dialog = reactive<DialogOption>({ + visible: false, + title: '' +}); + #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([]); +const dateRange${AttrName} = ref<[DateModelType, DateModelType]>(['', '']); #end #end -const data = reactive({ - form: {}, - queryParams: { +const initFormData: ${BusinessName}Form = { #foreach ($column in $columns) -#if($column.query) +#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: { +#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) @@ -325,7 +356,7 @@ const { queryParams, form, rules } = toRefs(data); /** 鏌ヨ${functionName}鍒楄〃 */ -function getList() { +const getList = async () => { loading.value = true; #foreach ($column in $columns) #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") @@ -336,69 +367,57 @@ #foreach ($column in $columns) #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) - if (null != daterange${AttrName} && '' != daterange${AttrName}) { - queryParams.value.params["begin${AttrName}"] = daterange${AttrName}.value[0]; - queryParams.value.params["end${AttrName}"] = daterange${AttrName}.value[1]; - } + proxy?.addDateRange(queryParams.value, dateRange${AttrName}.value, '${AttrName}'); #end #end - list${BusinessName}(queryParams.value).then(response => { - ${businessName}List.value = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}"); + const res = await list${BusinessName}(queryParams.value); + const data = proxy?.handleTree<${BusinessName}VO>(res.data, "${treeCode}", "${treeParentCode}"); + if (data) { + ${businessName}List.value = data; loading.value = false; - }); + } } /** 鏌ヨ${functionName}涓嬫媺鏍戠粨鏋� */ -function getTreeselect() { - list${BusinessName}().then(response => { - ${businessName}Options.value = []; - const data = { ${treeCode}: 0, ${treeName}: '椤剁骇鑺傜偣', children: [] }; - data.children = proxy.handleTree(response.data, "${treeCode}", "${treeParentCode}"); - ${businessName}Options.value.push(data); - }); +const getTreeselect = async () => { + const res = await list${BusinessName}(); + ${businessName}Options.value = []; + const data: ${BusinessName}Option = { ${treeCode}: 0, ${treeName}: '椤剁骇鑺傜偣', children: [] }; + data.children = proxy?.handleTree<${BusinessName}Option>(res.data, "${treeCode}", "${treeParentCode}"); + ${businessName}Options.value.push(data); } // 鍙栨秷鎸夐挳 -function cancel() { - open.value = false; +const cancel = () => { reset(); + dialog.visible = false; } // 琛ㄥ崟閲嶇疆 -function reset() { - form.value = { -#foreach ($column in $columns) -#if($column.insert || $column.edit) -#if($column.htmlType == "checkbox") - $column.javaField: []#if($foreach.count != $columns.size()),#end -#else - $column.javaField: null#if($foreach.count != $columns.size()),#end -#end -#end -#end - }; - proxy.resetForm("${businessName}Ref"); +const reset = () => { + form.value = {...initFormData} + ${businessName}FormRef.value?.resetFields(); } /** 鎼滅储鎸夐挳鎿嶄綔 */ -function handleQuery() { +const handleQuery = () => { getList(); } /** 閲嶇疆鎸夐挳鎿嶄綔 */ -function resetQuery() { +const resetQuery = () => { #foreach ($column in $columns) #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) - daterange${AttrName}.value = []; + dateRange${AttrName}.value = ['', '']; #end #end - proxy.resetForm("queryRef"); + queryFormRef.value?.resetFields(); handleQuery(); } /** 鏂板鎸夐挳鎿嶄綔 */ -function handleAdd(row) { +const handleAdd = (row?: ${BusinessName}VO) => { reset(); getTreeselect(); if (row != null && row.${treeCode}) { @@ -406,43 +425,45 @@ } else { form.value.${treeParentCode} = 0; } - open.value = true; - title.value = "娣诲姞${functionName}"; + dialog.visible = true; + dialog.title = "娣诲姞${functionName}"; } /** 灞曞紑/鎶樺彔鎿嶄綔 */ -function toggleExpandAll() { - refreshTable.value = false; +const handleToggleExpandAll = () => { isExpandAll.value = !isExpandAll.value; - nextTick(() => { - refreshTable.value = true; - }); + toggleExpandAll(${businessName}List.value, isExpandAll.value) +} + +/** 灞曞紑/鎶樺彔鎿嶄綔 */ +const toggleExpandAll = (data: ${BusinessName}VO[], status: boolean) => { + data.forEach((item) => { + ${businessName}TableRef.value?.toggleRowExpansion(item, status) + if (item.children && item.children.length > 0) toggleExpandAll(item.children, status) + }) } /** 淇敼鎸夐挳鎿嶄綔 */ -async function handleUpdate(row) { - loading.value = true; +const handleUpdate = async (row: ${BusinessName}VO) => { reset(); await getTreeselect(); if (row != null) { - form.value.${treeParentCode} = row.${treeCode}; + form.value.${treeParentCode} = row.${treeParentCode}; } - get${BusinessName}(row.${pkColumn.javaField}).then(response => { - loading.value = false; - form.value = response.data; + const res = await get${BusinessName}(row.${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(","); + #if($column.htmlType == "checkbox") + form.value.$column.javaField = form.value.${column.javaField}.split(","); + #end #end -#end - open.value = true; - title.value = "淇敼${functionName}"; - }); + dialog.visible = true; + dialog.title = "淇敼${functionName}"; } /** 鎻愪氦鎸夐挳 */ -function submitForm() { - proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => { +const submitForm = () => { + ${businessName}FormRef.value?.validate(async (valid: boolean) => { if (valid) { buttonLoading.value = true; #foreach ($column in $columns) @@ -450,41 +471,28 @@ form.value.$column.javaField = form.value.${column.javaField}.join(","); #end #end - if (form.value.${pkColumn.javaField} != null) { - update${BusinessName}(form.value).then(response => { - proxy.#[[$modal]]#.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }).finally(() => { - buttonLoading.value = false; - }); + if (form.value.${pkColumn.javaField}) { + await update${BusinessName}(form.value).finally(() => buttonLoading.value = false); } else { - add${BusinessName}(form.value).then(response => { - proxy.#[[$modal]]#.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }).finally(() => { - buttonLoading.value = false; - }); + await add${BusinessName}(form.value).finally(() => buttonLoading.value = false); } + proxy?.#[[$modal]]#.msgSuccess("鎿嶄綔鎴愬姛"); + dialog.visible = false; + getList(); } }); } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ -function handleDelete(row) { - proxy.#[[$modal]]#.confirm('鏄惁纭鍒犻櫎${functionName}缂栧彿涓�"' + row.${pkColumn.javaField} + '"鐨勬暟鎹」锛�').then(function() { - loading.value = true; - return del${BusinessName}(row.${pkColumn.javaField}); - }).then(() => { - loading.value = false; - getList(); - proxy.#[[$modal]]#.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => { - }).finally(() => { - loading.value = false; - }); +const handleDelete = async (row: ${BusinessName}VO) => { + await proxy?.#[[$modal]]#.confirm('鏄惁纭鍒犻櫎${functionName}缂栧彿涓�"' + row.${pkColumn.javaField} + '"鐨勬暟鎹」锛�'); + loading.value = true; + await del${BusinessName}(row.${pkColumn.javaField}).finally(() => loading.value = false); + await getList(); + proxy?.#[[$modal]]#.msgSuccess("鍒犻櫎鎴愬姛"); } -getList(); +onMounted(() => { + getList(); +}); </script> -- Gitblit v1.9.3