matrix_components 2.0.375 → 2.0.377

package/dist/ComponentDemo/FormDemo copy 2.vue

@@ -1,557 +0,0 @@
-<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>