From 300b8b3de2fbb30cecf30efe13930836167fe692 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期五, 02 八月 2024 17:49:19 +0800
Subject: [PATCH] 修改仿真
---
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue | 153 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 120 insertions(+), 33 deletions(-)
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
index 09ca888..dbaf9aa 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -1,81 +1,168 @@
<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="contentType" >
+ <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" rules="required">
- <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-form-item>
- </div>
</el-form>
+ <iframe :src='SVGEditorUrl' ref="myIframe" width="100%" id="iframe"
+ style="height:calc(100vh - 300px)">
+
+ </iframe>
</zt-dialog>
</template>
<script>
+ import Cookies from "js-cookie";
+
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:{
+ readonly: {
type: Boolean,
default: false
},
}
},
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)
+ },
+ // 涓婁紶鍓嶅鐞�
+ beforeUpload(file) {
+ let fileSize = file.size
+ const FIVE_M = 5 * 1024 * 1024;
+ //澶т簬5M锛屼笉鍏佽涓婁紶
+ if (fileSize > FIVE_M) {
+ this.$message.error("鏈�澶т笂浼�5M")
+ return false
+ }
+ if (fileSize = 0) {
+ this.$message.error("鏈笂浼犲浘鐗�")
+ return false
+ }
+ },
+ // 鏂囦欢鏁伴噺杩囧鏃舵彁閱�
+ handleExceed() {
+ this.$message({type: 'error', message: '鏈�澶氭敮鎸�1涓檮浠朵笂浼�'})
+ },
// 鑾峰彇淇℃伅
- async getInfo() {
- let res = await this.$http.get(`/sysPictureBase/SysPictureBase/${this.dataForm.id}`)
+ async getInfo2() {
+ let res = await this.$http.get(`/sysPictureBase/${this.dataForm.id}`)
this.dataForm = {
...this.dataForm,
...res.data
}
+ console.log(this.dataForm, 'async getInfo()')
},
// 琛ㄥ崟鎻愪氦
async formSubmit() {
- let res = await this.$http[!this.dataForm.id ? 'post' : 'put']('/sysPictureBase/SysPictureBase/', this.dataForm)
- if (res.success) {
- await this.$tip.success()
- this.$refs.dialog.close()
- this.$emit('refreshDataList')
+ 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琛ㄥ崟鐨勬暟鎹牸寮�
+ },
+ 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%;
}
- .marginTopAndMarginBottom {
+
+ .marginTopAndMarginBottom {
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