feat(product): detail page add

package.json

@@ -38,7 +38,7 @@
     "@vueuse/core": "^7.4.1",
     "@vueuse/shared": "^7.4.1",
     "@zxcvbn-ts/core": "^1.2.0",
-    "ant-design-vue": "3.0.0-beta.3",
+    "ant-design-vue": "3.0.0-beta.7",
     "axios": "^0.24.0",
     "codemirror": "^5.65.0",
     "cropperjs": "^1.5.12",

pnpm-lock.yaml

@@ -41,7 +41,7 @@ specifiers:
   '@vueuse/core': ^7.4.1
   '@vueuse/shared': ^7.4.1
   '@zxcvbn-ts/core': ^1.2.0
-  ant-design-vue: 3.0.0-beta.3
+  ant-design-vue: 3.0.0-beta.7
   autoprefixer: ^10.4.0
   axios: ^0.24.0
   codemirror: ^5.65.0
@@ -129,7 +129,7 @@ dependencies:
   '@vueuse/core': 7.5.3_vue@3.2.26
   '@vueuse/shared': 7.5.3_vue@3.2.26
   '@zxcvbn-ts/core': 1.2.0
-  ant-design-vue: 3.0.0-beta.3_ae87cbba5ec93a01f3fe1197df446ca3
+  ant-design-vue: 3.0.0-beta.7_ae87cbba5ec93a01f3fe1197df446ca3
   axios: 0.24.0
   codemirror: 5.65.0
   cropperjs: 1.5.12
@@ -3014,8 +3014,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ant-design-vue/3.0.0-beta.3_ae87cbba5ec93a01f3fe1197df446ca3:
-    resolution: {integrity: sha512-filLiMc7zk+0l1AZ6nLk5nOil77Tm2M5FJZzS9Ce79z6pSX5mffWL3r8GWe/OAwr0g/SPmefHQfwtNL7/N1smg==}
+  /ant-design-vue/3.0.0-beta.7_ae87cbba5ec93a01f3fe1197df446ca3:
+    resolution: {integrity: sha512-8ay9+AnleifI/Ji6DnbrBku1kwo3fPjNrxyqsBAfe573T4gML9AVpX2/CaJgc41ID9liJdNV8fChgVEckeVb1A==}
     peerDependencies:
       '@vue/compiler-sfc': '>=3.1.0'
       vue: '>=3.1.0'

src/views/dashboard/product/drawer.data.ts

@@ -10,6 +10,7 @@ export const formSchema: FormSchema[] = [
     field: 'name',
     label: '商品名称',
     component: 'Input',
+    required: true,
   },
 
   {
@@ -23,25 +24,19 @@ export const formSchema: FormSchema[] = [
     component: 'Switch',
   },
   {
-    field: 'steamRoom.name',
+    field: 'steamRoom',
     label: '直播间名称',
     component: 'Input',
     helpMessage: '直播间不能修改',
     colProps: {
-      lg: 5,
-      md: 5,
+      lg: 8,
+      md: 8,
     },
     componentProps: {
       disabled: true,
     },
   },
   {
-    field: 'isLaunched',
-    label: '是否上架',
-    component: 'Switch',
-  },
-
-  {
     field: 'desc',
     label: '商品描述',
     component: 'Input',
@@ -52,8 +47,6 @@ export const formSchema: FormSchema[] = [
         onChange: (value: string) => {
           model[field] = value;
         },
-        // plugins: [],
-
         showImageUpload: true,
       });
     },

src/views/dashboard/product/list.data.ts

@@ -0,0 +1,114 @@
+import { BasicColumn, FormProps } from '/@/components/Table';
+
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const searchForm: Partial<FormProps> = {
+  labelWidth: 100,
+  schemas: [
+    {
+      field: 'orderNo',
+      label: '商品名称',
+      component: 'Input',
+      colProps: {
+        xl: 5,
+        xxl: 5,
+      },
+    },
+  ],
+};
+export const columns: BasicColumn[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    fixed: 'left',
+    width: 60,
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'name',
+
+    width: 160,
+  },
+  {
+    title: '商品描述',
+    dataIndex: 'desc',
+    width: 150,
+  },
+  {
+    title: '购买链接',
+    dataIndex: 'link',
+    slots: { customRender: 'link' },
+    width: 150,
+  },
+  {
+    title: '商品分类',
+    dataIndex: 'productType',
+    slots: { customRender: 'productType' },
+    sorter: true,
+    width: 120,
+  },
+  {
+    title: '直播间名称',
+    dataIndex: 'steamRoom',
+    customRender: ({ record }) => {
+      return record.steamRoom.name as unknown as {};
+    },
+    sorter: true,
+    width: 120,
+  },
+  {
+    title: '零售价格',
+    dataIndex: 'unit',
+    sorter: true,
+    width: 80,
+  },
+  {
+    title: '销售量',
+    dataIndex: 'amount',
+    sorter: true,
+    width: 80,
+  },
+  {
+    title: '市场价',
+    dataIndex: 'marketingUnit',
+    sorter: true,
+    width: 80,
+  },
+  {
+    title: '下单时间',
+    dataIndex: 'createTime',
+    sorter: true,
+    width: 140,
+  },
+  {
+    title: '上架状态',
+    dataIndex: 'isLaunched',
+    width: 180,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.isLaunched,
+        checkedChildren: '上架',
+        unCheckedChildren: '下架',
+        loading: false,
+        onChange(checked: boolean) {
+          record.pendingStatus = true;
+          const newStatus = checked ? '1' : '0';
+          const { createMessage } = useMessage();
+          createMessage.info(`暂未接入` + newStatus);
+        },
+      });
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: '',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+    width: 140,
+  },
+];

src/views/dashboard/product/list.vue

@@ -34,9 +34,9 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, h } from 'vue';
-  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
-  import { Switch } from 'ant-design-vue';
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/sys/upload';
   // import { Switch } from 'ant-design-vue';
@@ -48,6 +48,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import ProductDrawer from './productDrawer.vue';
   // import { PageWrapper } from '/@/components/Page';
+  import { columns, searchForm } from './list.data';
 
   export default defineComponent({
     components: { BasicTable, TableAction, ProductDrawer },
@@ -56,112 +57,6 @@
       const go = useGo();
       const { t } = useI18n();
       const [registerDrawer, { openDrawer }] = useDrawer();
-      const columns: BasicColumn[] = [
-        {
-          title: 'ID',
-          dataIndex: 'id',
-          fixed: 'left',
-          width: 60,
-        },
-        {
-          title: '商品名称',
-          dataIndex: 'name',
-
-          width: 160,
-        },
-        {
-          title: '商品描述',
-          dataIndex: 'desc',
-          width: 150,
-        },
-        {
-          title: '购买链接',
-          dataIndex: 'link',
-          slots: { customRender: 'link' },
-          width: 150,
-        },
-        {
-          title: '商品分类',
-          dataIndex: 'productType',
-          slots: { customRender: 'productType' },
-          sorter: true,
-          width: 120,
-        },
-        {
-          title: '直播间名称',
-          dataIndex: 'steamRoom.name',
-          sorter: true,
-          width: 120,
-        },
-        {
-          title: '零售价格',
-          dataIndex: 'unit',
-          sorter: true,
-          width: 80,
-        },
-        {
-          title: '销售量',
-          dataIndex: 'amount',
-          sorter: true,
-          width: 80,
-        },
-        {
-          title: '市场价',
-          dataIndex: 'marketingUnit',
-          sorter: true,
-          width: 80,
-        },
-        {
-          title: '下单时间',
-          dataIndex: 'createTime',
-          sorter: true,
-          width: 140,
-        },
-        {
-          title: '上架状态',
-          dataIndex: 'isLaunched',
-          width: 180,
-          customRender: ({ record }) => {
-            if (!Reflect.has(record, 'pendingStatus')) {
-              record.pendingStatus = false;
-            }
-            return h(Switch, {
-              checked: record.isLaunched,
-              checkedChildren: '上架',
-              unCheckedChildren: '下架',
-              loading: false,
-              onChange(checked: boolean) {
-                record.pendingStatus = true;
-                const newStatus = checked ? '1' : '0';
-                const { createMessage } = useMessage();
-                createMessage.info(`暂未接入` + newStatus);
-              },
-            });
-          },
-        },
-        {
-          title: '操作',
-          dataIndex: '',
-          slots: { customRender: 'action' },
-          fixed: 'right',
-          width: 140,
-        },
-      ];
-
-      const searchForm: Partial<FormProps> = {
-        labelWidth: 100,
-        schemas: [
-          {
-            field: 'orderNo',
-            label: '商品名称',
-            component: 'Input',
-            colProps: {
-              xl: 5,
-              xxl: 5,
-            },
-          },
-        ],
-      };
 
       const [registerTable] = useTable({
         title: '商品列表',

src/views/dashboard/product/productDrawer.vue

@@ -16,7 +16,7 @@
   import { formSchema } from './drawer.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
 
-  import { getMenuList } from '/@/api/system/system';
+  // import { getMenuList } from '/@/api/system/system';
 
   export default defineComponent({
     name: 'ProductDrawer',
@@ -25,7 +25,7 @@
     setup(_, { emit }) {
       const isUpdate = ref(true);
 
-      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 100,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -40,13 +40,14 @@
         if (unref(isUpdate)) {
           setFieldsValue({
             ...data.record,
+            steamRoom: data.record?.steamRoom?.name as unknown as Recordable,
           });
         }
-        const treeData = await getMenuList();
-        updateSchema({
-          field: 'parentMenu',
-          componentProps: { treeData },
-        });
+        // const treeData = await getMenuList();
+        // updateSchema({
+        //   field: 'steamRoom',
+        //   componentProps: { treeData },
+        // });
       });
 
       const getTitle = computed(() => (!unref(isUpdate) ? '新增商品' : '编辑商品'));