From 7862d58f014a1f5e6e300d9b04090c72b6f11e37 Mon Sep 17 00:00:00 2001 From: LiuHao <liuhaoai545@gmail.com> Date: 星期三, 05 四月 2023 18:28:43 +0800 Subject: [PATCH] update ts generator --- ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm | 471 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 240 insertions(+), 231 deletions(-) diff --git a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm index 808e3e6..bfe5986 100644 --- a/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm +++ b/ruoyi-modules/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm @@ -1,6 +1,8 @@ <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 class="search" v-show="showSearch"> + <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> #foreach($column in $columns) #if($column.query) #set($dictType=$column.dictType) @@ -12,105 +14,110 @@ #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> + </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="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['${moduleName}:${businessName}:edit']" - >淇敼</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> - </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> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + <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="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate()" + v-hasPermi="['${moduleName}:${businessName}:edit']" + >淇敼</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> + </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> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + </template> - <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> + <el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> #foreach($column in $columns) #set($javaField=$column.javaField) #set($parentheseIndex=$column.columnComment.indexOf("锛�")) @@ -120,52 +127,56 @@ #set($comment=$column.columnComment) #end #if($column.pk) - <el-table-column label="${comment}" align="center" prop="${javaField}" v-if="${column.list}"/> + <el-table-column label="${comment}" align="center" prop="${javaField}" v-if="${column.list}"/> #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> + <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="100"> <template #default="scope"> - <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/> + <image-preview :src="scope.row.${javaField}" :width="50" :height="50"/> </template> - </el-table-column> + </el-table-column> #elseif($column.list && $column.dictType && "" != $column.dictType) - <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(',') : []"/> -#else - <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/> -#end - </template> - </el-table-column> -#elseif($column.list && "" != $javaField) - <el-table-column label="${comment}" align="center" prop="${javaField}" /> -#end -#end - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column label="${comment}" align="center" prop="${javaField}"> <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="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']">鍒犻櫎</el-button> +#if($column.htmlType == "checkbox") + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/> +#else + <dict-tag :options="${column.dictType}" :value="scope.row.${javaField}"/> +#end </template> - </el-table-column> - </el-table> + </el-table-column> +#elseif($column.list && "" != $javaField) + <el-table-column label="${comment}" align="center" prop="${javaField}" /> +#end +#end + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']"></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']"></el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> - <pagination - v-show="total>0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - + <pagination + v-show="total>0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </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) @@ -196,13 +207,13 @@ <el-form-item label="${comment}" prop="${field}"> <el-select v-model="form.${field}" placeholder="璇烽�夋嫨${comment}"> <el-option - v-for="dict in ${dictType}" - :key="dict.value" - :label="dict.label" + v-for="dict in ${dictType}" + :key="dict.value" + :label="dict.label" #if($column.javaType == "Integer" || $column.javaType == "Long") - :value="parseInt(dict.value)" + :value="parseInt(dict.value)" #else - :value="dict.value" + :value="dict.value" #end ></el-option> </el-select> @@ -217,10 +228,10 @@ <el-form-item label="${comment}" prop="${field}"> <el-checkbox-group v-model="form.${field}"> <el-checkbox - v-for="dict in ${dictType}" - :key="dict.value" - :label="dict.value"> - {{dict.label}} + v-for="dict in ${dictType}" + :key="dict.value" + :label="dict.value"> + {{dict.label}} </el-checkbox> </el-checkbox-group> </el-form-item> @@ -234,12 +245,12 @@ <el-form-item label="${comment}" prop="${field}"> <el-radio-group v-model="form.${field}"> <el-radio - v-for="dict in ${dictType}" - :key="dict.value" + v-for="dict in ${dictType}" + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long") - :label="parseInt(dict.value)" + :label="parseInt(dict.value)" #else - :label="dict.value" + :label="dict.value" #end >{{dict.label}}</el-radio> </el-radio-group> @@ -247,7 +258,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 label="1">璇烽�夋嫨瀛楀吀鐢熸垚</el-radio> </el-radio-group> </el-form-item> #elseif($column.htmlType == "datetime") @@ -261,7 +272,7 @@ </el-form-item> #elseif($column.htmlType == "textarea") <el-form-item label="${comment}" prop="${field}"> - <el-input v-model="form.${field}" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> + <el-input v-model="form.${field}" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> </el-form-item> #end #end @@ -277,25 +288,26 @@ </div> </template> -<script setup name="${BusinessName}"> -import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from "@/api/${moduleName}/${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'; +import { ComponentInternalInstance } from 'vue'; +import { ElForm } from 'element-plus'; -const { proxy } = getCurrentInstance(); +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 open = ref(false); +const ${businessName}List = ref<${BusinessName}VO[]>([]); const buttonLoading = ref(false); const loading = ref(true); const showSearch = ref(true); -const ids = ref([]); +const ids = ref<Array<string | number>>([]); const single = ref(true); const multiple = ref(true); const total = ref(0); -const title = ref(""); #foreach ($column in $columns) #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN") #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) @@ -303,8 +315,27 @@ #end #end -const data = reactive({ - form: {}, +const queryFormRef = ref(ElForm); +const ${businessName}FormRef = ref(ElForm); + +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: { pageNum: 1, pageSize: 10, @@ -336,7 +367,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") @@ -353,138 +384,116 @@ } #end #end - list${BusinessName}(queryParams.value).then(response => { - ${businessName}List.value = response.rows; - total.value = response.total; - loading.value = false; - }); + const res = await list${BusinessName}(queryParams.value); + ${businessName}List.value = res.rows; + total.value = res.total; + loading.value = false; } -// 鍙栨秷鎸夐挳 -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 = () => { queryParams.value.pageNum = 1; 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 = []; #end #end - proxy.resetForm("queryRef"); + queryFormRef.value.resetFields(); handleQuery(); } -// 澶氶�夋閫変腑鏁版嵁 -function handleSelectionChange(selection) { +/** 澶氶�夋閫変腑鏁版嵁 */ +const handleSelectionChange = (selection: ${BusinessName}VO[]) => { ids.value = selection.map(item => item.${pkColumn.javaField}); single.value = selection.length != 1; multiple.value = !selection.length; } /** 鏂板鎸夐挳鎿嶄綔 */ -function handleAdd() { - reset(); - open.value = true; - title.value = "娣诲姞${functionName}"; +const handleAdd = () => { + dialog.visible = true; + dialog.title = "娣诲姞${functionName}"; + nextTick(() => { + reset(); + }); } /** 淇敼鎸夐挳鎿嶄綔 */ -function handleUpdate(row) { +const handleUpdate = (row?: ${BusinessName}VO) => { loading.value = true - reset(); - const _${pkColumn.javaField} = row.${pkColumn.javaField} || ids.value - get${BusinessName}(_${pkColumn.javaField}).then(response => { + dialog.visible = true; + dialog.title = "淇敼${functionName}"; + nextTick(async () => { + reset(); + const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0] + const res = await get${BusinessName}(_${pkColumn.javaField}); loading.value = false; - form.value = response.data; + 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 - open.value = true; - title.value = "淇敼${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) -#if($column.htmlType == "checkbox") - 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; - }); + #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 { - 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; + await getList(); } }); } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ -function handleDelete(row) { - const _${pkColumn.javaField}s = row.${pkColumn.javaField} || ids.value; - proxy.#[[$modal]]#.confirm('鏄惁纭鍒犻櫎${functionName}缂栧彿涓�"' + _${pkColumn.javaField}s + '"鐨勬暟鎹」锛�').then(function() { - loading.value = true; - return del${BusinessName}(_${pkColumn.javaField}s); - }).then(() => { - loading.value = true; - getList(); - proxy.#[[$modal]]#.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => { - }).finally(() => { - loading.value = false; - }); +const handleDelete = async (row?: ${BusinessName}VO) => { + const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value; + await proxy?.#[[$modal]]#.confirm('鏄惁纭鍒犻櫎${functionName}缂栧彿涓�"' + _${pkColumn.javaField}s + '"鐨勬暟鎹」锛�').finally(() => loading.value = false); + await del${BusinessName}(_${pkColumn.javaField}s); + proxy?.#[[$modal]]#.msgSuccess("鍒犻櫎鎴愬姛"); + await getList(); } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ -function handleExport() { - proxy.download('${moduleName}/${businessName}/export', { +const handleExport = () => { + proxy?.download('${moduleName}/${businessName}/export', { ...queryParams.value }, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`) } -getList(); +onMounted(() => { + getList(); +}); </script> -- Gitblit v1.9.3