thoth-frontend-test/src/components/StatusComponent/StatusComponent.vue

<template>
  <div>
    <el-select
      v-model="status"
      :class="{
        'status_color': status === 0,
        'status_color2': status === 3,
        'status_color5': status === 2,
        'status_color1': status === 4,
        'status_color3': status === 5
      }"
      class="public_botton"
      size="mini"
      @change="blurEvent(status)"
    >
      <el-option v-for="item in bugStatusList(status)" :key="item.code" :label="item.name" :value="item.code" />
    </el-select>
    <el-dialog
      v-if="statusDialogVisible"
      :visible.sync="statusDialogVisible"
      width="30%"
      :title="statusDialogTitle"
      class="public_task"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="modalClose"
    >
      <div class="blueStripe" />
      <el-form ref="statusDialogForm" label-width="110px" label-position="left" :model="statusDialogForm" :rules="rules">
        <el-form-item v-if="statusDialogTitle === '待测试'" label="修复结果" prop="repairResult" class="bug_manage_dialog">
          <el-select v-model="statusDialogForm.repairResult" style="width: 100%">
            <el-option v-for="item in repairResultEnumList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="statusDialogTitle === '待测试' || statusDialogTitle === '已完成'" label="缺陷原因" prop="bugReason" class="bug_manage_dialog">
          <el-select v-model="statusDialogForm.bugReason" style="width: 100%">
            <el-option v-for="item in bugReasonEnumList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="statusDialogTitle === '待测试'" label="修复方式" class="bug_manage_dialog bug_manage_dialog_fixMethod">
          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入具体原因，得出结论的过程，具体修复过程或方式" maxlength="300" show-word-limit rows="4" />
        </el-form-item>
        <el-form-item v-if="statusDialogTitle === '已完成'" label="修复结果" prop="repairResult" class="bug_manage_dialog">
          <el-select v-model="statusDialogForm.repairResult" style="width: 100%">
            <el-option v-for="item in repairResultEnumList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="statusDialogTitle === 'Reopen'" label="Reopen原因" prop="reasonOrDesc" class="bug_manage_dialog">
          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" placeholder="请输入Reopen" maxlength="300" show-word-limit rows="4" />
        </el-form-item>
        <el-form-item v-if="statusDialogTitle === 'Hold'" label="Hold原因" prop="reasonOrDesc" class="bug_manage_dialog">
          <el-input v-model="statusDialogForm.reasonOrDesc" type="textarea" maxlength="300" show-word-limit rows="4" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button size="small" @click="modalClose()">取 消</el-button>
        <el-button size="small" type="primary" @click="statusDialogConfirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { bugUpdate, bugGetEnum } from '@/api/defectManage'
import '@/styles/PublicStyle/index.scss'

export default {
  props: {
    title: { type: String, default: null }, // 标题
    statusData: { type: Number, default: null }, // 选择的当前状态
    statusRow: { type: Object, default: null } // 当前行数据
  },
  data() {
    return {
      userData: { id: '', ename: localStorage.getItem('username'), name: localStorage.getItem('realname') },
      status: this.statusData, // 状态的code
      statusDialogVisible: false, // dialog
      bugEnumList: [], // 状态option
      bugReasonEnumList: [], // 缺陷原因
      repairResultEnumList: [], // 修复结果
      statusDialogTitle: '', // 状态Name
      statusDialogForm: {}, // 表单
      staData: {},
      statusCode: '',
      rules: {
        bugReason: [{ required: true, message: '请选择缺陷原因', trigger: ['blur', 'change'] }],
        repairResult: [{ required: true, message: '请选择修复结果', trigger: ['blur', 'change'] }],
        reasonOrDesc: [{ required: true, message: '请输入Reopen原因', trigger: ['blur', 'change'] }]
      }
    }
  },
  created() {
    this.bugListSelect()
  },
  methods: {
    blurEvent(status) { // 修改状态为0
      this.statusCode = status
      if (status === 0) {
        this.statusRow.status = status
        bugUpdate({ bugBaseInfo: this.statusRow, user: this.userData }).then(res => {
          this.statusRow.isSelected = !this.statusRow.isSelected
          if (res.code === 200) {
            this.$emit('getBugList')
          }
          this.$message({ message: res.msg, type: res.msg })
        })
        return
      }
      let data = ''
      this.bugEnumList.map(item => {
        item.code === status ? data = item.name : ''
      })
      this.statusDialogTitle = data
      this.statusDialogVisible = true
    },
    modalClose() { // 关闭dialog
      this.statusDialogVisible = false
      this.status = this.statusData
    },
    statusDialogConfirm() { // 点击确定 验证 修改
      this.$refs.statusDialogForm.validate((valid) => {
        if (valid) {
          this.staData = this.statusRow
          this.staData.status = this.statusCode
          this.staData.reasonOrDesc = this.statusDialogForm.reasonOrDesc
          this.staData.repairResult = this.statusDialogForm.repairResult
          this.staData.bugReason = this.statusDialogForm.bugReason
          const objData = { bugBaseInfo: this.staData, user: this.userData }
          alert()
          bugUpdate(objData).then(res => {
            if (res.code === 200) {
              this.statusDialogVisible = false
              this.statusDialogForm = {}
            } else if (res.code !== 200) {
              this.$emit('getBugList')
            }
            this.$message({ message: res.msg, type: res.msg })
          })
        }
      })
    },
    bugStatusList(status) { // 不同状态返回不同的option
      if (status === 0) {
        return this.bugEnumList.filter(item => {
          return item.code === 0 || item.code === 2 || item.code === 5
        })
      }
      if (status === 2) {
        return this.bugEnumList.filter(item => {
          return item.code === 2 || item.code === 3 || item.code === 4
        })
      }
      if (status === 3) {
        return this.bugEnumList.filter(item => {
          return item.code === 3
        })
      }
      if (status === 4) {
        return this.bugEnumList.filter(item => {
          return item.code === 2 || item.code === 5 || item.code === 4
        })
      }
      if (status === 5) {
        return this.bugEnumList.filter(item => {
          return item.code === 5 || item.code === 2
        })
      }
    },
    bugListSelect() { // 获取下拉数据
      bugGetEnum().then(res => {
        this.bugEnumList = res.data.bugEnumList // status
        this.repairResultEnumList = res.data.repairResultEnumList // 修复结果
        this.bugReasonEnumList = res.data.bugReasonEnumList
      })
    }
  }
}
</script>

<style lang="scss">
.btns .el-input--suffix .el-input__inner {
  padding-right: 10px;
  padding-left: 10px;
  width: 73px;
}

</style>