优选集团-集团品牌编辑

src/views/menduner/system/web/PreferredGroup.vue

@@ -6,12 +6,6 @@
       label-width="170px"
       v-loading="formLoading"
     >
-			<!-- <el-form-item label="企业ID" prop="enterpriseId" :rules="[{ required: true, message: '请输入企业ID', trigger: 'blur'}]">
-        <el-input v-model="formData.enterpriseId" />
-      </el-form-item>
-      <el-form-item label="企业名称" prop="title" :rules="[{ required: true, message: '请输入企业名称', trigger: 'blur'}]">
-        <el-input v-model="formData.title" />
-      </el-form-item> -->
       <el-form-item label="企业名称" prop="enterpriseId" :rules="[{ required: true, message: '请选择企业', trigger: 'blur'}]">
         <el-select-v2
           ref="selectRef"
@@ -45,7 +39,9 @@
         <el-input v-model="formData.introduce.bigPicture.height" />
       </el-form-item>
       <el-form-item label="品牌介绍" prop="">
-        <el-button @click="showBrandDialog = true" type="primary">编 辑{{ formData.brandIntroduce && formData.brandIntroduce.length ? `（${formData.brandIntroduce.length}）` : '' }}</el-button>
+        <el-button @click="handleEditBrandData" type="primary">
+          编 辑{{ formData.brandIntroduce && formData.brandIntroduce.length ? `（${formData.brandIntroduce.length}）` : '' }}
+        </el-button>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -55,10 +51,11 @@
   </Dialog>
 
   <Dialog title="品牌介绍" v-model="showBrandDialog" class="!w-80%">
-    <div class="text-right">
+    <div class="flex items-center justify-between">
+      <div class="color-orange-400">温馨提示：品牌图片规格为宽368px*高192px</div>
       <el-button type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新 增</el-button>
     </div>
-    <el-table :data="formData.brandIntroduce" ref="brandTableRef" :stripe="true" height="60vh">
+    <el-table :data="brandData" ref="brandTableRef" :stripe="true" height="60vh">
       <el-table-column label="品牌名称" align="center" prop="content">
         <template #default="scope">
           <el-input type="textarea" :rows="1" v-model="scope.row.content" />
@@ -89,6 +86,7 @@
 
 <script setup>
 import { WebContentApi } from '@/api/menduner/system/web'
+import { cloneDeep } from 'lodash-es'
 
 /** 页面内容 表单 */
 defineOptions({ name: 'WebContentForm' })
@@ -151,21 +149,11 @@ const open = async (key, id) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-// 品牌介绍
-const handleDeleteBrand = (index) => {
-  if (!formData.value.brandIntroduce[index]) return
-  delete formData.value.brandIntroduce[index]
-}
-const handleBrandSubmit = () => {
-  const checkValue = formData.value.brandIntroduce.every(item => item.content.trim() && item.url && item.desc.trim())
-  if (!checkValue) return message.warning('请将列表中的项填写完整')
-  showBrandDialog.value = false
-}
-
 // 新增品牌项
 const brandTableRef = ref(null)
+const brandData = ref([])
 const handleAdd = () => {
-  formData.value.brandIntroduce.push({ content: '', url: '', desc: '' })
+  brandData.value.push({ content: '', url: '', desc: '' })
 
   nextTick(() => {
     const wrapper = brandTableRef.value?.$el?.querySelector('.el-table__body-wrapper')
@@ -180,6 +168,27 @@ const handleAdd = () => {
   })
 }
 
+// 品牌编辑
+const handleEditBrandData = () => {
+  brandData.value = formData.value.brandIntroduce && formData.value.brandIntroduce.length ? cloneDeep(formData.value.brandIntroduce) : []
+  showBrandDialog.value = true
+}
+
+// 删除品牌项
+const handleDeleteBrand = (index) => {
+  if (!brandData.value[index]) return
+  brandData.value.splice(index, 1)
+}
+
+const handleBrandSubmit = () => {
+  if (brandData.value && brandData.value.length) {
+    const checkValue = brandData.value.every(item => item.content.trim() && item.url && item.desc.trim())
+    if (!checkValue) return message.warning('请将列表中的项填写完整')
+  }
+  formData.value.brandIntroduce = brandData.value || []
+  showBrandDialog.value = false
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {