taskBatchApprovalDrawer.vue 5.03 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
<template>
  <el-drawer class="task_approval_drawer" title="批量审批" size="50%" append-to-body :visible="visible" :direction="direction" :before-close="onClose">
    <!-- 任务列表 -->
    <div class="approval_drawertable_wrap">
      <el-table :data="dataSource" tooltip-effect="dark" height="75vh" @selection-change="onSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column v-for="(c, $i) in columns" :key="$i" :show-overflow-tooltip="true" :label="c.label" :prop="c.prop" :type="c.dataType" :formatter="formatter" />
      </el-table>
    </div>

    <!-- 批量签审弹框 -->
    <TaskCheckModal
      operation-name="计划任务提交审批"
      :visible.sync="visibleTaskModal"
      :checked-tasks="checkedTasks"
      @ok="onOk"
    />
    <!-- 提交按钮 -->
    <div class="drawer-footer">
      <el-button @click="onClose">关 闭</el-button>
      <el-button type="primary" @click="openDialog">确 定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import moment from 'moment'
import TaskCheckModal from '@/localComponents/taskCheckModal'
export default {
  name: 'TaskBatchApprovalDrawer',
  components: {
    TaskCheckModal
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    plan: {
      type: Object,
      default: () => null
    },
    // 年度计划任务对象,数据格式:{ id: 111111111111, year: 2021 }
    planYear: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      dataSource: [],
      columns: [
        { label: '任务名称', prop: 'name' },
        { label: '计划开始', prop: 'startDate', dataType: 'Date' },
        { label: '计划完成', prop: 'finishDate', dataType: 'Date' },
        { label: '任务主管', prop: 'managedBy.userName' },
        { label: '主管部门', prop: 'managedOrgName', formatter: (row, column) => {
          if (!row.managedBy.organizations || row.managedBy.organizations.length === 0) {
            return ''
          }
          const orgObj = row.managedBy.organizations.find(eve => eve.orgType === 'ORGANIZATION')
          if (!orgObj) {
            return ''
          }
          return orgObj.orgName
        } },
        { label: '负责人', prop: 'ownedBy.userName' },
        { label: '负责部门', prop: 'ownedOrgName', formatter: (row, column) => {
          if (!row.ownedBy.organizations || row.ownedBy.organizations.length === 0) {
            return ''
          }
          const orgObj = row.ownedBy.organizations.find(eve => eve.orgType === 'ORGANIZATION')
          if (!orgObj) {
            return ''
          }
          return orgObj.orgName
        } }
      ],
      taskService: this.$getService('DxWorkflowPlanActivityView'),
      visibleTaskModal: false,
      checkedTasks: []
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(v) {
        v && this.loadData()
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onOk() {
      this.onClose()
      // 后面参数表示是否为年度计划
      this.$emit('refresh', this.planYear && this.planYear.year)
    },
    openDialog() {
      if (this.checkedTasks.length === 0) {
        return this.$message.warning('请选择任务')
      }
      this.visibleTaskModal = true
    },
    onSelect(items) {
      this.checkedTasks = items
    },
    loadData() {
      const filter = this.taskService.newSearchItems()
        .eq('planState', /* 项目状态为进行中 */'进行中')
        .in('state', /* 任务状态为编制、驳回 */['编制', '驳回'])
        .eq('taskAssignee', /* 任务处理人为当前用户 */localStorage.getItem('userId'))
        .eq('planId', this.plan.id)
      // 如果是年度计划任务则需要添加 planYear 过滤条件,查出当前年度计划的任务
      if (this.planYear && this.planYear.year) {
        filter.eq('planYear', this.planYear.year)
        // 先去掉此条件,后台接口待处理
        // filter.ne('isYear', true)
      }
      this.taskService
        .query(filter)
        .openProp(['plan', 'managedOrg', 'managedBy', 'ownedBy', 'ownedOrg'])
        .search()
        .then(r => {
          this.dataSource = r.content
        })
    },
    formatter(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[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_approval_drawer{
  .approval_drawertable_wrap{
    width: 100%;
    height:calc(100% - 100px);
  }
  .drawer-footer {
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
 }
}

</style>