From 3d6c978db69d6f597b63c5a2ecde8175591ee00c Mon Sep 17 00:00:00 2001
From: YuanFeng <770153798@qq.com>
Date: Thu, 5 Sep 2024 15:43:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=20=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../productcareitem/ProductCareItemForm.vue   | 161 ++++++++++--------
 1 file changed, 92 insertions(+), 69 deletions(-)

diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue
index f88be33..b948901 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/productcareitem/ProductCareItemForm.vue
@@ -1,80 +1,100 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="保养项名称" prop="value">
-        <el-input :name="`_$_ProductCareItemForm_value`" :autocomplete="`_$_ProductCareItemForm_value`" v-model="formData.value" clearable placeholder="请输入保养项名称" />
-      </el-form-item>
-      <el-form-item label="icon图标" prop="iconUrl">
-        <DraftDesignImageLibDialog v-model="formData.iconUrl" placeholder="请输入icon图标" @submit="changeIcon" />
-      </el-form-item>
+  <Dialog
+    :title="dialogTitle"
+    width="68vw"
+          v-model="dialogVisible">
 
-      <el-form-item label="品牌通用" prop="isAll">
-        <el-checkbox v-model="formData.isAll">该保养说明适用于所有品牌</el-checkbox>
-      </el-form-item>
+    <el-scrollbar height="60vh">
+      <div>
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        v-loading="formLoading"
+      >
+        <el-form-item label="保养项名称" prop="value">
+          <el-input :name="`_$_ProductCareItemForm_value`" :autocomplete="`_$_ProductCareItemForm_value`" v-model="formData.value" clearable placeholder="请输入保养项名称" />
+        </el-form-item>
+        <el-form-item label="icon图标" prop="iconUrl">
+          <DraftDesignImageLibDialog v-model="formData.iconUrl" placeholder="请输入icon图标" @submit="changeIcon" />
+        </el-form-item>
 
-      <el-form-item v-if="!formData.isAll" label="品牌" prop="brandIds">
-        <span>改说明只适用于指定品牌</span>
-        <el-input v-model="formData.brandIds" placeholder="请输入品牌" />
-      </el-form-item>
+        <el-form-item label="品牌通用" prop="isAll">
+          <el-checkbox v-model="formData.isAll">该保养说明适用于所有品牌</el-checkbox>
+        </el-form-item>
 
-      <el-form-item label="作用于组合" prop="isCombo">
-        <el-checkbox v-model="formData.isCombo">是否只作用于组合(洗涤说明icon和文本)</el-checkbox>
-      </el-form-item>
+        <el-form-item v-if="!formData.isAll" label="品牌" prop="brandIds">
+          <span>改说明只适用于指定品牌</span>
+          <el-input v-model="formData.brandIds" placeholder="请输入品牌" />
+        </el-form-item>
 
-      <el-form-item label="多语言" prop="lang_mapping">
-        <el-button @click="addLangMapping">添加</el-button>
-        <el-table  :data="that.langList" :stripe="true" :show-overflow-tooltip="true">
-          <el-table-column prop="locale" label="地区语言" width="150" >
-            <template #default="scope">
-              <el-select v-model="scope.row.locale" placeholder="地区语言">
-                <el-option
-                  v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
-                  :key="`${dict.value}`"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </template>
-          </el-table-column>
+        <el-form-item label="作用于组合" prop="isCombo">
+          <el-checkbox v-model="formData.isCombo">是否只作用于组合(洗涤说明icon和文本)</el-checkbox>
+        </el-form-item>
 
-          <el-table-column prop="value" label="多语言内容" >
-            <template #default="scope">
-              <el-input v-model="scope.row.value" placeholder="请输入多语言内容" />
-            </template>
-          </el-table-column>
+        <el-form-item label="多语言配置" prop="lang_mapping">
+          <div class="w-full">
+            <el-collapse accordion>
+              <el-collapse-item name="1">
+                <template #title>
+                  多语言对照列表
+                </template>
+                <div>
+                  <el-button @click="addLangMapping">添加</el-button>
+                  <el-table  :data="that.langList" :stripe="true" :show-overflow-tooltip="true">
+                    <el-table-column prop="locale" label="地区语言" width="150" >
+                      <template #default="scope">
+                        <el-select v-model="scope.row.locale" placeholder="地区语言">
+                          <el-option
+                            v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
+                            :key="`${dict.value}`"
+                            :label="dict.label"
+                            :value="dict.value"
+                          />
+                        </el-select>
+                      </template>
+                    </el-table-column>
 
-          <el-table-column prop="value" label="操作" >
-            <template #default="{$index}">
-              <el-button type="danger" @click="removeRow($index) " >删除</el-button>
-            </template>
-          </el-table-column>
+                    <el-table-column prop="value" label="多语言内容" >
+                      <template #default="scope">
+                        <el-input v-model="scope.row.value" placeholder="请输入多语言内容" />
+                      </template>
+                    </el-table-column>
 
-        </el-table>
-      </el-form-item>
+                    <el-table-column prop="value" label="操作" >
+                      <template #default="{$index}">
+                        <el-button type="danger" @click="removeRow($index) " >删除</el-button>
+                      </template>
+                    </el-table-column>
 
-      <el-form-item label="语言标识" prop="locale">
-        <el-select v-model="formData.locale" placeholder="请选择语言标识">
-          <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
-            :key="`${dict.value}`"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="启用状态" prop="enabled">
-        <el-checkbox  v-model="formData.enabled">是否启用</el-checkbox>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
-      </el-form-item>
-    </el-form>
+                  </el-table>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+
+        </el-form-item>
+
+        <el-form-item label="语言标识" prop="locale">
+          <el-select v-model="formData.locale" placeholder="请选择语言标识">
+            <el-option
+              v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
+              :key="`${dict.value}`"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="启用状态" prop="enabled">
+          <el-checkbox  v-model="formData.enabled">是否启用</el-checkbox>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+    </div>
+    </el-scrollbar>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{t('common.ok')}}</el-button>
       <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
@@ -114,7 +134,10 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const that = reactive({
-  langList: [],
+  langList: [{
+    locale: '',
+    value: '',
+  }],
 })
 
 const addLangMapping = () => {