Jelajahi Sumber

feat(api): order interactive

gemercheung 3 tahun lalu
induk
melakukan
fdfbda7b43

+ 24 - 2
src/api/order/list.ts

@@ -1,8 +1,12 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, RentListGetResultModel } from './model';
+import { OrderInfoParams, PageParams, ListGetResultModel } from './model';
 
 enum Api {
   pageList = '/basic-api/order/list',
+  getOrderInfo = '/basic-api/order/info',
+  shippingList = '/basic-api/shipping/list',
+  brandList = '/basic-api/brand/queryAll',
+  sendGoods = '/basic-api/order/sendGoods',
 }
 
 /**
@@ -10,7 +14,7 @@ enum Api {
  */
 
 export const ListApi = (params: PageParams) =>
-  defHttp.post<RentListGetResultModel>({
+  defHttp.post<ListGetResultModel>({
     url: Api.pageList,
     params,
     headers: {
@@ -18,3 +22,21 @@ export const ListApi = (params: PageParams) =>
       ignoreCancelToken: true,
     },
   });
+export const ShippingListApi = (params: PageParams) =>
+  defHttp.post<ListGetResultModel>({
+    url: Api.shippingList,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const GetOrderInfoApi = (params: OrderInfoParams) =>
+  defHttp.get<ListGetResultModel>({
+    url: `${Api.getOrderInfo}/${params.id}/${params.brandId}`,
+    joinTime: false,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

+ 6 - 1
src/api/order/model.ts

@@ -4,6 +4,11 @@ import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
  */
 export type PageParams = BasicPageParams;
 
+export interface OrderInfoParams {
+  id: number;
+  brandId: number;
+}
+
 export interface OrderListItem {
   id: number;
   name: string;
@@ -16,4 +21,4 @@ export interface OrderListItem {
 /**
  * @description: Request list return value
  */
-export type RentListGetResultModel = BasicFetchResult<OrderListItem>;
+export type ListGetResultModel = BasicFetchResult<OrderListItem>;

+ 3 - 0
src/locales/lang/en/modal.ts

@@ -0,0 +1,3 @@
+export default {
+  atLeastOne: 'at least chose one please!',
+};

+ 3 - 0
src/locales/lang/zh-CN/modal.ts

@@ -0,0 +1,3 @@
+export default {
+  atLeastOne: '请至少选择一项',
+};

+ 1 - 1
src/views/dashboard/corporation/index.vue

@@ -223,7 +223,7 @@
         registerSubaccountModal,
         handleOpenModal,
         uploadApi: uploadApi as any,
-        uploadLogoApi,
+        uploadLogoApi: uploadLogoApi as any,
         tablereload,
       };
     },

+ 0 - 5
src/views/dashboard/order/category.vue

@@ -1,5 +0,0 @@
-<template>
-  <div> 设备管理 </div>
-</template>
-
-<script lang="ts" setup></script>

+ 83 - 0
src/views/dashboard/order/confirmModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="register" title="发货" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive } from 'vue';
+  import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ShippingListApi, GetOrderInfoApi } from '/@/api/order/list';
+
+  export default defineComponent({
+    name: 'ConfirmModal',
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup() {
+      // const isUpdate = ref(true);
+      let modalRecord = reactive({
+        id: 0,
+        brandId: 0,
+      });
+      const formSchema: FormSchema[] = [
+        {
+          field: 'shippingId',
+          label: '快递公司',
+          component: 'ApiSelect',
+          componentProps: {
+            api: ShippingListApi,
+            resultField: 'list',
+            labelField: 'name',
+            valueField: 'id',
+            immediate: true,
+            params: {
+              page: 1,
+              limit: 1000,
+            },
+          },
+          required: true,
+        },
+        {
+          field: 'orderSn',
+          label: '快递单号',
+          component: 'Input',
+          required: true,
+        },
+      ];
+      const [registerForm, { validate }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: { lg: 20, md: 20, offset: 1 },
+      });
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+      function onDataReceive(data) {
+        console.log('data', data);
+        modalRecord.id = data.id;
+        modalRecord.brandId = data.brandId;
+      }
+      async function handleSubmit() {
+        console.log('handleSubmit');
+        try {
+          const values = await validate();
+          console.log('modalRecord', modalRecord);
+          console.log('values', values);
+          const orderInfo = await GetOrderInfoApi(modalRecord);
+          console.log('orderInfo', orderInfo);
+          // Reflect.set(modalRecord, 'shippingNo', values.shippingNo);
+          // Reflect.set(modalRecord, 'shippingId', values.shippingNo);
+        } catch (error) {}
+      }
+
+      return {
+        register,
+        registerForm,
+        handleSubmit,
+        closeModal,
+      };
+    },
+  });
+</script>

+ 44 - 20
src/views/dashboard/order/list.vue

@@ -42,13 +42,17 @@ userId: 17
 userName: "微信用户q0zj95zuo4pv" -->
 <template>
   <div class="p-4">
-    <BasicTable
-      @register="registerTable"
-      :rowSelection="{ type: 'checkbox', onChange: onSelectChange }"
-    >
+    <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
       <template #toolbar>
-        <a-button type="primary" @click="sendPackage"> 发货</a-button>
-        <!-- dashed  link  text-->
+        <!-- <a-button type="primary" @click="sendPackage"> 发货</a-button> -->
+        <PopConfirmButton
+          title="是否确定收货?"
+          primary
+          color="error"
+          @confirm="handleConfirmReceive"
+        >
+          确定收货</PopConfirmButton
+        >
       </template>
       <template #cover="{ record }">
         <TableImg :size="150" :simpleShow="true" :imgList="[record.cover]" />
@@ -70,6 +74,12 @@ userName: "微信用户q0zj95zuo4pv" -->
         <TableAction
           :actions="[
             {
+              icon: 'mdi:truck-delivery',
+              label: '发货',
+              color: 'warning',
+              onClick: sendPackage.bind(null, record),
+            },
+            {
               icon: 'mdi:information-outline',
               label: '详情',
               onClick: () => {
@@ -88,6 +98,7 @@ userName: "微信用户q0zj95zuo4pv" -->
         />
       </template>
     </BasicTable>
+    <ConfirmModal @register="registerConfirmModal" />
   </div>
 </template>
 <script lang="ts">
@@ -101,7 +112,6 @@ userName: "微信用户q0zj95zuo4pv" -->
     TableImg,
   } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { uploadApi } from '/@/api/sys/upload';
   // import { Switch } from 'ant-design-vue';
   // import { h } from 'vue';
   import { ListApi } from '/@/api/order/list';
@@ -109,9 +119,12 @@ userName: "微信用户q0zj95zuo4pv" -->
   // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useGo } from '/@/hooks/web/usePage';
   import { Time } from '/@/components/Time';
+  import { PopConfirmButton } from '/@/components/Button';
 
+  import { useModal } from '/@/components/Modal';
+  import ConfirmModal from './confirmModal.vue';
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg, Time },
+    components: { BasicTable, TableAction, TableImg, Time, PopConfirmButton, ConfirmModal },
     setup() {
       const { createMessage } = useMessage();
       const go = useGo();
@@ -126,8 +139,8 @@ userName: "微信用户q0zj95zuo4pv" -->
         {
           title: '订单号',
           dataIndex: 'orderSn',
-
-          width: 160,
+          ellipsis: false,
+          width: 180,
         },
         {
           title: '会员昵称',
@@ -192,7 +205,8 @@ userName: "微信用户q0zj95zuo4pv" -->
           dataIndex: '',
           slots: { customRender: 'action' },
           fixed: 'right',
-          width: 140,
+          align: 'center',
+          width: 230,
         },
       ];
 
@@ -211,7 +225,9 @@ userName: "微信用户q0zj95zuo4pv" -->
         ],
       };
 
-      const [registerTable] = useTable({
+      const [registerConfirmModal, { openModal: openConfirmModal }] = useModal();
+
+      const [registerTable, { getSelectRowKeys }] = useTable({
         title: '订单列表',
         api: ListApi,
         columns: columns,
@@ -279,13 +295,20 @@ userName: "微信用户q0zj95zuo4pv" -->
             return '';
         }
       }
-
-      function sendPackage() {
-        console.log('sendPackage');
+      // function onSelectChange(selectedRowKeys: (string | number)[]) {
+      //   console.log(selectedRowKeys);
+      //   // checkedKeys.value = selectedRowKeys;
+      // }
+      function sendPackage(record: Recordable) {
+        openConfirmModal(true, record);
       }
-      function onSelectChange(selectedRowKeys: (string | number)[]) {
-        console.log(selectedRowKeys);
-        // checkedKeys.value = selectedRowKeys;
+
+      function handleConfirmReceive() {
+        const keys = getSelectRowKeys();
+        if (keys.length === 0) {
+          createMessage.info(t('modal.atLeastOne'));
+          return;
+        }
       }
 
       return {
@@ -298,8 +321,9 @@ userName: "微信用户q0zj95zuo4pv" -->
         rendershippingStatusLabel,
         renderpayStatusLabel,
         sendPackage,
-        onSelectChange,
-        uploadApi: uploadApi as any,
+        // onSelectChange,
+        handleConfirmReceive,
+        registerConfirmModal,
       };
     },
   });

+ 2 - 3
src/views/dashboard/product/list.vue

@@ -184,7 +184,7 @@ updateUserId: 247
         const keys = getSelectRowKeys();
         console.log('key', keys);
         if (keys.length === 0) {
-          createMessage.info('请至少选择一项');
+          createMessage.info(t('modal.atLeastOne'));
           return;
         }
         handleDelete(keys);
@@ -192,9 +192,8 @@ updateUserId: 247
       async function handlePatchEnSale() {
         try {
           const keys = getSelectRowKeys();
-          console.log('key', keys);
           if (keys.length === 0) {
-            createMessage.info('请至少选择一项');
+            createMessage.info(t('modal.atLeastOne'));
             return;
           }
           await EnSaleApi(keys);