<template> <el-drawer title="请选择要删除的数据" size="50%" append-to-body :visible="visible" :before-close="onClose" class="task_delete_drawer"> <!-- 任务列表 --> <div class="delete_drawertable_wrap"> <el-table ref="delete_task_table" height="75vh" :data="dataSource" tooltip-effect="dark" @selection-change="onSelect"> <el-table-column type="selection" width="55" /> <!-- <el-table-column v-for="(c, $i) in columns" :key="$i" :label="c.label" :prop="c.prop" :type="c.dataType" :formatter="formatter" /> --> <el-table-column v-for="col in columns" :key="col.key" :prop="col.key" :sortable="true" :label="col.title" min-width="120" show-overflow-tooltip align="left" > <template v-slot="{row}"> <DeeDataCell :row="row" :col="col" /> </template> </el-table-column> </el-table> </div> <!-- 提交按钮 --> <div class="drawer-footer"> <el-button @click="onClose">关 闭</el-button> <el-button type="primary" @click="openDialog">确 定</el-button> </div> <!-- 表头设置 --> <ColumnSettingPanel v-model="columns" :dialog-visible="columnSettingPanelVisible" :model-name="layoutConfig.modelName" :form-config-key="layoutConfig.key" @closeDialog="columnSettingPanelVisible = false" /> </el-drawer> </template> <script> import moment from 'moment' import ColumnSettingPanel from '@/localComponents/filterColumns' export default { name: 'DeleteTaskDrawer', components: { ColumnSettingPanel }, props: { visible: { type: Boolean, default: false }, plan: { type: Object, default: () => ({}) }, checkTaskId: { type: Array, default: () => [] }, gantt: { type: Object, default: () => null }, layoutConfig: { type: Object, default: () => { return { key: 'batchDeleteTable', modelName: 'DxPlanActivity' } } } }, data() { return { columns: [ // { label: '任务名称', prop: 'name' }, // { label: '编号', prop: 'no' }, // { label: '计划开始', prop: 'startDate', dataType: 'Date' }, // { label: '计划完成', prop: 'finishDate', dataType: 'Date' }, // { label: '任务主管', prop: 'managedBy.userName' }, // { label: '主管部门', prop: 'managedOrg.orgName' }, // { label: '负责人', prop: 'ownedBy.userName' }, // { label: '负责部门', prop: 'ownedOrg.orgName' } ], columnSettingPanelVisible: false, checkedTasks: [], dataSource: [] } }, watch: { visible: { immediate: true, handler(v) { v && this.loadData() } } }, methods: { onClose() { this.$emit('update:visible', false) }, openDialog() { if (this.checkedTasks.length === 0) { return this.$message.warning('请选择数据') } this.$emit('confirm', this.checkedTasks.map(m => m.id)) }, onSelect(items) { this.checkedTasks = items }, loadData() { if (this.checkTaskId.length > 0) { this.dataSource = this.checkTaskId.map(each => this.gantt.getTask(each).pbo) // 默认全部选中 this.$nextTick(() => { this.dataSource.forEach(r => { this.$refs.delete_task_table.toggleAllSelection() }) }) } else { this.dataSource = [] } }, formatter(row, col, cellValue, index) { // console.log(row, col, cellValue, index) if (col.type === 'Date') { return moment(row[col.property]).format('YYYY-MM-DD') } else if (col.property.indexOf('.') !== -1) { const names = col.property.split('.') let val = row try { names.forEach((n, i) => { val = row }) } catch (e) { val = '' } // let val = row[names[0]] // for (let i = 1, len = names.length - 1; i <= len; i++) { // val = val[names[i]] // if ([null, undefined].includes(val) && i < len) { // val = '' // break // } // } return val } return row[col.property] } } } </script> <style lang="scss"> .task_delete_drawer{ .delete_drawertable_wrap{ width: 100%; height:calc(100% - 100px); } .drawer-footer { text-align: center; box-sizing: border-box; padding: 10px 0; } } </style>