diff --git a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/InHandler.java b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/InHandler.java
index b8d05aa..0bbd4cd 100644
--- a/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/InHandler.java
+++ b/hangtag-framework/hangtag-spring-boot-starter-mybatis/src/main/java/cn/hangtag/framework/mybatis/build/where/handler/InHandler.java
@@ -1,21 +1,30 @@
 package cn.hangtag.framework.mybatis.build.where.handler;
 
 
+import cn.hangtag.framework.common.util.FuncUtil;
 import cn.hangtag.framework.mybatis.build.QueryConfigUtils;
 import cn.hangtag.framework.mybatis.build.WrapperInfo;
 import cn.hangtag.framework.mybatis.build.enums.QueryFilterTypeEnum;
 import cn.hangtag.framework.mybatis.build.where.WhereWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 
+import java.util.Collection;
+import java.util.Collections;
 import java.util.List;
-public class InHandler<T> implements WhereWrapper<T> {
-	@Override
-	public QueryFilterTypeEnum getType() {
-		return QueryFilterTypeEnum.IN;
-	}
 
-	@Override
-	public QueryWrapper<T> handler(WrapperInfo<T> wrapperInfo) {
-		return wrapperInfo.getQueryWrapper().in(wrapperInfo.getField(), wrapperInfo.getValue());
-	}
+public class InHandler<T> implements WhereWrapper<T> {
+    @Override
+    public QueryFilterTypeEnum getType() {
+        return QueryFilterTypeEnum.IN;
+    }
+
+    @Override
+    public QueryWrapper<T> handler(WrapperInfo<T> wrapperInfo) {
+        Object value = wrapperInfo.getValue();
+        if (value instanceof Collection) {
+           return wrapperInfo.getQueryWrapper().in(wrapperInfo.getField(),(Collection)value);
+        }
+        value = FuncUtil.toStrList(FuncUtil.toStr(value));
+        return wrapperInfo.getQueryWrapper().in(wrapperInfo.getField(),value);
+    }
 }
diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/productcareitem/ProductCareItemController.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/productcareitem/ProductCareItemController.java
index e68010a..c35d75d 100644
--- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/productcareitem/ProductCareItemController.java
+++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/controller/admin/productcareitem/ProductCareItemController.java
@@ -1,5 +1,6 @@
 package cn.hangtag.module.oms.controller.admin.productcareitem;
 
+import cn.hangtag.framework.mybatis.build.QueryFilterInfo;
 import org.springframework.web.bind.annotation.*;
 import javax.annotation.Resource;
 import org.springframework.validation.annotation.Validated;
@@ -88,6 +89,12 @@ public class ProductCareItemController {
         PageResult<ProductCareItemDO> pageResult = productCareItemService.queryList(pageReqVO);
         return success(BeanUtils.toBean(pageResult, ProductCareItemRespVO.class));
     }
+    @PostMapping("/query")
+    @Operation(summary = "查询洗水对照项目 分页")
+    public CommonResult<PageResult<ProductCareItemRespVO>> queryPage(@RequestBody QueryFilterInfo<ProductCareItemPageReqVO> pageReqVO) {
+        PageResult<ProductCareItemDO> pageResult = productCareItemService.queryPage(pageReqVO);
+        return success(BeanUtils.toBean(pageResult, ProductCareItemRespVO.class));
+    }
 
     @GetMapping("/export-excel")
     @Operation(summary = "导出产品保养项  Excel")
diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/mysql/productcareitem/ProductCareItemMapper.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/mysql/productcareitem/ProductCareItemMapper.java
index c35ca7e..abda947 100644
--- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/mysql/productcareitem/ProductCareItemMapper.java
+++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/dal/mysql/productcareitem/ProductCareItemMapper.java
@@ -2,11 +2,15 @@ package cn.hangtag.module.oms.dal.mysql.productcareitem;
 
 import java.util.*;
 
+import cn.hangtag.framework.common.pojo.PageParam;
 import cn.hangtag.framework.common.pojo.PageResult;
 import cn.hangtag.framework.common.util.FuncUtil;
+import cn.hangtag.framework.mybatis.build.MybatisPlusUtil;
+import cn.hangtag.framework.mybatis.build.QueryFilterInfo;
 import cn.hangtag.framework.mybatis.core.query.LambdaQueryWrapperX;
 import cn.hangtag.framework.mybatis.core.mapper.BaseMapperX;
 import cn.hangtag.module.oms.dal.dataobject.productcareitem.ProductCareItemDO;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import org.apache.ibatis.annotations.Mapper;
 import cn.hangtag.module.oms.controller.admin.productcareitem.vo.*;
 
@@ -46,7 +50,7 @@ public interface ProductCareItemMapper extends BaseMapperX<ProductCareItemDO> {
                 .betweenIfPresent(ProductCareItemDO::getCreateTime, reqVO.getCreateTime())
                 .orderByDesc(ProductCareItemDO::getId);
         String brandIds = reqVO.getBrandIds();
-        if(FuncUtil.isNotEmpty(reqVO.getType())){
+        if (FuncUtil.isNotEmpty(reqVO.getType())) {
             String[] split = reqVO.getType().split(",");
             List<Long> types = new ArrayList<>();
             for (String s : split) {
@@ -55,7 +59,7 @@ public interface ProductCareItemMapper extends BaseMapperX<ProductCareItemDO> {
             queryWrapperX.in(ProductCareItemDO::getType, types);
         }
         if (brandIds != null && !brandIds.isEmpty()) {
-            queryWrapperX.and(w ->{
+            queryWrapperX.and(w -> {
                 String[] split = brandIds.split(",");
                 List<Long> brandIdList = new ArrayList<>();
                 for (String s : split) {
@@ -64,10 +68,18 @@ public interface ProductCareItemMapper extends BaseMapperX<ProductCareItemDO> {
                 w.eq(ProductCareItemDO::getIsAll, reqVO.getIsAll());
                 w.or().in(ProductCareItemDO::getBrandIds, brandIdList);
             });
-        }else {
+        } else {
             queryWrapperX.eqIfPresent(ProductCareItemDO::getIsAll, true);
         }
         return selectPage(reqVO, queryWrapperX);
     }
 
+    default PageResult<ProductCareItemDO> selectPagePlus(QueryFilterInfo<ProductCareItemPageReqVO> queryFilterInfo) {
+        PageParam pager = queryFilterInfo.getPager();
+        QueryWrapper<ProductCareItemDO> queryWrapper = MybatisPlusUtil
+                .parseQuery(queryFilterInfo, true, ProductCareItemDO.class,
+                        "pageNo", "pageSize", "PAGE_NO", "PAGE_SIZE", "PAGE_SIZE_NONE");
+        PageResult<ProductCareItemDO> res = selectPage(pager, queryWrapper);
+        return res;
+    }
 }
\ No newline at end of file
diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemService.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemService.java
index e189e7c..bdb58ff 100644
--- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemService.java
+++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemService.java
@@ -2,6 +2,8 @@ package cn.hangtag.module.oms.service.productcareitem;
 
 import java.util.*;
 import javax.validation.*;
+
+import cn.hangtag.framework.mybatis.build.QueryFilterInfo;
 import cn.hangtag.module.oms.controller.admin.productcareitem.vo.*;
 import cn.hangtag.module.oms.dal.dataobject.productcareitem.ProductCareItemDO;
 import cn.hangtag.framework.common.pojo.PageResult;
@@ -53,4 +55,12 @@ public interface ProductCareItemService {
     PageResult<ProductCareItemDO> getProductCareItemPage(ProductCareItemPageReqVO pageReqVO);
     PageResult<ProductCareItemDO> queryList(ProductCareItemPageReqVO pageReqVO);
 
+    /**
+     * 查询页
+     *
+     * @param pageReqVO 页面请求 vo
+     * @return {@link PageResult }<{@link ProductCareItemDO }>
+     */
+    PageResult<ProductCareItemDO> queryPage(QueryFilterInfo<ProductCareItemPageReqVO> pageReqVO);
+
 }
\ No newline at end of file
diff --git a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemServiceImpl.java b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemServiceImpl.java
index 3b6237a..6f506a7 100644
--- a/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemServiceImpl.java
+++ b/hangtag-module-oms/hangtag-module-oms-biz/src/main/java/cn/hangtag/module/oms/service/productcareitem/ProductCareItemServiceImpl.java
@@ -1,5 +1,6 @@
 package cn.hangtag.module.oms.service.productcareitem;
 
+import cn.hangtag.framework.mybatis.build.QueryFilterInfo;
 import org.springframework.stereotype.Service;
 import javax.annotation.Resource;
 import org.springframework.validation.annotation.Validated;
@@ -75,4 +76,12 @@ public class ProductCareItemServiceImpl implements ProductCareItemService {
     public PageResult<ProductCareItemDO> queryList(ProductCareItemPageReqVO pageReqVO) {
         return productCareItemMapper.queryPage(pageReqVO);
     }
+
+    @Override
+    public PageResult<ProductCareItemDO> queryPage(QueryFilterInfo<ProductCareItemPageReqVO> queryFilterInfo) {
+        PageResult<ProductCareItemDO> productInfoDOPageResult = productCareItemMapper.selectPagePlus(queryFilterInfo);
+        List<ProductCareItemDO> list = productInfoDOPageResult.getList();
+        productInfoDOPageResult.setList(list);
+        return productInfoDOPageResult;
+    }
 }
\ No newline at end of file
diff --git a/hangtag-ui/hangtag-ui-admin/src/api/oms/productcareitem/index.ts b/hangtag-ui/hangtag-ui-admin/src/api/oms/productcareitem/index.ts
index 6112330..81f6e6d 100644
--- a/hangtag-ui/hangtag-ui-admin/src/api/oms/productcareitem/index.ts
+++ b/hangtag-ui/hangtag-ui-admin/src/api/oms/productcareitem/index.ts
@@ -22,7 +22,9 @@ export const ProductCareItemApi = {
   queryList: async (params: any) => {
     return await request.get({ url: `/oms/product-care-item/list`, params })
   },
-
+  queryPage: async (params: any) => {
+    return await request.post({ url: `/oms/product-care-item/query`, data:{...params} })
+  },
   // 查询产品保养项 详情
   getProductCareItem: async (id: number) => {
     return await request.get({ url: `/oms/product-care-item/get?id=` + id })
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
index d8fe295..1b948b0 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -8,13 +8,18 @@
     append-to-body
     @close="updateVisible(false)">
     <div v-loading="that.loading">
-      <DesignPropEdit  ref="designPropEditRef" />
+      <DesignPropEdit ref="designPropEditRef"/>
     </div>
     <template #footer>
-        <span class="dialog-footer">
-        <el-button @click="updateVisible(false)">{{t("designInfo.cancelText")}}</el-button>
-        <el-button type="primary" @click="submit">{{ t("designInfo.auditSubmitText") }}</el-button>
-      </span>
+      <div style="display: flex;flex-direction: column;align-items: center">
+        <div>
+          <el-button @click="updateVisible(false)">{{ t("designInfo.cancelText") }}</el-button>
+          <el-button type="primary" @click="submit">{{
+              t("designInfo.auditSubmitText")
+            }}
+          </el-button>
+        </div>
+      </div>
     </template>
   </Dialog>
 </template>
@@ -24,47 +29,48 @@ import {ElAlert} from "element-plus";
 import {reactive, computed, watch} from 'vue'
 import {calculateVectorDifference} from "@/components/DraftDesign/utils/FuncUtil";
 import {useMessage} from "@/hooks/web/useMessage";
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+import {useI18n} from 'vue-i18n'
+
+const {t} = useI18n()
 const emit = defineEmits(['update:visible', 'submit'])
 const designPropEditRef = ref();
 const that = reactive({
   previewVisible: false,
   loading: false,
 })
-const updateVisible = (visible)=>{
+const updateVisible = (visible) => {
   that.previewVisible = visible;
 }
-const preview = (config,prop={})=>{
+const preview = (config, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.loadConfig(config,prop);
+  setTimeout(() => {
+    designPropEditRef.value.loadConfig(config, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
 // 预览产品id
-const previewByProductId = (id: string | number,prop={})=>{
+const previewByProductId = (id: string | number, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.previewByProductId(id,prop);
+  setTimeout(() => {
+    designPropEditRef.value.previewByProductId(id, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
 // 预览草稿设计id
-const previewByDraftDesignId = (id: string | number,prop={})=>{
+const previewByDraftDesignId = (id: string | number, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.previewByDraftDesignId(config,prop);
+  setTimeout(() => {
+    designPropEditRef.value.previewByDraftDesignId(config, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
-const submit = ()=>{
+const submit = () => {
   useMessage().confirm(t('designInfo.auditTips')).then(async (r) => {
     const res = await designPropEditRef.value.getPropInfo()
-    emit("submit",res);
+    emit("submit", res);
     updateVisible(false)
   })
 
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
index 443d218..1227ffc 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -34,20 +34,20 @@
       </div>
 
       <el-row>
-        <el-col :span="11">
+        <el-col :span="8">
           <div
             :class="{ 'hidden-div': false }"
             style="width:100%;height: 580px; border: 1px solid #090805">
             <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="16">
           <div style="display: flex;">
 
             <div class="flex flex-col">
               <div>
                 <el-form label-width="180px">
-                  <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
+                  <el-form-item label="Style" v-show="that.draftDesignList.length > 1">
                     <div class="flex ml-3">
                       <div>
                         <el-select class="min-w-100" v-model="that.draftDesignId"
@@ -64,29 +64,42 @@
                   </el-form-item>
                 </el-form>
               </div>
-              <div style="width: 100%"
-                   v-if="that.propOrderByList && that.propOrderByList.length > 0">
+              <div class="w-full" v-if="that.propOrderByList && that.propOrderByList.length > 0">
                 <el-scrollbar height="600px">
                   <el-form label-width="180px">
                     <el-form-item
-                      v-for="(tmp) in  that.propOrderByList"
+                      v-for="(tmp,orderIndex) in that.propOrderByList"
+
                       :key="tmp.key"
                       :label="getLabelName(that.propInfo[tmp.key])">
+                      <!--                      文本 -->
                       <div
-                        style="box-shadow: 0px 2px 5px 2px #dcdcdc;"
-                        v-if="that.propInfo[tmp.key].multiLanguage
-                         && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
+                        v-if="that.propInfo[tmp.key].shape === ShapeType.vueTextCell"
+                        style="box-shadow: 0px 2px 5px 2px #dcdcdc; width: 580px">
                         <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="padding: 4px"
+                            v-if="dl.locale === that.propInfo[tmp.key].dataInfo[0].locale">
                             <div style="display: flex;align-items: center;">
                           <span>
                             <i
+                              title="Input text"
                               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>
+                            <i
+                              v-else-if="!that.propInfo[tmp.key].canChange"
+                              class="icon-lk_cell_tree"
+                              style="font-size: 20px"> </i>
+                              <el-button link v-if="that.propInfo[tmp.key].canChange">
+                                 <i
+                                   title="addItem"
+                                   @click="appendList(tmp.key)"
+                                   class="icon-lk_cell_add"
+                                   style="font-size: 20px"> </i>
+                              </el-button>
                           </span>
-                              <div title="删除">
+                              <div title="remove">
                                 <el-button
                                   v-if="that.propInfo[tmp.key].canChange"
                                   type="danger"
@@ -95,27 +108,7 @@
                                   <i class="icon-lk_delete"> </i>
                                 </el-button>
                               </div>
-                                <el-autocomplete
-                              v-if="that.propInfo[tmp.key].canInput"
-                              v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
-                              :fetch-suggestions="querySearch"
-                              clearable
-                              class="inline-input w-50"
-                              placeholder="Please Input"
-                              @change="changeInput(i,tmp.key)"
-                              @select="changeData(i,tmp.key)"
-                            />
-                              <el-select-v2
-                                v-else
-                                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 v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO">
                                 <div
                                   style="display: flex;align-items: center; margin-left: 10px; width: 220px">
                                   <el-row>
@@ -124,152 +117,128 @@
                                     </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>
+                                          <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
+                                :class="{
+                                'error_tip': errorItem(tmp.key,i)
+                              }" v-if="that.propInfo[tmp.key].canInput">
+                                <el-autocomplete
+                                  style="min-width: 200px;width: 60%"
+                                  v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
+                                  :fetch-suggestions="querySearch"
+                                  clearable
+                                  class="inline-input w-50"
+                                  placeholder="Please Input"
+                                  @change="changeInput(i,tmp.key)"
+                                  @select="changeData(i,tmp.key)"
+                                />
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,i)">
+                                  {{ errorInfo(tmp.key, i) }}
+                                </div>
+                              </div>
+
+                              <div v-else :class="{  'error_tip': errorItem(tmp.key,i) }">
+                                <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)"
+                                  @select="handleSelect(i,tmp.key)"
+                                  size="large"
+                                  style="min-width: 280px;width: 100%"
+                                />
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,i)">
+                                  {{ errorInfo(tmp.key, i) }}
+                                </div>
+                              </div>
                             </div>
                           </div>
                         </template>
-
                         <el-button
                           v-if="that.propInfo[tmp.key].canChange"
                           @click="appendList(tmp.key)">
-                          添加
+                          addItem
                         </el-button>
-                      </div>
-
-                      <div v-else-if="!that.propInfo[tmp.key].isCombo">
-                        <div
-                          v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
-                          :key="index"
-                          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>
-
-                            <el-autocomplete
-                              v-if="that.propInfo[tmp.key].canInput"
-                              v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                              :fetch-suggestions="querySearch"
-                              clearable
-                              class="inline-input w-50"
-                              placeholder="Please Input"
-                              @change="changeInput(index,tmp.key)"
-                              @select="changeData(index,tmp.key)"
-                            />
-                            <el-select-v2
-                              v-else
-                              v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                              filterable
-                              :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                              placeholder="Please select"
-                              @change="changeData(index,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[index].ratio"
-                                      @change="changeData(index,tmp.key)"
-                                    />
-                                  </el-col>
-                                  <el-col :span="4">
-                                    <div> %</div>
-                                  </el-col>
-                                </el-row>
-                              </div>
-                            </div>
-                            <el-button
-                              type="danger"
-                                  link
-                              v-if="that.propInfo[tmp.key].canChange"
-                              @click="deleteList(tmp.key,index)">
-                              <i class="icon-lk_delete"> </i>
-                            </el-button>
+                        <el-button
+                          type="primary"
+                          plain
+                          v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO && !that.propInfo[tmp.key].parentId"
+                          @click="appendGroup(orderIndex,tmp.key)">
+                          <i class="icon-lk_add"></i>
+                          addCompositionGroup
+                        </el-button>
+                        <el-button
+                          type="danger"
+                          link
+                          v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO && that.propInfo[tmp.key].parentId"
+                          @click="delGroup(orderIndex,tmp.key)">
+                          <div>
+                            <i class="icon-lk_delete"> </i>
+                            removeGroup
                           </div>
-                        </div>
-
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="appendList(tmp.key)">
-                          添加
                         </el-button>
                       </div>
 
-                      <div  style="box-shadow: 0px 2px 5px 2px #dcdcdc;" v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
-<!--                        功能待完善-->
+                      <!--                      image -->
+                      <div
+                        v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage"
+                        style="box-shadow: 0px 2px 5px 2px #dcdcdc;">
+
                         <div
                           v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
                           :key="index" style="display: flex">
-
                           <div class="img-box" v-if="img.url">
-                            <div style="display: flex">
-                              <img :src="img.url" width="60px" height="60px"/>
-                               <div>
-                             <el-button
-                               type="danger"
-                                link
-                                v-if="false &&  that.propInfo[tmp.key].canChange && img.url "
-                                 @click="deleteImgList(tmp.key,index)">
-                            <i class="icon-lk_delete"> </i>
-                          </el-button>
-                          </div>
-                              <el-select-v2
-                                v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                                filterable
-                                :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
-                                placeholder="Please select"
-                                @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[index].showLabel)"
-                                size="large"
-                                style="min-width: 280px;width: 100%"
-                              >
-                                <template #default="{ item }">
-                                  <div style="display: flex;">
-                                    <img :src="item.url" width="30px" height="30px"/>
-                                    <span>
-                                {{ item.label }}
-                              </span>
-                                  </div>
-                                </template>
-                              </el-select-v2>
+                            <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"
+                                  filterable
+                                  :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
+                                  placeholder="Please select"
+                                  clearable
+                                  @change="changeIconData(index,tmp.key)"
+                                  @select="handleSelect(i,tmp.key)"
+                                  :defaultValue="''"
+                                  :no-match-text="'Data Empty'"
+                                  size="large"
+                                  style="min-width: 280px;width: 100%"
+                                >
+                                  <template #default="{ item }">
+                                    <div style="display: flex;">
+                                      <img :src="item.url" width="30px" height="30px"/>
+                                      <span>
+                                        {{ item.label }}
+                                    </span>
+                                    </div>
+                                  </template>
+                                </el-select-v2>
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,index)">
+                                  {{ errorInfo(tmp.key, index) }}
+                                </div>
+                              </div>
                             </div>
                           </div>
-                          <div v-else-if="img.label">
-                            <el-input v-model="img.label" disabled/>
-                          </div>
-
                         </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange && false"
-                          @click="appendImageList(tmp.key)">
-                          添加
-                        </el-button>
-
                       </div>
 
                     </el-form-item>
@@ -285,7 +254,7 @@
     </div>
 
     <div
-      :class ="{ 'hidden-div': that.hideCreate}"
+      :class="{ 'hidden-div': that.hideCreate}"
       :id="that.svgId"
       :style="{
             position: that.hideCreate ?  'fixed' : 'relative',
@@ -307,15 +276,17 @@
           }"
       >
 
-      <div>
-        <div v-if="false" style="color: #ff0000;">w:{{imageSize.width}} h:{{imageSize.height}}</div>
-         <span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
+        <div>
+          <div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
+            h:{{ imageSize.height }}
+          </div>
+          <span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
           *仅供参考
         </span>
-      </div>
+        </div>
       </div>
       <div
-        v-if="that.previewUrl" v-html="that.previewUrl" >
+        v-if="that.previewUrl" v-html="that.previewUrl">
       </div>
     </div>
   </div>
@@ -336,6 +307,7 @@ import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
 import {usePageLoading} from "@/hooks/web/usePageLoading";
+import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
 
 const {loadStart, loadDone} = usePageLoading()
 // 动态属性配置
@@ -380,9 +352,10 @@ const that = reactive({
   show: false,
   svgHeight: 0,
   svgWidth: 0,
+  errorList: [],
 })
 
-const previewSize = computed(()=>{
+const previewSize = computed(() => {
   return {
     width: imageSize.value.width * 10,
     height: imageSize.value.height * 10
@@ -393,7 +366,6 @@ watch(() => that.currentZoom, () => {
   showPng();
 })
 const querySearch = (queryString: string, cb: any) => {
-
   const results = queryString ? that.ingredientInfoList.filter((item: any) => {
     return item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
   }) : that.ingredientInfoList
@@ -411,6 +383,26 @@ const imageSize = computed(() => {
     height: 10
   }
 })
+const errorKeys = computed(() => {
+  if (that.errorList && that.errorList.length > 0) {
+    return that.errorList.map(item => item.key)
+  }
+  return [];
+})
+const errorItem = (key, index) => {
+  console.log("errorKeys", errorKeys)
+  return errorKeys.value.includes(`${key}_${index}`)
+}
+const errorInfo = (key, index) => {
+  if (that.errorList && that.errorList.length > 0) {
+    for (let i = 0; i < that.errorList.length; i++) {
+      if (that.errorList[i].key === `${key}_${index}`) {
+        return that.errorList[i].message
+      }
+    }
+  }
+  return ''
+}
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
     zIndex: 9999999,
@@ -430,14 +422,21 @@ const initSucceed = () => {
   showPng();
   emit('initSucceed')
 }
-const changeInput =(index: number, key: string)=>{
+const changeInput = (index: number, key: string) => {
 
-    if(!that.propInfo[key].dataInfo[index].showLabel){
-      useMessage().notifyWarning('请输入'+getLabelName(that.propInfo[key]));
-      return;
-    }
-    that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
-    resetData();
+  if (!that.propInfo[key].dataInfo[index].showLabel) {
+    useMessage().notifyWarning('请输入' + getLabelName(that.propInfo[key]));
+    return;
+  }
+  that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
+  resetData();
+}
+const handleSelect = (index: number, key: string) => {
+  const info = that.propInfo[key];
+  that.propInfo[key].dataInfo[index] = {
+    key: "t_" + Math.random().toString(36).substring(2),
+    ...info.dataInfo[index],
+  }
 }
 const changeData = (index: number, key: string) => {
 
@@ -447,77 +446,113 @@ const changeData = (index: number, key: string) => {
   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;
   let m1 = mapping[allData[0].showLabel]
-  if(m1){
+  console.log("m1:", m1)
+  if (m1) {
+    that.propInfo[key].langList = [...m1]
     let ratio = allData[0].ratio
     for (let i = 0; i < allData.length; i++) {
 
-      if(i>0 && allData[i].locale === fLang){
+      if (i > 0 && allData[i].locale === fLang) {
         ratio = allData[i].ratio
         m1 = mapping[allData[i].showLabel]
+        console.log("m2", m1)
+        if (m1) {
+          that.propInfo[key].langList.push(...m1)
+        }
+
       }
-      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 = ''
+      if (m1) {
+        for (let j = 0; j < m1.length; j++) {
+          if (allData[i].locale === m1[j].locale) {
+            let str = ratio;
+            if (str === null || str === undefined || str === -1) {
+              str = ''
+            }
+            allData[i].label = `${m1[j].value}`.replaceAll('${r}', `${str}`)
+            break;
           }
-          allData[i].label=  `${m1[j].value}`.replaceAll('${r}', `${str}`)
-          break;
         }
       }
     }
-
     that.propInfo[key].dataInfo = [...allData];
-
-    console.log("allData",allData)
+    console.log("allData", allData)
     resetData();
   }
 
 }
-const changeComboData = (index: number, key: string) => {
-  const info = that.propInfo[key];
-  const infoList = getIngredientInfoListByType(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[1].locale;
-  let m1 = mapping[allData[1].showLabel]
-  if(m1){
-    let ratio = allData[1].ratio
-    for (let i = 0; i < allData.length; i++) {
+const changeIconData = (index: number, key: string) => {
 
-      if(i>0 && allData[i].locale === fLang){
-        ratio = allData[i].ratio
-        m1 = mapping[allData[i].showLabel]
-      }
-      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 = ''
-          }
-          allData[i].label=  `${m1[j].value}`.replaceAll('${r}', `${str}`)
-          break;
-        }
+  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;
+    let m1 = mapping[allData[0].showLabel]
+    let url = infoList[0].url
+
+    for (let i1 = 0; i1 < infoList.length; i1++) {
+      if (infoList[i1].value === allData[0].showLabel) {
+        url = infoList[i1].url
+        break;
       }
     }
+    allData[0].url = url
+    if (m1) {
 
-    that.propInfo[key].dataInfo = [...allData];
+      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].showLabel]
+          for (let i1 = 0; i1 < infoList.length; i1++) {
+            if (infoList[i1].value === allData[i].showLabel) {
+              url = infoList[i1].url
+              allData[0].url = url
+              break;
+            }
+          }
+        }
+        if (m1) {
+          let langObj = {};
+          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}`)
+              }
 
-    console.log("allData",allData)
-    resetData();
+            }
+          }
+        }
+
+      }
+
+      that.propInfo[key].dataInfo = [...allData];
+      resetData();
+    }
   }
+
 }
 
 const washingInfoListByType = (type) => {
@@ -530,13 +565,13 @@ const uploadFile = async (fileName) => {
   return new Promise((resolve, reject) => {
 
     let svgElement = document.getElementById(that.svgId);
-    domtoimage.toBlob(svgElement,{
-      width: that.svgWidth+5,
-      height: that.svgHeight+5,
+    domtoimage.toBlob(svgElement, {
+      width: that.svgWidth + 5,
+      height: that.svgHeight + 5,
       type: 'image/jpeg',
       quality: 1
     }).then((blob) => {
-      const file = new File([blob], fileName, { type: 'image/jpeg' });
+      const file = new File([blob], fileName, {type: 'image/jpeg'});
       FileApi.updateFile({file: file})
         .then((res) => {
           if (res.code === 0) {
@@ -556,116 +591,91 @@ const uploadFile = async (fileName) => {
   });
 }
 const deleteImgList = (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[1].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 deleteList = (key, index) => {
-  const item = JSON.parse(JSON.stringify(that.propInfo[key]))
-  const group =  findGroup(key,that.propInfo)
+  const item = cloneDeep(that.propInfo[key])
+
+  const group = findGroup(key, that.propInfo)
   const keys = Object.keys(group);
 
-  if(keys.length > 1){
+  if (keys.length > 1) {
     console.log(index)
     // 删除同一组数据
-    const firstLang =  item.dataInfo[0].locale
+    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){
+      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)){
+      if (!indexs.includes(i)) {
         newArr.push(that.propInfo[key].dataInfo[i])
       }
     }
     that.propInfo[key].dataInfo = [...newArr]
     resetData();
-  }else {
+  } else {
     useMessage().notifyWarning("至少需要一个变量")
     return;
   }
 
 }
 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();
+  //  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)
-  const group =  findGroup(key,that.propInfo)
+  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)
+  console.log("keys", keys)
   // 有多少组变量
-  if(keys.length >= item.maxSize ){
-    useMessage().notifyWarning("最大数量为:"+item.maxSize)
+  if (keys.length >= item.maxSize) {
+    useMessage().notifyWarning("最大数量为:" + item.maxSize)
     return;
   }
-  const locale =  item.dataInfo[0].locale
+  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;
-     }
+    if (i > 0 && tmpArr[i].locale === locale) {
+      break;
+    }
     item.dataInfo.push(
       {
+        key: "t_" + Math.random().toString(36).substring(2),
         label: '',
         url: '',
         ratio: 0,
@@ -675,6 +685,57 @@ const appendList = (key) => {
   }
   resetData();
 }
+const findGroupTypeCount = (type) => {
+  const keys = Object.keys(that.propInfo);
+  let count = 0;
+  for (let i = 0; i < keys.length; i++) {
+    if (that.propInfo[keys[i]].groupType === type) {
+      count++;
+    }
+  }
+  return count;
+}
+const appendGroup = (index, key) => {
+
+// { "key": "gpc8wfjwd04s_893a74", "name": "L1_1", "shape": "vue-node_text_cell", "isCombo": false }
+  const gId = "g_" + Math.random().toString(36).substring(2);
+  // 查询成分有多少组
+  let count = findGroupTypeCount(GroupTypeEnum.RATIO);
+  if (count > 16) {
+    useMessage().notifyWarning("最多添加16组")
+    return;
+  }
+
+  for (let i = 0; i < that.propOrderByList.length; i++) {
+    // 找到最后一个位置
+    if (that.propOrderByList[i].groupType === GroupTypeEnum.RATIO) {
+      index = i;
+    }
+  }
+  count++;
+  const info = cloneDeep(that.propOrderByList[index]);
+  // 插入到 index 后面
+  const insertIndex = Math.min(index + 1, that.propOrderByList.length)
+  that.propOrderByList.splice(insertIndex, 0, {
+    ...info,
+    key: gId,
+    name: 'CompositionGroup_' + count,
+    groupType: GroupTypeEnum.RATIO,
+  })
+  that.propInfo[gId] = cloneDeep(that.propInfo[key])
+  that.propInfo[gId].groupName = that.propInfo[key].groupName + '_' + count;
+  that.propInfo[gId].parentId = that.propInfo[key].groupName;
+  console.log("that.propInfo[gId]", that.propOrderByList)
+}
+const delGroup = (orderIndex, key) => {
+  useMessage().confirm("是否删除该组变量?").then((res) => {
+    if (res) {
+      that.propOrderByList.splice(orderIndex, 1);
+      delete that.propInfo[key]
+    }
+  })
+
+}
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -743,7 +804,7 @@ const queryUseLabel = (label) => {
     }).then((data) => {
       that.ingredientInfoList = [];
       if (data.list) {
-
+        // 文字说明
         that.ingredientInfoList = data.list.map((item) => {
           return {
             value: item.value,
@@ -754,6 +815,8 @@ const queryUseLabel = (label) => {
             url: ''
           }
         })
+        //
+        console.log("lables",that.propInfo)
       }
     })
     ProductCareItemApi.queryList({
@@ -766,7 +829,7 @@ const queryUseLabel = (label) => {
       type: '2'
     }).then((data) => {
       that.washingInfoList = [];
-
+      // 洗水唛图标
       if (data.list) {
         that.washingInfoList = data.list.map((item) => {
           return {
@@ -796,6 +859,7 @@ const showPng = () => {
           ...that.propInfo || {},
           ...that.restInfo || {},
         };
+        console.log("that.propInfo",that.propInfo)
         that.propOrderByList = info.propOrderByList;
         loading.value = false;
       }, {
@@ -813,14 +877,14 @@ const resetData = () => {
     that.changeCount++;
   }
 }
-const findGroup = (key,propInfo)=>{
-  let groupArr= [];
+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){
+    if (l > index && propInfo[key].dataInfo[l].locale === firstLang) {
       index = l;
       groupArr = []
     }
@@ -834,88 +898,382 @@ const findGroup = (key,propInfo)=>{
  * @param key
  * @param propInfo
  */
-const findGroupAllLang = (key,propInfo)=>{
-  const langList = [];
-  let firstLang = propInfo[key].dataInfo[0].locale
+const findGroupAllLang = (key, propInfo) => {
+  const tmpList = [];
   for (let l = 0; l < propInfo[key].dataInfo.length; l++) {
-    // 数据分组
-    if(l > 0 && propInfo[key].dataInfo[l].locale === firstLang){
-     break;
+    if (tmpList.includes(propInfo[key].dataInfo[l].locale)) {
+      continue;
     }
-    langList.push(propInfo[key].dataInfo[l].locale)
+    tmpList.push(propInfo[key].dataInfo[l].locale)
   }
-  return langList
+  return tmpList
 }
-const checkPropInfo = (info)=>{
-  return new Promise((resolve,reject)=>{
-    let newInfo = JSON.parse(JSON.stringify(info))
+const checkPropInfo = (info) => {
+  return new Promise((resolve, reject) => {
+    let newInfo = cloneDeep(info)
+    let newInfo2 = cloneDeep(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;
-        const linkChar = newInfo[key].linkChar || ',';
+      const allLang = findGroupAllLang(key, newInfo2);
+      const firstLang = newInfo[key].dataInfo[0].locale;
+      const linkChar = newInfo[key].linkChar || '';
+      const dataInfoArr = newInfo[key].dataInfo;
+      let langList = newInfo[key].langList || [];
+      if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
+        console.log("GroupTypeEnum.RATIO", newInfo[key])
 
-        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]};
-            }
+        // 获取到所以的成分
+        let langSort = newInfo[key].langSort || [];
+        if (langSort.length === 0) {
+          langSort = allLang
+        }
+        // 获取第一个的比例
+        let str = newInfo[key].dataInfo[0].ratio;
+        let ratioConfig = [];
+        let maxRatio = str;
+        for (let j = 0; j < newInfo[key].dataInfo.length; j++) {
+          ratioConfig.push({
+            ratio: newInfo[key].dataInfo[j].ratio,
+            locale: newInfo[key].dataInfo[j].locale
+          });
+          if (newInfo[key].dataInfo[j].ratio > maxRatio) {
+            useMessage().alert(getLabelName(newInfo[key]) + "违反含有量的成分比例,由大到小依序排列")
           }
         }
-        if(newInfo[key].groupType === '1'){
-          if(rInfo != 100){
-            useMessage().notifyError(`成分占比应该是100%,当前只有${rInfo}%`);
-            reject(`成分占比应该是100%,当前只有${rInfo}%`)
+        let ratioIndex = 0;
+        if (str === null || str === undefined || str === -1) {
+          str = ''
+        }
+        let mergeLabel = [];
+        let checked = false; //是否校验
+        for (let j = 0; j < langSort.length; j++) {
+          const labelInfo = []
+          let allRatio = 0; // 累计 比例
+          for (let k = 0; k < langList.length; k++) {
+            if (langSort[j] === langList[k].locale) {
+              let tmpValue = `${langList[k].value}`.replaceAll('${r}', `${str}`)
+              ratioIndex++;
+              ratioIndex = ratioIndex % dataInfoArr.length
+              str = dataInfoArr[ratioIndex].ratio;
+              if (str === null || str === undefined || str === -1) {
+                str = ''
+              }
+              mergeLabel.push(tmpValue)
+            }
+          }
+          let flag = false;
+          // 校验
+          for (let k = 0; k < dataInfoArr.length; k++) {
+            if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+              flag = true;
+              if (!checked) {
+                // 成分占比
+                allRatio += dataInfoArr[k].ratio ? dataInfoArr[k].ratio : 0
+                console.log("allRatio", allRatio)
+                if (allRatio > 100) {
+                  useMessage().notifyError("占比之和不能超过100,实际为：" + allRatio);
+                  that.errorList.push({
+                    key: `${key}_${k}`,
+                    message: "占比之和不能超过100，实际为：" + allRatio
+                  })
+                  reject("占比之和不能超过100")
+                  return
+                }
+                if (labelInfo.includes(dataInfoArr[k].showLabel)) {
+                  useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                  that.errorList.push({
+                    key: `${key}_${k}`,
+                    message: "数据重复"
+                  })
+                  reject("数据重复")
+                  return
+                }
+              }
+              labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+            }
+          }
+          // 第一次校验
+          if (flag && !checked && allRatio < 100) {
+            useMessage().notifyError(`${newInfo[key].groupName} 中占比希望是100%,实际是${allRatio}`);
+            that.errorList.push({
+              key: `${key}_${dataInfoArr.length - 1}`,
+              message: "成分不足100%"
+            })
+            reject("成分占比为" + allRatio)
             return
           }
+          if (flag && !checked) {
+            checked = true
+          }
+
         }
-        if(row){
-          row.label = str.join(linkChar);
-          newArr.push(row);
+
+        const mergeLabelStr = mergeLabel.join(linkChar);
+        let parentStr = '';
+        console.log("组合的一句话", mergeLabelStr)
+        let newKey = key;
+        if (newInfo[key].parentId) {
+          for (let j = 0; j < keys.length; j++) {
+            const kKey = keys[j];
+            if (newInfo[kKey].groupName === newInfo[key].parentId) {
+              newKey = kKey;
+              parentStr = newInfo[kKey].dataInfo[0].label + '<br/>'
+
+              break;
+            }
+          }
+        }
+        newInfo[newKey].dataInfo = [{
+          ...newInfo[newKey].dataInfo[0],
+          label: parentStr + mergeLabelStr
+        }];
+
+        //   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: ''
+                    };
+                  }
+                }
+
+              }
+            } 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: ''
+                    };
+                  }
+                }
+              }
+            }
+            if (row) {
+              row.label = str.join(linkChar);
+              newArr.push(row);
+            }
+          }
+          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 = []
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale && newInfo[key].dataInfo[k].showLabel) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+              // 校验重复
+              for (let k = 0; k < dataInfoArr.length; k++) {
+                if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+                  if (newInfo[key].dataInfo[k].showLabel) {
+                    if (labelInfo.includes(newInfo[key].dataInfo[k].showLabel)) {
+                      useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                      that.errorList.push({
+                        key: `${key}_${k}`,
+                        message: "数据重复"
+                      })
+                      reject("数据重复")
+                      return
+                    }
+                    labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+                  }
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            const newArr = [{
+              ...newInfo[key].dataInfo[0],
+              label: mergeLabelStr
+            }]
+            newInfo[key].dataInfo = newArr;
+          } else if (newInfo[key].groupType === GroupTypeEnum.SIZE) {
+            let langSort = newInfo[key].langSort || [];
+            if (langSort.length === 0) {
+              langSort = allLang
+            }
+
+            let mergeLabel = [];
+            for (let j = 0; j < langSort.length; j++) {
+              const labelInfo = []
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+              // 校验重复
+              for (let k = 0; k < dataInfoArr.length; k++) {
+                if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+                  if (labelInfo.includes(newInfo[key].dataInfo[k].showLabel)) {
+                    useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                    that.errorList.push({
+                      key: `${key}_${k}`,
+                      message: "数据重复"
+                    })
+                    reject("数据重复")
+                    return
+                  }
+                  labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            const newArr = [{
+              ...newInfo[key].dataInfo[0],
+              label: mergeLabelStr
+            }]
+            newInfo[key].dataInfo = newArr;
+          } else if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
+            //
+          } else if (newInfo[key].groupType === GroupTypeEnum.ICON) {
+
+            // 查询所有的icon
+            const dis = [];
+             const keys = Object.keys(that.propInfo);
+            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( dis.includes(that.propInfo[tmpKey2].dataInfo[0].showLabel)){
+                  useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
+                  that.errorList.push({
+                    key: `${tmpKey2}_${0}`,
+                    message: "数据重复"
+                  })
+                  reject("数据重复")
+                  return
+                  }
+                   dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
+                }
+
+              }
+            }
+            const infoList = washingInfoListByType(newInfo[key].groupType)
+            let mapping = {}
+            for (let i = 0; i < infoList.length; i++) {
+              mapping[infoList[i].label] = infoList[i].langMapping;
+            }
+            const keyList = Object.keys(newInfo);
+            const allIcon = [];
+            for (let j = 0; j < keyList.length; j++) {
+              for (let k = 0; k < newInfo[keyList[j]].dataInfo.length; k++) {
+                if (newInfo[keyList[j]].dataInfo[k].url) {
+                  allIcon.push(newInfo[keyList[j]].dataInfo[k].showLabel)
+                }
+              }
+            }
+            langList = [];
+            for (let j = 0; j < allIcon.length; j++) {
+              const m1 = mapping[allIcon[j]];
+              if (m1) {
+                langList.push(...m1)
+              }
+            }
+            let langSort = newInfo[key].langSort || [];
+            if (langSort.length === 0) {
+              langSort = allLang
+            }
+            let str = newInfo[key].dataInfo[0].ratio;
+            if (str === null || str === undefined || str === -1) {
+              str = ''
+            }
+            let mergeLabel = [];
+            for (let j = 0; j < langSort.length; j++) {
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            // 其他的label 不显示
+            const newArr = cloneDeep(newInfo[key].dataInfo);
+            let resArr = [];
+            for (let j = 0; j < newArr.length; j++) {
+              // 如果没有选择的不显示
+              if (newArr[j].label && newArr[j].showLabel) {
+                newArr[j].label = i === 0 ? mergeLabelStr : ''
+                resArr.push(newArr[j])
+              }
+            }
+            newInfo[key].dataInfo = resArr;
+          }
         }
       }
-      newInfo[key].dataInfo = newArr;
 
     }
     resolve(newInfo)
   });
 }
+const cloneDeep = (obj) => {
+  return JSON.parse(JSON.stringify(obj))
+}
 const updateDesign = () => {
+  that.errorList = []
   that.changeCount = 0;
   // 记录变更的数据
   that.restInfo = {...that.propInfo}
-  checkPropInfo(that.propInfo).then(newInfo=>{
-    //
-    console.log("that.restInfo",that.restInfo)
+  checkPropInfo(that.propInfo).then(newInfo => {
+    that.pageConfig.propOrderByList = that.propOrderByList
+    console.log("that.restInfo@@", that)
     draftDesignEditRef.value.init(false, that.pageConfig, that.data, newInfo)
   })
 }
@@ -926,7 +1284,11 @@ const changeType = () => {
 const getPropInfo = () => {
   // 预览数据 保持缩放
   return new Promise((resolve) => {
-    checkPropInfo(that.propInfo).then(r =>{
+    that.errorList = []
+    that.changeCount = 0;
+    that.restInfo = {...that.propInfo}
+    checkPropInfo(that.propInfo).then(r => {
+      that.pageConfig.propOrderByList = that.propOrderByList
       that.pageLoading = ElLoading.service({
         lock: true,
         text: '数据传输中...',
@@ -936,15 +1298,15 @@ const getPropInfo = () => {
       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)');
+        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%';
 
-          const dom =  document.querySelector(`#${that.svgId} svg .x6-graph-svg-viewport`).getBoundingClientRect()
-          const svgDom =  document.querySelector(`#${that.svgId} svg`).getBoundingClientRect()
+          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`;
@@ -1036,4 +1398,9 @@ defineExpose({
     height: 60px;
   }
 }
+
+.error_tip {
+  box-shadow: rgb(255, 0, 0) 0px 0px 2px 1px;
+
+}
 </style>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
index c5b7cab..a016906 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
@@ -1,119 +1,139 @@
 <template>
-  <el-dialog
-    v-model="that.show"
-    title="动态属性配置"
-    width="60vw"
-    top="2%"
-    draggable
-    append-to-body
-    @close="updateVisible(false)">
-    <div style="width: 100%; max-height: 75vh">
-      <el-alert
-        title="动态属性配置说明"
-        type="info"
-        :closable="false"
-        show-icon
-        style="margin-bottom: 10px"
-      >
-        "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
-      </el-alert>
-      <el-form>
-        <el-row style="min-width: 900px">
-          <el-col :span="6" :xs="12">
-            <el-form-item label="组名称">
-              <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6" :xs="12">
-            <el-form-item label="组id">
-              <el-input v-model="that.configInfo.groupId" disabled/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="保养类型" >
-          <el-select v-model="that.configInfo.groupType" :disabled="that.configInfo.isCombo">
-            <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-form-item>
-<!--       停用 -->
-        <el-form-item label="控制" >
-          <div style="width: 800px">
-            <el-row>
-            <el-col :span="6">
-             <div style="width: 120px;display: flex">
-               <el-checkbox
-                 v-model="that.configInfo.canChange">
-               <span>允许调整数量</span>
-               </el-checkbox>
-             </div>
+  <div>
+    <SortDialog ref="sortDialogRef" @list-change="langSortChange"/>
+    <el-dialog
+      v-model="that.show"
+      title="动态属性配置"
+      width="60vw"
+      top="2%"
+      draggable
+      append-to-body
+      :close-on-click-modal="false"
+      @close="updateVisible(false)">
+      <div style="width: 100%; max-height: 75vh">
+        <el-alert
+          title="动态属性配置说明"
+          type="info"
+          :closable="false"
+          show-icon
+          style="margin-bottom: 10px"
+        >
+          "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
+        </el-alert>
+        <el-form>
+          <el-row style="min-width: 900px">
+            <el-col :span="6" :xs="12">
+              <el-form-item label="组名称">
+                <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
+              </el-form-item>
             </el-col>
+            <el-col :span="6" :xs="12">
+              <el-form-item label="组id">
+                <el-input v-model="that.configInfo.groupId" disabled/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="护理类型">
+            <el-select v-model="that.configInfo.groupType" :disabled="that.configInfo.isCombo">
+              <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-form-item>
+          <!--       停用 -->
+          <el-form-item label="控制">
+            <div style="width: 800px">
+              <el-row>
+                <el-col :span="6">
+                  <div style="width: 120px;display: flex">
+                    <el-checkbox
+                      v-model="that.configInfo.canChange">
+                      <span>允许调整数量</span>
+                    </el-checkbox>
+                  </div>
+                </el-col>
 
-            <el-col :span="6">
-             <div style="width: 120px;display: flex">
-               <el-checkbox :disabled="disableInput"
-                 v-model="that.configInfo.canInput">
-                <span>允许输入值</span>
-               </el-checkbox>
-             </div>
-            </el-col>
-              <el-col :span="12">
-               <el-tooltip
-                content="输入多个变量时的连接字符,使用<br/> 变量进行换行"
-               >
-                <div style="display:flex;">
-                  <div>变量链接符</div>
-                    <div>
-                      <el-input v-model="that.configInfo.linkChar" clearable maxlength="6" placeholder="请输入连接符" show-word-limit />
+                <el-col :span="6">
+                  <div style="width: 120px;display: flex">
+                    <el-checkbox :disabled="disableInput"
+                                 v-model="that.configInfo.canInput">
+                      <span>允许输入值</span>
+                    </el-checkbox>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <el-tooltip
+                    content="输入多个变量时的连接字符,使用<br/> 变量进行换行"
+                  >
+                    <div style="display:flex;">
+                      <div>变量链接符</div>
+                      <div>
+                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"
+                                  placeholder="请输入连接符" show-word-limit/>
+                      </div>
+                      <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
                     </div>
-                  <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
-                </div>
-               </el-tooltip>
-            </el-col>
-          </el-row>
-          </div>
-        </el-form-item>
-        <el-form-item label="数量">
-          <el-row>
-            <el-col :span="11">
-              min
-              <el-input-number
-                v-model="that.configInfo.minSize"
-                :min="1"
-                :max="that.configInfo.maxSize"
-                :disabled="that.configInfo.shape"/>
-            </el-col>
-            <el-col :span="11">
-              max
-              <el-input-number
-                v-model="that.configInfo.maxSize" :min="that.configInfo.shape ? 3 : 1"/>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="位置信息">
+                  </el-tooltip>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form-item>
+          <el-form-item label="数量">
+            <el-row>
+              <el-col :span="11">
+                min
+                <el-input-number
+                  v-model="that.configInfo.minSize"
+                  :min="1"
+                  :max="that.configInfo.maxSize"
+                  :disabled="that.configInfo.shape"/>
+              </el-col>
+              <el-col :span="11">
+                max
+                <el-input-number
+                  v-model="that.configInfo.maxSize" :min="that.configInfo.shape ? 3 : 1"/>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item label="位置信息">
 
-          <div style="display: flex;flex-direction: column">
-            <div>
-              <el-checkbox v-model="that.configInfo.multiLanguage">多语言对照,开启后语言匹配到对应位置上</el-checkbox>
-            </div>
-            <div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
-              <el-button @click="append(1)">追加</el-button>
-              <el-button @click="append(10)">追加10个</el-button>
-              <el-button type="danger" @click="delLast">删除</el-button>
-            </div>
-            <div v-else-if="!that.configInfo.isCombo">
-              <span style="font-size: 0.8rem;color: #7c7b7b">两个或者以上允许追加更多位置信息</span>
-            </div>
+            <div style="display: flex;flex-direction: column">
+              <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>
+              <div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
+                <el-button @click="append(1)">追加</el-button>
+                <el-button @click="append(10)">追加10个</el-button>
+                <el-button type="danger" @click="delLast">删除</el-button>
+              </div>
+              <div v-else-if="!that.configInfo.isCombo">
+                <span
+                  style="font-size: 0.8rem;color: #7c7b7b">两个或者以上允许追加更多位置信息</span>
+              </div>
               <el-table :data="that.configInfo.pointList" style=" box-shadow: 2px 0 0 1px #eee; ">
                 <el-table-column label="序号" width="60">
                   <template #default="scope">
                     <span>{{ scope.$index + 1 }}</span>
                     <span v-if="that.configInfo.isCombo" style="padding-right: 4px">
-                     {{scope.$index !== 0  ? '' : '-icon' }}
+                     {{ scope.$index !== 0 ? '' : '-icon' }}
                    </span>
                   </template>
                 </el-table-column>
@@ -129,7 +149,8 @@
                 </el-table-column>
                 <el-table-column label="语言" width="180" v-if="that.configInfo.multiLanguage">
                   <template #default="scope">
-                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale" placeholder="请选择语言标识">
+                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"
+                               placeholder="请选择语言标识">
                       <el-option
                         v-for="dict in languageOptions"
                         :key="`${dict.value}`"
@@ -142,7 +163,8 @@
                 <el-table-column label="文本" width="180">
                   <template #default="scope">
                     <div>
-                      <div v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
+                      <div
+                        v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
                         表达式
                       </div>
                       <div v-else>
@@ -153,7 +175,7 @@
                           placement="top"
                         >
                       <span class="line-clamp-1">
-                        {{ that.configInfo.pointList[scope.$index].dataInfo.label}}
+                        {{ that.configInfo.pointList[scope.$index].dataInfo.label }}
                       </span>
                         </el-tooltip>
                       </div>
@@ -162,17 +184,18 @@
                   </template>
                 </el-table-column>
               </el-table>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
-    <template #footer>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
       <span class="dialog-footer">
         <el-button @click="updateVisible(false)">取消</el-button>
         <el-button type="primary" @click="submit">确定</el-button>
       </span>
-    </template>
-  </el-dialog>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
@@ -185,24 +208,25 @@ import {ShapeType} from "../config";
 // 动态属性配置
 
 const emit = defineEmits(['update:visible', 'submit'])
-
+const sortDialogRef = ref();
 const that = reactive({
   allGroupList: [],
   show: false,
   configInfo: {
     groupName: '', // 父节点名称
-    groupType: '1',
-    isCombo: false, // 是否是组合节点
-    multiLanguage: true, // 是否使用多语言
-    minSize: 1,
-    maxSize: 100,
-    canChange: false,
-    canInput: false,
-    linkChar: ',',
-    cellIds: [], // 节点id
+    groupType: '1', // 组合类型
     groupId: `g_${Math.random().toString(36).substring(2)}`,
+    isCombo: false, // 是否是组合节点
+    multiLanguage: true, // 是否使用多语言  true 为多语言对应到指定位置上，false 为将语言组合成一句话
+    langSort: [], // 多语言 组合成一句话的 排序
+    minSize: 1, // 节点组最小数量
+    maxSize: 100, // 节点组最大数量
+    canChange: false, // 是否允许调整数量
+    canInput: false,// 是否允许输入值
+    linkChar: ',',// 连接字符
+    cellIds: [], // 节点id
     data: {}, //节点是数据
-    shape: '', // 是否是图片
+    shape: '', // 节点类型
     pointList: [], //{ x:10,y:100}
   }
 })
@@ -212,11 +236,11 @@ const props = defineProps({
     default: false
   }
 })
-const languageOptions = computed(()=>{
+const languageOptions = computed(() => {
 
   const options = getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE);
   // @ts-ignore
-  options.unshift({ label: '*取值表达式', value: '_$value' })
+  options.unshift({label: '*取值表达式', value: '_$value'})
   return options
 })
 const delLast = () => {
@@ -227,7 +251,7 @@ const delLast = () => {
   that.configInfo.pointList.pop()
   useMessage().success(`成功删除1个位置信息`)
 }
-const disableInput = computed(()=>{
+const disableInput = computed(() => {
   return that.configInfo.shape === ShapeType.vueShapeImage
 })
 const appendNode = () => {
@@ -256,14 +280,15 @@ const append = (count = 1) => {
 }
 const init = (allGroupList, data) => {
   that.allGroupList = allGroupList;
-  console.log("that.allGroupList",that.allGroupList)
-  console.log("data",data)
+  console.log("that.allGroupList", that.allGroupList)
+  console.log("data", data)
   that.configInfo = {
     groupName: '', // 父节点名称
     groupType: '1',
     groupId: `g_${Math.random().toString(36).substring(2)}`,
     isCombo: false, // 是否是组合节点
-    multiLanguage: true, // 是否使用多语言
+    multiLanguage: true, // 是否使用多语言  true 为多语言对应到指定位置上，false 为将语言组合成一句话
+    langSort: [], // 多语言 组合成一句话的 排序
     minSize: 1, // 节点组最小数量
     maxSize: 100, // 节点组最大数量
     canChange: false, // 是否允许调整数量
@@ -280,12 +305,19 @@ const updateVisible = (value: boolean) => {
   that.show = value;
 }
 const getConfig = () => {
-  console.log("that.configInfo",that.configInfo)
+  console.log("that.configInfo", that.configInfo)
   return that.configInfo;
 }
 const submit = () => {
   emit('submit', getConfig())
 }
+const setLangSort = () => {
+  sortDialogRef.value.init(that.configInfo.langSort)
+  sortDialogRef.value.show();
+}
+const langSortChange = (val) => {
+  that.configInfo.langSort = val;
+}
 onMounted(() => {
 })
 defineExpose({
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/SortDialog.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/SortDialog.vue
new file mode 100644
index 0000000..4126a8b
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/SortDialog.vue
@@ -0,0 +1,149 @@
+<template>
+
+  <div>
+    <el-dialog
+      v-model="that.showOrderByDialog"
+      draggable
+      append-to-body
+      width="50vw"
+      :close-on-click-modal="false"
+    >
+      <template #title>
+        <div>
+          {{ title }}
+        </div>
+      </template>
+      <template #default>
+        <div>
+          <div>
+            <div v-html="tips"></div>
+          </div>
+
+          <Draggable
+            style="display: flex; flex-direction: column; align-items: center;"
+            ghost-class="draggable-ghost"
+            item-key="_$key"
+            @change="propListChange"
+            handler=".order-by-item"
+            :list="that.propList"
+            :group="{ name: 'sortItem'}"
+            :animation="200"
+          >
+            <template #item="{ element,index }">
+              <div class="order-by-item">
+                <span style="padding: 4px">{{ index + 1 }}</span>
+                <span style="padding: 4px;">{{ showLabel(element) }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+
+</template>
+<script setup lang="ts" name="SortDialog">
+
+import {nextId} from "@/components/DraftDesign/utils/FuncUtil";
+import Draggable from 'vuedraggable'
+import '../icons/style.css'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '排序'
+  },
+  tips: {
+    type: String,
+    default: '拖动可排序'
+  }
+})
+const emit = defineEmits(['listChange'])
+const that = reactive({
+  propList: [],
+  showKey: '',
+  showOrderByDialog: false,
+  isString: false,
+})
+const propListChange = () => {
+  let res = []
+  let arr =JSON.parse( JSON.stringify(that.propList))
+  if(that.isString){
+    arr.forEach(item => {
+      res.push(item.label)
+    })
+  }else {
+    arr.forEach(item => {
+      //删除 _$key
+      delete item._$key
+      res.push(item)
+    })
+  }
+
+  emit('listChange', that.propList)
+}
+let showLabel = (el) => {
+  return el;
+}
+const show = () => {
+  that.showOrderByDialog = true
+}
+const close = () => {
+  that.showOrderByDialog = false
+}
+const init = (arr, showFunc = (el) => {
+  return el;
+}) => {
+  // 深拷贝
+  that.propList = JSON.parse(JSON.stringify([...(arr || [])]));
+  // 给每个元素添加一个 key
+  that.propList.forEach(item => {
+    console.log(item)
+    if(typeof item === 'string'){
+        item = {
+          _$key: nextId(),
+          label: item
+        }
+        that.isString = true
+    }else {
+      item['_$key'] = nextId()
+    }
+
+  })
+  showLabel = showFunc || showLabel
+}
+defineExpose({
+  init,
+  show,
+  close
+})
+
+</script>
+
+<style scoped lang="scss">
+@import "./layout/fontFamilyIcon.scss";
+
+.draggable-ghost {
+  background-color: rgba(39, 255, 169, 0.2);
+  outline-width: 0;
+  height: 38px;
+  box-sizing: border-box;
+  font-size: 0;
+  content: '';
+  overflow: hidden;
+  padding: 0;
+}
+
+.order-by-item:hover {
+  cursor: move;
+}
+
+.order-by-item {
+  margin: 6px;
+  border: 1px solid #8e8b8b;
+  width: 100%;
+  padding: 10px
+}
+
+</style>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/constant.ts b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/constant.ts
new file mode 100644
index 0000000..e06cf3e
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/config/constant.ts
@@ -0,0 +1,11 @@
+
+//   成分比例	1
+// 图文说明	2
+// 文字说明	3
+// 尺码	4
+export enum GroupTypeEnum {
+  RATIO = '1',
+  ICON = '2',
+  TEXT = '3',
+  SIZE = '4'
+}
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
index 7faa9e5..61074c3 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/index.vue
@@ -1159,6 +1159,7 @@ const getJson = () => {
     let canChange = prop.canChange === undefined ? false : prop.canChange;
     let canInput = prop.canInput === undefined ? false : prop.canInput;
     let linkChar = prop.linkChar === undefined ? ',' : prop.linkChar;
+    let langSort = prop.langSort === undefined ? [] : prop.langSort;
 
     if (combo) {
       min = Math.min(dataInfoList.length,min);
@@ -1178,6 +1179,7 @@ const getJson = () => {
       canChange: canChange,
       canInput: canInput,
       linkChar: linkChar,
+      langSort: langSort,
       shape: prop.shape,
       dataInfo: dataInfoList
     }
@@ -1454,11 +1456,12 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
   let canChange = false;
   let canInput = false;
   let linkChar = ',';
+  let langSort = [];
   for (let i = 0; i < that.pageConfig.propList.length; i++) {
     if (that.pageConfig.propList[i].groupId === cells[0].getData().propGroupId) {
       canChange = that.pageConfig.propList[i].canChange === true
       canInput = that.pageConfig.propList[i].canInput === true
-      linkChar = that.pageConfig.propList[i].linkChar || ','
+      langSort = that.pageConfig.propList[i].langSort || []
       break;
     }
   }
@@ -1473,6 +1476,7 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
     maxSize: max,
     canChange: canChange,
     canInput: canInput,
+    langSort: langSort,
     linkChar: linkChar,
     data: info.data, //节点是数据
     shape: info.shape,
diff --git a/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue b/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue
index 3607191..e4d5964 100644
--- a/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue
@@ -21,7 +21,16 @@
             />
           </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
@@ -131,13 +140,14 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ProductCareItemApi, ProductCareItemVO } from '@/api/oms/productcareitem'
 import ProductCareItemForm from './ProductCareItemForm.vue'
+import {buildQuery} from "@/utils/queryUtil";
 
 /** 产品保养项  列表 */
 defineOptions({ name: 'ProductCareItem' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-
+const route = useRoute() // 路由
 const loading = ref(true) // 列表的加载中
 const list = ref<ProductCareItemVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -145,6 +155,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   value: undefined,
+  type: undefined,
   iconUrl: undefined,
   brandIds: undefined,
   isCombo: undefined,
@@ -161,7 +172,12 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ProductCareItemApi.getProductCareItemPage(queryParams)
+
+    const data = await ProductCareItemApi.queryPage(buildQuery(queryParams,{
+      easyOption: "value@like,type@in",
+      orderBy: 'create_time desc',
+      ignoreField: "pageNo,pageSize"
+    }))
     list.value = data.list
     total.value = data.total
   } finally {
@@ -214,9 +230,21 @@ const handleExport = async () => {
     exportLoading.value = false
   }
 }
-
+let first_load = true;
 /** 初始化 **/
 onMounted(() => {
+   if(first_load){
+    first_load = false;
+    queryParams.type = route.query.type
+     if(queryParams.type){
+      queryParams.type = queryParams.type.split(',').map(String)
+    }
+    const tmp = route.query._add
+    if(tmp == 1){
+      // 删除 url的参数
+      openForm('create')
+    }
+  }
   getList()
 })
 </script>
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
index d8fe295..1b948b0 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -8,13 +8,18 @@
     append-to-body
     @close="updateVisible(false)">
     <div v-loading="that.loading">
-      <DesignPropEdit  ref="designPropEditRef" />
+      <DesignPropEdit ref="designPropEditRef"/>
     </div>
     <template #footer>
-        <span class="dialog-footer">
-        <el-button @click="updateVisible(false)">{{t("designInfo.cancelText")}}</el-button>
-        <el-button type="primary" @click="submit">{{ t("designInfo.auditSubmitText") }}</el-button>
-      </span>
+      <div style="display: flex;flex-direction: column;align-items: center">
+        <div>
+          <el-button @click="updateVisible(false)">{{ t("designInfo.cancelText") }}</el-button>
+          <el-button type="primary" @click="submit">{{
+              t("designInfo.auditSubmitText")
+            }}
+          </el-button>
+        </div>
+      </div>
     </template>
   </Dialog>
 </template>
@@ -24,47 +29,48 @@ import {ElAlert} from "element-plus";
 import {reactive, computed, watch} from 'vue'
 import {calculateVectorDifference} from "@/components/DraftDesign/utils/FuncUtil";
 import {useMessage} from "@/hooks/web/useMessage";
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+import {useI18n} from 'vue-i18n'
+
+const {t} = useI18n()
 const emit = defineEmits(['update:visible', 'submit'])
 const designPropEditRef = ref();
 const that = reactive({
   previewVisible: false,
   loading: false,
 })
-const updateVisible = (visible)=>{
+const updateVisible = (visible) => {
   that.previewVisible = visible;
 }
-const preview = (config,prop={})=>{
+const preview = (config, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.loadConfig(config,prop);
+  setTimeout(() => {
+    designPropEditRef.value.loadConfig(config, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
 // 预览产品id
-const previewByProductId = (id: string | number,prop={})=>{
+const previewByProductId = (id: string | number, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.previewByProductId(id,prop);
+  setTimeout(() => {
+    designPropEditRef.value.previewByProductId(id, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
 // 预览草稿设计id
-const previewByDraftDesignId = (id: string | number,prop={})=>{
+const previewByDraftDesignId = (id: string | number, prop = {}) => {
   updateVisible(true);
   that.loading = true;
-  setTimeout(()=>{
-    designPropEditRef.value.previewByDraftDesignId(config,prop);
+  setTimeout(() => {
+    designPropEditRef.value.previewByDraftDesignId(config, prop);
     that.loading = false;
-  },100)
+  }, 100)
 }
-const submit = ()=>{
+const submit = () => {
   useMessage().confirm(t('designInfo.auditTips')).then(async (r) => {
     const res = await designPropEditRef.value.getPropInfo()
-    emit("submit",res);
+    emit("submit", res);
     updateVisible(false)
   })
 
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
index 443d218..1227ffc 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -34,20 +34,20 @@
       </div>
 
       <el-row>
-        <el-col :span="11">
+        <el-col :span="8">
           <div
             :class="{ 'hidden-div': false }"
             style="width:100%;height: 580px; border: 1px solid #090805">
             <DraftDesign ref="draftDesignEditRef" @init-succeed="initSucceed"/>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="16">
           <div style="display: flex;">
 
             <div class="flex flex-col">
               <div>
                 <el-form label-width="180px">
-                  <el-form-item label="风格样式" v-show="that.draftDesignList.length > 1">
+                  <el-form-item label="Style" v-show="that.draftDesignList.length > 1">
                     <div class="flex ml-3">
                       <div>
                         <el-select class="min-w-100" v-model="that.draftDesignId"
@@ -64,29 +64,42 @@
                   </el-form-item>
                 </el-form>
               </div>
-              <div style="width: 100%"
-                   v-if="that.propOrderByList && that.propOrderByList.length > 0">
+              <div class="w-full" v-if="that.propOrderByList && that.propOrderByList.length > 0">
                 <el-scrollbar height="600px">
                   <el-form label-width="180px">
                     <el-form-item
-                      v-for="(tmp) in  that.propOrderByList"
+                      v-for="(tmp,orderIndex) in that.propOrderByList"
+
                       :key="tmp.key"
                       :label="getLabelName(that.propInfo[tmp.key])">
+                      <!--                      文本 -->
                       <div
-                        style="box-shadow: 0px 2px 5px 2px #dcdcdc;"
-                        v-if="that.propInfo[tmp.key].multiLanguage
-                         && that.propInfo[tmp.key].shape === ShapeType.vueTextCell">
+                        v-if="that.propInfo[tmp.key].shape === ShapeType.vueTextCell"
+                        style="box-shadow: 0px 2px 5px 2px #dcdcdc; width: 580px">
                         <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="padding: 4px"
+                            v-if="dl.locale === that.propInfo[tmp.key].dataInfo[0].locale">
                             <div style="display: flex;align-items: center;">
                           <span>
                             <i
+                              title="Input text"
                               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>
+                            <i
+                              v-else-if="!that.propInfo[tmp.key].canChange"
+                              class="icon-lk_cell_tree"
+                              style="font-size: 20px"> </i>
+                              <el-button link v-if="that.propInfo[tmp.key].canChange">
+                                 <i
+                                   title="addItem"
+                                   @click="appendList(tmp.key)"
+                                   class="icon-lk_cell_add"
+                                   style="font-size: 20px"> </i>
+                              </el-button>
                           </span>
-                              <div title="删除">
+                              <div title="remove">
                                 <el-button
                                   v-if="that.propInfo[tmp.key].canChange"
                                   type="danger"
@@ -95,27 +108,7 @@
                                   <i class="icon-lk_delete"> </i>
                                 </el-button>
                               </div>
-                                <el-autocomplete
-                              v-if="that.propInfo[tmp.key].canInput"
-                              v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
-                              :fetch-suggestions="querySearch"
-                              clearable
-                              class="inline-input w-50"
-                              placeholder="Please Input"
-                              @change="changeInput(i,tmp.key)"
-                              @select="changeData(i,tmp.key)"
-                            />
-                              <el-select-v2
-                                v-else
-                                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 v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO">
                                 <div
                                   style="display: flex;align-items: center; margin-left: 10px; width: 220px">
                                   <el-row>
@@ -124,152 +117,128 @@
                                     </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>
+                                          <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
+                                :class="{
+                                'error_tip': errorItem(tmp.key,i)
+                              }" v-if="that.propInfo[tmp.key].canInput">
+                                <el-autocomplete
+                                  style="min-width: 200px;width: 60%"
+                                  v-model="that.propInfo[tmp.key].dataInfo[i].showLabel"
+                                  :fetch-suggestions="querySearch"
+                                  clearable
+                                  class="inline-input w-50"
+                                  placeholder="Please Input"
+                                  @change="changeInput(i,tmp.key)"
+                                  @select="changeData(i,tmp.key)"
+                                />
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,i)">
+                                  {{ errorInfo(tmp.key, i) }}
+                                </div>
+                              </div>
+
+                              <div v-else :class="{  'error_tip': errorItem(tmp.key,i) }">
+                                <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)"
+                                  @select="handleSelect(i,tmp.key)"
+                                  size="large"
+                                  style="min-width: 280px;width: 100%"
+                                />
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,i)">
+                                  {{ errorInfo(tmp.key, i) }}
+                                </div>
+                              </div>
                             </div>
                           </div>
                         </template>
-
                         <el-button
                           v-if="that.propInfo[tmp.key].canChange"
                           @click="appendList(tmp.key)">
-                          添加
+                          addItem
                         </el-button>
-                      </div>
-
-                      <div v-else-if="!that.propInfo[tmp.key].isCombo">
-                        <div
-                          v-for="(text,index) in that.propInfo[tmp.key].dataInfo"
-                          :key="index"
-                          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>
-
-                            <el-autocomplete
-                              v-if="that.propInfo[tmp.key].canInput"
-                              v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                              :fetch-suggestions="querySearch"
-                              clearable
-                              class="inline-input w-50"
-                              placeholder="Please Input"
-                              @change="changeInput(index,tmp.key)"
-                              @select="changeData(index,tmp.key)"
-                            />
-                            <el-select-v2
-                              v-else
-                              v-model="that.propInfo[tmp.key].dataInfo[index].showLabel"
-                              filterable
-                              :options="getIngredientInfoListByType(that.propInfo[tmp.key].groupType)"
-                              placeholder="Please select"
-                              @change="changeData(index,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[index].ratio"
-                                      @change="changeData(index,tmp.key)"
-                                    />
-                                  </el-col>
-                                  <el-col :span="4">
-                                    <div> %</div>
-                                  </el-col>
-                                </el-row>
-                              </div>
-                            </div>
-                            <el-button
-                              type="danger"
-                                  link
-                              v-if="that.propInfo[tmp.key].canChange"
-                              @click="deleteList(tmp.key,index)">
-                              <i class="icon-lk_delete"> </i>
-                            </el-button>
+                        <el-button
+                          type="primary"
+                          plain
+                          v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO && !that.propInfo[tmp.key].parentId"
+                          @click="appendGroup(orderIndex,tmp.key)">
+                          <i class="icon-lk_add"></i>
+                          addCompositionGroup
+                        </el-button>
+                        <el-button
+                          type="danger"
+                          link
+                          v-if="that.propInfo[tmp.key].groupType === GroupTypeEnum.RATIO && that.propInfo[tmp.key].parentId"
+                          @click="delGroup(orderIndex,tmp.key)">
+                          <div>
+                            <i class="icon-lk_delete"> </i>
+                            removeGroup
                           </div>
-                        </div>
-
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange"
-                          @click="appendList(tmp.key)">
-                          添加
                         </el-button>
                       </div>
 
-                      <div  style="box-shadow: 0px 2px 5px 2px #dcdcdc;" v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage">
-<!--                        功能待完善-->
+                      <!--                      image -->
+                      <div
+                        v-else-if="that.propInfo[tmp.key].shape === ShapeType.vueShapeImage"
+                        style="box-shadow: 0px 2px 5px 2px #dcdcdc;">
+
                         <div
                           v-for="(img,index) in that.propInfo[tmp.key].dataInfo"
                           :key="index" style="display: flex">
-
                           <div class="img-box" v-if="img.url">
-                            <div style="display: flex">
-                              <img :src="img.url" width="60px" height="60px"/>
-                               <div>
-                             <el-button
-                               type="danger"
-                                link
-                                v-if="false &&  that.propInfo[tmp.key].canChange && img.url "
-                                 @click="deleteImgList(tmp.key,index)">
-                            <i class="icon-lk_delete"> </i>
-                          </el-button>
-                          </div>
-                              <el-select-v2
-                                v-model="that.propInfo[tmp.key].dataInfo[0].showLabel"
-                                filterable
-                                :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
-                                placeholder="Please select"
-                                @change="changeComboData(that.propInfo[tmp.key],that.propInfo[tmp.key].dataInfo[index].showLabel)"
-                                size="large"
-                                style="min-width: 280px;width: 100%"
-                              >
-                                <template #default="{ item }">
-                                  <div style="display: flex;">
-                                    <img :src="item.url" width="30px" height="30px"/>
-                                    <span>
-                                {{ item.label }}
-                              </span>
-                                  </div>
-                                </template>
-                              </el-select-v2>
+                            <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"
+                                  filterable
+                                  :options="washingInfoListByType(that.propInfo[tmp.key].groupType)"
+                                  placeholder="Please select"
+                                  clearable
+                                  @change="changeIconData(index,tmp.key)"
+                                  @select="handleSelect(i,tmp.key)"
+                                  :defaultValue="''"
+                                  :no-match-text="'Data Empty'"
+                                  size="large"
+                                  style="min-width: 280px;width: 100%"
+                                >
+                                  <template #default="{ item }">
+                                    <div style="display: flex;">
+                                      <img :src="item.url" width="30px" height="30px"/>
+                                      <span>
+                                        {{ item.label }}
+                                    </span>
+                                    </div>
+                                  </template>
+                                </el-select-v2>
+                                <div style="color: #ff0000" v-if="errorItem(tmp.key,index)">
+                                  {{ errorInfo(tmp.key, index) }}
+                                </div>
+                              </div>
                             </div>
                           </div>
-                          <div v-else-if="img.label">
-                            <el-input v-model="img.label" disabled/>
-                          </div>
-
                         </div>
-                        <el-button
-                          v-if="that.propInfo[tmp.key].canChange && false"
-                          @click="appendImageList(tmp.key)">
-                          添加
-                        </el-button>
-
                       </div>
 
                     </el-form-item>
@@ -285,7 +254,7 @@
     </div>
 
     <div
-      :class ="{ 'hidden-div': that.hideCreate}"
+      :class="{ 'hidden-div': that.hideCreate}"
       :id="that.svgId"
       :style="{
             position: that.hideCreate ?  'fixed' : 'relative',
@@ -307,15 +276,17 @@
           }"
       >
 
-      <div>
-        <div v-if="false" style="color: #ff0000;">w:{{imageSize.width}} h:{{imageSize.height}}</div>
-         <span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
+        <div>
+          <div v-if="false" style="color: #ff0000;">w:{{ imageSize.width }}
+            h:{{ imageSize.height }}
+          </div>
+          <span style="color: #ff0000;writing-mode: vertical-rl; text-orientation: upright;">
           *仅供参考
         </span>
-      </div>
+        </div>
       </div>
       <div
-        v-if="that.previewUrl" v-html="that.previewUrl" >
+        v-if="that.previewUrl" v-html="that.previewUrl">
       </div>
     </div>
   </div>
@@ -336,6 +307,7 @@ import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
 import {usePageLoading} from "@/hooks/web/usePageLoading";
+import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
 
 const {loadStart, loadDone} = usePageLoading()
 // 动态属性配置
@@ -380,9 +352,10 @@ const that = reactive({
   show: false,
   svgHeight: 0,
   svgWidth: 0,
+  errorList: [],
 })
 
-const previewSize = computed(()=>{
+const previewSize = computed(() => {
   return {
     width: imageSize.value.width * 10,
     height: imageSize.value.height * 10
@@ -393,7 +366,6 @@ watch(() => that.currentZoom, () => {
   showPng();
 })
 const querySearch = (queryString: string, cb: any) => {
-
   const results = queryString ? that.ingredientInfoList.filter((item: any) => {
     return item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
   }) : that.ingredientInfoList
@@ -411,6 +383,26 @@ const imageSize = computed(() => {
     height: 10
   }
 })
+const errorKeys = computed(() => {
+  if (that.errorList && that.errorList.length > 0) {
+    return that.errorList.map(item => item.key)
+  }
+  return [];
+})
+const errorItem = (key, index) => {
+  console.log("errorKeys", errorKeys)
+  return errorKeys.value.includes(`${key}_${index}`)
+}
+const errorInfo = (key, index) => {
+  if (that.errorList && that.errorList.length > 0) {
+    for (let i = 0; i < that.errorList.length; i++) {
+      if (that.errorList[i].key === `${key}_${index}`) {
+        return that.errorList[i].message
+      }
+    }
+  }
+  return ''
+}
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
     zIndex: 9999999,
@@ -430,14 +422,21 @@ const initSucceed = () => {
   showPng();
   emit('initSucceed')
 }
-const changeInput =(index: number, key: string)=>{
+const changeInput = (index: number, key: string) => {
 
-    if(!that.propInfo[key].dataInfo[index].showLabel){
-      useMessage().notifyWarning('请输入'+getLabelName(that.propInfo[key]));
-      return;
-    }
-    that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
-    resetData();
+  if (!that.propInfo[key].dataInfo[index].showLabel) {
+    useMessage().notifyWarning('请输入' + getLabelName(that.propInfo[key]));
+    return;
+  }
+  that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
+  resetData();
+}
+const handleSelect = (index: number, key: string) => {
+  const info = that.propInfo[key];
+  that.propInfo[key].dataInfo[index] = {
+    key: "t_" + Math.random().toString(36).substring(2),
+    ...info.dataInfo[index],
+  }
 }
 const changeData = (index: number, key: string) => {
 
@@ -447,77 +446,113 @@ const changeData = (index: number, key: string) => {
   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;
   let m1 = mapping[allData[0].showLabel]
-  if(m1){
+  console.log("m1:", m1)
+  if (m1) {
+    that.propInfo[key].langList = [...m1]
     let ratio = allData[0].ratio
     for (let i = 0; i < allData.length; i++) {
 
-      if(i>0 && allData[i].locale === fLang){
+      if (i > 0 && allData[i].locale === fLang) {
         ratio = allData[i].ratio
         m1 = mapping[allData[i].showLabel]
+        console.log("m2", m1)
+        if (m1) {
+          that.propInfo[key].langList.push(...m1)
+        }
+
       }
-      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 = ''
+      if (m1) {
+        for (let j = 0; j < m1.length; j++) {
+          if (allData[i].locale === m1[j].locale) {
+            let str = ratio;
+            if (str === null || str === undefined || str === -1) {
+              str = ''
+            }
+            allData[i].label = `${m1[j].value}`.replaceAll('${r}', `${str}`)
+            break;
           }
-          allData[i].label=  `${m1[j].value}`.replaceAll('${r}', `${str}`)
-          break;
         }
       }
     }
-
     that.propInfo[key].dataInfo = [...allData];
-
-    console.log("allData",allData)
+    console.log("allData", allData)
     resetData();
   }
 
 }
-const changeComboData = (index: number, key: string) => {
-  const info = that.propInfo[key];
-  const infoList = getIngredientInfoListByType(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[1].locale;
-  let m1 = mapping[allData[1].showLabel]
-  if(m1){
-    let ratio = allData[1].ratio
-    for (let i = 0; i < allData.length; i++) {
+const changeIconData = (index: number, key: string) => {
 
-      if(i>0 && allData[i].locale === fLang){
-        ratio = allData[i].ratio
-        m1 = mapping[allData[i].showLabel]
-      }
-      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 = ''
-          }
-          allData[i].label=  `${m1[j].value}`.replaceAll('${r}', `${str}`)
-          break;
-        }
+  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;
+    let m1 = mapping[allData[0].showLabel]
+    let url = infoList[0].url
+
+    for (let i1 = 0; i1 < infoList.length; i1++) {
+      if (infoList[i1].value === allData[0].showLabel) {
+        url = infoList[i1].url
+        break;
       }
     }
+    allData[0].url = url
+    if (m1) {
 
-    that.propInfo[key].dataInfo = [...allData];
+      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].showLabel]
+          for (let i1 = 0; i1 < infoList.length; i1++) {
+            if (infoList[i1].value === allData[i].showLabel) {
+              url = infoList[i1].url
+              allData[0].url = url
+              break;
+            }
+          }
+        }
+        if (m1) {
+          let langObj = {};
+          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}`)
+              }
 
-    console.log("allData",allData)
-    resetData();
+            }
+          }
+        }
+
+      }
+
+      that.propInfo[key].dataInfo = [...allData];
+      resetData();
+    }
   }
+
 }
 
 const washingInfoListByType = (type) => {
@@ -530,13 +565,13 @@ const uploadFile = async (fileName) => {
   return new Promise((resolve, reject) => {
 
     let svgElement = document.getElementById(that.svgId);
-    domtoimage.toBlob(svgElement,{
-      width: that.svgWidth+5,
-      height: that.svgHeight+5,
+    domtoimage.toBlob(svgElement, {
+      width: that.svgWidth + 5,
+      height: that.svgHeight + 5,
       type: 'image/jpeg',
       quality: 1
     }).then((blob) => {
-      const file = new File([blob], fileName, { type: 'image/jpeg' });
+      const file = new File([blob], fileName, {type: 'image/jpeg'});
       FileApi.updateFile({file: file})
         .then((res) => {
           if (res.code === 0) {
@@ -556,116 +591,91 @@ const uploadFile = async (fileName) => {
   });
 }
 const deleteImgList = (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[1].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 deleteList = (key, index) => {
-  const item = JSON.parse(JSON.stringify(that.propInfo[key]))
-  const group =  findGroup(key,that.propInfo)
+  const item = cloneDeep(that.propInfo[key])
+
+  const group = findGroup(key, that.propInfo)
   const keys = Object.keys(group);
 
-  if(keys.length > 1){
+  if (keys.length > 1) {
     console.log(index)
     // 删除同一组数据
-    const firstLang =  item.dataInfo[0].locale
+    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){
+      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)){
+      if (!indexs.includes(i)) {
         newArr.push(that.propInfo[key].dataInfo[i])
       }
     }
     that.propInfo[key].dataInfo = [...newArr]
     resetData();
-  }else {
+  } else {
     useMessage().notifyWarning("至少需要一个变量")
     return;
   }
 
 }
 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();
+  //  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)
-  const group =  findGroup(key,that.propInfo)
+  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)
+  console.log("keys", keys)
   // 有多少组变量
-  if(keys.length >= item.maxSize ){
-    useMessage().notifyWarning("最大数量为:"+item.maxSize)
+  if (keys.length >= item.maxSize) {
+    useMessage().notifyWarning("最大数量为:" + item.maxSize)
     return;
   }
-  const locale =  item.dataInfo[0].locale
+  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;
-     }
+    if (i > 0 && tmpArr[i].locale === locale) {
+      break;
+    }
     item.dataInfo.push(
       {
+        key: "t_" + Math.random().toString(36).substring(2),
         label: '',
         url: '',
         ratio: 0,
@@ -675,6 +685,57 @@ const appendList = (key) => {
   }
   resetData();
 }
+const findGroupTypeCount = (type) => {
+  const keys = Object.keys(that.propInfo);
+  let count = 0;
+  for (let i = 0; i < keys.length; i++) {
+    if (that.propInfo[keys[i]].groupType === type) {
+      count++;
+    }
+  }
+  return count;
+}
+const appendGroup = (index, key) => {
+
+// { "key": "gpc8wfjwd04s_893a74", "name": "L1_1", "shape": "vue-node_text_cell", "isCombo": false }
+  const gId = "g_" + Math.random().toString(36).substring(2);
+  // 查询成分有多少组
+  let count = findGroupTypeCount(GroupTypeEnum.RATIO);
+  if (count > 16) {
+    useMessage().notifyWarning("最多添加16组")
+    return;
+  }
+
+  for (let i = 0; i < that.propOrderByList.length; i++) {
+    // 找到最后一个位置
+    if (that.propOrderByList[i].groupType === GroupTypeEnum.RATIO) {
+      index = i;
+    }
+  }
+  count++;
+  const info = cloneDeep(that.propOrderByList[index]);
+  // 插入到 index 后面
+  const insertIndex = Math.min(index + 1, that.propOrderByList.length)
+  that.propOrderByList.splice(insertIndex, 0, {
+    ...info,
+    key: gId,
+    name: 'CompositionGroup_' + count,
+    groupType: GroupTypeEnum.RATIO,
+  })
+  that.propInfo[gId] = cloneDeep(that.propInfo[key])
+  that.propInfo[gId].groupName = that.propInfo[key].groupName + '_' + count;
+  that.propInfo[gId].parentId = that.propInfo[key].groupName;
+  console.log("that.propInfo[gId]", that.propOrderByList)
+}
+const delGroup = (orderIndex, key) => {
+  useMessage().confirm("是否删除该组变量?").then((res) => {
+    if (res) {
+      that.propOrderByList.splice(orderIndex, 1);
+      delete that.propInfo[key]
+    }
+  })
+
+}
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -743,7 +804,7 @@ const queryUseLabel = (label) => {
     }).then((data) => {
       that.ingredientInfoList = [];
       if (data.list) {
-
+        // 文字说明
         that.ingredientInfoList = data.list.map((item) => {
           return {
             value: item.value,
@@ -754,6 +815,8 @@ const queryUseLabel = (label) => {
             url: ''
           }
         })
+        //
+        console.log("lables",that.propInfo)
       }
     })
     ProductCareItemApi.queryList({
@@ -766,7 +829,7 @@ const queryUseLabel = (label) => {
       type: '2'
     }).then((data) => {
       that.washingInfoList = [];
-
+      // 洗水唛图标
       if (data.list) {
         that.washingInfoList = data.list.map((item) => {
           return {
@@ -796,6 +859,7 @@ const showPng = () => {
           ...that.propInfo || {},
           ...that.restInfo || {},
         };
+        console.log("that.propInfo",that.propInfo)
         that.propOrderByList = info.propOrderByList;
         loading.value = false;
       }, {
@@ -813,14 +877,14 @@ const resetData = () => {
     that.changeCount++;
   }
 }
-const findGroup = (key,propInfo)=>{
-  let groupArr= [];
+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){
+    if (l > index && propInfo[key].dataInfo[l].locale === firstLang) {
       index = l;
       groupArr = []
     }
@@ -834,88 +898,382 @@ const findGroup = (key,propInfo)=>{
  * @param key
  * @param propInfo
  */
-const findGroupAllLang = (key,propInfo)=>{
-  const langList = [];
-  let firstLang = propInfo[key].dataInfo[0].locale
+const findGroupAllLang = (key, propInfo) => {
+  const tmpList = [];
   for (let l = 0; l < propInfo[key].dataInfo.length; l++) {
-    // 数据分组
-    if(l > 0 && propInfo[key].dataInfo[l].locale === firstLang){
-     break;
+    if (tmpList.includes(propInfo[key].dataInfo[l].locale)) {
+      continue;
     }
-    langList.push(propInfo[key].dataInfo[l].locale)
+    tmpList.push(propInfo[key].dataInfo[l].locale)
   }
-  return langList
+  return tmpList
 }
-const checkPropInfo = (info)=>{
-  return new Promise((resolve,reject)=>{
-    let newInfo = JSON.parse(JSON.stringify(info))
+const checkPropInfo = (info) => {
+  return new Promise((resolve, reject) => {
+    let newInfo = cloneDeep(info)
+    let newInfo2 = cloneDeep(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;
-        const linkChar = newInfo[key].linkChar || ',';
+      const allLang = findGroupAllLang(key, newInfo2);
+      const firstLang = newInfo[key].dataInfo[0].locale;
+      const linkChar = newInfo[key].linkChar || '';
+      const dataInfoArr = newInfo[key].dataInfo;
+      let langList = newInfo[key].langList || [];
+      if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
+        console.log("GroupTypeEnum.RATIO", newInfo[key])
 
-        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]};
-            }
+        // 获取到所以的成分
+        let langSort = newInfo[key].langSort || [];
+        if (langSort.length === 0) {
+          langSort = allLang
+        }
+        // 获取第一个的比例
+        let str = newInfo[key].dataInfo[0].ratio;
+        let ratioConfig = [];
+        let maxRatio = str;
+        for (let j = 0; j < newInfo[key].dataInfo.length; j++) {
+          ratioConfig.push({
+            ratio: newInfo[key].dataInfo[j].ratio,
+            locale: newInfo[key].dataInfo[j].locale
+          });
+          if (newInfo[key].dataInfo[j].ratio > maxRatio) {
+            useMessage().alert(getLabelName(newInfo[key]) + "违反含有量的成分比例,由大到小依序排列")
           }
         }
-        if(newInfo[key].groupType === '1'){
-          if(rInfo != 100){
-            useMessage().notifyError(`成分占比应该是100%,当前只有${rInfo}%`);
-            reject(`成分占比应该是100%,当前只有${rInfo}%`)
+        let ratioIndex = 0;
+        if (str === null || str === undefined || str === -1) {
+          str = ''
+        }
+        let mergeLabel = [];
+        let checked = false; //是否校验
+        for (let j = 0; j < langSort.length; j++) {
+          const labelInfo = []
+          let allRatio = 0; // 累计 比例
+          for (let k = 0; k < langList.length; k++) {
+            if (langSort[j] === langList[k].locale) {
+              let tmpValue = `${langList[k].value}`.replaceAll('${r}', `${str}`)
+              ratioIndex++;
+              ratioIndex = ratioIndex % dataInfoArr.length
+              str = dataInfoArr[ratioIndex].ratio;
+              if (str === null || str === undefined || str === -1) {
+                str = ''
+              }
+              mergeLabel.push(tmpValue)
+            }
+          }
+          let flag = false;
+          // 校验
+          for (let k = 0; k < dataInfoArr.length; k++) {
+            if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+              flag = true;
+              if (!checked) {
+                // 成分占比
+                allRatio += dataInfoArr[k].ratio ? dataInfoArr[k].ratio : 0
+                console.log("allRatio", allRatio)
+                if (allRatio > 100) {
+                  useMessage().notifyError("占比之和不能超过100,实际为：" + allRatio);
+                  that.errorList.push({
+                    key: `${key}_${k}`,
+                    message: "占比之和不能超过100，实际为：" + allRatio
+                  })
+                  reject("占比之和不能超过100")
+                  return
+                }
+                if (labelInfo.includes(dataInfoArr[k].showLabel)) {
+                  useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                  that.errorList.push({
+                    key: `${key}_${k}`,
+                    message: "数据重复"
+                  })
+                  reject("数据重复")
+                  return
+                }
+              }
+              labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+            }
+          }
+          // 第一次校验
+          if (flag && !checked && allRatio < 100) {
+            useMessage().notifyError(`${newInfo[key].groupName} 中占比希望是100%,实际是${allRatio}`);
+            that.errorList.push({
+              key: `${key}_${dataInfoArr.length - 1}`,
+              message: "成分不足100%"
+            })
+            reject("成分占比为" + allRatio)
             return
           }
+          if (flag && !checked) {
+            checked = true
+          }
+
         }
-        if(row){
-          row.label = str.join(linkChar);
-          newArr.push(row);
+
+        const mergeLabelStr = mergeLabel.join(linkChar);
+        let parentStr = '';
+        console.log("组合的一句话", mergeLabelStr)
+        let newKey = key;
+        if (newInfo[key].parentId) {
+          for (let j = 0; j < keys.length; j++) {
+            const kKey = keys[j];
+            if (newInfo[kKey].groupName === newInfo[key].parentId) {
+              newKey = kKey;
+              parentStr = newInfo[kKey].dataInfo[0].label + '<br/>'
+
+              break;
+            }
+          }
+        }
+        newInfo[newKey].dataInfo = [{
+          ...newInfo[newKey].dataInfo[0],
+          label: parentStr + mergeLabelStr
+        }];
+
+        //   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: ''
+                    };
+                  }
+                }
+
+              }
+            } 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: ''
+                    };
+                  }
+                }
+              }
+            }
+            if (row) {
+              row.label = str.join(linkChar);
+              newArr.push(row);
+            }
+          }
+          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 = []
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale && newInfo[key].dataInfo[k].showLabel) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+              // 校验重复
+              for (let k = 0; k < dataInfoArr.length; k++) {
+                if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+                  if (newInfo[key].dataInfo[k].showLabel) {
+                    if (labelInfo.includes(newInfo[key].dataInfo[k].showLabel)) {
+                      useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                      that.errorList.push({
+                        key: `${key}_${k}`,
+                        message: "数据重复"
+                      })
+                      reject("数据重复")
+                      return
+                    }
+                    labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+                  }
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            const newArr = [{
+              ...newInfo[key].dataInfo[0],
+              label: mergeLabelStr
+            }]
+            newInfo[key].dataInfo = newArr;
+          } else if (newInfo[key].groupType === GroupTypeEnum.SIZE) {
+            let langSort = newInfo[key].langSort || [];
+            if (langSort.length === 0) {
+              langSort = allLang
+            }
+
+            let mergeLabel = [];
+            for (let j = 0; j < langSort.length; j++) {
+              const labelInfo = []
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+              // 校验重复
+              for (let k = 0; k < dataInfoArr.length; k++) {
+                if (langSort[j] === newInfo[key].dataInfo[k].locale) {
+                  if (labelInfo.includes(newInfo[key].dataInfo[k].showLabel)) {
+                    useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                    that.errorList.push({
+                      key: `${key}_${k}`,
+                      message: "数据重复"
+                    })
+                    reject("数据重复")
+                    return
+                  }
+                  labelInfo.push(newInfo[key].dataInfo[k].showLabel)
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            const newArr = [{
+              ...newInfo[key].dataInfo[0],
+              label: mergeLabelStr
+            }]
+            newInfo[key].dataInfo = newArr;
+          } else if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
+            //
+          } else if (newInfo[key].groupType === GroupTypeEnum.ICON) {
+
+            // 查询所有的icon
+            const dis = [];
+             const keys = Object.keys(that.propInfo);
+            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( dis.includes(that.propInfo[tmpKey2].dataInfo[0].showLabel)){
+                  useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
+                  that.errorList.push({
+                    key: `${tmpKey2}_${0}`,
+                    message: "数据重复"
+                  })
+                  reject("数据重复")
+                  return
+                  }
+                   dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
+                }
+
+              }
+            }
+            const infoList = washingInfoListByType(newInfo[key].groupType)
+            let mapping = {}
+            for (let i = 0; i < infoList.length; i++) {
+              mapping[infoList[i].label] = infoList[i].langMapping;
+            }
+            const keyList = Object.keys(newInfo);
+            const allIcon = [];
+            for (let j = 0; j < keyList.length; j++) {
+              for (let k = 0; k < newInfo[keyList[j]].dataInfo.length; k++) {
+                if (newInfo[keyList[j]].dataInfo[k].url) {
+                  allIcon.push(newInfo[keyList[j]].dataInfo[k].showLabel)
+                }
+              }
+            }
+            langList = [];
+            for (let j = 0; j < allIcon.length; j++) {
+              const m1 = mapping[allIcon[j]];
+              if (m1) {
+                langList.push(...m1)
+              }
+            }
+            let langSort = newInfo[key].langSort || [];
+            if (langSort.length === 0) {
+              langSort = allLang
+            }
+            let str = newInfo[key].dataInfo[0].ratio;
+            if (str === null || str === undefined || str === -1) {
+              str = ''
+            }
+            let mergeLabel = [];
+            for (let j = 0; j < langSort.length; j++) {
+              for (let k = 0; k < langList.length; k++) {
+                if (langSort[j] === langList[k].locale) {
+                  mergeLabel.push(langList[k].value)
+                }
+              }
+            }
+            const mergeLabelStr = mergeLabel.join(linkChar);
+            console.log("组合的一句话", mergeLabelStr)
+            // 其他的label 不显示
+            const newArr = cloneDeep(newInfo[key].dataInfo);
+            let resArr = [];
+            for (let j = 0; j < newArr.length; j++) {
+              // 如果没有选择的不显示
+              if (newArr[j].label && newArr[j].showLabel) {
+                newArr[j].label = i === 0 ? mergeLabelStr : ''
+                resArr.push(newArr[j])
+              }
+            }
+            newInfo[key].dataInfo = resArr;
+          }
         }
       }
-      newInfo[key].dataInfo = newArr;
 
     }
     resolve(newInfo)
   });
 }
+const cloneDeep = (obj) => {
+  return JSON.parse(JSON.stringify(obj))
+}
 const updateDesign = () => {
+  that.errorList = []
   that.changeCount = 0;
   // 记录变更的数据
   that.restInfo = {...that.propInfo}
-  checkPropInfo(that.propInfo).then(newInfo=>{
-    //
-    console.log("that.restInfo",that.restInfo)
+  checkPropInfo(that.propInfo).then(newInfo => {
+    that.pageConfig.propOrderByList = that.propOrderByList
+    console.log("that.restInfo@@", that)
     draftDesignEditRef.value.init(false, that.pageConfig, that.data, newInfo)
   })
 }
@@ -926,7 +1284,11 @@ const changeType = () => {
 const getPropInfo = () => {
   // 预览数据 保持缩放
   return new Promise((resolve) => {
-    checkPropInfo(that.propInfo).then(r =>{
+    that.errorList = []
+    that.changeCount = 0;
+    that.restInfo = {...that.propInfo}
+    checkPropInfo(that.propInfo).then(r => {
+      that.pageConfig.propOrderByList = that.propOrderByList
       that.pageLoading = ElLoading.service({
         lock: true,
         text: '数据传输中...',
@@ -936,15 +1298,15 @@ const getPropInfo = () => {
       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)');
+        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%';
 
-          const dom =  document.querySelector(`#${that.svgId} svg .x6-graph-svg-viewport`).getBoundingClientRect()
-          const svgDom =  document.querySelector(`#${that.svgId} svg`).getBoundingClientRect()
+          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`;
@@ -1036,4 +1398,9 @@ defineExpose({
     height: 60px;
   }
 }
+
+.error_tip {
+  box-shadow: rgb(255, 0, 0) 0px 0px 2px 1px;
+
+}
 </style>
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
index c5b7cab..a016906 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
@@ -1,119 +1,139 @@
 <template>
-  <el-dialog
-    v-model="that.show"
-    title="动态属性配置"
-    width="60vw"
-    top="2%"
-    draggable
-    append-to-body
-    @close="updateVisible(false)">
-    <div style="width: 100%; max-height: 75vh">
-      <el-alert
-        title="动态属性配置说明"
-        type="info"
-        :closable="false"
-        show-icon
-        style="margin-bottom: 10px"
-      >
-        "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
-      </el-alert>
-      <el-form>
-        <el-row style="min-width: 900px">
-          <el-col :span="6" :xs="12">
-            <el-form-item label="组名称">
-              <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6" :xs="12">
-            <el-form-item label="组id">
-              <el-input v-model="that.configInfo.groupId" disabled/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item label="保养类型" >
-          <el-select v-model="that.configInfo.groupType" :disabled="that.configInfo.isCombo">
-            <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-form-item>
-<!--       停用 -->
-        <el-form-item label="控制" >
-          <div style="width: 800px">
-            <el-row>
-            <el-col :span="6">
-             <div style="width: 120px;display: flex">
-               <el-checkbox
-                 v-model="that.configInfo.canChange">
-               <span>允许调整数量</span>
-               </el-checkbox>
-             </div>
+  <div>
+    <SortDialog ref="sortDialogRef" @list-change="langSortChange"/>
+    <el-dialog
+      v-model="that.show"
+      title="动态属性配置"
+      width="60vw"
+      top="2%"
+      draggable
+      append-to-body
+      :close-on-click-modal="false"
+      @close="updateVisible(false)">
+      <div style="width: 100%; max-height: 75vh">
+        <el-alert
+          title="动态属性配置说明"
+          type="info"
+          :closable="false"
+          show-icon
+          style="margin-bottom: 10px"
+        >
+          "位置信息配置为节点的位置信息。如：添加了3个配置数据这时会依次添加到对应位置上。从而实现动态属性配置。"
+        </el-alert>
+        <el-form>
+          <el-row style="min-width: 900px">
+            <el-col :span="6" :xs="12">
+              <el-form-item label="组名称">
+                <el-input v-model="that.configInfo.groupName" placeholder="请输入组名称"/>
+              </el-form-item>
             </el-col>
+            <el-col :span="6" :xs="12">
+              <el-form-item label="组id">
+                <el-input v-model="that.configInfo.groupId" disabled/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="护理类型">
+            <el-select v-model="that.configInfo.groupType" :disabled="that.configInfo.isCombo">
+              <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-form-item>
+          <!--       停用 -->
+          <el-form-item label="控制">
+            <div style="width: 800px">
+              <el-row>
+                <el-col :span="6">
+                  <div style="width: 120px;display: flex">
+                    <el-checkbox
+                      v-model="that.configInfo.canChange">
+                      <span>允许调整数量</span>
+                    </el-checkbox>
+                  </div>
+                </el-col>
 
-            <el-col :span="6">
-             <div style="width: 120px;display: flex">
-               <el-checkbox :disabled="disableInput"
-                 v-model="that.configInfo.canInput">
-                <span>允许输入值</span>
-               </el-checkbox>
-             </div>
-            </el-col>
-              <el-col :span="12">
-               <el-tooltip
-                content="输入多个变量时的连接字符,使用<br/> 变量进行换行"
-               >
-                <div style="display:flex;">
-                  <div>变量链接符</div>
-                    <div>
-                      <el-input v-model="that.configInfo.linkChar" clearable maxlength="6" placeholder="请输入连接符" show-word-limit />
+                <el-col :span="6">
+                  <div style="width: 120px;display: flex">
+                    <el-checkbox :disabled="disableInput"
+                                 v-model="that.configInfo.canInput">
+                      <span>允许输入值</span>
+                    </el-checkbox>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <el-tooltip
+                    content="输入多个变量时的连接字符,使用<br/> 变量进行换行"
+                  >
+                    <div style="display:flex;">
+                      <div>变量链接符</div>
+                      <div>
+                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"
+                                  placeholder="请输入连接符" show-word-limit/>
+                      </div>
+                      <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
                     </div>
-                  <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
-                </div>
-               </el-tooltip>
-            </el-col>
-          </el-row>
-          </div>
-        </el-form-item>
-        <el-form-item label="数量">
-          <el-row>
-            <el-col :span="11">
-              min
-              <el-input-number
-                v-model="that.configInfo.minSize"
-                :min="1"
-                :max="that.configInfo.maxSize"
-                :disabled="that.configInfo.shape"/>
-            </el-col>
-            <el-col :span="11">
-              max
-              <el-input-number
-                v-model="that.configInfo.maxSize" :min="that.configInfo.shape ? 3 : 1"/>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="位置信息">
+                  </el-tooltip>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form-item>
+          <el-form-item label="数量">
+            <el-row>
+              <el-col :span="11">
+                min
+                <el-input-number
+                  v-model="that.configInfo.minSize"
+                  :min="1"
+                  :max="that.configInfo.maxSize"
+                  :disabled="that.configInfo.shape"/>
+              </el-col>
+              <el-col :span="11">
+                max
+                <el-input-number
+                  v-model="that.configInfo.maxSize" :min="that.configInfo.shape ? 3 : 1"/>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item label="位置信息">
 
-          <div style="display: flex;flex-direction: column">
-            <div>
-              <el-checkbox v-model="that.configInfo.multiLanguage">多语言对照,开启后语言匹配到对应位置上</el-checkbox>
-            </div>
-            <div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
-              <el-button @click="append(1)">追加</el-button>
-              <el-button @click="append(10)">追加10个</el-button>
-              <el-button type="danger" @click="delLast">删除</el-button>
-            </div>
-            <div v-else-if="!that.configInfo.isCombo">
-              <span style="font-size: 0.8rem;color: #7c7b7b">两个或者以上允许追加更多位置信息</span>
-            </div>
+            <div style="display: flex;flex-direction: column">
+              <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>
+              <div v-if="!that.configInfo.isCombo && that.configInfo.pointList.length > 1">
+                <el-button @click="append(1)">追加</el-button>
+                <el-button @click="append(10)">追加10个</el-button>
+                <el-button type="danger" @click="delLast">删除</el-button>
+              </div>
+              <div v-else-if="!that.configInfo.isCombo">
+                <span
+                  style="font-size: 0.8rem;color: #7c7b7b">两个或者以上允许追加更多位置信息</span>
+              </div>
               <el-table :data="that.configInfo.pointList" style=" box-shadow: 2px 0 0 1px #eee; ">
                 <el-table-column label="序号" width="60">
                   <template #default="scope">
                     <span>{{ scope.$index + 1 }}</span>
                     <span v-if="that.configInfo.isCombo" style="padding-right: 4px">
-                     {{scope.$index !== 0  ? '' : '-icon' }}
+                     {{ scope.$index !== 0 ? '' : '-icon' }}
                    </span>
                   </template>
                 </el-table-column>
@@ -129,7 +149,8 @@
                 </el-table-column>
                 <el-table-column label="语言" width="180" v-if="that.configInfo.multiLanguage">
                   <template #default="scope">
-                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale" placeholder="请选择语言标识">
+                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"
+                               placeholder="请选择语言标识">
                       <el-option
                         v-for="dict in languageOptions"
                         :key="`${dict.value}`"
@@ -142,7 +163,8 @@
                 <el-table-column label="文本" width="180">
                   <template #default="scope">
                     <div>
-                      <div v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
+                      <div
+                        v-if="that.configInfo.pointList[scope.$index].dataInfo.locale === '_$value'">
                         表达式
                       </div>
                       <div v-else>
@@ -153,7 +175,7 @@
                           placement="top"
                         >
                       <span class="line-clamp-1">
-                        {{ that.configInfo.pointList[scope.$index].dataInfo.label}}
+                        {{ that.configInfo.pointList[scope.$index].dataInfo.label }}
                       </span>
                         </el-tooltip>
                       </div>
@@ -162,17 +184,18 @@
                   </template>
                 </el-table-column>
               </el-table>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
-    <template #footer>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
       <span class="dialog-footer">
         <el-button @click="updateVisible(false)">取消</el-button>
         <el-button type="primary" @click="submit">确定</el-button>
       </span>
-    </template>
-  </el-dialog>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="DynamicPropConfig">
@@ -185,24 +208,25 @@ import {ShapeType} from "../config";
 // 动态属性配置
 
 const emit = defineEmits(['update:visible', 'submit'])
-
+const sortDialogRef = ref();
 const that = reactive({
   allGroupList: [],
   show: false,
   configInfo: {
     groupName: '', // 父节点名称
-    groupType: '1',
-    isCombo: false, // 是否是组合节点
-    multiLanguage: true, // 是否使用多语言
-    minSize: 1,
-    maxSize: 100,
-    canChange: false,
-    canInput: false,
-    linkChar: ',',
-    cellIds: [], // 节点id
+    groupType: '1', // 组合类型
     groupId: `g_${Math.random().toString(36).substring(2)}`,
+    isCombo: false, // 是否是组合节点
+    multiLanguage: true, // 是否使用多语言  true 为多语言对应到指定位置上，false 为将语言组合成一句话
+    langSort: [], // 多语言 组合成一句话的 排序
+    minSize: 1, // 节点组最小数量
+    maxSize: 100, // 节点组最大数量
+    canChange: false, // 是否允许调整数量
+    canInput: false,// 是否允许输入值
+    linkChar: ',',// 连接字符
+    cellIds: [], // 节点id
     data: {}, //节点是数据
-    shape: '', // 是否是图片
+    shape: '', // 节点类型
     pointList: [], //{ x:10,y:100}
   }
 })
@@ -212,11 +236,11 @@ const props = defineProps({
     default: false
   }
 })
-const languageOptions = computed(()=>{
+const languageOptions = computed(() => {
 
   const options = getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE);
   // @ts-ignore
-  options.unshift({ label: '*取值表达式', value: '_$value' })
+  options.unshift({label: '*取值表达式', value: '_$value'})
   return options
 })
 const delLast = () => {
@@ -227,7 +251,7 @@ const delLast = () => {
   that.configInfo.pointList.pop()
   useMessage().success(`成功删除1个位置信息`)
 }
-const disableInput = computed(()=>{
+const disableInput = computed(() => {
   return that.configInfo.shape === ShapeType.vueShapeImage
 })
 const appendNode = () => {
@@ -256,14 +280,15 @@ const append = (count = 1) => {
 }
 const init = (allGroupList, data) => {
   that.allGroupList = allGroupList;
-  console.log("that.allGroupList",that.allGroupList)
-  console.log("data",data)
+  console.log("that.allGroupList", that.allGroupList)
+  console.log("data", data)
   that.configInfo = {
     groupName: '', // 父节点名称
     groupType: '1',
     groupId: `g_${Math.random().toString(36).substring(2)}`,
     isCombo: false, // 是否是组合节点
-    multiLanguage: true, // 是否使用多语言
+    multiLanguage: true, // 是否使用多语言  true 为多语言对应到指定位置上，false 为将语言组合成一句话
+    langSort: [], // 多语言 组合成一句话的 排序
     minSize: 1, // 节点组最小数量
     maxSize: 100, // 节点组最大数量
     canChange: false, // 是否允许调整数量
@@ -280,12 +305,19 @@ const updateVisible = (value: boolean) => {
   that.show = value;
 }
 const getConfig = () => {
-  console.log("that.configInfo",that.configInfo)
+  console.log("that.configInfo", that.configInfo)
   return that.configInfo;
 }
 const submit = () => {
   emit('submit', getConfig())
 }
+const setLangSort = () => {
+  sortDialogRef.value.init(that.configInfo.langSort)
+  sortDialogRef.value.show();
+}
+const langSortChange = (val) => {
+  that.configInfo.langSort = val;
+}
 onMounted(() => {
 })
 defineExpose({
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/SortDialog.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/SortDialog.vue
new file mode 100644
index 0000000..4126a8b
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/SortDialog.vue
@@ -0,0 +1,149 @@
+<template>
+
+  <div>
+    <el-dialog
+      v-model="that.showOrderByDialog"
+      draggable
+      append-to-body
+      width="50vw"
+      :close-on-click-modal="false"
+    >
+      <template #title>
+        <div>
+          {{ title }}
+        </div>
+      </template>
+      <template #default>
+        <div>
+          <div>
+            <div v-html="tips"></div>
+          </div>
+
+          <Draggable
+            style="display: flex; flex-direction: column; align-items: center;"
+            ghost-class="draggable-ghost"
+            item-key="_$key"
+            @change="propListChange"
+            handler=".order-by-item"
+            :list="that.propList"
+            :group="{ name: 'sortItem'}"
+            :animation="200"
+          >
+            <template #item="{ element,index }">
+              <div class="order-by-item">
+                <span style="padding: 4px">{{ index + 1 }}</span>
+                <span style="padding: 4px;">{{ showLabel(element) }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+
+</template>
+<script setup lang="ts" name="SortDialog">
+
+import {nextId} from "@/components/DraftDesign/utils/FuncUtil";
+import Draggable from 'vuedraggable'
+import '../icons/style.css'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '排序'
+  },
+  tips: {
+    type: String,
+    default: '拖动可排序'
+  }
+})
+const emit = defineEmits(['listChange'])
+const that = reactive({
+  propList: [],
+  showKey: '',
+  showOrderByDialog: false,
+  isString: false,
+})
+const propListChange = () => {
+  let res = []
+  let arr =JSON.parse( JSON.stringify(that.propList))
+  if(that.isString){
+    arr.forEach(item => {
+      res.push(item.label)
+    })
+  }else {
+    arr.forEach(item => {
+      //删除 _$key
+      delete item._$key
+      res.push(item)
+    })
+  }
+
+  emit('listChange', that.propList)
+}
+let showLabel = (el) => {
+  return el;
+}
+const show = () => {
+  that.showOrderByDialog = true
+}
+const close = () => {
+  that.showOrderByDialog = false
+}
+const init = (arr, showFunc = (el) => {
+  return el;
+}) => {
+  // 深拷贝
+  that.propList = JSON.parse(JSON.stringify([...(arr || [])]));
+  // 给每个元素添加一个 key
+  that.propList.forEach(item => {
+    console.log(item)
+    if(typeof item === 'string'){
+        item = {
+          _$key: nextId(),
+          label: item
+        }
+        that.isString = true
+    }else {
+      item['_$key'] = nextId()
+    }
+
+  })
+  showLabel = showFunc || showLabel
+}
+defineExpose({
+  init,
+  show,
+  close
+})
+
+</script>
+
+<style scoped lang="scss">
+@import "./layout/fontFamilyIcon.scss";
+
+.draggable-ghost {
+  background-color: rgba(39, 255, 169, 0.2);
+  outline-width: 0;
+  height: 38px;
+  box-sizing: border-box;
+  font-size: 0;
+  content: '';
+  overflow: hidden;
+  padding: 0;
+}
+
+.order-by-item:hover {
+  cursor: move;
+}
+
+.order-by-item {
+  margin: 6px;
+  border: 1px solid #8e8b8b;
+  width: 100%;
+  padding: 10px
+}
+
+</style>
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/constant.ts b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/constant.ts
new file mode 100644
index 0000000..e06cf3e
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/config/constant.ts
@@ -0,0 +1,11 @@
+
+//   成分比例	1
+// 图文说明	2
+// 文字说明	3
+// 尺码	4
+export enum GroupTypeEnum {
+  RATIO = '1',
+  ICON = '2',
+  TEXT = '3',
+  SIZE = '4'
+}
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
index 7faa9e5..61074c3 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/index.vue
@@ -1159,6 +1159,7 @@ const getJson = () => {
     let canChange = prop.canChange === undefined ? false : prop.canChange;
     let canInput = prop.canInput === undefined ? false : prop.canInput;
     let linkChar = prop.linkChar === undefined ? ',' : prop.linkChar;
+    let langSort = prop.langSort === undefined ? [] : prop.langSort;
 
     if (combo) {
       min = Math.min(dataInfoList.length,min);
@@ -1178,6 +1179,7 @@ const getJson = () => {
       canChange: canChange,
       canInput: canInput,
       linkChar: linkChar,
+      langSort: langSort,
       shape: prop.shape,
       dataInfo: dataInfoList
     }
@@ -1454,11 +1456,12 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
   let canChange = false;
   let canInput = false;
   let linkChar = ',';
+  let langSort = [];
   for (let i = 0; i < that.pageConfig.propList.length; i++) {
     if (that.pageConfig.propList[i].groupId === cells[0].getData().propGroupId) {
       canChange = that.pageConfig.propList[i].canChange === true
       canInput = that.pageConfig.propList[i].canInput === true
-      linkChar = that.pageConfig.propList[i].linkChar || ','
+      langSort = that.pageConfig.propList[i].langSort || []
       break;
     }
   }
@@ -1473,6 +1476,7 @@ const handlerGroupList = (cells, isCombo = false, min, max) => {
     maxSize: max,
     canChange: canChange,
     canInput: canInput,
+    langSort: langSort,
     linkChar: linkChar,
     data: info.data, //节点是数据
     shape: info.shape,