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" @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.rdLeader">
              <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" @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.qaLeader">
              <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" @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>
          </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" @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" @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>
          </template>
        </over-click>
      </el-form-item>
      <!-- <el-form-item label="是否跟版：">
        <el-select v-model="form_query.dependOnRelease" size="small" filterable placeholder="请选择" @change="changeArea">
          <el-option v-for="(item,index) in dependList" :key="item.msg + index" :label="item.msg" :value="item.code" />
        </el-select>
      </el-form-item> -->
      <el-form-item v-if="form_query.dependOnRelease === 1" label="跟版客户端：">
        <over-click id="referredClientType-select" @overMouse="changeArea">
          <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 }}</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" @overMouse="changeArea">
          <template slot="active">
            <el-select v-model="form_query.belongingProject" size="small" multiple filterable placeholder="请选择">
              <el-option v-for="(item,index) in belongProjectList" :key="item.msg + index" :label="item.msg" :value="item.code" />
            </el-select>
          </template>
          <template slot="overMouse">
            <div v-if="form_query.belongingProject !== -1" @click="jump('项目详情',form_query.belongingProject)">{{ form_query.belongingProjectName }}</div>
            <template v-else>{{ form_query.belongingProjectName }}</template>
          </template>
        </over-click> -->
        <div v-if="form_query.belongingProject !== -1" @click="jump('项目详情',form_query.belongingProject)">{{ form_query.belongingProjectName }}</div>
        <template v-else>{{ form_query.belongingProjectName }}</template>
      </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" @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" @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 '@/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: [], // 所属迭代
      belongProjectList: [], // 所属项目
      props: {
        value: 'id',
        label: 'rqmtOrntName',
        children: 'childRqmtOrnts',
        multiple: true
      }
    }
  },
  watch: {
    value: {
      handler(newV, old) {
        this.form_query = newV
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.showRequirementEnum()
  },
  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() : ''
      if (requirementInfo.dependOnRelease === 1 && requirementInfo.referredClientType === null) {
        this.$message({ message: '跟版客户端不能为空', type: 'error', duration: 1000, offset: 150 })
        return false
      } else if (requirementInfo.dependOnRelease === 0) {
        requirementInfo.referredClientType = null
      }
      if (requirementInfo.referredClientType !== null) {
        requirementInfo.referredClientType = requirementInfo.referredClientType.join()
      }
      const res = await updateRequirement(requirementInfo)
      if (res.code === 200) {
        this.$emit('update')
        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    jump(page, id) { // 跳转
      this.$router.push({ name: page, query: { id: id }})
    },
    async showRequirementEnum() { // 获取需求状态列表，优先级列表，需求来源
      const res1 = await projectListProject({ bizId: Number(localStorage.getItem('bizId')) })
      if (res1.code === 200) {
        this.belongProjectList = res1.data
      }
      const res4 = await iterationList({ bizId: Number(localStorage.getItem('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[0] === -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(localStorage.getItem('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 })
      }
    },
    setReferredClientType(val) {
      if (val.dis === true) {
        return false
      }
      if (val.code === -1) {
        this.appClient.map(item => {
          if (item.code !== -1) {
            this.$forceUpdate()
            item.dis = true
          }
        })
      } else {
        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)
      }
      console.log(this.appClient, '输出')
    }
  }
}
</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;
      }
    }
    .PRD-link {
      width: 50%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      color:#409EFF;
    }
  }
</style>