zjyzt_gis_master_web_ui/src/components/DataLayer/IconLibraryManagement.vue

<template>
  <el-container :class="'content'">
    <el-header>
      <el-select
        v-model="selectValue"
        @change="changeIconType"
        placeholder="请选择"
      >
        <el-option
          v-for="item in layerList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button type="primary" class="add-item" @click="openAddIconDialog">
        新增图标
      </el-button>
    </el-header>
    <el-main>
      <ul>
        <li
          v-for="(item, index) in iconShowList"
          :key="index"
          :title="item.iconChieseName"
        >
          <!-- :style="{ backgroundImage: 'url(' + item.url + ')' }" -->
          <img :src="item.url" alt="" srcset="" />
          <div class="name">
            {{ item.iconChieseName }}
          </div>
          <div class="func">
            <el-button
              icon="el-icon-edit"
              :title="'修改'"
              @click="openUpdateIconDialog(item)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              :title="'删除'"
              @click="delIcon(item)"
            ></el-button>
          </div>
        </li>
      </ul>
    </el-main>
    <Icon
      v-if="iconDialogIsShow"
      v-bind="{
        dialogVisible: iconDialogIsShow,
        title: iconDialogTitle,
        type: iconDialogType,
        iconInfo: iconInfo,
        beforeClose: closeIconDialog,
        addIconFunc: addNewIcon,
        updateIconFunc: updateIcon,
      }"
    ></Icon>
  </el-container>
</template>

<script>
import iconApi from "@/api/icon";
export default {
  components: {
    Icon: () => import("@/components/DataLayer/Icon.vue"),
  },
  data() {
    return {
      iconTotalList: [],
      iconShowList: [],
      iconDialogTitle: "",
      iconDialogIsShow: false,
      iconDialogType: 1, // 1 新增 2 修改
      iconInfo: undefined,
      selectValue: 99999,
      layerList: [
        {
          id: 99999,
          name: "全部",
        },
      ],
    };
  },
  created() {},
  methods: {
    openAddIconDialog() {
      this.iconDialogType = 1;
      this.iconInfo = undefined;
      this.iconDialogTitle = "新增图标";
      this.iconDialogIsShow = true;
    },
    openUpdateIconDialog(item) {
      this.iconDialogType = 2;
      this.iconInfo = {
        name: item.iconChieseName,
        id: item.id,
        type: item.type,
        url: location.origin + item.url,
      };
      this.iconDialogTitle = "修改图标";
      this.iconDialogIsShow = true;
    },
    closeIconDialog() {
      this.iconDialogIsShow = false;
    },

    addNewIcon(params) {
      let that = this;
      // 添加图标后更新列表 getIcon()
      const loading = this.$createLoading("图标上传增加中，请稍后！")
      return new Promise((resolve, reject) => {
        iconApi
          .addNewIcon(params)
          .then((result) => {
            loading.close();
            if (result.code == 200) {
              getIcon(); // icon 更新
              resolve();
            } else {
              that.$checkRequestCode(result);
              reject();
            }
          })
          .catch((err) => {
            loading.close();
            that.$message({
              type: "warning",
              message: "上传失败，请稍后重试！",
            });
            reject();
          });
      });
    },
    delIcon(item) {
      let that = this;
      this.$confirm("此操作将永久删除该图标, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用删除图标接口 更新列表 getIcon()
          const loading = that.$createLoading("图标删除中，请稍后！")
          iconApi
            .delIcon({ id: item.id })
            .then((result) => {
              loading.close();
              if (result.code == 200) {
                getIcon(); // icon 更新
              } else {
                that.$checkRequestCode(result);
              }
            })
            .catch((err) => {
              loading.close();
              that.$message({
                type: "warning",
                message: "更新失败，请稍后重试！",
              });
            });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateIcon(params) {
      let that = this;
      // 更新图标后更新列表 getIcon()
      const loading = this.$createLoading("图标信息更新中，请稍后！")
      return new Promise((resolve, reject) => {
        iconApi
          .updateIcon(params)
          .then((result) => {
            loading.close();
            if (result.code == 200) {
              getIcon(); // icon 更新
              resolve();
            } else {
              that.$checkRequestCode(result);
              reject();
            }
          })
          .catch((err) => {
            loading.close();
            that.$message({
              type: "warning",
              message: "更新失败，请稍后重试！",
            });
            reject();
          });
      });
    },

    changeIconType(type) {
      let arr = this.iconTotalList.filter(function (item) {
        if (type == 99999) return true;
        if (item.type == type) {
          return true;
        } else {
          return false;
        }
      });
      this.iconShowList = JSON.parse(JSON.stringify(arr));
    },
  },
  computed: {
    iconData() {
      return this.$store.state.iconList;
    },
    layerData() {
      return this.$store.state.layerList;
    },
  },
  watch: {
    iconData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) {
          let arr = [];
          newVal.map(function (obj) {
            obj.url = systemConfig.iconImageUrl + obj.iconUuidName;
            arr.push(JSON.parse(JSON.stringify(obj)));
          });
          this.iconTotalList = JSON.parse(JSON.stringify(arr));
          this.iconShowList = JSON.parse(JSON.stringify(arr));
        }
      },
    },
    layerData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) this.layerList = this.layerList.concat(newVal);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  .el-header {
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 10px;
    .el-select {
      margin-right: 10px;
    }
  }
  .el-main {
    background: #ffffff;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: content-box;
    ul {
      overflow: hidden;
    }
    li {
      width: 69px;
      height: 71px;
      margin: 0px 10px;
      float: left;
      padding: 5px 5px;
      padding-bottom: 50px;
      position: relative;
      cursor: pointer;
      img {
        width: 69px;
        height: 71px;
      }
      .name {
        position: absolute;
        width: 100%;
        bottom: 24px;
        left: 0px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .func {
        position: absolute;
        bottom: 3px;
        left: 21px;
        display: none;
        .el-button {
          border: 0px;
          padding: 0 0;
          background: transparent;
        }
      }
      &:hover {
        .func {
          display: inline-block;
        }
      }
    }
  }
}
</style>