matrix_components 2.0.366 → 2.0.367

package/dist/ComponentDemo/FormDemo copy 2.vue

@@ -0,0 +1,557 @@
+<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'
+import { nextTick } from 'vue'
+
+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 state = reactive({
+  formData: {},
+  readOnly: props.readOnly,
+  model: props.readOnly ? '' : 'vertical',
+  // 使用 cloneDeep 进行深拷贝，保留函数
+  rows: [
+    [
+      {
+        key: 'confidence',
+        label: '置信度',
+        value: 'aaa',
+        component: ElInput,
+        params: {
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+      {
+        key: 'iou',
+        label: '交并比',
+        value: '',
+        component: ElInput,
+        params: {
+          'v-length.range': {
+            min: 0,
+            max: 1,
+            maxLength: 3,
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+            },
+          ],
+        },
+      },
+    ],
+  ],
+  rows2: [
+    [
+      {
+        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: ' ',
+      },
+    ],
+  ],
+  rows3: [
+    [
+      {
+        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)',
+            },
+          ],
+        },
+      },
+    ],
+  ],
+})
+
+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
+}
+
+/**
+ * 重置表单
+ */
+async function resetFormData() {
+  // 使用组件内置的 resetForm 方法
+  row1Ref.value?.resetForm?.()
+  row2Ref.value?.resetForm?.()
+  row3Ref.value?.resetForm?.()
+    // 重置表单验证状态
+    formRef.value?.clearValidate?.()
+  // 清空结果显示
+  state.formData = {}
+  ElMessage.success('表单重置成功')
+}
+
+/**
+ * 重置表单数据到指定值或默认值
+ * @param targetRows 要重置的rows数据
+ * @param defaultValues 默认值对象，key为字段key，value为默认值
+ */
+function resetFormToDefaults(targetRows: any[], defaultValues: Record<string, any> = {}) {
+  for (let rowIndex = 0; rowIndex < targetRows.length; rowIndex++) {
+    const row = targetRows[rowIndex]
+    for (let colIndex = 0; colIndex < row.length; colIndex++) {
+      const item = row[colIndex]
+      if (item.key) {
+        // 如果提供了默认值，使用默认值，否则根据组件类型重置
+        if (defaultValues.hasOwnProperty(item.key)) {
+          item.value = cloneDeep(defaultValues[item.key])
+        } else {
+          // 根据组件类型或当前值类型设置默认值
+          if (Array.isArray(item.value)) {
+            item.value = []
+          } else if (typeof item.value === 'number') {
+            item.value = 0
+          } else if (typeof item.value === 'boolean') {
+            item.value = false
+          } else {
+            item.value = ''
+          }
+        }
+
+        // 重置删除的文件列表
+        if (item.delValue !== undefined) {
+          item.delValue = defaultValues[`${item.key}_delValue`]
+            ? cloneDeep(defaultValues[`${item.key}_delValue`])
+            : []
+        }
+      }
+
+      // 检查子项
+      if (item.children && Array.isArray(item.children)) {
+        for (let childIndex = 0; childIndex < item.children.length; childIndex++) {
+          const child = item.children[childIndex]
+          if (child.key) {
+            // 重置子项
+            if (defaultValues.hasOwnProperty(child.key)) {
+              child.value = cloneDeep(defaultValues[child.key])
+            } else {
+              if (Array.isArray(child.value)) {
+                child.value = []
+              } else if (typeof child.value === 'number') {
+                child.value = 0
+              } else if (typeof child.value === 'boolean') {
+                child.value = false
+              } else {
+                child.value = ''
+              }
+            }
+
+            // 重置子项删除的文件列表
+            if (child.delValue !== undefined) {
+              child.delValue = defaultValues[`${child.key}_delValue`]
+                ? cloneDeep(defaultValues[`${child.key}_delValue`])
+                : []
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 批量设置表单值
+ * @param targetRows 要设置的rows数据
+ * @param values 值对象，key为字段key，value为要设置的值
+ */
+function setFormValues(targetRows: any[], values: Record<string, any> = {}) {
+  for (let rowIndex = 0; rowIndex < targetRows.length; rowIndex++) {
+    const row = targetRows[rowIndex]
+    for (let colIndex = 0; colIndex < row.length; colIndex++) {
+      const item = row[colIndex]
+      if (item.key && values.hasOwnProperty(item.key)) {
+        item.value = cloneDeep(values[item.key])
+      }
+
+      // 检查子项
+      if (item.children && Array.isArray(item.children)) {
+        for (let childIndex = 0; childIndex < item.children.length; childIndex++) {
+          const child = item.children[childIndex]
+          if (child.key && values.hasOwnProperty(child.key)) {
+            child.value = cloneDeep(values[child.key])
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 重置所有表单到默认值（新的重置方法）
+ * @param customDefaults 自定义默认值
+ */
+function resetAllFormsToDefaults(customDefaults: Record<string, any> = {}) {
+  // 重置第一个表单
+  resetFormToDefaults(state.rows, customDefaults)
+
+  // 重置第二个表单
+  resetFormToDefaults(state.rows2, customDefaults)
+
+  // 重置第三个表单
+  resetFormToDefaults(state.rows3, customDefaults)
+
+  // 重置表单验证状态
+  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>