thoth-frontend-test/src/views/onlineProblem/problemUpdate.vue

<template>
  <div class="set-background">
    <el-form ref="form" :model="form" :rules="serviceDataRules">
      <div class="block">
        <div class="block-flex">
          <el-form-item label="标题" prop="bugName" label-width="112px"><el-input v-model="form.bugName" autocomplete="off" placeholder="普惠质量产品工具平台..." style="width:89.6%;" /></el-form-item>
          <div class="line-between">
            <el-form-item label="类型" prop="bugType" label-width="124px">
              <el-select v-model="form.bugType" style="width:76%;" placeholder="类型">
                <el-option v-for="item in bugTypeStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="所处阶段" prop="stage" label-width="147px">
              <el-select v-model="form.stage" disabled placeholder="所处阶段" style="width:76%;">
                <el-option v-for="item in stageStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="状态" prop="status" label-width="124px">
              <el-select v-model="form.status" placeholder="状态" style="width:76%;">
                <el-option v-for="item in bugStatusStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="问题原因" prop="reason" label-width="147px">
              <el-select v-model="form.reason" style="width:76%;" placeholder="问题原因">
                <el-option v-for="item in reasonStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="级别" prop="priority" label-width="124px">
              <el-select v-model="form.priority" style="width:76%;" placeholder="级别">
                <el-option v-for="item in bugLevelStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="发现方式" prop="discoveryMethod" label-width="147px">
              <el-select v-model="form.discoveryMethod" style="width:76%;" placeholder="发现方式">
                <el-option v-for="item in discoveryMethodStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item prop="bizId" label="业务线" label-width="124px">
              <el-select v-model="form.bizId" placeholder="业务线" style="width:76%;" @change="clickChangePlatform(form.bizId)">
                <el-option v-for="item in bizOptions" :key="item.value" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="平台类型" prop="platformType" label-width="147px">
              <el-select ref="clearPlatform" v-model="form.platformType" placeholder="平台类型" style="width:76%;" @change="clickChangeBusiness(form.platformType)">
                <el-option v-for="item in platformTypeStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item v-if="businessTypeShow" prop="clientType" label="业务模块" label-width="127px">
              <el-select ref="clearBusiness" v-model="form.clientType" placeholder="业务模块" style="width:76%;" @change="clickChangeModule(form.clientType)">
                <el-option v-for="item in businessTypeStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item v-if="moduleTypeShow" label="工程模块" prop="moduleId" label-width="124px">
              <el-select ref="clearPlatform" v-model="form.moduleId" placeholder="工程模块" style="width:76%;">
                <el-option v-for="item in moduleStr" :key="item.name" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="故障描述" prop="bugDescribe" label-width="112px"><el-input v-model="form.bugDescribe" type="textarea" placeholder="故障详细信息以及复盘wiki地址" rows="2" style="width:89.6%;" /></el-form-item>
        </div>
      </div>
      <div class="block">
        <div class="block-flex">
          <div class="line-between">
            <el-form-item label="创建人" label-width="124px"><el-input v-model="form.creator" autocomplete="off" style="width:76%;" /></el-form-item>
            <el-form-item label="故障责任人" prop="assigner" label-width="147px">
              <el-select v-model="form.assigner" multiple filterable placeholder="公司邮箱前缀" style="width:76%;">
                <el-option
                  v-for="item in optionsAssigner"
                  :key="item.id"
                  :label="item.name"
                  :value="item.email"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="当前处理人" prop="currentHandler" label-width="124px">
              <el-select v-model="form.currentHandler" multiple filterable placeholder="公司邮箱前缀" style="width:76%;">
                <el-option
                  v-for="item in optionsCurrentHandler"
                  :key="item.id"
                  :label="item.name"
                  :value="item.email"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="故障开始时间" label-width="147px">    <el-date-picker
              v-model="form.startDevTime"
              type="datetime"
              placeholder="选择时间"
              style="width:76%;"
              value-format="yyyy-MM-dd HH:hh:mm"
            /></el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item label="故障结束时间" label-width="124px">    <el-date-picker
              v-model="form.finishTime"
              type="datetime"
              placeholder="选择时间"
              style="width:76%;"
              value-format="yyyy-MM-dd HH:hh:mm"
            /></el-form-item>
          </div>
        </div>
      </div>
      <div class="block">
        <div class="block-flex">
          <div class="line-between">
            <el-form-item label="机型" label-width="124px"><el-input v-model="form.model" autocomplete="off" style="width:76%;" /></el-form-item>
            <el-form-item label="地图类型" label-width="147px"><el-input v-model="form.mapType" autocomplete="off" style="width:76%;" /></el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="OS类型" label-width="124px"><el-input v-model="form.osType" autocomplete="off" style="width:76%;" /></el-form-item>
            <el-form-item label="地图版本号" label-width="147px"><el-input v-model="form.mapVersion" autocomplete="off" style="width:76%;" /></el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="网络类型" label-width="124px"><el-input v-model="form.networkType" autocomplete="off" style="width:76%;" /></el-form-item>
            <el-form-item label="SDK版本" label-width="147px"><el-input v-model="form.sdkVersion" autocomplete="off" style="width:76%;" /></el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item label="app版本号" label-width="124px"><el-input v-model="form.appVersion" autocomplete="off" style="width:76%;" /></el-form-item>
          </div>
        </div>
      </div>
      <div class="block-end">
        <div class="font">备注</div>
        <el-input v-model="form.remark" type="textarea" autocomplete="off" rows="5" style="margin: 20px 0;" />
        <div>
          <el-upload
            ref="upload"
            class="upload-demo"
            multiple
            :file-list="fileList"
            action="https://star.xiaojukeji.com/upload/img.node"
            :on-success="handleChange"
            :auto-upload="false"
          >
            <!-- action="https://page-daily.kuaidadi.com/upload/img.node" 线下 -->
            <!-- action="https://star.xiaojukeji.com/upload/img.node" 线上 -->
            <!-- action="https://jsonplaceholder.typicode.com/posts/" 原始地址-->
            <!-- <el-button size="small">点击上传</el-button> -->
            <el-button slot="trigger" size="small" type="primary" @click="createdDis">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          </el-upload>
        </div>
        <!-- accept="image/jpeg, image/png, image/gif, audio/mp4, video/mp4, application/pdf, audio/mpeg, text/plain, application/vnd.ms-excel, application/vnd.ms-works, application/msword" -->
        <el-form-item class="submit">
          <el-button size="mini" type="primary" @click="createFormData(form)">提 交</el-button>
          <el-button class="move-button" size="mini" @click="$router.go(-1)">取 消</el-button>
        </el-form-item>
      </div>
      <!-- <div style="flex:1">
        <el-form-item v-show="statusShow" label="问题原因和修复方法" :label-width="formLabelWidth"><el-input v-model="form.reasonsAndSolutionForTheProblem" type="textarea" placeholder="问题原因和修复方法" rows="4" style="width:77.2%;" /></el-form-item>
      </div>
      <div style="flex:1">
        <el-form-item v-show="repairShow" label="修复结果" :label-width="formLabelWidth">
          <el-select v-model="form.repairResult" placeholder="发现方法">
            <el-option v-for="item in repairResultStr" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
      </div> -->
      <!-- <el-form-item label="逻辑删" :label-width="formLabelWidth">
            <el-select v-model="form.isDelete" placeholder="发现方法">
              <el-option v-for="item in isDeleteStr" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item> -->
      <!-- <el-form-item label="reopen的次数" :label-width="formLabelWidth"> <el-input v-model="form.reopenTimes" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="业务线" prop="bizId" :label-width="formLabelWidth"><el-input v-model="form.bizId" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="模块" :label-width="formLabelWidth"><el-input v-model="form.moduleId" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="项目名" :label-width="formLabelWidth"><el-input v-model="form.projectName" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="项目ID" :label-width="formLabelWidth"><el-input v-model="form.projectId" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="测试计划ID" prop="planId" :label-width="formLabelWidth"><el-input v-model="form.planId" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="caseID" :label-width="formLabelWidth"><el-input v-model="form.caseId" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="bug创建人" :label-width="formLabelWidth"> <el-input v-model="form.creator" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="开始开发时间" :label-width="formLabelWidth"><el-input v-model="form.startDevTime" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="开始等待测试时间" :label-width="formLabelWidth"><el-input v-model="form.waitTestTime" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="创建时间" :label-width="formLabelWidth"><el-input v-model="form.gmtCreate" autocomplete="off" /></el-form-item> -->
      <!-- <el-form-item label="修改时间" :label-width="formLabelWidth"><el-input v-model="form.gmtModify" autocomplete="off" /></el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { bugGetEnum, taskListCreate, bugUpdate, bugGet } from '@/api/defectManage'
import { projectGetTypeMap, teamMembers } from '@/api/projectPage'
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        id: '',
        platformType: '',
        clientType: ''
      },
      optionsAssigner: [],
      optionsCurrentHandler: [],
      businessTypeStr: [],
      taskIdStr: '',
      platformTypeStr: [],
      bugTypeStr: [],
      discoveryMethodStr: [],
      reasonStr: [],
      bugStatusStr: [],
      moduleStr: [],
      stageStr: [],
      fileList: [],
      uptataKey: [],
      // uptataKey: [{ name: '智慧平台.png', url: 'https://pt-starimg.didistatic.com/static/starimg/node/qo4sKioLko1571277086594.png' }, { name: '智慧平台.png', url: 'https://pt-starimg.didistatic.com/static/starimg/node/qo4sKioLko1571277086594.png' }],
      serviceTypeEnumList: [],
      clientTypeEnumList: [],
      bugLevelStr: [],
      bizOptions: [],
      serviceDataRules: {
        bugName: [{ required: true, message: '标题不能为空', trigger: 'change' }],
        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
        // bugName: [{ required: true, message: '主题不能为空', trigger: 'change' }],
        taskId: [{ required: true, message: '任务不能为空', trigger: 'change' }],
        moduleId: [{ required: true, message: '工程模块不能为空', trigger: 'change' }],
        // projectId: [{ required: true, message: '项目ID不能为空', trigger: 'change' }],
        bugType: [{ required: true, message: 'bug类型不能为空', trigger: 'change' }],
        reopenTimes: [{ required: true, message: 'reopen不能为空', trigger: 'change' }],
        discoveryMethod: [{ required: true, message: '发现方式不能为空', trigger: 'change' }],
        reason: [{ required: true, message: '问题原因不能为空', trigger: 'change' }],
        priority: [{ required: true, message: '级别不能为空', trigger: 'change' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
        platformType: [{ required: true, message: '平台类型不能为空', trigger: 'change' }],
        stage: [{ required: true, message: '所处阶段不能为空', trigger: 'change' }],
        assigner: [{ required: true, message: 'bug责任人不能为空', trigger: 'blur' }],
        currentHandler: [{ required: true, message: 'bug处理人不能为空', trigger: 'blur' }],
        bugDescribe: [{ required: true, message: 'bug描述不能为空', trigger: 'change' }],
        clientType: [{ required: true, message: '业务模块不能为空', trigger: 'change' }]
      },
      userData: '',
      formLabelWidth1: '22%',
      businessTypeShow: false,
      moduleTypeShow: false,
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      accessory: '',
      dis: false
    }
  },
  created() {
    this._initBegin()
    this.taskIdGet()
  },
  methods: {
    createdDis() {
      this.dis = true
    },
    submitUpload() {
      this.$refs.upload.submit()
      this.dis = true
      this.$message({ showClose: true, message: '文件正在上传······', type: 'success' })
    },
    handleChange(response, file, fileList) {
      this.fileDbList = []
      this.fileList = fileList.slice(-3)
      for (var a of this.fileList) {
        this.fileDbList.push({ 'name': a.name, 'url': 'http:' + a.response.url })
      }
      this.accessory = JSON.stringify(this.fileDbList)
      this.dis = false
      this.$message({ showClose: true, message: '文件上传成功', type: 'success' })
    },
    async _initBegin() {
      await bugGetEnum().then(res => {
        this.bugStatusStr = this.problemStatus(res.data.bugEnumList)
        this.stageStr = res.data.bugStageEnumList
        this.reasonStr = res.data.reasonEnumList
        this.bugTypeStr = res.data.bugTypeEnumList
        this.bugLevelStr = res.data.priorityEnumList
        this.discoveryMethodStr = res.data.discoveryMethodEnumList
        this.clientTypeEnumList = res.data.clientTypeEnumList
        this.serviceTypeEnumList = res.data.serviceTypeEnumList
      })
      await projectGetTypeMap().then(res => {
        if (res.code === 200) {
          this.bizOptions = res.data
        } else {
          this.errorFun()
        }
      })
      bugGet(this.$route.query.id).then(res => {
        this.form = res.data
        var str = res.data.accessory
        if (str !== '') {
          var obj = JSON.parse(str.split('{}')[0])
          for (var a of obj) {
            this.uptataKey.push(a)
          }
        }
        this.platformTypeStr = this.bizOptions.filter(value => value.code === this.form.bizId)[0].child
        if (this.form.clientType) {
          this.businessTypeShow = true
          this.businessTypeStr = this.platformTypeStr.filter(value => value.code === this.form.platformType)[0].child
          if (this.form.moduleId) {
            this.moduleTypeShow = true
            this.moduleStr = this.businessTypeStr.filter(value => value.code === this.form.clientType)[0].child
          }
        }
        this.getMember() // 保证bizId存在
        if (this.form.assigner) {
          this.form.assigner = this.form.assigner.split(',')
        }
        if (this.form.currentHandler) {
          this.form.currentHandler = this.form.currentHandler.split(',')
        }
      })
    },
    // 获取任务数据
    taskIdGet() {
      taskListCreate({}).then(res => {
        this.taskIdStr = res.data
      })
    },
    // 业务线取子数据
    clickChangePlatform(e) {
      this.platformTypeStr = this.bizOptions.filter(value => value.code === e)[0].child
      this.businessTypeStr = []
      this.moduleStr = []
      this.$set(this.form, 'platformType', '')
      this.$set(this.form, 'clientType', '')
      this.$set(this.form, 'moduleId', '')
      this.getMember() // 保证bizId存在
    },
    // 业务线取子数据
    clickChangeBusiness(e) {
      if (this.platformTypeStr.filter(value => value.code === e)[0].child) {
        this.businessTypeShow = true
        this.businessTypeStr = this.platformTypeStr.filter(value => value.code === e)[0].child
        this.moduleStr = []
      } else {
        this.businessTypeShow = false
      }
      this.$set(this.form, 'clientType', '')
      this.$set(this.form, 'moduleId', '')
    },
    // 业务线取子数据
    clickChangeModule(e) {
      if (this.businessTypeStr.filter(value => value.code === e)[0].child) {
        this.moduleTypeShow = true
        this.moduleStr = this.businessTypeStr.filter(value => value.code === e)[0].child
      } else {
        this.moduleTypeShow = false
      }
      this.$set(this.form, 'moduleId', '')
    },
    // 人员搜索
    getMember() {
      const objDataAssigner = { bizId: this.form.bizId, email: '', role: 'rd' }
      const objDataCurrentHandler = { bizId: this.form.bizId, email: '' }
      axios.all([teamMembers(objDataAssigner), teamMembers(objDataCurrentHandler)]).then(axios.spread((resAssigner, resCurrentHandler) => {
        if (resAssigner.code === 200 && resCurrentHandler.code === 200) {
          this.optionsAssigner = resAssigner.data
          this.optionsCurrentHandler = resCurrentHandler.data
        } else {
          this.errorFun('人员数据获取失败')
        }
      }))
    },
    // 待修复已修复
    problemStatus(arr) {
      return arr.filter(each => {
        if (each.code === 0) {
          each.name = '待修复'
          return true
        } else if (each.code === 3) {
          each.name = '已修复'
          return true
        }
      })
    },
    handleDelContractList(val) {
      for (var i = 0; i <= this.uptataKey.length; i++) {
        if (val.name === this.uptataKey[i].name) {
          this.uptataKey.splice(i, 1)
        }
      }
    },
    // 提交表单并且返回刷新
    createFormData(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (form.assigner) {
            form.assigner = form.assigner.join(',')
          }
          if (form.currentHandler) {
            form.currentHandler = form.currentHandler.join(',')
          }
          form.reopenTimes = parseInt(form.reopenTimes)
          form.accessory = this.accessory
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { bugBaseInfo: form, user: this.userData }
          bugUpdate(this.objData).then(res => {
            res.code === 200 ? this.successFun() : this.errorFun()
            this.$router.go(-1)
          })
        }
      })
    },
    successFun() {
      this.$notify({ title: 'Success', message: 'Updated Successfully', type: 'success', duration: 2000 })
    },
    errorFun() {
      this.$notify({ title: 'Failed', message: 'Updated Failed', type: 'error', duration: 2000 })
    }
  }
}
</script>
<style>
 .cla .el-table td {
    padding:0px;
  }
  .deleteSty {
    cursor: pointer;
    border: none;
  }
</style>

<style lang="stylus" scoped>
  .set-background
    background-color #F2F3F6
    display flex
    justify-content center
    min-width 700px
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 82vw
      margin-top 25px
      padding 29px 50px
      .block-flex
        display flex
        flex-wrap wrap
      .block-flex >>> .el-form-item
        width 100%
        display flex
      .block-flex >>> .el-form-item__content
        width 100%
        margin-left 0 !important
      .line-between
        width 100%
        display flex
        justify-content space-between
      .line-between-add
        display flex
        flex-wrap wrap
        width 100%
      .line-between-add >>> .el-form-item
        width 50%
    .block-end
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 82vw
      margin-top 25px
      padding 29px 50px
      margin-bottom 22px
      .font
        font-size 18px
        font-family PingFangSC
        font-weight 500
        color rgba(51,59,74,1)
        line-height 35px
      .submit
        margin-top 40px
        display flex
        flex-direction row-reverse
        .move-button
          margin-right 20px
</style>