feat: 调整样式

apps/web-antd/src/views/mall/product/spu/form/index.vue

@@ -283,7 +283,7 @@ function openPropertyAddForm() {
 }
 
 /** 调用 SkuList generateTableData 方法*/
-function generateSkus(propertyList: any[]) {
+function generateSkus(propertyList: PropertyAndValues[]) {
   skuListRef.value.generateTableData(propertyList);
 }
 

apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue

@@ -6,7 +6,9 @@ import type { MallPropertyApi } from '#/api/mall/product/property';
 
 import { computed, ref, watch } from 'vue';
 
-import { Button, Col, Divider, message, Select, Tag } from 'ant-design-vue';
+import { IconifyIcon } from '@vben/icons';
+
+import { Col, Divider, message, Select, Tag } from 'ant-design-vue';
 
 import {
   createPropertyValue,
@@ -80,13 +82,19 @@ watch(
 );
 
 /** 删除属性值 */
-function handleCloseValue(index: number, valueIndex: number) {
+function handleCloseValue(index: number, value: PropertyAndValues) {
-  attributeList.value?.[index]?.values?.splice(valueIndex, 1);
+  if (attributeList.value[index]) {
+    attributeList.value[index].values = attributeList.value?.[
+      index
+    ]?.values?.filter((item) => item.id !== value.id);
+  }
 }
 
 /** 删除属性 */
-function handleCloseProperty(index: number) {
+function handleCloseProperty(item: PropertyAndValues) {
-  attributeList.value?.splice(index, 1);
+  attributeList.value = attributeList.value.filter(
+    (attribute) => attribute.id !== item.id,
+  );
   emit('success', attributeList.value);
 }
 
@@ -158,27 +166,28 @@ async function getAttributeOptions(propertyId: number) {
 </script>
 
 <template>
-  <Col v-for="(item, index) in attributeList" :key="index">
+  <Col v-for="(attribute, index) in attributeList" :key="index">
+    <Divider class="my-4" />
     <!-- TODO @puhui999：1）间隙可以看看；2)vue3 + element-plus 添加属性这个按钮，是和属性名在一排，感觉更好看点。 -->
-    <div>
+    <div class="mt-1">
       <span class="mx-1">属性名：</span>
       <Tag
         :closable="!isDetail"
         class="mx-1"
         color="success"
-        @close="handleCloseProperty(index)"
+        @close="handleCloseProperty(attribute)"
       >
-        {{ item.name }}
+        {{ attribute.name }}
       </Tag>
     </div>
-    <div>
+    <div class="mt-2">
       <span class="mx-1">属性值：</span>
       <Tag
-        v-for="(value, valueIndex) in item.values"
+        v-for="(value, valueIndex) in attribute.values"
-        :key="value.id"
+        :key="valueIndex"
         :closable="!isDetail"
         class="mx-1"
-        @close="handleCloseValue(index, valueIndex)"
+        @close="handleCloseValue(index, value)"
       >
         <!-- TODO @puhui999：这里貌似爆红？！idea -->
         {{ value.name }}
@@ -194,9 +203,9 @@ async function getAttributeOptions(propertyId: number) {
         :filter-option="true"
         size="small"
         style="width: 100px"
-        @blur="handleInputConfirm(index, item.id)"
+        @blur="handleInputConfirm(index, attribute.id)"
-        @change="handleInputConfirm(index, item.id)"
+        @change="handleInputConfirm(index, attribute.id)"
-        @keyup.enter="handleInputConfirm(index, item.id)"
+        @keyup.enter="handleInputConfirm(index, attribute.id)"
       >
         <Select.Option
           v-for="item2 in attributeOptions"
@@ -206,15 +215,16 @@ async function getAttributeOptions(propertyId: number) {
           {{ item2.name }}
         </Select.Option>
       </Select>
-      <Button
+      <Tag
         v-show="!inputVisible(index)"
-        class="button-new-tag ml-1"
-        size="small"
         @click="showInput(index)"
+        class="mx-1 border-dashed bg-gray-100"
       >
-        + 添加
+        <div class="flex items-center">
-      </Button>
+          <IconifyIcon class="mr-2" icon="lucide:plus" />
+          添加
+        </div>
+      </Tag>
     </div>
-    <Divider class="my-10px" />
   </Col>
 </template>

apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue

@@ -64,7 +64,6 @@ const formSchema: VbenFormSchema[] = [
       filterOption: true,
       placeholder: '请选择属性名称。如果不存在，可手动输入选择',
       mode: 'tags',
-      maxTagCount: 1,
       allowClear: true,
     },
     rules: 'required',
@@ -77,7 +76,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 80,
   },
   layout: 'horizontal',
   schema: formSchema,
@@ -91,51 +90,47 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
+    modalApi.lock();
     const values = await formApi.getValues();
-    const name = Array.isArray(values.name) ? values.name[0] : values.name;
+    // name 为数组，遍历数组，进行重复添加校验
-    // 重复添加校验
+    const names = values.name;
-    for (const attrItem of attributeList.value) {
+    for (const name of names) {
-      if (attrItem.name === name) {
+      // 重复添加校验
-        message.error('该属性已存在，请勿重复添加');
+      for (const attrItem of attributeList.value) {
-        return;
+        if (attrItem.name === name) {
+          message.error('该属性已存在，请勿重复添加');
+          return;
+        }
       }
     }
 
-    // TODO @puhui999：modalApi.lock(); 这种写法；
+    for (const name of names) {
-
+      const existProperty = attributeOptions.value.find(
-    // 情况一：属性名已存在，则直接使用
+        (item: MallPropertyApi.Property) => item.name === name,
-    const existProperty = attributeOptions.value.find(
+      );
-      (item: MallPropertyApi.Property) => item.name === name,
+      if (existProperty) {
-    );
+        // 情况一：如果属性已存在，则直接使用并结束
-    if (existProperty) {
+        attributeList.value.push({
-      attributeList.value.push({
+          id: existProperty.id,
-        id: existProperty.id,
+          name,
-        name,
+          values: [],
-        values: [],
+        });
-      });
+      } else {
-      // TODO @puhui999：这里要不 if else；这样 await modalApi.close(); emit('success'); 可以复用？另外，感觉甚至可以情况二：add 后，成为 existProperty，可以进一步简化？
+        // 情况二：如果是不存在的属性，则需要执行新增
-      await modalApi.close();
+        const propertyId = await createProperty({ name });
-      emit('success');
+        attributeList.value.push({
-      return;
+          id: propertyId,
-    }
+          name,
-
+          values: [],
-    // 情况二：如果是不存在的属性，则需要执行新增
+        });
-    try {
+      }
-      const data = { name } as MallPropertyApi.Property;
-      const propertyId = await createProperty(data);
-      // 添加到属性列表
-      attributeList.value.push({
-        id: propertyId,
-        name,
-        values: [],
-      });
-      message.success($t('ui.actionMessage.operationSuccess'));
-      await modalApi.close();
-      emit('success');
-    } catch (error) {
-      console.error('添加属性失败:', error);
     }
+    message.success($t('ui.actionMessage.operationSuccess'));
+    modalApi.unlock();
+    await modalApi.close();
+    emit('success');
   },
+
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;