base save

.env

@@ -2,7 +2,7 @@
 VITE_PORT = 3100
 
 # spa-title
-VITE_GLOB_APP_TITLE = zfb_admin
+VITE_GLOB_APP_TITLE = 指房宝中台管理系统
 
 # spa shortname
-VITE_GLOB_APP_SHORT_NAME = zfb_admin
+VITE_GLOB_APP_SHORT_NAME = zfb

mock/company/selectCompanyByType.ts

@@ -0,0 +1,61 @@
+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}`,
+
+      address: '@city(true)',
+      area: '@region',
+      areaNum: '@integer(1,20)',
+      code: '@integer(1,20)',
+      contacts: '',
+      createTime: '@datetime',
+      endTime: '@datetime',
+      expirationTime: '@datetime',
+      introduce: '@csentence(50,100)',
+      logo: '@url',
+      memoName: '@ctitle(10,20)',
+      name: '@ctitle(10,20)',
+      phone: phone,
+      point: null,
+      qualification: null,
+      sceneLogo: null,
+      startTime: '@datetime',
+      state: 0,
+      subNum: '@integer(1,20)',
+      subUsers: '',
+      type: null,
+      userId: '@integer(1000,50000)',
+      userName: phone,
+      website: '@url',
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/company/selectCompanyByType',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

mock/company/selectCompanyNum.ts

@@ -0,0 +1,77 @@
+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 个 随机手机号码
+
+// bgMusic: ""
+// cameraNum: 2
+// childName: null
+// expirationDate: null
+// expirationTime: 1622217599000
+// floorLogo: "http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/companyLogo/1629431551712_00000010_2021-08-16.zip"
+// id: 1107
+// name: "南山居"
+// num: 6
+// point: 99
+// sceneLogo: "http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/companyLogo/1629354038921_20210817162925_0_STITCH.jpg"
+// sceneNum: 0
+// subNum: 10
+// userName: "13112310255"
+
+const demoList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 1200; index++) {
+    const { phone } = mock({
+      phone: '@phone',
+    });
+    result.push({
+      id: `${index}`,
+
+      bgMusic: '@url()',
+      cameraNum: '@integer(1,20)',
+      childName: '@ctitle(10,20)',
+      expirationDate: '@datetime',
+      expirationTime: '@datetime',
+      floorLogo: '@image()',
+      name: '@ctitle(10,15)',
+      num: '@integer(1,20)',
+      point: '@integer(1,100)',
+      sceneLogo: '@image()',
+      sceneNum: '@integer(1,10)',
+      subNum: '@integer(1,20)',
+      userName: phone,
+      // userName: phone,
+      // subNum: '@integer(1,20)',
+      // sceneNum: '@integer(1,10)',
+      // num: '@integer(1,10)',
+      // floorLogo: '@image()',
+      // sceneLogo: '@image()',
+      // beginTime: '@datetime',
+      // endTime: '@datetime',
+      // address: '@city()',
+      // name: '@cname()',
+      // 'no|100000-10000000': 100000,
+      // 'status|1': ['正常', '启用', '停用'],
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/company/selectCompanyNum',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, demoList);
+    },
+  },
+] as MockMethod[];

package.json

@@ -42,6 +42,7 @@
     "ant-design-vue": "2.2.8",
     "axios": "^0.24.0",
     "crypto-js": "^4.1.1",
+    "cropperjs": "^1.5.12",
     "echarts": "^5.2.2",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",

src/api/corporation/list.ts

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

src/api/corporation/model.ts

@@ -0,0 +1,27 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+export interface ListItem {
+  id: number;
+  bgMusic: string;
+  cameraNum: string;
+  childName: string;
+  expirationDate: string;
+  expirationTime: string;
+  floorLogo: string;
+  name: string;
+  num: string;
+  point: string;
+  sceneLogo: string;
+  sceneNum: string;
+  subNum: string;
+  userName: string;
+}
+
+/**
+ * @description: Request list return value
+ */
+export type CorporationListGetResultModel = BasicFetchResult<ListItem>;

src/api/model/baseModel.ts

@@ -6,4 +6,44 @@ export interface BasicPageParams {
 export interface BasicFetchResult<T> {
   items: T[];
   total: number;
+  endRow: number;
+  firstPage: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  lastPage: number;
+  list: any[];
+  navigateFirstPage: number;
+  navigateLastPage: number;
+  navigatePages: number;
+  navigatepageNums: number[];
+  nextPage: number;
+  pageNum: number;
+  pageSize: number;
+  pages: number;
+  prePage: number;
+  size: number;
+  startRow: number;
 }
+
+// endRow: 10
+// firstPage: 1
+// hasNextPage: true
+// hasPreviousPage: false
+// isFirstPage: true
+// isLastPage: false
+// lastPage: 8
+// list: []
+// navigateFirstPage: 1
+// navigateLastPage: 8
+// navigatePages: 8
+// navigatepageNums: [1, 2, 3, 4, 5, 6, 7, 8]
+// nextPage: 2
+// pageNum: 1
+// pageSize: 10
+// pages: 13
+// prePage: 0
+// size: 10
+// startRow: 1
+// total: 130

src/locales/lang/zh-CN/sys.ts

@@ -65,8 +65,8 @@ export default {
     signUpFormTitle: '注册',
     forgetFormTitle: '重置密码',
 
-    signInTitle: '开箱即用的中后台管理系统',
-    signInDesc: '输入您的个人详细信息开始使用！',
+    signInTitle: '10分钟搞定实景VR',
+    signInDesc: '自助720度实景VR发布管理，自助、简单、安全、高效',
     policy: '我同意xxx隐私政策',
     scanSign: `扫码后点击"确认"，即可完成登录`,
 

src/views/dashboard/corporation/index.vue

@@ -1,45 +1,145 @@
 <template>
   <div class="p-4">
-    <BasicTable
-      title="企业账号"
-      :columns="columns"
-      :dataSource="data"
-      :canResize="canResize"
-      :loading="loading"
-      :striped="true"
-      :bordered="border"
-      showTableSetting
-      :pagination="pagination"
-      @columns-change="handleColumnChange"
-    >
-      <template #toolbar>
-        <!-- <a-button type="primary" @click="toggleCanResize">
-          {{ !canResize ? '自适应高度' : '取消自适应' }}
-        </a-button>
-        <a-button type="primary" @click="toggleBorder">
-          {{ !border ? '显示边框' : '隐藏边框' }}
-        </a-button>
-        <a-button type="primary" @click="toggleLoading"> 开启loading </a-button>
-        <a-button type="primary" @click="toggleStriped">
-          {{ !striped ? '显示斑马纹' : '隐藏斑马纹' }}
-        </a-button> -->
+    <BasicTable @register="registerTable">
+      <template #toolbar> </template>
+      <template #sceneLogo="{ sceneLogo }">
+        <CropperAvatar :showBtn="false" :width="80" :uploadApi="uploadApi" :value="sceneLogo" />
+        <!-- </CollapseContainer> -->
+      </template>
+
+      <template #floorLogo="{ floorLogo }">
+        <CropperAvatar :showBtn="false" :width="80" :uploadApi="uploadApi" :value="floorLogo" />
+      </template>
+
+      <template #bgMusic="{ bgMusic }">
+        <CropperAvatar :showBtn="false" :width="80" :uploadApi="uploadApi" :value="bgMusic" />
       </template>
     </BasicTable>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { BasicTable, ColumnChangeParam } from '/@/components/Table';
+  import {
+    BasicTable,
+    ColumnChangeParam,
+    useTable,
+    BasicColumn,
+    FormProps,
+  } from '/@/components/Table';
+  // import { CollapseContainer } from '/@/components/Container';
+  import { CropperAvatar } from '/@/components/Cropper';
+  import { uploadApi } from '/@/api/sys/upload';
+  // import { Avatar } from 'ant-design-vue';
+
   import { getBasicColumns, getBasicData } from './tableData';
+  import { ListApi } from '/@/api/corporation/list';
 
   export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, CropperAvatar },
     setup() {
       const canResize = ref(false);
       const loading = ref(false);
       const striped = ref(true);
       const border = ref(true);
       const pagination = ref<any>(true);
+
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '企业账户',
+          dataIndex: 'userName',
+          width: 120,
+        },
+        {
+          title: '企业名称',
+          dataIndex: 'name',
+          width: 120,
+        },
+        {
+          title: '加载界面LOGO',
+          dataIndex: 'sceneLogo',
+          slots: { customRender: 'sceneLogo' },
+          width: 180,
+        },
+        {
+          title: '加载地面LOGO',
+          dataIndex: 'floorLogo',
+          slots: { customRender: 'floorLogo' },
+          width: 180,
+        },
+        {
+          title: '背景音乐',
+          dataIndex: 'bgMusic',
+          slots: { customRender: 'bgMusic' },
+          width: 180,
+        },
+        {
+          title: '设备数量',
+          dataIndex: 'cameraNum',
+          width: 150,
+        },
+        {
+          title: '子账号数量',
+          dataIndex: 'subNum',
+          width: 120,
+        },
+        {
+          title: '上传场景数',
+          dataIndex: 'sceneNum',
+          width: 100,
+        },
+        {
+          title: '余额',
+          dataIndex: 'point',
+          width: 100,
+        },
+        {
+          title: '到期时间',
+          dataIndex: 'expirationTime',
+          width: 180,
+        },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'id',
+            label: 'id',
+            component: 'Input',
+            colProps: {
+              xl: 3,
+              xxl: 3,
+            },
+          },
+          {
+            field: 'userName',
+            label: '企业账号',
+            component: 'Input',
+            colProps: {
+              xl: 12,
+              xxl: 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 toggleCanResize() {
@@ -69,6 +169,8 @@
         toggleBorder,
         pagination,
         handleColumnChange,
+        registerTable,
+        uploadApi: uploadApi as any,
       };
     },
   });

src/views/dashboard/corporation/tableData.tsx

@@ -1,6 +1,21 @@
 import { FormProps, FormSchema } from '/@/components/Table';
 import { BasicColumn } from '/@/components/Table/src/types/table';
 
+// bgMusic: ""
+// cameraNum: 2
+// childName: null
+// expirationDate: null
+// expirationTime: 1622217599000
+// floorLogo: "http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/companyLogo/1629431551712_00000010_2021-08-16.zip"
+// id: 1107
+// name: "南山居"
+// num: 6
+// point: 99
+// sceneLogo: "http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/companyLogo/1629354038921_20210817162925_0_STITCH.jpg"
+// sceneNum: 0
+// subNum: 10
+// userName: "13112310255"
+
 export function getBasicColumns(): BasicColumn[] {
   return [
     {
@@ -10,7 +25,7 @@ export function getBasicColumns(): BasicColumn[] {
       width: 200,
     },
     {
-      title: '姓名',
+      title: '企业账户',
       dataIndex: 'name',
       width: 150,
       filters: [
@@ -255,6 +270,7 @@ export function getFormConfig(): Partial<FormProps> {
     ],
   };
 }
+
 export function getBasicData() {
   const data: any = (() => {
     const arr: any = [];