thoth-frontend-test/src/views/projectManage/iteration/components/iterationTable.vue

<template>
  <div class="schedule-list">
    <!-- <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="{'background-color': 'rgba(232,232,232,0.4)'}"
      style="width: 100%"
      show-overflow-tooltip="true"
      row-key="id"
      border
      stripe
    >
      <!-- <el-table-column
        width="80"

      >
        <template>
          <el-tooltip class="item" effect="dark" content="代表移动，鼠标选中区域可以向上移动" placement="bottom">
            <div class="sortable-tip">
              <img :src="imgUrl" alt="">
            </div>
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="type"
        label="类型"
        min-width="80"
      >
        <template slot-scope="scope">
          {{ getType(scope.row.type) }}
          <div :class="scope.row.isScheduleLocked === 1 ? 'el-icon-lock' : 'el-icon-unlock'" />
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        min-width="200"

        show-overflow-tooltip
      />
      <el-table-column
        prop="seperateDaysNoHoliday"
        label="排期"
        min-width="100"

        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="操作"
        min-width="150"

        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 imgUrl from '@/assets/麻将@2x.png'
import { scheduleListByRequire } from '@/api/iteration.js'
import { sortForTask } from '@/api/projectViewDetails'
import modifySchedule from './modifySchedule'
// import 'ant-design-vue/dist/antd.css'
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
    }
  },
  data() {
    return {
      imgUrl: imgUrl,
      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.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 scheduleListByRequire(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;
  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;
}
>>>.el-table, .el-table__expanded-cell{
  background:rgba(248,248,248,0.6);
}
.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;
//   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>