thoth-frontend-test/src/views/projectManage/taskList/components/scheduleList.vue

<template>
  <div class="schedule-list" :class="className">
    <el-table
      :id="'schedule-'+id"
      :data="scheduleList"
      :header-cell-style="{ backgroundColor: 'rgba(232,232,232,0.4)', color: 'rgb(74, 74, 74)', fontSize: '14px', fontWeight: '500'}"
      style="width: 100%"
      show-overflow-tooltip="true"
      row-key="id"
      border
      stripe
      size="mini"
    >
      <el-table-column
        width="80"
      >
        <template>
          <el-tooltip class="item" effect="dark" content="代表移动，鼠标选中区域可以向上移动" placement="bottom">
            <div class="sortable-tip">
              <img :src="move">
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
          <div v-show="showunlock" :class="scope.row.isScheduleLocked === 0 ? 'el-icon-unlock' : 'el-icon-lock'" />
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        min-width="150"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column
        prop="seperateDaysNoHoliday"
        label="排期"
        min-width="100"

        show-overflow-tooltip
      />
      <el-table-column
        prop="dayLength"
        label="使用天数"
        width="80"
      />
      <el-table-column
        prop="peopleList"
        label="参与人员"
        min-width="100"
      />
      <el-table-column
        prop="manpower"
        label="使用人力（人日）"
        width="150"
      />
      <el-table-column
        label="关联任务"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title="关联的任务"
            width="450"
            trigger="click"
            popper-class="synchronize"
          >
            <div class="blueStr" />
            <div class="task-object-list">
              <template v-for="(item,index) in scope.row.taskObjectList">
                <div :key="'task-object'+index" class="task-item" @click="link(item.id)">
                  <span class="item-id">{{ item.taskId }}</span>
                  <span class="item-name">{{ item.name }}</span>
                  <span>{{ item.moduleInfoName }}</span>
                </div>
              </template>
            </div>
            <div v-if="scope.row.taskObjectList" slot="reference" class="point-blue">{{ scope.row.taskObjectList.length }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"

        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="showunlock">
            <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="editSchedule(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.isScheduleLocked === 0" type="text" size="small" @click="deleteSchedule(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <!-- 交付日期 排期 预计上线版本 -->
    <online-date :data="scheduleDetail" @update="listByTask(taskId)" />
    <!-- 交付日期 排期 预计上线版本 -->
    <modify-schedule
      v-if="visibleSchedule"
      :visible.sync="visibleSchedule"
      :is-delete.sync="isDelete"
      :detail-data="detailData"
      :title="DialogTitle"
      type="task"
      @update="listByTask(id)"
    />
  </div>
</template>
<script>
import { EncryptId } from '@/utils/crypto-js.js'
import { mapGetters } from 'vuex'
import Sortable from 'sortablejs'
import 'moment/locale/zh-cn'
import { listByTask, sortForTask } from '@/api/projectViewDetails'
import modifySchedule from '@/views/projectManage/projectList/components/modifySchedule'
import move from '@/assets/麻将@2x.png'
import onlineDate from '@/views/projectManage/components/onlineTime.vue'
export default {
  components: {
    modifySchedule,
    onlineDate
  },
  props: {
    id: {
      type: Number,
      default: NaN,
      required: true
    },
    typeList: {
      type: Array,
      default: () => [],
      required: false
    },
    className: {
      type: String,
      default: '',
      required: false
    },
    showunlock: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      taskId: '',
      move: move,
      scheduleList: [],
      scheduleDetail: {},
      visibleSchedule: false,
      detailData: null,
      taskScheduleEvent: [], // 排期类型
      DialogTitle: '新建排期',
      isDelete: false // 删除排期操作
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  watch: {
    id: {
      handler(newV, oldV) {
        if (newV === -1) return
        this.$nextTick(() => {
          this.listByTask(newV)
        })
      },
      immediate: true
    },
    typeList: {
      handler(newV, oldV) {
        this.scheduleList = newV
        this.taskScheduleEvent = newV
      },
      immediate: true
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector(`#schedule-${this.id} tbody`)
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.scheduleList.splice(oldIndex, 1)[0]
          _this.scheduleList.splice(newIndex, 0, currRow)
          _this.sortForTask(_this.scheduleList.map(item => item.id))
        }
      })
    },
    async sortForTask(arr) {
      const res = await sortForTask(this.id, arr)
      if (res.code === 200) {
        this.$message({ message: '移动成功', type: 'success', duration: 1000, offset: 150 })
      }
    },
    async listByTask(id) { // 获取排期列表
      this.taskId = id
      const res = await listByTask(id)
      if (res.code === 200) {
        this.scheduleList = res.data.scheduleDetailRespons || []
        this.scheduleDetail = res.data || {}
        this.scheduleList = this.scheduleList.map(item => ({
          ...item,
          peopleList: item.peopleObjectList.map(item => item.name).join('，')
        }))
        this.$emit('updataData')
      }
    },
    addSchedule() {
      this.detailData = null
      this.DialogTitle = '新建排期'
      this.visibleSchedule = true
    },
    deleteSchedule(row) { // 删除排期
      this.DialogTitle = '删除排期'
      this.isDelete = true
      this.visibleSchedule = true
      this.detailData = row
    },
    editSchedule(row) { // 编辑排期
      this.DialogTitle = '编辑排期'
      this.visibleSchedule = true
      this.detailData = row
    },
    link(id) {
      const bizId_id = EncryptId(`${this.bizId}_${id}`)
      const newTab = this.$router.resolve({ name: '任务详情', query: { bizId_id: bizId_id }})
      window.open(newTab.href, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
.add-schedule {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 20px 0;
  i {
    margin-right: 4px;
  }
  span {
    margin-right: 20px;
  }
}
.schedule-list {
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 0;
}
/deep/.el-table, .el-table__expanded-cell{
  background:rgba(248,248,248,0.6);
}
.white {
  background: #ffffff;
  .add-schedule {
    padding: 0 0 20px 0;
  }
  /deep/.el-table{
    background: #ffffff !important;
  }
}
.sortable-tip {
  height: 26px;
  width: 15px;
  border-radius:2px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 8px;
  }
}
.point-blue {
  cursor: pointer;
  color: #409EFF;
}
.task-object-list {
  width: 100%;
  height: 130px;
  overflow: scroll;
  .task-item {
    width: 100%;
    white-space: nowrap;
    color: #999999;
    margin-bottom: 5px;
    .item-id {
      padding-right: 20px;
    }
    .item-name {
      color: #333333;
      padding-right: 20px;
    }
  }
}
.task-object-list::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="less">
.synchronize {
  .el-popover__title {
    color: #333333;
    padding: 10px 20px;
  }
}
.blueStr {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 22px;
  left: 15px;
}
.el-tooltip__popper.is-dark {
  background:rgba(121,132,150,0.8);
  color: #FFF;
}
</style>