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

src/api/product/list.ts

@@ -8,6 +8,8 @@ enum Api {
   unSale = '/basic-api/goods/unSale',
   enSale = '/basic-api/goods/enSale',
   delete = '/basic-api/goods/delete',
+  info = '/basic-api/goods/info/',
+  update = '/basic-api/goods/update',
 }
 
 /**
@@ -23,6 +25,14 @@ export const ListApi = (params: PageParams) =>
       ignoreCancelToken: true,
     },
   });
+export const InfoApi = (params: string) =>
+  defHttp.post<any>({
+    url: Api.info + params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export const UnSaleApi = (params: string[]) =>
   defHttp.post<Result>({
     url: Api.unSale,
@@ -33,6 +43,15 @@ export const UnSaleApi = (params: string[]) =>
     },
   });
 
+export const UpdateSaleApi = (params: any) =>
+  defHttp.post<Result>({
+    url: Api.update,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export const EnSaleApi = (params: string[]) =>
   defHttp.post<Result>({
     url: Api.enSale,

src/views/advertisement/pads.vue

@@ -34,7 +34,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, h } from 'vue';
   import {
     BasicTable,
     useTable,
@@ -48,6 +48,7 @@
   import PadsDrawer from './padsDrawer.vue';
   import { RecommendListApi } from '/@/api/advertisement/list';
   import { useDrawer } from '/@/components/Drawer';
+  import { Time } from '/@/components/Time';
   // param type 2
   export default defineComponent({
     components: { BasicTable, TableAction, TableImg, PadsDrawer },
@@ -76,6 +77,15 @@
           title: '编辑时间',
           dataIndex: 'createTime',
           width: 150,
+          customRender: ({ record }) => {
+            return (
+              record.createTime &&
+              h(Time, {
+                value: record.createTime,
+                mode: 'datetime',
+              })
+            );
+          },
         },
 
         {
@@ -99,8 +109,8 @@
               xxl: 5,
             },
             componentProps: {
-              change: function (e) {
-                console.log('componentProps', e);
+              onChange: function () {
+                reload();
               },
               options: [
                 {
@@ -124,7 +134,7 @@
         ],
       };
 
-      const [registerTable, { getForm }] = useTable({
+      const [registerTable, { getForm, reload }] = useTable({
         title: '推荐位',
         api: RecommendListApi,
         columns: columns,

src/views/product/drawer.data.ts

@@ -1,5 +1,7 @@
 import { FormSchema, BasicColumn } from '/@/components/Table';
-
+import { categoryApi } from '/@/api/product/category';
+import { makeTree } from '/@/utils/treeUtils';
+import { uploadApi } from '/@/api/advertisement/list';
 import { h } from 'vue';
 import { Switch } from 'ant-design-vue';
 import { useMessage } from '/@/hooks/web/useMessage';
@@ -7,15 +9,78 @@ import { Tinymce } from '/@/components/Tinymce/index';
 
 export const formSchema: FormSchema[] = [
   {
+    field: 'categoryId',
+    label: '商品分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const res = await categoryApi();
+        const treeData = makeTree(res);
+        return treeData;
+      },
+      fieldNames: {
+        label: 'name',
+        key: 'id',
+        value: 'id',
+      },
+    },
+  },
+  {
+    field: 'goodsSn',
+    label: '序列号',
+    component: 'Input',
+    required: true,
+  },
+  {
     field: 'name',
     label: '商品名称',
     component: 'Input',
     required: true,
   },
-
   {
-    field: 'link',
+    field: 'goodsSimpleDesc',
+    label: '商品描述',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'brandName',
+    label: '直播间',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'realShopUrl',
+    component: 'Input',
     label: '购买链接',
+    renderComponentContent: () => {
+      return {
+        suffix: () => '仅支持京东链接',
+      };
+    },
+    rules: [
+      {
+        validator: async (_, value) => {
+          return new Promise((resolve, reject) => {
+            if (!value) {
+              return resolve();
+            }
+            const reg =
+              /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+            if (reg.test(value) && value.includes('item.jd.com')) {
+              resolve();
+            } else {
+              reject('不是京东链接！！');
+            }
+          });
+        },
+      },
+    ],
+  },
+  {
+    field: 'detailed',
+    label: '规格明细',
+    slot: 'detailed',
     component: 'Input',
   },
   {
@@ -24,19 +89,50 @@ export const formSchema: FormSchema[] = [
     component: 'Switch',
   },
   {
-    field: 'steamRoom',
-    label: '直播间名称',
-    component: 'Input',
-    helpMessage: '直播间不能修改',
-    required: true,
-    colProps: {
-      lg: 8,
-      md: 8,
+    field: 'primaryPicUrl',
+    component: 'Upload',
+    label: '主图',
+    rules: [{ required: true, message: '请选择上传文件' }],
+    componentProps: {
+      api: uploadApi,
+      maxNumber: 1,
+      afterFetch: function (data) {
+        Reflect.set(data, 'url', data.message);
+        return data;
+      },
     },
+    required: true,
+  },
+  {
+    field: 'listPicUrl',
+    component: 'Upload',
+    label: '列表图',
+    rules: [{ required: true, message: '请选择上传文件' }],
     componentProps: {
-      disabled: false,
+      api: uploadApi,
+      maxNumber: 15,
+      afterFetch: function (data) {
+        Reflect.set(data, 'url', data.message);
+        console.log('setFieldsValue');
+        return data;
+      },
     },
+    required: true,
   },
+  // {
+  //   field: 'steamRoom',
+  //   label: '直播间名称',
+  //   component: 'Input',
+  //   helpMessage: '直播间不能修改',
+  //   required: true,
+  //   colProps: {
+  //     lg: 8,
+  //     md: 8,
+  //   },
+  //   componentProps: {
+  //     disabled: false,
+  //   },
+  // },
   {
     field: 'desc',
     label: '商品描述',

src/views/product/productDrawer.vue

@@ -7,7 +7,38 @@
     :title="getTitle"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #detailed>
+        <table class="detailed">
+          <thead>
+            <tr style="">
+              <th style="min-width: 130px">{{ editData.categoryName }}</th>
+              <th>库存</th>
+              <th>规格编码</th>
+              <th>市场价</th>
+              <th>销售价</th>
+            </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>
+          </tbody>
+        </table>
+      </template>
+      <template #formItem>
+        <BasicForm @register="itemRegister" @submit="handleSubmit">
+          <template #add="{ field }">
+            <Button v-if="Number(field) === 0" @click="add">+</Button>
+            <Button v-if="field > 0" @click="del(field)">-</Button>
+          </template>
+        </BasicForm>
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
@@ -15,8 +46,12 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './drawer.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
+  import { InfoApi, UpdateSaleApi } from '/@/api/product/list';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
   // import { getMenuList } from '/@/api/system/system';
+  import { makeTree } from '/@/utils/treeUtils';
+  import { categoryApi } from '/@/api/product/category';
 
   export default defineComponent({
     name: 'ProductDrawer',
@@ -24,22 +59,70 @@
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
-
+      const { createMessage } = useMessage();
+      const { t } = useI18n();
+      let editData = ref({});
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
         baseColProps: { lg: 18, md: 18, offset: 1 },
       });
-
+      const [itemRegister, {}] = useForm({
+        // formItemValue :validate appendSchemaByField, removeSchemaByFiled,
+        schemas: [
+          {
+            field: 'goodsId',
+            label: '规格名',
+            component: 'ApiTreeSelect',
+            componentProps: {
+              api: async () => {
+                const res = await categoryApi();
+                const treeData = makeTree(res);
+                return treeData;
+              },
+              fieldNames: {
+                label: 'name',
+                key: 'id',
+                value: 'id',
+              },
+            },
+          },
+          {
+            field: 'goodsSn',
+            component: 'Input',
+            label: '字段0',
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          {
+            field: '0',
+            component: 'Input',
+            label: ' ',
+            colProps: {
+              span: 8,
+            },
+            slot: 'add',
+          },
+        ],
+        labelWidth: 100,
+        actionColOptions: { span: 24 },
+      });
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         resetFields();
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
-
+        console.log('setFieldsValue', data.record);
         if (unref(isUpdate)) {
+          let res = await InfoApi(data.record.id);
+          editData.value = res;
+          console.log('setFieldsValueres', res, formItemvalue);
           setFieldsValue({
-            ...data.record,
+            ...res,
+            listPicUrl: [encodeURI(res.listPicUrl.split('?')[0])],
+            primaryPicUrl: [encodeURI(res.primaryPicUrl.split('?')[0])],
             steamRoom: data.record?.steamRoom?.name,
           });
         }
@@ -55,9 +138,16 @@
       async function handleSubmit() {
         try {
           const values = await validate();
+          console.log('values', values);
+          let subData = await UpdateSaleApi({
+            ...editData.value,
+            ...values,
+          });
+          console.log('setFieldsValue', subData);
           setDrawerProps({ confirmLoading: true });
           // TODO custom api
           console.log(values);
+          createMessage.success(t('common.optSuccess'));
           closeDrawer();
           emit('success');
         } finally {
@@ -65,7 +155,31 @@
         }
       }
 
-      return { registerDrawer, registerForm, getTitle, handleSubmit };
+      return { registerDrawer, registerForm, itemRegister, getTitle, editData, handleSubmit };
     },
   });
 </script>
+
+<style scoped lang="less">
+  :deep(.detailed) {
+    .title {
+      display: flex;
+      span,
+      input,
+      div {
+        flex-grow: 1;
+      }
+      input {
+        display: inline-block;
+      }
+      .name {
+        flex-grow: 2;
+      }
+    }
+    tr {
+      th {
+        font-weight: 500;
+      }
+    }
+  }
+</style>