tplink项目、分组同步机构和区域

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

@@ -16,7 +16,7 @@ export const columns: BasicColumn[] = [
   {
     title: '机构名称',
     align: 'center',
-    dataIndex: 'institutionalId_dictText',
+    dataIndex: 'institutionId_dictText',
   },
   {
     title: '创建时间',
@@ -56,10 +56,10 @@ export const columns: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     label: '机构',
-    field: 'institutionalId',
+    field: 'institutionId',
     component: 'JDictSelectTag',
     componentProps: {
-      dictCode: 'sys_depart,depart_name,id,org_category = 1 order by depart_name asc',
+      dictCode: 'nu_admin_institution_area,inst_name,id,org_category = 1 order by inst_name asc',
       placeholder: '请选择机构',
     },
   },
@@ -104,10 +104,10 @@ export const formSchema: FormSchema[] = [
   },
   {
     label: '机构名称',
-    field: 'institutionalId',
+    field: 'institutionId',
     component: 'JDictSelectTag',
     componentProps: {
-      dictCode: 'sys_depart,depart_name,id,org_category = 1 order by depart_name asc',
+      dictCode: 'nu_admin_institution_area,inst_name,id,org_category = 1 order by inst_name asc',
       placeholder: '请选择机构',
     },
   },

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

@@ -11,6 +11,7 @@ enum Api {
   add = '/iot/regionInfo/add',
   edit = '/iot/regionInfo/edit',
   delete = '/iot/regionInfo/delete',
+  queryChildrenByParentId = '/admin/institutionArea/queryChildrenByParentId',
 }
 
 
@@ -21,7 +22,7 @@ enum Api {
 export const queryProjectTreeSync = (params?) => defHttp.get({ url: Api.queryProjectTreeSync, params });
 
 /**
- * 获取区域树列表
+ * 获取分组树列表
  * @param params
  */
 export const queryRegionTreeSync = (params?) => defHttp.get({ url: Api.queryRegionTreeSync, params });
@@ -33,17 +34,23 @@ export const queryRegionTreeSync = (params?) => defHttp.get({ url: Api.queryRegi
 export const syncProject = (params?) => defHttp.get({ url: Api.syncProject, params });
 
 /**
- * 同步区域
+ * 同步分组
  * @param params
  */
 export const syncRegionChildren = (params?) => defHttp.get({ url: Api.syncRegionChildren, params });
 
 /**
- * 同步子区域
+ * 同步子分组
  * @param params
  */
 export const syncRegion = (params?) => defHttp.get({ url: Api.syncRegion, params });
 
+/**
+ * 通过parentId获取区域列表
+ * @param params
+ */
+export const queryArea = (params?) => defHttp.get({ url: Api.queryChildrenByParentId, params });
+
 /**
  * 列表接口
  * @param params
@@ -57,7 +64,7 @@ export const list = (params) => defHttp.get({ url: Api.list, params });
 export const sync = (params) => defHttp.get({ url: Api.sync, params });
 
 /**
- * 保存或者更新区域
+ * 保存或者更新分组
  * @param params
  */
 export const saveOrUpdateRegion = (params, isUpdate) => {
@@ -66,7 +73,7 @@ export const saveOrUpdateRegion = (params, isUpdate) => {
 };
 
 /**
- * 删除区域
+ * 删除分组
  */
 export const deleteRegion = (params,handleSuccess) => {
   return defHttp.post({ url: Api.delete, params }, { joinParamsToUrl: true }).then(() => {

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

@@ -4,17 +4,17 @@ import {FormSchema} from '/@/components/Table';
 //列表数据
 export const columns: BasicColumn[] = [
   {
-    title: '区域序号',
+    title: '分组序号',
     align: "center",
     dataIndex: 'regionId'
   },
   {
-    title: '区域名称',
+    title: '分组名称',
     align: "center",
     dataIndex: 'regionName'
   },
   {
-    title: '区域层级',
+    title: '分组层级',
     align: "center",
     dataIndex: 'regionLevel'
   },
@@ -24,7 +24,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'parentName'
   },
   {
-    title: '机构名称',
+    title: '项目名称',
     align: "center",
     dataIndex: 'projectName'
   },
@@ -34,7 +34,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'updateTime'
   },
   {
-    title: '区域次序',
+    title: '分组次序',
     align: "center",
     dataIndex: 'sort'
   },
@@ -42,7 +42,7 @@ export const columns: BasicColumn[] = [
 
 export const searchFormSchema: FormSchema[] = [
   {
-    label: '机构',
+    label: '项目',
     field: 'projectId',
     component: 'JDictSelectTag',
     componentProps: {
@@ -67,6 +67,12 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     show: false,
   },
+  {
+    label: '',
+    field: 'institutionId',
+    component: 'Input',
+    show: false,
+  },
   {
     label: '',
     field: 'parentId',
@@ -74,18 +80,24 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
-    label: '区域序号',
+    label: '分组序号',
     field: 'regionId',
     component: 'Input',
     dynamicDisabled: true
   },
   {
-    label: '区域名称',
+    label: '分组名称',
     field: 'regionName',
     component: 'Input',
   },
   {
-    label: '区域层级',
+    label: '区域名称',
+    field: 'areaId',
+    component: 'Input',
+    slot: 'areaSelect'
+  },
+  {
+    label: '分组层级',
     field: 'regionLevel',
     component: 'Input',
     dynamicDisabled: true
@@ -97,7 +109,7 @@ export const formSchema: FormSchema[] = [
     dynamicDisabled: true
   },
   {
-    label: '机构名称',
+    label: '项目名称',
     field: 'projectName',
     component: 'Input',
     dynamicDisabled: ({model})=>{
@@ -115,7 +127,7 @@ export const formSchema: FormSchema[] = [
     dynamicDisabled: true
   },
   {
-    label: '区域次序',
+    label: '分组次序',
     field: 'sort',
     component: 'Input',
     dynamicDisabled: true

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

@@ -1,6 +1,17 @@
 <template>
   <a-spin :spinning="loading">
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #areaSelect ="{model,field}">
+        <a-select v-model:value="model[field]" @change="(value,option) => handleChange(value,option,model)">
+          <a-select-option :value="null">请选择…</a-select-option>
+          <template v-for="item in areaOptions" :key="`${item.id}`">
+            <a-select-option :value="item.id" :label="item.instName">
+              {{item.instName}}
+            </a-select-option>
+          </template>
+        </a-select>
+      </template>
+    </BasicForm>
     <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
       <div class="j-box-bottom-button-float">
         <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
@@ -13,15 +24,22 @@
 <script lang="ts" setup>
   import { watch, computed, inject, ref, unref, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { saveOrUpdateRegion } from '@/views/iot/tplink/region/RegionInfo.api';
+  import {
+    queryArea,
+    queryRegionTreeSync,
+    saveOrUpdateRegion
+  } from '@/views/iot/tplink/region/RegionInfo.api';
   import { formSchema } from '@/views/iot/tplink/region/RegionInfo.data';
   import { useDesign } from '/@/hooks/web/useDesign';
-
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {propTypes} from "@/utils/propTypes";
+  const { createMessage, createSuccessModal } = useMessage();
   const emit = defineEmits(['success']);
   const props = defineProps({
     data: { type: Object, default: () => ({}) },
     rootTreeData: { type: Array, default: () => [] },
   });
+  const areaOptions = ref<any[]>([]);
   const loading = ref<boolean>(false);
   // 当前是否是更新模式
   const isUpdate = ref<boolean>(true);
@@ -46,6 +64,7 @@
         model.value = record;
         await resetFields();
         await setFieldsValue({ ...record });
+        await fetchArea(record.institutionId);
       },
       { deep: true, immediate: true }
     );
@@ -72,6 +91,26 @@
       loading.value = false;
     }
   }
+
+  const fetchArea = async (institutionId) => {
+    if (!institutionId){
+      institutionId = '-1';
+    }
+    areaOptions.value = [];
+    const data = await queryArea({ pid : institutionId });
+    Object.assign(areaOptions.value, data);
+  }
+
+  async function handleChange(value,option:Option,formData){
+    if(value == null){
+      formData["regionName"] = model.value["regionName"];
+    }else{
+      formData["regionName"] = option.label;
+    }
+    console.log(formData);
+  }
+
+
 </script>
 <style lang="less">
 

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

@@ -8,7 +8,17 @@
     :showFooter="showFooter"
     destroyOnClose
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #areaSelect ="{model,field}">
+        <a-select v-model:value="model[field]" @change="(value,option) => handleChange(value,option,model)">
+          <template v-for="item in areaOptions" :key="`${item.id}`">
+            <a-select-option :value="item.id" :label="item.instName">
+              {{item.instName}}
+            </a-select-option>
+          </template>
+        </a-select>
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 
@@ -19,14 +29,13 @@ 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";
+import {queryArea, 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({
@@ -35,6 +44,7 @@ const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSc
   showActionButtonGroup: false,
 });
 const showFooter = ref(true);
+const areaOptions = ref<any[]>([]);
 //表单赋值
 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
   await resetFields();
@@ -46,6 +56,7 @@ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (
     setFieldsValue({
       ...data.record,
     });
+    await fetchArea(data.record.institutionId);
   }
   // 隐藏底部时禁用整个表单
   setProps({ disabled: !showFooter.value });
@@ -76,6 +87,26 @@ async function handleSubmit() {
     setDrawerProps({ confirmLoading: false });
   }
 }
+
+const fetchArea = async (institutionId) => {
+  if (!institutionId){
+    institutionId = '-1';
+  }
+  areaOptions.value = [];
+  const data = await queryArea({ pid : institutionId });
+  Object.assign(areaOptions.value, data);
+}
+
+async function handleChange(value,option:Option,formData){
+  if(value == null){
+    formData["regionName"] = "";
+  }else{
+    formData["regionName"] = option.label;
+  }
+  console.log(formData);
+}
+
+
 </script>
 
 <style scoped>

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

@@ -260,12 +260,19 @@ import {
       createMessage.warning('请先选择一个节点');
       return;
     }
+    console.log(data);
     let record = {
       projectId: data.projectId,
       projectName: data.projectName,
       parentId: data.regionId,
       parentName: data.regionName,
     };
+    if(data.regionId != null){
+      record["institutionId"] = data.areaId;
+    }else{
+      record["institutionId"] = data.institutionId;
+    }
+    console.log(record);
     openRegionDrawer(true, {
       record,
       isUpdate: false,
@@ -289,6 +296,11 @@ import {
       parentId: data.regionId,
       parentName: data.regionName,
     };
+    if(data.regionId != null){
+      record["institutionId"] = data.areaId;
+    }else{
+      record["institutionId"] = data.institutionId;
+    }
     console.log(record);
     openRegionDrawer(true, {
       record,

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

@@ -42,6 +42,7 @@
   }
   // 左侧树rootTreeData触发
   function onRootTreeData(data) {
+    console.log(data);
     rootTreeData.value = data;
   }