修改

jinlin

2024-10-10 ebd1db3041e8d87184499604ec8861004cd58d13

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

@@ -1,36 +1,35 @@
<template>
  <zt-dialog ref="dialog" @confirm="formSubmit">
    <el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
      <zt-form-item label="类型" prop="type">
        <el-input v-model="dataForm.type"></el-input>
      </zt-form-item>
      <zt-form-item label="子类型" prop="subType">
        <el-input v-model="dataForm.subType"></el-input>
      </zt-form-item>
  <zt-dialog ref="dialog" @confirm="formSubmit" column="4">
    <el-form :model="dataForm" style="padding: 0" ref="dataForm" :disabled="dataForm.disabled" label-width="120px">
      <zt-form-item label="图片名称" prop="name" rules="required">
        <el-input v-model="dataForm.name"></el-input>
      </zt-form-item>
      <zt-form-item label="产品类型" prop="productType" rules="required">
        <zt-dict v-model="dataForm.productType" dict="product" :additional=additional></zt-dict>
      </zt-form-item>
      <zt-form-item label="是否默认" prop="isDefault" rules="required">
        <zt-dict v-model="dataForm.isDefault" dict="is_or_not"></zt-dict>
      </zt-form-item>
      <zt-form-item label="检索关键字" prop="contentType">
        <el-input v-model="dataForm.contentType"></el-input>
      </zt-form-item>
      <zt-form-item label="系统标识" prop="systemMark">
        <zt-dict v-model="dataForm.systemMark" dict="product"></zt-dict>
      <zt-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark"></el-input>
      </zt-form-item>
      <zt-form-item label="排序" prop="sortNo">
        <el-input v-model="dataForm.sortNo" :readonly="readonly" @input=""></el-input>
      <input type="hidden" id="svgContentId" :value="dataForm.svgContent"/>
      <zt-form-item>
        <!--                <el-upload action="*" :on-change="uploadSvgContent">-->
        <!--                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
        <!--                </el-upload>-->
        <label class="custom-file-upload">
          <input type="file" @change="uploadSvgContent"/>
        </label>
      </zt-form-item>

      <div class="el-flex img-src" style="height: 20px">
        <el-form-item class="marginTopAndMarginBottom" style="width: 100%">
          <!--<config-uploader :lineHeight="true" busi-type="sys_picture" model-name="dataForm" :dataForm="dataForm"
                           v-model="dataForm.files"/>-->
          <el-upload :limit="1" :http-request="httpRequest" :before-upload="beforeUpload" :on-exceed="handleExceed">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
          <el-image v-if="dataForm.id" :src="url+dataForm.id" style="height: 50px;width: 50px"></el-image>
        </el-form-item>
      </div>
    </el-form>
    <iframe :src='SVGEditorUrl' ref="myIframe" width="100%" id="iframe"
            style="height:calc(100vh - 300px)">

    </iframe>
  </zt-dialog>
</template>

@@ -40,16 +39,17 @@
  export default {
    data() {
      return {
        additional: [{dictValue: '20', dictLabel: '运算图元', remark: ''}],
        SVGEditorUrl: `/SVGOrigin/Method-Draw-master/editor/index.html`,
        url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`,
        fileList: [],
        dataForm: {
          id: '',
          type: '',
          subType: '',
          isDefault: '',
          name: '',
          svgContent: '',
          contentType: '',
          systemMark: '',
          sortNo: '',
          productType: '',
          remark: ''
        },
        readonly: {
@@ -59,6 +59,16 @@
      }
    },
    methods: {
      async init(id,row) {
        if (id) {
          //let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
          this.dataForm = {
            ...this.dataForm,
            ...row
          }
          console.log(this.dataForm, 'this.dataForm this.dataForm')
        }
      },
      httpRequest(option) {
        this.fileList.length = 0
        this.fileList.push(option)
@@ -72,13 +82,17 @@
          this.$message.error("最大上传5M")
          return false
        }
        if (fileSize = 0) {
          this.$message.error("未上传图片")
          return false
        }
      },
      // 文件数量过多时提醒
      handleExceed() {
        this.$message({type: 'error', message: '最多支持1个附件上传'})
      },
      // 获取信息
      async getInfo() {
      async getInfo2() {
        let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
        this.dataForm = {
          ...this.dataForm,
@@ -88,33 +102,57 @@
      },
      // 表单提交
      async formSubmit() {
        console.log(this.dataForm, 'async formSubmit()')
        const iframeWindow = this.$refs.myIframe.contentWindow;
        this.dataForm.svgContent = iframeWindow.getSVGContentTest()
        console.log(this.dataForm.svgContent + 'this.dataForm.svgContent')
        this.$http.post('/sysPictureBase/save', this.dataForm).then(res => {
          if (res.success) {
            console.log(this.dataForm, 'this.dataForm')
            this.$tip.success()
            this.$refs.dialog.close()
            this.$emit('refreshDataList')
          }
        })
        // 使用form表单的数据格式
        const params = new FormData()
        // 将上传文件数组依次添加到参数paramsData中
        this.fileList.forEach((x) => {
          params.append('file', x.file)
        });
        // 将输入表单数据添加到params表单中
        params.append('id', this.dataForm.id)
        params.append('type', this.dataForm.type)
        params.append('subType', this.dataForm.subType)
        params.append('name', this.dataForm.name)
        params.append('contentType', this.dataForm.contentType)
        params.append('systemMark', this.dataForm.systemMark)
        params.append('sortNo', this.dataForm.sortNo)
        console.log(params, 'async formSubmit()')
        let res = await this.$http.post('/sysPictureBase/save', params)
        if (res.success) {
          await this.$tip.success()
          this.$refs.dialog.close()
          this.$emit('refreshDataList')
      },
      async uploadSvgContent(event) {
        const iframeWindow = this.$refs.myIframe.contentWindow
        const file = event.target.files[0];
        console.log(file, 'file file')
        // 可以在这里进行进一步的文件处理，比如读取文件内容等操作
        if (file && file.type === 'image/svg+xml') {
          const reader = new FileReader();
          reader.onload = (e) => {
            const fileContent = e.target.result;
            console.log('File content:', fileContent);
            iframeWindow.setSvgContent(fileContent)
          }
          reader.readAsText(file); // 以文本形式读取文件内容
        } else {
          this.$message({message: '请选择SVG图片', type: 'warning'})
          return false; // 取消操作
        }
        // iframeWindow.setSvgContent(data)
        // 使用form表单的数据格式
      }
    }
    },
    mounted() {
      // window.addEventListener('message', this.handleIframeMessage);
    },
    beforeDestroy() {
      window.removeEventListener('message', this.handleIframeMessage);
    },
  }
</script>
<style>
  .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 0 12px;
    cursor: pointer;
    background-color: #f9f9f9;
  }

  .img-sc > .el-form-item > .el-form-item__content {
    width: 100%;
  }
@@ -123,4 +161,8 @@
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  /*.zt .el-dialog .el-dialog__body .el-form {
    min-height: 310px !important;
  }*/
</style>