basely init project

src/locales/lang/en/routes/dashboard.ts

@@ -3,4 +3,7 @@ export default {
   about: 'About',
   workbench: 'Workbench',
   analysis: 'Analysis',
+  corporation: 'corporation',
+  corporationAccount: 'corporation account',
+  corporationVerify: 'corporation verify',
 };

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

@@ -3,4 +3,7 @@ export default {
   about: '关于',
   workbench: '工作台',
   analysis: '分析页',
+  corporation: '企业管理',
+  corporationAccount: '企业账号',
+  corporationVerify: '企业认证',
 };

src/router/routes/modules/about.ts

@@ -3,7 +3,7 @@ import type { AppRouteModule } from '/@/router/types';
 import { LAYOUT } from '/@/router/constant';
 import { t } from '/@/hooks/web/useI18n';
 
-const dashboard: AppRouteModule = {
+const about: AppRouteModule = {
   path: '/about',
   name: 'About',
   component: LAYOUT,
@@ -28,4 +28,4 @@ const dashboard: AppRouteModule = {
   ],
 };
 
-export default dashboard;
+export default about;

src/router/routes/modules/corporation.ts

@@ -0,0 +1,41 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const corporation: AppRouteModule = {
+  path: '/corporation',
+  name: 'Corporation',
+  component: LAYOUT,
+  redirect: '/corporation/index',
+  meta: {
+    // hideChildrenInMenu: true,
+    icon: 'carbon:location-company',
+    title: t('routes.dashboard.corporation'),
+    orderNo: 10,
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'corporationAccount',
+      component: () => import('/@/views/dashboard/corporation/index.vue'),
+      meta: {
+        title: t('routes.dashboard.corporationAccount'),
+        icon: 'ic:baseline-account-tree',
+        // hideMenu: true,
+      },
+    },
+    {
+      path: 'mange',
+      name: 'corporationVerify',
+      component: () => import('/@/views/dashboard/corporation/verify.vue'),
+      meta: {
+        title: t('routes.dashboard.corporationVerify'),
+        icon: 'ic:outline-verified',
+        // hideMenu: true,
+      },
+    },
+  ],
+};
+
+export default corporation;

src/router/routes/modules/dashboard.ts

@@ -9,7 +9,7 @@ const dashboard: AppRouteModule = {
   component: LAYOUT,
   redirect: '/dashboard/analysis',
   meta: {
-    orderNo: 10,
+    orderNo: 1000,
     icon: 'ion:grid-outline',
     title: t('routes.dashboard.dashboard'),
   },

src/views/dashboard/corporation/index.vue

@@ -0,0 +1,75 @@
+<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> -->
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicTable, ColumnChangeParam } from '/@/components/Table';
+  import { getBasicColumns, getBasicData } from './tableData';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const canResize = ref(false);
+      const loading = ref(false);
+      const striped = ref(true);
+      const border = ref(true);
+      const pagination = ref<any>(true);
+      pagination.value = { pageSize: 20 };
+
+      function toggleCanResize() {
+        canResize.value = !canResize.value;
+      }
+      function toggleStriped() {
+        striped.value = !striped.value;
+      }
+
+      function toggleBorder() {
+        border.value = !border.value;
+      }
+
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        console.log('ColumnChanged', data);
+      }
+
+      return {
+        columns: getBasicColumns(),
+        data: getBasicData(),
+        canResize,
+        loading,
+        striped,
+        border,
+        toggleStriped,
+        toggleCanResize,
+        toggleBorder,
+        pagination,
+        handleColumnChange,
+      };
+    },
+  });
+</script>

src/views/dashboard/corporation/tableData.tsx

@@ -0,0 +1,306 @@
+import { FormProps, FormSchema } from '/@/components/Table';
+import { BasicColumn } from '/@/components/Table/src/types/table';
+
+export function getBasicColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      fixed: 'left',
+      width: 200,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 150,
+      filters: [
+        { text: 'Male', value: 'male' },
+        { text: 'Female', value: 'female' },
+      ],
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 150,
+      sorter: true,
+      defaultHidden: true,
+    },
+    {
+      title: '开始时间',
+      width: 150,
+      sorter: true,
+      dataIndex: 'beginTime',
+    },
+    {
+      title: '结束时间',
+      width: 150,
+      sorter: true,
+      dataIndex: 'endTime',
+    },
+  ];
+}
+
+export function getBasicShortColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      width: 150,
+      dataIndex: 'id',
+      sorter: true,
+      sortOrder: 'ascend',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 80,
+    },
+  ];
+}
+
+export function getMultipleHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 200,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      sorter: true,
+      children: [
+        {
+          title: '编号',
+          dataIndex: 'no',
+          width: 120,
+          filters: [
+            { text: 'Male', value: 'male', children: [] },
+            { text: 'Female', value: 'female', children: [] },
+          ],
+        },
+
+        {
+          title: '开始时间',
+          dataIndex: 'beginTime',
+          width: 120,
+        },
+        {
+          title: '结束时间',
+          dataIndex: 'endTime',
+          width: 120,
+        },
+      ],
+    },
+  ];
+}
+
+export function getCustomHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 200,
+    },
+    {
+      // title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+      slots: { title: 'customTitle' },
+    },
+    {
+      // title: '地址',
+      dataIndex: 'address',
+      width: 120,
+      slots: { title: 'customAddress' },
+      sorter: true,
+    },
+
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 120,
+      filters: [
+        { text: 'Male', value: 'male', children: [] },
+        { text: 'Female', value: 'female', children: [] },
+      ],
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+      width: 120,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 120,
+    },
+  ];
+}
+const renderContent = ({ text, index }: { text: any; index: number }) => {
+  const obj: any = {
+    children: text,
+    attrs: {},
+  };
+  if (index === 9) {
+    obj.attrs.colSpan = 0;
+  }
+  return obj;
+};
+export function getMergeHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 300,
+      customRender: renderContent,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 300,
+      customRender: renderContent,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      colSpan: 2,
+      width: 120,
+      sorter: true,
+      customRender: ({ text, index }: { text: any; index: number }) => {
+        const obj: any = {
+          children: text,
+          attrs: {},
+        };
+        if (index === 2) {
+          obj.attrs.rowSpan = 2;
+        }
+        if (index === 3) {
+          obj.attrs.colSpan = 0;
+        }
+        return obj;
+      },
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      colSpan: 0,
+      filters: [
+        { text: 'Male', value: 'male', children: [] },
+        { text: 'Female', value: 'female', children: [] },
+      ],
+      customRender: renderContent,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+      width: 200,
+      customRender: renderContent,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 200,
+      customRender: renderContent,
+    },
+  ];
+}
+export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => {
+  const arr: any = [];
+  for (let index = 0; index < itemNumber; index++) {
+    arr.push({
+      field: `field${index}`,
+      label: `字段${index}`,
+      component: 'Input',
+      colProps: {
+        xl: 12,
+        xxl: 8,
+      },
+    });
+  }
+  return arr;
+};
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      ...getAdvanceSchema(5),
+      {
+        field: `field11`,
+        label: `Slot示例`,
+        component: 'Select',
+        slot: 'custom',
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+    ],
+  };
+}
+export function getBasicData() {
+  const data: any = (() => {
+    const arr: any = [];
+    for (let index = 0; index < 40; index++) {
+      arr.push({
+        id: `${index}`,
+        name: 'John Brown',
+        age: `1${index}`,
+        no: `${index + 10}`,
+        address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+        beginTime: new Date().toLocaleString(),
+        endTime: new Date().toLocaleString(),
+      });
+    }
+    return arr;
+  })();
+  return data;
+}
+
+export function getTreeTableData() {
+  const data: any = (() => {
+    const arr: any = [];
+    for (let index = 0; index < 40; index++) {
+      arr.push({
+        id: `${index}`,
+        name: 'John Brown',
+        age: `1${index}`,
+        no: `${index + 10}`,
+        address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+        beginTime: new Date().toLocaleString(),
+        endTime: new Date().toLocaleString(),
+        children: [
+          {
+            id: `l2-${index}`,
+            name: 'John Brown',
+            age: `1${index}`,
+            no: `${index + 10}`,
+            address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+            beginTime: new Date().toLocaleString(),
+            endTime: new Date().toLocaleString(),
+          },
+        ],
+      });
+    }
+    return arr;
+  })();
+
+  return data;
+}

src/views/dashboard/corporation/verify.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="p-4">
+    <div>xxxxxxxx</div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  const loading = ref(true);
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
+</script>