imeik-bizui 2.0.3 → 2.0.5

package/dist/bizui/src/RequirementBall/index.vue

@@ -1,266 +0,0 @@
-<template>
-  <!-- 需求球组件容器 -->
-  <div class="requirement-ball-container">
-    <!-- 悬浮球组件,传入录制状态,监听点击和停止录制事件 -->
-    <FloatingBall
-      :is-recording="isRecording"
-      @click="showDialog"
-      @stopRecord="onStopRecord"
-    />
-
-    <!-- 需求提交弹窗 -->
-    <ImDialog
-      title="问题反馈"
-      :visible.sync="dialogVisible"
-      width="805px"
-      height="430px"
-      append-to-body
-      submit-text="提交"
-      @submit="handleSubmit"
-    >
-      <!-- 表单组件 -->
-      <ImForm ref="ImForm" :form="formConfig">
-        <!-- 截屏组件插槽,双向绑定上传图片数据,监听开始和结束截屏事件 -->
-        <CaptureScreen
-          slot="CaptureScreen"
-          v-model="formConfig.props.requirementImageUrlList"
-          @startCapture="closeDialog"
-          @endCapture="showDialog"
-        />
-        <!-- 录屏组件插槽,双向绑定上传视频数据,监听开始和结束录制事件 -->
-        <RecordScreen
-          slot="RecordScreen"
-          ref="recordScreen"
-          v-model="formConfig.props.requirementVideoUrlList"
-          @startRecord="onStartRecord"
-          @endRecord="onEndRecord"
-        />
-      </ImForm>
-    </ImDialog>
-  </div>
-</template>
-
-<script>
-// 导入子组件
-import FloatingBall from './components/FloatingBall'
-import CaptureScreen from './components/CaptureScreen'
-import RecordScreen from './components/RecordScreen'
-// 导入API
-import { submitRequirementInfo } from '../../api/reqCollect.js'
-
-export default {
-  name: 'RequirementBall',
-
-  // 注册子组件
-  components: {
-    FloatingBall,
-    CaptureScreen,
-    RecordScreen
-  },
-
-  // 组件数据
-  data() {
-    return {
-      // 录制状态标识
-      isRecording: false,
-
-      // 弹窗显示状态
-      dialogVisible: false,
-
-      // 表单配置对象
-      formConfig: {
-        // 表单属性配置
-        attrs: {
-          labelPosition: 'top' // 表单标签位置
-        },
-
-        // 表单数据对象
-        props: {
-          infoDescription: '', // 需求描述
-          requirementImageUrlList: [], // 上传图片列表
-          requirementVideoUrlList: [], // 上传视频列表
-          requirementAttachmentUrlList: [] // 额外附件列表
-        },
-
-        // 表单项配置数组,由computed属性生成
-        formItems: []
-      }
-    }
-  },
-
-  // 计算属性
-  computed: {
-    // 生成表单项配置
-    formItems() {
-      return [
-        // 需求描述输入框配置
-        {
-          type: 'ImInput',
-          label: '需求描述',
-          prop: 'infoDescription',
-          rules: [{ required: true, message: '请输入需求描述' }],
-          attrs: {
-            type: 'textarea',
-            rows: 4, // 行数
-            placeholder: '请输入需求描述',
-            maxlength: 2000, // 最大字符限制
-            showWordLimit: true // 显示字数限制
-          }
-        },
-
-        // 截屏组件插槽配置
-        {
-          type: 'ImSlot',
-          label: '上传图片',
-          prop: 'requirementImageUrlList',
-          slots: {
-            default: 'CaptureScreen'
-          }
-        },
-
-        // 录屏组件插槽配置
-        {
-          type: 'ImSlot',
-          label: '上传视频',
-          prop: 'requirementVideoUrlList',
-          slots: {
-            default: 'RecordScreen'
-          }
-        },
-
-        // 文件上传组件配置
-        {
-          type: 'ImFieldFileUpload',
-          label: '上传相关附件（如果有，建议上传）',
-          prop: 'requirementAttachmentUrlList',
-          attrs: {
-            fileSize: 500, // 文件大小限制，单位MB
-            limit: 3, // 文件数量限制
-            tipText: '请上传附件，每个附件不超过500M，最多上传3个附件'
-          }
-        }
-      ]
-    }
-  },
-
-  // 监听属性变化
-  watch: {
-    // 监听formItems变化,更新formConfig.formItems
-    formItems: {
-      handler(val) {
-        this.formConfig.formItems = val
-      },
-      immediate: true // 组件创建时立即执行一次
-    }
-  },
-
-  // 组件方法
-  methods: {
-    /**
-     * 显示需求提交弹窗
-     */
-    showDialog() {
-      this.dialogVisible = true
-    },
-
-    /**
-     * 关闭需求提交弹窗
-     */
-    closeDialog() {
-      this.dialogVisible = false
-    },
-
-    /**
-     * 提交需求表单
-     * @param {Object} form - 表单数据
-     */
-    handleSubmit(form) {
-      this.$refs.ImForm.validate((valid) => {
-        // 表单校验不通过,提示用户
-        if (!valid) {
-          this.$message.warning('请填写完整信息')
-          return
-        }
-
-        const formProps = this.formConfig.props
-
-        // 提交表单数据
-        const data = {
-          ...formProps
-        }
-
-        if (formProps.requirementAttachmentUrlList && formProps.requirementAttachmentUrlList.length > 0) {
-          data.requirementAttachmentUrlList = formProps.requirementAttachmentUrlList.map((item) => {
-            return item.url
-          })
-        }
-
-        // 调用提交接口
-        submitRequirementInfo(data).then((res) => {
-          if (res.code === 200) {
-            this.$message.success('需求提交成功')
-            this.closeDialog()
-            this.clearForm()
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-      })
-    },
-
-    /**
-     * 开始录制处理
-     * 设置录制状态并隐藏弹窗
-     */
-    onStartRecord() {
-      this.isRecording = true
-      this.closeDialog()
-    },
-
-    /**
-     * 结束录制处理
-     * 重置录制状态并显示弹窗
-     */
-    onEndRecord() {
-      this.isRecording = false
-      this.showDialog()
-    },
-
-    /**
-     * 停止录制处理
-     * 重置状态并调用录制组件的停止方法
-     */
-    onStopRecord() {
-      this.isRecording = false
-      this.showDialog()
-      this.$nextTick(() => {
-        if (this.$refs.recordScreen) {
-          this.$refs.recordScreen.stopRecording()
-        }
-      })
-    },
-
-    /**
-     * 清空表单数据
-     */
-    clearForm() {
-      this.formConfig.props = {
-        infoDescription: '',
-        requirementImageUrlList: [],
-        requirementVideoUrlList: [],
-        requirementAttachmentUrlList: []
-      }
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-// 需求球容器样式
-.requirement-ball-container {
-  position: fixed;
-  right: 40px;
-  bottom: 40px;
-  z-index: 100;
-}
-</style>