adspecs 0.1.12

package/references/front-demo/src/components/GsIconDialog/index.vue

@@ -0,0 +1,856 @@
+<template>
+  <div class="selector-dialog">
+    <!-- 图标展示 -->
+    <i
+      v-if="iconObject.font_class"
+      :class="[
+        'svg-i',
+        'gsfont',
+        `${iconPrefix}-${iconObject.font_class}`,
+        className,
+      ]"
+      :style="{ fontSize: size }"
+    ></i>
+    <div
+      v-if="iconObject.tagType === 'object'"
+      :class="['svg-object', className]"
+      ref="svgDiv"
+      v-html="svgData"
+    ></div>
+    <img
+      v-if="iconObject.tagType === 'img'"
+      :class="['svg-img', className]"
+      :src="iconObject.iconUrl"
+      :style="{ width: size, height: size }"
+    />
+    <div v-if="!iconCode">
+      <!-- 图标弹窗 -->
+      <el-dialog
+        top="5vh"
+        width="840px"
+        append-to-body
+        destroy-on-close
+        :title="$t('systemM.chooseIcon')"
+        :model-value="visible"
+        :close-on-click-modal="false"
+        @close="close"
+      >
+        <div>
+          <el-row type="flex" justify="space-between">
+            <!-- icon类型 -->
+            <el-col :span="8">
+              <el-radio-group size="small" v-model:value="iconType">
+                <el-radio-button label="default">{{
+                  $t('systemM.default')
+                }}</el-radio-button>
+                <el-radio-button label="custom">{{
+                  $t('tableStructure.custom')
+                }}</el-radio-button>
+              </el-radio-group>
+            </el-col>
+            <!-- 搜索框 -->
+            <el-col :span="8">
+              <el-input
+                v-model:value="keyword"
+                type="text"
+                size="small"
+                clearable
+                :placeholder="$t('otherLang.enterKeyWord')"
+              >
+                <template v-slot:append>
+                  <el-button :icon="ElIconSearch"></el-button>
+                </template>
+              </el-input>
+            </el-col>
+          </el-row>
+
+          <!-- 本地icon列表 -->
+          <ul v-show="iconType === 'default'" class="icon-list">
+            <li
+              v-for="(item, index) of iconListFilter"
+              :key="index"
+              :class="{ active: item.font_class === iconName }"
+              @click="$emit('update:iconName', item.font_class)"
+            >
+              <div class="icon-block">
+                <i
+                  :class="['gsfont', `gs-icon-${item.font_class}`]"
+                  :style="{ fontSize: '30px' }"
+                />
+              </div>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.name"
+                placement="bottom"
+              >
+                <div class="icon-name">{{ item.name }}</div>
+              </el-tooltip>
+            </li>
+          </ul>
+          <!-- 自定义图标列表 -->
+          <ul v-show="iconType === 'custom'" class="icon-list">
+            <!-- 上传组件弹窗按钮 -->
+            <el-icon class="upload-btn"><el-icon-plus /></el-icon>
+            <li
+              class="icon-warp"
+              v-for="(item, index) of customIconListFilter"
+              :key="index"
+              :class="{ active: item.iconUrl === iconName }"
+              @click="$emit('update:iconName', item.iconUrl)"
+            >
+              <div class="icon-block">
+                <div
+                  v-if="item.iconFormat === 'image/svg+xml'"
+                  v-html="item.svgHtml"
+                  @click="$emit('update:iconName', item.iconUrl)"
+                ></div>
+                <!-- <object
+                      v-if="item.iconFormat === 'image/svg+xml'"
+                      :data="item.iconUrl"
+                      :type="item.iconFormat"
+                      @click="$emit('update:iconName', item.iconUrl)"
+                    ></object> -->
+                <img v-else :src="item.iconUrl" />
+              </div>
+              <el-tooltip
+                effect="dark"
+                :content="item.iconName"
+                placement="bottom"
+              >
+                <div class="icon-name">{{ item.iconName }}</div>
+              </el-tooltip>
+              <!-- 自定义图标按钮组 -->
+              <el-tooltip
+                effect="dark"
+                :content="item.iconName"
+                placement="bottom"
+              >
+                <div v-show="authorityJudgment(item)" class="icon-warp-cover">
+                  <el-icon><el-icon-edit /></el-icon>
+                  <el-icon><el-icon-delete /></el-icon>
+                </div>
+              </el-tooltip>
+            </li>
+          </ul>
+        </div>
+        <template v-slot:footer>
+          <span class="dialog-footer">
+            <el-row>
+              <el-col :span="24" class="txt-right">
+                <el-button
+                  size="small"
+                  type="danger"
+                  plain
+                  @click="$emit('update:iconName', '')"
+                  >{{ $t('button.clear') }}</el-button
+                >
+                <el-button size="small" @click="close">{{
+                  $t('button.cancel')
+                }}</el-button>
+                <el-button size="small" type="primary" @click="close">{{
+                  $t('button.sure')
+                }}</el-button>
+              </el-col>
+            </el-row>
+          </span>
+        </template>
+      </el-dialog>
+      <!-- 自定义图标上传弹窗 -->
+      <el-dialog
+        :title="$t('button.upload') + $t('icon')"
+        top="15vh"
+        width="640px"
+        append-to-body
+        destroy-on-close
+        :model-value="uploadVisible"
+        :close-on-click-modal="false"
+        @close="uploadClose"
+      >
+        <div>
+          <el-form
+            ref="form"
+            label-width="90px"
+            size="small"
+            :model="form"
+            :rules="rules"
+          >
+            <el-form-item
+              :label="$t('icon') + $t('report_list.name')"
+              prop="iconName"
+            >
+              <el-input v-model:value="form.iconName" />
+            </el-form-item>
+            <el-form-item :label="$t('icon')" prop="iconUrl">
+              <!-- 显示已上传图片 -->
+              <div
+                class="demo-upload-list"
+                v-for="(item, index) in imgDataList"
+                :key="index"
+              >
+                <!-- svg用object标签特殊处理 -->
+                <!-- <object v-if="item.iconFormat === 'image/svg+xml'" :data="item.iconUrl" :type="item.iconFormat"></object> -->
+                <div
+                  v-if="item.iconFormat === 'image/svg+xml'"
+                  v-html="item.svgHtml"
+                ></div>
+                <img v-else referrer="no-referrer" :src="item.iconUrl" />
+
+                <div class="demo-upload-list-cover">
+                  <el-icon><el-icon-delete /></el-icon>
+                </div>
+              </div>
+              <div
+                class="demo-upload-list"
+                v-if="imgDataList.length < uploadLimit"
+                v-loading="uploading"
+              >
+                <el-upload
+                  action
+                  accept="image/*"
+                  :show-file-list="false"
+                  :http-request="handleHttpRequest"
+                >
+                  <el-icon><el-icon-plus /></el-icon>
+                </el-upload>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+        <template v-slot:footer>
+          <span class="dialog-footer">
+            <el-row>
+              <el-col :span="24" class="txt-right">
+                <el-button size="small" @click="uploadClose">{{
+                  $t('button.cancel')
+                }}</el-button>
+                <el-button
+                  size="small"
+                  type="primary"
+                  :loading="uploading"
+                  @click="uploadSave"
+                  >{{ $t('button.sure') }}</el-button
+                >
+              </el-col>
+            </el-row>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import {
+  Plus as ElIconPlus,
+  Edit as ElIconEdit,
+  Delete as ElIconDelete,
+  Search as ElIconSearch,
+} from '@element-plus/icons'
+import icons from './icons'
+
+export default {
+  data() {
+    return {
+      // svg图标html字符串内容
+      svgData: '',
+      // icon类型 default：默认， custom：自定义
+      iconType: 'default',
+      // 默认的icon数据列表
+      iconList: [],
+      // 自定义icon数据列表
+      customIconList: [],
+      // 查询keyword
+      keyword: '',
+      // 上传Loading标识
+      uploading: false,
+      // 上传弹窗开关
+      uploadVisible: false,
+      // 上传表单
+      form: {
+        iconName: '',
+        iconUrl: '',
+        // 图片类型
+        iconFormat: '',
+      },
+      // 上传数据
+      dataList: [],
+      // 租户id
+      userInfo: {},
+      ElIconSearch,
+    }
+  },
+  components: {
+    ElIconPlus,
+    ElIconEdit,
+    ElIconDelete,
+  },
+  name: 'GsIconDialog',
+  computed: {
+    // 过滤props传入的变量为null的元素
+    imgDataList() {
+      return this.dataList.filter((item) => item.iconUrl)
+    },
+    // 表单验证规则
+    rules() {
+      return {
+        iconName: [
+          {
+            required: true,
+            message: this.$t('icon') + this.$t('report_list.name'),
+            trigger: 'blur',
+          },
+        ],
+        iconUrl: [
+          {
+            required: true,
+            message: this.$t('advertising.pleaseUpload') + this.$t('icon'),
+          },
+        ],
+      }
+    },
+    // 计算是否超过规定限制大小
+    maxSizeInBytes() {
+      const units = {
+        B: 1,
+        KB: 1024,
+        MB: 1024 * 1024,
+      }
+
+      return this.maxSize * units[this.unit]
+    },
+    // 默认icon过滤数据
+    iconListFilter() {
+      return this.iconList.filter((item) => {
+        return (
+          item.font_class.includes(this.keyword) ||
+          item.name.includes(this.keyword)
+        )
+      })
+    },
+    // 自定义icon过滤数据
+    customIconListFilter() {
+      return this.customIconList.filter((item) => {
+        return item.iconName.includes(this.keyword)
+      })
+    },
+    iconObject() {
+      // 使用正则表达式匹配常见的图片链接格式
+      const imageRegex = /\.(jpeg|jpg|gif|png|bmp|svg)$/i
+
+      if (imageRegex.test(this.iconCode)) {
+        // 匹配成功，说明是一个图片链接
+        const extension = this.iconCode.match(imageRegex)[1].toLowerCase()
+
+        // 根据扩展名判断图片的格式类型
+
+        return {
+          iconUrl: this.iconCode,
+          iconFormat: extension,
+          tagType: extension === 'svg' ? 'object' : 'img',
+        }
+      }
+
+      // 非图片链接判断为本地iconfont
+      const iconArr = [...this.iconList]
+
+      return (
+        iconArr.find((item) => {
+          return item.font_class === this.iconCode
+        }) ?? {}
+      )
+    },
+  },
+  model: {
+    prop: 'iconName',
+    event: 'update:iconName',
+  },
+  props: {
+    size: {
+      type: String,
+      default: '16px',
+    },
+    // icon编码用户展示特定
+    iconCode: {
+      type: String,
+      default: '',
+    },
+    // 用户传入的自定义图标列表数据
+    iconData: {
+      type: Array,
+      default: () => [],
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    iconPrefix: {
+      type: String,
+      default: 'gs-icon',
+    },
+    // 被选中的icon
+    iconName: {
+      type: String,
+      default: '', // 默认为兆字节（MB）
+    },
+    // icon弹窗开关
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 最大允许上传个数
+    uploadLimit: {
+      type: Number,
+      default: 5,
+    },
+    maxSize: {
+      type: Number,
+      default: 1, // 默认为1
+    },
+    unit: {
+      type: String,
+      default: 'MB', // 默认为兆字节（MB）
+    },
+  },
+  methods: {
+    // 权限判断
+    authorityJudgment(item) {
+      if (this.userInfo.isAdmin) {
+        if (this.userInfo.tenantId === -999) {
+          return true
+        }
+        if (this.userInfo.tenantId === item.tenantId) {
+          return true
+        }
+      } else {
+        if (this.userInfo.userId === item.createdBy) {
+          return true
+        }
+      }
+      return false
+    },
+    // 获取用户信息
+    getUserInfo() {
+      const userInfo = localStorage.getItem('userInfo')
+      try {
+        const userInfoJson =
+          typeof userInfo == 'object' ? userInfo : JSON.parse(userInfo)
+        // BUG: 9632 数据结构变成下面 value 才是对应的对象。
+        return userInfoJson.value
+          ? JSON.parse(userInfoJson.value)
+          : userInfoJson
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 自定义图标删除
+    handleDel(item) {
+      this.$confirm(
+        this.$t('gsUploadFile.deleteImg'),
+        this.$t('gsUploadFile.tips')
+      ).then(() => {
+        const params = {
+          ciId: item.ciId,
+        }
+        this.$http
+          .get(
+            `${window.getVersionTypeApiUrl('baseURL')}/base-custom-icon/delete`,
+            { params }
+          )
+          .then((res) => {
+            if (res.code === 800) {
+              this.getCustom()
+            }
+          })
+      })
+    },
+    // 自定义图标编辑
+    async handleEdit(item) {
+      this.form = { ...item }
+      this.dataList = [{ ...item }]
+      this.uploadVisible = true
+    },
+    // 保存自定义图标
+    uploadSave() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          const params = {
+            params: {
+              tenantId: this.tenantId,
+              ...this.form,
+            },
+          }
+          const isUpdate = this.form.ciId ? 'update' : 'save'
+          this.uploading = true
+          this.$http
+            .post(
+              `${window.getVersionTypeApiUrl(
+                'baseURL'
+              )}/base-custom-icon/${isUpdate}`,
+              params
+            )
+            .then(
+              (res) => {
+                this.uploading = false
+                if (res.code === 800) {
+                  this.getCustom()
+                  this.uploadClose()
+                }
+              },
+              (err) => {
+                console.error(err)
+                this.uploading = false
+              }
+            )
+        }
+      })
+    },
+    // 关闭自定义弹窗
+    uploadClose() {
+      this.uploadVisible = false
+    },
+    // 删除图片
+    handleRemove(fileIndex) {
+      const file = this.dataList[fileIndex]
+      this.$confirm(
+        this.$t('gsUploadFile.deleteImg'),
+        this.$t('gsUploadFile.tips')
+      ).then(() => {
+        // 如果没有fileId，就不真正删除附件文件
+        if (file.fileId)
+          this.$http.get(
+            `${window.getVersionTypeApiUrl(
+              'filecenterUrl'
+            )}/iot-base-attachment/delete-id?id=${file.fileId}`
+          )
+        this.dataList.splice(fileIndex, 1)
+        this.form.iconUrl = ''
+      })
+    },
+    // 打开自定义弹窗
+    openUploadDialog() {
+      this.dataList = []
+      this.form = this.$options.data.call(this).form
+      this.uploadVisible = true
+    },
+
+    // 调用上传接口
+    async uploadAttachment(file) {
+      try {
+        const form = new FormData()
+        form.append('file', file, file.name)
+        const config = {
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+        const response = await this.$http.post(
+          `${window.getVersionTypeApiUrl(
+            'filecenterUrl'
+          )}/iot-base-attachment/single/file-upload`,
+          form,
+          config
+        )
+        return response
+      } catch {
+        this.uploading = false
+      }
+    },
+    /**
+     * @desc: 上传图片前的拦截
+     * @return {viod}
+     */
+    async handleHttpRequest(e) {
+      try {
+        this.uploading = true
+        e = e.file
+        const { size, type } = e
+        if (size >= this.maxSizeInBytes) {
+          const tip = `上传图片大小不能超过 ${this.maxSize}${this.unit}!`
+          this.$message.warning(tip)
+          return Promise.reject(tip) // 阻止文件上传
+        }
+        const resp = await this.uploadAttachment(e)
+        if (resp.code === 800) {
+          // 请求远端svg
+          let svgHtml = ''
+          if (type === 'image/svg+xml') {
+            svgHtml = await this.getSvgImg(resp.data.filePath, '60px')
+          }
+          this.dataList.push({
+            iconUrl: resp.data.filePath,
+            fileId: resp.data.fileId,
+            svgHtml: svgHtml,
+            iconFormat: type,
+          })
+          this.form.iconFormat = type
+          this.form.iconUrl = resp.data.filePath
+        } else {
+          return Promise.reject('请求接口错误')
+        }
+      } finally {
+        this.uploading = false
+      }
+    },
+    /**
+     * @desc: 打开iconicon弹窗
+     * @return {viod}
+     * @param {String} val icon名称
+     */
+    open(val) {
+      this.iconList = _.cloneDeep(icons)
+      this.iconName = val || ''
+      this.iconType = 'default'
+      this.dialogVisible = true
+    },
+    close() {
+      $emit(this, 'update:iconName', this.iconName)
+      $emit(this, 'update:visible', false)
+      this.iconType = 'default'
+      this.keyword = ''
+    },
+    filterHandle() {
+      const iconList = _.cloneDeep(icons)
+      if (this.keyword !== '') {
+        this.iconList = iconList.filter((item) => {
+          return (
+            item.font_class.includes(this.keyword) ||
+            item.name.includes(this.keyword)
+          )
+        })
+      } else {
+        this.iconList = iconList
+      }
+    },
+    getCustom() {
+      this.$http
+        .get(
+          `${window.getVersionTypeApiUrl('baseURL')}/base-custom-icon/get-all`
+        )
+        .then(async (res) => {
+          if (res.code === 800) {
+            this.customIconList = await Promise.all(
+              res.data.map(async (item) => {
+                let svgHtml = ''
+                if (item.iconFormat === 'image/svg+xml') {
+                  // iconUrl
+                  svgHtml = await this.getSvgImg(
+                    'http://dev-product-gushen.shunde.sieiot.com/downloads/dev-product/file/updata/82c50fef75604f359fcac1aba309cee9.svg',
+                    '30px'
+                  )
+                }
+                return {
+                  ...item,
+                  svgHtml,
+                }
+              })
+            )
+          }
+        })
+    },
+    /**
+     * @description: 获取远端svg图标同时改变颜色以及大小
+     * @param {String} iconUrl 远端svg图片地址
+     * @param {String} size svg图片大小
+     * @return {String} svg的html字符串
+     */
+    async getSvgImg(iconUrl, size) {
+      try {
+        // 请求
+        const svgResponse = await fetch(iconUrl)
+        const svgData = await svgResponse.text()
+        // 修改颜色和大小
+        return svgData
+          .replace(/fill="#[^"]*"/g, `fill=currentColor`)
+          .replace(/width="[^"]*"/, `width=${size}`)
+          .replace(/height="[^"]*"/, `height=${size}`)
+      } catch (error) {
+        console.error('svg请求失败')
+      }
+    },
+  },
+  async mounted() {
+    this.iconList = _.cloneDeep(icons)
+    if (!this.iconCode) {
+      this.getCustom()
+      this.userInfo = this.getUserInfo()
+    }
+    // 请求远端svg图片
+    if (this.iconCode) {
+      if (this.iconObject.tagType === 'object') {
+        this.svgData = await this.getSvgImg(this.iconObject.iconUrl, this.size)
+      }
+    }
+  },
+  emits: ['update:iconName', 'update:visible'],
+}
+</script>
+
+<style lang="scss" scoped>
+.selector-dialog {
+  display: inline-block;
+  .svg-object {
+    position: relative;
+    top: 4px;
+  }
+  .svg-i {
+    position: relative;
+    // top: 2px;
+  }
+  .svg-img {
+    position: relative;
+  }
+}
+.upload-btn {
+  width: 80px;
+  height: 85px;
+  line-height: 85px;
+  border-bottom: 1px solid #eaeaea;
+  border-right: 1px solid #eaeaea;
+  text-align: center;
+  vertical-align: top;
+  cursor: pointer;
+  font-size: 30px;
+}
+.demo-upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid #d9d9d9;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #fff;
+  position: relative;
+  margin-right: 5px;
+  object {
+    width: 58px;
+    height: 58px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+}
+.demo-upload-list img {
+  width: 100%;
+  height: 100%;
+  vertical-align: inherit;
+}
+.demo-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.icon-warp {
+  position: relative;
+  object {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+  img {
+    border-radius: 4px;
+    width: 30px;
+    height: 30px;
+    vertical-align: baseline;
+  }
+}
+.icon-warp:hover .icon-warp-cover {
+  display: block;
+}
+.icon-warp-cover i {
+  color: #fff;
+  font-size: 16px;
+  line-height: 30px;
+  cursor: pointer;
+  margin: 0 4px;
+}
+.icon-warp-cover {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(107, 107, 107, 0.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover {
+  display: block;
+}
+.demo-upload-list-cover i {
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+.icon-list {
+  width: 100%;
+  margin-top: 10px;
+  padding: 0;
+  max-height: 55vh;
+  min-height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: 1px solid #eaeaea;
+  border-radius: 2px;
+  display: grid;
+  grid-template-columns: repeat(10, 80px);
+  grid-template-rows: repeat(10, 85px);
+  grid-gap: 0;
+  li {
+    display: inline-block;
+    width: 80px;
+    height: 85px;
+    padding: 10px;
+    color: #6a6a6a;
+    text-align: center;
+    font-size: 12px;
+    border-bottom: 1px solid #eaeaea;
+    border-right: 1px solid #eaeaea;
+    margin-right: -1px;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--el-color-primary);
+    }
+    .icon-block {
+      font-size: 30px;
+      color: inherit;
+      margin-bottom: 2px;
+    }
+    .icon-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .active {
+    color: var(--el-color-primary);
+  }
+  .foo {
+    color: red;
+    fill: red;
+  }
+  #r {
+    color: red;
+    fill: red;
+  }
+}
+</style>
+
+<style>
+#r {
+  color: red;
+  fill: red;
+}
+.foo {
+  color: red;
+  fill: red;
+}
+</style>