优化 批稿提交为图片上传
This commit is contained in:
YuanFeng
parent
0e67114e15
commit
03bb6c6acb
|
|
@ -264,7 +264,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup name="DynamicPropConfig">
|
||||
import {ElButton, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
|
||||
import {ElButton, ElLoading, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
|
||||
import {reactive, watch} from 'vue'
|
||||
import {useMessage} from "@/hooks/web/useMessage";
|
||||
import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
|
||||
|
|
@ -277,6 +277,8 @@ import * as FileApi from "@/api/infra/file";
|
|||
import {useLocaleStore} from "@/store/modules/locale";
|
||||
import {ProductInfoApi} from "@/api/oms/productinfo";
|
||||
import domtoimage from 'dom-to-image';
|
||||
import {usePageLoading} from "@/hooks/web/usePageLoading";
|
||||
const { loadStart, loadDone } = usePageLoading()
|
||||
// 动态属性配置
|
||||
const localeStore = useLocaleStore()
|
||||
const emit = defineEmits(['change', 'initSucceed'])
|
||||
|
|
@ -284,6 +286,7 @@ const draftDesignEditRef = ref()
|
|||
const that = reactive({
|
||||
svgId: "svg_"+Math.random().toString(36).substring(2),
|
||||
hideCreate: true,
|
||||
pageLoading: {},
|
||||
propInfo: {
|
||||
reView: true,
|
||||
groupName: '', // 节点名称
|
||||
|
|
@ -443,25 +446,28 @@ const washingInfoListByType = (type) => {
|
|||
const getIngredientInfoListByType = (type) => {
|
||||
return that.ingredientInfoList.filter(item => item.type === type)
|
||||
}
|
||||
const uploadFile = async (fileName) => {
|
||||
return new Promise((resolve, reject)=>{
|
||||
|
||||
const toBase64 = async () =>{
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
console.log("svg2canvas",domtoimage)
|
||||
domtoimage.toPng(svgElement)
|
||||
.then((dataUrl) => {
|
||||
that.previewData = dataUrl;
|
||||
that.previewUrl =""
|
||||
// 下载
|
||||
// const link = document.createElement('a');
|
||||
// link.href = dataUrl;
|
||||
// link.download = 'image.png';
|
||||
// link.click();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('转换失败:', error);
|
||||
});
|
||||
|
||||
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
domtoimage.toBlob(svgElement).then((blob) => {
|
||||
FileApi.updateFile({ file: blob })
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
resolve({
|
||||
...res,
|
||||
filename: fileName
|
||||
})
|
||||
} else {
|
||||
reject(res)
|
||||
}
|
||||
}) .catch((res) => {
|
||||
reject(res)
|
||||
})
|
||||
}).catch(function (error) {
|
||||
console.error('转换或上传过程中出现错误：', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deleteList = (item, index) => {
|
||||
|
|
@ -623,33 +629,40 @@ const updateDesign = () => {
|
|||
const changeType = () => {
|
||||
previewByDraftDesignId(that.draftDesignId, that.propInfo)
|
||||
}
|
||||
|
||||
const getPropInfo = () => {
|
||||
|
||||
that.pageLoading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '数据传输中...',
|
||||
background: 'rgba(0,0,0,0.5)'
|
||||
})
|
||||
// 预览数据 保持缩放
|
||||
return new Promise((resolve) => {
|
||||
// 成功后再获取图片
|
||||
draftDesignEditRef.value.toSVGData((url) => {
|
||||
that.previewUrl = url
|
||||
that.hideCreate = false;
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
domtoimage.toPng(svgElement)
|
||||
.then((dataUrl) => {
|
||||
that.previewData = dataUrl;
|
||||
that.hideCreate = true;
|
||||
that.previewUrl =""
|
||||
const info = draftDesignEditRef.value.getPropInfo();
|
||||
resolve({
|
||||
draftDesignData: draftDesignEditRef.value.getJson(),
|
||||
propOrderByList: info.propOrderByList,
|
||||
// 设计稿id
|
||||
draftDesignId: that.draftDesignId,
|
||||
previewImage: that.previewData,
|
||||
propInfo: that.propInfo
|
||||
})
|
||||
// 年月日
|
||||
const date = new Date();
|
||||
const randChar = Math.random().toString(36).slice(-6);
|
||||
const fileName = `${date.getFullYear()}${ (date.getMonth() + 1)}${ date.getDate()}_${that.draftDesignId }_${randChar}_稿.png`;
|
||||
// 文件上传
|
||||
uploadFile(fileName).then(res =>{
|
||||
that.previewData = res.data;
|
||||
that.hideCreate = true;
|
||||
that.previewUrl =""
|
||||
const info = draftDesignEditRef.value.getPropInfo();
|
||||
that.pageLoading.close()
|
||||
resolve({
|
||||
draftDesignData: draftDesignEditRef.value.getJson(),
|
||||
propOrderByList: info.propOrderByList,
|
||||
// 设计稿id
|
||||
draftDesignId: that.draftDesignId,
|
||||
previewImage: that.previewData,
|
||||
propInfo: that.propInfo
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('转换失败:', error);
|
||||
});
|
||||
|
||||
})
|
||||
}, {
|
||||
widthScale: 6,
|
||||
heightScale: 6
|
||||
|
|
|
|||
|
|
@ -264,7 +264,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup name="DynamicPropConfig">
|
||||
import {ElButton, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
|
||||
import {ElButton, ElLoading, ElMessageBox, ElSelect, ElSelectV2} from "element-plus";
|
||||
import {reactive, watch} from 'vue'
|
||||
import {useMessage} from "@/hooks/web/useMessage";
|
||||
import {DraftDesignDataApi} from "@/api/oms/draftdesigndata";
|
||||
|
|
@ -277,6 +277,8 @@ import * as FileApi from "@/api/infra/file";
|
|||
import {useLocaleStore} from "@/store/modules/locale";
|
||||
import {ProductInfoApi} from "@/api/oms/productinfo";
|
||||
import domtoimage from 'dom-to-image';
|
||||
import {usePageLoading} from "@/hooks/web/usePageLoading";
|
||||
const { loadStart, loadDone } = usePageLoading()
|
||||
// 动态属性配置
|
||||
const localeStore = useLocaleStore()
|
||||
const emit = defineEmits(['change', 'initSucceed'])
|
||||
|
|
@ -284,6 +286,7 @@ const draftDesignEditRef = ref()
|
|||
const that = reactive({
|
||||
svgId: "svg_"+Math.random().toString(36).substring(2),
|
||||
hideCreate: true,
|
||||
pageLoading: {},
|
||||
propInfo: {
|
||||
reView: true,
|
||||
groupName: '', // 节点名称
|
||||
|
|
@ -443,25 +446,28 @@ const washingInfoListByType = (type) => {
|
|||
const getIngredientInfoListByType = (type) => {
|
||||
return that.ingredientInfoList.filter(item => item.type === type)
|
||||
}
|
||||
const uploadFile = async (fileName) => {
|
||||
return new Promise((resolve, reject)=>{
|
||||
|
||||
const toBase64 = async () =>{
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
console.log("svg2canvas",domtoimage)
|
||||
domtoimage.toPng(svgElement)
|
||||
.then((dataUrl) => {
|
||||
that.previewData = dataUrl;
|
||||
that.previewUrl =""
|
||||
// 下载
|
||||
// const link = document.createElement('a');
|
||||
// link.href = dataUrl;
|
||||
// link.download = 'image.png';
|
||||
// link.click();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('转换失败:', error);
|
||||
});
|
||||
|
||||
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
domtoimage.toBlob(svgElement).then((blob) => {
|
||||
FileApi.updateFile({ file: blob })
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
resolve({
|
||||
...res,
|
||||
filename: fileName
|
||||
})
|
||||
} else {
|
||||
reject(res)
|
||||
}
|
||||
}) .catch((res) => {
|
||||
reject(res)
|
||||
})
|
||||
}).catch(function (error) {
|
||||
console.error('转换或上传过程中出现错误：', error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const deleteList = (item, index) => {
|
||||
|
|
@ -623,33 +629,40 @@ const updateDesign = () => {
|
|||
const changeType = () => {
|
||||
previewByDraftDesignId(that.draftDesignId, that.propInfo)
|
||||
}
|
||||
|
||||
const getPropInfo = () => {
|
||||
|
||||
that.pageLoading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '数据传输中...',
|
||||
background: 'rgba(0,0,0,0.5)'
|
||||
})
|
||||
// 预览数据 保持缩放
|
||||
return new Promise((resolve) => {
|
||||
// 成功后再获取图片
|
||||
draftDesignEditRef.value.toSVGData((url) => {
|
||||
that.previewUrl = url
|
||||
that.hideCreate = false;
|
||||
let svgElement = document.getElementById(that.svgId);
|
||||
domtoimage.toPng(svgElement)
|
||||
.then((dataUrl) => {
|
||||
that.previewData = dataUrl;
|
||||
that.hideCreate = true;
|
||||
that.previewUrl =""
|
||||
const info = draftDesignEditRef.value.getPropInfo();
|
||||
resolve({
|
||||
draftDesignData: draftDesignEditRef.value.getJson(),
|
||||
propOrderByList: info.propOrderByList,
|
||||
// 设计稿id
|
||||
draftDesignId: that.draftDesignId,
|
||||
previewImage: that.previewData,
|
||||
propInfo: that.propInfo
|
||||
})
|
||||
// 年月日
|
||||
const date = new Date();
|
||||
const randChar = Math.random().toString(36).slice(-6);
|
||||
const fileName = `${date.getFullYear()}${ (date.getMonth() + 1)}${ date.getDate()}_${that.draftDesignId }_${randChar}_稿.png`;
|
||||
// 文件上传
|
||||
uploadFile(fileName).then(res =>{
|
||||
that.previewData = res.data;
|
||||
that.hideCreate = true;
|
||||
that.previewUrl =""
|
||||
const info = draftDesignEditRef.value.getPropInfo();
|
||||
that.pageLoading.close()
|
||||
resolve({
|
||||
draftDesignData: draftDesignEditRef.value.getJson(),
|
||||
propOrderByList: info.propOrderByList,
|
||||
// 设计稿id
|
||||
draftDesignId: that.draftDesignId,
|
||||
previewImage: that.previewData,
|
||||
propInfo: that.propInfo
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('转换失败:', error);
|
||||
});
|
||||
|
||||
})
|
||||
}, {
|
||||
widthScale: 6,
|
||||
heightScale: 6
|
||||
|
|
|
|||
Loading…
Reference in New Issue