thoth-frontend-test/src/views/projectManage/projectList/projectViewDetails.vue

<template>
  <div class="bg-project" @click="display = false">
    <el-container>
      <el-header class="main-header">
        <div class="top-page-title">
          <div class="header-title">
            <span class="title-id">PROJECT-{{ form_query.id }}</span>
            <el-tooltip class="item" effect="dark" :content="form_query.name" placement="bottom">
              <span
                v-clipboard:copy="form_query.name"
                v-clipboard:success="copyName"
                class="title-name"
              >{{ form_query.name }}</span>
            </el-tooltip>
          </div>
          <el-dropdown placement="bottom" @command="handleCommand">
            <el-button size="mini" plainclass="el-dropdown-link drop_down">
              {{ form_query.statusString }}
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" align="center">
              <el-dropdown-item
                v-for="item in arr_status"
                :key="item.value"
                :command="{value:item.value,label:item.name}"
                :disabled="form_query.statusString === item.name? true: false"
              >{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="top-tabs">
          <el-tabs v-model="activeName">
            <el-tab-pane label="概览" name="1" />
            <el-tab-pane label="需求" name="2" />
            <el-tab-pane label="任务" name="3" />
            <el-tab-pane label="缺陷" name="4" />
            <el-tab-pane label="统计" name="5" />
          </el-tabs>
        </div>
        <div class="top-control">
          <el-dropdown placement="bottom">
            <i class="el-icon-circle-plus icon-add" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="need_open = true">新建需求</el-dropdown-item>
              <el-dropdown-item @click.native="reated_task()">新建任务</el-dropdown-item>
              <el-dropdown-item @click.native="created_bug()">新建缺陷</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="line" />
          <span style="vertical-align: bottom; cursor: pointer; color: #6F7C93;" @click.stop="setChild(), display = true"><img style="width: 20px; display: inline-block;" :src="image_url">&nbsp; {{ num }} &nbsp;</span>
          <div class="line" />
          <i class="el-icon-setting icon-delete" @click="modify_project = true" />
          <div class="line" />
          <i class="el-icon-delete icon-delete" @click="deleteVisible = true" />
        </div>
      </el-header>
      <!-- 概览 -->
      <el-container v-show="activeName === '1'" class="is-vertical">
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">基础信息</div>
          </div>
          <div class="detail-info">
            <el-form :inline="true" :model="form_query" class="demo-form-inline" label-position="left" label-width="100px">
              <el-form-item label="项目负责人：">
                <search-people :value.sync="form_query.projectOwner" :clearable="false" @change="changeArea" />
              </el-form-item>
              <el-form-item label="产品负责人：">
                <search-people :value.sync="form_query.pmOwner" @change="changeArea" />
              </el-form-item>
              <el-form-item label="开发负责人：">
                <search-people :value.sync="form_query.rdOwner" @change="changeArea" />
              </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="测试负责人：">
                <search-people :value.sync="form_query.testOwner" @change="changeArea" />
              </el-form-item>
              <el-form-item label="项目类型：">
                <el-select v-model="form_query.projectTypeStr" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="item in arr_prjectType" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="业务线：" class="module">
                {{ form_query.bizStr }}
              </el-form-item>
              <el-form-item label="优先级：">
                <el-select v-model="form_query.priorityStr" size="small" filterable placeholder="请选择" @change="changeArea">
                  <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">项目描述</div>
          </div>
          <div>
            <text-area :id="'pro-desc'" :value.sync="form_query.description" :empty-text="'点击'" :input-button="'添加描述'" @change="changeArea" />
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">项目总目标</div>
          </div>
          <div>
            <text-area :id="'pro-target'" :value.sync="form_query.target" :empty-text="'您还没有设定目标，'" :input-button="'立即添加'" @change="changeArea" />
          </div>
        </section>
        <section class="main-section">
          <div class="el-main-title">
            <div class="title-left-icon" />
            <div class="title-left-name">项目里程碑</div>
          </div>
          <div>
            <mile-stone :values-list.sync="project_Milepost" @change="get_list" />
          </div>
        </section>
      </el-container>
      <!-- 概览 -->
      <!-- 需求 -->
      <el-container v-if="activeName === '2'">
        <section class="main-section contain">
          <needs-list ref="needs-list" />
        </section>
      </el-container>
      <!-- 需求 -->
      <!-- 任务 -->
      <el-container v-if="activeName === '3'" class="is-vertical">
        <section class="main-section contain">
          <tasks-list />
        </section>
      </el-container>
      <!-- 任务 -->
      <!-- 缺陷 -->
      <el-container v-if="activeName === '4'" class="is-vertical">
        <section class="main-section contain">
          <bugTableDialog ref="bugTableDialog" :obj-id="{ projectId: Number(this.$route.query.id) }" />
        </section>
      </el-container>
      <!-- 缺陷 -->
      <!-- 统计 -->
      <el-container v-if="activeName === '5'" class="is-vertical">
        <section class="main-section contain">
          <data-statistics @change="get_list" />
        </section>
      </el-container>
      <!-- 统计 -->
      <!-- 删除 -->
      <el-dialog :visible.sync="deleteVisible" title="删除确认" class="public_task" width="30%" :close-on-click-modal="false">
        <div class="blueStripe" />
        <div align="center">确定要删除此 {{ form_query.name }} 项目吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="deleteVisible = false">关 闭</el-button>
          <el-button size="mini" type="primary" @click="delete_project()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 弹窗 -->
      <openDialog v-if="task_open" ref="task_createdUpdata" :no-jump="true" @change="reloadList" />
      <createdBug v-if="bug_open" ref="createdBug" @reloadList="reloadList" />
      <requirement-create
        class="diologPadding"
        title="新建需求"
        :data="requirement"
        :visible="need_open"
        @cancel="closeDioang()"
        @confirm="need_open=false"
      />
      <drawer
        ref="drawer"
        title="项目成员"
        center
        :display.sync="display"
        width="28%"
        :delete="form_query"
        :types="false"
        :inner="true"
        :mask="false"
        @childValInput="childVal"
        @click.stop
      />
      <modify-project :show.sync="modify_project" @change="get_list" />
    </el-container></div>
</template>
<script>
const _ = require('lodash')
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
import {
  projectList,
  projectUpdate,
  mileStoneList,
  projectDelete
} from '@/api/projectIndex'
import searchPeople from '@/components/select/searchPeople'
import textArea from '@/components/input/textArea'
import mileStone from './components/mileStone'
import dataStatistics from './components/dataStatistics'
import tasksList from './components/taskList'
import needsList from './components/needsList'
import modifyProject from './components/modifyProject'
import openDialog from '@/views/projectManage/dialog_vue'
import Utils from '../../../util.js'
import RequirementCreate from '@/views/projectManage/requirement/list/create'
import createdBug from '@/views/projectManage/bugList/file/createdBug'
import '@/views/projectManage/projectList/css/index.css'
import drawer from '@/views/projectManage/Drawer'
import image_url from '@/assets/home_images/home_u.png'
import bugTableDialog from '@/views/projectManage/bugList/details/bugTableDialog' // 缺陷表格
import '@/styles/PublicStyle/index.scss'
export default {
  components: {
    openDialog,
    RequirementCreate,
    createdBug,
    drawer,
    searchPeople,
    textArea,
    mileStone,
    dataStatistics,
    tasksList,
    needsList,
    modifyProject,
    bugTableDialog
  },
  filters: {
    ellipsis(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  data() {
    return {
      activeName: '1', // 顶部tab切换
      num: '',
      image_url: image_url,
      display: false,
      bug_open: false, // 弹窗（新建）
      task_open: false,
      pauseDescription: '',
      need_open: false, // 需求
      arr_status: [
        { value: 0, name: '未开始' },
        { value: 1, name: '进行中' },
        { value: 2, name: '已完成' }
      ],
      arr_priority: [
        { value: 0, name: 'P0' },
        { value: 1, name: 'P1' },
        { value: 2, name: 'P2' },
        { value: 3, name: 'P3' }
      ],
      arr_prjectType: [
        { value: 0, name: '业务/产品' },
        { value: 1, name: '技术升级/技术优化/技术FT' },
        { value: 2, name: '测试优化/测试FT' }
      ],
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      textarea: '', // 项目总目标
      projectId: Number(this.$route.query.id), // 项目id
      form_query: {},
      modify_project: false,
      deleteVisible: false, // 删除项目弹框
      user: {},
      project_Milepost: [],
      requirement: {}
    }
  },
  created() {
    this.get_list()
    this.initRequirementCreateDialog()
    this.$store.state.data.status = true
    // this.$store.state.data.bizId = true
  },
  destroyed() {
    this.$store.state.data.status = false
    // this.$store.state.data.bizId = false
  },
  methods: {
    async changeArea(e) { // area修改
      const projectInfo = _.cloneDeep(this.form_query)
      const res = await projectUpdate({ projectInfo, user: this.user })
      if (res.code === 200) {
        this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    childVal(val) {
      this.num = val
    },
    initRequirementCreateDialog() { // 初始化新建需求弹框
      this.requirement.belongingProject = this.projectId // 这里传入项目id
      this.requirement.bizId = localStorage.getItem('bizId') // 这里传入业务线id
      this.requirement.dependOnRelease = 0 // 这里传入是否依赖发版
    },
    closeDioang() { // 关闭新建需求弹框
      this.need_open = false
      this.get_list()
      this.initRequirementCreateDialog()
      this.reloadList()
    },
    async get_list() {
      // 获取项目ID（查询）
      this.user = { name: this.userNames, ename: this.userInformation, id: '' }
      this.projectId = this.$route.query.id
      this.get_project_detail()
      this.get_project_Milepost()
    },
    async get_project_detail() { // 获取项目详情
      const res = await projectList({ id: this.projectId })
      if (res.code === 200) {
        if (res.data[0].bizId !== Number(localStorage.getItem('bizId'))) {
          Utils.$emit('demo', res.data[0].bizId)
        }
        this.form_query = res.data[0]
        this.project_from = res.data[0]
        this.form_query.status === 0 ? this.$set(this.form_query, 'statusString', '未开始') : ''
        this.form_query.status === 1 ? this.$set(this.form_query, 'statusString', '进行中') : ''
        this.form_query.status === 2 ? this.$set(this.form_query, 'statusString', '已完成') : ''
      }
    },
    async get_project_Milepost() {
      const res = await mileStoneList({ projectId: this.projectId })// 里程碑时间排序
      if (res.code === 200) {
        this.project_Milepost = res.data.map(item => ({ ...item, date: item.mtime }))
        this.project_Milepost.sort((a, b) => {
          return Date.parse(a.mtime) - Date.parse(b.mtime)// 时间正序
        })
      }
    },
    async delete_project() {
      const res = await projectDelete(this.form_query.id, {})
      if (res.code === 200) {
        this.deleteVisible = false
        this.$router.push({ name: '项目', query: {}})
      }
    },
    setChild() { // 设置成员
      this.$refs.drawer.getRoleList()
    },
    created_bug() {
      this.bug_open = true
      this.$nextTick(() => {
        this.$refs.createdBug.init(1)
      })
    },
    handleCommand(command) {
      // 修改状态
      this.$set(this.form_query, 'statusString', command.label)
      this.project_from.status = command.value
      const projectInfo = this.project_from
      const user = this.user
      projectUpdate({ projectInfo, user }).then(res => {
        if (res.code === 200) {
          this.$message({ message: '修改成功', type: 'success', duration: 1000, offset: 150 })
        }
      })
    },
    reated_task(e) { // 新建任务
      this.task_open = true
      this.$nextTick(() => {
        this.$refs.task_createdUpdata.init(2)
      })
    },
    reloadList() {
      this.get_project_detail()
      if (this.$refs['bugTableDialog']) {
        this.$refs['bugTableDialog'].bugGetTableList()
      }
      if (this.$refs['data-statistics']) {
        this.$refs['data-statistics'].getRequireSumData()
      }
      if (this.$refs['tasks-list']) {
        this.$refs['tasks-list'].get_allTask()
      }
      if (this.$refs['needs-list']) {
        this.$refs['needs-list'].getNeedsList()
      }
    },
    copyName(name) { // 复制名字
      this.$message({ message: '复制成功', type: 'success', duration: 1000, offset: 150 })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/detail-pages.scss';
/deep/.el-button {
  cursor: pointer;
}
@include hide-open-header;
.bg-project {
  @include bg-project;
}
.main-header {
  @include main-header;
  .title-name {
    cursor: pointer;
  }
}
.main-header::after {
  @include main-header-after;
}
.contain {
  height: calc(100vh - 140px);
  overflow: scroll;
}
.main-section {
  @include main-section;
  .detail-info {
    padding: 0 34px 20px 34px;
    /deep/.el-input__inner{
      border: 1px solid rgba(220,223,230,0)
    }
    /deep/.el-input__inner:hover{
      border: 1px solid rgba(220,223,230,1)
    }
    /deep/.is-focus .el-input__inner {
      border: 1px solid #409EFF;
    }
    /deep/.el-select{
      .el-input__suffix-inner {
        visibility: hidden;
      }
    }
    /deep/.el-select:hover{
      .el-input__suffix-inner {
        visibility: visible;
      }
    }
    .demo-form-inline {
      .el-form-item {
        width: 33%;
        margin-right: 0;
      }
    }
  }
}
>>>.el-input--small {
  font-size: 14px;
}
</style>