matrix_components 2.0.389 → 2.0.391

package/README.md

@@ -2,7 +2,7 @@
 组件使用示例参考dist/ComponentDemo
 
 ```
-version:2.0.389
+version:2.0.391
 2025-12-09
 更新日志：
 1.新增动态表单NsForm组件readOnly只读模式支持直接显示值

package/dist/ComponentDemo/FormDemo copy 2.vue

@@ -72,7 +72,7 @@
   </template>
   
   <script setup lang="ts">
-  import { ElInput, ElMessage, ElRadioGroup, ElCascader } from 'element-plus'
+  import { ElInput, ElMessage, ElRadioGroup, ElCascader, ElSwitch } from 'element-plus'
   import { h, onMounted, reactive, ref } from 'vue'
   import { cloneDeep } from 'lodash-es'
   import { nextTick } from 'vue'
@@ -80,7 +80,7 @@
   const props = defineProps({
     readOnly: {
       type: Boolean,
-      default: true,
+      default: false
     },
     row: {
       type: Object,
@@ -99,6 +99,26 @@ const row4Ref = ref()
     readOnly: props.readOnly,
     model: props.readOnly ? '' : 'vertical',
     rows: [
+      [
+        {
+                key: "isEnable",
+                label: "是否启用",
+                value: false,
+                component: ElSwitch,
+                params: {
+                    rules: [
+                        {
+                            required: true,
+                            message: "请选择",
+                        },
+                    ],
+                    width: 60,
+                    'inline-prompt': true,
+                    'active-text':"启用",
+                    'inactive-text':"禁用",
+                },
+            },
+      ],
       [
         {
           key: 'confidence',
@@ -206,7 +226,7 @@ const row4Ref = ref()
         {
           key: 'save_video',
           label: '是否保存视频',
-          value: true,
+          value: false,
           component: ElRadioGroup,
           params: {
             rules: [
@@ -423,15 +443,6 @@ const row4Ref = ref()
           events: {
             change: (value) => getAreasHandler(value),
           },
-          params: {
-            rules: [
-              {
-                required: true,
-                message: '请输入',
-                trigger: 'change',
-              },
-            ],
-          },
         },
         { value: ' ' },
       ])
@@ -489,9 +500,9 @@ const row4Ref = ref()
   }
   
   async function getDetail() {
-    // 模拟获取详情数据
     setTimeout(()=>{
       const res = { 
+        "isEnable": true,
         "confidence": "aaa1", 
         "iou": "1", 
         "timeInterval": "2", 
@@ -505,27 +516,39 @@ const row4Ref = ref()
         "department": ["company","tech","frontend"],
         "single_level_cascader": "shanghai"
       }
-     for (const [k, v] of Object.entries(res)) {
-        let rows1 = getAllFormNodeByKey(state.rows,k);
-        if(rows1) {
-            rows1.value = v;
-        }
-        let rows2 = getAllFormNodeByKey(state.rows2,k);
-        if(rows2) {
-            rows2.value = v;
-        }
-        let rows3 = getAllFormNodeByKey(state.rows3,k);
-        if(rows3) {
-            rows3.value = v;
-            if(k === 'det_area_mode'){
-              detAreaModeChange(v)
-            }
-        }
-        let rows4 = getAllFormNodeByKey(state.rows4,k);
-        if(rows4) {
-            rows4.value = v;
+      
+      row1Ref.value?.setFormData?.(res,true)
+      row2Ref.value?.setFormData?.(res,true)
+      row3Ref.value?.setFormData?.(res,true)
+      row4Ref.value?.setFormData?.(res,true)
+      // 特殊处理
+      // if (res.det_area_mode === 'abnormal') {
+      //   detAreaModeChange('abnormal')
+      // }
+
+      setTimeout(()=>{
+        const res = { 
+          "isEnable": true,
+          "confidence": "aaa1", 
+          "iou": "1", 
+          "timeInterval": "2", 
+          "stuck_threshold": "3", 
+          "max_retries": "4", 
+          "save_video": true, 
+          "pre_buffer_second": "5", 
+          "det_area_mode": "normal", 
+          "det_area_json": "6",
+          "region": ["beijing", "haidian"],
+          "department": ["company","tech","frontend"],
+          "single_level_cascader": "shanghai"
         }
-    }
+        
+        row1Ref.value?.setFormData?.(res,true)
+        row2Ref.value?.setFormData?.(res,true)
+        row3Ref.value?.setFormData?.(res,true)
+        row4Ref.value?.setFormData?.(res,true)
+        // 特殊处理
+      }, 2000)
     }, 2000)
   }
 

package/dist/ComponentDemo/FormDemo copy.vue

@@ -72,7 +72,7 @@
   </template>
   
   <script setup lang="ts">
-  import { ElInput, ElMessage, ElRadioGroup, ElCascader } from 'element-plus'
+  import { ElInput, ElMessage, ElRadioGroup, ElCascader, ElSwitch } from 'element-plus'
   import { h, onMounted, reactive, ref } from 'vue'
   import { cloneDeep } from 'lodash-es'
   import { nextTick } from 'vue'
@@ -80,7 +80,7 @@
   const props = defineProps({
     readOnly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     row: {
       type: Object,
@@ -99,6 +99,26 @@ const row4Ref = ref()
     readOnly: props.readOnly,
     model: props.readOnly ? '' : 'vertical',
     rows: [
+      [
+        {
+                key: "isEnable",
+                label: "是否启用",
+                value: false,
+                component: ElSwitch,
+                params: {
+                    rules: [
+                        {
+                            required: true,
+                            message: "请选择",
+                        },
+                    ],
+                    width: 60,
+                    'inline-prompt': true,
+                    'active-text':"启用",
+                    'inactive-text':"禁用",
+                },
+            },
+      ],
       [
         {
           key: 'confidence',
@@ -206,7 +226,7 @@ const row4Ref = ref()
         {
           key: 'save_video',
           label: '是否保存视频',
-          value: true,
+          value: false,
           component: ElRadioGroup,
           params: {
             rules: [
@@ -336,14 +356,18 @@ const row4Ref = ref()
         {
           key: 'department',
           label: '部门选择',
-          value: 'tech',
+          value: ['company'],
           component: ElCascader,
           params: {
             props: {
               value: 'code',
               label: 'name',
               children: 'subDepartments',
+              showPrefix: false,
+              checkStrictly: true,
+              checkOnClickNode: true,
             },
+            separator: '，',
             options: [
               {
                 code: 'company',
@@ -404,10 +428,11 @@ const row4Ref = ref()
   })
   
   function detAreaModeChange(value: any) {
+    debugger
+    if (state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json') {
+      state.rows3.pop()
+    }
     if (value === 'abnormal') {
-      if (state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json') {
-        state.rows3.pop()
-      }
       state.rows3.push([
         {
           key: 'det_area_json',
@@ -419,20 +444,9 @@ const row4Ref = ref()
           events: {
             change: (value) => getAreasHandler(value),
           },
-          params: {
-            rules: [
-              {
-                required: true,
-                message: '请输入',
-                trigger: 'change',
-              },
-            ],
-          },
         },
         { value: ' ' },
       ])
-    } else {
-      state.rows3.pop()
     }
   }
 
@@ -485,9 +499,9 @@ const row4Ref = ref()
   }
   
   async function getDetail() {
-    // 模拟获取详情数据
     setTimeout(()=>{
       const res = { 
+        "isEnable": true,
         "confidence": "aaa1", 
         "iou": "1", 
         "timeInterval": "2", 
@@ -498,30 +512,41 @@ const row4Ref = ref()
         "det_area_mode": "abnormal", 
         "det_area_json": "6",
         "region": ["beijing", "haidian"],
-        "department": "tech",
+        "department": ["company","tech","frontend"],
         "single_level_cascader": "shanghai"
       }
-     for (const [k, v] of Object.entries(res)) {
-        let rows1 = getAllFormNodeByKey(state.rows,k);
-        if(rows1) {
-            rows1.value = v;
-        }
-        let rows2 = getAllFormNodeByKey(state.rows2,k);
-        if(rows2) {
-            rows2.value = v;
-        }
-        let rows3 = getAllFormNodeByKey(state.rows3,k);
-        if(rows3) {
-            rows3.value = v;
-            if(k === 'det_area_mode'){
-              detAreaModeChange(v)
-            }
-        }
-        let rows4 = getAllFormNodeByKey(state.rows4,k);
-        if(rows4) {
-            rows4.value = v;
+      
+      row1Ref.value?.setFormData?.(res,false)
+      row2Ref.value?.setFormData?.(res,false)
+      row3Ref.value?.setFormData?.(res,false)
+      row4Ref.value?.setFormData?.(res,false)
+      // 特殊处理
+      detAreaModeChange('abnormal')
+
+      setTimeout(()=>{
+        const res = { 
+          "isEnable": true,
+          "confidence": "aaa1", 
+          "iou": "1", 
+          "timeInterval": "2", 
+          "stuck_threshold": "3", 
+          "max_retries": "4", 
+          "save_video": true, 
+          "pre_buffer_second": "5", 
+          "det_area_mode": "normal", 
+          "det_area_json": "6",
+          "region": ["beijing", "haidian"],
+          "department": ["company","tech","frontend"],
+          "single_level_cascader": "shanghai"
         }
-    }
+        
+        row1Ref.value?.setFormData?.(res,false)
+        row2Ref.value?.setFormData?.(res,false)
+        row3Ref.value?.setFormData?.(res,false)
+        row4Ref.value?.setFormData?.(res,false)
+        detAreaModeChange('normal')
+        
+      }, 2000)
     }, 2000)
   }
 

package/dist/ComponentDemo/FormDemo.vue

@@ -80,7 +80,7 @@
   const props = defineProps({
     readOnly: {
       type: Boolean,
-      default: true
+      default: false
     },
     row: {
       type: Object,
@@ -428,11 +428,17 @@ const row4Ref = ref()
   })
   
   function detAreaModeChange(value: any) {
+    // 使用深拷贝创建新的数组，确保响应式更新
+    const newRows3 = cloneDeep(state.rows3)
+    
+    // 检查最后一项是否是 det_area_json
+    const lastItem = newRows3[newRows3.length - 1]?.[0]
+    if (lastItem?.key === 'det_area_json') {
+      newRows3.pop()
+    }
+    
     if (value === 'abnormal') {
-      if (state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json') {
-        state.rows3.pop()
-      }
-      state.rows3.push([
+      newRows3.push([
         {
           key: 'det_area_json',
           label: '感兴趣区域',
@@ -440,33 +446,19 @@ const row4Ref = ref()
           readOnlyUseComponent: true,
           component: CustomUIs,
           span: 6,
-          events: {
-            change: (value) => getAreasHandler(value),
-          },
-          params: {
-            rules: [
-              {
-                required: true,
-                message: '请输入',
-                trigger: 'change',
-              },
-            ],
-          },
         },
         { value: ' ' },
       ])
-    } else {
-      state.rows3.pop()
     }
+    
+    // 使用赋值操作触发响应式更新
+    state.rows3 = newRows3
   }
 
   function CustomUIs() {
     return h('div', {style:'color: red', class:"xx"}, 'xxx')
   }
   
-  function getAreasHandler(value: any) {
-    state.rows3[state.rows3.length - 1][0].value = value
-  }
   
   /**
    * 保存
@@ -509,7 +501,6 @@ const row4Ref = ref()
   }
   
   async function getDetail() {
-    // 模拟获取详情数据
     setTimeout(()=>{
       const res = { 
         "isEnable": true,
@@ -526,27 +517,39 @@ const row4Ref = ref()
         "department": ["company","tech","frontend"],
         "single_level_cascader": "shanghai"
       }
-     for (const [k, v] of Object.entries(res)) {
-        let rows1 = getAllFormNodeByKey(state.rows,k);
-        if(rows1) {
-            rows1.value = v;
-        }
-        let rows2 = getAllFormNodeByKey(state.rows2,k);
-        if(rows2) {
-            rows2.value = v;
-        }
-        let rows3 = getAllFormNodeByKey(state.rows3,k);
-        if(rows3) {
-            rows3.value = v;
-            if(k === 'det_area_mode'){
-              detAreaModeChange(v)
-            }
-        }
-        let rows4 = getAllFormNodeByKey(state.rows4,k);
-        if(rows4) {
-            rows4.value = v;
+      
+      row1Ref.value?.setFormData?.(res,true)
+      row2Ref.value?.setFormData?.(res,true)
+      row3Ref.value?.setFormData?.(res,true)
+      row4Ref.value?.setFormData?.(res,true)
+      // 特殊处理
+      // if (res.det_area_mode === 'abnormal') {
+      //   detAreaModeChange('abnormal')
+      // }
+
+      setTimeout(()=>{
+        const res = { 
+          "isEnable": true,
+          "confidence": "aaa1", 
+          "iou": "1", 
+          "timeInterval": "2", 
+          "stuck_threshold": "3", 
+          "max_retries": "4", 
+          "save_video": true, 
+          "pre_buffer_second": "5", 
+          "det_area_mode": "normal", 
+          "det_area_json": "6",
+          "region": ["beijing", "haidian"],
+          "department": ["company","tech","frontend"],
+          "single_level_cascader": "shanghai"
         }
-    }
+        
+        row1Ref.value?.setFormData?.(res,true)
+        row2Ref.value?.setFormData?.(res,true)
+        row3Ref.value?.setFormData?.(res,true)
+        row4Ref.value?.setFormData?.(res,true)
+        // 特殊处理
+      }, 2000)
     }, 2000)
   }