From a8230f1ab02069431738bd72f36ab95a0ace01ae Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期二, 06 八月 2024 15:22:22 +0800
Subject: [PATCH] 修改仿真后台
---
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue | 124 ++++++++++++++++++++++++++++------------
1 files changed, 86 insertions(+), 38 deletions(-)
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
index 6ae2af8..dbaf9aa 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -1,12 +1,11 @@
<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="productType" rules="required">
- <zt-dict v-model="dataForm.productType" dict="product"></zt-dict>
+ <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>
@@ -14,17 +13,23 @@
<zt-form-item label="妫�绱㈠叧閿瓧" prop="contentType">
<el-input v-model="dataForm.contentType"></el-input>
</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>
+ <zt-form-item label="澶囨敞" prop="remark">
+ <el-input v-model="dataForm.remark"></el-input>
+ </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>
@@ -34,12 +39,15 @@
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: '',
isDefault: '',
name: '',
+ svgContent: '',
contentType: '',
productType: '',
remark: ''
@@ -51,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)
@@ -64,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,
@@ -80,35 +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琛ㄥ崟涓�
- if (!this.dataForm.id){
- this.dataForm.id = 0
+ },
+ 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; // 鍙栨秷鎿嶄綔
}
- 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,4 +161,8 @@
margin-top: 10px !important;
margin-bottom: 0 !important;
}
+
+ /*.zt .el-dialog .el-dialog__body .el-form {
+ min-height: 310px !important;
+ }*/
</style>
--
Gitblit v1.9.1