图标管理

 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
  });
}

 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: "请输入图标name",
            trigger: "blur"
          }]
        }, {
          label: "svg",
          prop: "svg",
          type: "textarea",
          span: 24,
          rules: [{
            required: true,
            message: "请输入图标svg代码",
            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>