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

<template>
  <div class="Parent">
    <el-dialog :visible.sync="modalShow" width="60%" top="4vh" :close-on-click-modal="false" @close="modalClose">
      <el-form ref="formInline" label-position="left" :model="formInline" :rules="rules" label-width="90px">
        <el-row style="margin: 0 4% 2% 4%;">
          <el-col :span="24">
            <div class="flex_start titFont">
              <div class="titIcon" />
              <span style="margin-left: 1%; width: 100px;">{{ titleName }}</span>
            </div>
          </el-col>
        </el-row>
        <div style="height: 500px; 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" size="small" 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" size="small" 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">
                  <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" size="small" filterable placeholder="请选择" style="width:100%; margin-left: 12px;">
                    <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" size="small" 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" size="small" 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" size="small" 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" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading" size="small" 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" size="small" 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">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    style="white-space:pre-line;"
                    :content="dd"
                    placement="bottom"
                  >
                    <i style="color: red; margin-left: -17px;" class="el-icon-warning-outline" />
                  </el-tooltip>
                  <el-select v-model="formInline.priority" size="small" filterable placeholder="请选择" style="width:100%; margin-left: -2px;">
                    <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" size="small" 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" size="small" 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="currentHandler">
                  <el-input v-model="formInline.creatorList" :disabled="true" size="small" placeholder="请输入姓名或邮箱前缀" style="width:100%;" />
                </el-form-item>
                <el-form-item label="修复人" style="width:100%;" prop="currentHandler">
                  <el-select v-model="formInline.currentHandler" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading" size="small" 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" size="small" 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" size="small" clearable placeholder="请输入" />
                </el-form-item>
                <el-form-item label="网络">
                  <el-select v-model="formInline.networkType" size="small" 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" size="small" 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="请输入" size="small" />
                </el-form-item>
              </div>
            </div>
            <div style=" margin: 0 4%;">
              <el-form-item label="描述" style="width:100%;">
                <el-row>
                  <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%;">
                <el-upload
                  class="upload-demo"
                  action="http://star.xiaojukeji.com/upload/img.node"
                  :on-preview="handlePictureCardPreview"
                  :on-progress="progress"
                  :on-success="handleChange"
                  :file-list="fileList"
                  list-type="picture"
                >
                  <el-button size="small" type="primary">上传附件</el-button>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-form-item style="text-align: right;margin: 15px 4% 0 4%;">
          <el-button size="small" @click="modalShow = false">取 消</el-button>
          <el-button :disabled="dis" type="primary" size="small" @click="bug_created(formInline)">创 建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="附件预览" :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 '@/views/projectManage/bugList/css/index.css'
export default {
  name: 'Createdbug',
  props: {
    getBugList: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      dd: `P0：阻塞进程的bug，如新功能未实现、app启动失败、如接单crash、开单crash 
           P1：主流程功能bug，新需求的功能性bug建议放在该等级 
           P2：功能bug，不影响主流程 
           P3：不影响功能使用的小问题，如界面显示有异常，文案、UI微调，建议优化类`,
      dialogImageUrl: '', // 附件展示图片
      modalShow: false, // 缺陷新建弹窗
      dialogVisible: false,
      show2: false,
      props: { multiple: true },
      dis: false, // 附件上传成功才可以提交
      business_platform_Modular: [], // 模块
      fileDbList: [], // 附件展示
      editorRemark: '',
      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' }],
        currentHandler: [{ required: true, message: '修复人不能为空', trigger: 'change' }]

      },
      bugEnumList: [], // bug状态
      appClient: [], // 客户端
      Editionlist: [], // 版本
      bizIdEnumList: [], // bug业务线
      taskEnumList: [], // 所属任务
      bugTypeEnumList: [], // bug类型
      priorityEnumList: [], // 缺陷等级
      clientTypeEnumList: [], // 版本
      repairResultEnumList: [], // 修复结果
      theBugTypeEnumList: [], // 缺陷类型
      priorityLevelEnumList: [], // 优先级
      discoveryMethEnumList: [], // 发现方式
      bugStageEnumList: [], // 发现阶段
      networkTypeEnumList: [], // 网络
      sysTypeEnumList: [] // 端类型
    }
  },
  created() {
    this.bugListSelect()
    this.bugDataGet()
  },
  mounted() {
    this.form.remark = 'dd'
    setTimeout(() => {
      this.$set(this.formInline, 'bugDescribe', '')
      this.editorRemark = new E('#wange', '#wange1')
      this.editorRemark.customConfig.menus = ['bold', 'italic', 'underline', 'link', 'list', 'justify', 'table', 'foreColor']
      this.editorRemark.customConfig.onchange = (html) => {
        this.formInline.bugDescribe = html
      }
      this.editorRemark.create()
    }, 100)
  },
  methods: {
    init(e, ele) {
      this.modalShow = true
      this.$nextTick(() => {
        this.$refs['formInline'].clearValidate()
      })
      this.fileList = []
      this.$set(this.formInline, 'creatorList', this.userNames)
      this.$set(this.formInline, 'bizId', Number(localStorage.getItem('bizId')))
      if (e === 1) {
        this.titleName = '新建缺陷'
        if (ele !== undefined) {
          this.$set(this.formInline, 'taskId', ele.id)
        }
      }
    },
    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.formInline = {}
      this.editorRemark.txt.clear()
      this.modalShow = false
    },
    // 上传成功回调
    handleChange(response, file, fileList) {
      this.fileDbList.push({ 'name': file.name, 'url': 'http:' + file.response.url })
      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) {
          var user = { name: this.userNames, ename: this.userInformation, id: '' }
          bugCreate({ bugBaseInfo: e, user }).then(res => {
            this.bugListSelect()
            this.modalShow = false
            this.$message({ message: res.msg, type: 'success', duration: 1000, offset: 150 })
            if (this.getBugList) {
              this.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')) }).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
            }))
          }))
        }))
      })
    }
  }
}
</script>