Blame view

ant-design-jeecg-vue/src/components/bpm/ProcNodeInfoModel.vue 2.76 KB
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
<template>
  <a-modal
    :title="title"
    :width="280"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :bodyStyle ="bodyStyle"
    :mask = "false"
    destroyOnClose
    :footer="null"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <div style="height: 300px;overflow: hidden;overflow-y: auto;overflow-x: auto;">
        <template v-for="(item, key, index) in nodeInfos">
          <table class="gridtable">
            <tbody>
            <tr>
              <th width="90">任务名称</th>
              <td width="150">{{ item.taskName}}</td>
            </tr>
            <tr>
              <th width="90">执行人</th>
              <td width="150">{{ item.taskAssigneeId}}</td>
            </tr>
            <tr>
              <th width="90">开始时间</th>
              <td width="150">{{ item.taskBeginTime }}</td>
            </tr>
            <tr>
              <th width="90">结束时间</th>
              <td width="150">{{ item.taskEndTime }}</td>
            </tr>
            <tr>
              <th width="90">耗时</th>
              <td width="150">{{ item.durationStr }}</td>
            </tr>
            <tr>
              <th width="90">意见</th>
              <td width="150">{{ item.remarks }}</td>
            </tr>
            </tbody>
          </table>
        </template>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'

  export default {
    name: "ProcNodeInfoModel",
    data () {
      return {
        title:"任务审批详情",
        visible: false,
        bodyStyle:{
          padding: "0",
        },
        confirmLoading: false,
        validatorRules:{
        },
        nodeInfos:[],
      }
    },
    created () {
    },
    methods: {
      showInfo(record,taskId) {
        this.nodeInfos = [];
        for (var item of record) {
          if(item.taskId == taskId){
            this.nodeInfos.push(item);
          }
        }
        this.visible = true;
      },
      close() {
        this.nodeInfos = [];
        this.visible = false;
      },
      handleCancel () {
        this.nodeInfos = [];
        this.visible = false;
      },

    }
  }
</script>

<style scoped>
  table.gridtable {
    margin: 0 auto;
    margin-top: 10px;
    font-family: verdana,arial,sans-serif;
    font-size:12px;
    color:#333333;
    border-width: 1px;
    border-color: #ddd;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #ddd;
    background-color: #eee;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #ddd;
    background-color: #ffffff;
  }
</style>