151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<script>
|
|
import {copy, sortByDateTime} from "@/utils/common.js";
|
|
|
|
export default {
|
|
name: "ZooArchiveTimeline",
|
|
data() {
|
|
return {
|
|
archives: [],
|
|
order:0
|
|
}
|
|
},
|
|
watch:{
|
|
order(){
|
|
this.timeSort()
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
required:true
|
|
},
|
|
},
|
|
methods: {
|
|
//按时间排序
|
|
timeSort() {
|
|
//0降序
|
|
if (this.order === 0) {
|
|
this.archives = sortByDateTime(copy(this.archives))
|
|
return
|
|
}
|
|
//1升序
|
|
if (this.order === 1) {
|
|
this.archives = sortByDateTime(copy(this.archives)).reverse()
|
|
return;
|
|
}
|
|
},
|
|
changeOrder(){
|
|
if (this.order===0)
|
|
this.order++
|
|
else this.order--
|
|
},
|
|
nodeType(type) {
|
|
if (type === '日常饲养') {
|
|
return 'success'
|
|
}
|
|
if (type === '疫苗接种') {
|
|
return 'primary'
|
|
}
|
|
if (type === '疾病治疗') {
|
|
return 'warning'
|
|
}
|
|
},
|
|
nodeHollow(state) {
|
|
if (state === 0) {
|
|
return false
|
|
}
|
|
if (state === 1) {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 给填充传递的数据
|
|
if (this.data) {
|
|
this.archives = copy(this.data)
|
|
//默认按照时间降序
|
|
this.timeSort()
|
|
}
|
|
},
|
|
updated() {
|
|
if (this.data) {
|
|
this.archives = copy(this.data)
|
|
//默认按照时间降序
|
|
this.timeSort()
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
console.log('ZooArchiveTimeline-beforeUnmount', this);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative" style="height: 40px">
|
|
<el-button type="primary" class="right" @click="changeOrder()">按时间升 / 降序</el-button>
|
|
</div>
|
|
<el-scrollbar height="500px">
|
|
<el-timeline style="max-width: 600px">
|
|
<el-timeline-item v-for="a in archives"
|
|
:type="nodeType(a.type)"
|
|
:hollow="nodeHollow(a.state)"
|
|
style="margin-top: 15px;margin-right: 20px">
|
|
<el-descriptions
|
|
:title="a.type"
|
|
:column="2"
|
|
size="small"
|
|
border
|
|
>
|
|
<template #extra>
|
|
<slot :archive="a" name="operate"></slot>
|
|
</template>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
动物名(ID)
|
|
</template>
|
|
{{ a.animalName }}({{a.animalId}})
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
记录类型
|
|
</template>
|
|
{{ a.type }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
生长阶段
|
|
</template>
|
|
{{ a.phase }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
状态
|
|
</template>
|
|
<span v-if="a.state===0" style="color: #67C23A">正常</span>
|
|
<span v-else-if="a.state===1" style="color: #F56C6C">异常</span>
|
|
<span v-else>未知</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
描述
|
|
</template>
|
|
{{ a.description }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div class="left">
|
|
记录号：{{ a.id }} |
|
|
关联计划：{{ a.breedingId }}
|
|
</div>
|
|
<div class="right">{{ a.roleId }} 记录于 {{ a.date }} {{ a.time }}</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
<el-backtop :right="100" :bottom="100" />
|
|
</el-scrollbar>
|
|
<div class="right" style="margin-top: 10px">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |