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

<template>
  <div class="white">
    <el-table
      :id="'schedule-'+id"
      :data="scheduleList"
      show-overflow-tooltip="true"
      :show-header="false"
      :cell-class-name="addClass"
      row-key="id"
      border
      style="min-height: 90px;"
      size="mini"
      :class="{'ignore-elements': dondrop }"
    >
      <el-table-column prop="type" label="类型" min-width="70">
        <template slot-scope="scope">
          {{ scope.row.name }}
          <div :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="160" show-overflow-tooltip />
      <el-table-column prop="dayLength" label="时长" min-width="50" />
      <el-table-column prop="peopleList" label="参与人员" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.peopleObjectList" :key="index" class="Layout_flex_start">{{ item.name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <div class="btn-style">
            <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>
    <modify-schedule
      v-if="visibleSchedule"
      :visible.sync="visibleSchedule"
      :select-task-list="selectTaskList"
      :is-delete.sync="isDelete"
      :detail-data="detailData"
      :title="DialogTitle"
      @update="listByTask(id)"
    />
  </div>
</template>
<script>
import Sortable from 'sortablejs'
import { sortForTask } from '@/api/projectViewDetails'
import modifySchedule from '@/views/projectManage/requirement/components/modifySchedule.vue'
import '@/styles/PublicStyle/index.scss' // 通用css
export default {
  components: {
    modifySchedule
  },
  props: {
    id: {
      type: Number,
      default: NaN,
      required: true
    },
    locking: {
      type: Boolean,
      required: true
    },
    selectTaskList: { // 已选任务列表
      type: Array,
      default: () => [],
      required: false
    },
    requiredList: {
      type: Array,
      default: () => [],
      required: false
    },
    typeList: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      scheduleList: [],
      scheduleDetail: {},
      visibleSchedule: false,
      detailData: null,
      dondrop: true,
      taskScheduleEvent: [], // 排期类型
      DialogTitle: '新建排期',
      isDelete: false // 删除排期操作
    }
  },
  watch: {
    locking: {
      handler(newV, oldV) {
        this.dondrop = !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, {
        disabled: _this.dondrop,
        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) { // 获取排期列表
      this.$emit('listByTask')
    },
    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
    },
    addClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 5) {
        return 'cell-greys'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.white {
  background: #ffffff;
  .add-schedule {
    padding: 0 0 20px 0;
  }
  /deep/.el-table{
    background: #ffffff !important;
  }
}
.btn-style {
 >>> .el-button {
    padding: 0;
  }
}
.add-schedule {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
  margin: 0 20px;
  padding: 20px 0;
  i {
    margin-right: 4px;
  }
  span {
    margin-right: 20px;
  }
}
>>>.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;
  justify-content: center;
  align-items: center;
  img {
    width: 8px;
  }
}
</style>
<style>
 .cell-greys .cell {
   margin-left: 10px !important;
 }
.el-tooltip__popper.is-dark {
  background:rgba(121,132,150,0.8);
  color: #FFF;
}
</style>