tplink摄像头机构增删改同步

src/views/iot/tplink/project/ProjectInfo.data.ts

@@ -4,12 +4,12 @@ import {FormSchema} from '/@/components/Table';
 //列表数据
 export const columns: BasicColumn[] = [
   {
-    title: '项目序号',
+    title: '机构序号',
     align: "center",
     dataIndex: 'projectId'
   },
   {
-    title: '项目名称',
+    title: '机构名称',
     align: "center",
     dataIndex: 'projectName'
   },
@@ -78,13 +78,13 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
-    label: '项目序号',
+    label: '机构序号',
     field: 'projectId',
     component: 'Input',
     dynamicDisabled: true
   },
   {
-    label: '项目名称',
+    label: '机构名称',
     field: 'projectName',
     component: 'Input',
   },

src/views/iot/tplink/project/ProjectInfoList.vue

@@ -26,15 +26,13 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { columns,searchFormSchema } from './ProjectInfo.data';
-  import { list, sync } from './ProjectInfo.api';
+  import { list, sync, deletePrject } from './ProjectInfo.api';
   import { useUserStore } from '/@/store/modules/user';
   import { useRouter } from 'vue-router';
   import { useDrawer } from "@/components/Drawer";
   import ProjectInfoDrawer from './components/ProjectInfoDrawer.vue';
-  import { deletePrject } from "@/views/iot/tplink/project/ProjectInfo.api";
   import {Modal} from "ant-design-vue";
   import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
-  import {rebootDevice} from "@/views/iot/tplink/camera/camera.api";
   //注册drawer
   const [registerDrawer, { openDrawer }] = useDrawer();
   let router = useRouter();
@@ -45,7 +43,7 @@
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
-      title: '护理单元-物联管理-项目信息',
+      title: '护理单元-物联管理-机构信息',
       api: list,
       columns,
       canResize:false,

src/views/iot/tplink/region/RegionInfo.api.ts

@@ -3,6 +3,9 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   list = '/iot/regionInfo/list',
   sync = '/iot/regionInfo/sync',
+  add = '/iot/regionInfo/add',
+  edit = '/iot/regionInfo/edit',
+  delete = '/iot/regionInfo/delete',
 }
 
 /**
@@ -16,3 +19,21 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
  * @param params
  */
 export const sync = (params) => defHttp.get({ url: Api.sync, params });
+
+/**
+ * 保存或者更新区域
+ * @param params
+ */
+export const saveOrUpdateRegion = (params, isUpdate) => {
+  let url = isUpdate ? Api.edit : Api.add;
+  return defHttp.post({ url: url, params });
+};
+
+/**
+ * 删除区域
+ */
+export const deleteRegion = (params,handleSuccess) => {
+  return defHttp.post({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {
+    handleSuccess();
+  });
+};

src/views/iot/tplink/region/RegionInfo.data.ts

@@ -19,7 +19,12 @@ export const columns: BasicColumn[] = [
     dataIndex: 'regionLevel'
   },
   {
-    title: '项目名称',
+    title: '上级名称',
+    align: "center",
+    dataIndex: 'parentName'
+  },
+  {
+    title: '机构名称',
     align: "center",
     dataIndex: 'projectName'
   },
@@ -37,13 +42,14 @@ export const columns: BasicColumn[] = [
 
 export const searchFormSchema: FormSchema[] = [
   {
-    label: '项目',
+    label: '机构',
     field: 'projectId',
     component: 'JDictSelectTag',
     componentProps: {
       dictCode: 'nu_iot_tplink_project,project_name,project_id',
-      placeholder: '请选择项目',
+      placeholder: '请选择机构',
     },
+    // ignoreDisabled : true,
     //colProps: { span: 6 },
   },
 ];
@@ -56,53 +62,69 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
-    label: '项目序号',
+    label: '',
     field: 'projectId',
-    component: 'Input'
+    component: 'Input',
+    show: false,
   },
   {
-    label: '项目名称',
+    label: '',
+    field: 'parentId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '区域序号',
+    field: 'regionId',
+    component: 'Input',
+    dynamicDisabled: true
+  },
+  {
+    label: '区域名称',
+    field: 'regionName',
+    component: 'Input',
+  },
+  {
+    label: '区域层级',
+    field: 'regionLevel',
+    component: 'Input',
+    dynamicDisabled: true
+  },
+  {
+    label: '上级名称',
+    field: 'parentName',
+    component: 'Input',
+    dynamicDisabled: ({model})=>{
+      if(model.regionId || model.parentId){
+        return true;
+      }else{
+        return false;
+      }
+    }
+  },
+  {
+    label: '机构名称',
     field: 'projectName',
     component: 'Input',
+    dynamicDisabled: ({model})=>{
+      if(model.regionId || model.projectId){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   {
-    label: '创建时间',
+    label: '更新时间',
-    field: 'createTimeStr',
+    field: 'updateTime',
     component: 'Input',
+    dynamicDisabled: true
   },
   {
-    label: '设备数量',
+    label: '区域次序',
-    field: 'deviceNum',
+    field: 'sort',
     component: 'Input',
-  },
+    dynamicDisabled: true
-  {
-    label: '离线设备数',
-    field: 'offlineNum',
-    component: 'Input',
-  },
-  {
-    label: '异常设备数',
-    field: 'abnormalNum',
-    component: 'Input',
-  },
-  {
-    label: '运行天数',
-    field: 'runningTimeStr',
-    component: 'Input',
-  },
-  {
-    label: '状态',
-    field: 'status',
-    component: 'JDictSelectTag',
-    defaultValue: 1,
-    componentProps: ({}) => {
-      return {
-        options: [
-          { label: '正常', value: 1, key: '1' },
-          { label: '冻结', value: 2, key: '2' },
-        ]
-      };
-    },
   },
 ];
 

src/views/iot/tplink/region/RegionInfoList.vue

@@ -5,7 +5,8 @@
       <BasicTable @register="registerTable">
         <!--插槽:table标题-->
         <template #tableTitle>
-          <a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSync"> 同步</a-button>
+          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
+          <a-button preIcon="ant-design:sync-outlined" @click="handleSync"> 同步</a-button>
         </template>
         <!--操作栏-->
         <template #action="{ record }">
@@ -15,6 +16,7 @@
         </template>
       </BasicTable>
       <!-- 表单区域 -->
+      <RegionInfoDrawer @register="registerDrawer" @success="handleSuccess" />
     </div>
   </a-spin>
 </template>
@@ -24,12 +26,13 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { columns,searchFormSchema } from './RegionInfo.data';
-  import { list, sync } from './RegionInfo.api';
+  import { list, sync, deleteRegion } from './RegionInfo.api';
   import { useUserStore } from '/@/store/modules/user';
   import { useRouter } from 'vue-router';
   import { useDrawer } from "@/components/Drawer";
-  import { useMessage } from "@/hooks/web/useMessage";
+  import RegionInfoDrawer from './components/RegionInfoDrawer.vue';
-  const { createMessage } = useMessage();
+  import {Modal} from "ant-design-vue";
+  import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
   //注册drawer
   const [registerDrawer, { openDrawer }] = useDrawer();
   let router = useRouter();
@@ -44,14 +47,12 @@
       api: list,
       columns,
       canResize:false,
-      // 是否显示操作列
-      showActionColumn: false,
       formConfig: {
         // labelWidth: 200,
         schemas: searchFormSchema,
       },
       actionColumn: {
-        width: 120,
+        width: 160,
         fixed: 'right',
       },
       beforeFetch: async (params) => {
@@ -72,29 +73,94 @@
   });
 
   /**
-   * 详情
+   * 新增
    */
-  function handleDetail(record: Recordable) {
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+
+  /**
+   * 添加下级
+   */
+  function handleAddChild(parent) {
+    let record = {
+      projectId: parent.projectId,
+      projectName: parent.projectName,
+      parentId: parent.regionId,
+      parentName: parent.regionName,
+    };
+    console.log(record);
+    openDrawer(true, {
+      record,
+      isUpdate: false,
+      showFooter: true,
+      tenantSaas: false,
+    });
+  }
+
+  /**
+   * 编辑
+   */
+  function handleEdit(record: Recordable) {
     openDrawer(true, {
       record,
       isUpdate: true,
-      showFooter: false,
+      showFooter: true,
       tenantSaas: false,
     });
   }
 
+  /**
+   * 删除
+   */
+  function handleDelete(record: Recordable) {
+    Modal.confirm({
+      title: '删除区域',
+      width: '500px',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: createVNode('div', { style: 'color:red;' }, '区域删除后，该区域下的所有设备将被转移，确定要删除该区域吗？'),
+      okText: '确定',
+      onOk() {
+        deleteRegion(record, reload);
+      },
+      onCancel() {
+        // console.log('Cancel');
+      },
+      class: 'test',
+    });
+  }
+
   /**
    * 操作栏
    */
   function getTableAction(record) {
     return [
       {
-        label: '详情',
+        label: '添加下级',
-        onClick: handleDetail.bind(null, record),
+        onClick: handleAddChild.bind(null, record),
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        onClick: handleDelete.bind(null, record),
       },
     ];
   }
 
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    reload();
+  }
+
   /**
    * 查询
    */
@@ -119,7 +185,7 @@
     let { getFieldsValue } = getForm();
     let params = getFieldsValue();
     if(params.projectId==null||params.projectId==''){
-      createMessage.error("请先择一个项目");
+      createMessage.error("请选择一个机构");
       return;
     }
     syncoading.value = true;

src/views/iot/tplink/region/components/RegionInfoDrawer.vue

@@ -0,0 +1,83 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    :title="getTitle"
+    :width="adaptiveWidth"
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+    destroyOnClose
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { formSchema } from "@/views/iot/tplink/region/RegionInfo.data";
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
+import { getTenantId } from "/@/utils/auth";
+import { saveOrUpdateRegion } from "@/views/iot/tplink/region/RegionInfo.api";
+
+// 声明Emits
+const emit = defineEmits(['success', 'register']);
+const attrs = useAttrs();
+const isUpdate = ref(true);
+const rowId = ref('');
+const departOptions = ref([]);
+let isFormDepartUser = false;
+//表单配置
+const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
+  labelWidth: 90,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+const showFooter = ref(true);
+//表单赋值
+const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  await resetFields();
+  showFooter.value = data?.showFooter ?? true;
+  setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
+  isUpdate.value = !!data?.isUpdate;
+  // 无论新增还是编辑，都可以设置表单值
+  if (typeof data.record === 'object') {
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+  // 隐藏底部时禁用整个表单
+  setProps({ disabled: !showFooter.value });
+});
+//获取标题
+const getTitle = computed(() => {
+  if (!unref(isUpdate)) {
+    return '新增区域';
+  } else {
+    return unref(showFooter) ? '编辑区域' : '区域详情';
+  }
+});
+const { adaptiveWidth } = useDrawerAdaptiveWidth();
+
+//提交事件
+async function handleSubmit() {
+  try {
+    let values = await validate();
+    setDrawerProps({ confirmLoading: true });
+    let params = values;
+    let isUpdateVal = unref(isUpdate);
+    await saveOrUpdateRegion(params,isUpdateVal);
+    //关闭弹窗
+    closeDrawer();
+    //刷新列表
+    emit('success');
+  } finally {
+    setDrawerProps({ confirmLoading: false });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>