From 757a0c401aaa4fbb65ace4e0b56bd8083ca2383c Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 27 Jul 2021 16:14:36 +0800
Subject: [PATCH] ADD scIconSelect

---
 src/components/scIconSelect/el.json   |  1 +
 src/components/scIconSelect/index.vue | 97 +++++++++++++++++++++++++++
 src/config/iconSelect.js              | 17 +++++
 src/router/systemRouter.js            |  9 +++
 src/views/vab/iconselect.vue          | 71 ++++++++++++++++++++
 5 files changed, 195 insertions(+)
 create mode 100644 src/components/scIconSelect/el.json
 create mode 100644 src/components/scIconSelect/index.vue
 create mode 100644 src/config/iconSelect.js
 create mode 100644 src/views/vab/iconselect.vue

diff --git a/src/components/scIconSelect/el.json b/src/components/scIconSelect/el.json
new file mode 100644
index 00000000..873aefb4
--- /dev/null
+++ b/src/components/scIconSelect/el.json
@@ -0,0 +1 @@
+["platform-eleme","eleme","delete-solid","delete","s-tools","setting","user-solid","user","phone","phone-outline","more","more-outline","star-on","star-off","s-goods","goods","warning","warning-outline","question","info","remove","circle-plus","success","error","zoom-in","zoom-out","remove-outline","circle-plus-outline","circle-check","circle-close","s-help","help","minus","plus","check","close","picture","picture-outline","picture-outline-round","upload","upload2","download","camera-solid","camera","video-camera-solid","video-camera","message-solid","bell","s-cooperation","s-order","s-platform","s-fold","s-unfold","s-operation","s-promotion","s-home","s-release","s-ticket","s-management","s-open","s-shop","s-marketing","s-flag","s-comment","s-finance","s-claim","s-custom","s-opportunity","s-data","s-check","s-grid","menu","share","d-caret","caret-left","caret-right","caret-bottom","caret-top","bottom-left","bottom-right","back","right","bottom","top","top-left","top-right","arrow-left","arrow-right","arrow-down","arrow-up","d-arrow-left","d-arrow-right","video-pause","video-play","refresh","refresh-right","refresh-left","finished","sort","sort-up","sort-down","rank","loading","view","c-scale-to-original","date","edit","edit-outline","folder","folder-opened","folder-add","folder-remove","folder-delete","folder-checked","tickets","document-remove","document-delete","document-copy","document-checked","document","document-add","printer","paperclip","takeaway-box","search","monitor","attract","mobile","scissors","umbrella","headset","brush","mouse","coordinate","magic-stick","reading","data-line","data-board","pie-chart","data-analysis","collection-tag","film","suitcase","suitcase-1","receiving","collection","files","notebook-1","notebook-2","toilet-paper","office-building","school","table-lamp","house","no-smoking","smoking","shopping-cart-full","shopping-cart-1","shopping-cart-2","shopping-bag-1","shopping-bag-2","sold-out","sell","present","box","bank-card","money","coin","wallet","discount","price-tag","news","guide","male","female","thumb","cpu","link","connection","open","turn-off","set-up","chat-round","chat-line-round","chat-square","chat-dot-round","chat-dot-square","chat-line-square","message","postcard","position","turn-off-microphone","microphone","close-notification","bangzhu","time","odometer","crop","aim","switch-button","full-screen","copy-document","mic","stopwatch","medal-1","medal","trophy","trophy-1","first-aid-kit","discover","place","location","location-outline","location-information","add-location","delete-location","map-location","alarm-clock","timer","watch-1","watch","lock","unlock","key","service","mobile-phone","bicycle","truck","ship","basketball","football","soccer","baseball","wind-power","light-rain","lightning","heavy-rain","sunrise","sunrise-1","sunset","sunny","cloudy","partly-cloudy","cloudy-and-sunny","moon","moon-night","dish","dish-1","food","chicken","fork-spoon","knife-fork","burger","tableware","sugar","dessert","ice-cream","hot-water","water-cup","coffee-cup","cold-drink","goblet","goblet-full","goblet-square","goblet-square-full","refrigerator","grape","watermelon","cherry","apple","pear","orange","coffee","ice-tea","ice-drink","milk-tea","potato-strips","lollipop","ice-cream-square","ice-cream-round"]
diff --git a/src/components/scIconSelect/index.vue b/src/components/scIconSelect/index.vue
new file mode 100644
index 00000000..a7ede11a
--- /dev/null
+++ b/src/components/scIconSelect/index.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Descripttion: 图标选择器组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月27日10:02:46
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-icon-select">
+		<el-input v-model="defaultValue" :prefix-icon="defaultValue||'none'" :placeholder="placeholder" :clearable="clearable" :disabled="disabled">
+			<template #append><el-button icon="el-icon-more" @click="open"></el-button></template>
+		</el-input>
+		<el-dialog title="图标选择器" v-model="dialogVisible" :width="780" destroy-on-close>
+			<el-tabs style="margin-top: -30px;">
+				<el-tab-pane  v-for="item in data" :key="item.name" lazy>
+					<template #label>
+						{{item.name}} <el-tag size="mini" type="info">{{item.icons.length}}</el-tag>
+					</template>
+					<div class="sc-icon-select__list">
+						<el-scrollbar>
+							<ul @click="selectIcon">
+								<li v-for="icon in item.icons" :key="icon">
+									<i :class="item.namespace + icon"></i>
+								</li>
+							</ul>
+						</el-scrollbar>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	//获取elementPlus所有图标 https://github.com/element-plus/element-plus/blob/dev/website/icon.json
+	import config from "@/config/iconSelect"
+	import elicon from './el.json'
+
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+			placeholder: { type: String, default: "请输入或者选择图标" },
+			clearable: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+		},
+		data() {
+			return {
+				defaultValue: '',
+				dialogVisible: false,
+				data: [
+					{
+						name: '默认',
+						namespace: 'el-icon-',
+						icons: elicon
+					}
+				]
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.defaultValue = val
+			}
+		},
+		mounted() {
+			this.defaultValue = this.modelValue
+			this.data.push(...config.icons)
+		},
+		methods: {
+			open(){
+				if(this.disabled){
+					return false
+				}
+				this.dialogVisible = true
+			},
+			selectIcon(e){
+				if(e.target.tagName != 'I'){
+					return false
+				}
+				this.defaultValue = e.target.className
+				this.dialogVisible = false
+				this.$emit('update:modelValue', this.defaultValue);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-icon-select {display: inline-block;}
+	.sc-icon-select__list {height:360px;overflow: auto;}
+	.sc-icon-select__list ul {}
+	.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;box-shadow: 0 0 0 1px #eee;transition: all 0.1s;border-radius: 4px;}
+	.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;background: #fff;display: flex;justify-content: center;align-items: center;cursor: pointer;border-radius: 4px;}
+	.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
+	.sc-icon-select__list li:hover i {color: #409EFF;}
+</style>
diff --git a/src/config/iconSelect.js b/src/config/iconSelect.js
new file mode 100644
index 00000000..c0979ea2
--- /dev/null
+++ b/src/config/iconSelect.js
@@ -0,0 +1,17 @@
+import scuiicon from '@/assets/font/scicon/iconfont.json'
+
+//图标选择器配置
+export default {
+	icons: [
+		{
+			name: 'SCUI',
+			namespace: 'sc-icon-',
+			icons: scuiicon.glyphs.map(v => v.font_class)
+		},
+		{
+			name: '扩展',
+			namespace: 'el-icon-',
+			icons: ['platform-eleme']
+		}
+	]
+}
diff --git a/src/router/systemRouter.js b/src/router/systemRouter.js
index df3705d9..696294a6 100644
--- a/src/router/systemRouter.js
+++ b/src/router/systemRouter.js
@@ -32,6 +32,15 @@ const routes = [{
 							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
+					},
+					{
+						name: "iconSelect",
+						path: "/vab/iconselect",
+						meta: {
+							title: "图标选择器",
+							icon: "el-icon-orange",
+						},
+						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/vab/iconselect'),
 					}
 				]
 			}
diff --git a/src/views/vab/iconselect.vue b/src/views/vab/iconselect.vue
new file mode 100644
index 00000000..6931639f
--- /dev/null
+++ b/src/views/vab/iconselect.vue
@@ -0,0 +1,71 @@
+<!--
+ * @Descripttion: 图标选择器组件演示文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月27日09:33:06
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="支持扩展的图标选择器,除了默认的图标组还可以在 @/config/iconSelect 中定义更多的图标组" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-card shadow="never">
+			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="图标" prop="icon">
+					<sc-icon-select v-model="form.icon" clearable :disabled="disabled"></sc-icon-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm">保存</el-button>
+				    <el-button @click="resetForm">重置</el-button>
+					 <el-button @click="setdisabled">{{disabled?'移除禁用':'设为禁用'}}</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import scIconSelect from '@/components/scIconSelect'
+
+	export default {
+		name: 'iconSelect',
+		components: {
+			scIconSelect
+		},
+		data() {
+			return {
+				form: {
+					icon: ''
+				},
+				rules: {
+					icon: [
+						{required: true, message: '请选择图标', trigger: 'change'}
+					]
+				},
+				disabled: false
+			}
+		},
+		methods: {
+			submitForm(){
+				this.$refs.ruleForm.validate((valid) => {
+					if (valid) {
+						alert('请看控制台输出');
+						console.log(this.form);
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(){
+				this.$refs.ruleForm.resetFields();
+			},
+			setdisabled(){
+				this.disabled = !this.disabled
+			}
+		}
+	}
+</script>
+
+<style>
+</style>