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>
|