gasInjection-project/src/views/vent/performance/comment/HistorySp.vue

<template>
    <div class="HistorySp">
        <div class="btn-box" v-if="isShow">
            <a-button type="primary" style="margin-right:10px" @click="getPass">通过</a-button>
            <a-button type="plain" @click="getReject">驳回</a-button>
        </div>
        <div class="top-box">
            <div class="box-title">流程审批进度历史</div>
            <div class="box-content">
                <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }"
                    :pagination="pagination"></a-table>
            </div>
        </div>
        <div class="bottom-box">
            <div class="box-title">实时流程图</div>
            <div class="box-content">
                <img :src="imgSrcs" alt="" @error="showerrimg">
            </div>
        </div>
        <!-- 审批通过弹窗 -->
        <a-modal v-model:visible="visibleTg" centered :width="600" title="审批通过" @ok="handleTgOk"
            @cancel="handleTgCancel">
            <a-textarea v-model:value="passDes" placeholder="请输入通过原因..." :rows="4"
                style="width:96%;margin:10px;background-color: transparent;color: #fff;" />
        </a-modal>
        <!-- 审批驳回弹窗 -->
        <a-modal v-model:visible="visibleBh" centered :width="600" title="审批驳回" @ok="handleBhOk"
            @cancel="handleBhCancel">
            <a-textarea v-model:value="rejectDes" placeholder="请输入驳回原因..." :rows="4"
                style="width:96%;margin:10px;background-color: transparent;color: #fff;" />
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'
import { columns } from './comment.data'
import { pass, back } from './comment.api'
import { message } from 'ant-design-vue';
import errorImg from '../../../../assets/images/errorImg.png'
let props = defineProps({
    historySpList: {
        type: Array,
        default: () => {
            return []
        }
    },
    imgSrc: {
        type: String,
        default: ''
    },
    isShow: {
        type: Boolean,
        default: true,
    },
    spInfo: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
//数据列表
let dataSource = ref<any[]>([])
//分页参数配置
let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
})

//审批通过驳回参数信息
let spInfos = reactive({
    id: '',
    priority: '',
    procInstId: '',
})
//审批通过
let visibleTg = ref(false)
let passDes = ref('')
//审批驳回
let visibleBh = ref(false)
let rejectDes = ref('')

let imgSrcs = ref('')


let emit = defineEmits(['spClose',])

function showerrimg() {
    imgSrcs.value = errorImg;
}

//审批通过
function getPass() {
    visibleTg.value = true
}
//审批通过-确认
async function handleTgOk() {
    let res = await pass({ comment: passDes.value, id: spInfos.id, priority: spInfos.priority, procInstId: spInfos.procInstId, sendEmail: false, sendMessage: true, sendSms: false })
    visibleTg.value = false
    emit('spClose')
    message.warning(res.message || res);
}
//审批通过-取消
function handleTgCancel() {
    passDes.value = ''
    visibleTg.value = false
}
//审批驳回
function getReject() {
    visibleBh.value = true
}
//确定驳回
async function handleBhOk() {
    let res = await back({ comment: rejectDes.value, id: spInfos.id, procInstId: spInfos.procInstId, sendEmail: false, sendMessage: true, sendSms: false })
    visibleBh.value = false
    emit('spClose')
    message.warning(res.message || res);
}
//取消驳回
function handleBhCancel() {
    rejectDes.value = ''
    visibleBh.value = false
}
watch(() => props.historySpList, (newV, oldV) => {
    if (newV.length != 0) {
        dataSource.value = newV
    }
}, {
    immediate: true,
    deep: true
})
watch(() => props.spInfo, (newV, oldV) => {
    spInfos.id = newV.id
    spInfos.priority = newV.priority
    spInfos.procInstId = newV.procInstId
}, { deep: true })

watch(() => props.imgSrc, (newV, oldV) => {
    imgSrcs.value = newV
}, { immediate: true, deep: true })

</script>

<style lang="less" scoped>
.HistorySp {
    position: relative;
    width: 100%;
    height: 100%;

    .btn-box {
        width: 98%;
        padding: 15px 11px 0px 11px;
        box-sizing: border-box;
    }

    .top-box {
        width: 98%;
        height: 400px;
        margin: 15px auto;
        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
        border-radius: 2px;
        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
        padding: 10px;
        box-sizing: border-box;

        .box-content {
            height: calc(100% - 30px);
        }
    }

    .bottom-box {
        width: 98%;
        height: 200px;
        margin: 15px auto;
        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
        border-radius: 2px;
        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
        padding: 10px;
        box-sizing: border-box;

        .box-content {
            position: relative;
            height: calc(100% - 30px);

            img {
                width: 498px;
                height: 236px;
                position: absolute;
                left: 50%;
                top: -130px;
                transform: translate(-72%, 0);
            }
        }
    }

    .box-title {
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        color: #fff;
    }
}

.zxm-modal .zxm-modal-body {
    padding: 15px !important;
    box-sizing: border-box
}
</style>