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

src/views/product/goodsSpecs.vue

@@ -13,7 +13,7 @@
           v-if="showBut(field, false)"
           icon="ion:remove-circle-outline"
           @click="del(field)"
-        />
+        />{{ field }}
       </template>
       <template #parentBut="{ field }">
         <Icon
@@ -21,7 +21,7 @@
           v-if="showBut(field, true)"
           icon="ion:remove-circle-outline"
           @click="parentDel(field)"
-        />
+        />{{ field }}
       </template>
       <template #addAttribute="{ field }">
         <Button @click="addBut(field)"> 添加属性值 </Button>
@@ -30,7 +30,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, reactive } from 'vue';
   import { Icon } from '/@/components/Icon';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
   import { uploadApi } from '/@/api/advertisement/list';
@@ -39,8 +39,9 @@
 
   export default defineComponent({
     components: { BasicForm, Icon },
-    setup() {
-      let ggList = ref({
+    emits: ['setEditData'],
+    setup(_, { emit }) {
+      let ggList = reactive({
         goodsNumber: 1,
         specsNumber: 1,
         list: {
@@ -50,16 +51,18 @@
           },
         },
       });
-      const addSchemas = (val = 1, type = true) => {
-        let number = ggList.value.specsNumber;
+      let specsObj = ref({});
+      const addSchemas = (number = ggList.specsNumber, val = 1, type = true) => {
+        console.log('addButlist', number + '_' + val, ggList);
         let parentList: FormSchema[] = [
           {
-            field: 'specsId_' + number,
+            field: 'name_' + number,
             label: '规格名',
             component: 'ApiTreeSelect',
             colProps: {
               span: 18,
             },
+            required: true,
             componentProps: {
               api: queryAll,
               fieldNames: {
@@ -67,6 +70,9 @@
                 key: 'id',
                 value: 'id',
               },
+              onChange: function (val, a) {
+                specsObj.value[val] = a[0];
+              },
             },
           },
           {
@@ -84,20 +90,22 @@
             field: 'goodsSn_' + number + '_' + val,
             label: '规格值',
             component: 'Input',
+            required: true,
             colProps: {
               span: 8,
             },
           },
           {
-            field: 'listPicUrl_' + number + '_' + val,
+            field: 'picUrl_' + number + '_' + val,
             component: 'Upload',
+            required: true,
             label: '规格图',
             colProps: {
               span: 10,
             },
             componentProps: {
               api: uploadApi,
-              maxgoodsNumber: 15,
+              maxgoodsNumber: 1,
               afterFetch: function (data) {
                 Reflect.set(data, 'url', data.message);
                 return data;
@@ -130,9 +138,12 @@
         return type ? concatList : list;
       };
       const { createMessage } = useMessage();
-      const [register, { setProps, removeSchemaByFiled, appendSchemaByField }] = useForm({
+      const [
+        register,
+        { setProps, removeSchemaByFiled, appendSchemaByField, validate, getFieldsValue },
+      ] = useForm({
         labelWidth: 120,
-        schemas: addSchemas(ggList.value.goodsNumber, true),
+        schemas: addSchemas(ggList.specsNumber, ggList.goodsNumber, true),
         baseColProps: {
           span: 16,
         },
@@ -143,7 +154,7 @@
       function del(field) {
         let numbler = Number(field.split('_')[0]);
         let item = Number(field.split('_')[1]);
-        let { list, value } = ggList.value.list[numbler];
+        let { list, value } = ggList.list[numbler];
         console.log(
           item,
           'numbler',
@@ -153,60 +164,69 @@
           'listfield',
           list.filter((ele) => ele !== item),
         );
-        removeSchemaByFiled([`goodsSn_${field}`, `listPicUrl_${field}`, `${field}`]);
-        ggList.value.list[numbler] = {
+        removeSchemaByFiled([`goodsSn_${field}`, `picUrl_${field}`, `${field}`]);
+        ggList.list[numbler] = {
           value: value - 1,
           list: list.filter((ele) => ele !== value - 1),
         };
-        // ggList.value.goodsNumber--;
+        // ggList.goodsNumber--;
       }
       function parentDel(field) {
         let item = Number(field.split('_')[1]);
-        let data = ggList.value.list[item];
-        let delList = [`specsId_${item}`, `parent_${item}`, `add_${item}`];
+        let data = ggList.list[item];
+        let delList = [`name_${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}`];
+            let child = [`goodsSn_${item}_${ele}`, `picUrl_${item}_${ele}`, `${item}_${ele}`];
             delList = delList.concat(child);
           });
         removeSchemaByFiled(delList);
-        ggList.value.list;
-        delete ggList.value.list[item];
+        ggList.list;
+        delete ggList.list[item];
       }
-      function addBut(val) {
-        let goodsNumber = ggList.value.goodsNumber;
-        let specsNumber = ggList.value.specsNumber;
+      async function addBut(val) {
+        let goodsNumber = ggList.goodsNumber;
+        let specsNumber = ggList.specsNumber;
         if (typeof val == 'string') {
           console.log('addBut');
           let numbler = Number(val.split('_')[1]);
-          let { value, list } = ggList.value.list[numbler];
+          let { value, list } = ggList.list[numbler];
           value++;
-          console.log('addBut', list, value, 'numbler', numbler);
+          console.log(
+            'addBut',
+            list,
+            value,
+            'numbler',
+            numbler,
+            'ggList.goodsNumber.list',
+            ggList.list[numbler].value,
+          );
           list.push(value);
-          ggList.value.list[numbler] = {
+          let filed = numbler + '_' + ggList.list[numbler].value;
+          ggList.list[numbler] = {
             value,
             list,
           };
-          let listSchemas = addSchemas(goodsNumber + 1, false).reverse();
-          let filed = numbler + '_' + ggList.value.goodsNumber;
-          console.log('addButlist', filed, list, ggList.value);
+          let listSchemas = addSchemas(numbler, goodsNumber + 1, false).reverse();
+          console.log('addButlist', filed, list, ggList);
           listSchemas.map((ele) => {
             appendSchemaByField(ele, filed);
           });
-          ggList.value.goodsNumber = goodsNumber + 1;
+          ggList.goodsNumber = goodsNumber + 1;
         } else {
           specsNumber++;
-          ggList.value.specsNumber = specsNumber;
-          ggList.value.list[specsNumber] = {
+          ggList.specsNumber = specsNumber;
+          ggList.list[specsNumber] = {
             value: 1,
             list: [1],
           };
-          let list = addSchemas(1, true);
+          let list = addSchemas(specsNumber, 1, true);
+          console.log('addSchemasList', list, await getFieldsValue());
           list.map((ele) => {
             appendSchemaByField(ele, '');
           });
-          ggList.value.goodsNumber = 1;
+          ggList.goodsNumber = 1;
         }
       }
       function showBut(field, type) {
@@ -216,25 +236,60 @@
         if (type) {
           //父级
           key = Number(item[1]);
-          let arry = Object.keys(ggList.value.list || []);
+          let arry = Object.keys(ggList.list || []);
           console.log('item', arry);
-          console.log('item', item, show, ggList.value.list, 'arry', arry);
+          console.log('item', item, show, ggList.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
-          )
+          if (ggList.list[key] && ggList.list[key].list && ggList.list[key].list.length == 1)
             show = false;
         }
         return show;
       }
+      async function getData(val) {
+        let data = await validate();
+        let getData = await getFieldsValue();
+        console.log('getData', val, data, getData);
+      }
       return {
         register,
-        handleSubmit: (values: any) => {
+        handleSubmit: async (values: any) => {
+          let data = await validate();
+          let getData = await getFieldsValue();
+          let goodsSpecificationList = [],
+            productList = [];
+          console.log('ggList', ggList.list, data);
+          for (let index = 0; index < ggList.specsNumber; index++) {
+            let ele = ggList.list[index + 1];
+            let name = getData[`name_${index + 1}`];
+            let val = [];
+            ele.list.map((element) => {
+              console.log('element', getData, `picUrl_${index + 1}_${element}`);
+              val.push({
+                name: getData[`goodsSn_${index + 1}_${element}`],
+                picUrl: getData[`picUrl_${index + 1}_${element}`][0],
+                uuid: `${index + 1}-${element}`,
+              });
+            });
+            console.log('ggList', val, specsObj.value);
+            let item = {
+              name: name,
+              specificationId: specsObj.value[name],
+              val,
+            };
+            goodsSpecificationList.push(item);
+            productList.push({
+              goodsNumber: null,
+              goodsSn: null,
+              marketPrice: null,
+              retailPrice: null,
+              uuidLink: '1-1',
+            });
+          }
+          console.log('setEditData', { goodsSpecificationList, productList });
+          emit('setEditData', { goodsSpecificationList, productList });
           createMessage.success('click search,values:' + JSON.stringify(values));
         },
         addSchemas,
@@ -244,6 +299,8 @@
         parentDel,
         addBut,
         showBut,
+        getData,
+        specsObj,
       };
     },
   });

src/views/product/productDrawer.vue

@@ -9,7 +9,7 @@
   >
     <BasicForm @register="registerForm">
       <template #goodsgg>
-        <goodsSpecs ref="goodsRef" />
+        <goodsSpecs @setEditData="setEditData" ref="goodsRef" />
       </template>
       <template #detailed>
         <table class="detailed">
@@ -23,12 +23,14 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <td>{{ editData.goodsNumber }}</td>
-              <td><input type="text" id="name" v-model="editData.goodsNumber" /></td>
-              <td><input type="text" id="age" v-model="editData.isNew" /></td>
-              <td><input type="text" id="school" v-model="editData.marketPrice" /></td>
-              <td><input type="text" id="school" v-model="editData.retailPrice" /></td>
+            <tr v-for="item in editData.productList" :key="item.uuidLink">
+              <template v-if="editData.productList">
+                <td>{{ item.uuidLink }}</td>
+                <td><input type="text" id="name" v-model="item.goodsNumber" /></td>
+                <td><input type="text" id="age" v-model="item.goodsSn" /></td>
+                <td><input type="text" id="school" v-model="item.marketPrice" /></td>
+                <td><input type="text" id="school" v-model="item.retailPrice" /></td>
+              </template>
             </tr>
           </tbody>
         </table>
@@ -137,7 +139,9 @@
         //   componentProps: { treeData },
         // });
       });
-
+      function setEditData(value) {
+        console.log('setEditData', value);
+      }
       const getTitle = computed(() => (!unref(isUpdate) ? '新增商品' : '编辑商品'));
 
       async function handleSubmit() {
@@ -168,6 +172,7 @@
         getTitle,
         editData,
         handleSubmit,
+        setEditData,
       };
     },
   });