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({ folderId: ele1.newValue });
            fileList.value.push({ 'id': ele1.newValue, 'name': newlist.map((item) => item.fileName).join('、') });

            const oldlist = await getFileList({ folderId: 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>