feat: 调整样式

2025-10-23 10:50:46 +08:00
parent e73305d440
commit 8b7780d52d
3 changed files with 69 additions and 64 deletions
--- a/apps/web-antd/src/views/mall/product/spu/form/index.vue
+++ b/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);
 }

--- a/apps/web-antd/src/views/mall/product/spu/form/modules/product-attributes.vue
+++ b/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) {
-  attributeList.value?.[index]?.values?.splice(valueIndex, 1);
+function handleCloseValue(index: number, value: PropertyAndValues) {
+  if (attributeList.value[index]) {
+    attributeList.value[index].values = attributeList.value?.[
+      index
+    ]?.values?.filter((item) => item.id !== value.id);
+  }
 }

 /** 删除属性 */
-function handleCloseProperty(index: number) {
-  attributeList.value?.splice(index, 1);
+function handleCloseProperty(item: PropertyAndValues) {
+  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"
-        :key="value.id"
+        v-for="(value, valueIndex) in attribute.values"
+        :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)"
-        @change="handleInputConfirm(index, item.id)"
-        @keyup.enter="handleInputConfirm(index, item.id)"
+        @blur="handleInputConfirm(index, attribute.id)"
+        @change="handleInputConfirm(index, attribute.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"
      >
-        + 添加
-      </Button>
+        <div class="flex items-center">
+          <IconifyIcon class="mr-2" icon="lucide:plus" />
+          添加
+        </div>
+      </Tag>
    </div>
-    <Divider class="my-10px" />
  </Col>
 </template>
--- a/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
+++ b/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;
-    // 重复添加校验
-    for (const attrItem of attributeList.value) {
-      if (attrItem.name === name) {
-        message.error('该属性已存在，请勿重复添加');
-        return;
+    // name 为数组，遍历数组，进行重复添加校验
+    const names = values.name;
+    for (const name of names) {
+      // 重复添加校验
+      for (const attrItem of attributeList.value) {
+        if (attrItem.name === name) {
+          message.error('该属性已存在，请勿重复添加');
+          return;
+        }
      }
    }

-    // TODO @puhui999：modalApi.lock(); 这种写法；
-
-    // 情况一：属性名已存在，则直接使用
-    const existProperty = attributeOptions.value.find(
-      (item: MallPropertyApi.Property) => item.name === name,
-    );
-    if (existProperty) {
-      attributeList.value.push({
-        id: existProperty.id,
-        name,
-        values: [],
-      });
-      // TODO @puhui999：这里要不 if else；这样 await modalApi.close(); emit('success'); 可以复用？另外，感觉甚至可以情况二：add 后，成为 existProperty，可以进一步简化？
-      await modalApi.close();
-      emit('success');
-      return;
-    }
-
-    // 情况二：如果是不存在的属性，则需要执行新增
-    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);
+    for (const name of names) {
+      const existProperty = attributeOptions.value.find(
+        (item: MallPropertyApi.Property) => item.name === name,
+      );
+      if (existProperty) {
+        // 情况一：如果属性已存在，则直接使用并结束
+        attributeList.value.push({
+          id: existProperty.id,
+          name,
+          values: [],
+        });
+      } else {
+        // 情况二：如果是不存在的属性，则需要执行新增
+        const propertyId = await createProperty({ name });
+        attributeList.value.push({
+          id: propertyId,
+          name,
+          values: [],
+        });
+      }
    }
+    message.success($t('ui.actionMessage.operationSuccess'));
+    modalApi.unlock();
+    await modalApi.close();
+    emit('success');
  },
+
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;