add icons dialog

TODO.md

@@ -2,5 +2,6 @@
 
 1. 按钮加权限
 2. 国际化
-3. 表格高度 
-4. 表格时间格式修改 √
+3. 表格高度 √
+4. 表格时间格式修改 √
+5. icon列表 √

src/views/modules/monitoring/icons-dialog.vue

@@ -0,0 +1,594 @@
+<template>
+	<el-dialog :visible.sync="visible" :title="'Icons'">
+		<div style="background: #efefef; max-height: 500px; overflow: hidden scroll;">
+			<el-row :gutter="10">
+				<el-col v-for="icon in icons" :key="icon" :span="3" class="col-hover" style="padding: 8px; text-align: center; cursor: pointer;" @click.native="handleCopy(icon)">
+					<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true">
+						<use v-bind:xlink:href="`#${icon}`"></use>
+					</svg>
+				</el-col>
+			</el-row>
+		</div>
+
+		<div slot="footer">
+			<el-button @click="close()">Close</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+export default {
+	name: 'IconsDialog',
+	data() {
+		return {
+			icons: [],
+			visible: false
+		}
+	},
+	methods: {
+		init() {
+			this.loadIcons()
+			this.visible = true
+		},
+		loadIcons() {
+			this.icons = [
+				'icon-check-circle',
+				'icon-CI',
+				'icon-Dollar',
+				'icon-compass',
+				'icon-close-circle',
+				'icon-frown',
+				'icon-info-circle',
+				'icon-left-circle',
+				'icon-down-circle',
+				'icon-EURO',
+				'icon-copyright',
+				'icon-minus-circle',
+				'icon-meh',
+				'icon-plus-circle',
+				'icon-play-circle',
+				'icon-question-circle',
+				'icon-Pound',
+				'icon-right-circle',
+				'icon-smile',
+				'icon-trademark',
+				'icon-time-circle',
+				'icon-timeout',
+				'icon-earth',
+				'icon-YUAN',
+				'icon-up-circle',
+				'icon-warning-circle',
+				'icon-sync',
+				'icon-transaction',
+				'icon-undo',
+				'icon-redo',
+				'icon-reload',
+				'icon-reloadtime',
+				'icon-message',
+				'icon-dashboard',
+				'icon-issuesclose',
+				'icon-poweroff',
+				'icon-logout',
+				'icon-login',
+				'icon-piechart',
+				'icon-setting',
+				'icon-eye',
+				'icon-location',
+				'icon-edit-square',
+				'icon-export',
+				'icon-save',
+				'icon-Import',
+				'icon-appstore',
+				'icon-close-square',
+				'icon-down-square',
+				'icon-layout',
+				'icon-left-square',
+				'icon-play-square',
+				'icon-control',
+				'icon-codelibrary',
+				'icon-detail',
+				'icon-minus-square',
+				'icon-plus-square',
+				'icon-right-square',
+				'icon-project',
+				'icon-wallet',
+				'icon-up-square',
+				'icon-calculator',
+				'icon-interation',
+				'icon-check-square',
+				'icon-border',
+				'icon-border-outer',
+				'icon-border-top',
+				'icon-border-bottom',
+				'icon-border-left',
+				'icon-border-right',
+				'icon-border-inner',
+				'icon-border-verticle',
+				'icon-border-horizontal',
+				'icon-radius-bottomleft',
+				'icon-radius-bottomright',
+				'icon-radius-upleft',
+				'icon-radius-upright',
+				'icon-radius-setting',
+				'icon-adduser',
+				'icon-deleteteam',
+				'icon-deleteuser',
+				'icon-addteam',
+				'icon-user',
+				'icon-team',
+				'icon-areachart',
+				'icon-linechart',
+				'icon-barchart',
+				'icon-pointmap',
+				'icon-container',
+				'icon-database',
+				'icon-sever',
+				'icon-mobile',
+				'icon-tablet',
+				'icon-redenvelope',
+				'icon-book',
+				'icon-filedone',
+				'icon-reconciliation',
+				'icon-file-exception',
+				'icon-filesync',
+				'icon-filesearch',
+				'icon-solution',
+				'icon-fileprotect',
+				'icon-file-add',
+				'icon-file-excel',
+				'icon-file-exclamation',
+				'icon-file-pdf',
+				'icon-file-image',
+				'icon-file-markdown',
+				'icon-file-unknown',
+				'icon-file-ppt',
+				'icon-file-word',
+				'icon-file',
+				'icon-file-zip',
+				'icon-file-text',
+				'icon-file-copy',
+				'icon-snippets',
+				'icon-audit',
+				'icon-diff',
+				'icon-Batchfolding',
+				'icon-securityscan',
+				'icon-propertysafety',
+				'icon-safetycertificate',
+				'icon-insurance',
+				'icon-alert',
+				'icon-delete',
+				'icon-hourglass',
+				'icon-bulb',
+				'icon-experiment',
+				'icon-bell',
+				'icon-trophy',
+				'icon-rest',
+				'icon-USB',
+				'icon-skin',
+				'icon-home',
+				'icon-bank',
+				'icon-filter',
+				'icon-funnelplot',
+				'icon-like',
+				'icon-unlike',
+				'icon-unlock',
+				'icon-lock',
+				'icon-customerservice',
+				'icon-flag',
+				'icon-moneycollect',
+				'icon-medicinebox',
+				'icon-shop',
+				'icon-rocket',
+				'icon-shopping',
+				'icon-folder',
+				'icon-folder-open',
+				'icon-folder-add',
+				'icon-deploymentunit',
+				'icon-accountbook',
+				'icon-contacts',
+				'icon-carryout',
+				'icon-calendar-check',
+				'icon-calendar',
+				'icon-scan',
+				'icon-select',
+				'icon-boxplot',
+				'icon-build',
+				'icon-sliders',
+				'icon-laptop',
+				'icon-barcode',
+				'icon-camera',
+				'icon-cluster',
+				'icon-gateway',
+				'icon-car',
+				'icon-printer',
+				'icon-read',
+				'icon-cloud-server',
+				'icon-cloud-upload',
+				'icon-cloud',
+				'icon-cloud-download',
+				'icon-cloud-sync',
+				'icon-video',
+				'icon-notification',
+				'icon-sound',
+				'icon-radarchart',
+				'icon-qrcode',
+				'icon-fund',
+				'icon-image',
+				'icon-mail',
+				'icon-table',
+				'icon-idcard',
+				'icon-creditcard',
+				'icon-heart',
+				'icon-block',
+				'icon-error',
+				'icon-star',
+				'icon-gold',
+				'icon-heatmap',
+				'icon-wifi',
+				'icon-attachment',
+				'icon-edit',
+				'icon-key',
+				'icon-api',
+				'icon-disconnect',
+				'icon-highlight',
+				'icon-monitor',
+				'icon-link',
+				'icon-man',
+				'icon-percentage',
+				'icon-search',
+				'icon-pushpin',
+				'icon-phone',
+				'icon-shake',
+				'icon-tag',
+				'icon-wrench',
+				'icon-woman',
+				'icon-tags',
+				'icon-scissor',
+				'icon-mr',
+				'icon-share',
+				'icon-branches',
+				'icon-fork',
+				'icon-shrink',
+				'icon-arrawsalt',
+				'icon-verticalright',
+				'icon-verticalleft',
+				'icon-right',
+				'icon-left',
+				'icon-up',
+				'icon-down',
+				'icon-fullscreen',
+				'icon-fullscreen-exit',
+				'icon-doubleleft',
+				'icon-doubleright',
+				'icon-arrowright',
+				'icon-arrowup',
+				'icon-arrowleft',
+				'icon-arrowdown',
+				'icon-upload',
+				'icon-colum-height',
+				'icon-vertical-align-botto',
+				'icon-vertical-align-middl',
+				'icon-totop',
+				'icon-vertical-align-top',
+				'icon-download',
+				'icon-sort-descending',
+				'icon-sort-ascending',
+				'icon-fall',
+				'icon-swap',
+				'icon-stock',
+				'icon-rise',
+				'icon-indent',
+				'icon-outdent',
+				'icon-menu',
+				'icon-unorderedlist',
+				'icon-orderedlist',
+				'icon-align-right',
+				'icon-align-center',
+				'icon-align-left',
+				'icon-pic-center',
+				'icon-pic-right',
+				'icon-pic-left',
+				'icon-bold',
+				'icon-font-colors',
+				'icon-exclaimination',
+				'icon-font-size',
+				'icon-infomation',
+				'icon-line-height',
+				'icon-strikethrough',
+				'icon-underline',
+				'icon-number',
+				'icon-italic',
+				'icon-code',
+				'icon-column-width',
+				'icon-check',
+				'icon-ellipsis',
+				'icon-dash',
+				'icon-close',
+				'icon-enter',
+				'icon-line',
+				'icon-minus',
+				'icon-question',
+				'icon-plus',
+				'icon-rollback',
+				'icon-small-dash',
+				'icon-pause',
+				'icon-bg-colors',
+				'icon-crown',
+				'icon-drag',
+				'icon-desktop',
+				'icon-gift',
+				'icon-stop',
+				'icon-fire',
+				'icon-thunderbolt',
+				'icon-check-circle-fill',
+				'icon-left-circle-fill',
+				'icon-down-circle-fill',
+				'icon-minus-circle-fill',
+				'icon-close-circle-fill',
+				'icon-info-circle-fill',
+				'icon-up-circle-fill',
+				'icon-right-circle-fill',
+				'icon-plus-circle-fill',
+				'icon-question-circle-fill',
+				'icon-EURO-circle-fill',
+				'icon-frown-fill',
+				'icon-copyright-circle-fil',
+				'icon-CI-circle-fill',
+				'icon-compass-fill',
+				'icon-Dollar-circle-fill',
+				'icon-poweroff-circle-fill',
+				'icon-meh-fill',
+				'icon-play-circle-fill',
+				'icon-Pound-circle-fill',
+				'icon-smile-fill',
+				'icon-stop-fill',
+				'icon-warning-circle-fill',
+				'icon-time-circle-fill',
+				'icon-trademark-circle-fil',
+				'icon-YUAN-circle-fill',
+				'icon-heart-fill',
+				'icon-piechart-circle-fil',
+				'icon-dashboard-fill',
+				'icon-message-fill',
+				'icon-check-square-fill',
+				'icon-down-square-fill',
+				'icon-minus-square-fill',
+				'icon-close-square-fill',
+				'icon-codelibrary-fill',
+				'icon-left-square-fill',
+				'icon-play-square-fill',
+				'icon-up-square-fill',
+				'icon-right-square-fill',
+				'icon-plus-square-fill',
+				'icon-accountbook-fill',
+				'icon-carryout-fill',
+				'icon-calendar-fill',
+				'icon-calculator-fill',
+				'icon-interation-fill',
+				'icon-project-fill',
+				'icon-detail-fill',
+				'icon-save-fill',
+				'icon-wallet-fill',
+				'icon-control-fill',
+				'icon-layout-fill',
+				'icon-appstore-fill',
+				'icon-mobile-fill',
+				'icon-tablet-fill',
+				'icon-book-fill',
+				'icon-redenvelope-fill',
+				'icon-safetycertificate-f',
+				'icon-propertysafety-fill',
+				'icon-insurance-fill',
+				'icon-securityscan-fill',
+				'icon-file-exclamation-fil',
+				'icon-file-add-fill',
+				'icon-file-fill',
+				'icon-file-excel-fill',
+				'icon-file-markdown-fill',
+				'icon-file-text-fill',
+				'icon-file-ppt-fill',
+				'icon-file-unknown-fill',
+				'icon-file-word-fill',
+				'icon-file-zip-fill',
+				'icon-file-pdf-fill',
+				'icon-file-image-fill',
+				'icon-diff-fill',
+				'icon-file-copy-fill',
+				'icon-snippets-fill',
+				'icon-batchfolding-fill',
+				'icon-reconciliation-fill',
+				'icon-folder-add-fill',
+				'icon-folder-fill',
+				'icon-folder-open-fill',
+				'icon-database-fill',
+				'icon-container-fill',
+				'icon-sever-fill',
+				'icon-calendar-check-fill',
+				'icon-image-fill',
+				'icon-idcard-fill',
+				'icon-creditcard-fill',
+				'icon-fund-fill',
+				'icon-read-fill',
+				'icon-contacts-fill',
+				'icon-delete-fill',
+				'icon-notification-fill',
+				'icon-flag-fill',
+				'icon-moneycollect-fill',
+				'icon-medicinebox-fill',
+				'icon-rest-fill',
+				'icon-shopping-fill',
+				'icon-skin-fill',
+				'icon-video-fill',
+				'icon-sound-fill',
+				'icon-bulb-fill',
+				'icon-bell-fill',
+				'icon-filter-fill',
+				'icon-fire-fill',
+				'icon-funnelplot-fill',
+				'icon-gift-fill',
+				'icon-hourglass-fill',
+				'icon-home-fill',
+				'icon-trophy-fill',
+				'icon-location-fill',
+				'icon-cloud-fill',
+				'icon-customerservice-fill',
+				'icon-experiment-fill',
+				'icon-eye-fill',
+				'icon-like-fill',
+				'icon-lock-fill',
+				'icon-unlike-fill',
+				'icon-star-fill',
+				'icon-unlock-fill',
+				'icon-alert-fill',
+				'icon-api-fill',
+				'icon-highlight-fill',
+				'icon-phone-fill',
+				'icon-edit-fill',
+				'icon-pushpin-fill',
+				'icon-rocket-fill',
+				'icon-thunderbolt-fill',
+				'icon-tag-fill',
+				'icon-wrench-fill',
+				'icon-tags-fill',
+				'icon-bank-fill',
+				'icon-camera-fill',
+				'icon-error-fill',
+				'icon-crown-fill',
+				'icon-mail-fill',
+				'icon-car-fill',
+				'icon-printer-fill',
+				'icon-shop-fill',
+				'icon-setting-fill',
+				'icon-USB-fill',
+				'icon-golden-fill',
+				'icon-build-fill',
+				'icon-boxplot-fill',
+				'icon-sliders-fill',
+				'icon-alibaba',
+				'icon-alibabacloud',
+				'icon-antdesign',
+				'icon-ant-cloud',
+				'icon-behance',
+				'icon-googleplus',
+				'icon-medium',
+				'icon-google',
+				'icon-IE',
+				'icon-amazon',
+				'icon-slack',
+				'icon-alipay',
+				'icon-taobao',
+				'icon-zhihu',
+				'icon-HTML',
+				'icon-linkedin',
+				'icon-yahoo',
+				'icon-facebook',
+				'icon-skype',
+				'icon-CodeSandbox',
+				'icon-chrome',
+				'icon-codepen',
+				'icon-aliwangwang',
+				'icon-apple',
+				'icon-android',
+				'icon-sketch',
+				'icon-Gitlab',
+				'icon-dribbble',
+				'icon-instagram',
+				'icon-reddit',
+				'icon-windows',
+				'icon-yuque',
+				'icon-Youtube',
+				'icon-Gitlab-fill',
+				'icon-dropbox',
+				'icon-dingtalk',
+				'icon-android-fill',
+				'icon-apple-fill',
+				'icon-HTML-fill',
+				'icon-windows-fill',
+				'icon-QQ',
+				'icon-twitter',
+				'icon-skype-fill',
+				'icon-weibo',
+				'icon-yuque-fill',
+				'icon-Youtube-fill',
+				'icon-yahoo-fill',
+				'icon-wechat-fill',
+				'icon-chrome-fill',
+				'icon-alipay-circle-fill',
+				'icon-aliwangwang-fill',
+				'icon-behance-circle-fill',
+				'icon-amazon-circle-fill',
+				'icon-codepen-circle-fill',
+				'icon-CodeSandbox-circle-f',
+				'icon-dropbox-circle-fill',
+				'icon-github-fill',
+				'icon-dribbble-circle-fill',
+				'icon-googleplus-circle-f',
+				'icon-medium-circle-fill',
+				'icon-QQ-circle-fill',
+				'icon-IE-circle-fill',
+				'icon-google-circle-fill',
+				'icon-dingtalk-circle-fill',
+				'icon-sketch-circle-fill',
+				'icon-slack-circle-fill',
+				'icon-twitter-circle-fill',
+				'icon-taobao-circle-fill',
+				'icon-weibo-circle-fill',
+				'icon-zhihu-circle-fill',
+				'icon-reddit-circle-fill',
+				'icon-alipay-square-fill',
+				'icon-dingtalk-square-fill',
+				'icon-CodeSandbox-square-f',
+				'icon-behance-square-fill',
+				'icon-amazon-square-fill',
+				'icon-codepen-square-fill',
+				'icon-dribbble-square-fill',
+				'icon-dropbox-square-fill',
+				'icon-facebook-fill',
+				'icon-googleplus-square-f',
+				'icon-google-square-fill',
+				'icon-instagram-fill',
+				'icon-IE-square-fill',
+				'icon-medium-square-fill',
+				'icon-linkedin-fill',
+				'icon-QQ-square-fill',
+				'icon-reddit-square-fill',
+				'icon-twitter-square-fill',
+				'icon-sketch-square-fill',
+				'icon-slack-square-fill',
+				'icon-taobao-square-fill',
+				'icon-weibo-square-fill',
+				'icon-zhihu-square-fill',
+				'icon-zoomout',
+				'icon-apartment',
+				'icon-audio',
+				'icon-audio-fill',
+				'icon-robot',
+				'icon-zoomin'
+			]
+		},
+		handleCopy(v) {
+			if (navigator.clipboard) {
+				/** 如果支持剪切板api */
+				navigator.clipboard
+					.writeText(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
+					.then(() => {
+						this.$message.success('已复制')
+					})
+			} else {
+				this.$message.info('请打开 Console 手动复制.')
+				console.log(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`)
+			}
+		},
+		close() {
+			this.visible = false
+			this.$emit('destory-me')
+		}
+	}
+}
+</script>
+
+<style scoped>
+.col-hover:hover {
+	background: #ddd;
+}
+</style>

src/views/modules/sys/dict-type.vue

@@ -17,6 +17,9 @@
 				<el-form-item>
 					<el-button v-if="$hasPermission('sys:dict:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
 				</el-form-item>
+				<el-form-item>
+					<el-button @click="showIcons()">所有图标</el-button>
+				</el-form-item>
 			</el-form>
 			<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
 				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
@@ -48,6 +51,8 @@
 			</el-pagination>
 			<!-- 弹窗, 新增 / 修改 -->
 			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+			<!-- icons  -->
+			<icons-dialog ref="iconRef" v-if="displayIcon" @destory-me="handleDestory" />
 		</div>
 	</el-card>
 </template>
@@ -56,6 +61,7 @@
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './dict-type-add-or-update'
 import { addDynamicRoute } from '@/router'
+import IconsDialog from '@/views/modules/monitoring/icons-dialog.vue'
 export default {
 	mixins: [mixinViewModule],
 	data() {
@@ -66,6 +72,7 @@ export default {
 				deleteURL: '/sys/dict/type',
 				deleteIsBatch: true
 			},
+			displayIcon: false,
 			dataForm: {
 				id: '0',
 				dictName: '',
@@ -74,9 +81,20 @@ export default {
 		}
 	},
 	components: {
-		AddOrUpdate
+		AddOrUpdate,
+		IconsDialog
 	},
 	methods: {
+		//
+		showIcons() {
+			this.displayIcon = true
+			this.$nextTick(() => {
+				this.$refs.iconRef.init()
+			})
+		},
+		handleDestory() {
+			this.displayIcon = false
+		},
 		// 子级
 		childHandle(row) {
 			// 路由参数