更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio
演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码: https://gitee.com/nbacheng/nbcio-boot
前端代码:https://gitee.com/nbacheng/nbcio-vue.git
在线演示(包括H5) : http://122.227.135.243:9888
19、this.$router.push可以修改成vue3的router.push
这里的const router = useRouter();
20、在vue2里的create()可以用onMounted来处理
如:
javascript
onMounted(() => {
getCategoryList();
getList();
})
21、vue3里的resetForm功能实现
javascript
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="流程标识" prop="processKey">
<el-input
v-model="queryParams.processKey"
placeholder="请输入流程标识"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程名称" prop="processName">
<el-input
v-model="queryParams.processName"
placeholder="请输入流程名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
<el-option
v-for="item in categoryOptions"
:key="item.categoryId"
:label="item.categoryName"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
上面的ref="queryForm" 进行重置,需要
const queryForm = ref(ElForm)
同时下面的重置操作
javascript
/ 重置按钮操作
const resetQuery = () => {
//resetForm("queryForm");
queryForm.value.resetFields();
handleQuery();
}
22、a-modal
这个显示由原来的:visible.sync修改成v-model:visible
23、el-table的element-plus页切换需要修改
原先vue2可以下面的代码
javascript
<pagination
v-show="deployTotal>0"
:total="deployTotal"
:page.sync="queryFlowParams.pageNum"
:limit.sync="queryFlowParams.pageSize"
@pagination="getDeployList"
/>
vue3要修改成如下:
javascript
<pagination
v-show="deployTotal>0"
:total="deployTotal"
v-model:page="queryFlowParams.pageNum"
v-model:limit="queryFlowParams.pageSize"
@pagination="getDeployList"
/>
24、element-plus很多大小原先size的mini都要修改成small,同时type的text已经删除了
25、要使用el-form的vue3版本最好这样定义
const formRef = ref<ElFormInstance>();
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
26、动态加载显示组件的修改
原先vue2
javascript
allFormComponent:function(){
return [
{
text:'单表示例',
routeName: '@/views/workflow/demo/wf',
component: () => import('@/views/workflow/demo/wf'),
businessTable:'wf_demo'
}
}
需要修改成vue3的
javascript
const allFormComponent = computed(() => {
return [
{
text:'单表示例',
routeName: '@/views/workflow/demo/wf',
component: defineAsyncComponent( () => import('@/views/workflow/demo/wf')),
businessTable:'wf_demo'
}
]
})