|
|
@@ -2,12 +2,24 @@
|
|
|
<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)'}"
|
|
|
: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" />
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
prop="type"
|
|
|
label="类型"
|
|
|
@@ -71,9 +83,10 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import Sortable from 'sortablejs'
|
|
|
import moment from 'moment'
|
|
|
import 'moment/locale/zh-cn'
|
|
|
-import { listByTask, scheduleDelete } from '@/api/projectViewDetails'
|
|
|
+import { listByTask, scheduleDelete, sortForTask } from '@/api/projectViewDetails'
|
|
|
import modifySchedule from './modifySchedule'
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -120,7 +133,27 @@ export default {
|
|
|
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
|
|
|
@@ -189,4 +222,17 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
+.sortable-tip {
|
|
|
+ height: 26px;
|
|
|
+ width: 15px;
|
|
|
+ border:1px solid rgba(0,0,0,0.15);
|
|
|
+ border-radius:2px;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-tooltip__popper.is-dark {
|
|
|
+ background:rgba(121,132,150,0.8);
|
|
|
+ color: #FFF;
|
|
|
+}
|
|
|
</style>
|
PrinceLee