pref：优化报表配置

@@ -17,6 +17,9 @@
           @change="handleDeviceChange"
           mode="multiple"
           labelInValue
+          allowClear
+          @deselect="handleDeSelect"
+          notFoundContent="请选择设备"
         />
         <div style="margin-top: 1.5vh"></div>
         <DeviceAttrCpns
@@ -24,6 +27,7 @@
           @change="handleChange"
           :value="deviceList"
           :orgId="organizationId || orgId"
+          :deSelectValue="deSelectValue"
         />
       </template>
     </BasicForm>
@@ -67,6 +71,11 @@
   const handleDeviceChange = (e) => {
     deviceList.value = e;
   };
+  const deSelectValue = ref('');
+  const handleDeSelect = ({ key }) => {
+    //取消选中的key
+    deSelectValue.value = key;
+  };
   const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
     labelWidth: 120,
     schemas: formSchema,

 <template>
   <div
-    v-for="(param, index) in dynamicInput.params"
-    :key="index"
+    v-for="param in dynamicInput.params"
+    :key="param.key"
     style="display: flex; margin-top: 0.25vh"
   >
     <a-input
@@ -16,6 +16,7 @@
       style="width: 160px; margin-left: 1.8vw"
       :options="selectOptions"
       @change="emitChange"
+      allowClear
     />
   </div>
 </template>
@@ -40,7 +41,7 @@
     value: propTypes.array.def([]),
     orgId: propTypes.string.def(''),
   });
-  const emits = defineEmits(['change', 'update:value', 'dynamicReduceHeight', 'dynamicAddHeight']);
+  const emits = defineEmits(['change', 'update:value']);
   const selectOptions = ref<SelectTypes['options']>([]);
   //获取属性
   const getAttr = async (orgId, deviceId) => {
@@ -67,7 +68,6 @@
       let jsonObj = props.value;
       const deviceId = jsonObj.map((m: any) => m.value);
       await getAttr(props.orgId, deviceId);
-      console.log(jsonObj);
       jsonObj.forEach((item: any) => {
         dynamicInput.params.push({
           attribute: '',
@@ -97,12 +97,12 @@
   //回显
   const echoDynamicInputFunc = (o) => {
     dynamicInput.params = [];
-    dynamicInput.params = o.map((m) => {
-      return {
+    o.forEach((m: any) => {
+      dynamicInput.params.push({
         device: m.name,
         attribute: m.attribute,
         value: m.device,
-      };
+      });
     });
   };
   defineExpose({
@@ -110,21 +110,5 @@
   });
 </script>
 <style scoped lang="css">
-  .dynamic-delete-button {
-    cursor: pointer;
-    position: relative;
-    top: 4px;
-    font-size: 24px;
-    color: #999;
-    transition: all 0.3s;
-  }
-
-  .dynamic-delete-button:hover {
-    color: #777;
-  }
-
-  .dynamic-delete-button[disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+  @import './deviceAttrCpns.css';
 </style>

+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all 0.3s;
+}
+
+.dynamic-delete-button:hover {
+  color: #777;
+}
+
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}