svgEditor

wente

2024-06-03 e2d963f6e794aed358bf569f0d98dd53da4781be

 web/src/views/modules/sysPictureBase/SysPictureBase.vue

@@ -1,7 +1,6 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sysPictureBase-sysPictureBase}">
      <zt-table-wraper query-url="/sysPictureBase/page" delete-url="/sysPictureBase/"
    <div class="mod-sysPictureBase-sysPictureBase fa-card-a">
      <zt-table-wraper ref="tableObj" query-url="/sysPictureBase/page" delete-url="/sysPictureBase/"
                       :paging='false'
                       v-slot="{ table }">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
@@ -16,16 +15,17 @@
            <zt-button type="query" @click="table.query()"/>
            <zt-button type="add" @click="table.editHandle()"/>
            <zt-button type="delete" @click="table.deleteHandle()"/>
<!--            <zt-button type="delete" @click="deleteSVG"/>-->
          </el-form-item>
        </el-form>
        <el-table v-loading="table.dataLoading" :data="table.dataList" height="100px" v-adaptive="{bottomOffset:70}"
                  border @selection-change="table.selectionChangeHandle">
        <el-table v-loading="table.dataLoading" :data="table.dataList" height="100px" v-adaptive="{bottomOffset:30}"
                  @selection-change="table.selectionChangeHandle">
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column prop="name" label="图片名称"/>
          <zt-table-column-dict prop="isDefault" label="是否默认" dict="is_or_not"/>
          <el-table-column label="图片" align="center">
          <el-table-column label="图片" align="center" prop="svgContent">
            <template v-slot="{ row }">
              <el-image v-if="row.id" :src="url+row.id" style="height: 50px;width: 50px"></el-image>
              <div v-if="row.id" class="custom-svg-container" v-html = row.svgContent></div>
            </template>
          </el-table-column>
          <el-table-column prop="contentType" label="检索关键字"/>
@@ -34,10 +34,9 @@
                                  delete-perm="sysPictureBase::delete"/>
        </el-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update @refreshDataList="table.query"/>
        <add-or-update ref="addOrUpdate" @refreshDataList="table.query"/>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>
@@ -59,6 +58,26 @@
    },
    mounted() {
    },
    methods: {}
    methods: {
      async deleteSVG() {
        let dataSelectedList = this.$refs.tableObj.dataSelectedList
        console.log(dataSelectedList, 'dataSelectedList')
        if(dataSelectedList.length === 0){
          this.$message({message: '请先勾选数据', type: 'warning'})
          return false
        }
        let res = await this.$http.delete('/sysPictureBase/', dataSelectedList)
        if (res.success) {
          await this.$tip.success()
          this.$refs.tableObj.query()
        }
      }
    }
  }
</script>
<style>
  .custom-svg-container svg {
    width: 60px; /* 设置SVG图片的宽度为60 */
    height: 60px; /* 设置SVG图片的高度为60 */
  }
</style>