feat(order): add order and detail

mock/order/list.ts

@@ -0,0 +1,71 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { mock, Random } from 'mockjs';
+import { resultPageSuccess } from '../_util';
+Random.extend({
+  phone: function () {
+    const phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
+    return this.pick(phonePrefixs) + mock(/\d{8}/); //Number()
+  },
+});
+// console.log(Random.phone());
+// 生成 1 - 10 个 随机手机号码
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 200; index++) {
+    const { phone } = mock({
+      phone: '@phone',
+    });
+    const { phone2 } = mock({
+      phone2: '@phone',
+    });
+    result.push({
+      id: `${index}`,
+      'orderNo|23': '@integer(0,9)',
+      name: '@ctitle(5,15)',
+      'orderType|1': [0, 1, 2, 3],
+      'orderStatus|1': [0, 1, 2, 3],
+      'shipingStatus|1': [0, 1, 2, 3],
+      'paymentStatus|1': [0, 1, 2, 3],
+      'shipingCompany|1': [
+        '顺丰速运',
+        'EMS',
+        '韵达快递',
+        '百世快递',
+        '申通快递',
+        '中通快递',
+        '韵达快递',
+      ],
+      'shipingNo|28': '@integer(5,15)',
+      'shipingAmount|2': '@integer(1,15)',
+      shipingName: '@cname',
+      shipingPhone: phone,
+
+      shipingAddress: '@city(true)',
+      deliverName: '@cname',
+      deliverPhone: phone2,
+      deliverAddress: '@city(true)',
+      scene: {
+        'id|1': '@integer(1,15)',
+        name: '@ctitle(5,15)',
+      },
+      'amount|3': '@integer(1,15)',
+      'totalAmount|3': '@integer(1,15)',
+      createTime: '@datetime',
+      paidTime: '@datetime',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/order/list',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

src/api/order/list.ts

@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams, RentListGetResultModel } from './model';
+
+enum Api {
+  pageList = '/zfb/order/list',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const ListApi = (params: PageParams) =>
+  defHttp.get<RentListGetResultModel>({
+    url: Api.pageList,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/order/model.ts

@@ -0,0 +1,19 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface OrderListItem {
+  id: number;
+  name: string;
+  image: string;
+  link: string;
+  createTime: string;
+  isShow: boolean;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type RentListGetResultModel = BasicFetchResult<OrderListItem>;

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

@@ -24,6 +24,7 @@ export default {
   productCategory: '商品分类',
   order: '订单管理',
   orderList: '订单列表',
+  orderDetail: '订单详情',
   member: '会员管理',
   memberList: '会员列表',
   staff: '员工管理',

src/router/routes/modules/order.ts

@@ -16,12 +16,27 @@ const order: AppRouteModule = {
   children: [
     {
       path: 'list',
-      name: 'orders',
+      name: 'OrderList',
       component: () => import('/@/views/dashboard/order/list.vue'),
       meta: {
         title: t('routes.dashboard.orderList'),
         icon: 'mdi:format-list-group',
+        hideChildrenInMenu: true,
       },
+      children: [
+        {
+          path: 'detail/:id',
+          name: 'OrderDetail',
+          component: () => import('/@/views/dashboard/order/detail.vue'),
+          meta: {
+            currentActiveMenu: '/order/list',
+            title: t('routes.dashboard.orderDetail'),
+            hideMenu: true,
+            dynamicLevel: 3,
+            realPath: '/order/list/detail',
+          },
+        },
+      ],
     },
   ],
 };

src/views/dashboard/order/data.tsx

@@ -0,0 +1,196 @@
+import { DescItem } from '/@/components/Description/index';
+import { BasicColumn } from '/@/components/Table/src/types/table';
+import { Button } from '/@/components/Button';
+
+import { Badge } from 'ant-design-vue';
+
+export const refundData = {
+  a1: '1000000000',
+  a2: '已取货',
+  a3: '1234123421',
+  a4: '3214321432',
+};
+
+export const personData = {
+  b1: '付小小',
+  b2: '18100000000',
+  b3: '菜鸟仓储',
+  b4: '浙江省杭州市西湖区万塘路18号',
+  b5: '无',
+};
+export const refundSchema: DescItem[] = [
+  {
+    field: 'a1',
+    label: '取货单号',
+  },
+  {
+    field: 'a2',
+    label: '状态',
+  },
+  {
+    field: 'a3',
+    label: '销售单号',
+  },
+  {
+    field: 'a4',
+    label: '子订单',
+  },
+];
+export const personSchema: DescItem[] = [
+  {
+    field: 'b1',
+    label: '用户姓名',
+  },
+  {
+    field: 'b2',
+    label: '联系电话',
+  },
+  {
+    field: 'b3',
+    label: '常用快递',
+  },
+  {
+    field: 'b4',
+    label: '取货地址',
+  },
+  {
+    field: 'b5',
+    label: '备注',
+  },
+];
+
+export const refundTableSchema: BasicColumn[] = [
+  {
+    title: '商品编号',
+    width: 150,
+    dataIndex: 't1',
+    customRender: ({ record }) => {
+      return (
+        <Button type="link" size="small">
+          {() => record.t1}
+        </Button>
+      );
+    },
+  },
+  {
+    title: '商品名称',
+    width: 150,
+    dataIndex: 't2',
+  },
+  {
+    title: '商品条码',
+    width: 150,
+    dataIndex: 't3',
+  },
+  {
+    title: '单价	',
+    width: 150,
+    dataIndex: 't4',
+  },
+  {
+    title: '数量（件）	',
+    width: 150,
+    dataIndex: 't5',
+  },
+  {
+    title: '金额',
+    width: 150,
+    dataIndex: 't6',
+  },
+];
+export const refundTimeTableSchema: BasicColumn[] = [
+  {
+    title: '时间',
+    width: 150,
+    dataIndex: 't1',
+  },
+  {
+    title: '当前进度',
+    width: 150,
+    dataIndex: 't2',
+  },
+  {
+    title: '状态',
+    width: 150,
+    dataIndex: 't3',
+    customRender: ({ record }) => {
+      return <Badge status="success" text={record.t3} />;
+    },
+  },
+  {
+    title: '操作员ID	',
+    width: 150,
+    dataIndex: 't4',
+  },
+  {
+    title: '耗时',
+    width: 150,
+    dataIndex: 't5',
+  },
+];
+
+export const refundTableData: any[] = [
+  {
+    t1: 1234561,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 1,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+  {
+    t1: 1234562,
+    t2: '矿泉水 550ml',
+    t3: '12421432143214321',
+    t4: '2.00',
+    t5: 2,
+    t6: 2.0,
+  },
+];
+
+export const refundTimeTableData: any[] = [
+  {
+    t1: '2017-10-01 14:10',
+    t2: '联系客户',
+    t3: '进行中',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员出发',
+    t3: '成功',
+    t4: '取货员 ID1234',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '取货员接单',
+    t3: '成功',
+    t4: '系统',
+    t5: '5mins',
+  },
+  {
+    t1: '2017-10-01 14:10',
+    t2: '申请审批通过',
+    t3: '成功',
+    t4: '用户',
+    t5: '1h',
+  },
+];

src/views/dashboard/order/detail.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <PageWrapper :title="`订单号：${id}`" contentBackground>
+      <Description
+        size="middle"
+        title="退款申请"
+        :bordered="false"
+        :column="3"
+        :data="refundData"
+        :schema="refundSchema"
+      />
+
+      <template #extra>
+        <a-button
+          type="primary"
+          @click="
+            router.push({
+              name: 'OrderList',
+            })
+          "
+        >
+          返回
+        </a-button>
+      </template>
+    </PageWrapper>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { Description } from '/@/components/Description/index';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  import { refundSchema, refundData } from './data';
+
+  export default defineComponent({
+    components: { PageWrapper, Description },
+    setup() {
+      const route = useRoute();
+      const { setTitle } = useTabs();
+      const router = useRouter();
+      const id = route.params.id;
+      console.log('id', id);
+
+      setTitle(`No.${id} - 订单详情`);
+
+      return {
+        refundSchema,
+        refundData,
+        router,
+        id,
+      };
+    },
+  });
+</script>

src/views/dashboard/order/list.vue

@@ -1,5 +1,174 @@
 <template>
-  <div> 订单列表 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #cover="{ record }">
+        <TableImg :size="150" :simpleShow="true" :imgList="[record.cover]" />
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'mdi:information-outline',
+              label: '详情',
+              onClick: () => {
+                go(`/order/list/detail/${record.orderNo}`);
+              },
+            },
+            {
+              icon: 'mdi:printer-outline',
+              label: '打印',
+              color: 'error',
+              onClick: () => {
+                createMessage.info(`暂未接入`);
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    FormProps,
+    TableAction,
+    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';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useGo } from '/@/hooks/web/usePage';
 
-<script lang="ts" setup></script>
+  export default defineComponent({
+    components: { BasicTable, TableAction, TableImg },
+    setup() {
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const { t } = useI18n();
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 60,
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNo',
+          width: 160,
+        },
+        {
+          title: '会员昵称',
+          dataIndex: 'name',
+          width: 80,
+        },
+        {
+          title: 'VR场景',
+          dataIndex: 'scene.name',
+          width: 80,
+        },
+        {
+          title: '订单类型',
+          dataIndex: 'orderType',
+          width: 80,
+        },
+        {
+          title: '订单状态',
+          dataIndex: 'orderStatus',
+          width: 60,
+        },
+        {
+          title: '发货状态',
+          dataIndex: 'shipingStatus',
+          width: 60,
+        },
+        {
+          title: '付款状态',
+          dataIndex: 'paymentStatus',
+          width: 60,
+        },
+        {
+          title: '快递公司',
+          dataIndex: 'shipingCompany',
+          width: 60,
+        },
+        {
+          title: '快递单号',
+          dataIndex: 'shipingNo',
+          width: 80,
+        },
+        {
+          title: '实际支付金额',
+          dataIndex: 'shipingAmount',
+          width: 80,
+        },
+        {
+          title: '下单时间',
+          dataIndex: 'createTime',
+          width: 120,
+        },
+        {
+          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,
+            },
+          },
+          {
+            field: 'userName',
+            label: '企业账号',
+            component: 'Input',
+            colProps: {
+              xl: 12,
+              xxl: 8,
+            },
+          },
+        ],
+      };
+
+      const [registerTable] = useTable({
+        title: '订单列表',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+      });
+
+      return {
+        registerTable,
+        createMessage,
+        t,
+        go,
+        uploadApi: uploadApi as any,
+      };
+    },
+  });
+</script>