feat: .

src/api/customer/index.ts

@@ -1,5 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, deleteParams, addParams, cameraListParams } from './model';
+import { PageParams, deleteParams, addParams, cameraListParams, companyExcelParams } from './model';
 import { Result } from '/#/axios';
 
 enum Api {
@@ -7,6 +7,8 @@ enum Api {
   companyAdd = '/newV4/service/manage/company/add',
   companyDelete = '/newV4/service/manage/company/delete',
   cameraList = '/newV4/service/manage/camera/list',
+  companyUploadExcel = '/newV4/service/manage/excel/uploadExcel',
+  downTemplate = '/newV4/service/manage/excel/downTemplate',
 }
 
 export const companyList = (params: PageParams) =>
@@ -49,3 +51,23 @@ export const cameraList = (params: cameraListParams) =>
       ignoreCancelToken: true,
     },
   });
+export const downTemplate = (params: companyExcelParams) =>
+  defHttp.get<Result>({
+    url: Api.downTemplate,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const companyUploadExcel = (params: companyExcelParams) => {
+  return defHttp.uploadFile<Result>(
+    {
+      url: Api.companyUploadExcel,
+      // onUploadProgress,
+    },
+    params,
+  );
+};

src/api/customer/model.ts

@@ -27,3 +27,7 @@ export interface cameraListParams {
   pageSize?: number;
   companyId?: number;
 }
+export interface companyExcelParams {
+  file: File | Blob;
+  type?: Number;
+}

src/views/customer/device.vue

@@ -1,26 +1,27 @@
 <template>
-  <BasicTable @register="registerTable">
-    <template #toolbar>
-      <a-button type="primary" @click="deviceLink"> 设备关联</a-button>
-      <a-button type="primary" @click="back">返回</a-button>
-    </template>
-    <template #action="{ record }">
-      <TableAction
-        stopButtonPropagation
-        :actions="[
-          {
-            label: '解绑',
-            color: 'error',
-            popConfirm: {
-              title: '是否解绑？',
-              confirm: handleDelete.bind(null, record),
-              placement: 'topLeft',
-            },
-          },
-        ]"
-      />
-    </template>
-  </BasicTable>
+  <PageWrapper contentBackground>
+    <div class="desc-wrap-BasicTable">
+      <BasicTable @register="registerTable">
+        <template #toolbar>
+          <a-button type="primary" @click="deviceLink"> 设备关联</a-button>
+          <a-button type="primary" @click="back">返回</a-button>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            stopButtonPropagation
+            :actions="[
+              {
+                label: '解绑',
+                color: 'error',
+                onClick: handleUnbind.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </div>
+    <DeviceLinkModal @register="registerLinkModal" />
+  </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent, h, reactive, toRefs, onMounted } from 'vue';
@@ -39,7 +40,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { cameraList } from '/@/api/customer';
   import { message } from 'ant-design-vue';
-
+  import DeviceLinkModal from './modal/DeviceLinkModal.vue';
+  import { useModal } from '/@/components/Modal';
   import { useRouter } from 'vue-router';
   export default defineComponent({
     components: {
@@ -47,12 +49,14 @@
       TableAction,
       PageWrapper,
       TableImg,
+      DeviceLinkModal,
       [Descriptions.name]: Descriptions,
       [Descriptions.Item.name]: Descriptions.Item,
     },
     setup() {
       const { t } = useI18n();
       const { createMessage, createConfirm } = useMessage();
+      const [registerLinkModal, { openModal: openLinkModal }] = useModal();
       const router = useRouter();
       const companyId: Number = router.currentRoute.value.params.id - 0;
       onMounted(() => {
@@ -200,43 +204,54 @@
         },
         canResize: false,
       });
-      async function handleDelete(record: Recordable) {
+      async function handleUnbind(record: Recordable) {
         console.log('handleDelete', record);
 
-        sceneDelete({ num: record.num })
-          .then(() => {
-            message.success({
-              content: '删除成功',
-            });
+        // sceneDelete({ num: record.num })
+        //   .then(() => {
+        //     message.success({
+        //       content: '删除成功',
+        //     });
 
-            reload();
-          })
-          .catch(() => {
-            message.success({
-              content: '删除失败',
-            });
-          });
-      }
+        //     reload();
+        //   })
+        //   .catch(() => {
+        //     message.success({
+        //       content: '删除失败',
+        //     });
+        //   });
 
-      function deviceLink() {
         createConfirm({
           iconType: 'warning',
           title: () => h('span', '温馨提示'),
-          content: () => h('span', '确定当前标签下的订单记录?'),
+          content: '解绑后用户将看不到该相机拍摄的场景。<br/>确定解绑吗?',
           onOk: async () => {
             // await DownExport();
           },
         });
       }
+
+      function deviceLink() {
+        openLinkModal(true);
+      }
       function back() {
         router.push('/customer/index');
       }
       return {
         registerTable,
-        handleDelete,
+        handleUnbind,
         deviceLink,
+        registerLinkModal,
         back,
       };
     },
   });
 </script>
+<style lang="less" scoped>
+  .desc-wrap-BasicTable {
+    background-color: #f0f2f5;
+    .vben-basic-table-form-container {
+      padding: 0;
+    }
+  }
+</style>

src/views/customer/modal/DeviceLinkModal.vue

@@ -0,0 +1,139 @@
+<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 { uploadApi, AddAndUpload } from '/@/api/product/index';
+  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: '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: ['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();
+        setFieldsValue({
+          type: data.sceneName,
+        });
+      }
+      const handleSubmit = async () => {
+        try {
+          const params = await validate();
+          const apiData = {
+            file: fileFlow.file,
+            type: 2,
+          };
+          const res = await companyUploadExcel(apiData);
+          console.log('res', res);
+          closeModal();
+          resetFields();
+          createMessage.success('导入成功');
+        } catch (error) {
+          console.log('not passing', error);
+        }
+      };
+      function handleVisibleChange(v) {
+        // console.log(v);
+        // v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+      async function getTemplate() {
+        try {
+          const res = await downTemplate({ type: 2 });
+          console.log('res', res);
+        } catch (error) {
+          console.log('not passing', error);
+        }
+      }
+      return {
+        register,
+        schemas,
+        registerForm,
+        model: modelRef,
+        fileFlow,
+        handleVisibleChange,
+        handleSubmit,
+        addListFunc,
+        resetFields,
+        t,
+        getTemplate,
+      };
+    },
+  });
+</script>

src/views/customer/scene.vue

@@ -456,22 +456,6 @@
   });
 </script>
 <style lang="less" scoped>
-  // .tableHeader {
-  //   height: 50px;
-  //   display: flex;
-  //   align-items: center;
-
-  //   .item {
-  //     font-size: 14px;
-  //     color: #666;
-  //     margin-right: 10px;
-  //     cursor: pointer;
-  //     &.active {
-  //       font-weight: bold;
-  //       color: #222;
-  //     }
-  //   }
-  // }
   .desc-wrap-BasicTable {
     background-color: #f0f2f5;
     .vben-basic-table-form-container {