feat(devices): add device mock and data structrue

mock/devices/pageList.ts

@@ -0,0 +1,81 @@
+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 < 1200; index++) {
+    const { phone } = mock({
+      phone: '@phone',
+    });
+    result.push({
+      id: `${index}`,
+      activatedTime: '@datetime',
+      address: '@city(true)',
+      agentFrameworkId: null,
+      agentFrameworkName: null,
+      agentName: null,
+      balance: 'THETAYP41136787.OSC',
+      'cameraType|1': [1, 4, 9, 10, 6],
+      childName: 'THETAYP41136787.OSC',
+      companyId: null,
+      companyName: '@ctitle',
+      cooperationUser: null,
+      cooperationUserName: null,
+      country: 0,
+      createTime: null,
+      goodsId: null,
+      goodsName: null,
+      imageUrl: null,
+      inTime: null,
+      isExpire: null,
+      lastTime: null,
+      nickName: null,
+      orderSn: null,
+      outTime: null,
+      'own|1': [0, 1, 2, 3],
+      pic: null,
+      recStatus: 'A',
+      responseUserIncrement: null,
+      sceneNum: null,
+      'snCode|8': '@integer(1,20)',
+      space: null,
+      spaceContent: null,
+      spaceEndStr: null,
+      spaceEndTime: null,
+      spaceId: null,
+      spaceStr: null,
+      surplusDate: null,
+      totalSpace: 0,
+      totalSpaceStr: null,
+      type: null,
+      usedSpace: 0,
+      usedSpaceStr: null,
+      userId: '@integer(1,20)',
+      userIncrementId: null,
+      userName: phone,
+      wifiName: 'THETAYP41136787.OSC',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/camera/pageList',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

src/api/device/list.ts

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

src/api/device/model.ts

@@ -0,0 +1,59 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface DeviceListItem {
+  id: number;
+  activatedTime: string;
+  address: string;
+  agentFrameworkId: string;
+  agentFrameworkName: string;
+  agentName: string;
+  balance: string;
+  cameraType: number;
+  childName: string;
+  companyId: string;
+  companyName: string;
+  cooperationUser: string;
+  cooperationUserName: string;
+  country: number;
+  createTime: string;
+  goodsId: number;
+  goodsName: string;
+  imageUrl: string;
+  inTime: string;
+  isExpire: string;
+  lastTime: string;
+  nickName: string;
+  orderSn: string;
+  outTime: string;
+  own: number;
+  pic: string;
+  recStatus: string;
+  responseUserIncrement: string;
+  sceneNum: string;
+  snCode: string;
+  space: string;
+  spaceContent: string;
+  spaceEndStr: string;
+  spaceEndTime: string;
+  spaceId: string;
+  spaceStr: string;
+  surplusDate: string;
+  totalSpace: number;
+  totalSpaceStr: string;
+  type: string;
+  usedSpace: number;
+  usedSpaceStr: string;
+  userId: string;
+  userIncrementId: string;
+  userName: string;
+  wifiName: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type RentListGetResultModel = BasicFetchResult<DeviceListItem>;

src/views/dashboard/devices/list.vue

@@ -1,5 +1,198 @@
 <template>
-  <div> 设备管理 </div>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+
+      <template #cameraType="{ record }">
+        <Tag color="green">{{ rendercameraTypeLabel(record.cameraType) }} </Tag></template
+      >
+      <template #own="{ record }">
+        {{ renderOwnTypeLabel(record.own) }}
+      </template>
+
+      <template #action>
+        <TableAction
+          :actions="[
+            {
+              icon: 'clarity:note-edit-line',
+              label: '编辑',
+              onClick: () => {
+                createMessage.info(`暂未接入`);
+              },
+            },
+            {
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: () => {
+                  createMessage.info(`暂未接入`);
+                },
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Tag } from 'ant-design-vue';
+  import { ListApi } from '/@/api/device/list';
+  // param type 0
+  export default defineComponent({
+    components: { BasicTable, TableAction, Tag },
+    setup() {
+      const { createMessage } = useMessage();
+      const columns: BasicColumn[] = [
+        {
+          title: '设备ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '手机号（用户名）',
+          dataIndex: 'userName',
+          width: 230,
+        },
+        {
+          title: '设备类型',
+          dataIndex: 'cameraType',
+          width: 230,
+          slots: { customRender: 'cameraType' },
+        },
+        {
+          title: 'sn码',
+          dataIndex: 'snCode',
+          width: 120,
+        },
+        {
+          title: 'wifi',
+          dataIndex: 'wifiName',
+          width: 180,
+        },
+        {
+          title: '激活时间',
+          dataIndex: 'activatedTime',
+          width: 150,
+        },
+        {
+          title: '出货类型',
+          dataIndex: 'own',
+          slots: { customRender: 'own' },
+          width: 120,
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'companyName',
+          width: 120,
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'part',
+            component: 'Select',
+            label: '选择',
+            defaultValue: '1',
+            colProps: {
+              span: 4,
+            },
+            componentProps: {
+              options: [
+                {
+                  label: '全部',
+                  value: '1',
+                  key: '1',
+                },
+                {
+                  label: '正常',
+                  value: '2',
+                  key: '2',
+                },
+                {
+                  label: '已关闭',
+                  value: '2',
+                  key: '2',
+                },
+              ],
+            },
+          },
+          {
+            field: 'phone',
+            label: '手机号',
+            component: 'Input',
+            colProps: {
+              span: 6,
+            },
+          },
+          {
+            field: 'fieldTime',
+            component: 'RangePicker',
+            label: '时间字段',
+            colProps: {
+              span: 8,
+            },
+          },
+        ],
+      };
+      // { getForm }
+      const [registerTable] = useTable({
+        title: '设备列表',
+        api: ListApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+      });
+      // pagination.value = { pageSize: 20 };
+      function rendercameraTypeLabel(cameraType: number): string {
+        switch (cameraType) {
+          case 4:
+            return '四维看看Pro八目相机';
+          case 1:
+            return '四维看看Lite双目相机';
+          case 9:
+            return '四维看看双目转台相机';
+          case 10:
+            return '四维看看激光相机';
+          case 6:
+            return '第三方相机';
+          default:
+            return '';
+        }
+      }
+      function renderOwnTypeLabel(type: number): string {
+        switch (type) {
+          case 0:
+            return '正常销售';
+          case 2:
+            return '礼品赠送';
+          case 1:
+            return '员工自用';
+          case 3:
+            return '其它';
+          default:
+            return '';
+        }
+      }
 
-<script lang="ts" setup></script>
+      return {
+        registerTable,
+        createMessage,
+        rendercameraTypeLabel,
+        renderOwnTypeLabel,
+      };
+    },
+  });
+</script>