zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add scSelect

This commit is contained in:
sc 2021-08-04 13:44:50 +08:00
parent 7653a1b573
commit 4d5764cbb8
7 changed files with 90 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/index.js
View File

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

25
src/components/scDicSelect/index.vue → src/components/scSelect/index.vue
View File

@ -1,5 +1,5 @@
<!--
* @Descripttion: 字典选择器
* @Descripttion: 异步选择器
* @version: 1.0
* @Author: sakuya
* @Date: 2021年8月3日15:53:37
@ -9,33 +9,33 @@
<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-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
<slot name="option" :data="item"></slot>
</el-option>
</el-select>
</template>
<script>
import config from "@/config/dicSelect";
import config from "@/config/select";
export default {
props: {
apiObj: { type: Object, default: () => {} },
dic: { type: String, default: "" },
params: { type: Object, default: () => ({}) },
params: { type: Object, default: () => ({}) }
},
data() {
return {
dicParams: this.params,
loading: false,
options: [],
props: config.props
props: config.props,
}
},
mounted() {
},
methods: {
//选项显示隐藏事件
visibleChange(ispoen){
if(ispoen && this.options.length==0){
if(ispoen && this.options.length==0 && (this.dic || this.apiObj)){
this.getRemoteData()
}
},
@ -43,7 +43,12 @@
async getRemoteData(){
this.loading = true
this.dicParams[config.request.name] = this.dic
var res = await config.apiObj.get(this.params)
var res = {}
if(this.apiObj){
res = await this.apiObj.get(this.params)
}else if(this.dic){
res = await config.dicApiObj.get(this.params)
}
var response = config.parseData(res)
this.options = response.data
this.loading = false

6
src/config/dicSelect.js → src/config/select.js
View File

@ -3,7 +3,7 @@ import API from "@/api";
//字典选择器配置
export default {
apiObj: API.dic.get, //上传请求API对象
dicApiObj: API.dic.get, //获取字典接口对象
parseData: function (res) {
return {
data: res.data, //分析行数据字段结构
@ -15,7 +15,7 @@ export default {
name: 'name' //规定搜索字段
},
props: {
label: 'name', //映射label显示字段
value: 'key', //映射value值字段
label: 'label', //映射label显示字段
value: 'value', //映射value值字段
}
}

4
src/main.js
View File

@ -19,7 +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 scSelect from './components/scSelect'
import auth from './directives/auth'
import role from './directives/role'
@ -45,7 +45,7 @@ app.component('scUploadMultiple', scUploadMultiple);
app.component('scFormTable', scFormTable);
app.component('scTableSelect', scTableSelect);
app.component('scPageHeader', scPageHeader);
app.component('scDicSelect', scDicSelect);
app.component('scSelect', scSelect);
//注册全局指令
app.directive('auth', auth)

8
src/router/systemRouter.js
View File

@ -43,13 +43,13 @@ const routes = [{
component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
},
{
name: "dicselect",
path: "/vab/dicselect",
name: "scselect",
path: "/vab/select",
meta: {
title: "字典选择器",
title: "异步选择器",
icon: "el-icon-document-copy",
},
component: () => import(/* webpackChunkName: "dicselect" */ '@/views/vab/dicselect'),
component: () => import(/* webpackChunkName: "select" */ '@/views/vab/select'),
}
]
}

40
src/views/vab/dicselect.vue
View File

@ -1,40 +0,0 @@
<!--
* @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>

65
src/views/vab/select.vue Normal file
View File

@ -0,0 +1,65 @@
<!--
* @Descripttion: 字典选择器组件演示
* @version: 1.0
* @Author: sakuya
* @Date: 2021年8月3日15:51:20
* @LastEditors:
* @LastEditTime:
-->
<template>
<el-main>
<el-alert title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件" type="success" style="margin-bottom:20px;"></el-alert>
<el-row :gutter="15">
<el-col :lg="12">
<el-card shadow="never" header="异步单选">
<sc-select v-model="value" :apiObj="$API.dic.get" clearable filterable></sc-select>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" header="异步多选">
<sc-select v-model="value2" :apiObj="$API.dic.get" clearable filterable multiple></sc-select>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" header="字典选择器">
<sc-select v-model="value3" dic="notice" clearable filterable></sc-select>
</el-card>
</el-col>
<el-col :lg="12">
<el-card shadow="never" header="自定义模板">
<sc-select v-model="value4" dic="notice" clearable filterable placeholder="自定义placeholder">
<template #option="{data}">
<span style="float: left">{{ data.label }}</span>
<span style="float: right; color: #999; font-size: 13px">{{ data.value }}</span>
</template>
</sc-select>
</el-card>
</el-col>
</el-row>
</el-main>
</template>
<script>
export default {
name: 'scselect',
data() {
return {
value: '',
value2: [],
value3: '',
value4: ''
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
</style>