From 8e93a889280064483b901959e3b42f966d0ad371 Mon Sep 17 00:00:00 2001 From: wangting <wangting@vci-tech.com> Date: 星期二, 24 十二月 2024 14:30:13 +0800 Subject: [PATCH] 图标管理,图标选择组件,图标显示组件 --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue | 236 +++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 165 insertions(+), 71 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue index 228d56c..0f4c415 100644 --- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue +++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue @@ -4,20 +4,21 @@ <basic-container> <div style="display: flex;justify-content: space-between;flex-wrap: wrap"> <div class="tag-group"> - <span class="tag-group__title">鍒嗙被</span> + <span class="tag-group__title">鍒嗙粍</span> <el-tag v-for="item in types" - :key="item.value" - :type="checkedTypes.includes(item.value)?'success':'info'" size="small" - effect="plain" @click="changeType(item.value)"> - {{ item.label }} + :key="item.key" + :type="checkedTypes.includes(item.key)?'success':'info'" size="small" + effect="plain" @click="changeType(item.key)"> + {{ item.value }} </el-tag> </div> <avue-input v-model="searchText" @change="handleSearch" placeholder="鏌ヨ" size="mini" prefixIcon="el-icon-search" style="width: 300px;max-width: 30%"></avue-input> </div> <div style="height: calc(100vh - 190px)"> <div> - <el-button icon="el-icon-plus" type="primary" size="mini" @click="uploadHandler">娣诲姞</el-button> + <el-button icon="el-icon-plus" type="primary" size="mini" @click="addHandler">娣诲姞</el-button> + <el-button icon="el-icon-upload" type="primary" size="mini" @click="uploadHandler">涓婁紶</el-button> </div> <el-tabs v-model="activeName" @tab-click="handleClick"> @@ -25,8 +26,8 @@ <div class="iconList"> <div class="iconItem" v-for="svg in item.list" :data-value="svg.name" v-right-click="{action:checkSvg,data:svg}"> - <div v-html="svg.content"></div> - <!--<span>{{svg.name.split(':')[1]}}</span>--> + <div class="svgContent" v-html="svg.content"></div> + <span>{{svg.name.split(':')[1]}}</span> </div> </div> <div v-if="menuVisible" class="el-cascader-panel is-bordered iconList__menu" :style="menuPosition"> @@ -39,19 +40,31 @@ <!-- 涓婁紶 --> <el-dialog v-dialogDrag - title="娣诲姞鍥炬爣" + title="涓婁紶鍥炬爣" :visible.sync="visible" append-to-body="true" class="avue-dialog" - width="500px" + width="600px" @close="visibleCloseHandler" > - <avue-form ref="form" :option="option" v-model="form" :upload-after="uploadAfter"> </avue-form> + <avue-form ref="form" :option="option" v-model="form" :upload-after="uploadAfter" style="margin-bottom: 0;height:90px;overflow: hidden"> </avue-form> + <pre style="font-size: 12px;color: #b3b3b3;margin-top: 0;padding:5px;background-color: #f5f5f5">涓婁紶鏂囦欢涓簀son鏂囦欢锛岀ず渚嬪涓� +[ + { + "name": "iconoir:accessibility", + "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M7 9l5 1m5-1l-5 1m0 0v3m0 0l-2 5m2-5l2 5\"/><path fill=\"currentColor\" d=\"M12 7a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1\"/></g></svg>" + }, + { + "name": "iconoir:accessibility-sign", + "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"m11.5 12.5l7-.5l-1.5 6.5m-5.5-6l4.5-5L12.5 5L10 7.5m8.5-1a2 2 0 1 1 0-4a2 2 0 0 1 0 4\"/><path d=\"M5.5 12.5a5 5 0 0 1 7.584 6M3.729 15A5 5 0 0 0 11 20.831\"/></g></svg>" + } + ] + 鏂囦欢鍐呭椤讳弗鏍兼寜鐓хず渚嬫牸寮忥紝name涓哄浘鏍囧簱鍚�+鍥炬爣鍚嶇О锛屼互鈥�:鈥濆垎闅旓紝svg涓哄浘鏍噃tml浠g爜</pre> </el-dialog> - <!-- 淇敼 --> + <!-- 娣诲姞銆佷慨鏀� --> <el-dialog v-dialogDrag - title="淇敼鍥炬爣" + :title="editType=='add'?'娣诲姞鍥炬爣':'淇敼鍥炬爣'" :visible.sync="editVisible" append-to-body="true" class="avue-dialog" @@ -71,6 +84,7 @@ <script> import {getIcons,addIcon,updateIcon,deleteIcon} from "@/api/UI/Icons"; +import {getDicts} from "@/api/system/dict"; import {validatenull} from "@/util/validate"; import {getStore} from "@/util/store"; import store from "@/store"; @@ -91,16 +105,7 @@ }, data() { return { - types: [{ - label:'鎸夐挳', - value:0 - },{ - label:'鏍囩浜�', - value:1 - },{ - label:'鏍囩涓�', - value:2 - }], + types: [], checkedTypes:[], searchText:'', activeName:'', @@ -113,12 +118,16 @@ submitBtn:false, emptyBtn:false, column: [{ - label: '鍒嗙被', + label: '鍒嗙粍', prop: 'groups', type: 'select', span: 24, multiple:true, - dicData:this.types + dicData:[], + props:{ + label:'value', + value:'key' + } }, { label: "闄勪欢涓婁紶", prop: "file", @@ -137,27 +146,51 @@ groups:[], file:null }, + editType:'edit', editVisible:false, editOption:{ - labelWidth: 80, + labelWidth: 90, submitBtn:false, emptyBtn:false, column: [{ - label: 'name', - prop: 'name', + label: '鍥炬爣搴撳悕', + prop: 'libname', type: 'input', disabled:true, span: 24, rules: [{ required: true, - message: "璇疯緭鍏ュ浘鏍噉ame", + message: "璇疯緭鍏ュ浘鏍囧簱鍚�", trigger: "blur" }] + },{ + label: '鍚嶇О', + prop: 'iconname', + type: 'input', + disabled:true, + span: 24, + rules: [{ + required: true, + message: "璇疯緭鍏ュ浘鏍囧悕绉�", + trigger: "blur" + }] + },{ + label: '鍒嗙粍', + prop: 'groups', + type: 'select', + span: 24, + multiple:true, + dicData:[], + props:{ + label:'value', + value:'key' + } }, { - label: "svg", + label: "svg浠g爜", prop: "content", type: "textarea", span: 24, + placeholder:'璇疯緭鍏ュ浘鏍噑vg浠g爜锛屾牸寮忕ず渚�<svg xmlns=\"http://www.w3.org/2000/svg\" ></svg>', rules: [{ required: true, message: "璇疯緭鍏ュ浘鏍噑vg浠g爜", @@ -167,7 +200,8 @@ }, editForm:{ oid:'', - name:'', + libname:'', + iconname:'', content:'' }, menuVisible:false, @@ -193,20 +227,35 @@ } }, created() { - this.initList(); - this.option.column[0].dicData=this.types; - }, + this.getGroups(); + this.initList(); }, methods:{ + getGroups() { + getDicts('EnumIconGroups').then(res => { + if (res.data.success) { + this.types = res.data.obj; + this.option.column[0].dicData = res.data.obj; + this.editOption.column[2].dicData =res.data.obj; + } else { + this.$message.error(res.data.msg); + } + }) + }, initList(reload){ - if(reload){ + if(reload) { getIcons().then(res => { - this.iconList = res.data.data; - this.allIconList = this.iconList; - store.dispatch("setIcons", this.iconList); - if (this.iconList.length > 0) { - this.activeName = this.iconList[0].lable; + if (res.data.success) { + this.iconList = res.data.data; + this.allIconList = this.iconList; + store.dispatch("setIcons", this.iconList); + if (this.iconList.length > 0) { + this.activeName = this.iconList[0].lable; + } + } else { + this.$message.error(res.data.msg); } }) + return; } if (!validatenull(this.$store.state.icons)) { @@ -219,25 +268,29 @@ this.activeName=this.iconList[0].lable; }else { getIcons().then(res => { - this.iconList = [{ - lable: 'iconoir', - list: [{ - oid: '', - groups: '0', - "name": "iconoir:accessibility", - "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M7 9l5 1m5-1l-5 1m0 0v3m0 0l-2 5m2-5l2 5\"/><path fill=\"currentColor\" d=\"M12 7a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1\"/></g></svg>" + if (res.data.success) { + this.iconList = [{ + lable: 'iconoir', + list: [{ + oid: '', + groups: '1', + "name": "iconoir:accessibility", + "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M7 9l5 1m5-1l-5 1m0 0v3m0 0l-2 5m2-5l2 5\"/><path fill=\"currentColor\" d=\"M12 7a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1\"/></g></svg>" + }] }] - }] - this.iconList = res.data.data; - this.allIconList = this.iconList; - store.dispatch("setIcons", this.iconList); - if (this.iconList.length > 0) { - this.activeName = this.iconList[0].lable; + this.iconList = res.data.data; + this.allIconList = this.iconList; + store.dispatch("setIcons", this.iconList); + if (this.iconList.length > 0) { + this.activeName = this.iconList[0].lable; + } + } else { + this.$message.error(res.data.msg); } }) } }, - changeType(type){debugger; + changeType(type){ if(this.checkedTypes.includes(type)){ this.checkedTypes=this.checkedTypes.filter(item=> item!=type) }else { @@ -248,9 +301,16 @@ this.iconList=this.allIconList }else{ const checkedTypes=JSON.stringify(this.checkedTypes); - this.iconList=this.allIconList.filter(item=> { - return checkedTypes.indexOf(JSON.stringify(item.groups))!=-1; + const iconList=[]; + this.allIconList.forEach(item=>{ + iconList.push({ + lable:item.lable, + list:item.list.filter(iconitem=> { + return checkedTypes.indexOf(iconitem.groups)!=-1; + }) + }) }) + this.iconList=iconList; } this.activeName=this.iconList[0].lable; }, @@ -327,24 +387,49 @@ } }); }, + addHandler(){ + this.editOption.column[0].disabled=false; + this.editOption.column[1].disabled=false; + this.editType='add'; + this.editVisible=true; + }, editHandler(){ + this.editType='edit'; + this.editOption.column[0].disabled=true; + this.editOption.column[1].disabled=true; this.editForm=this.checkItem; + this.editForm.libname=this.checkItem.name.split(':')[0] + this.editForm.iconname=this.checkItem.name.split(':')[1] this.editVisible=true; }, editSaveHandler(){ this.$refs.editForm.validate((valid,done) => { if (valid) { done() - updateIcon(this.editForm).then(res => { - if (res.data.code === 200) { - this.$message.success(res.data.msg); - this.initList(true); - done(); - this.closeHandler(); - } else { - this.$message.error(res.data.msg); - } - }) + this.editForm.name= this.editForm.libname+':'+ this.editForm.iconname; + if(this.editType=='edit'){ + updateIcon(this.editForm).then(res => { + if (res.data.code === 200) { + this.$message.success(res.data.msg); + this.initList(true); + done(); + this.closeHandler(); + } else { + this.$message.error(res.data.msg); + } + }) + }else { + addIcon(this.editForm).then(res => { + if (res.data.code === 200) { + this.$message.success(res.data.msg); + this.initList(true); + done(); + this.closeHandler(); + } else { + this.$message.error(res.data.msg); + } + }) + } } else { return false; } @@ -352,11 +437,17 @@ }, closeHandler(){ this.editForm={ + type:'svg', oid:'', - name:'', + libname:'', + iconname:'', + groups:[], content:'' - } + }; + this.editOption.column[0].disabled=false; + this.editOption.column[1].disabled=false; this.editVisible=false; + this.$refs.editForm.clearValidate(); }, delHandler(){ this.$confirm('鎮ㄧ‘瀹氳鍒犻櫎璇ュ浘鏍囧悧锛�', '鎻愮ず', { @@ -395,11 +486,14 @@ flex-wrap: wrap; } .iconList .iconItem{ - width: 35px; - margin: 6px 12px; + width: 85px; + margin: 6px 5px 10px 5px; text-align: center; } -.iconList .iconItem div:hover{ +.iconList .iconItem .svgContent{ + font-size: 26px; +} +.iconList .iconItem .svgContent:hover{ transform: scale(1.5); } .iconList .iconItem span{ -- Gitblit v1.9.3