first commit

2026-01-08 14:58:16 +08:00
commit 556e5d64aa
9575 changed files with 1621095 additions and 0 deletions
@@ -0,0 +1,133 @@
+<template>
+    <el-dialog title="图标选择" :visible.sync="visible" width="800px" :close-on-click-modal="false" :modal="false">
+        <el-tabs v-model="activeKey" tab-position="left" size="small" @tab-click="activeChange">
+            <el-tab-pane v-for="item in iconData" :key="item.key" :label="item.name" :name="item.key" class="pl25">
+                <div v-if="item.iconItem.length > 1" class="xn-icon-select-radio">
+                    <el-radio-group v-model="iconItemDefault" @change="radioGroupChange" size="small">
+                        <el-radio v-for="iconItem in item.iconItem" :key="iconItem.key" :label="iconItem.key" border>
+                            {{ iconItem.name }}
+                        </el-radio>
+                    </el-radio-group>
+                </div>
+                <div :key="iconItemIns.key" v-for="iconItemIns in item.iconItem">
+                    <div v-show="iconItemIns.key === iconItemDefault" class="xn-icon-select-list">
+                        <ul style="white-space: normal">
+                            <li v-for="icon in iconItemIns.item" :key="icon" :class="icon === value ? 'active' : ''" @click="selectIcon(icon)">
+                                <div :id="icon" @mouseover="iconInfo = icon">
+                                    <el-image :src="'/assets/platform/img/svg/' + icon + '.svg'" alt="" class="xn-icons">
+                                        <div slot="error" class="image-slot">
+                                            <i class="el-icon-picture-outline"></i>
+                                        </div>
+                                    </el-image>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script>
+module.exports = {
+    name: "index",
+    props: {
+        value: {
+            type: String,
+            default: ""
+        }
+    },
+    data() {
+        return {
+            visible: false,
+            iconData: [],
+            activeKey: "default",
+            iconItemDefault: "default",
+            iconInfo: null
+        }
+    },
+    methods: {
+        activeChange(val) {},
+
+        radioGroupChange(e) {
+            console.log(e)
+        },
+
+        //打开
+        showIconModal() {
+            this.visible = true
+        },
+
+        defaultSetting(value) {
+            if (value) {
+                this.value = value
+                // 判断展开哪个
+                if (value.indexOf("-outlined") > -1 || value.indexOf("-filled") > -1 || value.indexOf("-two-tone") > -1) {
+                    this.activeKey = "default"
+                    if (value.indexOf("-two-tone") > -1) {
+                        this.iconItemDefault = "twotone"
+                    } else if (value.indexOf("-filled") > -1) {
+                        this.iconItemDefault = "filled"
+                    }
+                } else if (value.indexOf("-extend") > -1) {
+                    // 扩展列表
+                    this.activeKey = "extend"
+                    // 如扩展其他顶部单选的情况，默认选中在这里配置,同时这里需要做判断
+                    // this.iconItemDefault = '您的json中配置的'
+                }
+            }
+        },
+
+        // 选择图标后关闭并返回
+        selectIcon(icon) {
+            this.visible = false
+            this.$emit("input", icon)
+        }
+    },
+    mounted() {
+        this.iconData.push(...window.iconSelectConfig.icons)
+    },
+    created() {}
+}
+</script>
+
+<style scoped>
+.xn-icon-select-radio {
+    padding-left: 5px;
+    padding-bottom: 10px;
+}
+.xn-icons {
+    /*font-size: 26px;*/
+    /*width: 100%;*/
+    /*height: 100%;*/
+    height: 26px;
+    width: 26px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.xn-icon-select-list {
+    height: 360px;
+    overflow: auto;
+}
+.xn-icon-select-list ul li {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    padding: 18px;
+    margin: 5px;
+    border-radius: 2px;
+    vertical-align: top;
+    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.06);
+    transition: all 0.1s;
+    position: relative;
+    box-sizing: border-box;
+}
+.xn-icon-select-list ul li:hover,
+.xn-icon-select-list ul li.active {
+    cursor: pointer;
+    color: #ffffff;
+    background-color: var(--color-primary);
+}
+</style>