feat(corpration): corpreation detail

src/api/corporation/list.ts

@@ -16,6 +16,7 @@ enum Api {
   uploadLogo = '/zfb-api/zfb/company/uploadLogo',
   updateCompany = '/zfb-api/zfb/company/updateCompany',
   selectCompanyDevice = '/zfb-api/zfb/company/selectCompanyDevice',
+  unbindDevice = '/zfb-api/zfb/company/unbindDevice',
 }
 
 /**
@@ -72,7 +73,7 @@ export const updateCompnayApi = (params: UpdateCompanyParam) =>
     },
   });
 
-export const companyDeviceApi = (params: DeviceListItem) =>
+export const ListCompanyDeviceApi = (params: DeviceListItem) =>
   defHttp.post<DeviceGetResultModel>({
     url: Api.selectCompanyDevice,
     params,
@@ -81,6 +82,15 @@ export const companyDeviceApi = (params: DeviceListItem) =>
       ignoreCancelToken: true,
     },
   });
+export const unDeviceApi = (params: DeviceListItem) =>
+  defHttp.post<DeviceGetResultModel>({
+    url: Api.unbindDevice,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export function uploadLogoApi(
   params: UploadFileParams,
   onUploadProgress: (progressEvent: ProgressEvent) => void,

src/api/corporation/model.ts

@@ -100,9 +100,9 @@ export interface ListItem {
 }
 
 export interface DeviceListItem {
-  activeTime: number;
-  childName: string;
-  id: number;
+  activeTime?: number;
+  childName?: string;
+  id?: number;
 }
 
 /**

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

@@ -1,6 +1,7 @@
 export default {
   recharge: '充值',
   device: '设备',
+  deviceId: '设备ID',
   sub_account: '子账号',
   stateName: {
     0: '审核中',
@@ -25,4 +26,7 @@ export default {
   expirationTime: '到期时间',
   detailed: '详细信息',
   modifySubId: '修改子账号',
+  activeTime: '激活时间',
+  unBind: '解除绑定',
+  isUnBind: '是否解除绑定?',
 };

src/views/corporation/cameraModal.vue

@@ -4,6 +4,7 @@
     @register="register"
     :title="t('routes.devices.browserDevice')"
     @ok="submitModal"
+    width="700px"
     @visible-change="handleVisibleChange"
   >
     <div class="pt-3px pr-3px">
@@ -14,52 +15,61 @@
         <template #name="{ model, field }">
           {{ model[field] }}
         </template>
+        <template #cameraNum="{ model, field }">
+          {{ model[field] }}
+        </template>
       </BasicForm>
+      <BasicTable @register="registerDeviceTable" :searchInfo="searchInfo">
+        <template #activeTime="{ record }">
+          <Time v-if="record.activeTime" :value="record.activeTime" mode="datetime" />
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                // icon: 'clarity:info-standard-line',
+                label: t('routes.corporation.unBind'),
+                popConfirm: {
+                  title: t('routes.corporation.isUnBind'),
+                  confirm: handleunbindDevice.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, reactive, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  // import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '/@/hooks/web/useMessage';
   // import { AddDevice, checkDevice } from '/@/api/corporation/modal';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { ListCompanyDeviceApi, unDeviceApi } from '/@/api/corporation/list';
+  import { Time } from '/@/components/Time';
+
   export default defineComponent({
-    components: { BasicModal, BasicForm },
+    components: { BasicModal, BasicForm, BasicTable, Time, TableAction },
     props: {
       userData: { type: Object },
     },
-    emits: ['register'],
-    setup() {
+    emits: ['register', 'ok'],
+    setup(_, { emit }) {
       // const modelRef = ref({});
       const num = ref(0);
       const { t } = useI18n();
-      // const { createMessage } = useMessage();
-      // const { success, error } = createMessage;
+      const { createMessage } = useMessage();
+
+      const searchInfo = reactive<Recordable>({});
 
-      const [register] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         data && onDataReceive(data);
       });
 
-      // const handlevalidator = async (_, value) => {
-      //   console.log('handlevalidator', value);
-      //   if (!value) {
-      //     return Promise.resolve();
-      //   }
-      //   try {
-      //     let res = await checkDevice({
-      //       childName: value,
-      //     });
-      //     if (res.message) {
-      //       return Promise.reject(res.message);
-      //     } else {
-      //       return Promise.resolve();
-      //     }
-      //   } catch (err) {
-      //     return Promise.reject(err);
-      //   }
-      // };
       const schemas: FormSchema[] = [
         {
           field: 'userName',
@@ -73,8 +83,14 @@
           slot: 'name',
           component: 'Input',
         },
+        {
+          field: 'cameraNum',
+          label: t('routes.corporation.cameraNum'),
+          slot: 'cameraNum',
+          component: 'Input',
+        },
       ];
-      // let schemasList = []
+
       const [
         registerForm,
         {
@@ -93,22 +109,74 @@
           span: 24,
         },
       });
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: t('routes.corporation.deviceId'),
+          dataIndex: 'childName',
+          width: 100,
+        },
+        {
+          title: t('routes.corporation.activeTime'),
+          dataIndex: 'activeTime',
+          slots: { customRender: 'activeTime' },
+          width: 100,
+        },
+      ];
 
+      const [registerDeviceTable, { reload }] = useTable({
+        title: '',
+        api: ListCompanyDeviceApi,
+        columns: columns,
+        useSearchForm: false,
+        // formConfig: searchForm,
+        showTableSetting: false,
+        showIndexColumn: false,
+        immediate: false,
+        rowKey: 'id',
+        pagination: false,
+        fetchSetting: {
+          pageField: 'pageNum',
+          sizeField: 'pageSize',
+          listField: 'list',
+          totalField: 'totalCount',
+        },
+        actionColumn: {
+          width: 100,
+          title: t('common.operation'),
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
       function onDataReceive(data) {
         // 方式1;
         resetFields();
         setFieldsValue({
-          ...data.record,
+          ...data,
         });
-        console.log('data', data);
-        // // 方式2
-        // modelRef.value = { ...data.record };
+
+        searchInfo.userName = data.userName;
+        nextTick(reload);
       }
 
-      async function submitModal() {}
+      async function submitModal() {
+        emit('ok');
+        closeModal();
+      }
 
-      function handleVisibleChange() {
-        // v && props.userData && nextTick(() => onDataReceive(props.userData));
+      function handleVisibleChange() {}
+      async function handleunbindDevice(record: Recordable) {
+        console.log('record');
+        await unDeviceApi({
+          childName: record.childName,
+        });
+        createMessage.success(t('common.optSuccess'));
+        nextTick(reload);
       }
       return {
         register,
@@ -121,6 +189,9 @@
         num,
         // errorMsg: error,
         t,
+        registerDeviceTable,
+        searchInfo,
+        handleunbindDevice,
       };
     },
   });

src/views/corporation/deviceModal.vue

@@ -117,6 +117,7 @@
           span: 24,
         },
       });
+
       async function submitModal() {
         let formData = {
           ...getFieldsValue(),

src/views/corporation/index.vue

@@ -89,7 +89,7 @@
     <chargeModal @register="registerChargeModal" />
     <deviceModal @register="registerDeviceModal" />
     <SubaccountModal @reload="tablereload" @register="registerSubaccountModal" />
-    <cameraModal @register="registerCameraModal" />
+    <cameraModal @register="registerCameraModal" @ok="reload" />
   </div>
 </template>
 <script lang="ts">
@@ -288,6 +288,7 @@
 
       return {
         t,
+        reload,
         registerTable,
         registerChargeModal,
         registerDeviceModal,