xiutgai

src/api/account/index.ts

@@ -0,0 +1,26 @@
+import { defHttp } from '/@/utils/http/axios';
+import {
+  PageParams,
+  userList,
+} from './model';
+import { Result } from '/#/axios';
+
+enum Api {
+  pageList = '/newV4/service/manage/user/list',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const ListApi = (params: PageParams) =>
+  defHttp.post<userList>({
+    url: Api.pageList,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+

src/api/account/model.ts

@@ -0,0 +1,100 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+export interface userList {
+  id: number;
+  userName: string;
+  email?: string;
+  nickName: string;
+  vip: number;
+  incrementCount: number;
+  surDownNum: number;
+  cameraCount: number;
+  sceneNum: number;
+}
+export interface overallList {
+  searchKey: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+export interface overallDelete {
+  id: string;
+}
+export interface sceneMoveParams {
+  snCode: string;
+  num: string;
+}
+export interface sceneControlParams {
+  num: string;
+}
+export interface addCameraParams {
+  address: string;
+  balance: string;
+  cameraType: string;
+  childName: string;
+  companyId?: string;
+  orderSn?: string;
+  own: string;
+  snCode?: string;
+  wifiName: string;
+}
+export interface updateParams {
+  id: number;
+  canShow: number;
+  liveRoomCapacities: number;
+}
+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/router/routes/modules/account.ts

@@ -5,21 +5,21 @@ import { LAYOUT } from '/@/router/constant';
 export const accountRoute: AppRouteRecordRaw = {
   path: '/account',
   name: 'Account',
-  redirect: '/account/overview',
+  redirect: '/account/user',
   component: LAYOUT,
   meta: {
     title: t('routes.dashboard.account'),
     icon: 'la:file-invoice-dollar',
-    // hideChildrenInMenu: true,
     orderNo: 190,
   },
   children: [
     {
-      path: 'overview',
-      name: 'Overview',
-      component: () => import('/@/views/account/overview/index.vue'),
+      path: 'user',
+      name: 'User',
+      component: () => import('/@/views/account/index.vue'),
       meta: {
-        title: t('routes.dashboard.overview'),
+        title: t('routes.dashboard.account'),
+        hideChildrenInMenu: true,
       },
     },
     {
@@ -28,16 +28,30 @@ export const accountRoute: AppRouteRecordRaw = {
       component: () => import('/@/views/account/details/index.vue'),
       meta: {
         title: t('routes.dashboard.details'),
+        hideChildrenInMenu: true,
+        hideMenu: true,
       },
     },
-    {
-      path: 'product',
-      name: 'Product',
-      component: () => import('/@/views/account/product/index.vue'),
-      meta: {
-        title: t('routes.dashboard.productData'),
-      },
-    },
+    // {
+    //   path: 'overview',
+    //   name: 'Overview',
+    //   component: () => import('/@/views/account/overview/index.vue'),
+    //   meta: {
+    //     title: t('routes.dashboard.overview'),
+    //     hideChildrenInMenu: true,
+    //     hideMenu: true,
+    //   },
+    // },
+    // {
+    //   path: 'product',
+    //   name: 'Product',
+    //   component: () => import('/@/views/account/product/index.vue'),
+    //   meta: {
+    //     title: t('routes.dashboard.productData'),
+    //     hideChildrenInMenu: true,
+    //     hideMenu: true,
+    //   },
+    // },
   ],
 };
 export default accountRoute;

src/views/account/data.ts

@@ -196,3 +196,44 @@ export const refundTimeTableSchema: BasicColumn[] = [
     dataIndex: 'recStatus',
   },
 ];
+
+export const userListSchema: BasicColumn[] = [
+  {
+    title: '用户ID',
+    width: 150,
+    dataIndex: 'id',
+  },{
+    title: '昵称',
+    width: 150,
+    dataIndex: 'nickName',
+  },{
+    title: '账号',
+    width: 150,
+    dataIndex: 'userName',
+  },{
+    title: '邮箱',
+    width: 150,
+    dataIndex: 'email',
+  },{
+    title: '注册时间',
+    width: 150,
+    dataIndex: 'createTime',
+    customRender: ({ record }) => {
+      return (
+        record.createTime &&
+        h(Time, {
+          value: record.createTime,
+          mode: 'datetime',
+        })
+      );
+    },
+  },
+  {
+    title: '四维看看会员',
+    width: 150,
+    dataIndex: 'vip',
+    customRender: ({ record }) => {
+      return record.vip == 0?'否':'是'
+    }
+    }
+];

src/views/account/details/AddModal.vue

@@ -1,259 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    title="新增相机"
-    @visible-change="handleVisibleChange"
-    @cancel="resetFields"
-    @ok="handleSubmit"
-  >
-    <div class="pt-2px pr-3px">
-      <BasicForm @register="registerForm" :model="model" >
-        <template #text="{ model, field }">
-          {{ model[field]  }}
-        </template>
-      </BasicForm>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { uploadApi, SpaceSdkUpload } from '/@/api/product/index';
-  import { useI18n } from '/@/hooks/web/useI18n';
-
-  const { t } = useI18n();
-  export default defineComponent({
-    components: { BasicModal, BasicForm },
-    props: {
-      userData: { type: Object },
-    },
-    emits: ['update', 'register'],
-    setup(props, { emit }) {
-      const modelRef = ref({});
-      const fileFlow = reactive({
-        file:null
-      })
-      const { createMessage } = useMessage();
-      const schemas: FormSchema[] = [
-        {
-          field: 'type',
-          component: 'Input',
-          label: t('routes.product.types'),
-          slot: 'text',
-          colProps: {
-            span: 24,
-          },
-          // required: true,
-        },
-        {
-          field: 'version',
-          component: 'Input',
-          label: t('routes.product.version'),
-          required: true,
-          colProps: {
-            span: 24,
-          },
-          rules: [
-            {
-              required: true,
-              // @ts-ignore
-              validator: async (rule, value) => {
-                if (!value) {
-                  return Promise.reject(t('common.inputText')+t('routes.product.version'));
-                }
-                if(/.*[\u4e00-\u9fa5]+.*$/.test(value)){
-                  /* eslint-disable-next-line */
-                  return Promise.reject('不支持中文字符');
-                }
-                return Promise.resolve();
-              },
-              trigger: 'change',
-            },
-          ],
-          componentProps: {
-            maxLength: 15,
-            onChange: (data) => {
-              console.log('data', data);
-            },
-          },
-        },
-        // {
-        //   field: 'minVersion',
-        //   component: 'Input',
-        //   label: t('routes.product.minVersion'),
-        //   required: true,
-        //   rules: [
-        //     {
-        //       required: true,
-        //       // @ts-ignore
-        //       validator: async (rule, value) => {
-        //         const regPos = /.*[\u4e00-\u9fa5]+.*$/; // 非中文
-        //         if (!value) {
-        //           return Promise.reject(t('common.inputText')+t('routes.product.minVersion'));
-        //         }
-        //         if (regPos.test(value)) {
-        //           /* eslint-disable-next-line */
-        //           return Promise.reject('不支持中文字符');
-        //         }
-        //         return Promise.resolve();
-        //       },
-        //       trigger: 'change',
-        //     },
-        //   ],
-        //   colProps: {
-        //     span: 24,
-        //   },
-        // },
-        {
-          field: 'imprintCh',
-          component: 'InputTextArea',
-          required: true,
-          label: t('routes.product.description_zh'),
-          colProps: {
-            span: 24,
-          },
-        },
-        {
-          field: 'imprintEn',
-          component: 'InputTextArea',
-          required: true,
-          label: t('routes.product.description_en'),
-          colProps: {
-            span: 24,
-          },
-        },
-        {
-          field: 'file',
-          component: 'Upload',
-          label: t('routes.product.file'),
-          required: true,
-          rules: [{ required: true, message: t('common.uploadMessge') }],
-          // helpMessage: t('routes.corporation.uploadHelp'),
-          itemProps: {
-            validateTrigger: 'onBlur',
-          },
-          componentProps: {
-            api: uploadApi,
-            maxNumber: 1,
-            maxSize: 1000,
-            fileFlow:true,
-            accept: ['4dage','jpg','png'],
-            afterFetch: function (data) {
-              console.log('uploadApi',data)
-              Reflect.set(data, 'url', data.file);
-              fileFlow.file = data.file
-              return data;
-            },
-          },
-
-          colProps: {
-            span: 22,
-          },
-        },
-        {
-          field: 'isTop',
-          component: 'CheckboxGroup',
-          label: '官网置顶',
-          componentProps: {
-            options: [
-              { label: '(勾选此项，将在四维看看官网置顶)', value: 1 },
-            ],
-          },
-          colProps: {
-            span: 24,
-          },
-        },
-      ];
-      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      onMounted(() => {});
-      let addListFunc = () => {};
-      const [register, { closeModal }] = useModalInner((data) => {
-        data && onDataReceive(data);
-      });
-      function renderOwnTypeLabel(type: number): string {
-        switch (type) {
-          case 2:
-            return t('routes.product.sdkType.2');
-          case 1:
-            return t('routes.product.sdkType.1');
-          case 3:
-            return t('routes.product.type.3');
-          default:
-            return '';
-        }
-      }
-      function rendercameraTypeLabel(cameraType: number): string {
-        switch (cameraType) {
-          case 4:
-            return t('routes.devices.cameraName.4');
-          case 1:
-            return t('routes.devices.cameraName.1');
-          case 9:
-            return t('routes.devices.cameraName.9');
-          case 10:
-            return t('routes.devices.cameraName.10');
-          case 6:
-            return t('routes.devices.cameraName.6');
-          default:
-            return '';
-        }
-      }
-      function onDataReceive(data) {
-        modelRef.value = data
-        resetFields();
-        setFieldsValue({
-          type:renderOwnTypeLabel(Number(data)),
-        });
-      }
-      const handleSubmit = async () => {
-        try {
-          const params = await validate();
-          const apiData = {
-            data:{
-            ...params as any,
-            platformType:modelRef.value,
-            file:fileFlow.file,
-            isTop:params.isTop && params.isTop[0] || 0
-            }
-          }
-          console.log('res', apiData);
-          const res = await SpaceSdkUpload(apiData);
-          console.log('res', res);
-          closeModal();
-          resetFields();
-          createMessage.success(t('common.optSuccess'));
-          emit('update');
-        } catch (error) {
-          console.log('not passing', error);
-        }
-      };
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-      return {
-        register,
-        rendercameraTypeLabel,
-        renderOwnTypeLabel,
-        schemas,
-        registerForm,
-        model: modelRef,
-        fileFlow,
-        handleVisibleChange,
-        handleSubmit,
-        addListFunc,
-        resetFields,
-        t,
-      };
-    },
-  });
-</script>

src/views/account/details/EditModal.vue

@@ -1,236 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    title="编辑相机"
-    @visible-change="handleVisibleChange"
-    @cancel="resetFields"
-    @ok="handleSubmit"
-  >Checkbox
-    <div class="pt-2px pr-3px">
-      <BasicForm @register="registerForm" :model="model" >
-        <template #text="{ model, field }">
-          {{ model[field]  }}
-        </template>
-        <template #Checkbox="{ model, field }">
-          <div>
-            <Checkbox v-model:checked="model[field]">(勾选此项，将在四维看看官网置顶)</Checkbox>
-          </div>
-        </template>
-      </BasicForm>
-    </div>
-  </BasicModal>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { Checkbox  } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { uploadApi, SpaceSdkUpdate } from '/@/api/product/index';
-
-  const { t } = useI18n();
-  export default defineComponent({
-    components: { BasicModal, BasicForm, Checkbox },
-    props: {
-      userData: { type: Object },
-    },
-    emits: ['update', 'register'],
-    setup(props, { emit }) {
-      const modelRef = ref({});
-      const fileFlow = reactive({
-        file:null
-      })
-      const { createMessage } = useMessage();
-      const schemas: FormSchema[] = [
-        {
-          field: 'fileUrl',
-          component: 'Input',
-          label: t('routes.product.types'),
-          show: false,
-          colProps: {
-            span: 24,
-          },
-        },{
-          field: 'id',
-          component: 'Input',
-          label: t('routes.product.types'),
-          show: false,
-          colProps: {
-            span: 24,
-          },
-        },{
-          field: 'platformType',
-          component: 'Input',
-          label: t('routes.product.types'),
-          show: false,
-          colProps: {
-            span: 24,
-          },
-        },{
-          field: 'type',
-          component: 'Input',
-          label: t('routes.product.types'),
-          slot: 'text',
-          colProps: {
-            span: 24,
-          },
-        },
-        {
-          field: 'version',
-          component: 'Input',
-          label: t('routes.product.version'),
-          required: true,
-          colProps: {
-            span: 24,
-          },
-          rules: [
-            {
-              required: true,
-              // @ts-ignore
-              validator: async (rule, value) => {
-                if (!value) {
-                  return Promise.reject(t('common.inputText')+t('routes.product.version'));
-                }
-                if(/.*[\u4e00-\u9fa5]+.*$/.test(value)){
-                  /* eslint-disable-next-line */
-                  return Promise.reject('不支持中文字符');
-                }
-                return Promise.resolve();
-              },
-              trigger: 'change',
-            },
-          ],
-          componentProps: {
-            maxLength: 15,
-            onChange: (data) => {
-              console.log('data', data);
-            },
-          },
-        },
-        {
-          field: 'imprintCh',
-          component: 'InputTextArea',
-          required: true,
-          label: t('routes.product.description_zh'),
-          colProps: {
-            span: 24,
-          },
-        },
-        {
-          field: 'imprintEn',
-          component: 'InputTextArea',
-          required: true,
-          label: t('routes.product.description_en'),
-          colProps: {
-            span: 24,
-          },
-        },
-        {
-          field: 'isTop',
-          component: 'CheckboxGroup',
-          label: '官网置顶',
-          slot:'Checkbox',
-          componentProps: {
-            options: [
-              { label: '(勾选此项，将在四维看看官网置顶)', value: 1 },
-            ],
-          },
-          colProps: {
-            span: 24,
-          },
-        },
-      ];
-      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
-      onMounted(() => {});
-      let addListFunc = () => {};
-      const [register, { closeModal }] = useModalInner((data) => {
-        console.log('useModalInner',data)
-        data && onDataReceive(data);
-      });
-      function renderOwnTypeLabel(type: number): string {
-        switch (type) {
-          case 2:
-            return t('routes.product.sdkType.2');
-          case 1:
-            return t('routes.product.sdkType.1');
-          case 3:
-            return t('routes.product.type.3');
-          default:
-            return '';
-        }
-      }
-      function rendercameraTypeLabel(cameraType: number): string {
-        switch (cameraType) {
-          case 4:
-            return t('routes.devices.cameraName.4');
-          case 1:
-            return t('routes.devices.cameraName.1');
-          case 9:
-            return t('routes.devices.cameraName.9');
-          case 10:
-            return t('routes.devices.cameraName.10');
-          case 6:
-            return t('routes.devices.cameraName.6');
-          default:
-            return '';
-        }
-      }
-      function onDataReceive(data) {
-        modelRef.value = data
-        let setData = {
-          ...data,
-          type:renderOwnTypeLabel(Number(data.type)),
-        }
-        console.log('onDataReceive',data,setData)
-        resetFields();
-        setFieldsValue(setData);
-      }
-      const handleSubmit = async () => {
-        try {
-          const params = await validate();
-          console.log('modelRef',params)
-          const apiData = {
-            // ...modelRef.value,
-            ...params as any,
-            isTop:params.isTop?1:0
-          }
-          console.log('res', apiData);
-          const res = await SpaceSdkUpdate(apiData);
-          console.log('res', res);
-          closeModal();
-          resetFields();
-          createMessage.success(t('common.optSuccess'));
-          emit('update');
-        } catch (error) {
-          console.log('not passing', error);
-        }
-      };
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
-      }
-      return {
-        register,
-        rendercameraTypeLabel,
-        renderOwnTypeLabel,
-        schemas,
-        registerForm,
-        model: modelRef,
-        fileFlow,
-        handleVisibleChange,
-        handleSubmit,
-        addListFunc,
-        resetFields,
-        t,
-      };
-    },
-  });
-</script>

src/views/account/details/data.ts

@@ -0,0 +1,144 @@
+import { FormSchema } from '/@/components/Form/index';
+
+export interface ListItem {
+  key: string;
+  title: string;
+  description: string;
+  extra?: string;
+  avatar?: string;
+  color?: string;
+}
+
+// tab的list
+export const settingList = [
+  {
+    key: '1',
+    name: '用户概览',
+    component: 'Overview',
+  },
+  {
+    key: '2',
+    name: '订单列表',
+    component: 'OrderList',
+  },
+  {
+    key: '3',
+    name: '产品数据',
+    component: 'Product',
+  },
+];
+
+// 基础设置 form
+export const baseSetschemas: FormSchema[] = [
+  {
+    field: 'email',
+    component: 'Input',
+    label: '邮箱',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'name',
+    component: 'Input',
+    label: '昵称',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'introduction',
+    component: 'InputTextArea',
+    label: '个人简介',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'phone',
+    component: 'Input',
+    label: '联系电话',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '所在地区',
+    colProps: { span: 18 },
+  },
+];
+
+// 安全设置 list
+export const secureSettingList: ListItem[] = [
+  {
+    key: '1',
+    title: '账户密码',
+    description: '当前密码强度：：强',
+    extra: '修改',
+  },
+  {
+    key: '2',
+    title: '密保手机',
+    description: '已绑定手机：：138****8293',
+    extra: '修改',
+  },
+  {
+    key: '3',
+    title: '密保问题',
+    description: '未设置密保问题，密保问题可有效保护账户安全',
+    extra: '修改',
+  },
+  {
+    key: '4',
+    title: '备用邮箱',
+    description: '已绑定邮箱：：ant***sign.com',
+    extra: '修改',
+  },
+  {
+    key: '5',
+    title: 'MFA 设备',
+    description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
+    extra: '修改',
+  },
+];
+
+// 账号绑定 list
+export const accountBindList: ListItem[] = [
+  {
+    key: '1',
+    title: '绑定淘宝',
+    description: '当前未绑定淘宝账号',
+    extra: '绑定',
+    avatar: 'ri:taobao-fill',
+    color: '#ff4000',
+  },
+  {
+    key: '2',
+    title: '绑定支付宝',
+    description: '当前未绑定支付宝账号',
+    extra: '绑定',
+    avatar: 'fa-brands:alipay',
+    color: '#2eabff',
+  },
+  {
+    key: '3',
+    title: '绑定钉钉',
+    description: '当前未绑定钉钉账号',
+    extra: '绑定',
+    avatar: 'ri:dingding-fill',
+    color: '#2eabff',
+  },
+];
+
+// 新消息通知 list
+export const msgNotifyList: ListItem[] = [
+  {
+    key: '1',
+    title: '账户密码',
+    description: '其他用户的消息将以站内信的形式通知',
+  },
+  {
+    key: '2',
+    title: '系统消息',
+    description: '系统消息将以站内信的形式通知',
+  },
+  {
+    key: '3',
+    title: '待办任务',
+    description: '待办任务将以站内信的形式通知',
+  },
+];

src/views/account/details/index.vue

@@ -1,151 +1,59 @@
 <template>
-  <PageWrapper contentBackground>
-    <template #footer>
-      <a-tabs v-model:activeKey="searchInfo.type" @change="tabChange">
-        <a-tab-pane key="1" :tab="t('routes.account.type.1')" />
-        <a-tab-pane key="2" :tab="t('routes.account.type.2')" />
-        <a-tab-pane key="3" :tab="t('routes.account.type.3')" />
-      </a-tabs>
-    </template>
-    <div class="desc-wrap-BasicTable">
-      <BasicTable @register="registerTimeTable"></BasicTable>
+  <ScrollContainer>
+    <div ref="wrapperRef" :class="prefixCls">
+      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
+        <template v-for="item in settingList" :key="item.key">
+          <TabPane :tab="item.name">
+            <component :is="item.component" />
+          </TabPane>
+        </template>
+      </Tabs>
     </div>
-    <AddModal @update="reload" @register="registerAddModal" />
-    <EditModal @register="registerEditModal" @update="reload" />
-  </PageWrapper>
+  </ScrollContainer>
 </template>
+
 <script lang="ts">
-import { defineComponent, reactive, h } from 'vue';
-import { BasicTable, useTable, FormProps, TableAction, BasicColumn } from '/@/components/Table';
-import { PageWrapper } from '/@/components/Page';
-import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
-import { SpaceSdkList, SpaceSdkDelete, SpaceSdkOnline } from '/@/api/product';
-import { refundTimeTableSchema } from '../data';
-import { useModal } from '/@/components/Modal';
-import { useI18n } from '/@/hooks/web/useI18n';
-import AddModal from './AddModal.vue';
-import EditModal from './EditModal.vue';
-import { useMessage } from '/@/hooks/web/useMessage';
-export default defineComponent({
-  components: {
-    BasicTable,
-    AddModal,
-    EditModal,
-    TableAction,
-    PageWrapper,
-    [Divider.name]: Divider,
-    [Card.name]: Card,
-    Empty,
-    [Descriptions.name]: Descriptions,
-    [Descriptions.Item.name]: Descriptions.Item,
-    [Steps.name]: Steps,
-    [Steps.Step.name]: Steps.Step,
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-  },
-  setup() {
-    const { t } = useI18n();
-    const searchInfo = reactive<Recordable>({
-      type: '1',
-    });
-    const [registerAddModal, { openModal: openAddModal }] = useModal();
-    const [registerEditModal, { openModal: openEditModal }] = useModal();
-    const { createMessage } = useMessage();
-    const searchForm: Partial<FormProps> = {
-      labelWidth: 100,
-      schemas: [
-        {
-          field: 'sceneName',
-          label: t('routes.operate.releaseTime'),
-          component: 'RangePicker',
-          componentProps: {
-            maxLength: 100,
-            format: 'YYYY-MM-DD HH:mm',
-            showTime: true,
-          },
-          colProps: {
-            xl: 11,
-            xxl: 11,
-          },
+  import { defineComponent } from 'vue';
+  import { Tabs } from 'ant-design-vue';
+
+  import { ScrollContainer } from '/@/components/Container/index';
+  import { settingList } from './data';
+
+  import Overview from '../overview/index.vue';
+  import OrderList from '../overview/index.vue';
+  import Product from '../product/index.vue';
+
+  export default defineComponent({
+    components: {
+      ScrollContainer,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      Overview,
+      OrderList,
+      Product,
+    },
+    setup() {
+      return {
+        prefixCls: 'account-setting',
+        settingList,
+        tabBarStyle: {
+          width: '220px',
         },
-        {
-          field: 'version',
-          label: '订单号',
-          component: 'Input',
-          componentProps: {
-            maxLength: 100,
-          },
-          colProps: {
-            xl: 6,
-            xxl: 6,
-          },
-        },
-      ],
-    };
-    const [registerTimeTable, { reload }] = useTable({
-      api: SpaceSdkList,
-      title: '订单列表',
-      columns: refundTimeTableSchema,
-      useSearchForm: true,
-      formConfig: searchForm,
-      showTableSetting: true,
-      showIndexColumn:false,
-      rowKey: 'id',
-      fetchSetting: {
-        pageField: 'pageNum',
-        sizeField: 'pageSize',
-        listField: 'list',
-        totalField: 'total',
-      },
-      searchInfo: searchInfo,
-      canResize: false,
-    });
-    function tabChange(val: string) {
-      console.log('tabChange', val);
-      reload();
-    }
-    async function handleDelete(record: Recordable) {
-      console.log('点击了删除', record);
-      await SpaceSdkDelete({ id: record.id });
-      createMessage.success(t('common.optSuccess'));
-      reload();
-    }
-    function handleOpen(record: Recordable) {
-      console.log('点击了启用', record);
-    }
-    async function handleOff(record: Recordable) {
-      await SpaceSdkOnline({ id: record.id, status:2 });//状态 0 - 未发布 1 -发布  2-下架
-      createMessage.success(t('common.optSuccess'));
-      reload();
+      };
+    },
+  });
+</script>
+<style lang="less">
+  .account-setting {
+    margin: 12px;
+    background-color: @component-background;
+
+    .base-title {
+      padding-left: 0;
     }
-    function handleEdit(record: Recordable) {
-      console.log('record', record);
-      openEditModal(true, {
-        ...record,
-      });
+
+    .ant-tabs-tab-active {
+      background-color: @item-active-bg;
     }
-    return {
-      registerTimeTable,
-      handleDelete,
-      handleOpen,
-      tabChange,
-      handleOff,
-      reload,
-      registerAddModal,
-      registerEditModal,
-      openAddModal,
-      handleEdit,
-      t,
-      searchInfo,
-    };
-  },
-});
-</script>
-<style lang="less" scoped>
-.desc-wrap-BasicTable {
-  background-color: #f0f2f5;
-  .vben-basic-table-form-container {
-    padding: 0;
   }
-}
 </style>

src/views/account/index.vue

@@ -1,61 +1,120 @@
 <template>
-  <ScrollContainer>
-    <div ref="wrapperRef" :class="prefixCls">
-      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
-        <template v-for="item in settingList" :key="item.key">
-          <TabPane :tab="item.name">
-            <!-- <component :is="item.component" /> -->
-          </TabPane>
+      <BasicTable @register="registerTimeTable">
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                icon: 'mdi:account-details',
+                onClick: handleEdit.bind(null, record),
+              }
+            ]"
+          />
         </template>
-      </Tabs>
-    </div>
-  </ScrollContainer>
+      </BasicTable>
 </template>
-
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Tabs } from 'ant-design-vue';
-
-  import { ScrollContainer } from '/@/components/Container/index';
-  import { settingList } from './data';
-
-  import BaseSetting from './BaseSetting.vue';
-  import SecureSetting from './SecureSetting.vue';
-  import AccountBind from './AccountBind.vue';
-  import MsgNotify from './MsgNotify.vue';
-
-  export default defineComponent({
-    components: {
-      ScrollContainer,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      BaseSetting,
-      SecureSetting,
-      AccountBind,
-      MsgNotify,
-    },
-    setup() {
-      return {
-        prefixCls: 'account-setting',
-        settingList,
-        tabBarStyle: {
-          width: '220px',
+import { defineComponent } from 'vue';
+import { BasicTable, useTable, FormProps, TableAction } from '/@/components/Table';
+import { PageWrapper } from '/@/components/Page';
+import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
+import { ListApi } from '/@/api/account';
+import { userListSchema } from './data';
+import { useModal } from '/@/components/Modal';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { useRouter } from 'vue-router'
+// import { useMessage } from '/@/hooks/web/useMessage';
+export default defineComponent({
+  components: {
+    BasicTable,
+    TableAction,
+    PageWrapper,
+    [Divider.name]: Divider,
+    [Card.name]: Card,
+    Empty,
+    [Descriptions.name]: Descriptions,
+    [Descriptions.Item.name]: Descriptions.Item,
+    [Steps.name]: Steps,
+    [Steps.Step.name]: Steps.Step,
+    [Tabs.name]: Tabs,
+    [Tabs.TabPane.name]: Tabs.TabPane,
+  },
+  setup() {
+    const { t } = useI18n();
+    const [registerAddModal, { openModal: openAddModal }] = useModal();
+    const [registerEditModal, { openModal: openEditModal }] = useModal();
+    // const { createMessage } = useMessage(); 
+    const router = useRouter()
+    const searchForm: Partial<FormProps> = {
+      labelWidth: 100,
+      schemas: [
+        {
+          field: 'version',
+          label: '版本号',
+          component: 'Input',
+          componentProps: {
+            maxLength: 100,
+          },
+          colProps: {
+            xl: 6,
+            xxl: 6,
+          },
         },
-      };
-    },
-  });
-</script>
-<style lang="less">
-  .account-setting {
-    margin: 12px;
-    background-color: @component-background;
-
-    .base-title {
-      padding-left: 0;
+      ],
+    };
+    const [registerTimeTable, { reload }] = useTable({
+      api: ListApi,
+      title: '用户列表',
+      columns: userListSchema,
+      useSearchForm: true,
+      formConfig: searchForm,
+      showTableSetting: true,
+      showIndexColumn:false,
+      rowKey: 'id',
+      fetchSetting: {
+        pageField: 'pageNum',
+        sizeField: 'pageSize',
+        listField: 'list',
+        totalField: 'total',
+      },
+      actionColumn: {
+        width: 100,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+      },
+      canResize: false,
+    });
+    function tabChange(val: string) {
+      console.log('tabChange', val);
+      reload();
+    }
+    function handleOpen(record: Recordable) {
+      console.log('点击了启用', record);
     }
-
-    .ant-tabs-tab-active {
-      background-color: @item-active-bg;
+    function handleEdit(record: Recordable) {
+      console.log('record', record);
+      router.push({path:'details'})
     }
+    return {
+      registerTimeTable,
+      handleOpen,
+      tabChange,
+      reload,
+      registerAddModal,
+      registerEditModal,
+      openAddModal,
+      handleEdit,
+      t,
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.desc-wrap-BasicTable {
+  background-color: #f0f2f5;
+  .vben-basic-table-form-container {
+    padding: 0;
   }
+}
 </style>

src/views/account/product/index.vue

@@ -1,25 +1,7 @@
 <template>
-  <PageWrapper contentBackground>
-    <template #footer>
-      <a-tabs v-model:activeKey="searchInfo.type" @change="tabChange">
-        <a-tab-pane key="1" :tab="t('routes.product.type.1')" />
-        <a-tab-pane key="2" :tab="t('routes.product.type.2')" />
-        <a-tab-pane key="3" :tab="t('routes.product.type.3')" />
-      </a-tabs>
-    </template>
-    <div class="desc-wrap-BasicTable">
+  <a-tabs v-model:activeKey="searchInfo.activeKey">
+    <a-tab-pane key="1" tab="Tab 1">
       <BasicTable @register="registerTimeTable">
-        <template #toolbar>
-          <a-button
-            type="primary"
-            @click="
-              () => {
-                openAddModal(true, searchInfo.type);
-              }
-            "
-            >{{ t('routes.product.addVstive') }}</a-button
-          >
-        </template>
         <template #action="{ record }">
           <TableAction
             :actions="[
@@ -40,10 +22,13 @@
           />
         </template>
       </BasicTable>
-    </div>
-    <AddModal @update="reload" @register="registerAddModal" />
-    <EditModal @register="registerEditModal" @update="reload" />
-  </PageWrapper>
+    </a-tab-pane>
+    <a-tab-pane key="2" tab="Tab 2">Content of tab 2</a-tab-pane>
+    <a-tab-pane key="3" tab="Tab 3">Content of tab 3</a-tab-pane>
+    <template #tabBarExtraContent>
+      <a-button>Extra Action</a-button>
+    </template>
+  </a-tabs>
 </template>
 <script lang="ts">
 import { defineComponent, reactive, h } from 'vue';
@@ -53,16 +38,12 @@ import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue'
 import { CameraList, DelAndUpload, EditAndUpload } from '/@/api/product';
 import { useModal } from '/@/components/Modal';
 import { useI18n } from '/@/hooks/web/useI18n';
-import AddModal from './AddModal.vue';
-import EditModal from './EditModal.vue';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { Switch } from 'ant-design-vue';
 import { Time } from '/@/components/Time';
 export default defineComponent({
   components: {
     BasicTable,
-    AddModal,
-    EditModal,
     TableAction,
     PageWrapper,
     [Divider.name]: Divider,
@@ -78,7 +59,7 @@ export default defineComponent({
   setup() {
     const { t } = useI18n();
     const searchInfo = reactive<Recordable>({
-      type: '1',
+      activeKey: '1',
     });
     const [registerAddModal, { openModal: openAddModal }] = useModal();
     const [registerEditModal, { openModal: openEditModal }] = useModal();