From 18c43123b51a1688ab4ae01fe3d171c7d92e619b Mon Sep 17 00:00:00 2001 From: wangting <wangting@vci-tech.com> Date: 星期四, 16 一月 2025 18:19:34 +0800 Subject: [PATCH] 1、调整会话过期提示 2、流程设计器隐藏拓展按钮,隐藏右下角图标 --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue | 261 ++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 190 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..ab0a66b 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,29 +4,36 @@ <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" v-if="types.length>0">鍒嗙粍</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 v-if="permissionList.addBtn" class="button-custom-icon" type="primary" size="small" @click="addHandler"> + <icon-show :name="permissionList.addBtn.source"></icon-show> + 娣诲姞 + </el-button> + <el-button v-if="permissionList.uploadBtn" class="button-custom-icon" type="primary" size="small" @click="uploadHandler"> + <icon-show :name="permissionList.uploadBtn.source"></icon-show> + 涓婁紶 + </el-button> </div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in iconList" :label="item.lable" :name="item.lable" style="height: calc(100vh - 270px);overflow: auto "> - <div class="iconList"> + <div class="iconList" :key="key"> <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 +46,29 @@ <!-- 涓婁紶 --> <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: #909399;margin-top: 0;padding:5px;background-color: #F5F7FA">涓婁紶鏂囦欢涓簀son鏂囦欢锛岀ず渚嬪涓� +[{ + "name": "鍥炬爣搴撳悕:鍥炬爣鍚嶇О", + "svg": "svg鐨刪tml浠g爜" + }, + { + "name": "鍥炬爣搴撳悕:鍥炬爣鍚嶇О", + "svg": "svg鐨刪tml浠g爜" + }] + 鏂囦欢鍐呭椤讳弗鏍兼寜鐓хず渚嬫牸寮忥紝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,10 +88,12 @@ <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"; import {getToken} from "@/util/auth"; +import {mapGetters} from "vuex"; export default { name: "index", @@ -91,16 +110,8 @@ }, data() { return { - types: [{ - label:'鎸夐挳', - value:0 - },{ - label:'鏍囩浜�', - value:1 - },{ - label:'鏍囩涓�', - value:2 - }], + key:1, + types: [], checkedTypes:[], searchText:'', activeName:'', @@ -113,12 +124,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 +152,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: "鍥炬爣浠g爜", prop: "content", type: "textarea", span: 24, + placeholder:'璇疯緭鍏ュ浘鏍噃tml浠g爜锛屾牸寮忕ず渚�<svg xmlns=\"http://www.w3.org/2000/svg\" ></svg>', rules: [{ required: true, message: "璇疯緭鍏ュ浘鏍噑vg浠g爜", @@ -167,7 +206,8 @@ }, editForm:{ oid:'', - name:'', + libname:'', + iconname:'', content:'' }, menuVisible:false, @@ -183,6 +223,13 @@ "Authorizationtoken":getToken(), }; }, + ...mapGetters(["permission"]), + permissionList() { + return { + addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false), + uploadBtn: this.vaildData(this.permission[this.$route.query.id].UPLOAD, false), + }; + }, }, watch:{ 'form.groups'(val){ @@ -193,20 +240,37 @@ } }, created() { + this.getGroups(); this.initList(); - this.option.column[0].dicData=this.types; }, 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; + } + this.key++; + } else { + this.$message.error(res.data.msg); } }) + return; } if (!validatenull(this.$store.state.icons)) { @@ -219,25 +283,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 +316,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 +402,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 +452,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('鎮ㄧ‘瀹氳鍒犻櫎璇ュ浘鏍囧悧锛�', '鎻愮ず', { @@ -383,7 +489,14 @@ } </script> -<style scoped> +<style scoped lang="scss"> +::v-deep{ + svg{ + font-size: inherit; + height: 100%; + width:100%; + } +} .tag-group{font-size: 14px;} .el-tag{ margin: 0 0 10px 10px; @@ -395,11 +508,17 @@ 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: 24px; + width: 24px; + height: 24px; + margin: 0 auto; +} +.iconList .iconItem .svgContent:hover{ transform: scale(1.5); } .iconList .iconItem span{ -- Gitblit v1.9.3