All files / src/components/u-process-record.vue index.vue

52% Statements 13/25
7.14% Branches 2/28
11.11% Functions 1/9
54.16% Lines 13/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199      1x   1x     1x                                                                                                                                                                                                                                                                                                                                                                                            
<template>
    <div>
        <template v-if="type === 'timeline'">
            <u-timeline :data-source="list">
                <template #item="current">
                    <u-timeline-item>
                        <div :class="$style.title">{{ current.item.nodeTitle }}</div>
                        <div :class="$style.item">
                            <div :class="$style.left">
                                <div :class="$style.label">{{ $tt('assignee') }}</div>
                                <div :class="$style.label">{{ $tt('recordCreateTime') }}</div>
                                <div :class="$style.label">{{ $tt('nodeOperation') }}</div>
                                <div :class="$style.label">{{ $tt('comment') }}</div>
                            </div>
                            <div :class="$style.content">
                                <div :class="$style.value">{{ current.item.userName || '-' }}</div>
                                <div :class="$style.value">{{ dateFormatter(current.item.recordCreateTime) || '-' }}</div>
                                <div :class="$style.value">{{ current.item.nodeOperation || '-' }}</div>
                                <div :class="$style.value">{{ current.item.comment || '-' }}</div>
                            </div>
                        </div>
                    </u-timeline-item>
                </template>
            </u-timeline>
            <u-text v-if="currentLoading">{{ $tt('loading') }}</u-text>
            <u-link v-else-if="hasMore" @click="loadMore">{{ $tt('loadMore') }}</u-link>
            <u-text v-else-if="list.length > 0">{{ $tt('noMore') }}</u-text>
        </template>
        <template v-else>
            <u-table-view :data-source="loadTable" ref="tableview" :page-size="20" :page-number="1" pagination :initial-load="initialLoad">
                <u-table-view-column :title="$tt('currentNode')">
                    <template #cell="current"> {{ current.item.nodeTitle || '-' }}</template>
                </u-table-view-column>
                <u-table-view-column :title="$tt('assignee')">
                    <template #cell="current"> {{ current.item.userName || '-' }}</template>
                </u-table-view-column>
                <u-table-view-column :title="$tt('recordCreateTime')">
                    <template #cell="current"> {{ dateFormatter(current.item.recordCreateTime) }}</template>
                </u-table-view-column>
                <u-table-view-column :title="$tt('nodeOperation')">
                    <template #cell="current"> {{ current.item.nodeOperation || '-' }}</template>
                </u-table-view-column>
                <u-table-view-column :title="$tt('comment')">
                    <template #cell="current"> {{ current.item.comment }}</template>
                </u-table-view-column>
            </u-table-view>
        </template>
    </div>
</template>
 
<script>
import i18nMixin from '../../mixins/i18n';
export default {
    name: 'u-process-record',
    mixins: [i18nMixin('u-process-record')],
    props: {
        type: {
            type: String,
            default: 'table',
        },
        initialLoad: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            detail: {
                startBy: '',
                createTime: '',
                finished: false,
                currentNode: '',
                currentCandidateUsers: [],
            },
            taskId: undefined,
            list: [],
            paging: {
                size: 20,
                number: 1,
                total: 0,
            },
            currentLoading: false,
        };
    },
    computed: {
        hasMore() {
            return this.list.length < this.paging.total;
        },
    },
    created() {
        location.search.replace('?', '').split('&').forEach((item) => {
            const [key, value] = item.split('=');
            if (key === 'taskId') {
                this.taskId = value;
            }
        });
        if (this.taskId && this.type === 'timeline' && this.initialLoad) {
            this.list = [];
            this.loadList();
        }
    },
    watch: {
        type(value) {
            if (value === 'timeline') {
                this.paging.number = 1;
                this.list = [];
                this.loadList();
            }
        },
    },
    methods: {
        dateFormatter(value) {
            // eslint-disable-next-line new-cap
            return this.$utils ? this.$utils.FormatDateTime(value) : value;
        },
        formatStatus(value) {
            if (value === null || value === undefined) {
                return '-';
            }
            if (value === true) {
                return '已结束';
            } else if (value === false) {
                return '进行中';
            } else {
                return value;
            }
        },
        formatArray2String(value) {
            if (value === null || value === undefined) {
                return '-';
            }
            if (Array.isArray(value)) {
                return value.join(',') || '-';
            }
            return value;
        },
        async loadList() {
            this.currentLoading = true;
            if (this.$processV2) {
                this.currentLoading = true;
                try {
                    const result = await this.$processV2.getProcInstRecords({
                        body: {
                            taskId: this.taskId,
                            size: this.paging.size,
                            page: this.paging.number,
                        },
                    });
                    const list = result.data.list || [];
                    this.list = this.list.concat(list);
                    this.paging.total = result.data.total;
                } finally {
                    this.currentLoading = false;
                }
            }
        },
        loadMore() {
            this.paging.number += 1;
            this.loadList();
        },
        async loadTable(params) {
            if (this.$processV2) {
                const result = await this.$processV2.getProcInstRecords({
                    body: {
                        taskId: this.taskId,
                        size: this.paging.size,
                        page: this.paging.number,
                    },
                });
                return result.data;
            }
        },
    },
};
</script>
 
<style module>
.item {
    display: flex;
}
.left {
    min-width: 9%;
    margin-right: 10px;
}
.label {
    color: var(--process-record-label-color);
}
.value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.title {
    font-weight: 500;
    color: var(--process-record-title-color);
}
</style>