matrix_components 2.0.366 → 2.0.367

package/dist/ComponentDemo/FormDemo copy.vue

@@ -0,0 +1,454 @@
+<template>
+    <div class="demo-container">
+      <div class="control-panel">
+        <h3>动态表单组件演示</h3>
+        <!-- 配置文件选择 -->
+        <el-form :model="state" ref="formRef" label-position="left">
+          <el-button type="primary" @click="getFormData">获取表单数据</el-button>
+          <el-button type="default" @click="resetFormData">重置表单</el-button>
+          <br />
+          <span style="color: red"> 结果：{{ state.formData }} </span>
+          <br />
+          <br />
+          <NsFormTitle title="模型参数">
+            <NsForm
+              ref="row1Ref"
+              :readOnly="state.readOnly"
+              backgroundColor="#fff"
+              :model="state.model"
+              :rows="state.rows"
+              formPropKey="rows"
+              labelColor="#606266"
+              labelWidth="150"
+              gapH="20px"
+              gapV="10px"
+            ></NsForm>
+          </NsFormTitle>
+          <NsFormTitle title="视频配置">
+            <NsForm
+              ref="row2Ref"
+              :readOnly="state.readOnly"
+              backgroundColor="#fff"
+              :model="state.model"
+              :rows="state.rows2"
+              formPropKey="rows2"
+              labelColor="#606266"
+              labelWidth="150"
+              gapH="20px"
+              gapV="10px"
+            ></NsForm>
+          </NsFormTitle>
+          <NsFormTitle title="结果保存">
+            <NsForm
+              ref="row3Ref"
+              :readOnly="state.readOnly"
+              backgroundColor="#fff"
+              :model="state.model"
+              :rows="state.rows3"
+              formPropKey="rows3"
+              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 { reactive, ref } from 'vue'
+  import { cloneDeep } from 'lodash-es'
+  
+  const props = defineProps({
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  })
+  
+  const formRef = ref()
+  const row1Ref = ref()
+  const row2Ref = ref()
+  const row3Ref = ref()
+  
+  // 保存初始数据
+  const initialRows = [
+    [
+      {
+        key: 'confidence',
+        label: '置信度',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 1,
+            maxLength: 3,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+      {
+        key: 'iou',
+        label: '交并比',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 1,
+            maxLength: 3,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+    ],
+  ]
+  
+  const initialRows2 = [
+    [
+      {
+        key: 'timeInterval',
+        label: '时间间隔（秒）',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 6000,
+            int: true,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+      {
+        key: 'stuck_threshold',
+        label: '视频帧卡顿（秒）',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 1000,
+            int: true,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+    ],
+    [
+      {
+        key: 'max_retries',
+        label: '最大重连次数',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 100,
+            int: true,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+      {
+        value: ' ',
+      },
+    ],
+  ]
+  
+  const initialRows3 = [
+    [
+      {
+        key: 'save_video',
+        label: '是否保存视频',
+        value: '1',
+        component: ElRadioGroup,
+        params: {
+          rules: [
+            {
+              required: true,
+              message: '请选择',
+              trigger: 'change',
+            },
+          ],
+          options: [
+            {
+              value: '1',
+              label: '是',
+            },
+            {
+              value: '0',
+              label: '否',
+            },
+          ],
+        },
+      },
+      {
+        key: 'pre_buffer_second',
+        label: '帧前缓存（秒）',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 1000,
+            int: true,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+    ],
+    [
+      {
+        key: 'det_area_mode',
+        label: '检测区域工作模式',
+        value: 'normal',
+        component: ElRadioGroup,
+        events: {
+          change: detAreaModeChange,
+        },
+        params: {
+          rules: [
+            {
+              required: true,
+              message: '请选择',
+              trigger: 'change',
+            },
+          ],
+          options: [
+            {
+              value: 'normal',
+              label: '常规检测(normal)',
+            },
+            {
+              value: 'abnormal',
+              label: '非常规检测(abnormal)',
+            },
+          ],
+        },
+      },
+    ],
+  ]
+  debugger
+  const state = reactive({
+    formData: {},
+    readOnly: props.readOnly,
+    model: props.readOnly ? '' : 'vertical',
+    // 使用 cloneDeep 进行深拷贝，保留函数
+    rows: cloneDeep(initialRows),
+    rows2: cloneDeep(initialRows2),
+    rows3: cloneDeep(initialRows3),
+  })
+  
+  function detAreaModeChange(value: any) {
+    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',
+          label: '感兴趣区域',
+          value: '',
+          component: ElInput,
+          span: 6,
+          events: {
+            change: (value) => getAreasHandler(value),
+          },
+          params: {
+            rules: [
+              {
+                required: true,
+                message: '请输入',
+                trigger: 'change',
+              },
+            ],
+          },
+        },
+        { value: ' ' },
+      ])
+    } else {
+      state.rows3.pop()
+    }
+  }
+  
+  function getAreasHandler(value: any) {
+    state.rows3[state.rows3.length - 1][0].value = value
+  }
+  
+  /**
+   * 保存
+   */
+  async function getFormData() {
+    try {
+      await formRef.value.validate()
+    } catch (error: any) {
+      console.log(error)
+      ElMessage.error('表单校验失败')
+      state.formData = {}
+      return false
+    }
+    const data1 = row1Ref.value?.getKeyValuePairs?.(state.rows)
+    const data2 = row2Ref.value?.getKeyValuePairs?.(state.rows2)
+    const data3 = row3Ref.value?.getKeyValuePairs?.(state.rows3)
+    const data = { ...data1, ...data2, ...data3 }
+    state.formData = data
+    ElMessage.success('表单校验成功')
+    return data
+  }
+  
+  /**
+   * 重置表单
+   */
+  function resetFormData() {
+    // 直接重新赋值整个数据结构，使用 cloneDeep 保留函数
+    state.rows = cloneDeep(initialRows)
+    state.rows2 = cloneDeep(initialRows2)
+    state.rows3 = cloneDeep(initialRows3)
+  
+    // 重置表单验证状态
+    formRef.value?.clearValidate?.()
+  
+    // 清空结果显示
+    state.formData = {}
+  
+    ElMessage.success('表单重置成功')
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .demo-container {
+    padding: 20px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  
+  .control-panel {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+  
+    h3 {
+      margin: 0 0 20px 0;
+      color: #333;
+    }
+  
+    h4 {
+      margin: 15px 0 10px 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+  
+  .config-section,
+  .upload-section,
+  .action-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+  
+    .config-select {
+      width: 300px;
+      margin-right: 10px;
+    }
+  
+    input[type='file'] {
+      margin-right: 10px;
+    }
+  
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 5px;
+    }
+  }
+  
+  .form-container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    margin-bottom: 20px;
+  }
+  
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+  }
+  
+  .data-card {
+    margin-top: 20px;
+  
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  
+    .form-data-display {
+      background-color: #f5f7fa;
+      padding: 15px;
+      border-radius: 4px;
+      font-size: 12px;
+      line-height: 1.5;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .config-select {
+      width: 100% !important;
+      margin-bottom: 10px;
+    }
+  
+    .el-button {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+  </style>
+