feat:设备配置详情 新增服务和事件静态页面

@@ -23,10 +23,10 @@
           <TabPane key="1" tab="属性">
           <TabPane key="1" tab="属性">
             <Attribute v-show="activeKey === '1'" ref="AttrRef" />
             <Attribute v-show="activeKey === '1'" ref="AttrRef" />
           </TabPane>
           </TabPane>
-          <TabPane disabled key="2" tab="服务">
+          <TabPane key="2" tab="服务">
             <Service v-show="activeKey === '2'" ref="ServiceRef" />
             <Service v-show="activeKey === '2'" ref="ServiceRef" />
           </TabPane>
           </TabPane>
-          <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件">
+          <TabPane key="3" v-show="activeKey === '3'" tab="事件">
             <Events v-show="activeKey === '3'" ref="EventsRef" />
             <Events v-show="activeKey === '3'" ref="EventsRef" />
           </TabPane>
           </TabPane>
         </Tabs>
         </Tabs>

@@ -22,11 +22,14 @@
   defineEmits(['register']);
   defineEmits(['register']);
   // const { createMessage } = useMessage();
   // const { createMessage } = useMessage();
   const TslConRef = ref<InstanceType<typeof TslContent>>();
   const TslConRef = ref<InstanceType<typeof TslContent>>();
+  const isUpdate = ref(false);
 
 
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: true });
     setModalProps({ confirmLoading: true });
-    console.log(data);
+    isUpdate.value = data.isUpdate;
     setModalProps({ confirmLoading: false });
     setModalProps({ confirmLoading: false });
+    // const jsCode = TslConRef?.value.aceEditor.getValue();
+    // TslConRef?.value.aceEditor.setValue(jsCode);
   });
   });
   const handleCancel = () => {
   const handleCancel = () => {
     TslConRef.value?.resetFormData();
     TslConRef.value?.resetFormData();

+<template>
+  <div>
+    <BasicForm @register="register">
+      <template #outputParamSlot>
+        <div>
+          <template v-for="(item, index) in outputParamData" :key="item">
+            <span style="display: none">{{ item }}</span>
+            <InputParamItem
+              :title="item.configName"
+              :item="item"
+              class="mt-4"
+              :index="index"
+              :ref="dynamicBindRef.outputParamItemRef"
+              @delete="deleteOutParItem"
+              @edit="editOutParItem"
+            />
+          </template>
+          <div style="display: flex" class="mt-2">
+            <span style="color: #0170cc; cursor: pointer">+</span>
+            <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span>
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+    <AddParamsModal @register="registerModal" @data="getData" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { eventSchemas } from './config';
+  import { useModal } from '/@/components/Modal';
+  import InputParamItem from './components/InputParamItem.vue';
+  import AddParamsModal from './components/AddParamsModal.vue';
+
+  const outputParamData: any = ref([]);
+  const dynamicBindRef = {
+    outputParamItemRef: ref([]),
+  };
+  const [registerModal, { openModal }] = useModal();
+  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 100,
+    schemas: eventSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
+  });
+  const getData = (d, f) => {
+    if (f == 'output') {
+      unref(outputParamData).push(d);
+      if (d.id !== null) {
+        const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id);
+        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1);
+      }
+    }
+  };
+  const handleAddOutParam = () => {
+    openModal(true, {
+      isUpdate: true,
+      flag: 'output',
+    });
+  };
+  const deleteOutParItem = (index) => {
+    unref(outputParamData).splice(index, 1);
+  };
+  const editOutParItem = (item) => {
+    openModal(true, {
+      isUpdate: false,
+      record: item,
+      flag: 'output',
+    });
+  };
+  //回显数据
+  const setFormData = (v) => {
+    setFieldsValue(v);
+  };
+  //获取数据
+  async function getFormData() {
+    const values = await validate();
+    if (!values) return;
+    return values;
+  }
+  //清空数据
+  const resetFormData = () => {
+    resetFields();
+  };
+
+  defineExpose({
+    setFormData,
+    resetFormData,
+    getFormData,
+  });
+</script>
+<style lang="less" scoped></style>

+<template>
+  <div>
+    <BasicForm @register="register">
+      <template #inputParamSlot>
+        <div>
+          <template v-for="(item, index) in inputParamData" :key="item">
+            <span style="display: none">{{ item }}</span>
+            <InputParamItem
+              :title="item.name"
+              :item="item"
+              class="mt-4"
+              :index="index"
+              :ref="dynamicBindRef.inputParamItemRef"
+              @delete="deleteInParItem"
+              @edit="editInParItem"
+            />
+          </template>
+          <div style="display: flex" class="mt-2">
+            <span style="color: #0170cc; cursor: pointer">+</span>
+            <span style="color: #0170cc; cursor: pointer" @click="handleAddInParam">增加参数</span>
+          </div>
+        </div>
+      </template>
+      <template #outputParamSlot>
+        <div>
+          <template v-for="(item, index) in outputParamData" :key="item">
+            <span style="display: none">{{ item }}</span>
+            <InputParamItem
+              :title="item.name"
+              :item="item"
+              class="mt-4"
+              :index="index"
+              :ref="dynamicBindRef.outputParamItemRef"
+              @delete="deleteOutParItem"
+              @edit="editOutParItem"
+            />
+          </template>
+          <div style="display: flex" class="mt-2">
+            <span style="color: #0170cc; cursor: pointer">+</span>
+            <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span>
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+    <AddParamsModal @register="registerModal" @data="getData" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { serviceSchemas } from './config';
+  import { useModal } from '/@/components/Modal';
+  import InputParamItem from './components/InputParamItem.vue';
+  import AddParamsModal from './components/AddParamsModal.vue';
+
+  const inputParamData: any = ref([]);
+  const outputParamData: any = ref([]);
+  const dynamicBindRef = {
+    inputParamItemRef: ref([]),
+    outputParamItemRef: ref([]),
+  };
+  const [registerModal, { openModal }] = useModal();
+
+  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 100,
+    schemas: serviceSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
+  });
+
+  const getData = (d, f) => {
+    if (f == 'input') {
+      unref(inputParamData).push(d);
+      if (d.id !== null) {
+        const findIndex = unref(inputParamData).findIndex((f) => f.id !== d.id);
+        if (findIndex !== -1) unref(inputParamData).splice(findIndex, 1);
+      }
+    } else {
+      unref(outputParamData).push(d);
+      if (d.id !== null) {
+        const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id);
+        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1);
+      }
+    }
+  };
+
+  const handleAddInParam = () => {
+    openModal(true, {
+      isUpdate: true,
+      flag: 'input',
+    });
+  };
+  const handleAddOutParam = () => {
+    openModal(true, {
+      isUpdate: true,
+      flag: 'output',
+    });
+  };
+
+  const deleteInParItem = (index) => {
+    unref(inputParamData).splice(index, 1);
+  };
+  const editInParItem = (item) => {
+    openModal(true, {
+      isUpdate: false,
+      record: item,
+      flag: 'input',
+    });
+  };
+  const deleteOutParItem = (index) => {
+    unref(outputParamData).splice(index, 1);
+  };
+  const editOutParItem = (item) => {
+    openModal(true, {
+      isUpdate: false,
+      record: item,
+      flag: 'output',
+    });
+  };
+
+  //回显数据
+  const setFormData = (v) => {
+    setFieldsValue(v);
+  };
+  //获取数据
+  async function getFormData() {
+    const values = await validate();
+    if (!values) return;
+    return values;
+  }
+  //清空数据
+  const resetFormData = () => {
+    resetFields();
+  };
+
+  defineExpose({
+    setFormData,
+    resetFormData,
+    getFormData,
+  });
+</script>
+<style lang="less" scoped></style>

+{
+  "_ppk": {},
+  "events": [],
+  "productKey": "hsrnBYoBGFe",
+  "properties": [],
+  "services": [
+    {
+      "callType": "ASYNC",
+      "createTs": 1666172133097,
+      "custom": true,
+      "identifier": "1",
+      "inputParams": [
+        {
+          "custom": true,
+          "dataSpecs": {
+            "dataType": "INT",
+            "max": "2",
+            "min": "1",
+            "step": "1",
+            "unit": "W/㎡",
+            "unitName": "太阳总辐射"
+          },
+          "dataType": "INT",
+          "direction": "PARAM_INPUT",
+          "identifier": "1",
+          "name": "1",
+          "paraOrder": 0
+        }
+      ],
+      "outputParams": [],
+      "productKey": "hsrnBYoBGFe",
+      "required": false,
+      "serviceName": "1"
+    },
+    {
+      "callType": "ASYNC",
+      "createTs": 1666172369588,
+      "custom": true,
+      "identifier": "wufu1",
+      "inputParams": [
+        {
+          "custom": true,
+          "dataSpecs": {
+            "dataType": "INT",
+            "max": "200",
+            "min": "100",
+            "step": "11",
+            "unit": "dS/m",
+            "unitName": "土壤EC值"
+          },
+          "dataType": "INT",
+          "direction": "PARAM_INPUT",
+          "identifier": "ceshi",
+          "name": "ceshi1",
+          "paraOrder": 0
+        }
+      ],
+      "outputParams": [],
+      "productKey": "hsrnBYoBGFe",
+      "required": false,
+      "serviceName": "服务1"
+    }
+  ]
+}

+<template>
+  <div>
+    <BasicForm @register="registerForm">
+      <template #valueRangeSlot>
+        <div style="display: flex">
+          <a-input v-model:vlaue="minMaxObj.min" placeholder="最小值" />
+          <span>~</span>
+          <a-input v-model:vlaue="minMaxObj.max" placeholder="最大值" />
+        </div>
+      </template>
+      <template #structSlot>
+        <div>
+          <template v-for="(item, index) in outputParamData" :key="item">
+            <span style="display: none">{{ item }}</span>
+            <InputParamItem
+              :title="item.name"
+              :item="item"
+              class="mt-4"
+              :index="index"
+              :ref="dynamicBindRef.outputParamItemRef"
+              @delete="deleteOutParItem"
+              @edit="editOutParItem"
+            />
+          </template>
+          <div style="display: flex" class="mt-2">
+            <span style="color: #0170cc; cursor: pointer">+</span>
+            <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span>
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+    <AddParamsModal @register="registerModal" @data="getData" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { addParamsSchemas } from '../config';
+  import { useModal } from '/@/components/Modal';
+  import InputParamItem from './InputParamItem.vue';
+  import AddParamsModal from './AddParamsModal.vue';
+
+  defineEmits(['register']);
+  const outputParamData: any = ref([]);
+  const dynamicBindRef = {
+    outputParamItemRef: ref([]),
+  };
+  const minMaxObj = reactive({
+    min: '',
+    max: '',
+  });
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 100,
+    schemas: addParamsSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
+  });
+
+  const getData = (d, f) => {
+    if (f == 'output') {
+      unref(outputParamData).push(d);
+      if (d.id !== null) {
+        const findIndex = unref(outputParamData).findIndex((f) => f.id !== d.id);
+        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1);
+      }
+    }
+  };
+
+  const handleAddOutParam = () => {
+    openModal(true, {
+      isUpdate: true,
+      flag: 'output',
+    });
+  };
+
+  const deleteOutParItem = (index) => {
+    unref(outputParamData).splice(index, 1);
+  };
+  const editOutParItem = (item) => {
+    openModal(true, {
+      isUpdate: false,
+      record: item,
+      flag: 'output',
+    });
+  };
+
+  const getFormData = async () => {
+    const value = await validate();
+    if (!value) return;
+    return value;
+  };
+  const setFormData = (v) => {
+    setFieldsValue(v);
+  };
+  const resetFormData = () => {
+    resetFields();
+    minMaxObj.min = '';
+    minMaxObj.max = '';
+  };
+
+  defineExpose({
+    setFormData,
+    getFormData,
+    resetFormData,
+  });
+</script>
+
+<style lang="less" scope></style>

+<template>
+  <div>
+    <BasicModal
+      :title="getTitle"
+      :maskClosable="false"
+      v-bind="$attrs"
+      width="45rem"
+      @register="register"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <AddParamForm ref="AddParamFormRef" />
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import AddParamForm from './AddParamForm.vue';
+
+  const emits = defineEmits(['register', 'data']);
+  const setEditData: any = reactive({
+    getEditData: {},
+  });
+  const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>();
+  const isUpdate = ref(false);
+  const isFlag = ref('');
+  const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));
+
+  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    handleCancel(false);
+    isUpdate.value = data.isUpdate;
+    isFlag.value = data.flag;
+    AddParamFormRef.value?.setFormData(data.record);
+    setEditData.getEditData = data.record;
+    setModalProps({ loading: false });
+  });
+
+  const handleCancel = (flag) => {
+    AddParamFormRef.value?.resetFormData();
+    if (flag) {
+      closeModal();
+    }
+  };
+  const handleSubmit = async () => {
+    const value = await AddParamFormRef.value?.getFormData();
+    if (!value) return;
+    emits(
+      'data',
+      {
+        ...value,
+        ...{ id: !isUpdate.value ? setEditData.getEditData.id : null },
+        ...{ index: !isUpdate.value ? setEditData.getEditData.index : null },
+      },
+      isFlag.value
+    );
+    handleCancel(true);
+  };
+  defineExpose({});
+</script>
+
+<style lang="less" scope></style>

+<template>
+  <div>
+    <a-card :title="`参数名称：${title}`" style="width: 540px; margin-top: -5px">
+      <template #extra>
+        <div style="display: flex; align-items: center">
+          <span style="color: #0170cc; cursor: pointer" @click="handleEdit(item, index)">编辑</span>
+          <a-divider type="vertical" style="height: 12px; background-color: #d8d8d8" />
+          <span style="color: #0170cc; cursor: pointer" class="ml-1" @click="handleDelete(index)"
+            >删除</span
+          >
+        </div>
+      </template>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { buildUUID } from '/@/utils/uuid';
+
+  const emit = defineEmits(['delete', 'edit']);
+  defineProps({
+    index: {
+      type: Number,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    item: {
+      type: Object,
+      required: true,
+      default: () => {},
+    },
+  });
+  const handleDelete = (index) => {
+    emit('delete', index);
+  };
+  const handleEdit = (item, index) => {
+    const value = {
+      ...item,
+      ...{ id: buildUUID() },
+      ...{ index },
+    };
+    emit('edit', value);
+  };
+</script>
+<style lang="less" scoped>
+  :deep(.ant-card-body) {
+    display: none !important;
+  }
+</style>

@@ -52,13 +52,14 @@ export const attrSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'platformType',
+    field: 'dataType',
     label: '数据类型',
     label: '数据类型',
     required: true,
     required: true,
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: {
     colProps: {
       span: 9,
       span: 9,
     },
     },
+    defaultValue: 'int32',
     componentProps: {
     componentProps: {
       placeholder: '请选择数据类型',
       placeholder: '请选择数据类型',
       api: findDictItemByCode,
       api: findDictItemByCode,
@@ -72,7 +73,6 @@ export const attrSchemas: FormSchema[] = [
   {
   {
     field: 'accessKeyId',
     field: 'accessKeyId',
     label: '单位',
     label: '单位',
-    required: true,
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: {
     colProps: {
       span: 9,
       span: 9,
@@ -86,6 +86,45 @@ export const attrSchemas: FormSchema[] = [
       labelField: 'itemText',
       labelField: 'itemText',
       valueField: 'itemValue',
       valueField: 'itemValue',
     },
     },
+    ifShow: ({ values }) => isNumber(values.dataType),
+  },
+  {
+    field: 'field1',
+    component: 'Input',
+    required: true,
+    label: '0 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：关',
+    },
+    ifShow: ({ values }) => isBool(values.dataType),
+  },
+  {
+    field: 'field11',
+    component: 'Input',
+    required: true,
+    label: '1 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：开',
+    },
+    ifShow: ({ values }) => isBool(values.dataType),
+  },
+  {
+    field: 'field2',
+    component: 'Input',
+    required: true,
+    label: '数据长度',
+    defaultValue: '10240',
+    colProps: {
+      span: 18,
+    },
+    suffix: '字节',
+    ifShow: ({ values }) => isString(values.dataType),
   },
   },
   {
   {
     field: 'brand',
     field: 'brand',
@@ -117,3 +156,303 @@ export const attrSchemas: FormSchema[] = [
     },
     },
   },
   },
 ];
 ];
+
+export const serviceSchemas: FormSchema[] = [
+  {
+    field: 'serviceName',
+    label: '功能名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入功能名称',
+    },
+  },
+  {
+    field: 'identifier',
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: 'callType',
+    component: 'ApiRadioGroup',
+    label: '调用方式',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 'asynchronous',
+    componentProps: {
+      placeholder: '请选择调用方式',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'call_mode',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'inputParam',
+    label: '输入参数',
+    component: 'Input',
+    slot: 'inputParamSlot',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'outputParam',
+    label: '输出参数',
+    component: 'Input',
+    slot: 'outputParamSlot',
+    colProps: { span: 24 },
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6,
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+export const eventSchemas: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '功能名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入功能名称',
+    },
+  },
+  {
+    field: 'configName1',
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: 'brand',
+    component: 'ApiRadioGroup',
+    label: '事件类型',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 'message',
+    componentProps: {
+      placeholder: '请选择事件类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'event_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'outputParam',
+    label: '输出参数',
+    component: 'Input',
+    slot: 'outputParamSlot',
+    colProps: { span: 24 },
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6,
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+/**
+ * 新增参数 动态显示表单
+ */
+enum DateTypeEnum {
+  IS_NUMBER_INT = 'int32',
+  IS_NUMBER_DOUBLE = 'double',
+  IS_STRING = 'text',
+  IS_STRUCT = 'struct',
+  IS_BOOL = 'bool',
+}
+const isNumber = (type: string) => {
+  return type === DateTypeEnum.IS_NUMBER_INT || type === DateTypeEnum.IS_NUMBER_DOUBLE;
+};
+
+const isString = (type: string) => {
+  return type === DateTypeEnum.IS_STRING;
+};
+const isStruct = (type: string) => {
+  return type === DateTypeEnum.IS_STRUCT;
+};
+
+const isBool = (type: string) => {
+  return type === DateTypeEnum.IS_BOOL;
+};
+
+export const addParamsSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '参数名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入参数名称',
+    },
+  },
+  {
+    field: 'identifier',
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: 'dataType',
+    label: '数据类型',
+    required: true,
+    component: 'ApiSelect',
+    colProps: {
+      span: 23,
+    },
+    defaultValue: 'int32',
+    componentProps: {
+      placeholder: '请选择数据类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'data_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'configNam2112111',
+    label: 'JSON 对象',
+    required: true,
+    component: 'Input',
+    slot: 'structSlot',
+    colProps: {
+      span: 23,
+    },
+    ifShow: ({ values }) => isStruct(values.dataType),
+  },
+  {
+    field: 'field1',
+    component: 'Input',
+    required: true,
+    label: '0 -',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      placeholder: '如：关',
+    },
+    ifShow: ({ values }) => isBool(values.dataType),
+  },
+  {
+    field: 'field11',
+    component: 'Input',
+    required: true,
+    label: '1 -',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      placeholder: '如：开',
+    },
+    ifShow: ({ values }) => isBool(values.dataType),
+  },
+  {
+    field: 'field2',
+    component: 'Input',
+    required: true,
+    label: '数据长度',
+    defaultValue: '10240',
+    colProps: {
+      span: 24,
+    },
+    suffix: '字节',
+    ifShow: ({ values }) => isString(values.dataType),
+  },
+  {
+    field: 'configNam2112',
+    label: '取值范围',
+    component: 'Input',
+    slot: 'valueRangeSlot',
+    colProps: {
+      span: 23,
+    },
+    ifShow: ({ values }) => isNumber(values.dataType),
+  },
+  {
+    field: 'configNam22',
+    label: '步长',
+    component: 'Input',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入步长',
+    },
+    ifShow: ({ values }) => isNumber(values.dataType),
+  },
+  {
+    field: 'unit',
+    label: '单位',
+    component: 'ApiSelect',
+    colProps: {
+      span: 23,
+    },
+    componentProps: {
+      placeholder: '请选择单位',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'attribute_unit',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isNumber(values.dataType),
+  },
+];