大屏页面初始化

screen-vue/src/views/system/role/index.vue

@@ -7,7 +7,15 @@
   >
     <template #sidebar>
       <div class="sidebar-content">
-       
+       <FilterSelect
+		 :list-data="listData"
+		 node-key="roleId"
+		 label-key="roleName"
+		 @item-click="handleItemClick" 
+		 @edit="handleEdit"
+		 @delete="handleDelete"
+		 @view="handleView"
+	   />
       </div>
     </template>
     <template #main>
@@ -19,9 +27,48 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import ResizablePage from '@/components/Layout/proResizable.vue'
+import FilterSelect from '@/components/Table/proFilterSelect.vue'
+
+import { getHomeRoleList } from '@/api/bizRole'
 import vUser from './list.vue'
+
+const FormValues = ref({
+  menuId: ''
+});
+
+const listData = ref([]);
+
+const getListData = async () => {
+  try {
+    const res = await getHomeRoleList();
+	listData.value = res || []
+  } catch (error) {
+	  console.log(error);
+  }
+}
+
+const handleItemClick = (item) => {
+  console.log('选中了：', item)
+}
+
+// 操作事件处理
+const handleEdit = (item) => {
+  console.log('编辑', item)
+}
+
+const handleDelete = (item) => {
+  console.log('删除', item)
+}
+
+const handleView = (item) => {
+  console.log('查看', item)
+}
+
+onMounted(() => {
+	getListData();
+})
 </script>
 
 <style scoped>