SmartOpsWeb/src/views/task-management/components/WorkDialog.vue

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { MoreFilled } from "@element-plus/icons-vue";
import { time } from "echarts";
//控制显示隐藏
const dialogVisible = ref(false);
const open = (row) => {
    dialogVisible.value = true;
    console.log(row);
};

const test = [
    {
        content: "待处理",
        timestamp: "2022-07-20 20:00",
        color: "#0bbd87",
    },
    {
        content: "已处理",
        timestamp: "2022-07-20 20:00",
        type: "primary",
        icon: MoreFilled,
        size: "large",
    },
    {
        content: "结单",
        timestamp: "2022-07-20 20:00",
        size: "large",
    },
];

const test2 = [
    {

        date: '2024-8-31',
        type: "primary",
        icon: MoreFilled,
        size: "large",
    }, {
        content: "结单",
        size: "large",
    }
];
const data = [
    {
        number: '17628661307',
        state: '通话中',
        time: '18 : 32',
    },
    {
        number: '17628661307',
        state: '已接通',
        time: '18 : 32',
    },
    {
        number: '17628661307',
        state: '已接通',
        time: '18 : 32',
    }]

defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="dialogVisible" show-close="true" title="工单详情" width="80%" :before-close="handleClose" overflow:
        auto>
        <div class="common-layout">
            <el-container>
                <el-header class="header"><span>工单号 :</span>
                    <span>666</span>
                </el-header>
                <el-container class="main-container">
                    <el-aside width="200px" :style="{ position: 'static' }">
                        <div class="aside-content">
                            <el-timeline style="max-width: 600px">
                                <el-timeline-item v-for="(activity, index) in test" :key="index" :icon="activity.icon"
                                    :type="activity.type" :color="activity.color" :size="activity.size"
                                    :hollow="activity.hollow" :timestamp="activity.timestamp">
                                    {{ activity.content }}
                                </el-timeline-item>
                            </el-timeline>
                        </div>
                    </el-aside>
                    <el-main :style="{ position: 'static' }" class="main-content">
                        <div class="top">
                            <div class="info">
                                <span>创始人 :</span>
                                <span>处理人 :</span>
                            </div>
                            <div class="info">
                                <span>工单名称 :</span>
                                <span>关单人 :</span>
                            </div>
                        </div>
                        <div class="body">
                            <div>
                                <div>工单内容 :</div>
                                <div class="text"></div>

                            </div>
                            <div>
                                <div>工单内容 :</div>
                                <div class="text"></div>

                            </div>
                            <div>
                                <div>工单内容 :</div>
                                <div class="text"></div>

                            </div>
                        </div>
                        <div class="footer">
                            <div>电话拨打记录 :</div>
                            <div class="timebox">
                                <div>
                                    <el-scrollbar height="20vh">
                                        <el-timeline style="max-width: 99%" class="timeline">
                                            <el-timeline-item v-for="(activity, index) in test2" :key="index"
                                                :icon="activity.icon" :type="activity.type" :color="activity.color"
                                                :size="activity.size">
                                                <div class="custom-card">
                                                    <div>{{ activity.date }}</div>
                                                    <div v-for="(info, index) in data" :key="index">
                                                        <div>
                                                            <span :style="{color:'#a8abb2'}">{{ info.number }}</span>
                                                            <span :style="{ color: info.state === '通话中' ? '#6cc23a' : '#409eff' }">{{ info.state }}</span>
                                                            <span class="span-3th" :style="{color:'#a8abb2'}">{{ info.time }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-scrollbar>
                                </div>
                            </div>
                        </div>

                    </el-main>
                </el-container>
            </el-container>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.header {
    font-size: 27px;
    color: black;
}

.aside-content {
    position: relative;
    left: 3px;
}

.main-content {
    background-color: white;

}

.main-content span {
    padding-bottom: 5px;
    color: black;
    display: inline-block;
    width: 50%;
    align-items: center;
    justify-content: space-between;
}

.main-content .info {
    border-bottom: 1.5px solid #e4e7ed;
    margin-bottom: 50px
}

.main-content .body {
    font-size: 17px;
    color: black
}

.main-content .body .text {
    width: 100%;
    height: 10vh;
    border: 1.5px solid #e4e7ed;
    resize: none;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
}

.main-content .footer {
    color: black;
    font-size: 17px;
}

.main-content .timebox {
    width: 100%;
    height: 25vh;
    border: 1.5px solid #e4e7ed;
    padding-left: 20px;
    padding-top: 20px;
    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
    // overflow-x: hidden;
}

.main-content .timeline {
    // width: 100%;
    position: relative;
    left: 3px;
    // background-color: red;
    
}

.custom-card{
    width: 100%;
    font-size: 16px;
}
.custom-card span {
    padding-top: 10px;
    width: 20%;
    margin: 2px;
    
}

.custom-card .span-3th {
    float: right;
}
</style>