fix(router): 修改商品列表编辑

src/views/product/goodsSpecs.vue

@@ -5,12 +5,26 @@
       @submit="handleSubmit"
       @resetFunc="addBut"
       :submitButtonOptions="{ type: 'default', text: '生成规格明细' }"
-      :resetButtonOptions="{ text: '添加规格项目' }"
+      :resetButtonOptions="{ text: '添加规格项目', onClick: addBut }"
     >
-      <template #but>
-        <Button v-if="ggList.number > 1" icon="ci:close-big" @click="del">
-          <Icon icon="ci:close-big" />
-        </Button>
+      <template #but="{ field }">
+        <Icon
+          size="20px"
+          v-if="showBut(field, false)"
+          icon="ion:remove-circle-outline"
+          @click="del(field)"
+        />
+      </template>
+      <template #parentBut="{ field }">
+        <Icon
+          size="28px"
+          v-if="showBut(field, true)"
+          icon="ion:remove-circle-outline"
+          @click="parentDel(field)"
+        />
+      </template>
+      <template #addAttribute="{ field }">
+        <Button @click="addBut(field)"> 添加属性值 </Button>
       </template>
     </BasicForm>
   </div>
@@ -26,10 +40,48 @@
   export default defineComponent({
     components: { BasicForm, Icon },
     setup() {
-      const addSchemas = (val = 1) => {
-        return [
+      let ggList = ref({
+        goodsNumber: 1,
+        specsNumber: 1,
+        list: {
+          1: {
+            value: 1,
+            list: [1],
+          },
+        },
+      });
+      const addSchemas = (val = 1, type = true) => {
+        let number = ggList.value.specsNumber;
+        let parentList: FormSchema[] = [
           {
-            field: 'goodsSn' + val,
+            field: 'specsId_' + number,
+            label: '规格名',
+            component: 'ApiTreeSelect',
+            colProps: {
+              span: 18,
+            },
+            componentProps: {
+              api: queryAll,
+              fieldNames: {
+                label: 'name',
+                key: 'id',
+                value: 'id',
+              },
+            },
+          },
+          {
+            field: 'parent_' + number,
+            label: '',
+            slot: 'parentBut',
+            component: 'Input',
+            colProps: {
+              span: 4,
+            },
+          },
+        ];
+        let list: FormSchema[] = [
+          {
+            field: 'goodsSn_' + number + '_' + val,
             label: '规格值',
             component: 'Input',
             colProps: {
@@ -37,7 +89,7 @@
             },
           },
           {
-            field: 'listPicUrl' + val,
+            field: 'listPicUrl_' + number + '_' + val,
             component: 'Upload',
             label: '规格图',
             colProps: {
@@ -45,16 +97,15 @@
             },
             componentProps: {
               api: uploadApi,
-              maxNumber: 15,
+              maxgoodsNumber: 15,
               afterFetch: function (data) {
                 Reflect.set(data, 'url', data.message);
                 return data;
               },
             },
-            required: true,
           },
           {
-            field: 'but' + val,
+            field: number + '_' + val,
             label: '',
             slot: 'but',
             component: 'Input',
@@ -63,29 +114,25 @@
             },
           },
         ];
-      };
-      const schemas: FormSchema[] = [
-        {
-          field: 'specsId',
-          label: '规格名',
-          component: 'ApiTreeSelect',
-          colProps: {
-            span: 18,
-          },
-          componentProps: {
-            api: queryAll,
-            fieldNames: {
-              label: 'name',
-              key: 'id',
-              value: 'id',
+        var concatList = parentList.concat(list);
+        if (type) {
+          concatList.push({
+            field: 'add_' + number,
+            label: '  ',
+            slot: 'addAttribute',
+            component: 'Input',
+            colProps: {
+              span: 24,
             },
-          },
-        },
-      ];
+          });
+        }
+        console.log('parentList', type, concatList, 'list', list);
+        return type ? concatList : list;
+      };
       const { createMessage } = useMessage();
       const [register, { setProps, removeSchemaByFiled, appendSchemaByField }] = useForm({
         labelWidth: 120,
-        schemas: schemas.concat(addSchemas(1)),
+        schemas: addSchemas(ggList.value.goodsNumber, true),
         baseColProps: {
           span: 16,
         },
@@ -93,28 +140,100 @@
           span: 12,
         },
       });
-
-      let ggList = ref({
-        number: 1,
-        list: [],
-      });
       function del(field) {
-        removeSchemaByFiled([`field${field}a`, `field${field}b`, `${field}`]);
-        ggList.value.number--;
+        let numbler = Number(field.split('_')[0]);
+        let item = Number(field.split('_')[1]);
+        let { list, value } = ggList.value.list[numbler];
+        console.log(
+          item,
+          'numbler',
+          numbler,
+          list,
+          value,
+          'listfield',
+          list.filter((ele) => ele !== item),
+        );
+        removeSchemaByFiled([`goodsSn_${field}`, `listPicUrl_${field}`, `${field}`]);
+        ggList.value.list[numbler] = {
+          value: value - 1,
+          list: list.filter((ele) => ele !== value - 1),
+        };
+        // ggList.value.goodsNumber--;
+      }
+      function parentDel(field) {
+        let item = Number(field.split('_')[1]);
+        let data = ggList.value.list[item];
+        let delList = [`specsId_${item}`, `parent_${item}`, `add_${item}`];
+        console.log('addBut', data);
+        data.list &&
+          data.list.map((ele) => {
+            let child = [`goodsSn_${item}_${ele}`, `listPicUrl_${item}_${ele}`, `${item}_${ele}`];
+            delList = delList.concat(child);
+          });
+        removeSchemaByFiled(delList);
+        ggList.value.list;
+        delete ggList.value.list[item];
+      }
+      function addBut(val) {
+        let goodsNumber = ggList.value.goodsNumber;
+        let specsNumber = ggList.value.specsNumber;
+        if (typeof val == 'string') {
+          console.log('addBut');
+          let numbler = Number(val.split('_')[1]);
+          let { value, list } = ggList.value.list[numbler];
+          value++;
+          console.log('addBut', list, value, 'numbler', numbler);
+          list.push(value);
+          ggList.value.list[numbler] = {
+            value,
+            list,
+          };
+          let listSchemas = addSchemas(goodsNumber + 1, false).reverse();
+          let filed = numbler + '_' + ggList.value.goodsNumber;
+          console.log('addButlist', filed, list, ggList.value);
+          listSchemas.map((ele) => {
+            appendSchemaByField(ele, filed);
+          });
+          ggList.value.goodsNumber = goodsNumber + 1;
+        } else {
+          specsNumber++;
+          ggList.value.specsNumber = specsNumber;
+          ggList.value.list[specsNumber] = {
+            value: 1,
+            list: [1],
+          };
+          let list = addSchemas(1, true);
+          list.map((ele) => {
+            appendSchemaByField(ele, '');
+          });
+          ggList.value.goodsNumber = 1;
+        }
       }
-      function addBut() {
-        console.log('addBut');
-        let number = ggList.value.number + 1;
-        let list = addSchemas(number);
-        console.log('list', list);
-        list.map((ele) => {
-          appendSchemaByField(ele, '');
-        });
-        ggList.value.number = number;
+      function showBut(field, type) {
+        let show = true;
+        let item = field.split('_');
+        let key = 1;
+        if (type) {
+          //父级
+          key = Number(item[1]);
+          let arry = Object.keys(ggList.value.list || []);
+          console.log('item', arry);
+          console.log('item', item, show, ggList.value.list, 'arry', arry);
+          if (!(arry && arry.length > 1)) return false;
+        } else {
+          //子集
+          key = Number(item[0]);
+          if (
+            ggList.value.list[key] &&
+            ggList.value.list[key].list &&
+            ggList.value.list[key].list.length == 1
+          )
+            show = false;
+        }
+        return show;
       }
       return {
         register,
-        schemas,
         handleSubmit: (values: any) => {
           createMessage.success('click search,values:' + JSON.stringify(values));
         },
@@ -122,7 +241,9 @@
         setProps,
         ggList,
         del,
+        parentDel,
         addBut,
+        showBut,
       };
     },
   });