Merge remote-tracking branch 'origin/master'
| | |
| | | /** |
| | | * product_model |
| | | * |
| | | * @author zt generator |
| | | * @author zt generator |
| | | * @since 1.0.0 2024-02-29 |
| | | */ |
| | | @Data |
| | |
| | | private String taskMtbcfOther; |
| | | |
| | | @TableField(exist = false) |
| | | private String svgContent; |
| | | |
| | | @TableField(exist = false) |
| | | private Integer isRepair; |
| | | @TableField(exist = false) |
| | | private Integer repairDistribType; |
| | |
| | | @PostMapping("save") |
| | | @ApiOperation("保存") |
| | | @LogOperation("保存") |
| | | public Result save(@RequestBody MultipartFile file, Long id, Integer isDefault, |
| | | String name, String contentType, Integer productType, String remark) { |
| | | SysPictureBase sysPictureBase; |
| | | SysPictureBase pictureBase = sysPictureBaseService.getDefaultImg(productType); |
| | | if (id != 0) { |
| | | sysPictureBase = sysPictureBaseService.get(id); |
| | | sysPictureBase.setIsDefault(isDefault); |
| | | sysPictureBase.setName(name); |
| | | sysPictureBase.setContentType(contentType); |
| | | sysPictureBase.setProductType(productType); |
| | | sysPictureBase.setRemark(remark); |
| | | public Result save(@RequestBody SysPictureBase sysPictureBase) { |
| | | if (sysPictureBase.getId() != null) { |
| | | sysPictureBaseService.update(sysPictureBase); |
| | | } else { |
| | | sysPictureBase = new SysPictureBase(); |
| | | sysPictureBase.setIsDefault(isDefault); |
| | | sysPictureBase.setName(name); |
| | | sysPictureBase.setContentType(contentType); |
| | | sysPictureBase.setProductType(productType); |
| | | sysPictureBase.setRemark(remark); |
| | | sysPictureBaseService.insert(sysPictureBase); |
| | | } |
| | | if (sysPictureBase.getIsDefault()==1){ |
| | | if (pictureBase.getId()==null){ |
| | | if (sysPictureBase.getId()==null){ |
| | | sysPictureBaseService.updateByDefault(sysPictureBase.getId(),sysPictureBase.getProductType()); |
| | | sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),null); |
| | | }else{ |
| | | if (!sysPictureBase.getId().equals(pictureBase.getId())){ |
| | | if (!sysPictureBase.getId().equals(sysPictureBase.getId())){ |
| | | sysPictureBaseService.updateByDefault(sysPictureBase.getId(),sysPictureBase.getProductType()); |
| | | sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),pictureBase.getId()); |
| | | sysPictureBaseService.updateProdeuctImg(sysPictureBase.getId(),sysPictureBase.getProductType(),sysPictureBase.getId()); |
| | | } |
| | | } |
| | | } |
| | | if (file != null) { |
| | | /* if (file != null) { |
| | | BufferedImage bufferedImage = null; |
| | | try { |
| | | String fileName = file.getOriginalFilename(); |
| | |
| | | } catch (IOException e) { |
| | | e.printStackTrace(); |
| | | } |
| | | |
| | | } |
| | | }*/ |
| | | return Result.ok(); |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | @RequestMapping("/getSvgImage") |
| | | public void getSvgImage(HttpServletResponse response, Long id) { |
| | | try { |
| | | SysPictureBase data = sysPictureBaseService.get(id); |
| | | String svgContent = data.getSvgContent(); |
| | | response.setContentType("image/svg+xml"); |
| | | response.getWriter().write(svgContent); |
| | | response.getWriter().flush(); |
| | | response.getWriter().close(); |
| | | |
| | | } catch (IOException e) { |
| | | e.printStackTrace(); |
| | | } |
| | | } |
| | | |
| | | @GetMapping("/getDefaultImg") |
| | | public Result<SysPictureBase> getDefaultImg(Integer productType) { |
| | | SysPictureBase data = sysPictureBaseService.getDefaultImg(productType); |
| | |
| | | /** |
| | | * sys_picture_base |
| | | * |
| | | * @author zt generator |
| | | * @author zt generator |
| | | * @since 1.0.0 2024-02-27 |
| | | */ |
| | | @Data |
| | |
| | | @ApiModelProperty(value = "图片高度") |
| | | private Integer height; |
| | | |
| | | @ApiModelProperty(value = "svg图片") |
| | | private String svgContent; |
| | | |
| | | @ApiModelProperty(value = "检索关键字") |
| | | private String contentType; |
| | | |
| | |
| | | a.`NAME` as imgName, |
| | | 'node' as nodeType, |
| | | '' as nodeTypeExt, |
| | | s.svg_content as svgContent, |
| | | s.width as imgWidth, |
| | | s.height as imgHeight, |
| | | a.id as dataId, |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-form :inline="true"> |
| | | <zt-form-item> |
| | | <zt-button style="margin-left: 10px" @click="svgCanvas()">保存</zt-button> |
| | | </zt-form-item> |
| | | </el-form> |
| | | <iframe src="/SVGOrigin/Method-Draw-master/editor/index.html" ref="myIframe" width="100%" |
| | | style="height:calc(100vh - 125px)"> |
| | | |
| | | </iframe> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // 监听iframe发送过来的消息 |
| | | window.addEventListener('message', (event) => { |
| | | if (event.origin === "/SVGOrigin/Method-Draw-master/editor/index.html") { // 确保消息来源可靠 |
| | | console.log('Received message from iframe:', event.data); |
| | | } |
| | | }) |
| | | export default { |
| | | name: "SVGEditor", |
| | | data(){ |
| | | return { |
| | | |
| | | } |
| | | }, |
| | | components:{ |
| | | |
| | | }, |
| | | methods:{ |
| | | handleIframeMessage(event){ |
| | | // 从 iframe 接收到的数据 |
| | | const svgData = event.data; |
| | | |
| | | // 在这里处理接收到的数据 |
| | | console.log('svgData:', svgData); |
| | | }, |
| | | svgCanvas(){ |
| | | const iframe = this.$refs.myIframe; |
| | | const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; |
| | | const iframeWindow = this.$refs.myIframe.contentWindow; |
| | | // 获取 iframe 中 id 为 tool_save 的按钮元素 |
| | | const saveButton = iframeDocument.getElementById('tool_save'); |
| | | if (saveButton) { |
| | | // 创建一个新的鼠标抬起事件(mouseup) |
| | | const mouseUpEvent = new MouseEvent('mouseup', { |
| | | bubbles: true, |
| | | cancelable: true, |
| | | view: window |
| | | }); |
| | | // 监听鼠标抬起事件 |
| | | saveButton.addEventListener('mouseup', function(event) { |
| | | console.log('Mouse Up Event Triggered'); |
| | | iframeWindow.postMessage('triggerEvent', '*') |
| | | setTimeout(()=>{ |
| | | window.addEventListener('message', this.handleIframeMessage) |
| | | },0) |
| | | |
| | | }); |
| | | // 触发鼠标抬起事件 |
| | | saveButton.dispatchEvent(mouseUpEvent); |
| | | } else { |
| | | console.log('Button not found in iframe'); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('message', this.handleIframeMessage); |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('message', this.handleIframeMessage); |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
| | |
| | | <template> |
| | | <zt-dialog ref="dialog" @confirm="formSubmit"> |
| | | <el-form :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" label-width="120px"> |
| | | |
| | | <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="contentType"> |
| | | <el-input v-model="dataForm.contentType"></el-input> |
| | | </zt-form-item> |
| | | <zt-form-item> |
| | | <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> |
| | | </zt-form-item> |
| | | <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> |
| | | </el-form> |
| | | <iframe :src='SVGEditorUrl' ref="myIframe" width="100%" id="iframe" |
| | | style="height:calc(100vh - 300px)"> |
| | | |
| | | </iframe> |
| | | </zt-dialog> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | SVGEditorUrl: `/SVGOrigin/Method-Draw-master/editor/index.html`, |
| | | url: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=`, |
| | | fileList: [], |
| | | dataForm: { |
| | | id: '', |
| | | isDefault: '', |
| | | name: '', |
| | | svgContent: '', |
| | | contentType: '', |
| | | productType: '', |
| | | remark: '' |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | async init() { |
| | | if (this.dataForm.id) { |
| | | let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`) |
| | | this.dataForm = { |
| | | ...this.dataForm, |
| | | ...res.data |
| | | } |
| | | console.log(this.dataForm,'this.dataForm this.dataForm') |
| | | } |
| | | }, |
| | | httpRequest(option) { |
| | | this.fileList.length = 0 |
| | | this.fileList.push(option) |
| | |
| | | this.$message({type: 'error', message: '最多支持1个附件上传'}) |
| | | }, |
| | | // 获取信息 |
| | | async getInfo() { |
| | | async getInfo2() { |
| | | let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`) |
| | | this.dataForm = { |
| | | ...this.dataForm, |
| | |
| | | }, |
| | | // 表单提交 |
| | | 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表单中 |
| | | if (!this.dataForm.id){ |
| | | this.dataForm.id = 0 |
| | | }, |
| | | async uploadSvgContent(event) { |
| | | const iframeWindow = this.$refs.myIframe.contentWindow |
| | | const file = event.target.files[0]; |
| | | // 可以在这里进行进一步的文件处理,比如读取文件内容等操作 |
| | | if (file) { |
| | | const reader = new FileReader(); |
| | | reader.onload = (e) => { |
| | | const fileContent = e.target.result; |
| | | console.log('File content:', fileContent); |
| | | iframeWindow.setSvgContent(fileContent) |
| | | } |
| | | reader.readAsText(file); // 以文本形式读取文件内容 |
| | | } |
| | | params.append('id', this.dataForm.id) |
| | | params.append('isDefault', this.dataForm.isDefault) |
| | | params.append('name', this.dataForm.name) |
| | | params.append('contentType', this.dataForm.contentType) |
| | | params.append('productType', this.dataForm.productType) |
| | | params.append('remark', this.dataForm.remark) |
| | | 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') |
| | | } |
| | | // 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%; |
| | | } |
| | |
| | | margin-top: 10px !important; |
| | | margin-bottom: 0 !important; |
| | | } |
| | | |
| | | /*.zt .el-dialog .el-dialog__body .el-form { |
| | | min-height: 310px !important; |
| | | }*/ |
| | |
| | | <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> |
| | | <el-input v-if="row.id" v-html = row.svgContent></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="contentType" label="检索关键字"/> |
| | |
| | | delete-perm="sysPictureBase::delete"/> |
| | | </el-table> |
| | | <!-- 弹窗, 新增 / 修改 --> |
| | | <add-or-update @refreshDataList="table.query"/> |
| | | <add-or-update ref="addOrUpdate" @refreshDataList="table.query"/> |
| | | </zt-table-wraper> |
| | | </div> |
| | | </template> |
| | |
| | | let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params}) |
| | | this.imagesList2 = res.data |
| | | console.log(this.imagesList2, 'getProduct(productId)234567890') |
| | | let urlObject = window.URL || window.webkitURL || window; |
| | | |
| | | const imageNodes2 = this.imagesList2.map((item) => |
| | | this.graph.createNode({ |
| | | shape: 'image', |
| | | imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, |
| | | //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, |
| | | width: 60, |
| | | height: 60, |
| | | id: item.dataId, // 手动设置节点的 ID |
| | |
| | | voteNum: '', |
| | | }, |
| | | attrs: { |
| | | image: { |
| | | 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`, |
| | | //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])), |
| | | }, |
| | | text: { |
| | | text: item.imgName, |
| | | fontSize: 14, |