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

<template>
  <div class="schedule-list" :class="className">
    <!-- <el-col align="right" class="add-schedule"><span @click="addSchedule()"><i class="el-icon-circle-plus-outline" />添加排期</span></el-col> -->
    <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'}"
      :row-style="{'background-color': 'transparent'}"
      style="width: 100%"
      show-overflow-tooltip="true"
      row-key="id"
    >
      <el-table-column
        width="80"
        align="center"
      >
        <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"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
          <img class="public_image" :src="scope.row.isScheduleLocked === 0 ? Unlock : 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="200"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dayLength"
        label="时长"
        width="50"
        align="center"
      />
      <el-table-column
        prop="peopleList"
        label="参与人员"
        min-width="100"
        align="center"
      />
      <el-table-column
        label="操作"
        width="200"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <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>
        </template>
      </el-table-column>

    </el-table>
    <div class="bottom-detail">
      <el-row>排期总汇：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }}</el-row>
      <el-row v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length>0">
        <el-col :span="2">预计上线版本：</el-col>
        <el-col :span="6">
          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}</span><br>
        </el-col>
      </el-row>
      <el-row v-else>预计上线版本：</el-row>
    </div>
    <modify-schedule
      v-if="visibleSchedule"
      :visible.sync="visibleSchedule"
      :is-delete.sync="isDelete"
      :detail-data="detailData"
      :title="DialogTitle"
      @update="listByTask(id)"
    />
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { listByTask, sortForTask } from '@/api/projectViewDetails'
import modifySchedule from './modifySchedule'
import move from '@/assets/麻将@2x.png'
import lock from '@/assets/lock.png' // 排期锁定图标
import Unlock from '@/assets/Unlock.png' // 排期锁定图标
export default {
  components: {
    modifySchedule
  },
  filters: {
    handlerDate(val) {
      return val ? moment(val).format('YYYY-MM-DD') : ''
    }
  },
  props: {
    id: {
      type: Number,
      default: NaN,
      required: true
    },
    typeList: {
      type: Array,
      default: () => [],
      required: false
    },
    className: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      Unlock: Unlock, // 解锁排期
      lock: lock, // 锁定排期
      move: move,
      scheduleList: [],
      scheduleDetail: {},
      visibleSchedule: false,
      detailData: null,
      taskScheduleEvent: [], // 排期类型
      DialogTitle: '新建排期',
      isDelete: false // 删除排期操作
    }
  },
  watch: {
    id: {
      handler(newV, oldV) {
        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 })
      }
    },
    // getType(value) {
    //   const res = this.taskScheduleEvent.find(item => item.code === value) || {}
    //   return res.msg
    // },
    async listByTask(id) { // 获取排期列表
      const res = await listByTask(id)
      if (res.code === 200) {
        this.scheduleList = res.data.schedulDetailResponses
        this.scheduleDetail = res.data || {}
        this.scheduleList = this.scheduleList.map(item => ({
          ...item,
          peopleList: item.peopleObjectList.map(item => item.name).join('，')
        }))
      }
    },
    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
    }
  }
}
</script>
<style lang="scss" 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;
  background:rgba(248,248,248,0.6);
}
>>>.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;
  }
}
.bottom-detail {
  font-size: 14px;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 20px 0;
  :first-child {
    margin-bottom: 10px;
  }
}
.sortable-tip {
  height: 26px;
  width: 15px;
  border-radius:2px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 8px;
  }
}
</style>
<style>
.el-tooltip__popper.is-dark {
  background:rgba(121,132,150,0.8);
  color: #FFF;
}
</style>