thoth-frontend-test/src/views/projectManage/requirement/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'}"
      show-overflow-tooltip="true"
      row-key="id"
      border
      stripe
      size="mini"
    >
      <el-table-column v-if="noMove" 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="类型" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
          <div v-show="showunlock" :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" />
        </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" show-overflow-tooltip />
      <el-table-column prop="dayLength" label="时长" min-width="50" />
      <el-table-column prop="peopleList" label="参与人员" min-width="150" />
      <el-table-column label="操作" width="200">
        <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>
    <div class="bottom-detail">
      <el-row>交付日期：{{ scheduleDetail.endTime }}</el-row>
      <el-row>排期：{{ scheduleDetail.startTime | handlerDate }} ~ {{ scheduleDetail.endTime | handlerDate }}</el-row>
      <el-row v-if="scheduleDetail.preOnlineVersion && scheduleDetail.preOnlineVersion.length>0">
        <el-col :span="2" style="width: 100px">预计上线版本：</el-col>
        <el-col :span="6">
          <span v-for="item in scheduleDetail.preOnlineVersion" :key="item">{{ item }}<br></span>
        </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 { listByRequire } from '@/api/requirement.js'
import { listByTask, sortForTask } from '@/api/projectViewDetails'
import modifySchedule from './modifySchedule'
import move from '@/assets/麻将@2x.png'
import '@/styles/PublicStyle/index.scss' // 通用css
export default {
  components: {
    modifySchedule
  },
  filters: {
    handlerDate(val) {
      return val ? moment(val).format('YYYY-MM-DD') : ''
    }
  },
  props: {
    id: {
      type: Number,
      default: NaN,
      required: true
    },
    all: {
      type: Boolean,
      default: false,
      required: false
    },
    requiredList: {
      type: Array,
      default: () => [],
      required: false
    },
    typeList: {
      type: Array,
      default: () => [],
      required: false
    },
    className: {
      type: String,
      default: '',
      required: false
    },
    noMove: {
      type: Boolean,
      default: true,
      required: false
    },
    showunlock: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      move: move,
      scheduleList: [],
      scheduleDetail: {},
      visibleSchedule: false,
      detailData: null,
      taskScheduleEvent: [], // 排期类型
      DialogTitle: '新建排期',
      isDelete: false // 删除排期操作
    }
  },
  watch: {
    id: {
      handler(newV, oldV) {
        this.listByTask(newV)
      },
      immediate: true
    },
    requiredList: {
      handler(newV, oldV) {
        this.scheduleList = newV
      },
      immediate: true
    },
    typeList: {
      handler(newV, oldV) {
        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 = this.all ? await listByRequire(id) : 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('，')
        }))
      }
    },
    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;
  margin: 0 20px;
  padding: 20px 0;
  i {
    margin-right: 4px;
  }
  span {
    margin-right: 20px;
  }
}
.schedule-list {
  margin: 0 20px;
  padding: 0;
}
>>>.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;
 :nth-child(2) {
    margin: 10px 0;
  }
}
.sortable-tip {
  height: 26px;
  width: 15px;
  border-radius:2px;
  margin: auto;
  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>