thoth-frontend-test/src/views/Platform/bugManage/bugUpdate.vue

<template>
  <div id="window-judge" class="set-background">
    <el-form ref="form" :model="form" :rules="serviceDataRules">
      <div class="block">
        <el-form-item label="标题" prop="bugName" :label-width="formLabelWidth"><el-input v-model="form.bugName" autocomplete="off" placeholder="普惠质量产品工具平台..." style="width:77.2%;" /></el-form-item>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" prop="bizId" label="业务线" :label-width="formLabelWidth1">
            <el-select v-model="form.bizId" placeholder="业务线" style="width:54.5%;" @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 style="flex-grow:1" label="平台类型" prop="platformType" :label-width="formLabelWidth1">
            <el-select ref="clearPlatform" v-model="form.platformType" placeholder="平台类型" style="width:54.5%;" @change="clickChangeBusiness(form.platformType)">
              <el-option v-for="item in platformTypeStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" prop="taskId" label="任务" label-width="99px">
            <el-select v-model="form.taskId" filterable placeholder="任务" style="width: 245px;margin-right: -50px;">
              <el-option v-for="item in taskIdStr" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="businessTypeShow" style="flex-grow:1" prop="businessType" label="业务模块" :label-width="formLabelWidth1">
            <el-select ref="clearBusiness" v-model="form.businessType" placeholder="业务模块" style="width:54.5%;">
              <el-option v-for="item in businessTypeStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="类型" prop="bugType" :label-width="formLabelWidth1">
            <el-select v-model="form.bugType" style="width:54.5%;" placeholder="类型">
              <el-option v-for="item in bugTypeStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item style="flex-grow:1" label="发现方式" prop="discoveryMethod" :label-width="formLabelWidth1">
            <el-select v-model="form.discoveryMethod" style="width:54.5%;" placeholder="发现方式">
              <el-option v-for="item in discoveryMethodStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="级别" prop="priority" :label-width="formLabelWidth1">
            <el-select v-model="form.priority" style="width:54.5%;" placeholder="级别">
              <el-option v-for="item in bugLevelStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item style="flex-grow:1" label="问题原因" prop="reason" :label-width="formLabelWidth1">
            <el-select v-model="form.reason" style="width:54.5%;" placeholder="问题原因">
              <el-option v-for="item in reasonStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="状态" prop="status" :label-width="formLabelWidth1">
            <el-select v-model="form.status" placeholder="状态" style="width:54.5%;">
              <el-option v-for="item in bugStatusStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item style="flex-grow:1" label="所处阶段" prop="stage" :label-width="formLabelWidth1">
            <el-select v-model="form.stage" placeholder="所处阶段" style="width:54.5%;">
              <el-option v-for="item in stageStr" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="bug描述" prop="bugDescribe" :label-width="formLabelWidth"><el-input v-model="form.bugDescribe" type="textarea" placeholder="bug描述" rows="2" style="width:77.2%;" /></el-form-item>
      </div>
      <div class="block">
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="创建人" label-width="21%"><el-input v-model="form.creator" autocomplete="off" style="width:54.5%;" /></el-form-item>
          <el-form-item style="flex-grow:1" label="bug责任人" prop="assigner" :label-width="formLabelWidth1"><el-input v-model="form.assigner" autocomplete="off" style="width:53.5%;" /></el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="当前处理人" prop="currentHandler" :label-width="formLabelWidth1"><el-input v-model="form.currentHandler" autocomplete="off" style="width:55%;" /></el-form-item>
          <el-form-item style="flex-grow:1" label="开始开发时间" label-width="24.5%">    <el-date-picker
            v-model="form.startDevTime"
            type="datetime"
            placeholder="选择时间"
            style="width:53%;"
            value-format="yyyy-MM-dd HH:hh:mm"
          /></el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1;" label="reopen次数" prop="reopenTimes" label-width="22.6%;"><el-input v-model="form.reopenTimes" autocomplete="off" style="width:56%;" /></el-form-item>
          <el-form-item style="flex-grow:1;padding-right:15px;" label="提交测试时间" label-width="26.5%">    <el-date-picker
            v-model="form.waitTestTime"
            type="datetime"
            placeholder="选择时间"
            style="width:54%;"
            value-format="yyyy-MM-dd HH:hh:mm"
          /></el-form-item>
        </div>
      </div>
      <div class="block">
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="机型" :label-width="formLabelWidth1"><el-input v-model="form.model" autocomplete="off" style="width:54.5%;" /></el-form-item>
          <el-form-item style="flex-grow:1" label="地图类型" :label-width="formLabelWidth1"><el-input v-model="form.mapType" autocomplete="off" style="width:54.5%;" /></el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="OS类型" :label-width="formLabelWidth1"><el-input v-model="form.osType" autocomplete="off" style="width:54.5%;" /></el-form-item>
          <el-form-item style="flex-grow:1" label="地图版本号" :label-width="formLabelWidth1"><el-input v-model="form.mapVersion" autocomplete="off" style="width:54.5%;" /></el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item style="flex-grow:1" label="网络类型" :label-width="formLabelWidth1"><el-input v-model="form.networkType" autocomplete="off" style="width:54.5%;" /></el-form-item>
          <el-form-item style="flex-grow:1" label="SDK版本" :label-width="formLabelWidth1"><el-input v-model="form.sdkVersion" autocomplete="off" style="width:54.5%;" /></el-form-item>
        </div>
        <div style="width:100%;">
          <el-form-item label="app版本号" label-width="11%"><el-input v-model="form.appVersion" autocomplete="off" style="width:27.2%;" /></el-form-item>
        </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
            class="upload-demo"
            multiple
            capture
            accept="image/jpeg, image/png, image/gif, audio/mp4, video/mp4, audio/mpeg, application/vnd.ms-excel"
            :on-change="handleChange"
            :file-list="fileList"
            action="http://star.xiaojukeji.com/upload/img.node"
          >
            <!-- action="http://page-daily.kuaidadi.com/upload/img.node" 线下 -->
            <!-- action="http://star.xiaojukeji.com/upload/img.node" 线上 -->
            <!-- action="https://jsonplaceholder.typicode.com/posts/" 原始地址-->
            <el-button size="small">点击上传</el-button>
          </el-upload>
        </div>
        <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 slot="footer" class="dialog-footer">
    </div> -->
  </div>
</template>

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

export default {
  data() {
    return {
      form: {
        id: '',
        platformType: '',
        businessType: ''
      },
      businessTypeStr: [],
      taskIdStr: '',
      platformTypeStr: [],
      bugTypeStr: [],
      discoveryMethodStr: [],
      reasonStr: [],
      bugStatusStr: [],
      stageStr: [],
      fileList: [],
      serviceTypeEnumList: [],
      clientTypeEnumList: [],
      bugLevelStr: [{ name: 'p0', value: 0 }, { name: 'p1', value: 1 }, { name: 'p2', value: 2 }, { name: 'p3', value: 3 }],
      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' }],
        // 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: 'change' }],
        currentHandler: [{ required: true, message: 'bug处理人不能为空', trigger: 'change' }],
        bugDescribe: [{ required: true, message: 'bug描述不能为空', trigger: 'change' }],
        businessType: [{ required: true, message: '业务模块不能为空', trigger: 'change' }]
      },
      formLabelWidth: '11%',
      formLabelWidth1: '22%',
      userData: '',
      businessTypeShow: false,
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname')
    }
  },
  created() {
    this._initBegin()
    this.forkDown()
    this.taskIdGet()
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3)
      console.log(this.fileList)
    },
    async _initBegin() {
      await bugGetEnum().then(res => {
        this.bugStatusStr = 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
      })
      bugGet(this.$route.query.id).then(res => {
        this.form = res.data
        this.platformTypeStr = this.bizOptions.filter(value => value.code === this.form.bizId)[0].child
        if (this.form.businessType) {
          this.businessTypeShow = true
          this.businessTypeStr = this.platformTypeStr.filter(value => value.name === this.form.platformType)[0].child
        }
        // for (const a of this.bizIdEnumList) {
        //   if (this.form.bizId === a.code) {
        //     this.bizId = a.name
        //     this.currentHandler = this.form.currentHandler
        //     this.reason = this.form.reason
        //     this.bugType = this.form.bugType
        //     return
        //   } else {
        //     this.bizId = ''
        //   }
        // }
        // this.bizId = this.form.bizId
      })
    },
    forkDown() {
      projectGetTypeMap().then(res => {
        if (res.code === 200) {
          this.bizOptions = res.data
        } else {
          this.errorFun()
        }
      })
    },
    // 获取任务数据
    taskIdGet() {
      taskListCreate({ statusList: [6, 7] }).then(res => {
        this.taskIdStr = res.data
      })
    },
    // 业务线取子数据
    clickChangePlatform(e) {
      this.platformTypeStr = this.bizOptions.filter(value => value.code === e)[0].child
      this.$set(this.form, 'platformType', '')
      this.$set(this.form, 'businessType', '')
    },
    // 业务线取子数据
    clickChangeBusiness(e) {
      if (this.platformTypeStr.filter(value => value.name === e)[0].child) {
        this.businessTypeShow = true
        this.businessTypeStr = this.platformTypeStr.filter(value => value.name === e)[0].child
      } else {
        this.businessTypeShow = false
      }
      this.$set(this.form, 'businessType', '')
    },
    // 提交表单并且返回刷新
    createFormData(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // form.bizId = this.bizJson
          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 lang="stylus" scoped>
  .set-background
    background-color #F2F3F6
    display flex
    justify-content center
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 1000px
      margin-top 25px
      padding 29px 50px
    .block-end
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 1000px
      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>