matrix_components 2.0.385 → 2.0.387

package/dist/ComponentDemo/FormDemo.vue

@@ -52,13 +52,27 @@
               gapV="10px"
             ></NsForm>
           </NsFormTitle>
+          <NsFormTitle title="级联选择器测试">
+            <NsForm
+              ref="row4Ref"
+              :readOnly="state.readOnly"
+              backgroundColor="#fff"
+              :model="state.model"
+              :rows="state.rows4"
+              formPropKey="rows4"
+              labelColor="#606266"
+              labelWidth="150"
+              gapH="20px"
+              gapV="10px"
+            ></NsForm>
+          </NsFormTitle>
         </el-form>
       </div>
     </div>
   </template>
   
   <script setup lang="ts">
-  import { ElInput, ElMessage, ElRadioGroup } 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'
@@ -66,7 +80,7 @@
   const props = defineProps({
     readOnly: {
       type: Boolean,
-      default: false,
+      default: true
     },
     row: {
       type: Object,
@@ -74,16 +88,37 @@
     },
   })
   
-  const formRef = ref()
-  const row1Ref = ref()
-  const row2Ref = ref()
-  const row3Ref = ref()
+const formRef = ref()
+const row1Ref = ref()
+const row2Ref = ref()
+const row3Ref = ref()
+const row4Ref = ref()
   
   const state = reactive({
     formData: {},
     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',
@@ -191,7 +226,7 @@
         {
           key: 'save_video',
           label: '是否保存视频',
-          value: '1',
+          value: false,
           component: ElRadioGroup,
           params: {
             rules: [
@@ -203,11 +238,11 @@
             ],
             options: [
               {
-                value: '1',
+                value: true,
                 label: '是',
               },
               {
-                value: '0',
+                value: false,
                 label: '否',
               },
             ],
@@ -264,6 +299,132 @@
         },
       ],
     ],
+    rows4: [
+      [
+        {
+          key: 'region',
+          label: '地区选择',
+          value: ['beijing', 'chaoyang'],
+          component: ElCascader,
+          params: {
+            rules: [
+              {
+                required: true,
+                message: '请选择地区',
+                trigger: 'change',
+              },
+            ],
+            props: {
+              showPrefix: false,
+              checkStrictly: true,
+              checkOnClickNode: true,
+            },
+            options: [
+              {
+                value: 'beijing',
+                label: '北京市',
+                children: [
+                  {
+                    value: 'chaoyang',
+                    label: '朝阳区',
+                    children: [
+                      {
+                        value: 'chaoyangmen',
+                        label: '朝阳门街道',
+                      },
+                    ],
+                  },
+                  {
+                    value: 'haidian',
+                    label: '海淀区',
+                  },
+                ],
+              },
+              {
+                value: 'shanghai',
+                label: '上海市',
+                children: [
+                  {
+                    value: 'pudong',
+                    label: '浦东新区',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+        {
+          key: 'department',
+          label: '部门选择',
+          value: ['company'],
+          component: ElCascader,
+          params: {
+            props: {
+              value: 'code',
+              label: 'name',
+              children: 'subDepartments',
+              showPrefix: false,
+              checkStrictly: true,
+              checkOnClickNode: true,
+            },
+            separator: '，',
+            options: [
+              {
+                code: 'company',
+                name: '公司总部',
+                subDepartments: [
+                  {
+                    code: 'tech',
+                    name: '技术部',
+                    subDepartments: [
+                      {
+                        code: 'frontend',
+                        name: '前端组',
+                      },
+                      {
+                        code: 'backend',
+                        name: '后端组',
+                      },
+                    ],
+                  },
+                  {
+                    code: 'sales',
+                    name: '销售部',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+      [
+        {
+          key: 'single_level_cascader',
+          label: '单层级联',
+          value: 'beijing',
+          component: ElCascader,
+          params: {
+            options: [
+              {
+                value: 'beijing',
+                label: '北京市',
+              },
+              {
+                value: 'shanghai',
+                label: '上海市',
+              },
+              {
+                value: 'guangzhou',
+                label: '广州市',
+              },
+            ],
+          },
+        },
+        {
+          value: ' ',
+        },
+      ],
+    ],
   })
   
   function detAreaModeChange(value: any) {
@@ -322,7 +483,8 @@
     const data1 = row1Ref.value?.getFormKvData?.()
     const data2 = row2Ref.value?.getFormKvData?.()
     const data3 = row3Ref.value?.getFormKvData?.()
-    const data = { ...data1, ...data2, ...data3 }
+    const data4 = row4Ref.value?.getFormKvData?.()
+    const data = { ...data1, ...data2, ...data3, ...data4 }
     state.formData = data
     ElMessage.success('表单校验成功')
     return data
@@ -336,6 +498,7 @@
     row1Ref.value?.resetForm?.()
     row2Ref.value?.resetForm?.()
     row3Ref.value?.resetForm?.()
+    row4Ref.value?.resetForm?.()
     setTimeout(()=>{
         // 重置表单验证状态
         formRef.value?.clearValidate?.()
@@ -345,11 +508,25 @@
     }, 0)
   }
   
-
   async function getDetail() {
+    debugger
+    return
     // 模拟获取详情数据
     setTimeout(()=>{
-      const res = { "confidence": "aaa1", "iou": "1", "timeInterval": "2", "stuck_threshold": "3", "max_retries": "4", "save_video": "0", "pre_buffer_second": "5", "det_area_mode": "abnormal", "det_area_json": "6" }
+      const res = { 
+        "confidence": "aaa1", 
+        "iou": "1", 
+        "timeInterval": "2", 
+        "stuck_threshold": "3", 
+        "max_retries": "4", 
+        "save_video": true, 
+        "pre_buffer_second": "5", 
+        "det_area_mode": "abnormal", 
+        "det_area_json": "6",
+        "region": ["beijing", "haidian"],
+        "department": ["company","tech","frontend"],
+        "single_level_cascader": "shanghai"
+      }
      for (const [k, v] of Object.entries(res)) {
         let rows1 = getAllFormNodeByKey(state.rows,k);
         if(rows1) {
@@ -366,8 +543,12 @@
               detAreaModeChange(v)
             }
         }
+        let rows4 = getAllFormNodeByKey(state.rows4,k);
+        if(rows4) {
+            rows4.value = v;
+        }
     }
-    }, 1000)
+    }, 2000)
   }
 
   onMounted(() => {

package/dist/ComponentDemo/VideoDemo.vue

@@ -27,7 +27,7 @@ const videoData = reactive({
               videoModel: 'easyplayer',
               id: '111',
               label: '视频A--1视频A--1视频A--1',
-              url: 'http://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000001/hls.m3u8',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000003.live.flv',
               deviceId: 'a1',
               channelId: 'a11',
               icontype: 'on',
@@ -35,7 +35,7 @@ const videoData = reactive({
             {
               id: 'D',
               label: '视频A--2',
-              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000013.live.flv',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000010.live.flv',
               deviceId: 'b1',
               channelId: 'b11',
               icontype: 'off',