81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<!-- components/TaskItem.vue -->
|
|
<template>
|
|
<view class="u-tab-item" :class="{ 'u-tab-item-active': active }" @tap.stop="handleClick">
|
|
<u-row class="full-width">
|
|
<u-col span="2" class="text-center" style="position: relative">
|
|
<u-icon :color="taskStyle(task)" name="tags-fill" size="40"></u-icon>
|
|
<text class="seq">{{ seq }}</text>
|
|
</u-col>
|
|
<u-col span="10">
|
|
<view class="fs18">{{ task.taskNo }}</view>
|
|
<view class="mt3 mb3">{{ task.taskName }}{{ task.assayOper }}</view>
|
|
<view class="x-f">
|
|
<u-icon name="clock"></u-icon>
|
|
<text class="ml5">{{ taskOperatorTime }}</text>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import nx from '@/nx'
|
|
|
|
const props = defineProps({
|
|
task: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
seq: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const taskOperatorTime = nx.$dayjs(props.task.taskOperatorTime).format('YYYY-MM-DD HH:mm:ss')
|
|
const emit = defineEmits(['click'])
|
|
|
|
const handleClick = () => {
|
|
emit('click')
|
|
}
|
|
|
|
// 与原逻辑一致的 taskStyle 方法
|
|
const taskStyle = task => {
|
|
if ((task.weightTaskStatus === 0 || task.weightTaskStatus === 1) && task.reviewCount > 0) return 'red'
|
|
if (task.weightTaskStatus === 2 && task.reviewCount > 0) return 'green'
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.u-tab-item {
|
|
padding: 3px;
|
|
background: #f6f6f6;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: #444;
|
|
border-bottom: 2px dotted;
|
|
}
|
|
|
|
.u-tab-item-active {
|
|
position: relative;
|
|
color: #0055a2;
|
|
font-weight: 600;
|
|
background: #fff;
|
|
}
|
|
.seq {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
</style>
|