diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue index 3313cc2..6744930 100644 --- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue +++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue @@ -73,58 +73,68 @@ :key="tmp.key" :label="getLabelName(that.propInfo[tmp.key])">
-
-
- - - - + style="box-shadow: 0px 2px 5px 2px #dcdcdc;" + v-if="that.propInfo[tmp.key].multiLanguage + && that.propInfo[tmp.key].shape === ShapeType.vueTextCell"> - -
-
- - -
占比
- - - - - -
%
- - + + @click="appendList(tmp.key)"> 添加
@@ -152,7 +162,6 @@ @change="changeData" @select="changeData" /> - - +
占比
 - + - +
%
 @@ -186,7 +195,7 @@
+ @click="deleteList(tmp.key,index)">
@@ -194,7 +203,7 @@ + @click="appendList(tmp.key)"> 添加
@@ -231,13 +240,13 @@
+ @click="deleteList(tmp.key,index)"> + @click="appendList(tmp.key)"> 添加 @@ -317,6 +326,7 @@ const that = reactive({ svgId: "svg_" + Math.random().toString(36).substring(2), hideCreate: true, pageLoading: {}, + restInfo: null, propInfo: { reView: true, groupName: '', // 节点名称 @@ -403,53 +413,41 @@ const initSucceed = () => { const changeData = (index: number, key: string) => { const info = that.propInfo[key]; const infoList = getIngredientInfoListByType(info.groupType) - if (index < 0) { - let mapping = [] - for (let i = 0; i < infoList.length; i++) { - if (infoList[i].label === info.dataInfo[0].showLabel) { - mapping = infoList[i].langMapping; - break; - } - } - // 多语言数据 - for (let i = 0; i < that.propInfo[key].dataInfo.length; i++) { - for (let j = 0; j < mapping.length; j++) { - if (that.propInfo[key].dataInfo[i].locale === mapping[j].locale) { + let mapping = {} + for (let i = 0; i < infoList.length; i++) { + mapping[infoList[i].label] = infoList[i].langMapping; + } + // 多语言变量替换 + const allData = [...that.propInfo[key].dataInfo] + const fLang = allData[0].locale; + let m1 = mapping[allData[0].label] - let str = that.propInfo[key].dataInfo[0].ratio; + if(m1){ + let ratio = allData[0].ratio + for (let i = 0; i < allData.length; i++) { + + if(i>0 && allData[i].locale === fLang){ + ratio = allData[i].ratio + m1 = mapping[allData[i].label] + } + for (let j = 0; j < m1.length; j++) { + if( allData[i].locale === m1[j].locale){ + console.log("m1",m1[j],ratio) + let str = ratio; if (str === null || str === undefined || str === -1) { str = '' } - const value = `${mapping[j].value}`.replaceAll('${r}', str) - that.propInfo[key].dataInfo[i].label = value + allData[i].label = `${m1[j].value}`.replaceAll('${r}', `${str}`) break; } } } - } else { - for (let i = 0; i < infoList.length; i++) { - if (infoList[i].value === that.propInfo[key].dataInfo[index].showLabel) { - const arr = infoList[i].langMapping as Array; - let value = ''; - if (infoList[i].isCombo) { - for (let j = 0; j < arr.length; j++) { - if (j > 0) { - value += arr[j].linkChar || '' - } - let str = that.propInfo[key].dataInfo[index].ratio; - if (str === null || str === undefined || str === -1) { - str = '' - } - value += `${arr[j].value}`.replaceAll('${r}', str) - } - } - that.propInfo[key].dataInfo[index].label = value; - break; - } - } + that.propInfo[key].dataInfo = [...allData]; + + resetData(); } - resetData(); + } const changeComboData = (item: any, label: string) => { let info = []; @@ -513,19 +511,63 @@ const uploadFile = async (fileName) => { }); } -const deleteList = (item, index) => { - item.dataInfo.splice(index, 1) - resetData(); -} -const appendList = (item) => { - item.dataInfo.push( - { - label: '', - url: '', - ratio: 0, - ...item.dataInfo[item.dataInfo.length - 1] +const deleteList = (key, index) => { + const item = JSON.parse(JSON.stringify(that.propInfo[key])) + const group = findGroup(key,that.propInfo) + const keys = Object.keys(group); + + if(keys.length > 1){ + console.log(index) + // 删除同一组数据 + const firstLang = item.dataInfo[0].locale + const indexs = []; + for (let i = index; i < item.dataInfo.length; i++) { + if(i > index && firstLang === item.dataInfo[i].locale){ + break; + } + indexs.push(i); } - ) + const newArr = []; + for (let i = 0; i < that.propInfo[key].dataInfo.length; i++) { + if(!indexs.includes(i)){ + newArr.push(that.propInfo[key].dataInfo[i]) + } + } + that.propInfo[key].dataInfo = [...newArr] + resetData(); + }else { + useMessage().notifyWarning("至少需要一个变量") + return; + } + +} +const appendList = (key) => { + const item = that.propInfo[key] + console.log("item.dataInfo",item) + const group = findGroup(key,that.propInfo) + const keys = Object.keys(group); + console.log("keys",keys) + // 有多少组变量 + if(keys.length >= item.maxSize ){ + useMessage().notifyWarning("最大数量为:"+item.maxSize) + return; + } + const locale = item.dataInfo[0].locale + const tmpArr = [...item.dataInfo] + + for (let i = 0; i < tmpArr.length; i++) { + if(i > 0 && tmpArr[i].locale === locale){ + break; + } + item.dataInfo.push( + { + label: '', + url: '', + ratio: 0, + ...tmpArr[i] + } + ) + } resetData(); } const formData = ref({ @@ -646,7 +688,8 @@ const showPng = () => { const info = draftDesignEditRef.value.getPropInfo(); that.propInfo = { ...info.propDefault, - ...that.propInfo || {} + ...that.propInfo || {}, + ...that.restInfo || {}, }; that.propOrderByList = info.propOrderByList; loading.value = false; @@ -665,65 +708,174 @@ const resetData = () => { that.changeCount++; } } +const findGroup = (key,propInfo)=>{ + let groupArr= []; + let index = 0; + let gInfo = {}; + let firstLang = propInfo[key].dataInfo[0].locale + for (let l = 0; l < propInfo[key].dataInfo.length; l++) { + // 数据分组 + if(l > index && propInfo[key].dataInfo[l].locale === firstLang){ + index = l; + groupArr = [] + } + groupArr.push(propInfo[key].dataInfo[l]) + gInfo[`${key}_g${index}`] = groupArr; + } + return gInfo +} +/** + * 获取语言分组 + * @param key + * @param propInfo + */ +const findGroupAllLang = (key,propInfo)=>{ + const langList = []; + let firstLang = propInfo[key].dataInfo[0].locale + for (let l = 0; l < propInfo[key].dataInfo.length; l++) { + // 数据分组 + if(l > 0 && propInfo[key].dataInfo[l].locale === firstLang){ + break; + } + langList.push(propInfo[key].dataInfo[l].locale) + } + return langList +} +const checkPropInfo = (info)=>{ + return new Promise((resolve,reject)=>{ + let newInfo = JSON.parse(JSON.stringify(info)) + + const keys = Object.keys(newInfo); + for (let i = 0; i < keys.length; i++) { + const key = keys[i]; + // 合并相同语言的文字 + let newArr = []; + + // 每种语言合并成一句话 + const allLang = findGroupAllLang(key,newInfo); + for (let l = 0; l < newInfo[key].dataInfo.length; l++) { + let str = []; + let row = null; + let labelInfo = [] + let rInfo = 0; + const firstLang = newInfo[key].dataInfo[0].locale; + for (let i1 = 0; i1 < newInfo[key].dataInfo.length; i1++) { + + + if(firstLang === newInfo[key].dataInfo[i1].locale){ + if(newInfo[key].groupType === '1'){ + rInfo += newInfo[key].dataInfo[i1].ratio + if(rInfo > 100){ + useMessage().notifyError("占比总数不能超过100"); + reject("占比总数不能超过100") + return + } + } + if(labelInfo.includes(newInfo[key].dataInfo[i1].showLabel)){ + useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length+1}项重复`); + reject("数据重复") + return + } + labelInfo.push(newInfo[key].dataInfo[i1].showLabel) + } + if(newInfo[key].dataInfo[i1].locale === allLang[l]){ + str.push(newInfo[key].dataInfo[i1].label) + if(!row){ + row = {...newInfo[key].dataInfo[i1]}; + } + } + } + if(newInfo[key].groupType === '1'){ + if(rInfo != 100){ + useMessage().notifyError(`成分占比应该是100%,当前只有${rInfo}%`); + reject(`成分占比应该是100%,当前只有${rInfo}%`) + return + } + } + if(row){ + row.label = str.join(","); + newArr.push(row); + } + } + newInfo[key].dataInfo = newArr; + console.log("that.propInfo",newArr) + console.log("that. newInfo[key]", newInfo[key]) + } + resolve(newInfo) + }); +} const updateDesign = () => { that.changeCount = 0; - draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo) + // 记录变更的数据 + that.restInfo = {...that.propInfo} + checkPropInfo(that.propInfo).then(newInfo=>{ + // + console.log("that.restInfo",that.restInfo) + draftDesignEditRef.value.init(false, that.pageConfig, that.data, newInfo) + }) } + 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; - setTimeout(()=>{ - const el = document.querySelector(`#${that.svgId} g`); - el.setAttribute("transform",'matrix(1,0,0,1,0,0)'); + checkPropInfo(that.propInfo).then(r =>{ + that.pageLoading = ElLoading.service({ + lock: true, + text: '数据传输中...', + background: 'rgba(0,0,0,0.5)' + }) + // 成功后再获取图片 + draftDesignEditRef.value.toSVGData((url) => { + that.previewUrl = url + that.hideCreate = false; + setTimeout(()=>{ + const el = document.querySelector(`#${that.svgId} g`); + el.setAttribute("transform",'matrix(1,0,0,1,0,0)'); - document.querySelector(`#${that.svgId} svg`).style.position = 'absolute'; - document.querySelector(`#${that.svgId} svg`).style.top = '-40%'; + document.querySelector(`#${that.svgId} svg`).style.position = 'absolute'; + document.querySelector(`#${that.svgId} svg`).style.top = '-40%'; - const dom = document.querySelector(`#${that.svgId} svg .x6-graph-svg-viewport`).getBoundingClientRect() - const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect() - that.svgHeight = dom.height; - that.svgWidth = dom.width; - document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`; - document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`; - // that.pageLoading.close() - // 年月日 - 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 + const dom = document.querySelector(`#${that.svgId} svg .x6-graph-svg-viewport`).getBoundingClientRect() + const svgDom = document.querySelector(`#${that.svgId} svg`).getBoundingClientRect() + that.svgHeight = dom.height; + that.svgWidth = dom.width; + document.querySelector(`#${that.svgId} svg`).style.left = `${svgDom.left - dom.left}px`; + document.querySelector(`#${that.svgId} svg`).style.top = `${svgDom.top - dom.top}px`; + // that.pageLoading.close() + // 年月日 + 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() + that.propInfo = { + ...info.propDefault, + ...that.propInfo || {}, + ...that.restInfo || {}, + }; + resolve({ + draftDesignData: draftDesignEditRef.value.getJson(), + propOrderByList: info.propOrderByList, + // 设计稿id + draftDesignId: that.draftDesignId, + previewImage: that.previewData, + propInfo: that.propInfo + }) }) }) - }) - }, { - widthScale: 6, - heightScale: 6 + }, { + widthScale: 6, + heightScale: 6 + }) }) }) } diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue index f908314..370a210 100644 --- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue +++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue @@ -41,7 +41,7 @@ - +
@@ -52,7 +52,7 @@
- +
max @@ -119,7 +118,7 @@