This commit is contained in:
sc 2021-08-03 17:04:34 +08:00
parent a1b2f5e091
commit 7653a1b573
11 changed files with 181 additions and 13 deletions

View File

@ -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: {

View File

@ -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>

21
src/config/dicSelect.js Normal file
View File

@ -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值字段
}
}

View File

@ -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)

View File

@ -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'),
}
]
}

View File

@ -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;}

View File

@ -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>' }
})
)
}
}
}

View File

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

View File

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

View File

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

View File

@ -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>