geg-gas-web/src/views/formChange/changeLogDetail/components/ChangeRowDetailModal.vue

<template>
    <!-- <h2 align="left" disabled="true" size="default" isshow="true" style="font-size: 18px; font-weight: bold;"
        required="false">变更详情</h2> -->
    <div class="geg-flow-history">
        <div v-for="(item, index) in dataList" :class="{ sep: index !== 0 }" class="item">
            <div class="row">
                <div class="col-6">
                    <span style="color: gray">{{ index + 1 + '、' }}</span>
                    <span style="color: gray">用户 </span>
                    <span style="font-weight: bold; font-size: larger"> {{ props.currentUserName }} </span>
                    <span style="color: gray"> 将 </span>
                    <span style="font-weight: bold; font-size: larger"> {{ item.fieldName ? item.fieldName : item.fieldCode }} </span>
                    <span v-if="item.changeType == 'insert'"
                        >{{ ' 新增为 ' }}
                        <span v-for="file in fileList">
                            <span style="font-weight: bold; font-size: larger; color: black" v-if="file.id == item.oldValue">{{ file.name + '-' }}</span>
                        </span>
                        <span style="font-weight: bold; font-size: larger">{{ item.newValue }} </span>
                    </span>
                    <span v-if="item.changeType == 'update'" style="color: gray"
                        >{{ ' 从 ' }}
                        <span v-for="file2 in fileList">
                            <span style="font-weight: bold; font-size: larger; color: black" v-if="file2.id == item.oldValue">{{ file2.name + '-' }}</span>
                        </span>
                        <span style="font-weight: bold; font-size: larger; color: black">{{ item.oldValue }}</span>
                        <span>{{ ' 修改至 ' }}</span>
                        <span v-for="file3 in fileList">
                            <span style="font-weight: bold; font-size: larger; color: black" v-if="file3.id == item.newValue">{{ file3.name + '-' }}</span>
                        </span>
                        <span style="font-weight: bold; font-size: larger; color: black">{{ item.newValue }}</span>
                    </span>
                    <span v-if="item.changeType == 'delete'" style="color: gray">{{ ' 删除了 ' }}</span>
                </div>
                <div class="col-4">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div class="col-2">
                    {{ props.currentCreateTime }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { useI18n } from '/@/hooks/web/useI18n';
    import { defineProps, onMounted, ref, watch } from 'vue';
    import dayjs from 'dayjs';
    import { getFileList } from '/@/api/system/file';
    import { getFormChangeRecordItemPage, getFormChangeRecordItemList } from '/@/api/formChange/changeLogDetail/index';
    import { FormChangeRecordItemModel, FormChangeRecordItemPageModel, FormChangeRecordItemPageParams } from '/@/api/formChange/changeLogDetail/model/ChangeLogDetailModel';
    import { array } from 'vue-types';
    import { FilePageListModel } from '/@/api/system/file/model';

    const { t } = useI18n();
    const props = defineProps({
        mode: {
            type: String,
            default: 'simple'
        },
        items: Array,
        autoHide: {
            type: Boolean,
            default: true
        },
        sort: {
            type: String,
            default: 'desc'
        },
        rowId: {
            type: Number
        },
        currentUserName: {
            type: String
        },
        currentCreateTime: {
            type: String
        },
        formInfos: {
            type: Array
        },
        isShow: {
            type: Boolean
        }
    });

    const dataList = ref<FormChangeRecordItemPageModel[]>([]);
    const fileList = ref<{ id: string; name: string }[]>([]);

    function parseTime(t) {
        return dayjs(t).format('YYYY-MM-DD HH:mm');
    }

    async function getData() {
        getFormChangeRecordItemList({ operationId: props.rowId, size: 99, limit: 1 }).then((res) => {
            dataList.value = res.list;
        });

        fileList.value = [];

        dataList.value.forEach(async (ele1) => {
            props.formInfos?.forEach((ele2) => {
                if (ele1.fieldName == null && ele1.fieldCode == ele2.fieldId) {
                    ele1.fieldName = ele2.fieldName;
                }
            });
            if (ele1.fieldCode.indexOf('file') > 0 || ele1.fieldCode.indexOf('File') > 0) {
                const newlist = await getFileList({ tableId: ele1.newValue });
                fileList.value.push({ id: ele1.newValue, name: newlist.map((item) => item.fileName).join('、') });

                const oldlist = await getFileList({ tableId: ele1.oldValue });
                fileList.value.push({ id: ele1.oldValue, name: oldlist.map((item) => item.fileName).join('、') });
            }
        });
    }

    onMounted(async () => {
        await getData();
    });

    watch(
        () => props.isShow,
        async (val) => {
            if (val) {
                await getData();
            }
        }
    );
</script>

<style lang="less">
    .geg-flow-history {
        .signature {
            /* height: 20px;*/
            height: 30px;
            width: 50px;
        }

        .row {
            display: flex;
            flex-direction: row;
            margin: 6px 0;
            line-height: 20px;
            font-size: 14px;
        }

        .col-1 {
            width: 160px;
        }

        .col-2 {
            width: 130px;
            color: #5a6875;
        }

        .col-3 {
            flex: 1;

            &.agree {
                color: #52c41a;
            }
        }

        .tag {
            padding-right: 4px;

            &.agree {
                color: #52c41a;
            }

            &.reject {
                color: #eaa63c;
            }
        }

        .col-node {
            width: 120px;
        }

        .position {
            color: #90a0af;
        }

        .item {
            padding: 8px 0;

            &.sep {
                border-top: 1px solid #e9e9e9;
            }
        }
    }
</style>