mailbox-lan-vue/src/views/work/components/templates/MainContactInfo.vue

<template>
    <div class="card">
        <div class="flex">
            <div class="col">
                <label>来信时间</label>
                <span>{{ mail.mailTime }}</span>
            </div>
            <div class="col">
                <label>信件来源</label>
                <span>{{
                    getDictLable(dictData.mail_source, mail.source)
                }}</span>
            </div>
        </div>
        <h2>来信人信息</h2>
        <div class="flex">
            <div class="col short">
                <label>姓名</label>
                <el-input
                    v-model="form.contactName"
                    v-if="contactEditable"
                    size="small"
                />
                <span v-else>{{ mail.contactName }}</span>
            </div>
            <div class="col short">
                <label>性别</label>
                <el-select v-model="form.contactSex" placeholder="请选择性别" v-if="contactEditable" size="small" style="width: 120px">
                    <el-option label="男" value="M"></el-option>
                    <el-option label="女" value="F"></el-option>
                </el-select>
                <span v-else>{{
                    mail.contactSex === "M"
                        ? "男"
                        : mail.contactSex === "F"
                        ? "女"
                        : "未知"
                }}</span>
            </div>
            <div class="col">
                <label>证件号码</label>
                <el-input v-model="form.contactIdCard"
                    v-if="contactEditable"
                    size="small"
                />
                <span v-else>{{ mail.contactIdCard }}</span>
            </div>
            <div class="col">
                <label>联系电话</label>
                <el-input v-model="form.contactPhone"
                    v-if="contactEditable"
                    size="small"
                />
                <span v-else>{{ mail.contactPhone }}</span>
            </div>
        </div>
        <div class="flex end mt-10" v-if="!disabled">
            <div v-if="contactEditable">
                <el-button size="small" @click="contactEditable = false"
                    >取消</el-button
                >
                <el-button size="small" type="primary" @click="sumbit"
                    >提交</el-button
                >
            </div>
            <el-button
                type="primary"
                size="small"
                plain
                @click="contactEditable = true"
                v-else
                >修改联系人信息</el-button
            >
        </div>
        <h2 style="margin-top: 0;">信件内容</h2>
        <div class="flex">
            <div class="col" v-if="mail.caseNumber">
                <label>案件编号</label>
                <span>{{ mail.caseNumber }}</span>
            </div>
            <div class="col" v-if="mail.involvedDeptName">
                <label>被投诉/涉及单位</label>
                <span>{{ mail.involvedDeptName }}</span>
            </div>
        </div>
        <p class="content">{{ mail.content }}</p>
        <template v-if="mail.attachments && mail.attachments.length">
            <h2>附件</h2>
            <FileList :files="mail.attachments" />
        </template>
    </div>
</template>
<script setup>
import { useDictData } from "@/hooks/useDictOptions";
const { dictData } = useDictData(["mail_source"]);
import { updateContactInfo } from '@/api/mail'
import { getDictLable } from "@/utils/util";
import feedback from "@/utils/feedback";

const emit = defineEmits(['refresh'])
const mail = inject("mail");
const disabled = inject("disabled");
const contactEditable = ref(false);
const form = reactive({
    contactName: mail.value.contactName,
    contactSex: mail.value.contactSex,
    contactIdCard: mail.value.contactIdCard,
    contactPhone: mail.value.contactPhone,
});

function sumbit() {
    updateContactInfo({
        mailId: mail.value.id,
        ...form
    }).then(() => {
        contactEditable.value = false
        emit('refresh')
        feedback.msgSuccess('更新成功')
    })
}
</script>
<style lang="scss" scoped>
.card {
    background: #f9faff;
    border-top: 8px solid var(--primary-color);
    box-shadow: 0px 2px 4px 0px rgba(129, 150, 255, 0.47);
    padding: 16px;
    margin-bottom: 24px;
    margin-left: 2px;
    margin-right: 2px;
}
.col {
    width: 25%;
    line-height: 24px;
}
.el-input {
    width: 200px;
}
</style>