thoth-frontend-test/src/views/projectManage/taskList/taskUpdateCreate.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="name" label-width="110px"><el-input v-model="form.name" autocomplete="off" placeholder="普惠质量产品工具平台..." style="width:90%;" /></el-form-item>
          <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 priorityEnumList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否免测" prop="notest" label-width="147px">
              <el-select v-model="form.notest" placeholder="请选择" style="width:76%;">
                <el-option v-for="item in noTestEnumList" :key="item.code" :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" style="width:76%;" placeholder="请选择">
                <el-option v-for="item in processStatusEnumList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item label="任务类型" prop="taskType" label-width="147px">
              <el-select v-model="form.taskType" placeholder="请选择" style="width:76%;">
                <el-option v-for="item in taskTypeStr" :key="item.code" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="进展" label-width="124px">
              <el-select v-model="form.stage" 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 prop="bizId" label="业务线" label-width="147px">
              <el-select v-model="form.bizId" placeholder="业务线" style="width:76%;" @change="clickChangePlatform(form.bizId)">
                <el-option v-for="item in bizIdEnumList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item label="平台类型" prop="type" label-width="124px">
              <el-select ref="clearPlatform" v-model="form.type" placeholder="平台类型" style="width:76%;" @change="clickChangeBusiness(form.type)">
                <el-option v-for="item in typeString" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="businessTypeShow" prop="clientType" label="业务模块" label-width="147px">
              <el-select ref="clearBusiness" v-model="form.clientType" placeholder="业务模块" style="width:76%;">
                <el-option v-for="item in businessTypeStr" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="需求文档" label-width="110px"><el-input v-model="form.mrdUrl" placeholder="请填写" style="width:90%;" /></el-form-item>
          <el-form-item label="技术文档" label-width="110px"><el-input v-model="form.devUrl" placeholder="请填写" style="width:90%;" /></el-form-item>
          <!-- <el-form-item class="submit">
            <el-button type="danger" plain size="mini" @click="$router.go(-1)">取 消</el-button>
            <el-button class="move-button" size="mini" type="primary" @click="createFormData(form)">保 存</el-button>
          </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.tag" autocomplete="off" placeholder="请填写" style="width:76%;" />
            </el-form-item>
            <el-form-item label="分组" label-width="147px">
              <el-input v-model="form.group" autocomplete="off" placeholder="请填写" style="width:76%;" />
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="产品" label-width="124px" prop="pm">
              <el-select v-model="form.pm" multiple filterable placeholder="公司邮箱前缀" style="width:76%;" @visible-change="realTimeChange">
                <el-option
                  v-for="item in optionsPM"
                  :key="item.id"
                  :label="item.name"
                  :value="item.email"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="开发" label-width="147px" prop="rd">
              <el-select v-model="form.rd" multiple filterable placeholder="公司邮箱前缀" style="width:76%;" @visible-change="realTimeChange">
                <el-option
                  v-for="item in optionsRD"
                  :key="item.id"
                  :label="item.name"
                  :value="item.email"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item label="测试" label-width="124px" prop="qa">
              <el-select v-model="form.qa" multiple filterable placeholder="公司邮箱前缀" style="width:76%;" @visible-change="realTimeChange">
                <el-option
                  v-for="item in optionsQA"
                  :key="item.id"
                  :label="item.name"
                  :value="item.email"
                />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="描述" label-width="110px"><el-input v-model="form.description" type="textarea" placeholder="bug描述" rows="3" style="width:90%;" /></el-form-item>
        </div>
      </div>
      <div class="block">
        <div class="block-flex">
          <div class="line-between">
            <el-form-item label="需求评审时间" label-width="166px">
              <el-date-picker v-model="form.mrdTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="计划提测时间" label-width="189px">
              <el-date-picker v-model="form.launchTestPlanTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" />
            </el-form-item>
          </div>
          <div class="line-between">
            <el-form-item label="计划开始开发时间" label-width="166px">
              <el-date-picker v-model="form.startDevPlanTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="计划测试完成时间" label-width="189px">
              <el-date-picker v-model="form.testFinishPlanTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" />
            </el-form-item>
          </div>
          <div class="line-between-add">
            <el-form-item label="计划上线时间" label-width="166px">
              <el-date-picker v-model="form.onlinePlanTime" align="left" size="medium" type="datetime" style="width:76%;" placeholder="选择日期" />
            </el-form-item>
          </div>
          <el-form-item label="备注" label-width="142px"><el-input v-model="form.remark" type="textarea" placeholder="bug描述" rows="3" style="width:90%;" /></el-form-item>
          <el-form-item class="submit">
            <el-button type="danger" plain size="mini" @click="$router.go(-1)">取 消</el-button>
            <el-button class="move-button" size="mini" type="primary" @click="createFormData(form)">确 定</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { projectGetTypeMap, updateTaskList, teamMembers } from '@/api/projectPage'
import { taskListCreate } from '@/api/defectManage'
import { bugGetEnum } from '@/api/defectManage' // 下拉菜单data
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        type: '',
        clientType: '',
        pm: '',
        rd: '',
        qa: ''
      },
      optionsPM: [],
      optionsRD: [],
      optionsQA: [],
      bugTypeStr: [],
      stageStr: [],
      pauseProjectId: '',
      businessTypeShow: false,
      priorityEnumList: [], // 优先级
      typeString: [], // 平台类型
      bizIdEnumList: [], // 业务线
      businessTypeStr: [], // 业务模块
      processStatusEnumList: [], // 状态
      noTestEnumList: [], // 是否免测
      stageEnumList: [], // 进展
      taskTypeStr: [], // 任务类型
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      serviceDataRules: {
        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
        type: [{ required: true, message: '平台类型不能为空', trigger: 'change' }],
        taskType: [{ required: true, message: '任务类型不能为空', trigger: 'change' }],
        notest: [{ required: true, message: '是否免测不能为空', trigger: 'change' }],
        status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
        name: [{ required: true, message: '任务名称不能为空', trigger: 'change' }],
        priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
        // stage: [{ required: true, message: '进展不能为空', trigger: 'change' }],
        clientType: [{ required: true, message: '工程模块为空', trigger: 'change' }],
        pm: [{ required: true, message: '产品人员不能为空', trigger: 'blur' }],
        rd: [{ required: true, message: '开发人员不能为空', trigger: 'blur' }],
        qa: [{ required: true, message: '测试人员不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.bugListSelect()
    this.idDetail()
  },
  methods: {
    bugListSelect() {
      bugGetEnum().then(res => {
        this.priorityEnumList = res.data.priorityEnumList
        this.processStatusEnumList = res.data.processStatusEnumList
        this.noTestEnumList = res.data.noTestEnumList
        this.bugTypeStr = res.data.stageEnumList
        this.taskTypeStr = res.data.taskAndRoutineEnumList
      })
    },
    // 根据id获取数据
    async idDetail() {
      // 业务线数据获取
      await projectGetTypeMap().then(res => {
        if (res.code === 200) {
          this.bizIdEnumList = res.data
        } else {
          this.errorFun(res.msg)
        }
      })
      taskListCreate({ id: this.$route.query.id }).then(res => {
        if (res.code === 200) {
          this.form = res.data[0]
          this.typeString = this.bizIdEnumList.filter(value => value.code === this.form.bizId)[0].child
          this.getMember() // 保证bizId存在
          if (this.form.pm) {
            this.form.pm = this.form.pm.split(',')
          }
          if (this.form.rd) {
            this.form.rd = this.form.rd.split(',')
          }
          if (this.form.qa) {
            this.form.qa = this.form.qa.split(',')
          }
          if (this.form.clientType) {
            this.businessTypeShow = true
            this.businessTypeStr = this.typeString.filter(value => value.code === this.form.type)[0].child
          }
        } else {
          this.errorFun(res.msg)
        }
      })
    },
    // 业务线取子数据
    clickChangePlatform(e) {
      this.typeString = this.bizIdEnumList.filter(value => value.code === e)[0].child
      this.businessTypeStr = []
      this.$set(this.form, 'type', '')
      this.$set(this.form, 'clientType', '')
      this.getMember()
    },
    // 业务线取子数据
    clickChangeBusiness(e) {
      if (this.typeString.filter(value => value.code === e)[0].child) {
        this.businessTypeShow = true
        this.businessTypeStr = this.typeString.filter(value => value.code === e)[0].child
      } else {
        this.businessTypeShow = false
      }
      this.$set(this.form, 'clientType', '')
    },
    // 点击一次更新一次
    realTimeChange(e) {
      if (e === true) this.getMember()
    },
    // 人员搜索
    getMember() {
      this.objDataPM = { bizId: this.form.bizId, email: '', role: 'pm' }
      this.objDataRD = { bizId: this.form.bizId, email: '', role: 'rd' }
      this.objDataQA = { bizId: this.form.bizId, email: '', role: 'qa' }
      axios.all([teamMembers(this.objDataPM), teamMembers(this.objDataRD), teamMembers(this.objDataQA)]).then(axios.spread((resPM, resRD, resQA, resFOCUS) => {
        if (resPM.code === 200 && resRD.code === 200 && resQA.code === 200) {
          this.optionsPM = resPM.data
          this.optionsRD = resRD.data
          this.optionsQA = resQA.data
        } else {
          this.errorFun('人员数据获取失败')
        }
      }))
    },
    // 新建项目
    createFormData(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          form.projectId = this.$route.query.projectId
          if (form.pm) {
            form.pm = form.pm.join(',')
          }
          if (form.rd) {
            form.rd = form.rd.join(',')
          }
          if (form.qa) {
            form.qa = form.qa.join(',')
          }
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { taskInfo: form, user: this.userData }
          updateTaskList(this.objData).then(res => {
            res.code === 200 ? this.successFun('updata') : this.errorFun(res.msg)
            this.$router.go(-1)
          })
        } else {
          this.errorFun('还有未填写的信息')
        }
      })
    },
    successFun(successText) {
      this.$notify({ title: 'Success', message: `${successText} Successfully`, type: 'success', duration: 2000 })
    },
    errorFun(errorText) {
      this.$notify({ title: 'Failed', message: errorText, type: 'error', duration: 2000 })
    }
  }
}
</script>

<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 95%
      margin 20px auto
      padding 29px 50px
    .block >>> .el-form-item__content
      margin-left 0 !important
    .block-flex
      display flex
      flex-wrap wrap
    .block-flex >>> .el-form-item
      width 100%
      display flex
    .block-flex >>> .el-form-item__content
      width 100%
    .force-height >>> .w-e-text-container
      height 80px !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%
    .submit
      margin 0 9%
    .submit >>> .el-form-item__content
      margin-top 40px
      display flex
      flex-direction row-reverse
      .move-button
        margin-right 20px
    // .font
    //   font-size 18px
    //   font-family PingFangSC
    //   font-weight 500
    //   color rgba(51,59,74,1)
    //   line-height 35px
</style>