thoth-frontend-test/src/views/projectManage/requirement/components/BasicsCode.vue

<template>
  <div class="detail-infos">
    <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
      <el-form-item label="PM：">
        <over-click id="pm-select" @overMouse="changeArea">
          <template slot="active">
            <search-people :value.sync="form_query.pm" :clearable="false" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.pm">{{ form_query.pmMemberInfoResponse.name }}</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="开发Leader：">
        <over-click id="rdLeader-select" style="line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <search-people :value.sync="form_query.rdLeader" :clearable="false" :multiple="true" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.rdLeaderMemberInfoResponse">
              <span v-for="(item, index) in form_query.rdLeaderMemberInfoResponse" :key="index">
                {{ item.name }}
                <span v-if="index < form_query.rdLeaderMemberInfoResponse.length - 1"> , </span>
              </span>
            </span>
            <span v-else style="color: #C0C4CC;">待添加</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="测试Leader：">
        <over-click id="qaLeader-select" style="line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <search-people :value.sync="form_query.qaLeader" :clearable="false" :multiple="true" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.qaLeaderMemberInfoResponse">
              <span v-for="(item, index) in form_query.qaLeaderMemberInfoResponse" :key="index">
                {{ item.name }}
                <span v-if="index < form_query.qaLeaderMemberInfoResponse.length - 1"> , </span>
              </span>
            </span>
            <span v-else style="color: #C0C4CC;">待添加</span>
          </template>
        </over-click>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
      <el-form-item label="需求方向：">
        <over-click id="rqmtOrntIds-select" style="line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <el-cascader v-model="form_query.rqmtOrntIds" size="medium" collapse-tags :props="props" :options="demandDirection" placeholder="请选择" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.rqmtOrntNames">{{ form_query.rqmtOrntNames }}</span>
            <span v-else style="color: #C0C4CC;">请选择</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="需求来源：">
        <over-click id="sourceType-select" @overMouse="changeArea">
          <template slot="active">
            <el-select v-model="form_query.sourceType" size="small" filterable placeholder="请选择">
              <el-option v-for="(item,index) in sourceTypeList" :key="item.msg + index" :label="item.msg" :value="item.code" />
            </el-select>
          </template>
          <template slot="overMouse">
            <span v-if="form_query.sourceTypeName">{{ form_query.sourceTypeName }}</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="需求提出人：">
        <over-click id="rqmtProposer-select" style="line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <search-people :value.sync="form_query.rqmtProposer" :clearable="false" :multiple="true" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.rqmtProposer">
              <span v-for="(item, index) in form_query.rqmtProposers" :key="index">
                {{ item.name }}
                <span v-if="index < form_query.rqmtProposers.length - 1"> , </span>
              </span>
            </span>
            <span v-else style="color: #C0C4CC;">待添加</span>
          </template>
        </over-click>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
      <el-form-item label="优先级：">
        <over-click id="priority-select" @overMouse="changeArea">
          <template slot="active">
            <el-select v-model="form_query.priority" size="small" filterable placeholder="请选择">
              <el-option v-for="(item,index) in priorityList" :key="item.msg + index" :label="item.msg" :value="item.code" />
            </el-select>
          </template>
          <template slot="overMouse">
            <span v-if="form_query.priorityName">{{ form_query.priorityName }}</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="所属迭代：">
        <over-click id="iterationId-select" style="line-height: normal; padding: 10px 0;" :parameter="Jump.url1" @overMouse="changeArea">
          <template slot="active">
            <el-select v-model="form_query.iterationId" clearable placeholder="请选择">
              <el-option v-for="(item,index) in iterationList" :key="item.name + index" :label="item.name" :value="item.id" />
            </el-select>
          </template>
          <template slot="overMouse">
            <span v-if="form_query.iterationName">{{ form_query.iterationName }}</span>
            <span v-else style="color: #C0C4CC;">请选择</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="跟版客户端：">
        <over-click id="referredClientType-select" style="line-height: normal; padding: 10px 0;" @overMouse="changeArea" @click="setName">
          <template slot="active">
            <el-select v-model="form_query.referredClientType" size="small" multiple filterable placeholder="请选择" @change="ReferredClientType(form_query.referredClientType)">
              <el-option v-for="(item,index) in appClient" :key="item.msg + index" :label="item.msg" :value="item.code" :disabled="item.dis" @click.native="setReferredClientType(item)" />
            </el-select>
          </template>
          <template slot="overMouse">
            <span v-if="form_query.referredClientTypeName === '无' || form_query.referredClientTypeName === 'null' " style="color: #333333;">不跟版</span>
            <span v-else>{{ form_query.referredClientTypeName }}</span>
          </template>
        </over-click>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
      <el-form-item label="所属项目：">
        <over-click id="belongingProject-select" style="line-height: normal; padding: 10px 0;" :parameter="Jump.url" @overMouse="changeArea">
          <template slot="active">
            <el-select v-model="form_query.belongingProject" size="small" clearable placeholder="请选择">
              <el-option v-for="(item,index) in belongProjectList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </template>
          <template slot="overMouse">
            <span v-if="form_query.belongingProject"> {{ form_query.belongingProjectName }} </span>
            <span v-else style="color: #C0C4CC;">请选择</span>
          </template>
        </over-click>
      </el-form-item>
    </el-form>

    <el-form :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
      <el-form-item label="BRD链接：" class="PRD">
        <over-click id="brdUrl-select" style="width: max-content;line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <el-input v-model="form_query.brdUrl" size="small" clearable style="width:100% !important;" placeholder="请输入" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.brdUrl" class="PRD-link"><a :href="form_query.brdUrl" target="_blank">{{ form_query.brdUrl }}</a></span>
            <span v-else style="color: #C0C4CC;">待添加</span>
          </template>
        </over-click>
      </el-form-item>
      <el-form-item label="PRD链接：" prop="mrdUrl" class="PRD">
        <over-click id="mrdUrl-select" style="width: max-content;line-height: normal; padding: 10px 0;" @overMouse="changeArea">
          <template slot="active">
            <el-input v-model="form_query.mrdUrl" size="small" clearable style="width:100% !important;" placeholder="请输入" />
          </template>
          <template slot="overMouse">
            <span v-if="form_query.mrdUrl" class="PRD-link"><a :href="form_query.mrdUrl" target="_blank">{{ form_query.mrdUrl }}</a></span>
            <span v-else style="color: #C0C4CC;">待添加</span>
          </template>
        </over-click>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const _ = require('lodash')
import { EncryptId } from '@/utils/crypto-js.js'
import { mapGetters } from 'vuex'
import '@/styles/PublicStyle/index.scss'
import searchPeople from '@/components/select/searchPeople'
import overClick from '@/components/click/overClick'
import { updateRequirement, iterationList, showRequirementEnum, settingQueryBizRqmtOrntList, projectListProject } from '@/api/requirement.js'

export default {
  components: {
    searchPeople,
    overClick
  },
  props: {
    value: { type: Object, required: true }
  },
  data() {
    return {
      // dependList: [{ msg: '否', code: 0 }, { msg: '是', code: 1 }], // 是否跟版
      form_query: { pm: null, rqmtOrntIds: [] },
      priorityList: [], // 优先级列表
      sourceTypeList: [], // 需求来源列表
      appClient: [], // 跟版客户端列表
      demandDirection: [], // 需求方向option
      iterationList: [], // 所属迭代
      Jump: {
        url: null,
        url1: null
      },
      belongProjectList: [], // 所属项目
      props: {
        value: 'id',
        label: 'rqmtOrntName',
        children: 'childRqmtOrnts',
        multiple: true
      }
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  watch: {
    value: {
      handler(newV, old) {
        this.form_query = newV
        this.belongingProject(newV)
      },
      deep: true,
      immediate: true
    },
    bizId: {
      handler(newV) {
        if (newV !== -1) this.showRequirementEnum()
      },
      immediate: true
    }
  },
  methods: {
    async changeArea(e) { // area修改
      const requirementInfo = _.cloneDeep(this.form_query)
      requirementInfo.rqmtProposer = requirementInfo.rqmtProposer ? requirementInfo.rqmtProposer.join() : null
      requirementInfo.rdLeader = requirementInfo.rdLeader ? requirementInfo.rdLeader.join() : ''
      requirementInfo.qaLeader = requirementInfo.qaLeader ? requirementInfo.qaLeader.join() : ''
      requirementInfo.iterationId = requirementInfo.iterationId === '' ? requirementInfo.iterationId = -1 : requirementInfo.iterationId
      if (requirementInfo.referredClientType && requirementInfo.referredClientType.length > 0) {
        if (requirementInfo.referredClientType === [-1]) {
          requirementInfo.dependOnRelease = 0
          requirementInfo.referredClientType = []
        } else {
          requirementInfo.dependOnRelease = 1
          requirementInfo.referredClientType = requirementInfo.referredClientType.join()
        }
      } else {
        this.form_query.referredClientType = [-1]
        requirementInfo.dependOnRelease = 0
        requirementInfo.referredClientType = ''
        this.appClient.map(item => {
          if (item.code !== -1) {
            item.dis = true
          }
        })
      }
      const res = await updateRequirement(requirementInfo)
      if (res.code === 200) {
        this.$emit('update')
        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    belongingProject(e) {
      if (e.belongingProject && e.belongingProject !== -1) {
        const bizId_id = EncryptId(`${this.bizId}_${e.belongingProject}`)
        this.Jump.url = { name: '项目详情', query: { bizId_id: bizId_id }}
      }
      if (e.iterationId !== -1 && e.iterationId) {
        const bizId_id = EncryptId(`${this.bizId}_${e.iterationId}`)
        this.Jump.url1 = { name: '迭代详情', query: { bizId_id: bizId_id }}
      }
    },
    async showRequirementEnum() { // 获取需求状态列表，优先级列表，需求来源
      const res1 = await projectListProject({ bizId: this.bizId })
      if (res1.code === 200) {
        this.belongProjectList = res1.data
      }
      const res4 = await iterationList({ bizId: this.bizId, curIndex: 1, pageSize: 999 }) // 获取所属迭代列表
      if (res4.code === 200) {
        this.iterationList = res4.data.list
      }
      const res = await showRequirementEnum()
      if (res.code === 200) {
        this.priorityList = res.data.priority
        this.sourceTypeList = res.data.sourceType
        this.appClient = res.data.appClient
        this.appClient.unshift({ msg: '不跟版', code: -1 })
        this.$nextTick(() => {
          if (this.form_query.referredClientType && this.form_query.referredClientTypes.length === 0) {
            this.form_query.referredClientType = [-1]
            this.appClient.map(item => {
              if (item.code !== -1) {
                item.dis = true
              }
            })
          } else {
            this.appClient.map(item => {
              if (item.code === -1) {
                item.dis = true
              }
            })
          }
        })
      }
      const res3 = await settingQueryBizRqmtOrntList(this.bizId)
      if (res3.code === 200) { // 需求方向
        this.demandDirection = this.getTreeData(res3.data)
      }
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].childRqmtOrnts.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].childRqmtOrnts = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].childRqmtOrnts)
        }
      }
      return data
    },
    ReferredClientType(e) {
      if (e.length === 0) {
        this.$forceUpdate()
        this.appClient.map(item => { item.dis = false })
      }
    },
    setName() {
      if (this.form_query.referredClientTypeName === '不跟版') {
        this.form_query.referredClientType = [-1]
        this.appClient.map(item => {
          if (item.code !== -1) {
            item.dis = true
          }
        })
      }
    },
    setReferredClientType(val) {
      if (val.dis === true) {
        return false
      }
      if (val.code === -1) {
        this.form_query.dependOnRelease = 0
        this.appClient.map(item => {
          if (item.code !== -1) {
            this.$forceUpdate()
            item.dis = true
          }
        })
      } else {
        this.form_query.dependOnRelease = 1
        this.appClient.map(item => {
          if (item.code === -1) {
            this.$forceUpdate()
            item.dis = true
          }
        })
      }
      if (this.form_query.referredClientType.length === 0) {
        this.ReferredClientType(this.form_query.referredClientType)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-infos {
    padding: 0 34px 20px 34px;
    .demo-form-inline {
      .el-form-item {
        width: 33%;
        margin-right: 0;
        margin-bottom: 1px;
      }
      >>>.el-form-item__content {
        width: calc(100% - 125px);
        color: #333333;
        font-size: 14px;
      }
    }
    .PRD-link {
      width: 50%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      color:#409EFF;
    }
  }
</style>