添加 批稿参数校验
This commit is contained in:
YuanFeng
parent
bd5764b846
commit
c179177730
|
|
@ -73,58 +73,68 @@
|
|||
:key="tmp.key"
|
||||
:label="getLabelName(that.propInfo[tmp.key])">
|
||||
<div
|
||||
v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
|
||||
<div
|
||||
style="padding: 4px">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span>
|
||||
<i
|
||||
v-if="that.propInfo[tmp.key].canInput"
|
||||
class="icon-lk_edit"
|
||||
style="font-size: 20px"> </i>
|
||||
<i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
|
||||
</span>
|
||||
style="box-shadow: 0px 2px 5px 2px #dcdcdc;"
|
||||
v-if="that.propInfo[tmp.key].multiLanguage
|
||||
&& that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
|
||||
|
||||
<el-select-v2
|
||||
v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
|
||||
filterable
|
||||
:options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
|
||||
placeholder="Please select"
|
||||
@change="changeData(-1,tmp.key)"
|
||||
size="large"
|
||||
style="min-width: 280px;width: 100%"
|
||||
/>
|
||||
<div v-if="that.propInfo[tmp.key].groupType === '1'">
|
||||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col span="14">
|
||||
<el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
|
||||
@change="changeData(0,tmp.key)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col span="4">
|
||||
<div> %</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template v-for="(dl,i) in that.propInfo[tmp.key].dataInfo" :key="i">
|
||||
<div style="padding: 4px" v-if="dl.locale === that.propInfo[tmp.key].dataInfo[0].locale" >
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span>
|
||||
<i
|
||||
v-if="that.propInfo[tmp.key].canInput"
|
||||
class="icon-lk_edit"
|
||||
style="font-size: 20px"> </i>
|
||||
<i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
|
||||
</span>
|
||||
<div title="删除">
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
type="danger"
|
||||
link
|
||||
@click="deleteList(tmp.key,i)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-select-v2
|
||||
v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
|
||||
filterable
|
||||
:options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
|
||||
placeholder="Please select"
|
||||
@change="changeData(i,tmp.key)"
|
||||
size="large"
|
||||
style="min-width: 280px;width: 100%"
|
||||
/>
|
||||
<div v-if="that.propInfo[tmp.key].groupType === '1'">
|
||||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div style="display: flex">
|
||||
<div> <el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[i].ratio"
|
||||
@change="changeData(i,tmp.key)"
|
||||
/></div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -152,7 +162,6 @@
|
|||
@change="changeData"
|
||||
@select="changeData"
|
||||
/>
|
||||
|
||||
<el-select-v2
|
||||
v-else
|
||||
v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
|
||||
|
|
@ -168,17 +177,17 @@
|
|||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col span="4">
|
||||
<el-col :span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col span="14">
|
||||
<el-col :span="14">
|
||||
<el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
|
||||
@change="changeData(index,tmp.key)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col span="4">
|
||||
<el-col :span="4">
|
||||
<div> %</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -186,7 +195,7 @@
|
|||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
@click="deleteList(tmp.key,index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -194,7 +203,7 @@
|
|||
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -231,13 +240,13 @@
|
|||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
@click="deleteList(tmp.key,index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
|
||||
|
|
@ -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<any>;
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 停用 -->
|
||||
<el-form-item label="控制" v-if="false">
|
||||
<el-form-item label="控制" >
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div style="width: 120px;display: flex">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="false">
|
||||
<div style="width: 120px;display: flex">
|
||||
<el-checkbox
|
||||
v-model="that.configInfo.canInput"
|
||||
|
|
@ -76,7 +76,6 @@
|
|||
<el-col :span="11">
|
||||
max
|
||||
<el-input-number
|
||||
|
||||
v-model="that.configInfo.maxSize" :min="1"
|
||||
:disabled="that.configInfo.isCombo"/>
|
||||
</el-col>
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
<template #default="scope">
|
||||
<el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale" placeholder="请选择语言标识">
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
|
||||
v-for="dict in languageOptions"
|
||||
:key="`${dict.value}`"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
|
|
@ -129,16 +128,24 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="文本" width="180">
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="that.configInfo.pointList[scope.$index].dataInfo.label"
|
||||
placement="top"
|
||||
>
|
||||
<div>
|
||||
<div v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
|
||||
表达式
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="that.configInfo.pointList[scope.$index].dataInfo.label"
|
||||
placement="top"
|
||||
>
|
||||
<span class="line-clamp-1">
|
||||
{{ that.configInfo.pointList[scope.$index].dataInfo.label}}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -148,8 +155,8 @@
|
|||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="updateVisible(false)">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -191,6 +198,13 @@ const props = defineProps({
|
|||
default: false
|
||||
}
|
||||
})
|
||||
const languageOptions = computed(()=>{
|
||||
|
||||
const options = getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE);
|
||||
// @ts-ignore
|
||||
options.unshift({ label: '*取值表达式', value: '_$value' })
|
||||
return options
|
||||
})
|
||||
const delLast = () => {
|
||||
if (that.configInfo.pointList.length === 1) {
|
||||
useMessage().warning(`至少需要1个位置信息`)
|
||||
|
|
@ -225,6 +239,7 @@ const append = (count = 1) => {
|
|||
}
|
||||
const init = (allGroupList, data) => {
|
||||
that.allGroupList = allGroupList;
|
||||
console.log("that.allGroupList",that.allGroupList)
|
||||
console.log("data",data)
|
||||
that.configInfo = {
|
||||
groupName: '', // 父节点名称
|
||||
|
|
@ -247,6 +262,7 @@ const updateVisible = (value: boolean) => {
|
|||
that.show = value;
|
||||
}
|
||||
const getConfig = () => {
|
||||
console.log("that.configInfo",that.configInfo)
|
||||
return that.configInfo;
|
||||
}
|
||||
const submit = () => {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div
|
||||
:id="that.containerId"
|
||||
:class="['main-container']"
|
||||
:style="{ 'box-shadow': that.editState ? '0 0 10px 1px #eee;' : 'none',}">
|
||||
:style="{ 'box-shadow': that.editState ? '0 0 10px 1px #eee' : 'none',}">
|
||||
</div>
|
||||
<!-- <TeleportContainer/>-->
|
||||
</div>
|
||||
|
|
@ -312,6 +312,7 @@ const rightKeyMenu = computed(() => {
|
|||
let max = 100;
|
||||
for (let i = 0; i < that.pageConfig.propList.length; i++) {
|
||||
if (that.pageConfig.propList[i].groupId === cells[0].getData().propGroupId) {
|
||||
console.log("that.pageConfig.propList##",that.pageConfig.propList)
|
||||
max = that.pageConfig.propList[i].maxSize || 100
|
||||
break;
|
||||
}
|
||||
|
|
@ -1445,7 +1446,7 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
|
|||
}
|
||||
}
|
||||
|
||||
dynamicPropRef.value.init([], {
|
||||
dynamicPropRef.value.init(that.pageConfig.propList, {
|
||||
groupId: groupId,
|
||||
groupName: groupName,
|
||||
groupType: groupType,
|
||||
|
|
@ -1563,7 +1564,7 @@ const submitProp = (data) => {
|
|||
|
||||
}
|
||||
removeGroup(data.groupId);
|
||||
data.maxSize = Math.min(data.pointList.length, data.maxSize)
|
||||
data.maxSize = Math.max(data.pointList.length, data.maxSize)
|
||||
that.pageConfig.propList.push(data)
|
||||
dynamicPropRef.value.updateVisible(false)
|
||||
draftDesignLayoutRef.value.updatePropList(orderByPropList())
|
||||
|
|
|
|||
|
|
@ -73,58 +73,68 @@
|
|||
:key="tmp.key"
|
||||
:label="getLabelName(that.propInfo[tmp.key])">
|
||||
<div
|
||||
v-if="that.propInfo[tmp.key].multiLanguage && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
|
||||
<div
|
||||
style="padding: 4px">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span>
|
||||
<i
|
||||
v-if="that.propInfo[tmp.key].canInput"
|
||||
class="icon-lk_edit"
|
||||
style="font-size: 20px"> </i>
|
||||
<i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
|
||||
</span>
|
||||
style="box-shadow: 0px 2px 5px 2px #dcdcdc;"
|
||||
v-if="that.propInfo[tmp.key].multiLanguage
|
||||
&& that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
|
||||
|
||||
<el-select-v2
|
||||
v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
|
||||
filterable
|
||||
:options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
|
||||
placeholder="Please select"
|
||||
@change="changeData(-1,tmp.key)"
|
||||
size="large"
|
||||
style="min-width: 280px;width: 100%"
|
||||
/>
|
||||
<div v-if="that.propInfo[tmp.key].groupType === '1'">
|
||||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col span="14">
|
||||
<el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[0].ratio"
|
||||
@change="changeData(0,tmp.key)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col span="4">
|
||||
<div> %</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template v-for="(dl,i) in that.propInfo[tmp.key].dataInfo" :key="i">
|
||||
<div style="padding: 4px" v-if="dl.locale === that.propInfo[tmp.key].dataInfo[0].locale" >
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span>
|
||||
<i
|
||||
v-if="that.propInfo[tmp.key].canInput"
|
||||
class="icon-lk_edit"
|
||||
style="font-size: 20px"> </i>
|
||||
<i v-else class="icon-lk_cell_add" style="font-size: 20px"> </i>
|
||||
</span>
|
||||
<div title="删除">
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
type="danger"
|
||||
link
|
||||
@click="deleteList(tmp.key,i)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-select-v2
|
||||
v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
|
||||
filterable
|
||||
:options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
|
||||
placeholder="Please select"
|
||||
@change="changeData(i,tmp.key)"
|
||||
size="large"
|
||||
style="min-width: 280px;width: 100%"
|
||||
/>
|
||||
<div v-if="that.propInfo[tmp.key].groupType === '1'">
|
||||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div style="display: flex">
|
||||
<div> <el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[i].ratio"
|
||||
@change="changeData(i,tmp.key)"
|
||||
/></div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -152,7 +162,6 @@
|
|||
@change="changeData"
|
||||
@select="changeData"
|
||||
/>
|
||||
|
||||
<el-select-v2
|
||||
v-else
|
||||
v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
|
||||
|
|
@ -168,17 +177,17 @@
|
|||
<div
|
||||
style="display: flex;align-items: center; margin-left: 10px; width: 220px">
|
||||
<el-row>
|
||||
<el-col span="4">
|
||||
<el-col :span="4">
|
||||
<div>占比</div>
|
||||
</el-col>
|
||||
<el-col span="14">
|
||||
<el-col :span="14">
|
||||
<el-input-number
|
||||
:min="-1" :max="100"
|
||||
v-model="that.propInfo[tmp.key].dataInfo[index].ratio"
|
||||
@change="changeData(index,tmp.key)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col span="4">
|
||||
<el-col :span="4">
|
||||
<div> %</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -186,7 +195,7 @@
|
|||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
@click="deleteList(tmp.key,index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -194,7 +203,7 @@
|
|||
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -231,13 +240,13 @@
|
|||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="deleteList(that.propInfo[tmp.key],index)">
|
||||
@click="deleteList(tmp.key,index)">
|
||||
<i class="icon-lk_delete"> </i>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="that.propInfo[tmp.key].canChange"
|
||||
@click="appendList(that.propInfo[tmp.key])">
|
||||
@click="appendList(tmp.key)">
|
||||
添加
|
||||
</el-button>
|
||||
|
||||
|
|
@ -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<any>;
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 停用 -->
|
||||
<el-form-item label="控制" v-if="false">
|
||||
<el-form-item label="控制" >
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div style="width: 120px;display: flex">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="false">
|
||||
<div style="width: 120px;display: flex">
|
||||
<el-checkbox
|
||||
v-model="that.configInfo.canInput"
|
||||
|
|
@ -76,7 +76,6 @@
|
|||
<el-col :span="11">
|
||||
max
|
||||
<el-input-number
|
||||
|
||||
v-model="that.configInfo.maxSize" :min="1"
|
||||
:disabled="that.configInfo.isCombo"/>
|
||||
</el-col>
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
<template #default="scope">
|
||||
<el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale" placeholder="请选择语言标识">
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
|
||||
v-for="dict in languageOptions"
|
||||
:key="`${dict.value}`"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
|
|
@ -129,16 +128,24 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="文本" width="180">
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="that.configInfo.pointList[scope.$index].dataInfo.label"
|
||||
placement="top"
|
||||
>
|
||||
<div>
|
||||
<div v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
|
||||
表达式
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="that.configInfo.pointList[scope.$index].dataInfo.label"
|
||||
placement="top"
|
||||
>
|
||||
<span class="line-clamp-1">
|
||||
{{ that.configInfo.pointList[scope.$index].dataInfo.label}}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -148,8 +155,8 @@
|
|||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="updateVisible(false)">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -191,6 +198,13 @@ const props = defineProps({
|
|||
default: false
|
||||
}
|
||||
})
|
||||
const languageOptions = computed(()=>{
|
||||
|
||||
const options = getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE);
|
||||
// @ts-ignore
|
||||
options.unshift({ label: '*取值表达式', value: '_$value' })
|
||||
return options
|
||||
})
|
||||
const delLast = () => {
|
||||
if (that.configInfo.pointList.length === 1) {
|
||||
useMessage().warning(`至少需要1个位置信息`)
|
||||
|
|
@ -225,6 +239,7 @@ const append = (count = 1) => {
|
|||
}
|
||||
const init = (allGroupList, data) => {
|
||||
that.allGroupList = allGroupList;
|
||||
console.log("that.allGroupList",that.allGroupList)
|
||||
console.log("data",data)
|
||||
that.configInfo = {
|
||||
groupName: '', // 父节点名称
|
||||
|
|
@ -247,6 +262,7 @@ const updateVisible = (value: boolean) => {
|
|||
that.show = value;
|
||||
}
|
||||
const getConfig = () => {
|
||||
console.log("that.configInfo",that.configInfo)
|
||||
return that.configInfo;
|
||||
}
|
||||
const submit = () => {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div
|
||||
:id="that.containerId"
|
||||
:class="['main-container']"
|
||||
:style="{ 'box-shadow': that.editState ? '0 0 10px 1px #eee;' : 'none',}">
|
||||
:style="{ 'box-shadow': that.editState ? '0 0 10px 1px #eee' : 'none',}">
|
||||
</div>
|
||||
<!-- <TeleportContainer/>-->
|
||||
</div>
|
||||
|
|
@ -312,6 +312,7 @@ const rightKeyMenu = computed(() => {
|
|||
let max = 100;
|
||||
for (let i = 0; i < that.pageConfig.propList.length; i++) {
|
||||
if (that.pageConfig.propList[i].groupId === cells[0].getData().propGroupId) {
|
||||
console.log("that.pageConfig.propList##",that.pageConfig.propList)
|
||||
max = that.pageConfig.propList[i].maxSize || 100
|
||||
break;
|
||||
}
|
||||
|
|
@ -1445,7 +1446,7 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
|
|||
}
|
||||
}
|
||||
|
||||
dynamicPropRef.value.init([], {
|
||||
dynamicPropRef.value.init(that.pageConfig.propList, {
|
||||
groupId: groupId,
|
||||
groupName: groupName,
|
||||
groupType: groupType,
|
||||
|
|
@ -1563,7 +1564,7 @@ const submitProp = (data) => {
|
|||
|
||||
}
|
||||
removeGroup(data.groupId);
|
||||
data.maxSize = Math.min(data.pointList.length, data.maxSize)
|
||||
data.maxSize = Math.max(data.pointList.length, data.maxSize)
|
||||
that.pageConfig.propList.push(data)
|
||||
dynamicPropRef.value.updateVisible(false)
|
||||
draftDesignLayoutRef.value.updatePropList(orderByPropList())
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<el-card class="el-card">
|
||||
|
||||
<el-table :data="that.tableList" class="w-full" border height="400px" @selection-change="selectionChange">
|
||||
<el-table-column type="selection" width="55" :selectable="selectable" />
|
||||
<el-table-column width="80px" label="#">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
|
|
@ -23,32 +22,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="300px" label="尺码">
|
||||
<template #header>
|
||||
<div class="flex">
|
||||
<div>尺码</div>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="that.fullSize"
|
||||
v-show="that.tableList.length > 1"
|
||||
placeholder="多个使用空格间隔"
|
||||
@change="fullChangeSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
|
||||
<el-autocomplete
|
||||
v-model="scope.row.labelSize"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
class="inline-input w-50"
|
||||
placeholder="输入码数"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="300px" label="数量">
|
||||
<template #header>
|
||||
<div class="flex">
|
||||
|
|
@ -64,23 +38,13 @@
|
|||
|
||||
|
||||
<div class="badge" >{{ that.tableList.length }}</div>
|
||||
<div class="edit-btn">
|
||||
<el-button link title="Add" type="primary" @click.stop="addItem">
|
||||
<Icon size="24" icon="ep:plus"/>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="del-btn" title="Delete">
|
||||
<el-button link type="danger" @click.stop="delItem">
|
||||
<Icon size="24" icon="ep:remove"/>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ProductItem1">
|
||||
<script lang="ts" setup name="ProductItem2">
|
||||
// 无模板
|
||||
//@ts-nocheck
|
||||
import {reactive, useModel, watch} from 'vue'
|
||||
import DesignPreviewDialog from "@/components/DraftDesign/components/DesignPreviewDialog.vue";
|
||||
|
|
@ -139,56 +103,6 @@ const delItem = () => {
|
|||
changeData();
|
||||
})
|
||||
}
|
||||
const fullChangeSize = ()=>{
|
||||
const selectedValue = ref<string | number>(1); // 用于绑定选中的值
|
||||
ElMessageBox({
|
||||
title: '确定批量设置吗？',
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning',
|
||||
message: () =>
|
||||
h(ElSelect, {
|
||||
modelValue: selectedValue.value,
|
||||
placeholder: '请选择',
|
||||
style: { width: '300px' },
|
||||
'onUpdate:modelValue': (value: string | number) => {
|
||||
selectedValue.value = value;
|
||||
},
|
||||
}, [
|
||||
h(ElOption, { label: '填充空值行', value: 1 }),
|
||||
h(ElOption, { label: '追加', value: 2 }),
|
||||
h(ElOption, { label: '覆盖', value: 3 }),
|
||||
// 添加更多选项
|
||||
]),
|
||||
}).then(() => {
|
||||
const val = that.fullSize.split(" ")
|
||||
let index= 0;
|
||||
if(selectedValue.value === 2){
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
addRow({
|
||||
labelSize: val[index],
|
||||
})
|
||||
}
|
||||
}else {
|
||||
that.tableList.forEach(item => {
|
||||
if(index < val.length){
|
||||
if(selectedValue.value === 1){
|
||||
if(!item.labelSize){
|
||||
item.labelSize = val[index]
|
||||
index++;
|
||||
}
|
||||
}else if(selectedValue.value === 3){
|
||||
item.labelSize = val[index]
|
||||
index++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
// 用户点击取消时的处理逻辑
|
||||
});
|
||||
}
|
||||
const fullQty = (val) => {
|
||||
|
||||
const selectedValue = ref<string | number>(1); // 用于绑定选中的值
|
||||
|
|
@ -232,18 +146,9 @@ const addItem = () => {
|
|||
addRow();
|
||||
}
|
||||
const addRow=(row={})=>{
|
||||
if(row.labelSize){
|
||||
for (let i = 0; i < that.tableList.length; i++) {
|
||||
if(that.tableList[i].labelSize === row.labelSize){
|
||||
// 重复的尺码
|
||||
useMessage().notifyWarning(`第${i}行,已跳过重复尺码${row.labelSize} `)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
that.tableList.push({
|
||||
orderQty: 1,
|
||||
labelSize: "",
|
||||
//@ts-ignore
|
||||
previewImage: formData.value.previewImage,
|
||||
draftDesignId: "",
|
||||
|
|
@ -284,13 +189,7 @@ const querySearch = (queryString: string, cb: any) => {
|
|||
}
|
||||
cb(res)
|
||||
}
|
||||
const handleSelect = (item: RestaurantItem) => {
|
||||
console.log(item)
|
||||
}
|
||||
|
||||
const selectable = (row:any) => {
|
||||
return true;
|
||||
}
|
||||
const selectionChange = (arr)=>{
|
||||
that.selectRow = arr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,356 @@
|
|||
<template>
|
||||
|
||||
<div class="card-with-badge">
|
||||
<el-card class="el-card">
|
||||
|
||||
<el-table :data="that.tableList" class="w-full" border height="400px" @selection-change="selectionChange">
|
||||
<el-table-column type="selection" width="55" :selectable="selectable" />
|
||||
<el-table-column width="80px" label="#">
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{scope.$index + 1}}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="84px" label="主图">
|
||||
<template #default="scope">
|
||||
<div class="flex items-center">
|
||||
<el-image
|
||||
fit="contain"
|
||||
style="width: 80px;height: 80px;"
|
||||
:preview-src-list="[scope.row.previewImage]"
|
||||
:src="scope.row.previewImage"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="300px" label="尺码">
|
||||
<template #header>
|
||||
<div class="flex">
|
||||
<div>尺码</div>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="that.fullSize"
|
||||
v-show="that.tableList.length > 1"
|
||||
placeholder="多个使用空格间隔"
|
||||
@change="fullChangeSize"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
|
||||
<el-autocomplete
|
||||
v-model="scope.row.labelSize"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
class="inline-input w-50"
|
||||
placeholder="输入码数"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="300px" label="数量">
|
||||
<template #header>
|
||||
<div class="flex">
|
||||
<div>数量<span class="text-xs">({{totalCount}})</span></div>
|
||||
<div><el-input-number v-model="that.fullCount" v-show="that.tableList.length > 1" @change="fullQty"/> </div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-input-number v-model="scope.row.orderQty" min="1" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
<div class="badge" >{{ that.tableList.length }}</div>
|
||||
<div class="edit-btn">
|
||||
<el-button link title="Add" type="primary" @click.stop="addItem">
|
||||
<Icon size="24" icon="ep:plus"/>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="del-btn" title="Delete">
|
||||
<el-button link type="danger" @click.stop="delItem">
|
||||
<Icon size="24" icon="ep:remove"/>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ProductItem3">
|
||||
// 尺码唛
|
||||
//@ts-nocheck
|
||||
import {reactive, useModel, watch} from 'vue'
|
||||
import DesignPreviewDialog from "@/components/DraftDesign/components/DesignPreviewDialog.vue";
|
||||
import {ShapeType} from "@/components/DraftDesign/config";
|
||||
import {createImageViewer} from "@/components/ImageViewer";
|
||||
import {useI18n} from "@/hooks/web/useI18n";
|
||||
import {ElOption, ElSelect} from "element-plus";
|
||||
import {useEmitt} from "@/hooks/web/useEmitt";
|
||||
import {PRODUCT_DEL_ROW_EVENT, STEP0_FINISH_EVENT} from "@/constants/EmitEventName";
|
||||
import {useResetFields} from "@/hooks/ext";
|
||||
|
||||
const emit = defineEmits(['update:productInfo', 'delItem', 'change'])
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
productInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
badge: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const [that, resetFields] = useResetFields({
|
||||
tableList: [],
|
||||
selectRow: [],
|
||||
fullCount: 0,
|
||||
itemList:[ 'M','L','XL','XXL','XXXL'],
|
||||
fullSize:'',
|
||||
})
|
||||
const totalCount = computed(()=>{
|
||||
let count = 0;
|
||||
that.tableList.forEach(item=>{
|
||||
count += item.orderQty
|
||||
})
|
||||
return count;
|
||||
})
|
||||
watch(that.tableList, (newVal)=>{
|
||||
changeData();
|
||||
})
|
||||
|
||||
const formData = useModel(props, 'productInfo', emit)
|
||||
const delItem = () => {
|
||||
if(that.selectRow.length === 0){
|
||||
useMessage().warning("请选择要删除的项");
|
||||
return;
|
||||
}
|
||||
useMessage().confirm('确定删除吗？').then(() => {
|
||||
let key = [];
|
||||
for (let i = 0; i < that.selectRow.length; i++) {
|
||||
key.push(that.selectRow[i].key)
|
||||
}
|
||||
that.tableList = that.tableList.filter(item => !key.includes(item.key))
|
||||
changeData();
|
||||
})
|
||||
}
|
||||
const fullChangeSize = ()=>{
|
||||
const selectedValue = ref<string | number>(1); // 用于绑定选中的值
|
||||
ElMessageBox({
|
||||
title: '确定批量设置吗？',
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning',
|
||||
message: () =>
|
||||
h(ElSelect, {
|
||||
modelValue: selectedValue.value,
|
||||
placeholder: '请选择',
|
||||
style: { width: '300px' },
|
||||
'onUpdate:modelValue': (value: string | number) => {
|
||||
selectedValue.value = value;
|
||||
},
|
||||
}, [
|
||||
h(ElOption, { label: '填充空值行', value: 1 }),
|
||||
h(ElOption, { label: '追加', value: 2 }),
|
||||
h(ElOption, { label: '覆盖', value: 3 }),
|
||||
// 添加更多选项
|
||||
]),
|
||||
}).then(() => {
|
||||
const val = that.fullSize.split(" ")
|
||||
let index= 0;
|
||||
if(selectedValue.value === 2){
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
addRow({
|
||||
labelSize: val[index],
|
||||
})
|
||||
}
|
||||
}else {
|
||||
that.tableList.forEach(item => {
|
||||
if(index < val.length){
|
||||
if(selectedValue.value === 1){
|
||||
if(!item.labelSize){
|
||||
item.labelSize = val[index]
|
||||
index++;
|
||||
}
|
||||
}else if(selectedValue.value === 3){
|
||||
item.labelSize = val[index]
|
||||
index++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
// 用户点击取消时的处理逻辑
|
||||
});
|
||||
}
|
||||
const fullQty = (val) => {
|
||||
|
||||
const selectedValue = ref<string | number>(1); // 用于绑定选中的值
|
||||
ElMessageBox({
|
||||
title: '确定批量设置数量 ' + val + ' 吗？',
|
||||
confirmButtonText: t('common.ok'),
|
||||
cancelButtonText: t('common.cancel'),
|
||||
type: 'warning',
|
||||
message: () =>
|
||||
h(ElSelect, {
|
||||
modelValue: selectedValue.value,
|
||||
placeholder: '请选择',
|
||||
style: { width: '300px' },
|
||||
'onUpdate:modelValue': (value: string | number) => {
|
||||
selectedValue.value = value;
|
||||
},
|
||||
}, [
|
||||
h(ElOption, { label: '填充全部', value: 1 }),
|
||||
h(ElOption, { label: '追加', value: 2 }),
|
||||
h(ElOption, { label: '减少', value: 3 }),
|
||||
// 添加更多选项
|
||||
]),
|
||||
}).then(() => {
|
||||
that.tableList.forEach(item => {
|
||||
if(selectedValue.value === 1){
|
||||
item.orderQty = val
|
||||
}else if(selectedValue.value === 2){
|
||||
item.orderQty += val
|
||||
}else if(selectedValue.value === 3){
|
||||
item.orderQty -= val
|
||||
if( item.orderQty < 0){
|
||||
item.orderQty = 1
|
||||
}
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户点击取消时的处理逻辑
|
||||
});
|
||||
}
|
||||
const addItem = () => {
|
||||
addRow();
|
||||
}
|
||||
const addRow=(row={})=>{
|
||||
if(row.labelSize){
|
||||
for (let i = 0; i < that.tableList.length; i++) {
|
||||
if(that.tableList[i].labelSize === row.labelSize){
|
||||
// 重复的尺码
|
||||
useMessage().notifyWarning(`第${i}行,已跳过重复尺码${row.labelSize} `)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
that.tableList.push({
|
||||
orderQty: 1,
|
||||
labelSize: "",
|
||||
//@ts-ignore
|
||||
previewImage: formData.value.previewImage,
|
||||
draftDesignId: "",
|
||||
...formData.value,
|
||||
...row,
|
||||
key: Math.random().toString(36).substring(2),
|
||||
})
|
||||
|
||||
}
|
||||
useEmitt({
|
||||
name: PRODUCT_DEL_ROW_EVENT,
|
||||
callback: (row)=>{
|
||||
if(formData.value && that.tableList && that.tableList.length > 0
|
||||
&& formData.value.productId === that.tableList[0].productId){
|
||||
that = resetFields();
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
const init = (list = [])=>{
|
||||
if(list){
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
addRow(list[i])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const results = queryString ? that.itemList.filter(t => t.toString()
|
||||
.toLocaleLowerCase()
|
||||
.indexOf(queryString.toLocaleLowerCase()) != -1) : that.itemList
|
||||
let res = [];
|
||||
for (let i = 0; i < results.length; i++) {
|
||||
res.push({
|
||||
value: results[i],
|
||||
label: results[i],
|
||||
})
|
||||
}
|
||||
cb(res)
|
||||
}
|
||||
const handleSelect = (item: RestaurantItem) => {
|
||||
console.log(item)
|
||||
}
|
||||
|
||||
const selectable = (row:any) => {
|
||||
return true;
|
||||
}
|
||||
const selectionChange = (arr)=>{
|
||||
that.selectRow = arr;
|
||||
}
|
||||
const changeData = () => {
|
||||
emit("change", that.tableList)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.card-with-badge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
padding-top: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
background-color: #6bb5ff;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.del-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -21,7 +21,16 @@
|
|||
class="m-2"
|
||||
@del-item="delItem"
|
||||
:badge="`${1}`"
|
||||
|
||||
v-model:product-info="that.tableData[0]" />
|
||||
</div>
|
||||
<!-- 尺码表 -->
|
||||
<div class="flex" v-show="that.templateType === '3' && that.tableData.length > 0">
|
||||
<ProductItem3
|
||||
@change="changeList"
|
||||
ref="productItem3Ref"
|
||||
class="m-2"
|
||||
@del-item="delItem"
|
||||
:badge="`${1}`"
|
||||
v-model:product-info="that.tableData[0]" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,11 +40,13 @@
|
|||
|
||||
import ProductItem1 from "./ProductItem1.vue"
|
||||
import ProductItem2 from "./ProductItem2.vue"
|
||||
import ProductItem3 from "./ProductItem3.vue"
|
||||
import {ProductInfoApi} from "@/api/oms/productinfo";
|
||||
import {useResetFields} from "@/hooks/ext";
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
const productItem2Ref = ref();
|
||||
const productItem3Ref = ref();
|
||||
|
||||
const [that, resetFields] = useResetFields({
|
||||
tableData: [],
|
||||
|
|
@ -97,16 +108,23 @@ const init = (row) => {
|
|||
if(res.templateType !== '1'){
|
||||
that.cover = res.cover
|
||||
}
|
||||
|
||||
console.log("that.tableData.length",that.tableData.length)
|
||||
if (that.tableData.length === 0) {
|
||||
addSku();
|
||||
if(res.templateType === '2'){
|
||||
// 初始化
|
||||
setTimeout(()=>{
|
||||
productItem2Ref.value.init(that.tableData);
|
||||
},100)
|
||||
}else if(res.templateType === '3'){
|
||||
// 初始化
|
||||
setTimeout(()=>{
|
||||
productItem3Ref.value.init(that.tableData);
|
||||
},100)
|
||||
}
|
||||
}
|
||||
if(res.templateType === '2'){
|
||||
// 初始化
|
||||
setTimeout(()=>{
|
||||
productItem2Ref.value.init(that.tableData);
|
||||
},100)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -601,6 +601,27 @@ const submitPreHandler = (showMsg = true) => {
|
|||
if (!formData.isBatch && that.tmpFormData.planDate) {
|
||||
formData.value.plansenddate = new Date(that.tmpFormData.planDate).getTime()
|
||||
}
|
||||
tableData.forEach((item,index)=>{
|
||||
|
||||
if(!item.productSkuList || item.productSkuList.length === 0){
|
||||
const t = `第${index+1}行 ‘${item.productName}’ SKU不能为空`;
|
||||
if(showMsg){
|
||||
useMessage().warning(t)
|
||||
}
|
||||
reject(t)
|
||||
return;
|
||||
}
|
||||
item.productSkuList.forEach((item2,i2)=>{
|
||||
if(!item2.previewImage){
|
||||
const t = `第${index+1}行 ‘${item.productName}’SKU 第${i2+1}项 请批稿`;
|
||||
if(showMsg){
|
||||
useMessage().warning(t)
|
||||
}
|
||||
reject(t)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
formData.value.saleOrderEntry = tableData
|
||||
|
||||
if ( formData.value.bizdate) {
|
||||
|
|
@ -612,35 +633,36 @@ const submitPreHandler = (showMsg = true) => {
|
|||
const addNewBill = () => {
|
||||
console.log("stepRef.value.getTableData()", stepRef.value.getTableData())
|
||||
submitPreHandler().then(res=>{
|
||||
if(formData.value.id){
|
||||
SaleOrderApi.editOrder(formData.value.id,{
|
||||
...formData.value
|
||||
}).then(res => {
|
||||
that.pageLoading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '修改成功...',
|
||||
background: 'rgba(0,0,0,0.5)'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
that.pageLoading.close()
|
||||
push("/")
|
||||
},800)
|
||||
})
|
||||
}else {
|
||||
SaleOrderApi.placeOrder({
|
||||
...formData.value
|
||||
}).then(res => {
|
||||
that.pageLoading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '下单成功...',
|
||||
background: 'rgba(0,0,0,0.5)'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
that.pageLoading.close()
|
||||
push("/")
|
||||
},800)
|
||||
})
|
||||
}
|
||||
console.log("formData",formData.value)
|
||||
// if(formData.value.id){
|
||||
// SaleOrderApi.editOrder(formData.value.id,{
|
||||
// ...formData.value
|
||||
// }).then(res => {
|
||||
// that.pageLoading = ElLoading.service({
|
||||
// lock: true,
|
||||
// text: '修改成功...',
|
||||
// background: 'rgba(0,0,0,0.5)'
|
||||
// })
|
||||
// setTimeout(()=>{
|
||||
// that.pageLoading.close()
|
||||
// push("/")
|
||||
// },800)
|
||||
// })
|
||||
// }else {
|
||||
// SaleOrderApi.placeOrder({
|
||||
// ...formData.value
|
||||
// }).then(res => {
|
||||
// that.pageLoading = ElLoading.service({
|
||||
// lock: true,
|
||||
// text: '下单成功...',
|
||||
// background: 'rgba(0,0,0,0.5)'
|
||||
// })
|
||||
// setTimeout(()=>{
|
||||
// that.pageLoading.close()
|
||||
// push("/")
|
||||
// },800)
|
||||
// })
|
||||
// }
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -668,7 +690,7 @@ watch(() => formData.value.brandId, async (val)=>{
|
|||
const data = await SaleOrderApi.getFollowerUser(val)
|
||||
that.followerUserList = data
|
||||
if(that.followerUserList.length > 0 && !formData.value.orderFollowerUser){
|
||||
formData.value.orderFollowerUser = that.followerUserList[0].id
|
||||
formData.value.orderFollowerUser = `${that.followerUserList[0].id}`
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -737,7 +759,7 @@ const resFrom = (init = {}) => {
|
|||
invoiceName: '',
|
||||
invoiceCode: '',
|
||||
invoiceRemarks: '',
|
||||
contractCode: 'tmp1',
|
||||
contractCode: '',
|
||||
retailerCode: '',
|
||||
remarks: '',
|
||||
isBatch: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue