vue2-components-plus 1.0.3 → 1.0.6

package/dist/ComponentDemo/FormDemo.vue

@@ -0,0 +1,851 @@
+<template>
+  <div class="demo-page">
+    <el-card shadow="never" class="demo-card">
+      <div slot="header" class="demo-card__header">
+        <div>
+          <div class="demo-card__title">NsForm 动态表单预览</div>
+          <div class="demo-card__desc">覆盖校验、回填、只读、级联、上传和动态表单项等常见场景。</div>
+        </div>
+        <el-tag size="small" :type="demoReadOnly ? 'info' : 'success'">
+          {{ demoReadOnly ? '只读模式' : '编辑模式' }}
+        </el-tag>
+      </div>
+
+      <el-alert
+        v-if="hintText"
+        :title="hintText"
+        type="info"
+        :closable="false"
+        class="demo-alert"
+      />
+
+      <div class="toolbar">
+        <el-button type="primary" @click="getFormData">获取表单数据</el-button>
+        <el-button @click="loadDetailData()">模拟详情回填</el-button>
+        <el-button @click="resetFormData()">重置表单</el-button>
+        <el-button @click="toggleReadOnly">切换只读</el-button>
+        <el-button @click="notifyInnerButton">触发自定义事件</el-button>
+        <el-button v-if="insideDialog" type="danger" plain @click="$emit('close')">从内容区关闭弹窗</el-button>
+      </div>
+
+      <el-form ref="shellForm" :model="formState" label-position="top" class="shell-form">
+        <NsFormTitle title="模型参数">
+          <NsForm
+            ref="row1Ref"
+            :readOnly="demoReadOnly"
+            :model="demoReadOnly ? '' : 'vertical'"
+            :rows="formState.rows"
+            formPropKey="rows"
+            backgroundColor="#fff"
+            labelColor="#606266"
+            labelWidth="140"
+            gapH="20px"
+            gapV="10px"
+          />
+        </NsFormTitle>
+
+        <NsFormTitle title="视频配置">
+          <NsForm
+            ref="row2Ref"
+            :readOnly="demoReadOnly"
+            :model="demoReadOnly ? '' : 'vertical'"
+            :rows="formState.rows2"
+            formPropKey="rows2"
+            backgroundColor="#fff"
+            labelColor="#606266"
+            labelWidth="140"
+            gapH="20px"
+            gapV="10px"
+          />
+        </NsFormTitle>
+
+        <NsFormTitle title="结果保存">
+          <NsForm
+            ref="row3Ref"
+            :readOnly="demoReadOnly"
+            :model="demoReadOnly ? '' : 'vertical'"
+            :rows="formState.rows3"
+            formPropKey="rows3"
+            backgroundColor="#fff"
+            labelColor="#606266"
+            labelWidth="140"
+            gapH="20px"
+            gapV="10px"
+          />
+        </NsFormTitle>
+
+        <NsFormTitle title="级联选择器">
+          <NsForm
+            ref="row4Ref"
+            :readOnly="demoReadOnly"
+            :model="demoReadOnly ? '' : 'vertical'"
+            :rows="formState.rows4"
+            formPropKey="rows4"
+            backgroundColor="#fff"
+            labelColor="#606266"
+            labelWidth="140"
+            gapH="20px"
+            gapV="10px"
+          />
+        </NsFormTitle>
+
+        <NsFormTitle title="文件上传">
+          <NsForm
+            ref="rowUploadRef"
+            :readOnly="demoReadOnly"
+            :model="demoReadOnly ? '' : 'vertical'"
+            :rows="formState.rowsUpload"
+            formPropKey="rowsUpload"
+            backgroundColor="#fff"
+            labelColor="#606266"
+            labelWidth="140"
+            gapH="20px"
+            gapV="10px"
+          />
+        </NsFormTitle>
+      </el-form>
+    </el-card>
+
+    <el-card shadow="never" class="result-card">
+      <div slot="header" class="result-card__header">
+        <span>输出结果</span>
+        <el-button type="text" @click="showToast('已通过组件实例调用方法')">调用实例方法示例</el-button>
+      </div>
+      <pre class="result-content">{{ outputText || '点击“获取表单数据”后在此查看结果。' }}</pre>
+    </el-card>
+  </div>
+</template>
+
+<script>
+const CustomRegionEditor = {
+  name: 'CustomRegionEditor',
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value)
+    },
+  },
+  render(h) {
+    return h('div', { class: 'custom-region-editor' }, [
+      h('div', { class: 'custom-region-editor__label' }, '模拟区域编辑器'),
+      h('el-input', {
+        props: {
+          type: 'textarea',
+          rows: 3,
+          value: this.value,
+          placeholder: '请输入区域 JSON 或坐标信息',
+        },
+        on: {
+          input: this.handleInput,
+        },
+      }),
+    ])
+  },
+}
+
+function createRows() {
+  return [
+    [
+      {
+        key: 'isEnable',
+        label: '是否启用',
+        value: false,
+        component: 'ElSwitch',
+        events: {},
+        params: {
+          activeText: '启用',
+          inactiveText: '禁用',
+        },
+      },
+      {
+        key: 'modelName',
+        label: '模型名称',
+        value: 'demo-detector',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          maxlength: 30,
+          rules: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
+        },
+      },
+    ],
+    [
+      {
+        key: 'confidence',
+        label: '置信度阈值',
+        value: '0.60',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          'v-length.range': { min: 0, max: 1 },
+          rules: [{ required: true, message: '请输入置信度', trigger: 'blur' }],
+        },
+      },
+      {
+        key: 'iou',
+        label: 'IOU 阈值',
+        value: '0.45',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          'v-length.range': { min: 0, max: 1 },
+          rules: [{ required: true, message: '请输入 IOU', trigger: 'blur' }],
+        },
+      },
+    ],
+  ]
+}
+
+function createRows2() {
+  return [
+    [
+      {
+        key: 'timeInterval',
+        label: '时间间隔（秒）',
+        value: '5',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          'v-length.range': { min: 0, max: 6000, int: true },
+          rules: [{ required: true, message: '请输入时间间隔', trigger: 'blur' }],
+        },
+      },
+      {
+        key: 'stuck_threshold',
+        label: '所属工程',
+        value: ['component', 'form'],
+        component: 'ElCascader',
+        params: {
+          clearable: true,
+          props: {
+            checkStrictly: true,
+            emitPath: true,
+          },
+          options: [
+            {
+              value: 'guide',
+              label: 'Guide',
+              children: [
+                { value: 'disciplines', label: 'Disciplines' },
+                { value: 'navigation', label: 'Navigation' },
+              ],
+            },
+            {
+              value: 'component',
+              label: '组件库',
+              children: [
+                { value: 'form', label: 'Form' },
+                { value: 'table', label: 'Table' },
+              ],
+            },
+          ],
+          rules: [{ required: true, message: '请选择所属工程', trigger: 'change' }],
+        },
+      },
+    ],
+    [
+      {
+        key: 'maxRetries',
+        label: '最大重连次数',
+        value: '3',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          'v-length.range': { min: 0, max: 20, int: true },
+          rules: [{ required: true, message: '请输入重连次数', trigger: 'blur' }],
+        },
+      },
+      {
+        key: 'streamUrl',
+        label: '视频流地址',
+        value: 'rtsp://example.com/live/001',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          rules: [{ required: true, message: '请输入视频流地址', trigger: 'blur' }],
+        },
+      },
+    ],
+  ]
+}
+
+function createRows3() {
+  return [
+    [
+      {
+        key: 'saveVideo',
+        label: '是否保存视频',
+        value: true,
+        component: 'ElRadioGroup',
+        params: {
+          options: [
+            { label: '是', value: true },
+            { label: '否', value: false },
+          ],
+          rules: [{ required: true, message: '请选择是否保存视频', trigger: 'change' }],
+        },
+      },
+      {
+        key: 'preBufferSecond',
+        label: '帧前缓存（秒）',
+        value: '10',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+          'v-length.range': { min: 0, max: 120, int: true },
+          rules: [{ required: true, message: '请输入缓存时长', trigger: 'blur' }],
+        },
+      },
+    ],
+    [
+      {
+        key: 'det_area_mode',
+        label: '检测区域模式',
+        value: 'normal',
+        component: 'ElRadioGroup',
+        events: {},
+        params: {
+          options: [
+            { label: '常规检测', value: 'normal' },
+            { label: '非常规检测', value: 'abnormal' },
+          ],
+          rules: [{ required: true, message: '请选择区域模式', trigger: 'change' }],
+        },
+      },
+    ],
+  ]
+}
+
+function createRows4() {
+  return [
+    [
+      {
+        key: 'region',
+        label: '地区选择',
+        value: ['beijing', 'chaoyang'],
+        component: 'ElCascader',
+        params: {
+          props: {
+            multiple: false,
+            checkStrictly: true,
+            emitPath: true,
+          },
+          showAllLevels: false,
+          options: [
+            {
+              value: 'beijing',
+              label: '北京市',
+              children: [
+                { value: 'chaoyang', label: '朝阳区' },
+                { value: 'haidian', label: '海淀区' },
+              ],
+            },
+            {
+              value: 'shanghai',
+              label: '上海市',
+              children: [{ value: 'pudong', label: '浦东新区' }],
+            },
+          ],
+        },
+      },
+      {
+        key: 'department',
+        label: '部门选择',
+        value: ['company', 'tech', 'frontend'],
+        component: 'ElCascader',
+        params: {
+          props: {
+            value: 'code',
+            label: 'name',
+            children: 'children',
+            checkStrictly: true,
+            emitPath: true,
+          },
+          separator: ' / ',
+          options: [
+            {
+              code: 'company',
+              name: '公司总部',
+              children: [
+                {
+                  code: 'tech',
+                  name: '技术部',
+                  children: [
+                    { code: 'frontend', name: '前端组' },
+                    { code: 'backend', name: '后端组' },
+                  ],
+                },
+                { code: 'sales', name: '销售部' },
+              ],
+            },
+          ],
+        },
+      },
+    ],
+    [
+      {
+        key: 'singleLevelCascader',
+        label: '单层级联',
+        value: 'shanghai',
+        component: 'ElCascader',
+        params: {
+          options: [
+            { value: 'beijing', label: '北京市' },
+            { value: 'shanghai', label: '上海市' },
+            { value: 'guangzhou', label: '广州市' },
+          ],
+        },
+      },
+      {
+        key: 'notifyEmails',
+        label: '通知邮箱',
+        value: 'demo@example.com',
+        component: 'ElInput',
+        params: {
+          clearable: true,
+        },
+      },
+    ],
+  ]
+}
+
+function createRowsUpload() {
+  return [
+    [
+      {
+        key: 'upload_file',
+        label: '上传模型文件',
+        value: [],
+        component: 'ElUpload',
+        events: {},
+        params: {
+          drag: true,
+          multiple: true,
+          action: '#',
+          limit: 2,
+          fileList: [],
+          accept: '.txt,.md,.json,.jpg,.png,.pdf',
+          autoUpload: true,
+          httpRequest: null,
+          rules: [{ required: true, message: '请上传至少一个文件', trigger: 'change' }],
+        },
+        slots: {},
+      },
+    ],
+  ]
+}
+
+function createDetailData() {
+  return {
+    isEnable: true,
+    modelName: 'helmet-detector-v2',
+    confidence: '0.72',
+    iou: '0.33',
+    timeInterval: '3',
+    stuck_threshold: ['component', 'table'],
+    maxRetries: '5',
+    streamUrl: 'rtsp://example.com/live/demo',
+    saveVideo: true,
+    preBufferSecond: '8',
+    det_area_mode: 'abnormal',
+    det_area_json: '{"x":10,"y":12,"width":320,"height":180}',
+    region: ['shanghai', 'pudong'],
+    department: ['company', 'tech', 'backend'],
+    singleLevelCascader: 'guangzhou',
+    notifyEmails: 'ops@example.com',
+    upload_file: [
+      {
+        name: '示例说明.md',
+        url: 'https://cdn.jsdelivr.net/gh/vuejs/art@master/logo.png',
+        fileName: '示例说明.md',
+        filePath: 'https://cdn.jsdelivr.net/gh/vuejs/art@master/logo.png',
+        fileSize: 2048,
+      },
+    ],
+  }
+}
+
+export default {
+  name: 'FormDemo',
+  props: {
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    insideDialog: {
+      type: Boolean,
+      default: false,
+    },
+    hintText: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      demoReadOnly: this.readOnly,
+      outputText: '',
+      uploadFileList: [],
+      formState: {
+        rows: createRows(),
+        rows2: createRows2(),
+        rows3: createRows3(),
+        rows4: createRows4(),
+        rowsUpload: createRowsUpload(),
+      },
+    }
+  },
+  watch: {
+    readOnly: {
+      immediate: true,
+      handler(value) {
+        this.demoReadOnly = value
+        this.syncUploadDisabled()
+      },
+    },
+    demoReadOnly() {
+      this.syncUploadDisabled()
+    },
+  },
+  mounted() {
+    this.bindFieldEvents()
+    this.setUploadSlots()
+    this.loadDetailData(false)
+  },
+  methods: {
+    bindFieldEvents() {
+      this.formState.rows[0][0].events.change = this.handleEnableChange
+      this.formState.rows3[1][0].events.change = this.detAreaModeChange
+
+      const uploadField = this.getUploadField()
+      uploadField.params.httpRequest = this.mockUploadRequest
+      uploadField.events = {
+        success: this.handleUploadSuccess,
+        change: this.handleUploadChange,
+        remove: this.handleUploadRemove,
+      }
+      this.syncUploadDisabled()
+    },
+    setUploadSlots() {
+      const uploadField = this.getUploadField()
+      this.$set(uploadField, 'slots', {
+        default: () =>
+          this.$createElement('div', { class: 'upload-trigger' }, [
+            this.$createElement('i', { class: 'el-icon-upload upload-trigger__icon' }),
+            this.$createElement('div', { class: 'upload-trigger__title' }, '点击或拖拽文件到此处上传'),
+            this.$createElement('div', { class: 'upload-trigger__sub' }, '仅做本地模拟，不会真正请求后台'),
+          ]),
+        tip: () =>
+          this.$createElement('div', { class: 'el-upload__tip' }, '支持 txt / md / json / jpg / png / pdf，最多 2 个文件'),
+      })
+    },
+    getUploadField() {
+      return this.formState.rowsUpload[0][0]
+    },
+    getFormRefs() {
+      return ['row1Ref', 'row2Ref', 'row3Ref', 'row4Ref', 'rowUploadRef']
+        .map((name) => this.$refs[name])
+        .filter(Boolean)
+    },
+    syncUploadDisabled() {
+      const uploadField = this.getUploadField()
+      if (uploadField && uploadField.params) {
+        this.$set(uploadField.params, 'disabled', this.demoReadOnly)
+      }
+    },
+    toggleReadOnly() {
+      this.demoReadOnly = !this.demoReadOnly
+    },
+    showToast(message) {
+      this.$message.info(message || '来自 FormDemo 的实例方法调用')
+      return true
+    },
+    handleEnableChange(value) {
+      this.$message.info(value ? '已启用模型能力' : '已停用模型能力')
+    },
+    ensureAbnormalField(mode) {
+      const lastRow = this.formState.rows3[this.formState.rows3.length - 1]
+      const lastKey = lastRow && lastRow[0] && lastRow[0].key
+      if (lastKey === 'det_area_json') {
+        this.formState.rows3.pop()
+      }
+      if (mode === 'abnormal') {
+        this.formState.rows3.push([
+          {
+            key: 'det_area_json',
+            label: '感兴趣区域',
+            value: '',
+            component: CustomRegionEditor,
+            span: 24,
+            params: {
+              rules: [{ required: true, message: '请输入感兴趣区域', trigger: 'blur' }],
+            },
+          },
+        ])
+      }
+    },
+    detAreaModeChange(value) {
+      this.ensureAbnormalField(value)
+    },
+    validateShellForm() {
+      return new Promise((resolve, reject) => {
+        this.$refs.shellForm.validate((valid) => {
+          if (valid) {
+            resolve(true)
+            return
+          }
+          reject(new Error('表单校验失败'))
+        })
+      })
+    },
+    collectFormData() {
+      return this.getFormRefs().reduce((result, ref) => {
+        if (ref && typeof ref.getFormKvData === 'function') {
+          return Object.assign(result, ref.getFormKvData())
+        }
+        return result
+      }, {})
+    },
+    async getFormData() {
+      try {
+        await this.validateShellForm()
+        const data = this.collectFormData()
+        this.outputText = JSON.stringify(data, null, 2)
+        this.$message.success('表单校验成功')
+        return data
+      } catch (error) {
+        this.outputText = ''
+        this.$message.error('表单校验失败，请先完善必填项')
+        return false
+      }
+    },
+    resetFormData(showMessage = true) {
+      this.getFormRefs().forEach((ref) => {
+        if (ref && typeof ref.resetForm === 'function') {
+          ref.resetForm()
+        }
+      })
+      this.ensureAbnormalField('normal')
+      this.uploadFileList = []
+      const uploadField = this.getUploadField()
+      this.$set(uploadField.params, 'fileList', [])
+      this.$set(uploadField, 'value', [])
+      this.$set(uploadField, 'delValue', [])
+      this.$nextTick(() => {
+        this.$refs.shellForm.clearValidate()
+        this.outputText = ''
+        if (showMessage) {
+          this.$message.success('表单已重置')
+        }
+      })
+    },
+    loadDetailData(showMessage = true) {
+      if (showMessage) {
+        this.$message.info('开始模拟详情回填')
+      }
+      setTimeout(() => {
+        const detail = createDetailData()
+        this.resetFormData(false)
+        this.ensureAbnormalField(detail.det_area_mode)
+        this.$nextTick(() => {
+          this.getFormRefs().forEach((ref) => {
+            if (ref && typeof ref.setFormData === 'function') {
+              ref.setFormData(detail)
+            }
+          })
+          this.uploadFileList = detail.upload_file.slice()
+          this.$set(this.getUploadField().params, 'fileList', detail.upload_file.slice())
+          if (showMessage) {
+            this.$message.success('详情已回填')
+          }
+        })
+      }, 300)
+    },
+    notifyInnerButton() {
+      this.$emit('btnClick', this.collectFormData())
+      this.$message.success('已触发自定义事件')
+    },
+    normalizeUploadList(fileList) {
+      return (fileList || []).map((item) => {
+        const responseData = item && item.response && item.response.data ? item.response.data : item
+        const fileName = responseData.fileName || item.name || '未命名文件'
+        const filePath = responseData.filePath || item.url || ''
+        const fileSize = responseData.fileSize || item.size || (item.raw && item.raw.size) || 0
+        return {
+          name: fileName,
+          url: filePath,
+          fileName,
+          filePath,
+          fileSize,
+        }
+      })
+    },
+    syncUploadFieldValue(fileList, removedFile) {
+      const uploadField = this.getUploadField()
+      const normalizedList = this.normalizeUploadList(fileList)
+      this.uploadFileList = (fileList || []).slice()
+      this.$set(uploadField.params, 'fileList', (fileList || []).slice())
+      this.$set(uploadField, 'value', normalizedList)
+      if (removedFile) {
+        const removed = this.normalizeUploadList([removedFile])[0]
+        const delValue = Array.isArray(uploadField.delValue) ? uploadField.delValue.slice() : []
+        delValue.push(Object.assign({}, removed, { isDelete: 1 }))
+        this.$set(uploadField, 'delValue', delValue)
+      }
+      this.$nextTick(() => {
+        this.$refs.shellForm.validateField('rowsUpload.0.0.value', function () {})
+      })
+    },
+    mockUploadRequest(options) {
+      const file = options.file
+      const timer = setTimeout(() => {
+        const filePath = URL.createObjectURL(file)
+        const response = {
+          code: 0,
+          data: {
+            fileName: file.name,
+            filePath,
+            fileSize: file.size || 0,
+          },
+        }
+        if (typeof options.onSuccess === 'function') {
+          options.onSuccess(response, file)
+        }
+      }, 400)
+
+      return {
+        abort() {
+          clearTimeout(timer)
+          if (typeof options.onError === 'function') {
+            options.onError(new Error('上传已取消'))
+          }
+        },
+      }
+    },
+    handleUploadSuccess(_response, _file, fileList) {
+      this.syncUploadFieldValue(fileList)
+      this.$message.success('文件上传成功')
+    },
+    handleUploadChange(_file, fileList) {
+      this.syncUploadFieldValue(fileList)
+    },
+    handleUploadRemove(file, fileList) {
+      this.syncUploadFieldValue(fileList, file)
+      this.$message.warning('已移除文件')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.demo-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-card,
+.result-card {
+  border-radius: 12px;
+}
+
+.demo-card__header,
+.result-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-card__title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.demo-card__desc {
+  margin-top: 6px;
+  font-size: 13px;
+  color: #909399;
+}
+
+.demo-alert {
+  margin-bottom: 16px;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.shell-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.result-content {
+  margin: 0;
+  padding: 16px;
+  min-height: 180px;
+  max-height: 360px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #0f172a;
+  border-radius: 10px;
+  color: #e2e8f0;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.custom-region-editor {
+  border: 1px dashed #dcdfe6;
+  border-radius: 8px;
+  padding: 12px;
+  background: #fafafa;
+}
+
+.custom-region-editor__label {
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #409eff;
+}
+
+.upload-trigger {
+  padding: 12px;
+  text-align: center;
+  color: #606266;
+}
+
+.upload-trigger__icon {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.upload-trigger__title {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.upload-trigger__sub {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #909399;
+}
+
+@media (max-width: 960px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>