This commit is contained in:
parent
a1b2f5e091
commit
7653a1b573
|
@ -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: {
|
||||
|
|
|
@ -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>
|
|
@ -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值字段
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
|
|
|
@ -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'),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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;}
|
||||
|
|
|
@ -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>
|
||||
<el-button @click="load('2')">异步加载2</el-button>
|
||||
<el-button @click="load(null)">卸载组件</el-button>
|
||||
<sc-async-component :src="src"></sc-async-component>
|
||||
<component :is="src"></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){
|
||||
this.src = src
|
||||
groupClick(data){
|
||||
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>' }
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>2</div>
|
||||
<div>region</div>
|
||||
</template>
|
||||
|
||||
<script>
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>system</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>1</div>
|
||||
<div>user</div>
|
||||
</template>
|
||||
|
||||
<script>
|
|
@ -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>
|
Loading…
Reference in New Issue