From 65a79e6ec47a067136f5e9297ca339e8c20747f1 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期五, 17 五月 2024 10:19:10 +0800
Subject: [PATCH] svgEditor
---
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue | 102 ++++++++++++++++++++++++++++++++++----------------
1 files changed, 69 insertions(+), 33 deletions(-)
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
index 27716e4..412fe0c 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -1,7 +1,6 @@
<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>
@@ -14,13 +13,20 @@
<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>
@@ -30,12 +36,14 @@
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: ''
@@ -47,6 +55,16 @@
}
},
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)
@@ -70,7 +88,7 @@
this.$message({type: 'error', message: '鏈�澶氭敮鎸�1涓檮浠朵笂浼�'})
},
// 鑾峰彇淇℃伅
- async getInfo() {
+ async getInfo2() {
let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
this.dataForm = {
...this.dataForm,
@@ -80,35 +98,52 @@
},
// 琛ㄥ崟鎻愪氦
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%;
}
@@ -117,6 +152,7 @@
margin-top: 10px !important;
margin-bottom: 0 !important;
}
+
/*.zt .el-dialog .el-dialog__body .el-form {
min-height: 310px !important;
}*/
--
Gitblit v1.9.1