1

src/api/customer/index.ts

@@ -67,13 +67,22 @@ export const downTemplate = (params: companyExcelParams) =>
     method: 'GET',
     url: Api.downTemplate,
     params: params,
-    // data: params, 
-    fileName:params.type == 0?'入库模板.xlsx':params.type == 1?'出库模板.xlsx':'客户关联模板.xlsx',
+    // data: params,
+    fileName:
+      params.type == 0
+        ? '入库模板.xlsx'
+        : params.type == 1
+        ? '出库模板.xlsx'
+        : params.type == 3
+        ? 'rtk设备导入模板.xlsx'
+        : params.type == 4
+        ? 'rtk账号导入模板.xlsx'
+        : '客户关联模板.xlsx',
     headers: {
       // @ts-ignore
       ignoreCancelToken: true,
     },
-    responseType: 'blob'
+    responseType: 'blob',
   });
 
 export function companyUploadExcel(

src/api/rtk/index.ts

@@ -0,0 +1,167 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams } from './model';
+import { Result, UploadFileParams } from '/#/axios';
+import { ContentTypeEnum } from '/@/enums/httpEnum';
+
+enum Api {
+  rtkInfoList = '/service/manage/rtkInfo/list',
+  activation = '/service/manage/rtkInfo/activation',
+  rtksaveOrEdit = '/service/manage/rtkInfo/saveOrEdit',
+  rtkdelOrEdit = '/service/manage/rtkInfo/del',
+  rtkDeviceList = '/service/manage/rtkDevice/list',
+  rtkDevicesaveOrEdit = '/service/manage/rtkDevice/saveOrEdit',
+  rtkDevicedel = '/service/manage/rtkDevice/del',
+  rtkAccountList = '/service/manage/rtkAccount/list',
+  rtkAccountsaveOrEdit = '/service/manage/rtkAccount/saveOrEdit',
+  rtkAccountdel = '/service/manage/rtkAccount/del',
+  rtkUseLogList = '/service/manage/rtkUseLog/list',
+}
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkInfoList = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkInfoList,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkdelOrEdit = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkdelOrEdit,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const activation = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.activation,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+/**
+ * @description: Get sample list value
+ */
+
+export const rtksaveOrEdit = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtksaveOrEdit,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkDeviceList = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkDeviceList,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkDevicesaveOrEdit = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkDevicesaveOrEdit,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkDevicedel = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkDevicedel,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const rtkAccountList = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkAccountList,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkAccountsaveOrEdit = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkAccountsaveOrEdit,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+/**
+ * @description: Get sample list value
+ */
+
+export const rtkAccountdel = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkAccountdel,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const rtkUseLogList = (params: PageParams) =>
+  defHttp.post<Result>({
+    url: Api.rtkUseLogList,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/rtk/model.ts

@@ -0,0 +1,92 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+/**
+ * @description: Request list interface parameters
+ */
+export type PageParams = BasicPageParams;
+
+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 getItemParams {
+  id: 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;
+}
+
+export interface InvoiceList {
+  orderSn: string;
+  payTimeStart	: string;
+  payTimeEnd: string;
+  invoiceTimeStart: string;
+  invoiceTimeEnd: string;
+  orderBy: string;
+  sortBy: string;
+  pageSize: number;
+  pageNum: number;
+}
+
+
+export type InvoiceListResul = BasicPageParams<InvoiceList>
+/**
+ * @description: Request list return value
+ */
+export type RentListGetResultModel = BasicFetchResult<DeviceListItem>;

src/components/Page/src/PageWrapper.vue

@@ -166,7 +166,9 @@
     .@{prefix-cls}-content {
       margin: 16px;
     }
-
+    .testPageWrapper{
+      margin: 0;
+    }
     .ant-page-header {
       &:empty {
         padding: 0;

src/views/product/rtk/AddModal.vue

@@ -104,7 +104,7 @@
           field: 'rtkSnCode',
           component: 'Input',
           required: true,
-          label: '板卡sn号',
+          label: '板卡SN号',
           componentProps: {
             maxLength: 50,
           },
@@ -138,7 +138,7 @@
           field: 'sgRtkSn',
           component: 'Input',
           required: false,
-          label: '深光rtk插件sn',
+          label: '深光rtk插件SN号',
           componentProps: {
             maxLength: 50,
           },
@@ -169,104 +169,6 @@
             span: 20,
           },
         },
-        {
-          field: 'operator',
-          component: 'Input',
-          required: true,
-          label: '运营商',
-          defaultValue: '中国移动',
-          componentProps: {
-            maxLength: 50,
-          },
-          colProps: {
-            span: 20,
-          },
-        },
-        {
-          field: 'ipAddr',
-          component: 'Input',
-          label: 'IP地址',
-          ifShow: false,
-          required: true,
-          defaultValue: '120.253.239.161',
-          colProps: {
-            span: 20,
-          },
-          // rules: [
-          //   {
-          //     required: true,
-          //     // @ts-ignore
-          //     validator: async (rule, value) => {
-          //       if (!value) {
-          //         return Promise.reject('请输入IP地址');
-          //       }
-          //       if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
-          //         /* eslint-disable-next-line */
-          //         return Promise.reject('不支持中文字符');
-          //       }
-          //       return Promise.resolve();
-          //     },
-          //     trigger: 'change',
-          //   },
-          // ],
-          componentProps: {
-            maxLength: 50,
-            onChange: (data) => {
-              console.log('data', data);
-            },
-          },
-        },
-        {
-          field: 'mountPoint',
-          component: 'Input',
-          required: true,
-          label: '挂载点',
-          defaultValue: 'RTCM33_GRCEJ',
-          componentProps: {
-            maxLength: 50,
-          },
-          colProps: {
-            span: 20,
-          },
-        },
-        {
-          field: 'port',
-          component: 'Input',
-          required: true,
-          label: '端口',
-          defaultValue: '8001',
-          componentProps: {
-            maxLength: 50,
-          },
-          colProps: {
-            span: 20,
-          },
-        },
-        {
-          field: 'userName',
-          component: 'Input',
-          required: true,
-          label: '用户名称',
-          componentProps: {
-            maxLength: 50,
-          },
-          colProps: {
-            span: 20,
-          },
-        },
-        {
-          field: 'password',
-          component: 'Input',
-          label: '密码',
-          required: true,
-          componentProps: {
-            maxLength: 50,
-            'v-model:visible': false,
-            // readonly:preventAutoFill.value,
-            placeholder: '请输入数字、字母大小写组合',
-          },
-          colProps: { span: 20 },
-        },
       ];
       const [registerForm, { validate, resetFields, setFieldsValue, updateSchema, clearValidate }] =
         useForm({
@@ -286,7 +188,7 @@
       function onDataReceive(data) {
         modelRef.value = data;
         fileFlow.title = data.id ? '编辑RTK账号' : '新增RTK账号';
-        handlertkSn(data.cameraSnCode ? true : false);
+        // handlertkSn(data.cameraSnCode ? true : false);
         resetFields();
         console.log('data', data);
         handlertkType(data.rtkType);
@@ -325,7 +227,7 @@
                     return pattern.test(s);
                   }
                   if(required && !value){
-                    return Promise.reject('请输入板卡sn号');
+                    return Promise.reject('请输入板卡SN号');
                   }
                   if (value != null && value !== '') {
                     if (isSpec(value) || value.indexOf(' ') !== -1) {

src/views/product/rtk/AdduserModal.vue

@@ -0,0 +1,300 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="fileFlow.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, rtksaveOrEdit } from '/@/api/product/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import dayjs from 'dayjs';
+  const { t } = useI18n();
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['update', 'register'],
+    setup(props, { emit }) {
+      const modelRef = ref({
+        operator: '中国移动',
+        ipAddr: '120.253.239.161',
+        mountPoint: 'RTCM33_GRCEJ',
+        port: '8001',
+      });
+      const fileFlow = reactive({
+        file: null,
+        title: '新增RTK账号',
+      });
+      const { createMessage } = useMessage();
+      const schemas: FormSchema[] = [
+        {
+          field: 'id',
+          component: 'Input',
+          label: 'id',
+          show: false,
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'userName',
+          component: 'Input',
+          required: true,
+          label: '用户名称',
+          componentProps: {
+            maxLength: 50,
+          },
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'password',
+          component: 'Input',
+          label: '密码',
+          required: true,
+          componentProps: {
+            maxLength: 50,
+            'v-model:visible': false,
+            // readonly:preventAutoFill.value,
+            placeholder: '请输入数字、字母大小写组合',
+          },
+          colProps: { span: 20 },
+        },
+        {
+          field: 'operator',
+          component: 'Input',
+          required: true,
+          label: '运营商',
+          defaultValue: '中国移动',
+          componentProps: {
+            maxLength: 50,
+          },
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'ipAddr',
+          component: 'Input',
+          label: 'IP地址',
+          ifShow: false,
+          required: true,
+          defaultValue: '120.253.239.161',
+          colProps: {
+            span: 20,
+          },
+          // rules: [
+          //   {
+          //     required: true,
+          //     // @ts-ignore
+          //     validator: async (rule, value) => {
+          //       if (!value) {
+          //         return Promise.reject('请输入IP地址');
+          //       }
+          //       if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
+          //         /* eslint-disable-next-line */
+          //         return Promise.reject('不支持中文字符');
+          //       }
+          //       return Promise.resolve();
+          //     },
+          //     trigger: 'change',
+          //   },
+          // ],
+          componentProps: {
+            maxLength: 50,
+            onChange: (data) => {
+              console.log('data', data);
+            },
+          },
+        },
+        {
+          field: 'mountPoint',
+          component: 'Input',
+          required: true,
+          label: '挂载点',
+          defaultValue: 'RTCM33_GRCEJ',
+          componentProps: {
+            maxLength: 50,
+          },
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'port',
+          component: 'Input',
+          required: true,
+          label: '端口',
+          defaultValue: '8001',
+          componentProps: {
+            maxLength: 50,
+          },
+          colProps: {
+            span: 20,
+          },
+        },
+        {
+          field: 'failureTime',
+          component: 'DatePicker',
+          label: '到期日期',
+          colProps: {
+            span: 16,
+          },
+          componentProps: {
+            // disabled: true,
+            valueFormat: 'YYYY-MM-DD',
+            format: 'YYYY-MM-DD',
+            disabledDate: (current) => {
+              return current && current < dayjs().endOf('day');
+            },
+          },
+        },
+      ];
+      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema, clearValidate }] =
+        useForm({
+          labelWidth: 120,
+          schemas,
+          showActionButtonGroup: false,
+          actionColOptions: {
+            span: 20,
+          },
+        });
+      onMounted(() => {});
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        modelRef.value = data;
+        fileFlow.title = data.id ? '编辑账号' : '新增账号';
+        // handlertkSn(data.cameraSnCode ? true : false);
+        resetFields();
+        console.log('data', data);
+        handlertkType(data.rtkType);
+        setFieldsValue(data);
+        clearValidate();
+      }
+      function handlertkType(val) {
+        console.log('val', val);
+        let ifShow = val != 0;
+        updateSchema([
+          { field: 'ipAddr', ifShow },
+          { field: 'mountPoint', ifShow },
+          { field: 'port', ifShow },
+          { field: 'userName', ifShow },
+          // { field: 'sgRtkSn', ifShow },
+          { field: 'password', ifShow },
+          { field: 'operator', ifShow },
+        ]);
+      }
+      function handlertkSn(val) {
+        console.log('handlertkSn', val);
+        let required = !!val;
+        !required && clearValidate();
+        updateSchema([
+          { field: 'cameraSnCode', required },
+          { field: 'rtkType', required },
+          {
+            field: 'rtkSnCode',
+            rules: [
+              {
+                required: required,
+                // @ts-ignore
+                validator: (rule, value, callback) => {
+                  function isSpec(s) {
+                    var pattern = /[~!@#$%^&*<>|']/gi;
+                    return pattern.test(s);
+                  }
+                  if(required && !value){
+                    return Promise.reject('请输入板卡SN号');
+                  }
+                  if (value != null && value !== '') {
+                    if (isSpec(value) || value.indexOf(' ') !== -1) {
+                      return Promise.reject('不能包含特殊字符或空格');
+                    } else {
+                      return Promise.resolve();
+                    }
+                  } else {
+                    return Promise.resolve();
+                  }
+                },
+                trigger: 'change',
+              },
+            ],
+          },
+          // { field: 'sgRtkSn', required },
+          { field: 'ipAddr', required },
+          { field: 'mountPoint', required },
+          { field: 'port', required },
+          { field: 'userName', required },
+          { field: 'password', required },
+          { field: 'operator', required },
+        ]);
+      }
+
+      const handleSubmit = async () => {
+        function isEmptyString(value) {
+          return value === null || value === undefined || value === '';
+        }
+        try {
+          const params = await validate();
+          let keyData = Object.values(params).some((item) => {
+            if (item == params.id) {
+              return false;
+            } else {
+              return !isEmptyString(item);
+            }
+          });
+          if (!keyData) {
+            return createMessage.error('请填写至少一项数据');
+          }
+          params.rtkSnCode = params.rtkSnCode && params.rtkSnCode.trim();
+          console.log('params', Object.values(params), keyData);
+          const res = await rtksaveOrEdit(params);
+          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,
+        schemas,
+        registerForm,
+        model: modelRef,
+        fileFlow,
+        handleVisibleChange,
+        handleSubmit,
+        addListFunc,
+        resetFields,
+        handlertkSn,
+        t,
+      };
+    },
+  });
+</script>

src/views/product/rtk/batchPutModal.vue

@@ -0,0 +1,137 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="批量入库"
+    @visible-change="handleVisibleChange"
+    @cancel="resetFields"
+    @ok="handleSubmit"
+    :min-height="0"
+  >
+    <div class="pt-2px pr-3px">
+      <BasicForm @register="registerForm" :model="model">
+        <template #text="{ model, field }">
+          {{ model[field] }}
+        </template>
+      </BasicForm>
+      <a @click="getTemplate" style="padding: 20px 0 0 80px">下载批量导入模板</a>
+    </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 { sceneMove } from '/@/api/operate';
+  import { companyUploadExcel, downTemplate } from '/@/api/customer';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { downloadByData } from '/@/utils/file/download'
+  const { t } = useI18n();
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    emits: ['update', 'register'],
+    setup(props, { emit }) {
+      const modelRef = ref({});
+      const fileFlow = reactive({
+        file: null,
+        type: '1',
+      });
+      const { createMessage } = useMessage();
+      const schemas: FormSchema[] = [
+        {
+          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: {
+            maxNumber: 1,
+            maxSize: 5,
+            fileFlow: true,
+            accept: ['xls', 'xlsx'],
+            afterFetch: function (data) {
+              // console.log('uploadApi', data);
+              // Reflect.set(data, 'url', data.file);
+              fileFlow.file = data.file;
+              console.log(fileFlow.file);
+              return data;
+            },
+          },
+
+          colProps: {
+            span: 22,
+          },
+        },
+      ];
+      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+      onMounted(() => {});
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        // console.log(data);
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        modelRef.value = data;
+        resetFields();
+        fileFlow.type = data.type;
+        setFieldsValue({
+          type: data.sceneName,
+        });
+      }
+      const handleSubmit = async () => {
+        try {
+          const params = await validate();
+          const apiData = {
+            file: fileFlow.file,
+            data:{
+              type: fileFlow.type,
+            }
+          };
+          const res = await companyUploadExcel(apiData);
+          closeModal();
+          resetFields();
+          createMessage.success( res || '导入成功');
+        } catch (error) {
+          console.log('not passing', error);
+        }
+      };
+      function handleVisibleChange(v) {
+        // console.log(v);
+        // v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+      async function getTemplate() {
+        try {
+          await downTemplate({ type: fileFlow.type });
+        } catch (error) {
+          console.log('not passing', error);
+        }
+      }
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        fileFlow,
+        handleVisibleChange,
+        handleSubmit,
+        addListFunc,
+        resetFields,
+        t,
+        getTemplate,
+      };
+    },
+  });
+</script>

src/views/product/rtk/data.ts

@@ -0,0 +1,321 @@
+import { BasicColumn } from '/@/components/Table/src/types/table';
+import { Time } from '/@/components/Time';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { rtkDevicesaveOrEdit, rtkAccountsaveOrEdit } from '/@/api/rtk';
+const { createMessage } = useMessage();
+import { FormProps } from '/@/components/Table';
+export const rtksearchForm: Partial<FormProps> = {
+  labelWidth: 120,
+  autoSubmitOnEnter: true,
+  schemas: [
+    {
+      field: 'cameraSnCode',
+      label: '相机Sn',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'rtkSnCode',
+      label: '板卡SN号',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'sgRtkSn',
+      label: '深光rtk插件SN号',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+  ],
+};
+export const rtkusersearchForm: Partial<FormProps> = {
+  labelWidth: 120,
+  autoSubmitOnEnter: true,
+  schemas: [
+    {
+      field: 'userName',
+      label: '用户名称',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'operator',
+      label: '运营商',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+  ],
+};
+
+export const rtklogsearchForm: Partial<FormProps> = {
+  labelWidth: 120,
+  autoSubmitOnEnter: true,
+  schemas: [
+    {
+      field: 'cameraSnCode',
+      label: '相机Sn',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'rtkSnCode',
+      label: '板卡SN号',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'sgRtkSn',
+      label: '深光rtk插件SN号',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'userName',
+      label: '账户',
+      component: 'Input',
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+    {
+      field: 'useType',
+      label: '使用类型',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '调用',
+            value: 0,
+            key: '0',
+          },
+          {
+            label: '回收',
+            value: 1,
+            key: '1',
+          },
+        ],
+      },
+      colProps: {
+        xl: 8,
+        xxl: 8,
+      },
+    },
+  ],
+};
+export const rtkuserColumns: any[] = [
+  {
+    title: '用户名称',
+    ellipsis: true,
+    dataIndex: 'userName',
+    width: 120,
+  },
+  {
+    title: '运营商',
+    ellipsis: true,
+    dataIndex: 'operator',
+    width: 120,
+  },
+  {
+    title: 'IP地址',
+    ellipsis: true,
+    dataIndex: 'ipAddr',
+    width: 100,
+  },
+  {
+    title: '挂载点',
+    ellipsis: true,
+    dataIndex: 'mountPoint',
+    width: 120,
+  },
+  {
+    title: '端口',
+    ellipsis: true,
+    dataIndex: 'port',
+    width: 50,
+  },
+  {
+    title: '到期时间',
+    ellipsis: true,
+    dataIndex: 'failureTime',
+    width: 160,
+  },
+  {
+    title: '创建人',
+    ellipsis: true,
+    dataIndex: 'createNickName',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    ellipsis: true,
+    dataIndex: 'createTime',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'useStatus',
+    width: 80,
+    // ifShow: getCheckPerm('recruit-publish'),
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.useStatus === 0,
+        checkedChildren: '正常',
+        unCheckedChildren: '禁用',
+        loading: false,
+        onChange: async (checked: boolean) => {
+          record.pendingStatus = true;
+          const id: string = record.id || '';
+          const newStatus = checked ? 0 : 1;
+          alert(newStatus);
+          Reflect.set(record, 'useStatus', newStatus);
+          await rtkAccountsaveOrEdit({ ...record, useStatus: newStatus });
+          createMessage.success('操作成功');
+          // reload()
+        },
+      });
+    },
+  },
+];
+export const rtkdeviceColumns: any[] = [
+  {
+    title: '相机SN',
+    ellipsis: true,
+    dataIndex: 'cameraSnCode',
+    width: 100,
+  },
+  {
+    title: '板卡类型',
+    dataIndex: 'rtkType',
+    ellipsis: true,
+    width: 120,
+    customRender: ({ record }) => {
+      const obj = {
+        0: '千寻板卡千寻账号',
+        1: '千寻板卡移动账号',
+        2: '北云板卡移动账号',
+      };
+      return obj[record.rtkType] || '-';
+    },
+  },
+  {
+    title: '板卡SN号',
+    ellipsis: true,
+    dataIndex: 'rtkSnCode',
+    width: 150,
+  },
+  {
+    title: '深光rtk插件SN号',
+    ellipsis: true,
+    dataIndex: 'sgRtkSn',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    ellipsis: true,
+    dataIndex: 'createTime',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'useStatus',
+    width: 80,
+    // ifShow: getCheckPerm('recruit-publish'),
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.useStatus === 0,
+        checkedChildren: '正常',
+        unCheckedChildren: '禁用',
+        loading: false,
+        onChange: async (checked: boolean) => {
+          record.pendingStatus = true;
+          const id: string = record.id || '';
+          const newStatus = checked ? 0 : 1;
+          Reflect.set(record, 'useStatus', newStatus);
+          await rtkDevicesaveOrEdit({ ...record, useStatus: newStatus });
+          createMessage.success('操作成功');
+          // reload()
+        },
+      });
+    },
+  },
+];
+export const rtklogColumns: any[] = [
+  {
+    title: '相机SN',
+    ellipsis: true,
+    dataIndex: 'cameraSn',
+    width: 100,
+  },
+  {
+    title: '板卡SN',
+    ellipsis: true,
+    dataIndex: 'rtkSnCode',
+    width: 150,
+  },
+  {
+    title: '深光rtk插件SN号',
+    ellipsis: true,
+    dataIndex: 'sgRtkSn',
+    width: 120,
+  },
+  {
+    title: '调用时间',
+    ellipsis: true,
+    dataIndex: 'createTime',
+    width: 160,
+  },
+  {
+    title: '调用账号',
+    ellipsis: true,
+    dataIndex: 'userName',
+    width: 160,
+  },
+  {
+    title: '运营商',
+    ellipsis: true,
+    dataIndex: 'operator',
+    width: 120,
+  },
+  {
+    title: '类型',
+    dataIndex: 'useType',
+    ellipsis: true,
+    width: 120,
+    customRender: ({ record }) => {
+      return record.useType == 1 ? '回收' : '调用';
+    },
+  },
+];

src/views/product/rtk/list.vue

@@ -1,44 +1,76 @@
 <template>
-  <div>
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('rtk-add')"
-          >新增</a-button
-        >
-      </template>
-      <template #copy="{ record }">
-        <a @click="handleCopy(record.authorizeKey)">
-          {{ record.authorizeKey }}
-        </a>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            //{
-            //  label: record.status ? '取消激活' : '激活',
-            //  ifShow: getCheckPerm('rtk-activation'),
-            //  onClick: handleActive.bind(null, record),
-            //},
-            {
-              label: '编辑',
-              ifShow: getCheckPerm('rtk-updata'),
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              label: '删除',
-              color: 'error',
-              ifShow: getCheckPerm('rtk-delete'),
-              onClick: handleDelete.bind(null, record),
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-    <AddModal @register="register" @update="reload" />
+  <PageWrapper contentClass="testPageWrapper">
+    <template #footer>
+      <a-tabs v-model:activeKey="activeKey" @change="changeTable">
+        <a-tab-pane :key="0" tab="RTK设备管理" />
+        <a-tab-pane :key="1" tab="差分账号管理" />
+        <a-tab-pane :key="2" tab="账号使用日志" />
+      </a-tabs>
+    </template>
+    <div>
+      <BasicTable key="registerTable" v-show="activeKey == 0" @register="registerTable">
+        <template #toolbar>
+          <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('rtk-add')"
+            >新增RTK</a-button
+          >
+          <a-button type="primary" @click="handleExport(3)" v-if="getCheckPerm('rtk-add')"
+            >批量导入</a-button
+          >
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                ifShow: getCheckPerm('rtk-updata'),
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                color: 'error',
+                ifShow: getCheckPerm('rtk-delete'),
+                onClick: handleDelete.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+      <BasicTable key="registeruserTable" v-show="activeKey == 1" @register="registeruserTable">
+        <template #toolbar>
+          <a-button type="primary" @click="handleuserEdit" v-if="getCheckPerm('rtk-add')"
+            >新增账户</a-button
+          >
+          <a-button type="primary" @click="handleExport(4)" v-if="getCheckPerm('rtk-add')"
+            >批量导入</a-button
+          >
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                ifShow: getCheckPerm('rtk-updata'),
+                onClick: handleuserEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                color: 'error',
+                ifShow: getCheckPerm('rtk-delete'),
+                onClick: handleDelete.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+      <BasicTable v-show="activeKey == 2" @register="registerlogTable" />
+      <AddModal @register="register" @update="reload" />
+      <AdduserModal @register="registeruser" @update="reload" />
+      <batchPutModal @register="registerPut" @reload="reload" />
   </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, h } from 'vue';
+  import { defineComponent, h, ref } from 'vue';
   import {
     BasicTable,
     useTable,
@@ -47,112 +79,47 @@
     TableImg,
     FormProps,
   } from '/@/components/Table';
-  import { rtkInfoList, rtkdelOrEdit, activation } from '/@/api/product';
+  import { PageWrapper } from '/@/components/Page';
+  import {
+    rtkDeviceList,
+    rtkDevicedel,
+    rtkAccountList,
+    rtkAccountdel,
+    rtkUseLogList,
+  } from '/@/api/rtk';
   import { useModal } from '/@/components/Modal';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import AddModal from './AddModal.vue';
+  import batchPutModal from './batchPutModal.vue';
+  import AdduserModal from './AdduserModal.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { usePermissionStore } from '/@/store/modules/permission';
   import { incrementUseTypeList } from '/@/api/account';
+  import { rtkdeviceColumns, rtkuserColumns, rtklogColumns, rtkusersearchForm, rtklogsearchForm, rtksearchForm  } from './data';
+  import { Tabs } from 'ant-design-vue';
   export default defineComponent({
     components: {
       BasicTable,
       AddModal,
+      AdduserModal,
+      batchPutModal,
       TableAction,
       TableImg,
+      PageWrapper,
+      [Tabs.name]: Tabs,
+      [Tabs.TabPane.name]: Tabs.TabPane,
     },
     setup() {
       const { t } = useI18n();
+      const activeKey = ref(0);
       const { createMessage, createConfirm } = useMessage();
       const permissionStore = usePermissionStore();
       const { getCheckPerm } = permissionStore;
       const [register, { openModal }] = useModal();
-      const columns: BasicColumn[] = [
-        {
-          title: '相机sn',
-          ellipsis: true,
-          dataIndex: 'cameraSnCode',
-          width: 100,
-        },
-        {
-          title: '板卡类型',
-          dataIndex: 'rtkType',
-          ellipsis: true,
-          width: 120,
-          customRender: ({ record }) => {
-            let obj = {
-              0: '千寻板卡千寻账号',
-              1: '千寻板卡移动账号',
-              2: '北云板卡移动账号',
-            };
-            return obj[record.rtkType] || '-';
-          },
-        },
-        {
-          title: '板卡sn号',
-          ellipsis: true,
-          dataIndex: 'rtkSnCode',
-          width: 150,
-        },
-        {
-          title: '深光rtk插件sn',
-          ellipsis: true,
-          dataIndex: 'sgRtkSn',
-          width: 120,
-        },
-        {
-          title: '运营商',
-          ellipsis: true,
-          dataIndex: 'operator',
-          width: 120,
-        },
-        {
-          title: 'IP地址',
-          ellipsis: true,
-          dataIndex: 'ipAddr',
-          width: 100,
-        },
-        {
-          title: '挂载点',
-          ellipsis: true,
-          dataIndex: 'mountPoint',
-          width: 120,
-        },
-        {
-          title: '端口',
-          ellipsis: true,
-          dataIndex: 'port',
-          width: 50,
-        },
-        {
-          title: '用户名称',
-          ellipsis: true,
-          dataIndex: 'userName',
-          width: 120,
-        },
-        {
-          title: '创建人',
-          ellipsis: true,
-          dataIndex: 'createNickName',
-          width: 100,
-        },
-        {
-          title: '创建时间',
-          ellipsis: true,
-          dataIndex: 'createTime',
-          width: 160,
-        },
-        {
-          title: 'RTK使用状态',
-          dataIndex: 'status',
-          ellipsis: true,
-          width: 120,
-          customRender: ({ record }) => {
-            return '正常';
-          },
-        },
-      ];
+      const [registeruser, { openModal: openModal1 }] = useModal();
+      const [registerPut, { openModal: openModalPut }] = useModal();
+
       const searchForm: Partial<FormProps> = {
         labelWidth: 100,
         autoSubmitOnEnter: true,
@@ -168,7 +135,7 @@
           },
           {
             field: 'rtkSnCode',
-            label: '板卡sn号',
+            label: '板卡SN号',
             component: 'Input',
             colProps: {
               xl: 8,
@@ -195,7 +162,7 @@
           },
           {
             field: 'sgRtkSn',
-            label: '深光rtk插件sn',
+            label: '深光rtk插件SN号',
             component: 'Input',
             colProps: {
               xl: 8,
@@ -204,13 +171,13 @@
           },
         ],
       };
-      const [registerTable, { reload }] = useTable({
-        api: rtkInfoList,
-        title: 'rtk列表',
-        columns: columns,
+      const [registerTable, { reload: reload0 }] = useTable({
+        api: rtkDeviceList,
+        title: 'rtk设备列表',
+        columns: rtkdeviceColumns,
         useSearchForm: true,
-        showIndexColumn: true,
-        formConfig: searchForm,
+        showIndexColumn: false,
+        formConfig: rtksearchForm,
         showTableSetting: true,
         fetchSetting: {
           pageField: 'pageNum',
@@ -225,7 +192,47 @@
           slots: { customRender: 'action' },
         },
         rowKey: 'id',
-        canResize: true,
+        canResize: false,
+      });
+      const [registeruserTable, { reload: reload1 }] = useTable({
+        api: rtkAccountList,
+        title: '差分账号管理',
+        columns: rtkuserColumns,
+        useSearchForm: true,
+        showIndexColumn: false,
+        formConfig: rtkusersearchForm,
+        showTableSetting: true,
+        fetchSetting: {
+          pageField: 'pageNum',
+          sizeField: 'pageSize',
+          listField: 'list',
+          totalField: 'total',
+        },
+        actionColumn: {
+          width: 160,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+        rowKey: 'id',
+        canResize: false,
+      });
+      const [registerlogTable, { reload: reload2 }] = useTable({
+        api: rtkUseLogList,
+        title: '账号使用日志',
+        columns: rtklogColumns,
+        useSearchForm: true,
+        showIndexColumn: false,
+        formConfig: rtklogsearchForm,
+        showTableSetting: true,
+        fetchSetting: {
+          pageField: 'pageNum',
+          sizeField: 'pageSize',
+          listField: 'list',
+          totalField: 'total',
+        },
+        rowKey: 'id',
+        canResize: false,
       });
       async function handleDelete(record) {
         createConfirm({
@@ -233,16 +240,30 @@
           title: () => h('span', '温馨提示'),
           content: () => h('span', '确定要删除吗？'),
           onOk: async () => {
-            await rtkdelOrEdit({ id: record.id });
+            let apiUrl = activeKey.value == 0 ? rtkDevicedel : rtkAccountdel;
+            await apiUrl({ id: record.id });
             reload();
             createMessage.success(t('common.optSuccess'));
           },
         });
       }
       function handleCopy(str: string) {
-        copyTextToClipboard(str)
+        copyTextToClipboard(str);
         createMessage.success('复制成功');
       }
+      function changeTable(val: number) {
+        activeKey.value = val;
+        // reload();
+      }
+      function reload() {
+        if (activeKey.value == 0) {
+          reload0();
+        } else if (activeKey.value == 1) {
+          reload1();
+        } else {
+          reload2();
+        }
+      }
       function handleActive(record) {
         createConfirm({
           iconType: 'warning',
@@ -255,21 +276,39 @@
           },
         });
       }
+      function handleExport(type) {
+        openModalPut(true, {
+          type,
+        });
+      }
       function handleEdit(record = {}) {
         openModal(true, {
           ...record,
           authorizeTime: `${record.authorizeTime || '10'}_${record.authorizeTimeUnit || '1'}`,
         });
       }
+      function handleuserEdit(record = {}) {
+        openModal1(true, {
+          ...record,
+        });
+      }
       return {
+        activeKey,
         registerTable,
+        registeruser,
+        registeruserTable,
+        registerlogTable,
+        handleExport,
         handleCopy,
         handleDelete,
         reload,
         register,
+        registerPut,
         handleActive,
         getCheckPerm,
         handleEdit,
+        handleuserEdit,
+        changeTable,
       };
     },
   });