<think>我们正在修改若依代码生成模块，以支持生成Vue3和TypeScript的前端代码。具体来说，我们需要修改ruoyi-generator模块中resources/vm/vue目录下的.vm模板文件。
步骤：
1. 分析当前模板：当前模板是为Vue2设计的，我们需要调整它们以使用Vue3的语法（例如Composition API）和TypeScript类型。
2. 修改模板文件：将每个.vm文件中的Vue2语法升级为Vue3，并添加TypeScript支持。
3. 测试：生成代码并测试功能。
主要修改点：
- 将Vue2的Options API转换为Vue3的Composition API（使用setup语法）。
- 添加TypeScript类型注解（例如：变量、函数参数、返回值等）。
- 替换Vue2特有的语法（如`v-model`的用法，Vue3中`v-model`有变化）。
- 调整组件引用方式：Vue3中全局组件通常通过`app.component`注册，但在单文件组件中我们仍然可以局部引入。
- 使用Vue3的新特性，如`ref`、`reactive`等。
- 修改路由和状态管理（如果模板中涉及）以兼容Vue3。
由于若依生成的前端代码通常包括：
- 视图层（.vue文件）
- API请求层（.ts文件）
- 类型定义（可能需要新增.d.ts文件或直接在.ts文件中定义）
我们将重点修改.vue文件的模板。
以`list.vue.vm`为例（列表页面）：
原Vue2模板可能包含：
- `data()` 函数
- `methods` 对象
- `created` 生命周期钩子
修改为Vue3+TS后，我们可以使用`<script setup lang="ts">`语法，这样更简洁。
示例修改：
原Vue2模板片段：
```vue
<script>
export default {
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// ${functionName}表格数据
${classname}List: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
#foreach($column in $columns)
#if($column.query)
$column.
javaField: null,
#end
#end
},
// 表单参数
form: {},
// 表单校验
rules: {
#foreach($column in $columns)
#if($column.required)
$column.
javaField: [
{ required: true, message: "$column.columnComment不能为空", trigger: "blur" }
]#if($foreach.count != $columns.size()),#end
#end
#end
}
};
},
created() {
this.getList();
},
methods: {
/** 查询${functionName}列表 */
getList() {
this.loading = true;
list${BusinessName}(this.queryParams).then(response => {
this.${classname}List = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
#foreach($column in $columns)
#if($column.htmlType == "checkbox")
$column.
javaField: []#if($foreach.count != $columns.size()),#end
#else
$column.
javaField: null#if($foreach.count != $columns.size()),#end
#end
#end
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.${
pkColumn.
javaField})
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加${functionName}";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const ${
pkColumn.
javaField} = row.${
pkColumn.
javaField} || this.ids
get${BusinessName}(${
pkColumn.
javaField}).then(response => {
this.form = response.data;
#foreach($column in $columns)
#if($column.htmlType == "checkbox")
this.form.$column.
javaField = response.data.${column.
javaField}.split(",");
#end
#end
this.open = true;
this.title = "修改${functionName}";
});
},
/** 提交按钮 */
submitForm() {
this.#[[$]]#refs["form"].validate(valid => {
if (valid) {
#foreach($column in $columns)
#if($column.htmlType == "checkbox")
this.form.$column.
javaField = this.form.${column.
javaField}.join(",");
#end
#end
if (this.form.${
pkColumn.
javaField} != null) {
update${BusinessName}(this.form).then(response => {
this.#[[$]]#modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
add${BusinessName}(this.form).then(response => {
this.#[[$]]#modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ${
pkColumn.
javaField}s = row.${
pkColumn.
javaField} || this.ids;
this.#[[$]]#modal.confirm('是否确认删除${functionName}编号为"' + ${
pkColumn.
javaField}s + '"的数据项？').then(function() {
return del${BusinessName}(${
pkColumn.
javaField}s);
}).then(() => {
this.getList();
this.#[[$]]#modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('${moduleName}/${businessName}/export', {
...this.queryParams
}, `${businessName}_#[[${new Date().getTime()}]]#.xlsx`)
}
}
};
</script>
```
修改为Vue3+TS的模板（使用`<script setup lang="ts">`）：
- 使用`ref`和`reactive`定义响应式变量。
- 生命周期钩子使用`onMounted`。
- 删除`this`，改为直接访问变量。
- 表单校验规则可能需要调整（例如使用Vue3的校验方式，若依可能使用了Element Plus，注意Element Plus的表单校验规则与Vue2的Element UI略有不同）。
- 使用`defineComponent`或`<script setup>`（这里使用`<script setup>`更简洁）。
注意：由于使用了`<script setup>`，我们不能使用`this`，所以需要调整所有的方法和变量访问。
修改后的模板片段示例（仅展示部分，具体需要根据实际模板调整）：
```vue
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName} } from '@/api/${moduleName}/${businessName}';
// 遮罩层
const loading = ref(true);
// 选中数组
const ids = ref<number[]>([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// ${functionName}表格数据
const ${classname}List = ref<any[]>([]);
// 弹出层标题
const title = ref("");
// 是否显示弹出层
const open = ref(false);
// 查询参数
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
#foreach($column in $columns)
#if($column.query)
$column.
javaField: null,
#end
#end
});
// 表单参数
const form = ref<any>({});
// 表单校验
const rules = reactive({
#foreach($column in $columns)
#if($column.required)
$column.
javaField: [
{ required: true, message: "$column.columnComment不能为空", trigger: "blur" }
]#if($foreach.count != $columns.size()),#end
#end
#end
});
// 表单引用
const formRef = ref<FormInstance>();
/** 查询${functionName}列表 */
function getList() {
loading.value = true;
list${BusinessName}(queryParams).then(response => {
${classname}List.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
#foreach($column in $columns)
#if($column.htmlType == "checkbox")
$column.
javaField: []#if($foreach.count != $columns.size()),#end
#else
$column.
javaField: null#if($foreach.count != $columns.size()),#end
#end
#end
};
if (formRef.value) {
formRef.value.resetFields();
}
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
// 重置查询表单（假设查询表单的ref为queryFormRef，这里需要根据实际情况调整）
// 注意：在模板中，查询表单需要设置ref="queryFormRef"
// 这里我们假设有一个queryFormRef，然后重置它
// 如果没有，可以去掉这部分，或者只重置queryParams中的字段
// 例如：手动重置每个字段为初始值
// 这里简化处理，直接重置为初始状态（注意保留pageNum和pageSize）
queryParams.pageNum = 1;
queryParams.pageSize = 10;
#foreach($column in $columns)
#if($column.query)
queryParams.$column.
javaField = null;
#end
#end
getList();
}
// 多选框选中数据
function handleSelectionChange(selection: any[]) {
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}";
}
/** 修改按钮操作 */
function handleUpdate(row: any) {
reset();
const ${
pkColumn.
javaField} = row.${
pkColumn.
javaField} || ids.value[0];
get${BusinessName}(${
pkColumn.
javaField}).then(response => {
form.value = response.data;
#foreach($column in $columns)
#if($column.htmlType == "checkbox")
form.value.$column.
javaField = response.data.${column.
javaField} ? response.data.${column.
javaField}.split(",") : [];
#end
#end
open.value = true;
title.value = "修改${functionName}";
});
}
/** 提交按钮 */
function submitForm() {
formRef.value?.validate((valid: boolean) => {
if (valid) {
#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(() => {
ElMessage.success("修改成功");
open.value = false;
getList();
});
} else {
add${BusinessName}(form.value).then(() => {
ElMessage.success("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row: any) {
const ${
pkColumn.
javaField}s = row.${
pkColumn.
javaField} || ids.value;
ElMessageBox.confirm('是否确认删除${functionName}编号为"' + ${
pkColumn.
javaField}s + '"的数据项？', '警告', {
confirm
ButtonText: '确定',
cancel
ButtonText: '取消',
type: 'warning'
}).then(() => {
return del${BusinessName}(${
pkColumn.
javaField}s);
}).then(() => {
getList();
ElMessage.success("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
// 这里使用若依提供的下载方法，需要根据实际情况调整（例如，使用Vue3版本的download方法）
// 假设我们有一个download函数（在utils/request.ts中可能已经封装）
download('${moduleName}/${businessName}/export', {
...queryParams
}, `${businessName}_${new Date().getTime()}.xlsx`);
}
onMounted(() => {
getList();
});
</script>
```
注意：
- 我们使用了`<script setup lang="ts">`，这是Vue3的组合式API的语法糖。
- 使用`ref`和`reactive`定义响应式数据
本文介绍了一种在网页中动态执行JavaScript语句的方法，利用eval函数实现了动态获取和执行JS代码的功能，并给出一个身份证验证的例子。
扫一扫
5676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
