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" :modal-append-to-body="false" @close="modalClose"> -->
    <modal :visible="modalShow" :title="titleName" @close="modalClose">
      <div class="blueStripe" />
      <el-form ref="formInline" label-position="left" :model="formInline" :rules="rules" label-width="90px">
        <div id="soll">
          <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 :remote="true" :remote-method="debounceQuery" placeholder="请选择" style="width:100%;" @click.native="bugListSelect">
                    <el-option v-for="item in taskEnumList" :key="item.id" :label="item.name" :value="item.id">
                      <div class="belong-task">
                        <div class="task-id">{{ item.taskId }}</div>
                        <div class="modules-name">
                          <span class="name">{{ item.name }}</span>
                          <span v-if="item.moduleInfoName" class="modules">{{ item.moduleInfoName }}</span>
                        </div>
                      </div>
                    </el-option>
                  </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-cascader v-model="formInline.theBugType" :options="theBugTypeEnumList" :props="{ value:'code', label:'name', children: 'childrenEnums', emitPath: false }" placeholder="请选择" clearable />
                </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" /> -->
                    <!-- formInline.bugDescribe -->
                    <normal-area
                      id="buglist_file_tinymce"
                      :value.sync="formInline.bugDescribe"
                      :height="200"
                      :full-position-style="{ top:'20px',left:'15%', right: '15%' }"
                    />
                  </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" :on-error="errorUpload" :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-form-item> -->
      </el-form>
      <el-button id="pasteUpload" type="primary" style="display: none" @click.stop="pasteUpload">upload</el-button>
      <div slot="footer">
        <el-button @click="modalShow = false">取 消</el-button>
        <el-button :disabled="dis" type="primary" @click="bug_created(formInline)">创 建</el-button>
      </div>
    </modal>
    <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>
const _ = require('lodash')
import { mapGetters } from 'vuex'
import { analysisBizId_id } from '@/utils/crypto-js.js'
// 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 normalArea from '@/components/input/normalArea' // 富文本
import 'tinymce/plugins/table'// 插入表格插件
import modal from '@/components/modal'
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,
    normalArea,
    modal
  },
  filters: {
    limit(e, limit) {
      if (e.length > limit) {
        return e.substring(0, limit) + '...'
      } else {
        return e
      }
    }
  },
  props: {
    getBugList: {
      type: Function,
      default: null
    },
    required: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      nowPageId: -1, // 当前页面的id
      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' }
        ],
        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' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  watch: {
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.analysisBizId_id()
        this.bugListSelect()
        this.bugDataGet()
      },
      immediate: true
    }
  },
  methods: {
    analysisBizId_id() { // 解析路由中的bizId_id
      if (!this.$route.query.bizId_id) return
      const bizId_id = analysisBizId_id(this.$route.query.bizId_id)
      this.nowPageId = bizId_id[1]
    },
    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', this.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.formInline.creatorList = this.userNames
          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'
      })
    },
    // 上传失败回调
    errorUpload() {
      this.dis = false
      this.$message({
        showClose: true,
        message: '文件上传失败',
        type: 'error'
      })
    },
    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')
            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 = []
      }
    },
    async getTaskList(val) {
      // 获取所属任务列表
      const params = {
        bizId: this.bizId
      }
      switch (this.$route.name) {
        case '项目详情':
          params.projectId = this.nowPageId
          break
        case '需求详情':
          params.requireId = this.nowPageId
          break
        case '任务详情':
          params.id = this.nowPageId
          break
      }
      if (val) {
        params.name = val
      }
      const res = await taskListCreate(params)
      if (res.code === 200) {
        this.taskEnumList = res.data || []
      }
    },
    debounceQuery: _.debounce(function() {
      this.getTaskList(...arguments)
    }, 500),
    bugListSelect() {
      this.$set(this.formInline, 'creatorList', this.userNames)
      settingGetBizList({}).then(res => {
        this.bizIdEnumList = res.data // biz
      })
      this.getTaskList()
      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 = this.deleteChild(res.data.theBugTypeEnumList) // 缺陷类型
      })
      releaseList().then(res => {
        this.appClient = res.data.appClient // 客户端
      })
    },
    deleteChild(arr) {
      // 删除无用子属性
      const bfs = arr => {
        arr.forEach(item => {
          if (!item.childrenEnums || item.childrenEnums.length === 0) {
            delete item.childrenEnums
          } else {
            this.deleteChild(item.childrenEnums)
          }
        })
      }
      bfs(arr)
      return arr
    },
    bugDataGet() {
      // 所属模块
      settingQueryBizModuleList(this.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 === false) {
        this.$message({
          message: '不支持上传此文件格式',
          type: 'warning'
        })
        return false
      }
      const isLt200M = file.size / 1024 / 1024 < 20
      if (!isLt200M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          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;
  }
}
.belong-task {
  max-width: 500px;
  display: flex;
  .modules-name {
    width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .modules {
    color: #999999;
  }
  .task-id {
    color: #999999;
    width: 80px;
    margin-right: 20px;
  }
  .name {
    color: #333333;
    margin-right: 20px;
  }
}
</style>