matrix_components 2.0.395 → 2.0.400

package/dist/ComponentDemo/FormDemo copy.vue

@@ -1,656 +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>
-          <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, ElCascader, ElSwitch } from 'element-plus'
-  import { h, onMounted, 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 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',
-          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: false,
-          component: ElRadioGroup,
-          params: {
-            rules: [
-              {
-                required: true,
-                message: '请选择',
-                trigger: 'change',
-              },
-            ],
-            options: [
-              {
-                value: true,
-                label: '是',
-              },
-              {
-                value: false,
-                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)',
-              },
-            ],
-          },
-        },
-      ],
-    ],
-    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) {
-    debugger
-    if (state.rows3?.length && state.rows3[state.rows3.length - 1]?.[0]?.key === 'det_area_json') {
-      state.rows3.pop()
-    }
-    if (value === 'abnormal') {
-      state.rows3.push([
-        {
-          key: 'det_area_json',
-          label: '感兴趣区域',
-          value: '',
-          readOnlyUseComponent: true,
-          component: CustomUIs,
-          span: 6,
-          events: {
-            change: (value) => getAreasHandler(value),
-          },
-        },
-        { value: ' ' },
-      ])
-    }
-  }
-
-  function CustomUIs() {
-    return h('div', {style:'color: red', class:"xx"}, 'xxx')
-  }
-  
-  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?.getFormKvData?.()
-    const data2 = row2Ref.value?.getFormKvData?.()
-    const data3 = row3Ref.value?.getFormKvData?.()
-    const data4 = row4Ref.value?.getFormKvData?.()
-    const data = { ...data1, ...data2, ...data3, ...data4 }
-    state.formData = data
-    ElMessage.success('表单校验成功')
-    return data
-  }
-  
-  /**
-   * 重置表单
-   */
-  async function resetFormData() {
-    // 使用组件内置的 resetForm 方法
-    row1Ref.value?.resetForm?.()
-    row2Ref.value?.resetForm?.()
-    row3Ref.value?.resetForm?.()
-    row4Ref.value?.resetForm?.()
-    setTimeout(()=>{
-        // 重置表单验证状态
-        formRef.value?.clearValidate?.()
-        // 清空结果显示
-        state.formData = {}
-        ElMessage.success('表单重置成功')
-    }, 0)
-  }
-  
-  async function getDetail() {
-    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": "abnormal", 
-        "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('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)
-  }
-
-  onMounted(() => {
-    getDetail()
-  })
-
-  </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>
-