操作项列表

src/api/permission.js

@@ -10,6 +10,9 @@ const api = {
   delAuthItem: '/del-auth-item', // 删除权限项
   getAuthItemList: '/auth-item-list', // 获取权限项列表
   getOperationItemList: '/operation-item-list', // 获取操作项列表
+  addOperationItem: '/add-operation-item', // 添加操作项
+  editOperationItem: '/edit-operation-item', // 编辑操作项
+  delOperationItem: '/del-operation-item', // 删除操作项
 }
 
 export default getFetch(api, '/hb-manage-web');

src/views/permission/action-list.vue

 <template>
-  <div>操作项</div>
+  <el-tabs v-model="activeName">
+    <!-- 1好办后台2应用后台3好办小程序4小程序应用 -->
+    <el-tab-pane label="好办后台" name="first" lazy>
+      <action-table app-type="1"></action-table>
+    </el-tab-pane>
+    <el-tab-pane label="应用后台" name="second" lazy>
+      <action-table app-type="2"></action-table>
+    </el-tab-pane>
+    <el-tab-pane label="好办小程序" name="third" lazy>
+      <action-table app-type="3"></action-table>
+    </el-tab-pane>
+    <el-tab-pane label="好办小程序应用" name="fourth" lazy>
+      <action-table app-type="4"></action-table>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
+import ActionTable from './action-list/action-table.vue';
 export default {
-  name: 'action-list'
+  name: 'action-list',
+  components: { ActionTable },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+/deep/.el-tabs__header {
+  padding-top: 10px;
+  margin-bottom: 0;
+}
+</style>