vue3-components-plus 3.0.20 → 3.0.21

package/dist/ComponentDemo/FormDemo copy.vue

@@ -1,714 +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 { h, onMounted, reactive, ref } from 'vue'
-import { cloneDeep } from 'lodash-es'
-import { nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-
-// ------------全局的函数（不需要引入直接使用）------------
-// import { getAllFormKvData, getAllFormNodeByKey, getAllFormNodeRefByKey } from "vue3-components-plus";
-// 获取表单数据
-// const allFormData = getAllFormKvData(state.rows)
-// 获取表单"isEnable"节点数据
-// const isEnableData = getAllFormNodeByKey(state.rows, 'isEnable')
-// 获取表单"isEnable"节点ref实例
-// const isEnableRef = getAllFormNodeRefByKey(state.rows, 'isEnable')
-// ------------NsForm实例的方法------------
-// 重置表单resetForm()
-// row1Ref.value.resetForm()
-// 设置NsForm表单数据 setFormData(data)
-// row1Ref.value.setFormData(data)
-// 获取NsForm表单数据 getFormKvData() 等同于 getAllFormKvData(state.rows)
-// row1Ref.value.getFormKvData()
-// 获取NsForm表单"isEnable"节点数据 getFormNodeByKey('isEnable') 等同于 getAllFormNodeByKey(state.rows, 'isEnable')
-// row1Ref.value.getFormNodeRefByKey('isEnable')
-// 「可选」 初始化表单默认值, 建议使用resetForm()
-// row1Ref.value.initDefaultValues()
-// 「可选」 获取只读模式下的显示值
-// row1Ref.value.getReadOnlyDisplayValue(getAllFormNodeByKey(state.rows, 'isEnable'))
-
-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',
-        events: {
-          change: changeHandler,
-        },
-        params: {
-          rules: [
-            {
-              required: true,
-              message: '请选择',
-            },
-          ],
-          width: 60,
-          'inline-prompt': true,
-          'active-text': '启用',
-          'inactive-text': '禁用',
-        },
-      },
-    ],
-  ],
-  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: "el-cascader",
-        params: {
-            props: {
-                showPrefix: false,
-                checkStrictly: true,
-                checkOnClickNode: true,
-            },
-            options: [
-                {
-                    value: "guide",
-                    label: "Guide",
-                    children: [
-                        {
-                            value: "disciplines",
-                            label: "Disciplines",
-                            children: [
-                                {
-                                    value: "consistency",
-                                    label: "Consistency",
-                                },
-                            ],
-                        },
-                        {
-                            value: "navigation",
-                            label: "Navigation",
-                            children: [
-                                {
-                                    value: "side nav",
-                                    label: "Side Navigation",
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    value: "component",
-                    label: "测试",
-                    children: [
-                        {
-                            value: "basic",
-                            label: "Basic",
-                            children: [
-                                {
-                                    value: "layout",
-                                    label: "Layout",
-                                },
-                            ],
-                        },
-                        {
-                            value: "form",
-                            label: "中文",
-                            children: [
-                                {
-                                    value: "radio",
-                                    label: "Radio",
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    value: "resource",
-                    label: "Resource",
-                    children: [
-                        {
-                            value: "axure",
-                            label: "Axure Components",
-                        },
-                    ],
-                },
-            ],
-            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: {
-          showAllLevels: false,
-          rules: [
-            {
-              required: true,
-              message: '请选择地区',
-              trigger: 'change',
-            },
-          ],
-          props: {
-            multiple: true,
-            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 changeHandler(v) {
-  ElMessage.info(v+'')
-}
-
-function detAreaModeChange(value: any) {
-  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,
-      },
-      { value: ' ' },
-    ])
-  }
-}
-
-function CustomUIs() {
-  return h('div', { style: 'color: red', class: 'xx' }, 'xxx')
-}
-
-/**
- * 保存
- */
-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: ['component','form'],
-      max_retries: '4',
-      save_video: true,
-      pre_buffer_second: '5',
-      det_area_mode: 'abnormal',
-      det_area_json: '6',
-      region: 'haidian,pudong', //['beijing', 'haidian'],
-      department: ['company', 'tech', 'frontend'],
-      single_level_cascader: 'shanghai',
-    }
-    row1Ref.value?.resetForm()
-    row2Ref.value?.resetForm()
-    row3Ref.value?.resetForm()
-    row4Ref.value?.resetForm()
-    setTimeout(() => {
-      row1Ref.value?.setFormData?.(res)
-      row2Ref.value?.setFormData?.(res)
-      row3Ref.value?.setFormData?.(res)
-      row4Ref.value?.setFormData?.(res)
-    }, 10)
-    return
-    // 特殊处理
-    // if (res.det_area_mode === 'abnormal') {
-    //   detAreaModeChange('abnormal')
-    // }
-
-    setTimeout(() => {
-      const res = {
-        isEnable: false,
-        confidence: 'aaa1',
-        iou: '1',
-        timeInterval: '2',
-        stuck_threshold: 'component,form',
-        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?.resetForm()
-      setTimeout(() => {
-        row1Ref.value?.setFormData?.(res)
-      }, 10)
-      // 特殊处理
-    }, 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>