worker.bee
/
scfs-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:优化页面代码及版本升级报错处理

branch_202502110906
朱群锋 2025-02-11 17:29:41 +08:00
parent 969d9f5d7d
commit c827a97c3b
5 changed files with 340 additions and 740 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ElIcon.vue
View File

@ -3,21 +3,27 @@
import * as ElIcons from '@element-plus/icons-vue' import * as ElIcons from '@element-plus/icons-vue'
const prop = defineProps({ const prop = defineProps({
iconVisible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
} }
}) })
defineEmits(['onIcon']) const emits = defineEmits(['onIcon'])
const handleClose = (val: any) => {
// 触发自定义事件来通知父组件关闭弹窗
emits('onIcon',val)
}
let { visible } = toRefs(prop)
const state = reactive({ const state = reactive({
iconList: ElIcons, iconList: ElIcons,
}) })
const {iconList} = toRefs(state) const {iconList} = toRefs(state)
</script> </script>
<template> <template>
<el-dialog v-model="prop.iconVisible" title="图标" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" width="70%"> <el-dialog v-model="visible" title="图标"
@close="handleClose"
width="70%">
<el-icon v-for="icon in iconList" @click="$emit('onIcon', icon)" :size="30" color="#242e42" <el-icon v-for="icon in iconList" @click="$emit('onIcon', icon)" :size="30" color="#242e42"
style="border: 1px solid #e4e7ed;padding: 1rem;cursor: pointer;"> style="border: 1px solid #e4e7ed;padding: 1rem;cursor: pointer;">
<component :is="icon"></component> <component :is="icon"></component>

413
src/views/lowcode/CodeGen.vue
View File

@ -1,413 +0,0 @@
<script setup lang="ts">
import { reactive, onMounted, ref } from "vue"
import {ElMessage, ElMessageBox} from 'element-plus'
import type {FormInstance} from 'element-plus'
import Table from '@/components/Table.vue'
import { page, del, save, execute, tables, columns } from "@/api/lowcode/codeGen"
const searchForm = reactive({
tableName: null
})
const table = reactive({
loading: false,
page: {
current: 1,
size: 10,
total: 1,
},
operation:{
isShow: true,
width: '240'
},
tableTitle: [
{prop:'dataSource',label:'数据源'},
{prop:'tableName',label:'表名'},
{prop:'tableComment',label:'表注释'},
{prop:'subTableName',label:'子表名称'},
{prop:'subTableComment',label:'子表注释'},
{prop:'updateTime',label:'更新时间'},
{prop:'createTime',label:'创建时间'}
],
tableData:[],
})
onMounted(()=>{
onCodeGenPage()
})
function onCodeGenPage(){
table.loading = true;
page(Object.assign(table.page, searchForm)).then((res:any)=>{
if(res){
table.loading = false;
table.tableData = res.result.records;
table.page.current = res.result.current;
table.page.size = res.result.size;
table.page.total = res.result.total;
}
})
}
function onSizeChange(e){
table.page.size = e;
onCodeGenPage();
}
function onCurrentChange(e){
table.page.current = e;
onCodeGenPage();
}
function onRefresh(){
searchForm.tableName = null
onCodeGenPage();
}
function onSearch(){
onCodeGenPage();
}
var validatePath = (rule:any, value:any, callback:any) => {
if(!value.startsWith('/')){
callback(new Error('请以“/”开头'));
}else if(value.endsWith('/')){
callback(new Error('不能以“/”结尾'));
}else{
callback();
}
}
const formRef = ref<FormInstance>()
const form = reactive({
tableList: [],
primary:'',
tabsActive: 'table',
codeVisible: false,
templates: [
{ label: '单表（增删改查）', value: 'single' },
{ label: '树表（增删改查）', value: 'tree' },
{ label: '主子表（增删改查）', value: 'subTable' }
],
codeForm: {
tableName: '',
dataSource: '',
tableComment: '',
info: {
moduleName: '',
modulePath: '',
businessName: '',
businessPath: '',
template: 'single',
pid: '',
treeId: '',
treePid: '',
subTable: '',
subTableKey: ''
},
columns: [],
subColumns: []
}
})
function onTables(){
tables({name: 'tansci_boot'}).then((res:any)=>{
form.tableList = res.result
})
}
function onDelete(val:any){
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
del(val.column.row.id).then(res=>{
if(res){
ElMessage.success('删除成功!');
onCodeGenPage();
}
})
}).catch(e=>{
console.log(e)
})
}
function onAdd(){
onTables()
form.tabsActive = 'table'
form.codeForm = {
tableName: '',
dataSource: '',
tableComment: '',
info: {
moduleName: '',
modulePath: '',
businessName: '',
businessPath: '',
template: 'single',
pid: '',
treeId: '',
treePid: '',
subTable: '',
subTableKey: ''
},
columns: [],
subColumns: []
}
form.codeVisible = true
}
function onTablechange(){
let _table = form.tableList.find(item => form.codeForm.tableName == item.tableName )
form.codeForm.tableComment = _table.tableComment
form.codeForm.dataSource = _table.tableSchema
columns({name: form.codeForm.tableName}).then((res:any)=>{
// form.codeForm.columns = res.result
let _columns = res.result
form.codeForm.columns = []
_columns.forEach((it:any) => {
form.codeForm.columns.push({
columnName: it.columnName.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase()),
columnComment: it.columnComment,
columnType: it.columnType,
component: `component: 'input'`,
where: '=',
save: true,
query: true,
list: true,
required: it.required == 1
})
})
})
}
function onSubTableChange(){
columns({name: form.codeForm.info.subTable}).then((res:any)=>{
// form.codeForm.subColumns = res.result
let _columns = res.result
form.codeForm.subColumns = []
_columns.forEach((it:any) => {
form.codeForm.subColumns.push({
columnName: it.columnName.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase()),
columnComment: it.columnComment,
columnType: it.columnType,
component: `component: 'input'`,
where: '=',
save: true,
query: true,
list: true,
required: it.required == 1
})
})
})
}
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid)=>{
if(valid){
ElMessageBox.confirm('此操作会生成代码并覆盖, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let formData = new FormData()
formData.append("tableName", form.codeForm.tableName)
formData.append("tableComment", form.codeForm.tableComment)
formData.append("dataSource", form.codeForm.dataSource)
formData.append("info", JSON.stringify(form.codeForm.info))
formData.append("columns", JSON.stringify(form.codeForm.columns))
formData.append("subTableName", form.codeForm.info.subTable)
formData.append("subColumns", JSON.stringify(form.codeForm.subColumns))
execute(formData).then((res:any)=>{
formData.append("interfaceId", res.result)
save(formData).then((res:any)=>{
ElMessage.success("添加成功！");
onCodeGenPage()
form.codeVisible = false
})
})
})
}
})
}
</script>
<template>
<div class="codegen-container">
<Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :page="table.page" :loading="table.loading"
@onSizeChange="onSizeChange" @onCurrentChange="onCurrentChange">
<template #search>
<div><el-button type="primary" @click="onAdd">添加</el-button></div>
<div><el-input v-model="searchForm.tableName" placeholder="请输入表名"></el-input></div>
<div><el-button @click="onRefresh" icon="RefreshRight" circle></el-button></div>
<div><el-button @click="onSearch" type="primary" icon="Search">查询</el-button></div>
</template>
<template #column="scope">
<el-button @click="onDelete(scope)" type='primary' link style="color:var(--delete); padding:0;">删除</el-button>
</template>
</Table>
<el-dialog v-model="form.codeVisible" title="接口生成" :show-close="false" width="60%" >
<el-form ref="formRef" :model="form.codeForm" :rules="rules" status-icon label-width="100px">
<div style="padding-bottom: 1rem;">数据源信息</div>
<el-card shadow="never">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="表 名" prop="tableName" :rules="[{ required: true, message: '请选择表', trigger: 'change' }]">
<el-select v-model="form.codeForm.tableName" @change="onTablechange()" placeholder="请选择表" style="width:100%">
<el-option v-for="item in form.tableList" :key="item.tableName" :label="item.tableName" :value="item.tableName">
<span style="float: left">{{ item.tableName }}</span>
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.tableComment }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="描 述" prop="tableComment" :rules="[{ required: true, message: '请输入描述', trigger: 'change' }]">
<el-input v-model="form.codeForm.tableComment" />
</el-form-item>
</el-col>
</el-row>
</el-card>
<div style="padding: 1rem ;">生成接口信息</div>
<el-card shadow="never">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="生成模板" prop="info.template" :rules="[{ required: true, message: '请选择模板', trigger: 'change' }]">
<el-select v-model="form.codeForm.info.template" placeholder="请选择模板" style="width:100%">
<el-option v-for="item in form.templates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>模板：单表、树表、主子表（增删改查）</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.moduleName" label="模块名称" :rules="[{ required: true, message: '请输入模块名称', trigger: 'change' }]">
<el-input v-model="form.codeForm.info.moduleName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>模块名称：第一级分组名称，例如：系统功能</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.modulePath" label="模块路径" :rules="[{ required: true, message: '请输入模块路径', trigger: 'change' }, { validator: validatePath }]">
<el-input v-model="form.codeForm.info.modulePath"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>模块路径：第一级分组的路径，例如：/system</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.businessName" label="功能名称" :rules="[{ required: true, message: '请输入功能名称', trigger: 'change' }]">
<el-input v-model="form.codeForm.info.businessName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>功能名称：第二级分组名称，例如：菜单管理</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.businessPath" label="功能路径" :rules="[{ required: true, message: '请输入功能路径', trigger: 'change' }, { validator: validatePath }]">
<el-input v-model="form.codeForm.info.businessPath"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>功能路径：第二级分组路径，例如：/menu</span>
</el-col>
</el-row>
<div v-if="form.codeForm.info.template == 'tree'">
<el-divider content-position="left">关联信息</el-divider>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.treeId" label="树编码" :rules="[{ required: true, message: '请选择树编码字段', trigger: 'change' }]">
<el-select v-model="form.codeForm.info.treeId" placeholder="请选择树编码字段" style="width:100%">
<el-option v-for="item in form.codeForm.columns" :key="item.columnName" :label="item.columnComment" :value="item.columnName">
<span style="float: left">{{ item.columnName }}</span>
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.columnComment }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>树编码：树显示的编码字段名称，例如：id</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.treePid" label="父编码" :rules="[{ required: true, message: '请选择树父编码字段', trigger: 'change' }]">
<el-select v-model="form.codeForm.info.treePid" placeholder="请选择树父编码字段" style="width:100%">
<el-option v-for="item in form.codeForm.columns" :key="item.columnName" :label="item.columnComment" :value="item.columnName">
<span style="float: left">{{ item.columnName }}</span>
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.columnComment }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>树父编码：树显示的父编码字段名称，例如：pid</span>
</el-col>
</el-row>
</div>
<div v-if="form.codeForm.info.template == 'subTable'">
<el-divider content-position="left">关联信息</el-divider>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.subTable" label="关联子表名" :rules="[{ required: true, message: '请选择关联子表名称', trigger: 'change' }]">
<el-select v-model="form.codeForm.info.subTable" @change="onSubTableChange()" placeholder="请选择表" style="width:100%">
<el-option v-for="item in form.tableList" :key="item.tableName" :label="item.tableComment" :value="item.tableName">
<span style="float: left">{{ item.tableName }}</span>
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.tableComment }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>关联子表名：关联字表的名称，例如：sys_menu_role</span>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item prop="info.subTableKey" label="子表外键名" :rules="[{ required: true, message: '请选择子表关联的外键名', trigger: 'change' }]">
<el-select v-model="form.codeForm.info.subTableKey" placeholder="请选择子表关联的外键名" style="width:100%">
<el-option v-for="item in form.codeForm.subColumns" :key="item.columnName" :label="item.columnComment" :value="item.columnName">
<span style="float: left">{{ item.columnName }}</span>
<span style="float: right;color: var(--el-text-color-secondary);">{{ item.columnComment }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="form-describe">
<el-icon style="vertical-align: middle; padding-right: 0.2rem"><ElIconInfoFilled /></el-icon>
<span>子表关联的外键名：子表关联的外键名，例如：menu_id</span>
</el-col>
</el-row>
</div>
</el-card>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="form.codeVisible = false">取消</el-button>
<el-button type="primary" @click="onSubmit(formRef)">提交</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.codegen-container{
}
</style>

24
src/views/lowcode/Interface.vue
View File

@ -1,24 +0,0 @@
<script setup lang="ts">
import { reactive, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
const state = reactive({
url: proxy.$global.baseApi + '/api/web/index.html'
})
</script>
<template>
<div>
<iframe :src="state.url" width="100%" height="100%" frameborder="0"></iframe>
</div>
</template>
<style scoped>
iframe{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>

2
src/views/lowcode/LcPages.vue
View File

@ -348,7 +348,7 @@ function onClassifySubmit() {
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
</span> </span>
<template #content> <template #content>
<el-button-group size="mini"> <el-button-group size="small">
<el-button @click="onOperateChange(data,1)" icon="check"></el-button> <el-button @click="onOperateChange(data,1)" icon="check"></el-button>
<el-button @click="onOperateChange(data,2)" icon="edit"></el-button> <el-button @click="onOperateChange(data,2)" icon="edit"></el-button>
<el-button @click="onOperateChange(data,3)" icon="delete"></el-button> <el-button @click="onOperateChange(data,3)" icon="delete"></el-button>

73
src/views/system/Menu.vue
View File

@ -74,9 +74,11 @@
permission: data.permission permission: data.permission
} }
} }
function onTypeChange(type: any) { function onTypeChange(type: any) {
state.type = type state.type = type
} }
function onOperateChange(val: any) { function onOperateChange(val: any) {
if (val == 1) { if (val == 1) {
let menuId = '0' let menuId = '0'
@ -145,13 +147,18 @@
}) })
} }
} }
function onFormIcon() { function onFormIcon() {
state.iconVisible = true; state.iconVisible = true;
} }
function onIcon(val: any) { function onIcon(val: any) {
if(val) {
state.menuForm.icon = val.name; state.menuForm.icon = val.name;
}
state.iconVisible = false; state.iconVisible = false;
} }
const onSubmit = async (formEl: FormInstance | undefined) => { const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return; if (!formEl) return;
await formEl.validate((valid) => { await formEl.validate((valid) => {
@ -198,7 +205,8 @@
<div class="menu-container"> <div class="menu-container">
<div class="menu-tree"> <div class="menu-tree">
<el-scrollbar height="45rem"> <el-scrollbar height="45rem">
<el-tree :data="state.treeData" :props="{children: 'children', label: 'chineseName'}" highlight-current @node-click="onNodeClick" empty-text="暂无菜单"> <el-tree :data="state.treeData" :props="{children: 'children', label: 'chineseName'}" highlight-current
@node-click="onNodeClick" empty-text="暂无菜单">
<template #default="{ node, data }"> <template #default="{ node, data }">
<span class="custom-tree-node"> <span class="custom-tree-node">
<el-icon v-if="data.icon" style="vertical-align: middle;padding-right:10px;"> <el-icon v-if="data.icon" style="vertical-align: middle;padding-right:10px;">
@ -222,37 +230,53 @@
<el-radio-button v-permission="'menu:delete'" :value="3">删除</el-radio-button> <el-radio-button v-permission="'menu:delete'" :value="3">删除</el-radio-button>
</el-radio-group> </el-radio-group>
<el-divider content-position="left">菜单详情</el-divider> <el-divider content-position="left">菜单详情</el-divider>
<el-form :model="state.menuForm" ref="menuFormRef" :disabled="state.operate===0 || state.operate===3" label-position="right" label-width="150px"> <el-form :model="state.menuForm" ref="menuFormRef" :disabled="state.operate===0 || state.operate===3"
<el-form-item v-if="state.type == 1" label="父级菜单" prop="parentId" :rules="[{required: true, message: '父级不能为空', trigger: 'blur'}]"> label-position="right" label-width="150px">
<el-tree-select v-model="state.menuForm.parentId" :data="state.treeList" :props="{children: 'children', label: 'chineseName'}" node-key="id" <el-form-item v-if="state.type == 1" label="父级菜单" prop="parentId"
check-strictly :render-after-expand="false" :default-checked-keys="[state.menuForm.parentId]" :default-expanded-keys="[state.menuForm.parentId]" placeholder="请选父级菜单" style="width:50%"/> :rules="[{required: true, message: '父级不能为空', trigger: 'blur'}]">
<el-tree-select v-model="state.menuForm.parentId" :data="state.treeList"
:props="{children: 'children', label: 'chineseName'}" node-key="id"
check-strictly :render-after-expand="false" :default-checked-keys="[state.menuForm.parentId]"
:default-expanded-keys="[state.menuForm.parentId]" placeholder="请选父级菜单"
style="width:50%"/>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="菜单名称" prop="name" :rules="[{required: true, message: '名称不能为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9]+$/, message: '必须是字母', trigger: 'blur'}]"> <el-form-item v-if="state.type == 1" label="菜单名称" prop="name"
:rules="[{required: true, message: '名称不能为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9]+$/, message: '必须是字母', trigger: 'blur'}]">
<el-input v-model="state.menuForm.name" placeholder="请输入名称" style="width:50%"></el-input> <el-input v-model="state.menuForm.name" placeholder="请输入名称" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="菜单路由" prop="url" :rules="[{required: true, message: '路由不能为空', trigger: 'blur'}]"> <el-form-item v-if="state.type == 1" label="菜单路由" prop="url"
:rules="[{required: true, message: '路由不能为空', trigger: 'blur'}]">
<el-input v-model="state.menuForm.url" placeholder="请输入路由" style="width:50%"></el-input> <el-input v-model="state.menuForm.url" placeholder="请输入路由" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="菜单图标" prop="icon" :rules="[{required: true, message: '菜单图标不能为空', trigger: 'blur'}]"> <el-form-item v-if="state.type == 1" label="菜单图标" prop="icon"
<el-input v-model="state.menuForm.icon" @click="onFormIcon" readonly suffix-icon="Platform" style="width:50%"></el-input> :rules="[{required: true, message: '菜单图标不能为空', trigger: 'blur'}]">
<ElIcon :iconVisible="state.iconVisible" @onIcon="onIcon"/> <el-input v-model="state.menuForm.icon" @click="onFormIcon" readonly suffix-icon="Platform"
style="width:50%"></el-input>
<ElIcon v-model:visible="state.iconVisible" @onIcon="onIcon"/>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="中文名称" prop="chineseName" :rules="[{required: true, message: '中文名称不能为空', trigger: 'blur'},{pattern: /^[\u4e00-\u9fa5]{*}$/, message: '必须是汉字', trigger: 'blur'}]"> <el-form-item v-if="state.type == 1" label="中文名称" prop="chineseName"
:rules="[{required: true, message: '中文名称不能为空', trigger: 'blur'}]">
<el-input v-model="state.menuForm.chineseName" placeholder="请输入中文名称" style="width:50%"></el-input> <el-input v-model="state.menuForm.chineseName" placeholder="请输入中文名称" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="英文名称" prop="englishName" :rules="[{required: true, message: '英文名称不能为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9]+$/, message: '必须是字母', trigger: 'blur'}]"> <el-form-item v-if="state.type == 1" label="英文名称" prop="englishName"
<el-input v-model="state.menuForm.englishName" placeholder="请输入英文名称" autocomplete="off" style="width:50%"></el-input> :rules="[{required: true, message: '英文名称不能为空', trigger: 'blur'},{pattern: /^[A-Za-z0-9]+$/, message: '必须是字母', trigger: 'blur'}]">
<el-input v-model="state.menuForm.englishName" placeholder="请输入英文名称" autocomplete="off"
style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 2" label="菜单名称" prop="chineseName" :rules="[{required: true, message: '请输入名称', trigger: 'blur'}]"> <el-form-item v-if="state.type == 2" label="菜单名称" prop="chineseName"
:rules="[{required: true, message: '请输入名称', trigger: 'blur'}]">
<el-input v-model="state.menuForm.chineseName" placeholder="请输入名称" style="width:50%"></el-input> <el-input v-model="state.menuForm.chineseName" placeholder="请输入名称" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 2" label="权限标识" prop="permission" :rules="[{required: true, message: '请输入权限标识', trigger: 'blur'}]"> <el-form-item v-if="state.type == 2" label="权限标识" prop="permission"
:rules="[{required: true, message: '请输入权限标识', trigger: 'blur'}]">
<el-input v-model="state.menuForm.permission" placeholder="请输入权限标识" style="width:50%"></el-input> <el-input v-model="state.menuForm.permission" placeholder="请输入权限标识" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="菜单顺序" prop="sort" :rules="[{required: true, message: '菜单顺序不能为空', trigger: 'blur'}]"> <el-form-item label="菜单顺序" prop="sort"
:rules="[{required: true, message: '菜单顺序不能为空', trigger: 'blur'}]">
<el-input-number v-model="state.menuForm.sort" :min="0" :max="999" style="width:50%"></el-input-number> <el-input-number v-model="state.menuForm.sort" :min="0" :max="999" style="width:50%"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="组件类型" prop="componentType" :rules="[{required: true, message: '请选择组件类型', trigger: 'change'}]"> <el-form-item v-if="state.type == 1" label="组件类型" prop="componentType"
:rules="[{required: true, message: '请选择组件类型', trigger: 'change'}]">
<el-radio-group v-model="state.menuForm.componentType"> <el-radio-group v-model="state.menuForm.componentType">
<el-radio :value="0">默认</el-radio> <el-radio :value="0">默认</el-radio>
<el-radio :value="1">amis</el-radio> <el-radio :value="1">amis</el-radio>
@ -261,27 +285,31 @@
<el-form-item v-if="state.type == 1" label="组件名称" prop="component"> <el-form-item v-if="state.type == 1" label="组件名称" prop="component">
<el-input v-model="state.menuForm.component" placeholder="请输入组件名称" style="width:50%"></el-input> <el-input v-model="state.menuForm.component" placeholder="请输入组件名称" style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="菜单类型" prop="openMode" :rules="[{required: true, message: '请选择类型', trigger: 'change'}]"> <el-form-item v-if="state.type == 1" label="菜单类型" prop="openMode"
:rules="[{required: true, message: '请选择类型', trigger: 'change'}]">
<el-select v-model="state.menuForm.openMode" placeholder="请选菜单类型" style="width:50%"> <el-select v-model="state.menuForm.openMode" placeholder="请选菜单类型" style="width:50%">
<el-option label="菜单" :value="0"></el-option> <el-option label="菜单" :value="0"></el-option>
<el-option label="Iframe" :value="1"></el-option> <el-option label="Iframe" :value="1"></el-option>
<el-option label="新标签页" :value="2"></el-option> <el-option label="新标签页" :value="2"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="是否缓存" prop="keepAlive" :rules="[{required: true, message: '请选择是否缓存', trigger: 'change'}]"> <el-form-item v-if="state.type == 1" label="是否缓存" prop="keepAlive"
:rules="[{required: true, message: '请选择是否缓存', trigger: 'change'}]">
<el-radio-group v-model="state.menuForm.keepAlive"> <el-radio-group v-model="state.menuForm.keepAlive">
<el-radio :value="1">缓存</el-radio> <el-radio :value="1">缓存</el-radio>
<el-radio :value="0">不缓存</el-radio> <el-radio :value="0">不缓存</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="state.type == 1" label="是否显示" prop="isShow" :rules="[{required: true, message: '请选择是否显示', trigger: 'change'}]"> <el-form-item v-if="state.type == 1" label="是否显示" prop="isShow"
:rules="[{required: true, message: '请选择是否显示', trigger: 'change'}]">
<el-radio-group v-model="state.menuForm.isShow"> <el-radio-group v-model="state.menuForm.isShow">
<el-radio :value="1">显示</el-radio> <el-radio :value="1">显示</el-radio>
<el-radio :value="0">不显示</el-radio> <el-radio :value="0">不显示</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remarks"> <el-form-item label="备注" prop="remarks">
<el-input v-model="state.menuForm.remarks" type="textarea" :rows="2" placeholder="请输入备注" style="width:50%"></el-input> <el-input v-model="state.menuForm.remarks" type="textarea" :rows="2" placeholder="请输入备注"
style="width:50%"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-show="state.operate != 0 && state.operate != 3"> <el-form-item v-show="state.operate != 0 && state.operate != 3">
<el-button type="primary" @click="onSubmit(menuFormRef)">提交</el-button> <el-button type="primary" @click="onSubmit(menuFormRef)">提交</el-button>
@ -294,10 +322,12 @@
.menu-container { .menu-container {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
display: flex; display: flex;
.menu-tree { .menu-tree {
border-right: 1px solid #e4e7ed; border-right: 1px solid #e4e7ed;
margin: 0 4rem 0 1rem; margin: 0 4rem 0 1rem;
min-width: 12rem; min-width: 12rem;
.el-tree-node:hover > .el-tree-node__content { .el-tree-node:hover > .el-tree-node__content {
background-color: #fff !important; background-color: #fff !important;
color: var(--theme) !important; color: var(--theme) !important;
@ -308,6 +338,7 @@
color: var(--theme) !important; color: var(--theme) !important;
} }
} }
.menu-form { .menu-form {
width: 100%; width: 100%;
} }