Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Icons/index.vue

@@ -4,7 +4,7 @@
      <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.key"
@@ -17,13 +17,19 @@
        </div>
        <div style="height: calc(100vh - 190px)">
          <div>
            <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>
            <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 class="svgContent" v-html="svg.content"></div>
@@ -48,17 +54,15 @@
          @close="visibleCloseHandler"
        >
          <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">上传文件为json文件，示例如下
[
  {
    "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>"
          <pre style="font-size: 12px;color: #909399;margin-top: 0;padding:5px;background-color: #F5F7FA">上传文件为json文件，示例如下
[{
    "name": "图标库名:图标名称",
    "svg": "svg的html代码"
  },
  {
    "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": "svg的html代码"
 }]
 文件内容须严格按照示例格式，name为图标库名+图标名称，以“:”分隔，svg为图标html代码</pre>
        </el-dialog>
        <!-- 添加、修改 -->
@@ -89,6 +93,7 @@
import {getStore} from "@/util/store";
import store from "@/store";
import {getToken} from "@/util/auth";
import {mapGetters} from "vuex";

export default {
name: "index",
@@ -105,6 +110,7 @@
  },
  data() {
    return {
      key:1,
      types: [],
      checkedTypes:[],
      searchText:'',
@@ -186,11 +192,11 @@
            value:'key'
          }
        }, {
          label: "svg代码",
          label: "图标代码",
          prop: "content",
          type: "textarea",
          span: 24,
          placeholder:'请输入图标svg代码，格式示例<svg xmlns=\"http://www.w3.org/2000/svg\" ></svg>',
          placeholder:'请输入图标html代码，格式示例<svg xmlns=\"http://www.w3.org/2000/svg\" ></svg>',
          rules: [{
            required: true,
            message: "请输入图标svg代码",
@@ -217,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){
@@ -228,7 +241,8 @@
  },
  created() {
    this.getGroups();
    this.initList();  },
    this.initList();
  },
  methods:{
    getGroups() {
      getDicts('EnumIconGroups').then(res => {
@@ -251,6 +265,7 @@
            if (this.iconList.length > 0) {
              this.activeName = this.iconList[0].lable;
            }
            this.key++;
          } else {
            this.$message.error(res.data.msg);
          }
@@ -474,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;
@@ -491,7 +513,10 @@
  text-align: center;
}
.iconList .iconItem .svgContent{
  font-size: 26px;
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.iconList .iconItem .svgContent:hover{
  transform: scale(1.5);