159 lines
3.2 KiB
Vue
159 lines
3.2 KiB
Vue
<!--文件导出 -->
|
||
<template>
|
||
<el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
|
||
<div style="height: 50vh; overflow: auto;">
|
||
<el-timeline style="max-width: 600px">
|
||
<el-timeline-item :timestamp="item.czsj" placement="top" v-for="(item,index) in lcList" :key="index">
|
||
<el-card class="process-card">
|
||
<div class="process-info">
|
||
<div class="info-label">处置人：</div>
|
||
<div class="info-value">{{item.czrxm || '未记录'}}</div>
|
||
</div>
|
||
<div class="process-info">
|
||
<div class="info-label">处置结果：</div>
|
||
<div class="info-value">
|
||
<DictTag :tag="false" :value="item.czzt" :options="dict.D_BZ_QBCZZT" />
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="close">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup>
|
||
|
||
import { onMounted, reactive, watch, ref } from 'vue'
|
||
import {qbcjSelectCzlcList } from "@/api/Intelligence.js";
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '50%'
|
||
}, tableColumn: {
|
||
type: Array,
|
||
default: () => []
|
||
}, dict: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
dataList: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: '操作流程'
|
||
}
|
||
})
|
||
onMounted(() => {
|
||
})
|
||
|
||
|
||
const dxRadio = ref()
|
||
const emit = defineEmits(['update:modelValue', 'getList'])
|
||
// 当对话框显示时处理表格列配置
|
||
watch(() => props.modelValue, (newVal) => {
|
||
if (newVal) {
|
||
getqbcjPldb()
|
||
}
|
||
|
||
})
|
||
|
||
|
||
const close = () => {
|
||
emit('update:modelValue', false)
|
||
}
|
||
const lcList=ref([])
|
||
const getqbcjPldb = () => {
|
||
qbcjSelectCzlcList({ qbid: props.dataList.id }).then(res => {
|
||
lcList.value=res||[]
|
||
|
||
})
|
||
.catch(() => {
|
||
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 时间线样式优化 */
|
||
.el-timeline {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* 处置流程卡片样式 */
|
||
.process-card {
|
||
border: none;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 16px;
|
||
border-left: 3px solid #409EFF;
|
||
}
|
||
|
||
.process-card:hover {
|
||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 卡片内部信息样式 */
|
||
.process-info {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.process-info:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #409EFF;
|
||
margin-right: 8px;
|
||
min-width: 65px;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 时间戳样式 */
|
||
.el-timeline-item__timestamp {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 时间线节点样式 */
|
||
.el-timeline-item__node {
|
||
background-color: #409EFF;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media screen and (max-width: 768px) {
|
||
.process-info {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.info-label {
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
</style>
|