perf: 产品详情物模型修复查看时不能查看物模型绑定属性

@@ -2,7 +2,8 @@
   <div class="flex">
     <InputNumber
       placeholder="最小值"
-      :value="getValue.min"
+      :disabled="$props.disabled"
+      :value="getValue.min!"
       style="width: 38%"
       @change="(value) => emitChange(value, 'min')"
     />
@@ -11,7 +12,8 @@
     <span style="width: 8px"></span>
     <InputNumber
       placeholder="最大值"
-      :value="getValue.max"
+      :disabled="$props.disabled"
+      :value="getValue.max!"
       style="width: 38%"
       @change="(value) => emitChange(value, 'max')"
     />
@@ -33,6 +35,7 @@
         min: Nullable<number>;
         max: Nullable<number>;
       };
+      disabled: boolean;
     }>(),
     {
       value: () => ({ min: null, max: null }),

@@ -19,6 +19,7 @@
   const props = withDefaults(
     defineProps<{
       value: ModelOfMatterParams[];
+      disabled: boolean;
     }>(),
     {
       value: () => [],
@@ -82,20 +83,33 @@
         >
           <div>参数名称: {{ item.functionName }}</div>
           <div class="flex">
-            <Button class="!p-0" type="link" @click="handleUpdate(item)">编辑</Button>
+            <Button class="!p-0" type="link" @click="handleUpdate(item)">
+              <span>{{ $props.disabled ? '查看' : '编辑' }}</span>
+            </Button>
             <Divider type="vertical" />
-            <Button class="!p-0" type="link" @click="handleDelete(item)">删除</Button>
+            <Button
+              :disabled="$props.disabled"
+              class="!p-0"
+              type="link"
+              @click="handleDelete(item)"
+            >
+              <span>删除</span>
+            </Button>
           </div>
         </div>
       </section>
-      <div>
+      <div :class="$props.disabled && 'text-gray-400'">
         <span class="mr-2">
           <PlusOutlined />
         </span>
-        <span @click="handleCreateParams">增加参数</span>
+        <span @click="!$props.disabled && handleCreateParams()">增加参数</span>
       </div>
     </div>
-    <StructFormModel @register="registerModal" @submit="handleSaveStruct" />
+    <StructFormModel
+      :disabled="$props.disabled"
+      @register="registerModal"
+      @submit="handleSaveStruct"
+    />
   </section>
 </template>
 

@@ -18,14 +18,17 @@
     mode: OpenModalMode.CREATE,
   });
 
+  const props = defineProps<{ disabled: boolean }>();
+
   const emit = defineEmits(['register', 'submit']);
 
-  const [register, { validate, setFieldsValue }] = useForm({
+  const [register, { validate, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
     schemas: formSchemas,
     actionColOptions: {
       span: 14,
     },
+    disabled: props.disabled,
     showResetButton: false,
     submitOnReset: false,
     showActionButtonGroup: false,
@@ -46,6 +49,7 @@
 
       setFieldsValue(value);
     }
+    setProps({ disabled: props.disabled });
   });
 
   const handleSubmit = async () => {
@@ -71,6 +75,7 @@
     :width="800"
     @ok="handleSubmit"
     destroy-on-close
+    :show-ok-btn="!$props.disabled"
   >
     <BasicForm @register="register" />
   </BasicModal>

@@ -11,7 +11,7 @@ export enum DataTypeEnum {
   IS_BOOL = 'BOOL',
 }
 
-const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callback) => {
+export const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callback) => {
   value = value || {};
   const { min, max } = value;
   if (min >= max) {
@@ -20,7 +20,7 @@ const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callba
   return Promise.resolve();
 };
 
-const validateJSON = (_rule, value: ModelOfMatterParams[], _callback) => {
+export const validateJSON = (_rule, value: ModelOfMatterParams[], _callback) => {
   if (value.length) {
     return Promise.resolve();
   }
@@ -65,7 +65,15 @@ export const formSchemas: FormSchema[] = [
     defaultValue: 'INT',
     componentProps: {
       placeholder: '请选择数据类型',
-      api: findDictItemByCode,
+      api: async (params: Recordable) => {
+        try {
+          const record = await findDictItemByCode(params);
+          return record.filter((item) => item.itemValue !== 'STRUCT');
+        } catch (error) {
+          console.log(error);
+          return [];
+        }
+      },
       params: {
         dictCode: 'data_type',
       },

@@ -27,17 +27,26 @@
           <TabPane :key="FunctionType.SERVICE" :disabled="isTCPGatewaySubDevice" tab="服务" />
           <TabPane :key="FunctionType.EVENTS" tab="事件" :disabled="isTCPGatewaySubDevice" />
         </Tabs>
-        <Attribute v-if="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
+        <Attribute
+          v-if="activeKey === FunctionType.PROPERTIES"
+          :openModalMode="openModalMode"
+          ref="AttrRef"
+        />
         <Service
           v-if="activeKey === FunctionType.SERVICE"
           :record="$props.record"
+          :openModalMode="openModalMode"
           ref="ServiceRef"
         />
-        <Events v-if="activeKey === FunctionType.EVENTS" ref="EventsRef" />
-        <div
+        <Events
+          v-if="activeKey === FunctionType.EVENTS"
+          :openModalMode="openModalMode"
+          ref="EventsRef"
+        />
+        <!-- <div
           v-if="openModalMode === OpenModelMode.VIEW"
           class="absolute w-full h-full top-0 cursor-not-allowed z-50"
-        ></div>
+        ></div> -->
       </div>
     </BasicModal>
   </div>
@@ -116,6 +125,9 @@
         const title = unref(openModalMode) === OpenModelMode.UPDATE ? '编辑物模型' : '新增物模型';
         setModalProps({ title, showOkBtn: true, showCancelBtn: true });
       }
+      AttrRef.value?.setDisable(unref(openModalMode) === OpenModelMode.VIEW);
+      EventsRef.value?.setDisable(unref(openModalMode) === OpenModelMode.VIEW);
+      ServiceRef.value?.setDisable(unref(openModalMode) === OpenModelMode.VIEW);
     }
   );
 
@@ -153,7 +165,7 @@
       closeModal();
       emit('success');
     } catch (error) {
-      throw Error(error);
+      throw Error(error as string);
     } finally {
       setModalProps({ loading: false, okButtonProps: { loading: false } });
     }

@@ -4,18 +4,20 @@
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { DataType, ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
-  import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
   import {
     transfromToStructJSON,
     excludeIdInStructJSON,
   } from '/@/components/Form/src/externalCompns/components/StructForm/util';
-  import { FunctionType } from './config';
+  import { FunctionType, attributeSchema } from './config';
   import { isArray } from 'lodash';
+  import { OpenModelMode } from '../types';
 
-  const [register, { validate, resetFields, setFieldsValue }] = useForm({
+  defineProps<{ openModalMode: OpenModelMode }>();
+
+  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
-    schemas: formSchemas,
+    schemas: attributeSchema,
     actionColOptions: {
       span: 14,
     },
@@ -24,6 +26,10 @@
     showActionButtonGroup: false,
   });
 
+  const setDisable = (flag: boolean) => {
+    setProps({ disabled: flag });
+  };
+
   async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
     const _values = (await validate()) as StructFormValue;
     if (!_values) return {};
@@ -68,6 +74,7 @@
     resetFormData,
     getFormData,
     setFormData,
+    setDisable,
   });
 </script>
 <style lang="less" scoped></style>

@@ -7,8 +7,11 @@
   import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
   import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
+  import { OpenModelMode } from '../types';
 
-  const [register, { validate, resetFields, setFieldsValue }] = useForm({
+  defineProps<{ openModalMode: OpenModelMode }>();
+
+  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
     schemas: eventSchemas,
     actionColOptions: {
@@ -19,6 +22,10 @@
     showActionButtonGroup: false,
   });
 
+  const setDisable = (flag: boolean) => {
+    setProps({ disabled: flag });
+  };
+
   //回显数据
   const setFormData = (record: ModelOfMatterParams) => {
     const { functionJson = {}, functionName, identifier, remark, eventType } = record;
@@ -69,6 +76,7 @@
     setFormData,
     resetFormData,
     getFormData,
+    setDisable,
   });
 </script>
 <style lang="less" scoped></style>

@@ -9,22 +9,29 @@
   import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
+  import { OpenModelMode } from '../types';
 
   const props = defineProps<{
     record: DeviceRecord;
+    openModalMode: OpenModelMode;
   }>();
 
-  const [register, { validate, resetFields, setFieldsValue }] = useForm({
+  const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
     schemas: serviceSchemas(props.record.transportType === 'TCP'),
     actionColOptions: {
       span: 14,
     },
+    disabled: props.openModalMode === OpenModelMode.VIEW,
     showResetButton: false,
     submitOnReset: false,
     showActionButtonGroup: false,
   });
 
+  const setDisable = (flag: boolean) => {
+    setProps({ disabled: flag });
+  };
+
   //回显数据
   const setFormData = (record: ModelOfMatterParams) => {
     const { functionJson = {}, functionName, identifier, remark, callType } = record;
@@ -98,6 +105,7 @@
     setFormData,
     resetFormData,
     getFormData,
+    setDisable,
   });
 </script>
 <style lang="less" scoped></style>

 import { FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+
+export const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callback) => {
+  value = value || {};
+  const { min, max } = value;
+  if (min >= max) {
+    return Promise.reject('最大值小于最小值');
+  }
+  return Promise.resolve();
+};
+
+export const validateJSON = (_rule, value: ModelOfMatterParams[], _callback) => {
+  if (value.length) {
+    return Promise.resolve();
+  }
+  return Promise.reject('JSON对象不能为空');
+};
 
 export enum FormField {
   FUNCTION_NAME = 'functionName',
@@ -358,3 +375,265 @@ export const addParamsSchemas: FormSchema[] = [
     ifShow: ({ values }) => isNumber(values[FormField.TYPE]),
   },
 ];
+
+export const attributeSchema: FormSchema[] = [
+  {
+    field: FormField.FUNCTION_NAME,
+    label: '功能名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入功能名称',
+    },
+  },
+  {
+    field: FormField.IDENTIFIER,
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: FormField.TYPE,
+    label: '数据类型',
+    required: true,
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    defaultValue: 'INT',
+    componentProps: {
+      placeholder: '请选择数据类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'data_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormField.VALUE_RANGE,
+    label: '取值范围',
+    component: 'CustomMinMaxInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    colProps: {
+      span: 18,
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
+    rules: [{ validator: validateValueRange }],
+  },
+  {
+    field: FormField.STEP,
+    label: '步长',
+    component: 'InputNumber',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入步长',
+      min: 1,
+      formatter: (value: number | string) => {
+        return value ? Math.floor(Number(value)) : value;
+      },
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
+    dynamicRules: ({ model }) => {
+      const valueRange = model[FormField.VALUE_RANGE] || {};
+      const { min = 0, max = 0 } = valueRange;
+      const step = model[FormField.STEP];
+      return [
+        {
+          validator: () => {
+            if (step > max - min) {
+              return Promise.reject('步长不能大于取值范围的差值');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: FormField.UNIT_NAME,
+    label: '单位名称',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: FormField.UNIT,
+    label: '单位',
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择单位',
+        api: async (params) => {
+          const list = await findDictItemByCode(params);
+          list.map((item) => (item.itemText = `${item.itemText} / ${item.itemValue}`));
+          return list;
+        },
+        params: {
+          dictCode: 'attribute_unit',
+        },
+        labelInValue: true,
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        onChange(_, record: Record<'label' | 'value', string>) {
+          if (record) {
+            const { label } = record;
+            setFieldsValue({ [FormField.UNIT_NAME]: label });
+          }
+        },
+        getPopupContainer: () => document.body,
+        showSearch: true,
+        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+          let { label, value } = option;
+          label = label.toLowerCase();
+          value = value.toLowerCase();
+          inputValue = inputValue.toLowerCase();
+          return label.includes(inputValue) || value.includes(inputValue);
+        },
+      };
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DataTypeEnum.IS_NUMBER_DOUBLE,
+  },
+  {
+    field: FormField.BOOL_CLOSE,
+    component: 'Input',
+    required: true,
+    label: '0 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：关',
+    },
+    defaultValue: '关',
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_BOOL,
+    dynamicRules: ({ model }) => {
+      const close = model[FormField.BOOL_CLOSE];
+      const open = model[FormField.BOOL_OPEN];
+      return [
+        {
+          required: true,
+        },
+        {
+          validator() {
+            if (open === close) return Promise.reject('布尔值不能相同');
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: FormField.BOOL_OPEN,
+    component: 'Input',
+    required: true,
+    label: '1 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：开',
+    },
+    defaultValue: '开',
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_BOOL,
+    dynamicRules: ({ model }) => {
+      const close = model[FormField.BOOL_CLOSE];
+      const open = model[FormField.BOOL_OPEN];
+      return [
+        {
+          required: true,
+        },
+        {
+          validator() {
+            if (open === close) return Promise.reject('布尔值不能相同');
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+  {
+    field: FormField.LENGTH,
+    component: 'Input',
+    required: true,
+    label: '数据长度',
+    defaultValue: '10240',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      placeholder: '请输入数据长度',
+    },
+    renderComponentContent: () => {
+      return {
+        suffix: () => '字节',
+      };
+    },
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING,
+  },
+  {
+    field: FormField.ACCESS_MODE,
+    component: 'ApiRadioGroup',
+    label: '读写类型',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 'r',
+    componentProps: {
+      placeholder: '请选择读写类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'read_write_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: FormField.SPECS_LIST,
+    label: 'JSON对象',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRUCT,
+    rules: [{ required: true, validator: validateJSON }],
+  },
+  {
+    field: FormField.REFARK,
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      maxLength: 100,
+      placeholder: '请输入描述',
+    },
+  },
+];