thoth-frontend-test/src/views/projectManage/bugList/file/createdBug.vue

<template>
  <div class="Parent">
    <el-dialog :visible.sync="modalShow" :title="titleName" class="public_task" width="70%" :close-on-click-modal="false" :destroy-on-close="true" @close="modalClose">
      <div class="blueStripe" />
      <el-form ref="formInline" label-position="left" :model="formInline" :rules="rules" label-width="90px">
        <div id="soll" style="height: 460px; overflow:scroll; overflow-x: hidden">
          <div>
            <el-row style="margin: 0 4%;">
              <el-col :span="24">
                <el-form-item label="标题" prop="bugName">
                  <el-input v-model="formInline.bugName" placeholder="请输入" style="width:100%;" />
                </el-form-item>
              </el-col>
            </el-row>
            <div class="Layouts" style="width: 100%;">
              <div style="width:100%; margin: 0 4%;">
                <el-form-item label="所属任务" prop="taskId">
                  <el-select v-model="formInline.taskId" filterable placeholder="请选择" style="width:100%;" @click.native="bugListSelect">
                    <el-option v-for="item in taskEnumList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="优先级" prop="priorityLevel" style="white-space: nowrap;">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="i. High（阻塞阻塞进程的bug、主流程的严重bug，如app启动失败、接单crash，当天必须立即修复） ii. Medium（功bug，新需求的功能性bug建议放在该等级，可协商修复期限） iv. Low（不影响功能使用的小问题，如界面显示有异常，文案、UI微调，可协商修复期限）"
                    placement="bottom"
                  >
                    <i style="color: red; margin-left: -31px;" class="el-icon-warning-outline" />
                  </el-tooltip>
                  <el-select v-model="formInline.priorityLevel" filterable placeholder="请选择" style="width:100%; margin-left: 16px;">
                    <el-option v-for="item in priorityLevelEnumList" :key="item.code" :label="item.name" :value="item.name" />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务线" prop="bizId">
                  <el-select v-model="formInline.bizId" :disabled="true" filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in bizIdEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="发现阶段" prop="discoveryStage">
                  <el-select v-model="formInline.discoveryStage" filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in bugStageEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="缺陷类型" prop="theBugType">
                  <el-select v-model="formInline.theBugType" filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in theBugTypeEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>

                <el-form-item label="责任人" style="width:100%;" prop="assigner">
                  <el-select v-model="formInline.assigner" multiple filterable remote :remote-method="remoteMethod" :loading="loading" style="width: 100%" placeholder="请输入姓名或邮箱前缀" @change="getcurrentHandler(formInline.assigner)">
                    <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                      <div style="display: flex;justify-content: start;">
                        <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                        <div style="min-width:80px">{{ item.name }}</div>
                        <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="width:100%; margin: 0 4%;">
                <el-form-item label="端类型" prop="sysType">
                  <el-select v-model="formInline.sysType" filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in sysTypeEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="缺陷等级" prop="priority" style="white-space: nowrap;">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    style="white-space:pre-line;"
                    :content="`P0：阻塞进程的bug，如新功能未实现、app启动失败、如接单crash、开单crash P1：主流程功能bug，新需求的功能性bug建议放在该等级 P2：功能bug，不影响主流程 P3：不影响功能使用的小问题，如界面显示有异常，文案、UI微调，建议优化类`"
                    placement="bottom"
                  >
                    <i style="color: red; margin-left: -17px;" class="el-icon-warning-outline" />
                  </el-tooltip>
                  <el-select v-model="formInline.priority" filterable placeholder="请选择" style="width:100%; margin-left: 3px;">
                    <el-option v-for="item in priorityEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属模块" prop="moduleIds">
                  <el-cascader v-model="formInline.moduleIds" collapse-tags :props="props" :options="business_platform_Modular" placeholder="请选择" style="width: 100%" />
                </el-form-item>
                <el-form-item label="发现方式" prop="discoveryMeth">
                  <el-select v-model="formInline.discoveryMeth" filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in discoveryMethEnumList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="提报人" style="width:100%;" prop="creatorList">
                  <el-input v-model="formInline.creatorList" :disabled="true" placeholder="请输入姓名或邮箱前缀" style="width:100%;" />
                </el-form-item>
                <el-form-item label="修复人" style="width:100%;" prop="currentHandler">
                  <el-select v-model="formInline.currentHandler" multiple filterable remote :remote-method="remoteMethod" :loading="loading" style="width: 100%" placeholder="请输入姓名或邮箱前缀">
                    <el-option v-for="item in options" :key="item.idap" :label="item.name" :value="test2(item, 0)">
                      <div style="display: flex;justify-content: start;">
                        <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.deptName }}</div>
                        <div style="min-width:80px">{{ item.name }}</div>
                        <div style="min-width:100px;color: #8492a6; font-size: 13px; overflow:hidden">{{ item.idap }}</div>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="he" @click="show2 = !show2"><i class="el-icon-arrow-right" :class="{rotateNone:show2,rotate:!show2}" /> 客户端信息</div>
            <div v-show="show2" class="Layouts" style="width: 100%;">
              <div style="width:100%; margin: 0 4%;height: 200px">
                <el-form-item label="客户端">
                  <el-select v-model="formInline.appId" clearable filterable placeholder="请选择" style="width:100%;" @change="getClient(formInline.appId)">
                    <el-option v-for="item in appClient" :key="item.code" :label="item.msg" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="机型" style="width:100%;">
                  <el-input v-model="formInline.osType" clearable placeholder="请输入" />
                </el-form-item>
                <el-form-item label="网络">
                  <el-select v-model="formInline.networkType" clearable filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in networkTypeEnumList" :key="item.code" :label="item.name" :value="item.name" />
                  </el-select>
                </el-form-item>
              </div>
              <div style="width:100%; margin: 0 4%; height: 200px;">
                <el-form-item label="影响版本">
                  <el-select v-model="formInline.appVersion" clearable filterable placeholder="请选择" style="width:100%;">
                    <el-option v-for="item in Editionlist" :key="item.code" :label="item.msg" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="系统版本" style="width:100%;">
                  <el-input v-model="formInline.sdkVersion" clearable placeholder="请输入" />
                </el-form-item>
              </div>
            </div>
            <div style=" margin: 0 4%;">
              <el-form-item label="描述" style="width:100%;">
                <el-row v-if="editr">
                  <el-col :span="24">
                    <div id="wange" style="background-color: #FFF;" class="toolbar" />
                    <div id="wange1" class="text" />
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="附件" style="width:100%;">
                <section class="upload-main">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="支持的文件格式有：.zip, .xlsx, .txt, .csv, .xls, .mov, .mp4, .m4a, .avi, .amr, .mp3, .wav, .3gpp, .png, .jpg, .jpeg, .gif"
                    placement="top-start"
                    popper-class="tip-style"
                  >
                    <div class="upload-info"><i class="el-icon-question" />格式说明</div>
                  </el-tooltip>
                  <el-upload
                    class="upload-demo"
                    action="http://star.xiaojukeji.com/upload/img.node"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    :on-progress="progress"
                    :on-success="handleChange"
                    :file-list="fileList"
                    list-type="picture"
                    :before-upload="beforeUpload"
                  >
                    <el-button type="primary">上传附件</el-button>
                  </el-upload>
                </section>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-form-item style="text-align: right;margin: 15px 0% 0;">
          <el-button @click="modalShow = false">取 消</el-button>
          <el-button :disabled="dis" type="primary" @click="bug_created(formInline)">创 建</el-button>
        </el-form-item>
      </el-form>
      <el-button id="pasteUpload" type="primary" style="display: none" @click.stop="pasteUpload">upload</el-button>
    </el-dialog>
    <normal-dialog
      :show-dialog="showCopyFile"
      :title="'上传截图'"
      :width="'40%'"
      :submit-button="'上传'"
      :top="'5vh'"
      @confirm="confirmUpload()"
      @cancel="showCopyFile=false"
    >
      <div class="file-dialog">
        <el-form ref="imageForm" label-width="20%" :rules="imageRules" :model="imageName">
          <el-form-item label="图片命名" prop="name">
            <el-col style="width: 75%">
              <el-input v-model="imageName.name" placeholder="请输入图片名称" />
            </el-col>
            <el-col style="width: 10%">.png</el-col>
          </el-form-item>
        </el-form>
        <div class="image">
          <div class="image-center">
            <img :src="imageUrl" class="image-url">
          </div>
        </div>
      </div>
    </normal-dialog>
    <el-dialog title="附件预览" :modal-append-to-body="false" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="图片加载失败">
    </el-dialog>
  </div>
</template>

<script>
import E from 'wangeditor'
import { bugGetEnum, settingGetBizList, taskListCreate, releaseList, bugCreate, settingQueryBizModuleList } from '@/api/defectManage'
import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
import normalDialog from '@/components/dialog/normalDialog'
import '@/views/projectManage/bugList/css/index.css'
import '@/styles/PublicStyle/index.scss'
import axios from 'axios'

document.body.onpaste = function(event) {
  const data = (event.clipboardData || window.clipboardData)
  const items = data.items
  const fileList = [] // 存储文件数据
  if (items && items.length) {
    // 检索剪切板items
    for (let i = 0; i < items.length; i++) {
      // console.log(items[i].getAsFile()) // <--- 这里打印出来就就是你想要的文件
      fileList.push(items[i].getAsFile())
      window.uploadFiles = fileList
    }
    document.getElementById('pasteUpload').click()
  }
}

export default {
  name: 'Createdbug',
  components: {
    normalDialog
  },
  props: {
    getBugList: {
      type: Function,
      default: null
    },
    required: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogImageUrl: '', // 附件展示图片
      modalShow: false, // 缺陷新建弹窗
      dialogVisible: false,
      show2: false,
      props: { multiple: true },
      dis: false, // 附件上传成功才可以提交
      business_platform_Modular: [], // 模块
      fileDbList: [], // 附件展示
      fileList: [],
      taskIdStr: [],
      titleName: '',
      loading: false,
      options: [],
      test: [], // 人员查询
      form: {},
      formInline: {},
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      rules: {
        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
        bugName: [{ required: true, message: '标题不能为空', trigger: 'change' }],
        taskId: [{ required: true, message: '所属任务不能为空', trigger: 'change' }],
        priorityLevel: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
        moduleIds: [{ required: true, message: '所属模块不能为空', trigger: 'change' }],
        discoveryMeth: [{ required: true, message: '发现方式不能为空', trigger: 'change' }],
        assigner: [{ required: true, message: '责任人不能为空', trigger: 'change' }],
        sysType: [{ required: true, message: '端类型不能为空', trigger: 'change' }],
        priority: [{ required: true, message: '缺陷等级不能为空', trigger: 'change' }],
        discoveryStage: [{ required: true, message: '发现阶段不能为空', trigger: 'change' }],
        theBugType: [{ required: true, message: '缺陷类型不能为空', trigger: 'change' }],
        creatorList: [{ required: true, message: '提报人不能为空', trigger: 'change' }],
        currentHandler: [{ required: true, message: '修复人不能为空', trigger: 'change' }]

      },
      bugEnumList: [], // bug状态
      appClient: [], // 客户端
      Editionlist: [], // 版本
      bizIdEnumList: [], // bug业务线
      taskEnumList: [], // 所属任务
      bugTypeEnumList: [], // bug类型
      priorityEnumList: [], // 缺陷等级
      clientTypeEnumList: [], // 版本
      repairResultEnumList: [], // 修复结果
      theBugTypeEnumList: [], // 缺陷类型
      priorityLevelEnumList: [], // 优先级
      discoveryMethEnumList: [], // 发现方式
      bugStageEnumList: [], // 发现阶段
      networkTypeEnumList: [], // 网络
      sysTypeEnumList: [], // 端类型
      showCopyFile: false, // 复制文件对话框
      imageName: { name: null },
      imageUrl: null,
      editr: false,
      formData: [],
      formData1: [],
      imageRules: {
        name: [
          { required: true, message: '请输入图片名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.bugListSelect()
    this.bugDataGet()
  },
  methods: {
    init(e, ele) {
      this.modalShow = true
      this.$nextTick(() => {
        this.$refs['formInline'].clearValidate()
      })
      this.fileList = []
      this.fileDbList = []
      this.formInline = {}
      this.$set(this.formInline, 'creatorList', localStorage.getItem('realname'))
      this.$set(this.formInline, 'bizId', Number(localStorage.getItem('bizId')))

      if (e === 1) {
        this.titleName = '新建缺陷'
        if (ele !== undefined) {
          this.$set(this.formInline, 'taskId', ele.id)
        }
      }
      if (e === 2) {
        this.titleName = '复制缺陷'
        if (ele !== undefined) {
          this.formInline = ele
          this.show2 = true
          this.$set(this.formInline, 'bugName', '')
          this.$set(this.formInline, 'accessory', '')
          this.options = []
          this.formData = []
          this.formData1 = []
          this.formData = this.formInline.assigner.concat(this.formInline.currentHandler)
          this.formData1 = this.unique6(this.formData)
          this.formData1.map(item => {
            this.searchUser(item).then(res => {
              this.options.push(res.data[0])
            })
          })
        }
      }
      this.$nextTick(() => {
        document.getElementById('soll').scrollTop = 0
        this.editr = true
        this.getEcharts()
      })
    },
    unique6(arr) {
      var newArr = []
      newArr = arr.filter(item => {
        return newArr.includes(item) ? '' : newArr.push(item)
      })
      return newArr
    },
    searchUser(query) {
      this.loading = true
      return memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
        this.loading = false
        return res
      })
    },
    getEcharts() {
      setTimeout(() => {
        this.$set(this.formInline, 'bugDescribe', '')
        const editorRemark = new E('#wange', '#wange1')
        editorRemark.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table', 'foreColor']
        editorRemark.customConfig.onchange = (html) => {
          this.formInline.bugDescribe = html
        }
        editorRemark.create()
      }, 100)
    },
    getcurrentHandler(e) {
      this.$set(this.formInline, 'currentHandler', e)
    },
    getClient(e) { // 获取版本号
      this.$set(this.formInline, 'appVersion', '')
      this.Editionlist = this.appClient.filter(value => value.code === e)[0].childEnumInfos
    },

    modalClose() {
      this.fileList = []
      this.fileDbList = []
      this.formInline = {}
      this.editr = false
      this.modalShow = false
    },
    // 上传成功回调
    handleChange(response, file, fileList) {
      const item = { 'name': file.name, 'url': 'http:' + file.response.url }
      this.fileDbList.push(item)
      this.fileList.push(item)
      this.formInline.accessory = JSON.stringify(this.fileDbList)
      this.dis = false
      this.$message({ showClose: true, message: '文件上传成功', type: 'success' })
    },
    handlePictureCardPreview(file) { // 点击展示附件
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    progress(event, file, fileList) { // 文件上传时的钩子
      this.dis = true
    },

    bug_created(e) { // 创建（提交）
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          const data = e
          data.currentHandler = e.currentHandler.join()
          data.assigner = e.assigner.join()
          var user = { name: this.userNames, ename: this.userInformation, id: '' }
          bugCreate({ bugBaseInfo: data, user }).then(res => {
            this.bugListSelect()
            this.modalShow = false
            this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
            this.$emit('father')
            this.$emit('getBugList')
            if (this.getBugList) {
              this.getBugList()
            }
            this.$emit('getBugList')
          })
        }
      })
    },

    test2(item, e) { // 获取团队人员信息
      if (typeof this.test[item.idap] === 'undefined') {
        item.role = e
        this.test[item.idap] = item
      }
      return item.idap
    },
    remoteMethod(query) {
      // 人员查询
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
            const obj = {}
            this.options = res.data.reduce((cur, next) => {
              obj[next.idap] ? '' : obj[next.idap] = true && cur.push(next)
              return cur
            }, [])
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    bugListSelect() {
      this.$set(this.formInline, 'creatorList', this.userNames)
      settingGetBizList({}).then(res => {
        this.bizIdEnumList = res.data // biz
      })
      taskListCreate({ bizId: Number(localStorage.getItem('bizId')), requireId: this.required ? this.required : '' }).then(res => {
        this.taskEnumList = res.data // 所属任务
      })
      bugGetEnum().then(res => {
        this.bugEnumList = res.data.bugEnumList // status
        this.bugTypeEnumList = res.data.bugTypeEnumList // bug类型
        this.bugStageEnumList = res.data.bugStageEnumList // 发现阶段
        this.sysTypeEnumList = res.data.sysTypeEnumList // 端类型
        this.discoveryMethEnumList = res.data.discoveryMethEnumList // 发现方式
        this.priorityEnumList = res.data.priorityEnumList // 缺陷等级
        this.priorityLevelEnumList = res.data.priorityLevelEnumList // 优先级
        this.repairResultEnumList = res.data.repairResultEnumList // 修复结果
        this.clientTypeEnumList = res.data.clientTypeEnumList // 版本
        this.sysTypeEnumList = res.data.sysTypeEnumList // 客户端
        this.networkTypeEnumList = res.data.networkTypeEnumList // 网络
        this.theBugTypeEnumList = res.data.theBugTypeEnumList // 缺陷类型
      })
      releaseList().then(res => {
        this.appClient = res.data.appClient // 客户端
      })
    },

    bugDataGet() { // 所属模块
      settingQueryBizModuleList(Number(localStorage.getItem('bizId'))).then(res => {
        this.business_platform_Modular = res.data.map(item => ({
          ...item,
          value: item.id,
          label: item.moduleName,
          children: item.childModules.length === 0 ? null : item.childModules.map(item1 => ({
            ...item1,
            value: item1.id,
            label: item1.moduleName,
            children: item1.childModules.length === 0 ? null : item1.childModules.map(item2 => ({
              ...item2,
              value: item2.id,
              label: item2.moduleName
            }))
          }))
        }))
      })
    },
    beforeUpload(file) {
      const reg = new RegExp(/.*(zip|xlsx|text|csv|xls|mov|mp4|m4a|avi|amr|mp3|wav|3gpp|gif|jpeg|png|jpg)/i)
      const isUpload = file.type.match(reg)
      if (!isUpload) {
        this.$message({
          message: '不支持上传此文件格式',
          type: 'warning'
        })
        return false
      }
      const isLt200M = (file.size / 1024 / 1024) < 200
      if (!isLt200M) {
        this.$message({
          message: '上传文件大小不能超过 200MB!',
          type: 'warning'
        })
        return false
      }
    },
    handleRemove(file, fileList) {
      this.fileDbList = this.fileDbList.filter(item => {
        return item.name !== file.name
      })
      this.fileList = this.fileList.filter(item => {
        return item.name !== file.name
      })
    },
    generateMixed(len) {
      const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      let res = ''
      for (let i = 0; i < len; i++) {
        const id = Math.ceil(Math.random() * 35)
        res += chars[id]
      }
      return res
    },
    pasteUpload() {
      if (!this.modalShow) {
        return false
      }
      if (window.uploadFiles[0]) {
        const reader = new FileReader()
        reader.readAsDataURL(window.uploadFiles[0])
        reader.onload = () => {
          const reg = new RegExp(/image\/png/)
          this.imageUrl = reader.result
          if (this.imageUrl.match(reg)) { // 判断是否是图片
            this.showCopyFile = true
            this.imageName.name = this.generateMixed(10)
          }
        }
        this.showCopyFile = true
      }
    },
    async confirmUpload() {
      if (this.imageName.name === null || this.imageName.name.replace(/\s+/g, '') === '') {
        return false
      }
      const isExist = this.fileList.some(item => {
        return this.imageName.name === item.name
      })
      if (isExist) {
        this.$message({
          showClose: true,
          message: '图片名称重复',
          type: 'error'
        })
        return false
      }
      this.showCopyFile = false
      const res = await this.updateFile(window.uploadFiles[0])
      const data = res.data
      const item = {
        name: `${this.imageName.name}.png` || `${this.generateMixed(10)}.png`,
        status: 'success',
        url: 'http:' + data.url
      }
      this.fileList.push(item)
      this.fileDbList.push(item)
      this.formInline.accessory = JSON.stringify(this.fileDbList)
      this.$message({
        showClose: true,
        message: '文件上传成功',
        type: 'success'
      })
      this.imageName.name = null
      this.imageUrl = null
      window.uploadFiles = null
    },
    updateFile(file) {
      const param = new FormData() // 创建form对象
      param.append('file', file)// 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        withCredentials: false
      } // 添加请求头
      return new Promise((resolve, reject) => {
        axios.post('http://star.xiaojukeji.com/upload/img.node', param, config)
          .then(response => {
            resolve(response)
          }).catch(err => {
            reject(err)
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.file-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-form {
    width: 100%;
  }
  .image {
    position: relative;
    width: 61%;
    padding-top: 60%;
    border:1px solid #409EFF;
    border-radius: 4px;
    .image-center {
      padding: 1%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      display: flex;
      justify-content: center;
    }
    .image-url {
      height: 100%;
    }
  }
}
.upload-main {
  position: relative;
}
.upload-info {
  position: absolute;
  left: 110px;
  top: 50%;
  transform: translateY(-50%);
  color:#409EFF;
  font-size: 12px;
  i{
    margin-right: 5px;
  }
}
</style>