UP

src/style/fix.scss

@@ -12,7 +12,7 @@
 .el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
 .el-main {padding:15px;}
 .el-main.nopadding {padding:0;background: #fff;}
-.el-drawer__body {overflow: auto;}
+.el-drawer__body {overflow: auto;padding:0;}
 .el-popconfirm__main {margin: 14px 0;}
 .el-card__header {border-bottom: 0;font-size: 17px;font-weight: bold;padding:15px 20px 0px 20px;}
 .el-dialog__title {font-size: 17px;font-weight: bold;}

src/views/setting/menu/save.vue

@@ -1,10 +1,10 @@
 <template>
-	<el-row :gutter="20">
+	<el-row :gutter="40">
 		<el-col v-if="!form.id">
 			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
 		</el-col>
 		<template v-else>
-			<el-col :xl="12" :lg="16">
+			<el-col :lg="12">
 				<h2>{{form.meta.title || "新增菜单"}}</h2>
 				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
 					<el-form-item label="显示名称" prop="meta.title">
@@ -59,21 +59,20 @@
 				</el-form>
 
 			</el-col>
-			<el-col :xl="12" :lg="8">
+			<el-col :lg="12" class="apilist">
-				<el-alert title="温馨提示" class="tips">
+				<h2>接口权限</h2>
-					<p>
+				<sc-form-table v-model="form.apiList" :addTemplate="apiListAddTemplate" placeholder="暂无匹配接口权限">
-						<b>排序和位置：</b>
+					<el-table-column prop="code" label="标识" width="150">
-						可以通过拖拽菜单树来完成排序和更改位置的操作
+						<template #default="scope">
-					</p>
+							<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
-					<p>
+						</template>
-						<b>别名：</b>
+					</el-table-column>
-						系统唯一且与内置组件名一致，当类型为菜单时充当路由name，当类型为按钮时充当权限标识，当类型为Iframe和外链时充当http://链接地址
+					<el-table-column prop="url" label="Api url">
-					</p>
+						<template #default="scope">
-					<p>
+							<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
-						<b>视图：</b>
+						</template>
-						如父节点、链接或Iframe等没有视图的菜单不需要填写。视图地址需在VUE源码中@/views/中相对应的地址，前缀不需要填写“/”
+					</el-table-column>
-					</p>
+				</sc-form-table>
-				</el-alert>
 			</el-col>
 		</template>
 	</el-row>
@@ -105,7 +104,8 @@
 						active: "",
 						color: "",
 						type: "menu"
-					}
+					},
+					apiList: []
 				},
 				menuOptions: [],
 				menuProps: {
@@ -123,6 +123,10 @@
 					'#c71585'
 				],
 				rules: [],
+				apiListAddTemplate: {
+					code: "",
+					url: ""
+				},
 				loading: false
 			}
 		},
@@ -174,6 +178,8 @@
 
 <style scoped>
 	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
-	.tips {line-height: 1.8;padding:20px;}
+	.apilist {border-left: 1px solid #eee;}
-	.tips p {margin-bottom: 10px;}
+
+	[data-theme="dark"] h2 {color: #fff;}
+	[data-theme="dark"] .apilist {border-color: #434343;}
 </style>

src/views/vab/form.vue

@@ -12,7 +12,7 @@
 				</el-card>
 				<el-card shadow="never" header="双向绑定">
 					<el-button type="primary" @click="setName">改变输入框的值</el-button>
-					<el-button type="primary" @click="setConfig">改变配置labelPosition</el-button>
+					<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
 				</el-card>
 			</el-col>
 			<el-col :lg="12">