feat(goods cate): add curl

src/api/product/category.ts

@@ -1,5 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, updateItem, RentListGetResultModel } from './model';
+import { PageParams, updateItem, RentListGetResultModel, addCategoryParams } from './model';
 import { Result, UploadFileParams } from '/#/axios';
 
 enum Api {
@@ -9,6 +9,9 @@ enum Api {
   update = '/basic-api/specification/update',
   save = '/basic-api/specification/save',
   uploadBanner = '/basic-api/sys/oss/upload',
+  addCategory = '/basic-api/category/save',
+  updateCategory = '/basic-api/category/update',
+  deleteCategory = '/basic-api/category/delete',
 }
 
 /**
@@ -55,7 +58,7 @@ export const saveItemApi = (params: updateItem) =>
     },
   });
 
-export const attributeDleteApi = (params: string) =>
+export const attributeDeleteApi = (params: string) =>
   defHttp.post<RentListGetResultModel>({
     url: Api.delete,
     params: [params],
@@ -77,3 +80,32 @@ export function uploadBannerApi(
     params,
   );
 }
+export const addCategoryApi = (params: addCategoryParams) =>
+  defHttp.post<RentListGetResultModel>({
+    url: Api.addCategory,
+    params: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const updateCategoryApi = (params: addCategoryParams) =>
+  defHttp.post<Result>({
+    url: Api.updateCategory,
+    params: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const deleteCategoryApi = (params: string[]) =>
+  defHttp.post<Result>({
+    url: Api.deleteCategory,
+    params: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/product/model.ts

@@ -4,6 +4,15 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
  */
 export type PageParams = BasicPageParams;
 
+export interface addCategoryParams {
+  id?: number;
+  isShow: string;
+  level: 'L1' | 'L2';
+  name: string;
+  type: number;
+  parentId?: string;
+  wapBannerUrl: string;
+}
 export interface OrderListItem {
   id: number;
   limit: number | null;
@@ -25,6 +34,7 @@ export interface updateItem {
   id: number | null;
   name: string;
 }
+
 /**
  * @description: Request list return value
  */

src/locales/lang/zh-CN/routes/scenes.ts

@@ -24,6 +24,8 @@ export default {
   bindTime: '绑定时间',
   anchorList: '主播列表',
   addLive: '新增场景',
+  liveType: '直播间类型',
+  liveName: '直播间名称',
   roleType: {
     0: '公司管理员',
     1: '公司员工',

src/views/product/addCategoryModal.vue

@@ -9,13 +9,13 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
 <template>
   <BasicModal v-bind="$attrs" @register="register" title="新 增" @ok="handleOk">
     <div class="pt-3px pr-3px">
-      <BasicForm @register="registerForm" :model="model" />
+      <BasicForm @register="registerForm" />
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { categoryApi, uploadBannerApi } from '/@/api/product/category';
+  import { defineComponent } from 'vue';
+  import { categoryApi, uploadBannerApi, addCategoryApi } from '/@/api/product/category';
   import { TreeNode } from '/@/utils/treeUtils';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
@@ -54,7 +54,7 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
     },
 
     {
-      field: 'parent_id',
+      field: 'parentId',
       component: 'ApiSelect',
       label: '上级分类',
       ifShow: ({ values }) => isLevel2(values.level),
@@ -83,13 +83,13 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
       componentProps: {
         options: [
           {
-            label: '不显示',
-            value: '0',
-          },
-          {
             label: '显示',
             value: '1',
           },
+          {
+            label: '不显示',
+            value: '0',
+          },
         ],
       },
     },
@@ -105,7 +105,7 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
     {
       field: 'wapBannerUrl',
       component: 'Upload',
-      label: '主图',
+      label: '手机banner',
       rules: [{ required: true, message: '请选择上传文件' }],
       componentProps: {
         api: uploadBannerApi,
@@ -123,15 +123,9 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
     props: {
       userData: { type: Object },
     },
-    setup() {
-      const modelRef = ref({});
-      const [
-        registerForm,
-        {
-          // setFieldsValue,
-          getFieldsValue,
-        },
-      ] = useForm({
+    emits: ['update', 'register'],
+    setup(_, { emit }) {
+      const [registerForm, { validate, getFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas,
         showActionButtonGroup: false,
@@ -146,19 +140,33 @@ wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-o
 
       function onDataReceive(data) {
         console.log('Data Received', data);
-
-        modelRef.value = { field2: data.data, field1: data.info };
       }
 
       async function handleOk() {
-        let data = getFieldsValue();
-        console.log('data', data);
-        // let res = await saveItemApi(data);
+        try {
+          const values = await validate();
+          console.log('values', values);
+          if (values) {
+            let data = getFieldsValue();
+            console.log('data', data);
+            await addCategoryApi({
+              level: data.level,
+              isShow: data.isShow,
+              name: data.name,
+              parentId: data.parentId,
+              type: data.type,
+              wapBannerUrl: data.wapBannerUrl[0] || '',
+            });
+            emit('update');
+            resetFields();
+            closeModal();
+          }
+        } catch (error) {}
 
-        closeModal();
+        // let res = await saveItemApi(data);
       }
 
-      return { register, schemas, registerForm, model: modelRef, handleOk };
+      return { register, schemas, registerForm, handleOk };
     },
   });
 </script>

src/views/product/category.vue

@@ -25,25 +25,27 @@
         />
       </template>
     </BasicTable>
-    <addCategoryModal @register="registeraddCategoryModal" />
+    <AddCategoryModal @register="registeraddCategoryModal" @update="reload" />
+    <EditCategoryModal @register="registerEditCategoryModal" @update="reload" />
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, h } from 'vue';
+  import { defineComponent, h, nextTick } from 'vue';
   import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
-  import { categoryApi } from '/@/api/product/category';
+  import { categoryApi, deleteCategoryApi } from '/@/api/product/category';
   import { Tag } from 'ant-design-vue';
 
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { makeTree } from '/@/utils/treeUtils';
 
-  import addCategoryModal from './addCategoryModal.vue';
+  import AddCategoryModal from './addCategoryModal.vue';
+  import EditCategoryModal from './editCategoryModal.vue';
   import { useModal } from '/@/components/Modal';
 
   export default defineComponent({
-    components: { BasicTable, TableAction, addCategoryModal },
+    components: { BasicTable, TableAction, AddCategoryModal, EditCategoryModal },
     setup() {
       const { createMessage } = useMessage();
 
@@ -74,11 +76,11 @@
         },
         {
           title: '状态',
-          dataIndex: 'status',
+          dataIndex: 'isShow',
           width: 80,
           customRender: ({ record }) => {
-            const status = record.status;
-            const enable = ~~status === 0;
+            const status = record.isShow;
+            const enable = status === 1;
             const color = enable ? 'green' : 'red';
             const text = enable ? '启用' : '停用';
             return h(Tag, { color: color }, () => text);
@@ -90,9 +92,9 @@
           width: 180,
         },
       ];
-      const [registeraddCategoryModal, { openModal }] = useModal();
-
-      const [registerTable, { expandAll, collapseAll }] = useTable({
+      const [registeraddCategoryModal, { openModal: openAddCategoryModal }] = useModal();
+      const [registerEditCategoryModal, { openModal: openEditategoryModal }] = useModal();
+      const [registerTable, { reload, expandAll, collapseAll }] = useTable({
         title: '商品分类',
         api: categoryApi,
         columns: columns,
@@ -113,16 +115,21 @@
         },
         afterFetch(data) {
           const treeData = makeTree(data);
-          console.log('data', treeData);
           return treeData;
         },
       });
 
       function handleCreate(record: Recordable) {
-        openModal(true, record);
+        openAddCategoryModal(true, record);
+      }
+      function handleEdit(record: Recordable) {
+        openEditategoryModal(true, record);
+      }
+      async function handleDelete(record: Recordable) {
+        await deleteCategoryApi([record.id]);
+        createMessage.success(t('common.optSuccess'));
+        nextTick(reload);
       }
-      function handleEdit() {}
-      function handleDelete() {}
       return {
         registerTable,
         createMessage,
@@ -133,6 +140,8 @@
         expandAll,
         collapseAll,
         registeraddCategoryModal,
+        registerEditCategoryModal,
+        reload,
       };
     },
   });

src/views/product/editCategoryModal.vue

@@ -0,0 +1,190 @@
+<!-- bannerUrl: ""
+iconUrl: ""
+imgUrl: ""
+isShow: "0"
+level: "L1"
+name: "test"
+type: 0
+wapBannerUrl: "https://4dkk.4dage.com/shop/huafa/20220302/23135195983e96.png?x-oss-process=image/resize,m_fixed,w_100,h_100" -->
+<template>
+  <BasicModal v-bind="$attrs" @register="register" title="新 增" @ok="handleOk">
+    <div class="pt-3px pr-3px">
+      <BasicForm @register="registerForm" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { categoryApi, uploadBannerApi, updateCategoryApi } from '/@/api/product/category';
+  import { TreeNode } from '/@/utils/treeUtils';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { cloneDeep } from 'lodash-es';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  const isLevel2 = (type: string) => type === 'L2';
+  const schemas: FormSchema[] = [
+    {
+      field: 'id',
+      label: 'Id',
+      component: 'Input',
+      ifShow: false,
+    },
+    {
+      field: 'name',
+      component: 'Input',
+      label: '分类名称',
+      colProps: {
+        span: 24,
+      },
+      required: true,
+    },
+    {
+      field: 'level',
+      component: 'RadioGroup',
+      label: '级别',
+      defaultValue: 'L1',
+      colProps: {
+        span: 24,
+      },
+      componentProps: {
+        options: [
+          {
+            label: '一级分类',
+            value: 'L1',
+          },
+          {
+            label: '二级分类',
+            value: 'L2',
+          },
+        ],
+      },
+    },
+
+    {
+      field: 'parentId',
+      component: 'ApiSelect',
+      label: '上级分类',
+      ifShow: ({ values }) => isLevel2(values.level),
+      colProps: {
+        span: 18,
+      },
+      componentProps: {
+        api: async function (params) {
+          console.log('params', params);
+          const res = (await categoryApi(params)) as any as TreeNode[];
+          // const treeData = makeTree(res);
+          return res.filter((i) => i.level === 'L1');
+        },
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      field: 'isShow',
+      component: 'RadioGroup',
+      label: '是否显示',
+      defaultValue: '1',
+      colProps: {
+        span: 24,
+      },
+      componentProps: {
+        options: [
+          {
+            label: '显示',
+            value: '1',
+          },
+          {
+            label: '不显示',
+            value: '0',
+          },
+        ],
+      },
+    },
+    {
+      field: 'type',
+      component: 'InputNumber',
+      label: '排序',
+      defaultValue: 1,
+      colProps: {
+        span: 24,
+      },
+    },
+    {
+      field: 'wapBannerUrl',
+      component: 'Upload',
+      label: '手机banner',
+      rules: [{ required: true, message: '请选择上传文件' }],
+      componentProps: {
+        api: uploadBannerApi,
+        maxNumber: 1,
+        afterFetch: function (data) {
+          Reflect.set(data, 'url', data.message.url);
+          return data;
+        },
+      },
+      required: true,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['update', 'register'],
+    setup(_, { emit }) {
+      const { createMessage } = useMessage();
+
+      const [registerForm, { validate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', cloneDeep(data));
+        setFieldsValue({
+          ...data,
+          isShow: String(data.isShow),
+          wapBannerUrl: [data.wapBannerUrl],
+        });
+      }
+
+      async function handleOk() {
+        try {
+          const values = await validate();
+          console.log('values', values);
+          if (values) {
+            let data = getFieldsValue();
+            console.log('data', data);
+            await updateCategoryApi({
+              id: data.id,
+              level: data.level,
+              isShow: data.isShow,
+              name: data.name,
+              parentId: data.parentId,
+              type: data.type,
+              wapBannerUrl: data.wapBannerUrl[0] || '',
+            });
+            emit('update');
+            createMessage.success(t('common.optSuccess'));
+            resetFields();
+            closeModal();
+          }
+        } catch (error) {}
+
+        // let res = await saveItemApi(data);
+      }
+
+      return { register, schemas, registerForm, handleOk };
+    },
+  });
+</script>

src/views/product/ref.vue

@@ -22,7 +22,7 @@
     EditRecordRow,
     ActionItem,
   } from '/@/components/Table';
-  import { attributeListApi, attributeDleteApi, updateItemApi } from '/@/api/product/category';
+  import { attributeListApi, attributeDeleteApi, updateItemApi } from '/@/api/product/category';
   import { cloneDeep } from 'lodash-es';
   // import { Tag } from 'ant-design-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -104,7 +104,7 @@
           title: '警告',
           content: `此操作将对${record.name}进行删除, 是否继续?`,
           onOk: async () => {
-            let res = await attributeDleteApi(record.id);
+            let res = await attributeDeleteApi(record.id);
             console.log('res', res);
             reload();
           },

src/views/scenes/live.vue

@@ -79,7 +79,8 @@ updateUserId: 427 -->
       </template>
     </BasicTable>
     <bindModal @register="registerBindModal" @success="reload" />
-    <addLiveModal @register="registeraddLiveModal" @success="reload" />
+    <!-- <addLiveModal @register="registeraddLiveModal" /> -->
+    <LiveDrawer @register="registerLiveDrawer" />
   </div>
 </template>
 <script lang="ts">
@@ -100,16 +101,18 @@ updateUserId: 427 -->
   import { ListApi, brandTypeListApi } from '/@/api/scene/live';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
   import bindModal from './bindModal.vue';
-  import addLiveModal from './addLiveModal.vue';
 
+  import LiveDrawer from './liveDrawer.vue';
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg, bindModal, addLiveModal },
+    components: { BasicTable, TableAction, TableImg, bindModal, LiveDrawer },
     setup() {
       const { createMessage } = useMessage();
       const { t } = useI18n();
       const [registerBindModal, { openModal: openBindModal }] = useModal();
-      const [registeraddLiveModal, { openModal: openLiveModal }] = useModal();
+
+      const [registerLiveDrawer, { openDrawer: openLiveDrawer }] = useDrawer();
 
       const columns: BasicColumn[] = [
         {
@@ -283,7 +286,7 @@ updateUserId: 427 -->
       }
       function handleLiveOpen(record: Recordable) {
         console.log('record', record);
-        openLiveModal(true, record);
+        openLiveDrawer(true, record);
       }
       return {
         registerTable,
@@ -294,7 +297,7 @@ updateUserId: 427 -->
         handleBindAnchor,
 
         reload,
-        registeraddLiveModal,
+        registerLiveDrawer,
         handleLiveOpen,
       };
     },

src/views/scenes/liveDrawer.vue

@@ -0,0 +1,103 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="50%"
+    @ok="handleSubmit"
+  >
+    <div class="entry-x">
+      <BasicForm @register="registerForm" />
+    </div>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
+
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { brandTypeListApi } from '/@/api/scene/live';
+
+  export default defineComponent({
+    name: 'MenuDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup() {
+      const isUpdate = ref(true);
+      const { t } = useI18n();
+      // const { createMessage } = useMessage();
+      const schemas: FormSchema[] = [
+        {
+          field: 'type',
+          label: t('routes.scenes.liveType'),
+          component: 'ApiSelect',
+          // colProps: {
+          //   xl: 5,
+          //   xxl: 5,
+          // },
+          componentProps: {
+            api: brandTypeListApi,
+            resultField: 'list',
+            labelField: 'name',
+            valueField: 'id',
+            params: {
+              page: 1,
+              limit: 1000,
+            },
+          },
+        },
+        {
+          field: 'name',
+          component: 'Input',
+          label: t('routes.scenes.liveName'),
+
+          required: true,
+        },
+        {
+          field: 'appListPicUrl',
+          component: 'Input',
+          label: t('routes.scenes.appListPicUrl'),
+          required: true,
+        },
+      ];
+      // updateSchema, validate
+      const [registerForm, { resetFields, setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas: schemas,
+        showActionButtonGroup: false,
+        baseColProps: { lg: 24, md: 24 },
+      });
+      closeDrawer;
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          console.log('data.record', data);
+
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+
+        // updateSchema({
+        //   field: 'parentId',
+        //   componentProps: {
+        //     treeData,
+        //   },
+        // });
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));
+
+      async function handleSubmit() {}
+
+      return { registerDrawer, registerForm, getTitle, handleSubmit };
+    },
+  });
+</script>