thoth-frontend-test/src/views/projectManage/iteration/details/iterationDetails.vue

<template>
  <el-container class="BackgroundCloth">
    <el-header class="public_header">
      <div class="Layout_space_between">
        <div class="Layout_space_between">
          <el-tooltip :disabled="iterationData.name && iterationData.name.length < 19 ? true : false" effect="dark" :content="iterationData.name" placement="bottom">
            <span class="themeName">迭代 : {{ iterationData.name | ellipsis }}</span>
          </el-tooltip>
          <el-select
            v-model="iterationData.status"
            class="public_botton"
            :class="{
              'status_color': iterationData.status === 0,
              'status_color1': iterationData.status === 1,
              'status_color2': iterationData.status === 2
            }"
            size="mini"
            placeholder="请选择"
            @change="changeIterationStatus(iterationData.status)"
          >
            <el-option
              v-for="item in statusArr"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="Layout_space_between" style="color: #c4c3c3;">
          <el-button size="mini" type="primary" @click="visibleplanning = true">规划迭代</el-button>
          <div class="el-icon-setting partition" @click="showIteration = true" />
          <div class="el-icon-delete LittleHand" @click="dialogVisible = true" />
        </div>
      </div>
    </el-header>
    <el-main class="public_main">
      <div class="table-wrap">
        <div class="table-box">
          <el-table
            ref="topicTable"
            :data="RequirementSet"
            size="small"
            row-key="id"
            :expand-row-keys="expands"
            :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '550', textAlign: 'center' }"
            @row-click="rowClick"
          >
            <!-- <el-table
              ref="planTable"
              :data="all_task.data.list"
              style="width: 100%;"
              :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '550', textAlign: 'center' }"
              show-overflow-tooltip="true"
              :show-header="showHeader"
              @selection-change="handleSelectionChange"
            > -->
            <el-table-column min-width="30">
              <img style="display: inline-block; width: 14px; vertical-align: middle;" :src="image_role">
            </el-table-column>
            <el-table-column type="selection" min-width="30" align="center" />
            <el-table-column type="expand" min-width="25" label-class-name="use">
              <template slot-scope="props">
                <el-table
                  :data="tableData"
                  size="small"
                  row-key="id"
                  align="left"
                  :header-cell-style="{ color: '#4A4A4A', fontSize: '14px', fontWeight: '550', textAlign: 'center' }"
                >
                  <el-table-column label="优先级">
                    <span>{{ props.row.priorityName }}</span>
                  </el-table-column>
                  <el-table-column label="需求名称">
                    <span>{{ props.row.name }}</span>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <!-- <el-table-column min-width="20" align="center">
              <div class="el-icon-plus" />
            </el-table-column> -->
            <el-table-column label="优先级" min-width="80" align="center">
              <template v-slot="scope">
                <div align="center">
                  <div
                    class="iteration_back"
                    :class="{
                      'priority_color': scope.row.priority === 0,
                      'priority_color1': scope.row.priority === 1,
                      'priority_color2': scope.row.priority === 2,
                      'priority_color3': scope.row.priority === 3,
                      'priority_color4': scope.row.priority === 4,
                      'priority_color5': scope.row.priority === 5,
                      'priority_color6': scope.row.priority === 6

                    }"
                  >
                    {{ scope.row.priorityName }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="需求名称" min-width="250" show-overflow-tooltip align="left">
              <template v-slot="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="100" show-overflow-tooltip align="center">
              <template v-slot="scope">
                <el-select
                  v-model="scope.row.status"
                  :class="{
                    'status_color': scope.row.status === 0,
                    'status_color1': scope.row.status === 1,
                    'status_color3': scope.row.status === 3,
                    'status_color4': scope.row.status === 5,
                    'status_color2': scope.row.status === 9
                  }"
                  class="public_botton"
                  size="mini"
                  @change="updateRequirementStatus(scope.row)"
                >
                  <el-option v-for="item in requiredArray" :key="item.code" :label="item.msg" :value="item.code" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="PM" min-width="100" show-overflow-tooltip align="center">
              <template v-slot="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="需求来源" min-width="100" show-overflow-tooltip align="center">
              <template v-slot="scope">
                {{ scope.row.belongingProjectName }}
              </template>
            </el-table-column>
            <el-table-column label="跟版客户端" min-width="100" show-overflow-tooltip align="center">
              <template v-slot="scope">
                {{ scope.row.belongingProjectName }}
              </template>
            </el-table-column>
            <el-table-column label="PRD链接" min-width="100" show-overflow-tooltip align="center">
              <template v-slot="scope">
                {{ scope.row.mrdUrl }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-main>
    <el-footer class="public_footer" />
    <!-- 删除 dialog -->
    <iteration-delete :show.sync="dialogVisible" :iteration-id="iterationId" />
    <!-- 迭代配置 dialog -->
    <iteration-create title="迭代配置" width="60%" :show.sync="showIteration" :iterations="iterationData" @iteratioFilter="iteratioFilter" />
    <!-- 规划迭代 dialog -->
    <planning-iteration :show.sync="visibleplanning" :iteration-id="iterationId" />
  </el-container>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import iterationDelete from '@/views/projectManage/iteration/components/delete.vue'
import iterationCreate from '@/views/projectManage/iteration/components/create.vue'
import planningIteration from '@/views/projectManage/iteration/components/PlanningIteration.vue'
import Sortable from 'sortablejs'
import image_role from '@/assets/麻将@2x.png'
import { iterationList, iterationUpdate, iterationRequire } from '@/api/iteration.js'
import { showRequirementEnum, updateRequirementStatus } from '@/api/requirement.js'
export default {
  components: {
    iterationDelete,
    iterationCreate,
    planningIteration
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0, 20) + '...'
      }
      return value
    }
  },
  data() {
    return {
      image_role: image_role,
      statusArr: [{ value: 0, name: '未开始' }, { value: 1, name: '进行中' }, { value: 2, name: '已完成' }],
      dialogVisible: false, // 删除（弹窗）
      showIteration: false, // 编辑迭代（弹窗）
      visibleplanning: false, // 规划迭代（弹窗）
      requiredArray: [], // 需求状态
      tableData: [
        {
          id: '1',
          priority: 2,
          priorityName: 'P2',
          status: 0,
          name: '赵捷',
          mrdUrl: 'www.baidu.com',
          belongingProjectName: '上海市普陀区金沙江路 101 弄'
        },
        {
          id: '2',
          priority: 1,
          priorityName: 'P1',
          status: 0,
          name: '秦志鹏',
          mrdUrl: 'www.baidu.com',
          belongingProjectName: '上海市普陀区金沙江路 102 弄'
        },
        {
          id: '3',
          priority: 1,
          priorityName: 'P1',
          status: 0,
          name: '廖子君',
          mrdUrl: 'www.baidu.com',
          belongingProjectName: '上海市普陀区金沙江路 103 弄'
        },
        {
          id: '4',
          priority: 1,
          priorityName: 'P1',
          status: 0,
          name: '王子乾',
          mrdUrl: 'www.baidu.com',
          belongingProjectName: '上海市普陀区金沙江路 104 弄'
        }
      ],
      expands: [],
      RequirementSet: [], // 迭代下的需求
      iterationId: this.$route.query.id, // 当前迭代的id
      iterationData: {}
    }
  },
  mounted() {
    this.iteratioFilter()
    this.rowDrop()
    this.setLabel()
  },
  methods: {
    async iteratioFilter() {
      const list = iterationList({ id: this.iterationId, curIndex: 1, pageSize: 15 })
      const requiredList = iterationRequire({ id: Number(this.iterationId), curIndex: 1, pageSize: 50 })
      const requirementEnum = showRequirementEnum()
      const listRes = await list
      const listRequire = await requiredList
      const requiredstatus = await requirementEnum
      this.iterationData = listRes.data.list[0]
      this.RequirementSet = listRequire.data.right.list
      this.requiredArray = requiredstatus.data.requirementStatus
    },
    changeIterationStatus(e) { // 修改状态
      iterationUpdate({ status: e, id: this.iterationData.id, name: this.iterationData.name }).then(res => {
        this.$message({ showClose: true, message: res.msg, type: 'success' })
        this.iteratioFilter()
      })
    },
    setLabel() {
      const _this = this
      this.$nextTick(() => {
        const cellDiv = document.getElementsByClassName('cell use')[0]
        cellDiv.setAttribute('style', 'cursor:pointer')
        const node = document.createElement('i')
        node.setAttribute('class', 'el-icon el-icon-arrow-right')
        node.setAttribute('id', 'ICON')
        node.setAttribute('isExpand', 'no') // 设置属性is-expand的值
        node.onclick = function() {
          // eslint-disable-next-line no-useless-call
          _this.cellDivClick.call(_this, node)
        }
        cellDiv.appendChild(node)
      })
    },
    updateRequirementStatus(val) {
      console.log(val, 'ddddd')
      const modifier = localStorage.getItem('username')
      updateRequirementStatus({ id: val.id, status: val.status, modifier: modifier }).then(res => {
        if (res.code === 200) {
          this.iteratioFilter()
        } else {
          this.$message.warning(res.msg)
        }
      }
      )
    },
    cellDivClick(ele) {
      console.log(ele)
      const expandState = ele.getAttribute('isExpand') // 获取属性is-expand的值
      // 关闭的情况点击
      if (expandState === 'no') {
        // 展开
        const $table = this.$refs.topicTable
        $table.data.map(item => {
          $table.toggleRowExpansion(item, true)
        })
        ele.setAttribute('class', 'el-icon el-icon-arrow-down')
        ele.setAttribute('isExpand', 'yes')
      } else if (expandState === 'yes') {
        // 展开的情况点击关闭
        const $table = this.$refs.topicTable
        $table.data.map(item => {
          $table.toggleRowExpansion(item, false)
        })
        ele.setAttribute('class', 'el-icon el-icon-arrow-right')
        ele.setAttribute('isExpand', 'no')
      }
    },
    // 在<table>里，我们已经设置row的key值设置为每行数据id：row-key="id"
    rowClick(row, event, column) {
      console.log(row, event, column, 'cdcscsccc')
      if (this.expands.indexOf(row.id) < 0) {
        this.expands = ['1', '2', '3', '4']
      } else {
        this.expands = []
      }
      console.log(this.expands, 'dsc')
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.BackgroundCloth {

.themeName {
  font-size: 20px;
  font-family: MicrosoftYaHei;
  color: rgb(51, 59, 74);
  white-space: nowrap;
  padding: 0 15px;
}

.el-header {
    padding: 20px;
}

.iteration_back {
  border-radius: 4px;
  width: 33px;
  color: #FFF;
}

.partition {
    border-left: 1px solid #c4c3c3;
    border-right: 1px solid #c4c3c3;
    line-height: 26px;
    width: 35px;
    text-align: center;
    margin: 0 10px;
    cursor: pointer;
}

.LittleHand {
cursor: pointer;
}

}

</style>