mailbox-lan-vue/src/views/work/components/OverruleReason.vue

<template>
    <el-dialog v-model="visible" width="1100px" top="4vh" class="dialog-header-nopadding" align-center
        style="--el-dialog-padding-primary: 10px" :lock-scroll="false">
        <template #header="" style="display: flex;align-items: center;justify-content: space-between;">
            <div class="dialog-header">
                <span class="dialog-title">不满意信件申诉处理</span>
            </div>
        </template>
        <div class="dialog-body">
            <el-row class="mb-20">
                <el-col :span="2">
                    <span class="main-label">申诉中</span>
                </el-col>
                <el-col :span="22">
                    <el-steps :active="active" class="steps" ref="steps">
                        <el-step :status="stepStatus[0]" title="提交申诉"></el-step>
                        <el-step :status="stepStatus[1]" title="二级机构专班审批"></el-step>
                        <el-step :status="stepStatus[2]" title="市局专班成员审批"></el-step>
                        <el-step :status="stepStatus[4]" title="市局专班领导审批" ></el-step>
                    </el-steps>
                </el-col>
            </el-row>
            <el-divider />
            <div v-if="overruleReason">
                <span class="main-label">驳回理由</span>
                <div class="mt-20">
                    <span class="info-content">{{ overruleReason }}</span>
                </div>
            </div>
            <span class="main-label">申诉理由</span>
            <div class="mt-20">
                <span class="info-content">{{ appealReason }}</span>
            </div>
            <span class="main-label">相关附件</span>
            <div class="mt-20 mb-20">
                <FileList :files="fileList" />
            </div>
            <div style="display: flex;justify-content: flex-end;">
                <el-button type="primary" plain @click="reSubmit">重新申诉</el-button>
                <el-button type="primary" @click="handleSubmit">关闭窗口</el-button>
            </div>
        </div>
    </el-dialog>
    <LaunchAppeal v-model:show="showAppeal" :mail-id="activeMailId" @update="getDetail" />
</template>

<script lang="ts" setup>
import { ElSteps } from 'element-plus';
import { ref, defineProps, watch } from 'vue'
import { getAppeal } from '@/api/work/appeal'
import LaunchAppeal from "./LaunchAppeal.vue";
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    mailId: {
        type: String,
        default: ''
    }
})
const emits = defineEmits(["update:show", "update"]);
const visible = ref(props.show)
watch(visible, (val) => {
    emits("update:show", val);
});
watch(
    () => props.show,
    (val) => {
        visible.value = val;
        getDetail()
    }
);
const getDetail = () => {
    getAppeal({ id: props.mailId }).then((res) => {
        stepStatus.value = []
        appealReason.value = res.appealReason
        overruleReason.value = res.overruleReason
        fileList.value = JSON.parse(res.attachments)
        active.value = res.step - 1
        if (res.appealState === '3')
            stepStatus.value[active.value] = 'error'
        console.log(res)
        emits("update");
    }).catch((err) => { console.log(err) })
}

const active = ref(3)
const appealReason = ref('')
const overruleReason = ref('')
const fileList = ref([])
const steps = ref<InstanceType<typeof ElSteps>>()
const stepStatus = ref([])
const showAppeal = ref(false)
const activeMailId = ref(props.mailId)

const handleSubmit = () => {
    visible.value = false;
}
const reSubmit = () => {
    visible.value = false;
    showAppeal.value = true;
    activeMailId.value = props.mailId;
    emits("update");
}
</script>

<style lang="scss" scoped>
.dialog-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-self: center;
}

.dialog-title {
    margin-left: 20px;
    height: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
}

.dialog-body {
    margin-left: 20px;
    margin-right: 20px;
}

.main-label {
    width: 80px;
    height: 22px;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
}

.main-content {
    width: 100%;
    height: 22px;
    font-size: 20px;
    font-weight: bold;
    color: #162582;
    line-height: 22px;
}

.title-label {
    margin-bottom: 20px;
}

.info-input {
    width: 100%;
}

.info-content {
    display: block;
    background-color: #FAFBFF;
    margin: 20px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 32px;
    text-align: left;
    font-style: normal;
}

.el-upload__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 可定义局部公共样式
$publicColor: #162582;
$publicHeight: 35px;

.steps {
    width: 100%;
    margin: auto 0;
    height: $publicHeight;

    ::v-deep .el-step {
        height: 100%;

        .el-step__icon.is-text {
            background-color: $publicColor;

            .el-step__icon-inner {
                color: #FFFFFF;
            }
        }

        .el-step__main {
            width: 200px;
        }

        .el-step__line {
            background-color: rgba(0, 0, 0, 0.15);
            margin-right: 10px;
            margin-left: 135px;
            top: 50%;
            height: 1px;
        }

        .el-step__title {
            color: #333333;
            width: 100%;
            position: absolute;
            top: calc((100% - 135%)/2);
            left: calc(0% + 30px);
        }

        .el-step__title.is-wait {
            width: 100%;
            color: #999999;
        }

        .el-step__head.is-wait {
            .el-step__icon.is-text {
                background: #FFF;

                .el-step__icon-inner {
                    color: #CCCCCC;
                }
            }
        }

        .el-step__head.is-error {
            .el-step__icon.is-text {
                background-color: #FF0000;
                border: 0px;
            }

        }
    }
}
</style>