add scSelect

src/api/index.js

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

src/components/scSelect/index.vue

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

src/config/select.js

@@ -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显示字段
+		label: 'label',					//映射label显示字段
-		value: 'key',					//映射value值字段
+		value: 'value',					//映射value值字段
 	}
 }

src/main.js

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

src/router/systemRouter.js

@@ -43,13 +43,13 @@ const routes = [{
 						component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
 					},
 					{
-						name: "dicselect",
+						name: "scselect",
-						path: "/vab/dicselect",
+						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'),
 					}
 				]
 			}

src/views/vab/dicselect.vue

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

src/views/vab/select.vue

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