From 145e82ce09bd73bfe11afabd70a00f01a88d4be6 Mon Sep 17 00:00:00 2001
From: wangting <wangting@vci-tech.com>
Date: 星期三, 18 十二月 2024 17:37:00 +0800
Subject: [PATCH] 图标管理
---
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue | 166 +++++++++++++++++++++++++++++++++++++++--
Source/plt-web/plt-web-ui/src/api/UI/Icons.js | 29 +++++++
2 files changed, 186 insertions(+), 9 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/api/UI/Icons.js b/Source/plt-web/plt-web-ui/src/api/UI/Icons.js
index a88ac24..812e71f 100644
--- a/Source/plt-web/plt-web-ui/src/api/UI/Icons.js
+++ b/Source/plt-web/plt-web-ui/src/api/UI/Icons.js
@@ -3,8 +3,35 @@
// 鍥炬爣搴撴煡璇�
export function getIcons(params) {
return request({
- url: "/api/uiManagerController/getBizTree",
+ url: "/api/uiManagerController/getIcons",
method: "get",
params
});
}
+
+// 鍒涘缓
+export function addIcon(params) {
+ return request({
+ url: "/api/btmTypeController/addIcon",
+ method: "post",
+ data:params
+ });
+}
+
+// 淇敼
+export function updateIcon(params) {
+ return request({
+ url: "/api/btmTypeController/updateIcon",
+ method: "put",
+ data:params
+ });
+}
+
+// 鍒犻櫎
+export function deleteIcon(params) {
+ return request({
+ url: "/api/btmTypeController/deleteIcon",
+ method: "delete",
+ data:params
+ });
+}
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 3571f42..5c87518 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
@@ -17,15 +17,20 @@
</div>
<div style="height: calc(100vh - 190px)">
<div>
- <el-button icon="el-icon-upload" type="primary" size="mini" @click="uploadHandler">涓婁紶</el-button>
+ <el-button icon="el-icon-plus" type="primary" size="mini" @click="uploadHandler">娣诲姞</el-button>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in iconList" :label="item.label" :name="item.label">
<div class="iconList">
- <div class="iconItem" v-for="svg in item.list" :data-value="svg.name">
+ <div :class="'iconItem '+(svg.checked?'activeIconItem':'')" v-for="svg in item.list"
+ :data-value="svg.name" v-right-click="{action:checkSvg,data:svg}">
<div v-html="svg.svg"></div>
<span>{{svg.name.split(':')[1]}}</span>
</div>
+ </div>
+ <div v-if="menuVisible" class="el-cascader-panel is-bordered iconList__menu" :style="menuPosition">
+ <div class="iconList__item" @click="editHandler">缂� 杈�</div>
+ <div class="iconList__item" @click="delHandler">鍒� 闄�</div>
</div>
</el-tab-pane>
</el-tabs>
@@ -33,7 +38,7 @@
<!-- 涓婁紶 -->
<el-dialog
v-dialogDrag
- title="鍥炬爣涓婁紶"
+ title="娣诲姞鍥炬爣"
:visible.sync="visible"
append-to-body="true"
class="avue-dialog"
@@ -46,21 +51,47 @@
<el-button size="small" @click="visibleCloseHandler">鍙� 娑�</el-button>
</span>
</el-dialog>
+ <!-- 淇敼 -->
+ <el-dialog
+ v-dialogDrag
+ title="淇敼鍥炬爣"
+ :visible.sync="editVisible"
+ append-to-body="true"
+ class="avue-dialog"
+ width="500px"
+ @close="closeHandler"
+ >
+ <avue-form ref="editForm" :option="editOption" v-model="editForm"> </avue-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button size="small" type="primary" @click="editSaveHandler">纭� 瀹�</el-button>
+ <el-button size="small" @click="closeHandler">鍙� 娑�</el-button>
+ </span>
+ </el-dialog>
</basic-container>
</el-main>
</el-container>
</template>
<script>
-import {getIcons} from "@/api/UI/Icons";
+import {getIcons,addIcon,updateIcon,deleteIcon} from "@/api/UI/Icons";
import {validatenull} from "@/util/validate";
import {getStore} from "@/util/store";
import store from "@/store";
-import {addSave, editSave} from "@/api/modeling/statusPool/api";
import {getToken} from "@/util/auth";
export default {
name: "index",
+ directives: {
+ rightClick: {
+ bind(el, binding) {
+ el.oncontextmenu = (e) => {
+ e.preventDefault();
+ const menu = binding.value;
+ menu.action(e,menu.data);
+ };
+ }
+ }
+ },
data() {
return {
types: ['鏍囩涓�' , '鏍囩浜�' , '鏍囩涓�' , '鏍囩鍥�','鏍囩浜�' ],
@@ -71,6 +102,7 @@
allIconList:[],
iconList:[],
visible: false,
+ checkItem:null,
option: {
labelWidth: 80,
submitBtn:false,
@@ -109,6 +141,43 @@
},
form:{
type:[]
+ },
+ editVisible:false,
+ editOption:{
+ labelWidth: 80,
+ submitBtn:false,
+ emptyBtn:false,
+ column: [{
+ label: 'name',
+ prop: 'name',
+ type: 'input',
+ span: 24,
+ rules: [{
+ required: true,
+ message: "璇疯緭鍏ュ浘鏍噉ame",
+ trigger: "blur"
+ }]
+ }, {
+ label: "svg",
+ prop: "svg",
+ type: "textarea",
+ span: 24,
+ rules: [{
+ required: true,
+ message: "璇疯緭鍏ュ浘鏍噑vg浠ｇ爜",
+ trigger: "blur"
+ }]
+ }]
+ },
+ editForm:{
+ oid:'',
+ name:'',
+ svg:''
+ },
+ menuVisible:false,
+ menuPosition: {
+ top: 0,
+ left: 0
}
}
},
@@ -287,13 +356,22 @@
this.visible = false;
this.$refs.form.clearValidate();
},
-
+ checkSvg(event,svgObj){
+ this.checkItem=svgObj;
+ // 璁剧疆鑿滃崟鍙
+ this.menuVisible = true;
+ this.menuPosition.top = `${event.clientY}px`;
+ this.menuPosition.left = `${event.clientX}px`;
+ document.addEventListener('click',()=>{
+ this.menuVisible=false;
+ })
+ },
// 涓婁紶淇濆瓨
- uploadSaveHandler() {debugger;
+ uploadSaveHandler() {
this.$refs.form.validate((valid,done) => {
if (valid) {
done()
- saveFunction(this.form).then(res => {
+ addIcon(this.form).then(res => {
if (res.data.code === 200) {
this.$message.success(res.data.obj);
this.initList();
@@ -308,6 +386,57 @@
}
});
},
+ editHandler(){
+ this.editForm=this.checkItem;
+ 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.obj);
+ this.initList();
+ done();
+ this.closeHandler();
+ } else {
+ this.$message.error(res.data.obj);
+ }
+ })
+ } else {
+ return false;
+ }
+ });
+ },
+ closeHandler(){
+ this.editForm={
+ name:'',
+ svg:''
+ }
+ this.editVisible=false;
+ },
+ delHandler(){
+ this.$confirm('鎮ㄧ‘瀹氳鍒犻櫎璇ュ浘鏍囧悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ const {name,oid} = this.checkItem;
+ const obj = {name,oid};
+ deleteIcon(obj).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ this.getTreeList();
+ }
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ }
}
}
</script>
@@ -334,4 +463,25 @@
.iconList .iconItem span{
font-size: 12px;
}
+.iconList__menu{
+ width: 150px;
+ position: fixed;
+ z-index: 1024;
+ flex-wrap: wrap;
+ background-color: #fff;
+}
+.iconList__item {
+ height: 34px;
+ line-height: 34px;
+ outline: 0;
+ padding: 0 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: 100%;
+ color: #666;
+}
+.iconList__item:hover {
+ cursor: pointer;
+ color: #409eff
+}
</style>
--
Gitblit v1.9.3