JSDW/src/views/Proprietor/TicketIssueAudit/DialogBox.vue

<!-- 审核签发票证-弹窗详情 -->
<template>
    <el-dialog title="审核签发票证" v-model="props.show" @close="handleClose" width="900px">
        <div class="Cneter-box">
            <el-row :gutter="20">
                <!-- 票证详情 -->
                <el-col :span="13">
                    <div class="ticket-detail">
                        <h3>票证详情</h3>
                        <el-descriptions :column="1" border :size="small">
                            <el-descriptions-item label="票证编号">PT20250405-001</el-descriptions-item>
                            <el-descriptions-item label="票证类型">
                                <span class="high-risk">危险作业票（高风险）</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="项目名称">新建厂房项目一期</el-descriptions-item>
                            <el-descriptions-item label="施工单位">中建一局</el-descriptions-item>
                            <el-descriptions-item label="提交人">李建国</el-descriptions-item>
                            <el-descriptions-item label="提交时间">2025-04-05 09:30</el-descriptions-item>
                            <el-descriptions-item label="施工地点">A栋西侧脚手架区域</el-descriptions-item>
                            <el-descriptions-item label="施工内容">高空拆除旧管道作业</el-descriptions-item>
                            <el-descriptions-item label="安全措施">系好安全绳、设置警戒线、配备灭火器材</el-descriptions-item>
                            <el-descriptions-item label="注意事项">
                                <span class="warning">风力超过五级严禁作业！</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-col>
                <!-- 审核操作 -->
                <el-col :span="11">
                    <div class="audit-operation">
                        <h3>审核操作</h3>
                        <el-form label-width="100px" :model="formData" label-position="top">
                            <el-form-item label="审核结果">
                                <el-radio-group v-model="auditResult">
                                    <el-radio label="通过">通过</el-radio>
                                    <el-radio label="驳回">驳回</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="审核意见">
                                <el-input type="textarea" placeholder="请输入审核意见..." :rows="4"></el-input>
                            </el-form-item>
                            <el-form-item label="附件上传">
                                <el-upload style="width: 100%;" class="upload-demo" drag
                                    action="https://jsonplaceholder.typicode.com/posts/" multiple>
                                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                    <div class="el-upload__text">
                                        点击上传文件或拖拽至此处
                                    </div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- 底部按钮 -->
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref,onBeforeMount } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { FetchWorkTicketDetail } from '@/api/workTicket'

const auditResult = ref('')
const props = defineProps({
    Tid: {
        type: Number || String,
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    },
    CloseDialog: {
        type: Function,
        default: () => { }
    }
})

onBeforeMount(() => {
    if (props.Tid) {
       getDetail();
    }
    
})

// 获取详情
const getDetail = async () => {
    let res = await FetchWorkTicketDetail(props.Tid);
    if (res.code == 200) {
        formData.value = res.data;
    }
}



// 项目树形结构数据
const projectTreeData = ref([
    {
        id: 1,
        label: '北京市',
        children: [
            {
                id: 2,
                label: '朝阳区',
                children: [
                    { id: 3, label: 'CBD大厦项目' },
                    { id: 4, label: '国贸三期项目' }
                ]
            },
            { id: 5, label: '海淀区' }
        ]
    }
])

// 树形结构配置
const treeProps = ref({
    children: 'children',
    label: 'label'
})

// 表单数据
const formData = ref({
    name: '',
    account: '',
    department: '',
    roles: [],
    selectedProjects: [],
    phone: '',
    expireDate: null,
    forever: false,
    remark: ''
})

// 处理项目选择变化
const handleCheckChange = (checkedNodes) => {
    console.log('选中的项目节点:', checkedNodes)
}

// 关闭弹窗
const handleClose = () => {
    props.CloseDialog()
}

const handleSubmit = () => {
    // 提交逻辑
    console.log('提交分配信息', formData.value)
    props.CloseDialog()
}

</script>

<style scoped lang="scss">
.Cneter-box {
    padding: 20px;
}

.ticket-detail, .audit-operation {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ticket-detail h3,
.audit-operation h3 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.high-risk {
    color: #f56c6c;
    font-weight: 500;
}

.warning {
    color: #e6a23c;
    font-weight: 500;
}

.el-descriptions {
    margin-bottom: 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.el-form-item:last-child {
  margin-bottom: 0;
  flex: 1;
}

.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.el-upload:hover {
    border-color: #409eff;
}

.el-upload__text {
    color: #606266;
}

/* 动画过渡效果 */
.ticket-detail,
.audit-operation {
    animation: fadeInUp 0.5s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>