perf: 优化编辑设备时变更产品与组织增加锁定提示

+<script setup lang="ts">
+  import { InputGroup, Button, Popconfirm } from 'ant-design-vue';
+  import { computed, ref, unref, watch } from 'vue';
+  import { componentMap } from '../componentMap';
+  import { ComponentType } from '../types';
+  import Icon from '/@/components/Icon';
+  import { PopConfirm } from '/@/components/Table';
+  import { upperFirst } from '/@/components/Transition/src/ExpandTransition';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: number | string | Recordable | Recordable[];
+      component?: ComponentType;
+      componentProps?: Recordable;
+      disabled?: boolean;
+      changeEvent?: string;
+      valueField?: string;
+      defaultLockStatus?: boolean;
+      popconfirm?: Omit<PopConfirm, 'confirm' | 'cancel'>;
+    }>(),
+    {
+      changeEvent: 'change',
+      valueField: 'value',
+      disabled: false,
+      component: 'Input',
+      defaultLockStatus: true,
+      componentProps: () => ({}),
+    }
+  );
+
+  const slots = defineSlots<{
+    popconfirmTitle?: () => any;
+  }>();
+
+  const emits = defineEmits(['change']);
+
+  const ControlComponent = computed(() => componentMap.get(props.component));
+
+  const getControlComponentProps = computed(() => {
+    const { componentProps, changeEvent, component, valueField, value } = props;
+    const isCheck = component && ['Switch', 'Checkbox'].includes(component);
+    const eventKey = `on${upperFirst(changeEvent)}`;
+    return {
+      ...componentProps,
+      [eventKey]: (...args: Nullable<Recordable>[]) => {
+        const [e] = args;
+        if (componentProps?.[eventKey]) {
+          componentProps?.[eventKey](...args);
+        }
+        const target = e ? e.target : null;
+        const value = target ? (isCheck ? target.checked : target.value) : e;
+        emits('change', value);
+      },
+      [valueField]: value,
+    };
+  });
+
+  const popconfirmVisible = ref(false);
+
+  const confirm = () => {
+    controlDisableStatus.value = false;
+    popconfirmVisible.value = false;
+  };
+
+  const cancel = () => {
+    popconfirmVisible.value = false;
+  };
+
+  const getPopConfirmProps = computed(() => {
+    const { popconfirm } = props;
+
+    return {
+      ...popconfirm,
+      onConfirm: confirm,
+      onCancel: cancel,
+      onVisibleChange: () => {
+        if (!unref(controlDisableStatus)) {
+          popconfirmVisible.value = false;
+          controlDisableStatus.value = true;
+          return;
+        }
+      },
+      title: slots.popconfirmTitle ? slots.popconfirmTitle : popconfirm?.title,
+    };
+  });
+
+  const controlDisableStatus = ref(props.defaultLockStatus);
+
+  watch(
+    () => props.defaultLockStatus,
+    (target) => {
+      controlDisableStatus.value = !!target;
+    },
+    { immediate: true }
+  );
+</script>
+
+<template>
+  <InputGroup compact class="w-full !flex">
+    <ControlComponent
+      v-bind="getControlComponentProps"
+      class="flex-auto"
+      :disabled="controlDisableStatus"
+    />
+    <Popconfirm v-model:visible="popconfirmVisible" v-bind="getPopConfirmProps">
+      <Button type="primary" :disabled="disabled">
+        <Icon
+          :icon="controlDisableStatus ? 'ant-design:lock-outlined' : 'ant-design:unlock-outlined'"
+        />
+      </Button>
+    </Popconfirm>
+  </InputGroup>
+</template>

@@ -143,4 +143,5 @@ export type ComponentType =
   | 'ConditionFilter'
   | 'TimeRangePicker'
   | 'TriggerDurationInput'
-  | 'AlarmProfileSelect';
+  | 'AlarmProfileSelect'
+  | 'LockControlGroup';

@@ -82,11 +82,11 @@
 </script>
 
 <template>
-  <section class="flex">
-    <ApiTreeSelect v-bind="getBindProps" />
-    <Button v-if="getShowCreate" type="link" @click="handleOpenCreate" :disabled="disabled"
-      >新增组织</Button
-    >
+  <section class="!flex">
+    <ApiTreeSelect v-bind="getBindProps" class="flex-auto" />
+    <Button v-if="getShowCreate" type="link" @click="handleOpenCreate" :disabled="disabled">
+      新增组织
+    </Button>
     <OrganizationDrawer v-if="getShowCreate" @register="registerDrawer" @success="handleReload" />
   </section>
 </template>

@@ -7,7 +7,7 @@ import { JSONEditor } from '/@/components/CodeEditor';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getModelServices } from '/@/api/device/modelOfMatter';
 import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
-import { nextTick, toRaw, unref } from 'vue';
+import { h, nextTick, toRaw, unref } from 'vue';
 import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
@@ -18,9 +18,13 @@ import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter
 
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
+import LockControlGroup from '/@/components/Form/src/components/LockControlGroup.vue';
+import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
 
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
+useComponentRegister('LockControlGroup', LockControlGroup);
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
@@ -30,6 +34,17 @@ export enum TypeEnum {
 export const isGateWay = (type: string) => {
   return type === TypeEnum.IS_GATEWAY;
 };
+
+const updateProductHelpMessage = [
+  '注意：',
+  '修改设备产品时，如果"大屏"、"组态"、"看板"、"场景联动"、"数据流转"有关联设备，请自行调整并保存。',
+];
+
+const updateOrgHelpMessage = [
+  '注意:',
+  '1、修改设备组织时，如果"大屏"、"组态"、"看板"、"场景联动"、"数据流转"等有关联设备，请自行调整并保存。',
+  '2、网关设备在修改组织时，其关联网关子设备组织归属于网关组织及以下不用修改，否则将同步更新网关子设备组织为网关组织。',
+];
 // 第一步的表单
 export const step1Schemas: FormSchema[] = [
   {
@@ -105,45 +120,51 @@ export const step1Schemas: FormSchema[] = [
     field: 'profileId',
     label: '所属产品',
     required: true,
-    component: 'ApiSelect',
-    helpMessage: [
-      '注意：修改设备产品时，如果"大屏"、"组态"、"看板"、"场景联动"、"数据流转"有关联设备，请自行调整并保存。',
-    ],
+    component: 'LockControlGroup',
+    helpMessage: updateProductHelpMessage,
+    renderComponentContent: () => ({
+      popconfirmTitle: () =>
+        updateProductHelpMessage.map((text) => h('div', { style: { maxWidth: '200px' } }, text)),
+    }),
     componentProps: ({ formActionType, formModel }) => {
       const { setFieldsValue } = formActionType;
       return {
-        api: async () => {
-          const options = await queryDeviceProfileBy({
-            deviceType: formModel?.isUpdate ? formModel?.deviceType : null,
-          });
-          const { profileId } = formModel;
-          if (profileId) {
-            const selectRecord = options.find((item) => item.tbProfileId === profileId);
-            selectRecord && setFieldsValue({ transportType: selectRecord!.transportType });
-          }
-          return options;
-        },
-        labelField: 'name',
-        valueField: 'tbProfileId',
-        onChange(
-          _value: string,
-          option: { deviceType: string; transportType: string; id: string }
-        ) {
-          const { deviceType, transportType, id } = option;
-          setFieldsValue({
-            deviceType: deviceType,
-            transportType,
-            deviceProfileId: id,
-            gatewayId: null,
-            codeType: transportType === TransportTypeEnum.TCP ? TaskTypeEnum.MODBUS_RTU : null,
-            code: null,
-            addressCode: null,
-          });
+        component: 'ApiSelect',
+        defaultLockStatus: !!formModel?.isUpdate,
+        componentProps: {
+          api: async () => {
+            const options = await queryDeviceProfileBy({
+              deviceType: formModel?.isUpdate ? formModel?.deviceType : null,
+            });
+            const { profileId } = formModel;
+            if (profileId) {
+              const selectRecord = options.find((item) => item.tbProfileId === profileId);
+              selectRecord && setFieldsValue({ transportType: selectRecord!.transportType });
+            }
+            return options;
+          },
+          labelField: 'name',
+          valueField: 'tbProfileId',
+          onChange(
+            _value: string,
+            option: { deviceType: string; transportType: string; id: string }
+          ) {
+            const { deviceType, transportType, id } = option;
+            setFieldsValue({
+              deviceType: deviceType,
+              transportType,
+              deviceProfileId: id,
+              gatewayId: null,
+              codeType: transportType === TransportTypeEnum.TCP ? TaskTypeEnum.MODBUS_RTU : null,
+              code: null,
+              addressCode: null,
+            });
+          },
+          showSearch: true,
+          placeholder: '请选择产品',
+          filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
+            option.label.includes(inputValue),
         },
-        showSearch: true,
-        placeholder: '请选择产品',
-        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
-          option.label.includes(inputValue),
       };
     },
   },
@@ -322,9 +343,19 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'organizationId',
     label: '所属组织',
-    component: 'Select',
+    component: 'LockControlGroup',
     required: true,
-    slot: 'addOrg',
+    helpMessage: updateOrgHelpMessage,
+    renderComponentContent: () => ({
+      popconfirmTitle: () =>
+        updateOrgHelpMessage.map((text) => h('div', { style: { maxWidth: '240px' } }, text)),
+    }),
+    componentProps: ({ formModel }) => {
+      return {
+        component: 'OrgTreeSelect',
+        defaultLockStatus: !!formModel?.isUpdate,
+      };
+    },
   },
   {
     field: 'label',

@@ -2,26 +2,6 @@
   <div class="step1">
     <div class="step1-form">
       <BasicForm @register="register">
-        <template #addOrg="{ model, field }">
-          <div style="display: flex; align-items: center">
-            <div style="width: 245px">
-              <a-tree-select
-                @change="handleTreeOrg"
-                v-model:value="model[field]"
-                show-search
-                style="width: 100%"
-                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-                placeholder="请选择组织"
-                allow-clear
-                tree-default-expand-all
-                :tree-data="model?.['organizationList'] || treeData"
-              />
-            </div>
-            <div>
-              <a-button type="link" @click="handleOpenOrgDrawer">新增组织</a-button>
-            </div>
-          </div>
-        </template>
         <template #snCode="{ model, field }">
           <div class="flex">
             <Input :maxlength="36" v-model:value="model[field]" placeholder="请输入设备名称" />
@@ -91,11 +71,10 @@
         </Spin>
       </div>
     </Modal>
-    <DeptDrawer @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, unref, reactive, toRefs, onMounted } from 'vue';
+  import { defineComponent, ref, nextTick, unref, reactive } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
@@ -109,8 +88,6 @@
   import { validatorLongitude, validatorLatitude } from '/@/utils/rules';
   import { getOrganizationList } from '/@/api/system/system';
   import { copyTransFun } from '/@/utils/fnUtils';
-  import { useDrawer } from '/@/components/Drawer';
-  import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { toRaw } from 'vue';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
@@ -129,7 +106,6 @@
       FormItem: Form.Item,
       Row,
       Col,
-      DeptDrawer,
       Spin,
     },
     props: {
@@ -152,16 +128,7 @@
         copyTransFun(data as any as any[]);
         orgData.treeData = data;
       };
-      onMounted(async () => {
-        await getOrganizationListFunc();
-      });
-      const { treeData } = toRefs(orgData);
-      const [registerModal, { openDrawer }] = useDrawer();
-      const handleOpenOrgDrawer = () => {
-        openDrawer(true, {
-          isUpdate: false,
-        });
-      };
+
       const handleSuccess = async () => {
         await getOrganizationListFunc();
       };
@@ -178,27 +145,17 @@
       const devicePic = ref('');
       const loading = ref(false);
 
-      const [
-        register,
-        {
-          validate,
-          resetFields,
-          setFieldsValue,
-          getFieldsValue,
-          updateSchema,
-          clearValidate,
-          validateFields,
-        },
-      ] = useForm({
-        labelWidth: 140,
-        schemas: step1Schemas,
-        actionColOptions: {
-          span: 14,
-        },
-        labelAlign: 'right',
-        showResetButton: false,
-        showSubmitButton: false,
-      });
+      const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
+        useForm({
+          labelWidth: 140,
+          schemas: step1Schemas,
+          actionColOptions: {
+            span: 14,
+          },
+          labelAlign: 'right',
+          showResetButton: false,
+          showSubmitButton: false,
+        });
 
       async function nextStep() {
         try {
@@ -503,13 +460,6 @@
         });
       }
 
-      const handleTreeOrg = (option: string) => {
-        if (option) clearValidate('organizationId');
-        else {
-          validateFields(['organizationId']);
-        }
-      };
-
       return {
         resetFields,
         positionState,
@@ -538,11 +488,7 @@
         loading,
         rules,
         redirectPosition,
-        treeData,
-        registerModal,
-        handleOpenOrgDrawer,
         handleSuccess,
-        handleTreeOrg,
         devicePositionState,
         spinning,
       };