r
/
hangtag
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: r:be124b6763c9167b08f7d972980b344b16ce03f1
Branches Tags
r:main
r:dev
...
compare: r:1bece1b15dfa37bc437bbf407506415189c4b1e6
Branches Tags
r:dev
r:main

2 Commits
be124b6763 ... 1bece1b15d

Author SHA1 Message Date
YuanFeng 1bece1b15d Merge branch 'dev' of https://git.yfgame.vip/r/hangtag into dev 
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
 2024-11-18 01:04:40 +08:00
YuanFeng c179177730 添加 批稿参数校验 2024-11-18 01:03:55 +08:00
10 changed files with 1104 additions and 471 deletions
Show Stats Expand all files Collapse all files

448
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
View File

@ -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
})
})
})
}

42
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
View File

@ -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 = () => {

7
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
View File

@ -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())

448
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
View File

@ -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
})
})
})
}

42
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
View File

@ -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 = () => {

7
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
View File

@ -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())

107
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem2.vue
View File

@ -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;
}

356
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem3.vue Normal file
View File

@ -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>

34
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue
View File

@ -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)
}
})
}

84
hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/index.vue
View File

@ -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,