UP

src/api/index.js

@@ -86,6 +86,13 @@ const api = {
 			get: async function(params){
 				return await http.get(this.url, params);
 			}
+		},
+		get: {
+			url: `${config.API_URL}/dic_info`,
+			name: "获取字典数据",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
 		}
 	},
 	app: {

src/components/scDicSelect/index.vue

@@ -0,0 +1,56 @@
+<!--
+ * @Descripttion: 字典选择器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月3日15:53:37
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
+		<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]"></el-option>
+	</el-select>
+</template>
+
+<script>
+	import config from "@/config/dicSelect";
+
+	export default {
+		props: {
+			dic: { type: String, default: "" },
+			params: { type: Object, default: () => ({}) },
+		},
+		data() {
+			return {
+				dicParams: this.params,
+				loading: false,
+				options: [],
+				props: config.props
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//选项显示隐藏事件
+			visibleChange(ispoen){
+				if(ispoen && this.options.length==0){
+					this.getRemoteData()
+				}
+			},
+			//获取数据
+			async getRemoteData(){
+				this.loading = true
+				this.dicParams[config.request.name] = this.dic
+				var res = await config.apiObj.get(this.params)
+				var response = config.parseData(res)
+				this.options = response.data
+				this.loading = false
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/config/dicSelect.js

@@ -0,0 +1,21 @@
+import API from "@/api";
+
+//字典选择器配置
+
+export default {
+	apiObj: API.dic.get,				//上传请求API对象
+	parseData: function (res) {
+		return {
+			data: res.data,				//分析行数据字段结构
+			msg: res.message,			//分析描述字段结构
+			code: res.code				//分析状态字段结构
+		}
+	},
+	request: {
+		name: 'name'					//规定搜索字段
+	},
+	props: {
+		label: 'name',					//映射label显示字段
+		value: 'key',					//映射value值字段
+	}
+}

src/main.js

@@ -19,6 +19,7 @@ import scUploadMultiple from './components/scUpload/multiple'
 import scFormTable from './components/scFormTable'
 import scTableSelect from './components/scTableSelect'
 import scPageHeader from './components/scPageHeader'
+import scDicSelect from './components/scDicSelect'
 import auth from './directives/auth'
 import role from './directives/role'
 
@@ -44,6 +45,7 @@ app.component('scUploadMultiple', scUploadMultiple);
 app.component('scFormTable', scFormTable);
 app.component('scTableSelect', scTableSelect);
 app.component('scPageHeader', scPageHeader);
+app.component('scDicSelect', scDicSelect);
 
 //注册全局指令
 app.directive('auth', auth)

src/router/systemRouter.js

@@ -41,6 +41,15 @@ const routes = [{
 							icon: "el-icon-data-analysis",
 						},
 						component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
+					},
+					{
+						name: "dicselect",
+						path: "/vab/dicselect",
+						meta: {
+							title: "字典选择器",
+							icon: "el-icon-document-copy",
+						},
+						component: () => import(/* webpackChunkName: "dicselect" */ '@/views/vab/dicselect'),
 					}
 				]
 			}

src/style/fix.less

@@ -18,6 +18,7 @@
 .el-dialog__title {font-size: 17px;font-weight: bold;}
 .el-drawer__header>:first-child {font-size: 17px;font-weight: bold;}
 .el-tree.menu .el-tree-node__content {height:36px;}
+.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {margin-right: 5px;}
 .el-input-number__decrease, .el-input-number__increase {top:2px;}
 .el-menu-item [class^=sc-icon-] {font-size: 18px;display: inline-block;line-height: 1;}
 .el-menu-item [class^=sc-icon-], .el-submenu [class^=sc-icon-] {margin-right: 5px;vertical-align: middle;width: 24px;text-align: center;}

src/views/template/report/index.vue

@@ -6,7 +6,13 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					<el-tree ref="group" class="menu" node-key="id" :data="group"></el-tree>
+					<el-tree ref="group" class="menu" node-key="id" :data="group" highlight-current default-expand-all @node-click="groupClick">
+						<template #default="{ node, data }">
+							<span class="el-tree-node__label">
+								<i :class="['icon', data.children?'el-icon-folder':'el-icon-tickets']"></i>{{ node.label }}
+							</span>
+						</template>
+					</el-tree>
 				</el-main>
 			</el-container>
 		</el-aside>
@@ -16,10 +22,7 @@
 			</el-header>
 			<el-main>
 				<el-card shadow="never">
-					<el-button @click="load('1')">异步加载1</el-button>
+					<component :is="src"></component>
-					<el-button @click="load('2')">异步加载2</el-button>
-					<el-button @click="load(null)">卸载组件</el-button>
-					<sc-async-component :src="src"></sc-async-component>
 				</el-card>
 			</el-main>
 		</el-container>
@@ -27,13 +30,10 @@
 </template>
 
 <script>
-	import scAsyncComponent from './scAsyncComponent'
+	import { defineAsyncComponent, markRaw } from "vue"
 
 	export default {
 		name: 'report',
-		components: {
-			scAsyncComponent
-		},
 		data() {
 			return {
 				src: null,
@@ -41,15 +41,18 @@
 				group: [
 					{
 						label: '系统运维概况',
+						name: 'system'
 					},
 					{
 						label: '访客分析',
 						children: [
 							{
 								label: '地域分布',
+								name: 'region'
 							},
 							{
 								label: '访客人像',
+								name: 'user'
 							}
 						]
 					}
@@ -57,8 +60,17 @@
 			}
 		},
 		methods: {
-			load(src){
+			groupClick(data){
-				this.src = src
+				if(data.children) return
+				this.src = markRaw(
+					defineAsyncComponent({
+						loader: () => import(`@/views/template/report/pages/${data.name}`),
+						delay: 0,
+						timeout: 10000,
+						//loadingComponent: { template: '<div>加载中</div>' },
+						//errorComponent:  { template: '<div>加载失败</div>' }
+					})
+				)
 			}
 		}
 	}

src/views/template/report/pages/region.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>2</div>
+	<div>region</div>
 </template>
 
 <script>

src/views/template/report/pages/system.vue

@@ -0,0 +1,20 @@
+<template>
+	<div>system</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/template/report/pages/user.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>1</div>
+	<div>user</div>
 </template>
 
 <script>

src/views/vab/dicselect.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Descripttion: 字典选择器组件演示
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月3日15:51:20
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-card shadow="never" header="单选">
+			<sc-dic-select v-model="value" dic="notice" clearable filterable></sc-dic-select>
+		</el-card>
+		<el-card shadow="never" header="多选" style="margin-top: 15px;">
+			<sc-dic-select v-model="value2" dic="notice" clearable filterable multiple></sc-dic-select>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'dicselect',
+		data() {
+			return {
+				value: '',
+				value2: []
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>