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

优化

This commit is contained in:
YuanFeng 2024-11-25 23:57:48 +08:00
parent ba060c4031
commit 943324af03
19 changed files with 520 additions and 484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -198,18 +198,17 @@
style="box-shadow: 0px 2px 5px 2px #dcdcdc;">
<div
v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
v-for="(img,index) in [that.propInfo[tmp.key].dataInfo[0]]"
:key="index" style="display: flex">
<div class="img-box" v-if="img.url">
<div class="img-box">
<div style="display: flex;width: 380px;align-items: center"
:class="{ 'error_tip': errorItem(tmp.key,index) }">
<el-image
v-if="img.url"
style="width: 64px; height: 64px"
fit="contain"
:src="img.url"
:preview-src-list="[img.url]"/>
<div>
<el-select-v2
v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
@ -391,7 +390,6 @@ const errorKeys = computed(() => {
return [];
})
const errorItem = (key, index) => {
console.log("errorKeys", errorKeys)
return errorKeys.value.includes(`${key}_${index}`)
}
const errorInfo = (key, index) => {
@ -490,14 +488,11 @@ const changeIconData = (index: number, key: string) => {
if (that.propInfo[key].dataInfo[index].showLabel) {
const info = that.propInfo[key];
console.log("info", that.propInfo[key].dataInfo[index])
const infoList = washingInfoListByType(info.groupType)
let mapping = {}
for (let i = 0; i < infoList.length; i++) {
mapping[infoList[i].label] = infoList[i].langMapping;
}
console.log("111", infoList, mapping)
// 多语言变量替换
const allData = [...that.propInfo[key].dataInfo]
const fLang = allData[0].locale;
@ -531,24 +526,8 @@ const changeIconData = (index: number, key: string) => {
for (let j = 0; j < m1.length; j++) {
langObj[m1[j].locale] = m1[j]
}
for (let k = i; k < allData.length; k++) {
if (langObj[allData[k].locale]) {
const obj = langObj[allData[k].locale]
if (obj) {
console.log("obj", obj)
let str = ratio;
if (str === null || str === undefined || str === -1) {
str = ''
}
allData[k].label = `${obj.value}`.replaceAll('${r}', `${str}`)
}
}
}
}
}
that.propInfo[key].dataInfo = [...allData];
resetData();
}
@ -566,7 +545,6 @@ const findProcessTypeIndex = (index) => {
// 找到最后一个位置
if (that.propOrderByList[i].shape === ShapeType.vueShapeImage) {
processType++;
console.log("@@@@@@", index, i)
if (index === i) {
return processType
}
@ -615,9 +593,7 @@ const uploadFile = async (fileName) => {
});
});
}
const deleteImgList = (key, index) => {
}
const deleteList = (key, index) => {
const item = cloneDeep(that.propInfo[key])
@ -649,37 +625,6 @@ const deleteList = (key, index) => {
}
}
const appendImageList = (key) => {
// todo 待完成
// 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[1].locale
// const tmpArr = [...item.dataInfo]
//
// for (let i = 1; i < tmpArr.length; i++) {
// if(i > 1 && tmpArr[i].locale === locale){
// break;
// }
// item.dataInfo.push(
// {
// label: '',
// url: '',
// ratio: 0,
// ...tmpArr[i]
// }
// )
// }
// resetData();
}
const appendList = (key) => {
const item = that.propInfo[key]
console.log("item.dataInfo", item)
@ -940,11 +885,12 @@ const checkPropInfo = (info) => {
let newInfo2 = cloneDeep(info)
const keys = [];
// 排序变量
for (let i = 0; i < that.propOrderByList.length; i++) {
keys.push(that.propOrderByList[i].key);
}
for (let i = 0; i < keys.length; i++) {
endloop: for (let i = 0; i < keys.length; i++) {
const key = keys[i];
// 合并相同语言的文字
let newArr = [];
@ -955,8 +901,7 @@ const checkPropInfo = (info) => {
const dataInfoArr = newInfo[key].dataInfo;
let langList = newInfo[key].langList || [];
if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
console.log("GroupTypeEnum.RATIO", newInfo[key])
// 成分比例 都进行固定语言组合
// 获取到所以的成分
let langSort = newInfo[key].langSort || [];
if (langSort.length === 0) {
@ -1066,81 +1011,55 @@ const checkPropInfo = (info) => {
// end
} else {
// 语言对应自己的自动位置
if (newInfo[key].multiLanguage) {
const urlSet = [];
for (let l = 0; l < newInfo[key].dataInfo.length; l++) {
let str = [];
let row = null;
let labelInfo = []
if (newInfo[key].groupType === GroupTypeEnum.ICON) {
if (newInfo[key].dataInfo[l].url) {
newArr.push({...newInfo[key].dataInfo[l]});
if (urlSet.includes(newInfo[key].dataInfo[l].url)) {
useMessage().notifyWarning(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`)
that.errorList.push({
key: `${key}_${l}`,
message: "数据重复"
})
reject("数据重复")
return;
}
urlSet.push(newInfo[key].dataInfo[l].url)
} else {
// 组合语言
for (let i1 = 1; i1 < newInfo[key].dataInfo.length; i1++) {
if (newInfo[key].dataInfo[l].locale === newInfo[key].dataInfo[i1].locale && !newInfo[key].dataInfo[l].url) {
str.push(newInfo[key].dataInfo[i1].label)
row = {
...newInfo[key].dataInfo[i1],
url: ''
};
if (newInfo[key].groupType === GroupTypeEnum.ICON) {
const infoList = washingInfoListByType(newInfo[key].groupType)
const infos = newInfo[key].dataInfo;
for (let j = 1; j < infos.length; j++) {
outerLoop: for (let i = 0; i < infoList.length; i++) {
const row1 = infoList[i];
for (let k = 0; k < row1.langMapping.length; k++) {
// 跳过icon 类型，因为没有url
if (infos[j].locale === row1.langMapping[k].locale) {
infos[j].label = row1.langMapping[k].value
break outerLoop;
}
}
}
}
} else {
for (let i1 = 0; i1 < newInfo[key].dataInfo.length; i1++) {
if (firstLang === newInfo[key].dataInfo[i1].locale && newInfo[key].dataInfo[i1].showLabel) {
if (labelInfo.includes(newInfo[key].dataInfo[i1].showLabel)) {
useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
that.errorList.push({
key: `${key}_${i1}`,
message: "数据重复"
})
reject("数据重复")
return
}
labelInfo.push(newInfo[key].dataInfo[i1].showLabel)
}
if (newInfo[key].dataInfo[i1].locale === allLang[l] && newInfo[key].dataInfo[i1].showLabel) {
str.push(newInfo[key].dataInfo[i1].label)
if (!row) {
row = {
...newInfo[key].dataInfo[i1],
url: ''
};
}
console.log("newArr33",infos)
newInfo[key].dataInfo = infos;
break;
}else {
const infoList = washingInfoListByType(newInfo[key].groupType)
const infos = newInfo[key].dataInfo;
for (let j = 0; j < infos.length; j++) {
outerLoop: for (let i = 0; i < infoList.length; i++) {
const row1 = infoList[i];
for (let k = 0; k < row1.langMapping.length; k++) {
// 跳过icon 类型，因为没有url
if (infos[j].locale === row1.langMapping[k].locale) {
infos[j].label = row1.langMapping[k].value
break outerLoop;
}
}
}
}
if (row) {
row.label = str.join(linkChar);
newArr.push(row);
}
console.log("newArr33",infos)
newInfo[key].dataInfo = infos;
break;
}
console.log("newArr", newArr)
newInfo[key].dataInfo = newArr;
} else {
// 语言组合成一句话
// 多种语言组合成一句话
// 文本类型处理
if (newInfo[key].groupType === GroupTypeEnum.TEXT) {
let langSort = newInfo[key].langSort || [];
if (langSort.length === 0) {
langSort = allLang
}
let mergeLabel = [];
for (let j = 0; j < langSort.length; j++) {
const labelInfo = []
@ -1217,10 +1136,17 @@ const checkPropInfo = (info) => {
// 查询所有的icon
const dis = [];
const allDataList = [];
let firstLabel = ''
for (let i = 0; i < keys.length; i++) {
const tmpKey2 = keys[i]
if (that.propInfo[tmpKey2].groupType === GroupTypeEnum.ICON) {
if (that.propInfo[tmpKey2].dataInfo[0].showLabel) {
if (!firstLabel) {
firstLabel = that.propInfo[tmpKey2].dataInfo[0].showLabel
}
if (dis.includes(that.propInfo[tmpKey2].dataInfo[0].showLabel)) {
useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
that.errorList.push({
@ -1232,7 +1158,7 @@ const checkPropInfo = (info) => {
}
dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
}
allDataList.push(that.propInfo[keys[i]].dataInfo[0])
}
}
const infoList = washingInfoListByType(newInfo[key].groupType)
@ -1272,17 +1198,16 @@ const checkPropInfo = (info) => {
}
}
}
console.log("firstLabel", firstLabel)
const mergeLabelStr = mergeLabel.join(linkChar);
console.log("组合的一句话", mergeLabelStr)
// 其他的label 不显示
const newArr = cloneDeep(newInfo[key].dataInfo);
console.log("newArr", allDataList)
let resArr = [];
for (let j = 0; j < newArr.length; j++) {
// 如果没有选择的不显示
if (newArr[j].label && newArr[j].showLabel) {
newArr[j].label = mergeLabelStr
resArr.push(newArr[j])
}
newArr[j].label = mergeLabelStr
resArr.push(newArr[j])
}
newInfo[key].dataInfo = resArr;
}

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

@ -104,20 +104,24 @@
<div>
<el-checkbox v-model="that.configInfo.multiLanguage">勾选后语言匹配到对应位置上
</el-checkbox>
<el-select
v-show="!that.configInfo.multiLanguage"
filterable
multiple
v-model="that.configInfo.langSort"
placeholder="可多选语言参与拼接为一句话,和排序">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-button v-show="that.configInfo.langSort && that.configInfo.langSort.length > 0" @click="setLangSort">语言排序</el-button>
<div v-show="!that.configInfo.multiLanguage">
<el-select
filterable
multiple
v-model="that.configInfo.langSort"
placeholder="可多选语言参与拼接为一句话,和排序">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-button
v-show="that.configInfo.langSort
&& that.configInfo.langSort.length > 0"
@click="setLangSort">语言排序</el-button>
</div>
</div>
<div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
<el-button @click="append(1)">追加</el-button>

83
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/layout/LeftPanel.vue
View File

@ -86,12 +86,18 @@
@mousedown.stop="handlerAddNode($event,item)"
>
<div
:title="item.label"
class="mainPanel-menu__button"
:class="{
'active' : layout.leftActive === item.key
}">
<i :class="item.icon" style="font-size: 2rem"></i>
<div>
<el-image
v-if="item.icon.startsWith('http')"
:src="item.icon"
style="width: 48px; height: 48px"
/>
<i v-else :class="item.icon" style="font-size: 2rem"></i>
<div >
<span style="font-size: 0.8rem">{{ item.label }}</span>
</div>
</div>
@ -204,7 +210,25 @@ const showPanelList = computed(() => {
return item.filterKeyword().toLowerCase().indexOf(layout.searchKeyword.toLowerCase()) !== -1
})
})
const placeholderItem = ()=>{
return {
"key": "vue-node_shape_image",
"shape": "vue-node_shape_image",
"data": {
"label": "",
"width": 20,
"height": 20,
"shape": 10,
"style": {
"shape": {
"href": ""
}
}
},
"icon": "http://m.silverprinting.com.hk/admin-api/admin-api/infra/file/23/get/92b64f8c3cf664a8e69312bf0777ebc2fa84dc55a078155ae64441d6b33585e1.png",
"label": "占位符"
}
}
const imageList = computed(() => {
return that.imageUrlList.filter(item => {
@ -225,30 +249,40 @@ const queryImage = async () => {
that.imageUrlList = [];
that.imageKeySet = [];
for (let i = 0; i < data.list.length; i++) {
let config = JSON.parse(data.list[i].initData)
config.filterKeyword = function () {
return this.label
}
config.key = `${config.key}_${data.list[i].id}`
if (that.imageKeySet.includes(config.key)) {
continue;
const d = {
label: '',
filterKeyword:function () {
return this.label || ''
},
...JSON.parse(data.list[i].initData)
}
that.imageUrlList.push(toShape(data.list[i].id,d,domain))
}
console.log(toShape('1',placeholderItem(),domain))
that.imageUrlList.unshift(toShape('1',placeholderItem(),domain))
that.imgLoading = false
// that.imageUrlList = data.list
}
const toShape =(id,config,domain) =>{
config.filterKeyword = function () {
return this.label || ''
}
config.key = `${config.key}_${id}`
if (!that.imageKeySet.includes(config.key)) {
that.imageKeySet.push(config.key)
// 替换域名
config.icon = replaceDomain(domain, config.icon)
config.data.style.shape.href = replaceDomain(domain, config.data.style.shape.href)
config.data.style.shape.label= config.label
that.imageUrlList.push(config)
}
that.imgLoading = false
// that.imageUrlList = data.list
return config
}
const allList = computed(() => {
let arr = [];
let typeSet = shapeList.value.map(item => {return item.shape});
for (let i = 0; i < layout.leftBtnList.length; i++) {
if (['shape_image', 'shape_set'].includes(layout.leftBtnList[i].key)) {
if (['shape_image', 'shape_set','vue-node_shape_image_Placeholder'].includes(layout.leftBtnList[i].key)) {
continue;
}
if(typeSet.includes(layout.leftBtnList[i].shape)){
@ -370,6 +404,27 @@ const layout = reactive({
return this.label
}
},
{
shape: ShapeType.vueShapeImage,
"key": "vue-node_shape_image_Placeholder",
"data": {
"label": "",
"width": 20,
"height": 20,
"shape": 10,
"style": {
"shape": {
"href": "",
"label": ""
}
}
},
icon: "http://m.silverprinting.com.hk/admin-api/admin-api/infra/file/23/get/92b64f8c3cf664a8e69312bf0777ebc2fa84dc55a078155ae64441d6b33585e1.png",
label: 'Placeholder占位符',
filterKeyword: function () {
return this.label
}
},
]
})
onMounted(() => {

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

@ -1062,7 +1062,6 @@ const fontFamilyList = computed(() => {
icon: 'font-FangSong',
label: '仿宋'
},
{
value: '黑体',
icon: 'font-SimHei',
@ -1143,62 +1142,30 @@ const fontSizeList = computed(() => {
const arr = [{
value: 2,
label: `2`
},{
value: 3,
label: `3`
}]
let i = 4;
while (i < 20) {
i += 2
arr.push({
value: i,
label: `${i}`
})
}
while (i < 80) {
i += 4
arr.push({
value: i,
label: `${i}`
})
}
while (i < 100) {
i += 8
arr.push({
value: i,
label: `${i}`
})
}
while (i < 200) {
i += 20
arr.push({
value: i,
label: `${i}`
})
}
while (i < 300) {
i += 40
arr.push({
value: i,
label: `${i}`
})
}
while (i < 500) {
i += 80
while (i < 600) {
i ++
arr.push({
value: i,
label: `${i}`
})
}
return arr
})
const sizeModeList = [
{
value: '15_50',
label: '洗水唛15 *50'
{
value: '30_100',
label: '洗水唛30 *10'
},
{
value: '20_50',
label: '洗水唛20 *50'
value: '62_100',
label: '洗水唛62 *100'
},
{
value: '75_100',
label: '吊牌75 *50'
@ -1211,10 +1178,6 @@ const sizeModeList = [
value: '200_200',
label: 'LOGO设计200 * 200'
},
{
value: '200_200',
label: 'LOGO设计200 * 200'
},
{
value: '90_54',
label: '名片90 * 54'
@ -1273,18 +1236,18 @@ const that = reactive({
color: ''
},
editArea: {
width: 100,
height: 300,
width: 30,
height: 100,
}
},
cellInfo: {
size: {
width: 100,
height: 300,
width: 30,
height: 100,
},
data: {}
},
testFontSizeVal: 12,
testFontSizeVal: 10,
btnState: {
canUndo: false,
canRedo: false,

9
hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
View File

@ -3,12 +3,15 @@
<div
:id="cellInfo.id"
class="node-content"
:class="{ 'node-content-group' : cellInfo.editMode && cellInfo.propGroupId }"
:class="{
'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
'node-content-tips' : cellInfo.editMode && !cellInfo.style.shape.href
}"
:title="cellInfo.propGroupName"
v-reSize="changSize">
<img
:src="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
<img v-if="cellInfo.style.shape.href"
:src="cellInfo.style.shape.href" x="0" y="0"
style="width: 100%;height: 100%;"
:style="{
width: '100%',

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

@ -1675,6 +1675,7 @@ defineExpose({
<style>
.node-content-group {
--lk-prop-group-color: #00ff00;
box-shadow: 0 0 1px 1px rgb(186, 186, 186);
@ -1689,7 +1690,23 @@ defineExpose({
z-index: 1;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent transparent var(--lk-prop-group-color);
border-color: transparent transparent transparent var(--lk-prop-group-color) !important;
}
.node-content-tips{
box-shadow: 0 0 1px 1px #00ff0b;
position: relative;
}
.node-content-tips:after {
content: "p";
position: absolute;
z-index: 1;
font-size: 8px;
right: 50%;
color: #1af323;
}
.node-content-tips:before {
border-color: transparent transparent transparent #00ff0b;
}
</style>
<style scoped lang="scss">

13
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/ProductCareItemForm.vue
View File

@ -173,7 +173,7 @@ import DraftDesignImageLibDialog from "@/components/Dialog/src/DraftDesignImageL
import BrandDataListDialog from "@/components/Dialog/src/BrandDataListDialog/index.vue";
/** 产品保养项 表单 */
/** 产品护理项 表单 */
defineOptions({name: 'ProductCareItemForm'})
const {t} = useI18n() // 国际化
@ -234,9 +234,14 @@ const removeRow = (index) => {
message.error('至少需要一个多语言内容')
}
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
let isCopy = type === 'copy' ;
if(isCopy){
type = 'create'
}
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
@ -245,14 +250,16 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
formData.value = await ProductCareItemApi.getProductCareItem(id)
console.log(" formData.value", formData.value)
if(isCopy){
formData.value.id = undefined
formData.value.value= ''
}
that.langList = JSON.parse(formData.value.langMapping || '{}')
} finally {
formLoading.value = false
}
}
}
const changeIcon = (info) => {
console.log("info", info)
}

47
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue
View File

@ -14,7 +14,7 @@
<el-form-item label="名称" prop="value">
<el-input
v-model="queryParams.value"
placeholder="请输入保养项名称"
placeholder="请输入护理项名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
@ -83,25 +83,42 @@
<!-- 列表 -->
<ContentWrap>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="保养项名称" align="center" prop="value" width="200" />
<el-table-column label="品牌通用" align="center" prop="isAll" >
<el-table-column label="护理项名称" align="center" prop="value" />
<el-table-column label="语言" align="center" prop="langMapping">
<template #default="scope">
<div class="flex flex-wrap">
<el-tag class="m-1" :type="['primary','success', 'info', 'warning'][i%4]" v-for="(item,i) in getLangList(scope.row.langMapping)" :key="item">
{{item}}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="品牌通用" align="center" prop="isAll" width="100">
<template #default="scope">
<div>
{{scope.row.isAll ? '是' : '否'}}
</div>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="enabled" >
<el-table-column label="启用状态" align="center" prop="enabled" width="100">
<template #default="scope">
<div>
{{scope.row.enabled ? '启用' : '停用'}}
</div>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('copy', scope.row.id)"
v-hasPermi="['oms:product-care-item:update']"
>
复制
</el-button>
<el-button
link
type="primary"
@ -142,7 +159,7 @@ import { ProductCareItemApi, ProductCareItemVO } from '@/api/oms/productcareitem
import ProductCareItemForm from './ProductCareItemForm.vue'
import {buildQuery} from "@/utils/queryUtil";
/** 产品保养项 列表 */
/** 产品护理项 列表 */
defineOptions({ name: 'ProductCareItem' })
const message = useMessage() // 消息弹窗
@ -196,7 +213,19 @@ const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
const getLangList= (mapping) =>{
let lang = [];
if(mapping){
const parse = JSON.parse(mapping);
for (let i = 0; i < Math.min(parse.length, 5); i++) {
lang.push(parse[i].locale)
}
if(parse.length > 3){
lang.push('...')
}
}
return lang;
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
@ -224,7 +253,7 @@ const handleExport = async () => {
// 发起导出
exportLoading.value = true
const data = await ProductCareItemApi.exportProductCareItem(queryParams)
download.excel(data, '产品保养项 .xls')
download.excel(data, '产品护理项 .xls')
} catch {
} finally {
exportLoading.value = false

13
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem2/ProductCareItemForm.vue
View File

@ -173,7 +173,7 @@ import DraftDesignImageLibDialog from "@/components/Dialog/src/DraftDesignImageL
import BrandDataListDialog from "@/components/Dialog/src/BrandDataListDialog/index.vue";
/** 产品保养项 表单 */
/** 产品护理项 表单 */
defineOptions({name: 'ProductCareItemForm'})
const {t} = useI18n() // 国际化
@ -234,9 +234,14 @@ const removeRow = (index) => {
message.error('至少需要一个多语言内容')
}
}
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
let isCopy = type === 'copy' ;
if(isCopy){
type = 'create'
}
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
@ -245,7 +250,10 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
formData.value = await ProductCareItemApi.getProductCareItem(id)
console.log(" formData.value", formData.value)
if(isCopy){
formData.value.id = undefined
formData.value.value= ''
}
that.langList = JSON.parse(formData.value.langMapping || '{}')
} finally {
formLoading.value = false
@ -309,6 +317,7 @@ const inputFocus = (index)=>{
}
// 处理按下 Alt + R 快捷键的函数
const handleKeydown = (event) => {
console.log(111)
// 判断是否按下了 Alt + R
if (event.altKey && event.key === 'r') {
onAltRPressed();

57
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem2/index.vue
View File

@ -14,23 +14,13 @@
<el-form-item label="名称" prop="value">
<el-input
v-model="queryParams.value"
placeholder="请输入保养项名称"
placeholder="请输入护理项名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :span="8">
<el-select v-model="queryParams.type" clearable multiple>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.OMS_PRODUCT_CARE_ITEM_TYPE)"
:key="`${dict.value}`"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-col>
<el-col :xs="24" :span="8">
<el-form-item label="启用状态" prop="enabled">
<el-select
@ -83,25 +73,40 @@
<!-- 列表 -->
<ContentWrap>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="保养项名称" align="center" prop="value" width="200" />
<el-table-column label="品牌通用" align="center" prop="isAll" >
<el-table-column label="护理项名称" align="center" prop="value" />
<el-table-column label="语言" align="center" prop="langMapping">
<template #default="scope">
<div class="flex flex-wrap">
<el-tag class="m-1" :type="['primary','success', 'info', 'warning'][i%4]" v-for="(item,i) in getLangList(scope.row.langMapping)" :key="item">
{{item}}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="品牌通用" align="center" prop="isAll" width="100">
<template #default="scope">
<div>
{{scope.row.isAll ? '是' : '否'}}
</div>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="enabled" >
<el-table-column label="启用状态" align="center" prop="enabled" width="100">
<template #default="scope">
<div>
{{scope.row.enabled ? '启用' : '停用'}}
</div>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('copy', scope.row.id)"
v-hasPermi="['oms:product-care-item:update']"
>
复制
</el-button>
<el-button
link
type="primary"
@ -142,7 +147,7 @@ import { ProductCareItemApi, ProductCareItemVO } from '@/api/oms/productcareitem
import ProductCareItemForm from './ProductCareItemForm.vue'
import {buildQuery} from "@/utils/queryUtil";
/** 产品保养项 列表 */
/** 产品护理项 列表 */
defineOptions({ name: 'ProductCareItem' })
const message = useMessage() // 消息弹窗
@ -202,7 +207,19 @@ const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
const getLangList= (mapping) =>{
let lang = [];
if(mapping){
const parse = JSON.parse(mapping);
for (let i = 0; i < Math.min(parse.length, 5); i++) {
lang.push(parse[i].locale)
}
if(parse.length > 3){
lang.push('...')
}
}
return lang;
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
@ -224,7 +241,7 @@ const handleExport = async () => {
// 发起导出
exportLoading.value = true
const data = await ProductCareItemApi.exportProductCareItem(queryParams)
download.excel(data, '产品保养项 .xls')
download.excel(data, '产品护理项 .xls')
} catch {
} finally {
exportLoading.value = false

11
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem3/ProductCareItemForm.vue
View File

@ -173,7 +173,7 @@ import DraftDesignImageLibDialog from "@/components/Dialog/src/DraftDesignImageL
import BrandDataListDialog from "@/components/Dialog/src/BrandDataListDialog/index.vue";
/** 产品保养项 表单 */
/** 产品护理项 表单 */
defineOptions({name: 'ProductCareItemForm'})
const {t} = useI18n() // 国际化
@ -238,6 +238,10 @@ const removeRow = (index) => {
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
let isCopy = type === 'copy' ;
if(isCopy){
type = 'create'
}
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
@ -246,7 +250,10 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
formData.value = await ProductCareItemApi.getProductCareItem(id)
console.log(" formData.value", formData.value)
if(isCopy){
formData.value.id = undefined
formData.value.value= ''
}
that.langList = JSON.parse(formData.value.langMapping || '{}')
} finally {
formLoading.value = false

82
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem3/index.vue
View File

@ -14,23 +14,14 @@
<el-form-item label="名称" prop="value">
<el-input
v-model="queryParams.value"
placeholder="请输入保养项名称"
placeholder="请输入护理项名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :span="8">
<el-select v-model="queryParams.type" clearable multiple>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.OMS_PRODUCT_CARE_ITEM_TYPE)"
:key="`${dict.value}`"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-col>
<el-col :xs="24" :span="8">
<el-form-item label="启用状态" prop="enabled">
<el-select
@ -83,25 +74,55 @@
<!-- 列表 -->
<ContentWrap>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="保养项名称" align="center" prop="value" width="200" />
<el-table-column label="品牌通用" align="center" prop="isAll" >
<el-table-column label="护理项名称" align="center" prop="value" />
<el-table-column label="icon" align="center" prop="isAll" >
<template #default="scope">
<div>
<el-image v-if="scope.row.iconUrl"
style="width: 64px;height: 64px;"
:src="scope.row.iconUrl"
:preview-src-list="[scope.row.iconUrl]"
/>
<span v-else>-</span>
</div>
</template>
</el-table-column>
<el-table-column label="语言" align="center" prop="langMapping">
<template #default="scope">
<div class="flex flex-wrap">
<el-tag class="m-1" :type="['primary','success', 'info', 'warning'][i%4]" v-for="(item,i) in getLangList(scope.row.langMapping)" :key="item">
{{item}}
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="enabled" width="100">
<template #default="scope">
<div>
{{scope.row.enabled ? '启用' : '停用'}}
</div>
</template>
</el-table-column>
<el-table-column label="品牌通用" align="center" prop="isAll" width="100" >
<template #default="scope">
<div>
{{scope.row.isAll ? '是' : '否'}}
</div>
</template>
</el-table-column>
<el-table-column label="启用状态" align="center" prop="enabled" >
<template #default="scope">
<div>
{{scope.row.enabled ? '启用' : '停用'}}
</div>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('copy', scope.row.id)"
v-hasPermi="['oms:product-care-item:update']"
>
复制
</el-button>
<el-button
link
type="primary"
@ -142,7 +163,7 @@ import { ProductCareItemApi, ProductCareItemVO } from '@/api/oms/productcareitem
import ProductCareItemForm from './ProductCareItemForm.vue'
import {buildQuery} from "@/utils/queryUtil";
/** 产品保养项 列表 */
/** 产品护理项 列表 */
defineOptions({ name: 'ProductCareItem' })
const message = useMessage() // 消息弹窗
@ -185,6 +206,19 @@ const getList = async () => {
}
}
const getLangList= (mapping) =>{
let lang = [];
if(mapping){
const parse = JSON.parse(mapping);
for (let i = 0; i < Math.min(parse.length, 5); i++) {
lang.push(parse[i].locale)
}
if(parse.length > 3){
lang.push('...')
}
}
return lang;
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
@ -224,7 +258,7 @@ const handleExport = async () => {
// 发起导出
exportLoading.value = true
const data = await ProductCareItemApi.exportProductCareItem(queryParams)
download.excel(data, '产品保养项 .xls')
download.excel(data, '产品护理项 .xls')
} catch {
} finally {
exportLoading.value = false

3
hangtag-ui/hangtag-ui-admin/src/views/oms/productinfo/index.vue
View File

@ -111,7 +111,7 @@
<DesignPreviewDialog ref="designPreviewDialogRef"/>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="产品编码" align="center" prop="code" width="200"/>
<el-table-column label="产品名称" align="center" prop="name"/>
<el-table-column label="产品名称" align="center" prop="name" min-width="200"/>
<el-table-column label="封面" align="center" prop="cover">
<template #default="scope">
<el-image
@ -132,7 +132,6 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" width="240px" align="center">
<template #default="scope">
<el-button

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

@ -198,18 +198,17 @@
style="box-shadow: 0px 2px 5px 2px #dcdcdc;">
<div
v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
v-for="(img,index) in [that.propInfo[tmp.key].dataInfo[0]]"
:key="index" style="display: flex">
<div class="img-box" v-if="img.url">
<div class="img-box">
<div style="display: flex;width: 380px;align-items: center"
:class="{ 'error_tip': errorItem(tmp.key,index) }">
<el-image
v-if="img.url"
style="width: 64px; height: 64px"
fit="contain"
:src="img.url"
:preview-src-list="[img.url]"/>
<div>
<el-select-v2
v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
@ -391,7 +390,6 @@ const errorKeys = computed(() => {
return [];
})
const errorItem = (key, index) => {
console.log("errorKeys", errorKeys)
return errorKeys.value.includes(`${key}_${index}`)
}
const errorInfo = (key, index) => {
@ -490,14 +488,11 @@ const changeIconData = (index: number, key: string) => {
if (that.propInfo[key].dataInfo[index].showLabel) {
const info = that.propInfo[key];
console.log("info", that.propInfo[key].dataInfo[index])
const infoList = washingInfoListByType(info.groupType)
let mapping = {}
for (let i = 0; i < infoList.length; i++) {
mapping[infoList[i].label] = infoList[i].langMapping;
}
console.log("111", infoList, mapping)
// 多语言变量替换
const allData = [...that.propInfo[key].dataInfo]
const fLang = allData[0].locale;
@ -531,24 +526,8 @@ const changeIconData = (index: number, key: string) => {
for (let j = 0; j < m1.length; j++) {
langObj[m1[j].locale] = m1[j]
}
for (let k = i; k < allData.length; k++) {
if (langObj[allData[k].locale]) {
const obj = langObj[allData[k].locale]
if (obj) {
console.log("obj", obj)
let str = ratio;
if (str === null || str === undefined || str === -1) {
str = ''
}
allData[k].label = `${obj.value}`.replaceAll('${r}', `${str}`)
}
}
}
}
}
that.propInfo[key].dataInfo = [...allData];
resetData();
}
@ -566,7 +545,6 @@ const findProcessTypeIndex = (index) => {
// 找到最后一个位置
if (that.propOrderByList[i].shape === ShapeType.vueShapeImage) {
processType++;
console.log("@@@@@@", index, i)
if (index === i) {
return processType
}
@ -615,9 +593,7 @@ const uploadFile = async (fileName) => {
});
});
}
const deleteImgList = (key, index) => {
}
const deleteList = (key, index) => {
const item = cloneDeep(that.propInfo[key])
@ -649,37 +625,6 @@ const deleteList = (key, index) => {
}
}
const appendImageList = (key) => {
// todo 待完成
// 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[1].locale
// const tmpArr = [...item.dataInfo]
//
// for (let i = 1; i < tmpArr.length; i++) {
// if(i > 1 && tmpArr[i].locale === locale){
// break;
// }
// item.dataInfo.push(
// {
// label: '',
// url: '',
// ratio: 0,
// ...tmpArr[i]
// }
// )
// }
// resetData();
}
const appendList = (key) => {
const item = that.propInfo[key]
console.log("item.dataInfo", item)
@ -940,11 +885,12 @@ const checkPropInfo = (info) => {
let newInfo2 = cloneDeep(info)
const keys = [];
// 排序变量
for (let i = 0; i < that.propOrderByList.length; i++) {
keys.push(that.propOrderByList[i].key);
}
for (let i = 0; i < keys.length; i++) {
endloop: for (let i = 0; i < keys.length; i++) {
const key = keys[i];
// 合并相同语言的文字
let newArr = [];
@ -955,8 +901,7 @@ const checkPropInfo = (info) => {
const dataInfoArr = newInfo[key].dataInfo;
let langList = newInfo[key].langList || [];
if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
console.log("GroupTypeEnum.RATIO", newInfo[key])
// 成分比例 都进行固定语言组合
// 获取到所以的成分
let langSort = newInfo[key].langSort || [];
if (langSort.length === 0) {
@ -1066,81 +1011,55 @@ const checkPropInfo = (info) => {
// end
} else {
// 语言对应自己的自动位置
if (newInfo[key].multiLanguage) {
const urlSet = [];
for (let l = 0; l < newInfo[key].dataInfo.length; l++) {
let str = [];
let row = null;
let labelInfo = []
if (newInfo[key].groupType === GroupTypeEnum.ICON) {
if (newInfo[key].dataInfo[l].url) {
newArr.push({...newInfo[key].dataInfo[l]});
if (urlSet.includes(newInfo[key].dataInfo[l].url)) {
useMessage().notifyWarning(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`)
that.errorList.push({
key: `${key}_${l}`,
message: "数据重复"
})
reject("数据重复")
return;
}
urlSet.push(newInfo[key].dataInfo[l].url)
} else {
// 组合语言
for (let i1 = 1; i1 < newInfo[key].dataInfo.length; i1++) {
if (newInfo[key].dataInfo[l].locale === newInfo[key].dataInfo[i1].locale && !newInfo[key].dataInfo[l].url) {
str.push(newInfo[key].dataInfo[i1].label)
row = {
...newInfo[key].dataInfo[i1],
url: ''
};
if (newInfo[key].groupType === GroupTypeEnum.ICON) {
const infoList = washingInfoListByType(newInfo[key].groupType)
const infos = newInfo[key].dataInfo;
for (let j = 1; j < infos.length; j++) {
outerLoop: for (let i = 0; i < infoList.length; i++) {
const row1 = infoList[i];
for (let k = 0; k < row1.langMapping.length; k++) {
// 跳过icon 类型，因为没有url
if (infos[j].locale === row1.langMapping[k].locale) {
infos[j].label = row1.langMapping[k].value
break outerLoop;
}
}
}
}
} else {
for (let i1 = 0; i1 < newInfo[key].dataInfo.length; i1++) {
if (firstLang === newInfo[key].dataInfo[i1].locale && newInfo[key].dataInfo[i1].showLabel) {
if (labelInfo.includes(newInfo[key].dataInfo[i1].showLabel)) {
useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
that.errorList.push({
key: `${key}_${i1}`,
message: "数据重复"
})
reject("数据重复")
return
}
labelInfo.push(newInfo[key].dataInfo[i1].showLabel)
}
if (newInfo[key].dataInfo[i1].locale === allLang[l] && newInfo[key].dataInfo[i1].showLabel) {
str.push(newInfo[key].dataInfo[i1].label)
if (!row) {
row = {
...newInfo[key].dataInfo[i1],
url: ''
};
}
console.log("newArr33",infos)
newInfo[key].dataInfo = infos;
break;
}else {
const infoList = washingInfoListByType(newInfo[key].groupType)
const infos = newInfo[key].dataInfo;
for (let j = 0; j < infos.length; j++) {
outerLoop: for (let i = 0; i < infoList.length; i++) {
const row1 = infoList[i];
for (let k = 0; k < row1.langMapping.length; k++) {
// 跳过icon 类型，因为没有url
if (infos[j].locale === row1.langMapping[k].locale) {
infos[j].label = row1.langMapping[k].value
break outerLoop;
}
}
}
}
if (row) {
row.label = str.join(linkChar);
newArr.push(row);
}
console.log("newArr33",infos)
newInfo[key].dataInfo = infos;
break;
}
console.log("newArr", newArr)
newInfo[key].dataInfo = newArr;
} else {
// 语言组合成一句话
// 多种语言组合成一句话
// 文本类型处理
if (newInfo[key].groupType === GroupTypeEnum.TEXT) {
let langSort = newInfo[key].langSort || [];
if (langSort.length === 0) {
langSort = allLang
}
let mergeLabel = [];
for (let j = 0; j < langSort.length; j++) {
const labelInfo = []
@ -1217,10 +1136,17 @@ const checkPropInfo = (info) => {
// 查询所有的icon
const dis = [];
const allDataList = [];
let firstLabel = ''
for (let i = 0; i < keys.length; i++) {
const tmpKey2 = keys[i]
if (that.propInfo[tmpKey2].groupType === GroupTypeEnum.ICON) {
if (that.propInfo[tmpKey2].dataInfo[0].showLabel) {
if (!firstLabel) {
firstLabel = that.propInfo[tmpKey2].dataInfo[0].showLabel
}
if (dis.includes(that.propInfo[tmpKey2].dataInfo[0].showLabel)) {
useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
that.errorList.push({
@ -1232,7 +1158,7 @@ const checkPropInfo = (info) => {
}
dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
}
allDataList.push(that.propInfo[keys[i]].dataInfo[0])
}
}
const infoList = washingInfoListByType(newInfo[key].groupType)
@ -1272,17 +1198,16 @@ const checkPropInfo = (info) => {
}
}
}
console.log("firstLabel", firstLabel)
const mergeLabelStr = mergeLabel.join(linkChar);
console.log("组合的一句话", mergeLabelStr)
// 其他的label 不显示
const newArr = cloneDeep(newInfo[key].dataInfo);
console.log("newArr", allDataList)
let resArr = [];
for (let j = 0; j < newArr.length; j++) {
// 如果没有选择的不显示
if (newArr[j].label && newArr[j].showLabel) {
newArr[j].label = mergeLabelStr
resArr.push(newArr[j])
}
newArr[j].label = mergeLabelStr
resArr.push(newArr[j])
}
newInfo[key].dataInfo = resArr;
}

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

@ -104,20 +104,24 @@
<div>
<el-checkbox v-model="that.configInfo.multiLanguage">勾选后语言匹配到对应位置上
</el-checkbox>
<el-select
v-show="!that.configInfo.multiLanguage"
filterable
multiple
v-model="that.configInfo.langSort"
placeholder="可多选语言参与拼接为一句话,和排序">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-button v-show="that.configInfo.langSort && that.configInfo.langSort.length > 0" @click="setLangSort">语言排序</el-button>
<div v-show="!that.configInfo.multiLanguage">
<el-select
filterable
multiple
v-model="that.configInfo.langSort"
placeholder="可多选语言参与拼接为一句话,和排序">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-button
v-show="that.configInfo.langSort
&& that.configInfo.langSort.length > 0"
@click="setLangSort">语言排序</el-button>
</div>
</div>
<div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
<el-button @click="append(1)">追加</el-button>

83
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/layout/LeftPanel.vue
View File

@ -86,12 +86,18 @@
@mousedown.stop="handlerAddNode($event,item)"
>
<div
:title="item.label"
class="mainPanel-menu__button"
:class="{
'active' : layout.leftActive === item.key
}">
<i :class="item.icon" style="font-size: 2rem"></i>
<div>
<el-image
v-if="item.icon.startsWith('http')"
:src="item.icon"
style="width: 48px; height: 48px"
/>
<i v-else :class="item.icon" style="font-size: 2rem"></i>
<div >
<span style="font-size: 0.8rem">{{ item.label }}</span>
</div>
</div>
@ -204,7 +210,25 @@ const showPanelList = computed(() => {
return item.filterKeyword().toLowerCase().indexOf(layout.searchKeyword.toLowerCase()) !== -1
})
})
const placeholderItem = ()=>{
return {
"key": "vue-node_shape_image",
"shape": "vue-node_shape_image",
"data": {
"label": "",
"width": 20,
"height": 20,
"shape": 10,
"style": {
"shape": {
"href": ""
}
}
},
"icon": "http://m.silverprinting.com.hk/admin-api/admin-api/infra/file/23/get/92b64f8c3cf664a8e69312bf0777ebc2fa84dc55a078155ae64441d6b33585e1.png",
"label": "占位符"
}
}
const imageList = computed(() => {
return that.imageUrlList.filter(item => {
@ -225,30 +249,40 @@ const queryImage = async () => {
that.imageUrlList = [];
that.imageKeySet = [];
for (let i = 0; i < data.list.length; i++) {
let config = JSON.parse(data.list[i].initData)
config.filterKeyword = function () {
return this.label
}
config.key = `${config.key}_${data.list[i].id}`
if (that.imageKeySet.includes(config.key)) {
continue;
const d = {
label: '',
filterKeyword:function () {
return this.label || ''
},
...JSON.parse(data.list[i].initData)
}
that.imageUrlList.push(toShape(data.list[i].id,d,domain))
}
console.log(toShape('1',placeholderItem(),domain))
that.imageUrlList.unshift(toShape('1',placeholderItem(),domain))
that.imgLoading = false
// that.imageUrlList = data.list
}
const toShape =(id,config,domain) =>{
config.filterKeyword = function () {
return this.label || ''
}
config.key = `${config.key}_${id}`
if (!that.imageKeySet.includes(config.key)) {
that.imageKeySet.push(config.key)
// 替换域名
config.icon = replaceDomain(domain, config.icon)
config.data.style.shape.href = replaceDomain(domain, config.data.style.shape.href)
config.data.style.shape.label= config.label
that.imageUrlList.push(config)
}
that.imgLoading = false
// that.imageUrlList = data.list
return config
}
const allList = computed(() => {
let arr = [];
let typeSet = shapeList.value.map(item => {return item.shape});
for (let i = 0; i < layout.leftBtnList.length; i++) {
if (['shape_image', 'shape_set'].includes(layout.leftBtnList[i].key)) {
if (['shape_image', 'shape_set','vue-node_shape_image_Placeholder'].includes(layout.leftBtnList[i].key)) {
continue;
}
if(typeSet.includes(layout.leftBtnList[i].shape)){
@ -370,6 +404,27 @@ const layout = reactive({
return this.label
}
},
{
shape: ShapeType.vueShapeImage,
"key": "vue-node_shape_image_Placeholder",
"data": {
"label": "",
"width": 20,
"height": 20,
"shape": 10,
"style": {
"shape": {
"href": "",
"label": ""
}
}
},
icon: "http://m.silverprinting.com.hk/admin-api/admin-api/infra/file/23/get/92b64f8c3cf664a8e69312bf0777ebc2fa84dc55a078155ae64441d6b33585e1.png",
label: 'Placeholder占位符',
filterKeyword: function () {
return this.label
}
},
]
})
onMounted(() => {

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

@ -1062,7 +1062,6 @@ const fontFamilyList = computed(() => {
icon: 'font-FangSong',
label: '仿宋'
},
{
value: '黑体',
icon: 'font-SimHei',
@ -1143,62 +1142,30 @@ const fontSizeList = computed(() => {
const arr = [{
value: 2,
label: `2`
},{
value: 3,
label: `3`
}]
let i = 4;
while (i < 20) {
i += 2
arr.push({
value: i,
label: `${i}`
})
}
while (i < 80) {
i += 4
arr.push({
value: i,
label: `${i}`
})
}
while (i < 100) {
i += 8
arr.push({
value: i,
label: `${i}`
})
}
while (i < 200) {
i += 20
arr.push({
value: i,
label: `${i}`
})
}
while (i < 300) {
i += 40
arr.push({
value: i,
label: `${i}`
})
}
while (i < 500) {
i += 80
while (i < 600) {
i ++
arr.push({
value: i,
label: `${i}`
})
}
return arr
})
const sizeModeList = [
{
value: '15_50',
label: '洗水唛15 *50'
{
value: '30_100',
label: '洗水唛30 *10'
},
{
value: '20_50',
label: '洗水唛20 *50'
value: '62_100',
label: '洗水唛62 *100'
},
{
value: '75_100',
label: '吊牌75 *50'
@ -1211,10 +1178,6 @@ const sizeModeList = [
value: '200_200',
label: 'LOGO设计200 * 200'
},
{
value: '200_200',
label: 'LOGO设计200 * 200'
},
{
value: '90_54',
label: '名片90 * 54'
@ -1273,18 +1236,18 @@ const that = reactive({
color: ''
},
editArea: {
width: 100,
height: 300,
width: 30,
height: 100,
}
},
cellInfo: {
size: {
width: 100,
height: 300,
width: 30,
height: 100,
},
data: {}
},
testFontSizeVal: 12,
testFontSizeVal: 10,
btnState: {
canUndo: false,
canRedo: false,

9
hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
View File

@ -3,12 +3,15 @@
<div
:id="cellInfo.id"
class="node-content"
:class="{ 'node-content-group' : cellInfo.editMode && cellInfo.propGroupId }"
:class="{
'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
'node-content-tips' : cellInfo.editMode && !cellInfo.style.shape.href
}"
:title="cellInfo.propGroupName"
v-reSize="changSize">
<img
:src="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
<img v-if="cellInfo.style.shape.href"
:src="cellInfo.style.shape.href" x="0" y="0"
style="width: 100%;height: 100%;"
:style="{
width: '100%',

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

@ -1675,6 +1675,7 @@ defineExpose({
<style>
.node-content-group {
--lk-prop-group-color: #00ff00;
box-shadow: 0 0 1px 1px rgb(186, 186, 186);
@ -1689,7 +1690,23 @@ defineExpose({
z-index: 1;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent transparent var(--lk-prop-group-color);
border-color: transparent transparent transparent var(--lk-prop-group-color) !important;
}
.node-content-tips{
box-shadow: 0 0 1px 1px #00ff0b;
position: relative;
}
.node-content-tips:after {
content: "p";
position: absolute;
z-index: 1;
font-size: 8px;
right: 50%;
color: #1af323;
}
.node-content-tips:before {
border-color: transparent transparent transparent #00ff0b;
}
</style>
<style scoped lang="scss">