<template>
|
<wd-card class="card_bg" @click="handleCardClick">
|
<template #title>
|
<view class="flex justify-between w-full">
|
<text class="font-medium text-[#252525]">记录位置: {{ data[map.recordPosition] }}</text>
|
<wd-tag color="#0D867F" bg-color="#E7F4EC">
|
<text class="text-xs">{{ data[map.model] }}</text>
|
</wd-tag>
|
</view>
|
</template>
|
<wd-row class="my-2">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
班次:
|
<text class="text-[#252525]">{{ data[map.workShift] }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="my-2">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
班组:
|
<text class="text-[#252525]">
|
{{ data[map.teamName]?.slice(-2) || data[map.teamName] }}
|
</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="my-2" v-if="data[map.productType]">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
产品类别:
|
<text class="text-[#252525]">{{ data[map.productType] }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="my-2">
|
<wd-col :span="12">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
自检人:
|
<text class="text-[#252525]">{{ data[map.inspectPerson] }}</text>
|
</text>
|
</view>
|
</wd-col>
|
<wd-col :span="12">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
状态:
|
<text class="text-[#252525]">{{ data[map.status] == 1 ? "被驳回" : "巡检" }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="my-2">
|
<wd-col :span="16">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
记录时间:
|
<text class="text-[#252525]">{{ data[map.recordDate] }}</text>
|
</text>
|
</view>
|
</wd-col>
|
<wd-col :span="8">
|
<view class="flex" @click.stop>
|
<wd-button
|
v-if="data[map.status] == 1"
|
size="small"
|
type="primary"
|
@click="showRejectPopup = true"
|
style="margin-left: auto"
|
>
|
查看驳回信息
|
</wd-button>
|
</view>
|
</wd-col>
|
</wd-row>
|
</wd-card>
|
<wd-popup
|
v-model="showRejectPopup"
|
title="驳回信息"
|
custom-style="border-radius:32rpx;height: 800rpx;width: 600rpx;"
|
>
|
<wd-card
|
v-for="(item, index) in data.rejectList"
|
:key="index"
|
:class="index % 2 === 0 ? 'reject-card-bg-1' : 'reject-card-bg-2'"
|
style="margin-bottom: 8px; padding: 10px; border-radius: 8px"
|
>
|
<view class="content">
|
<view>
|
<view
|
style="
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: rgba(0, 0, 0, 0.85);
|
font-size: 14px;
|
margin-bottom: 8px;
|
"
|
>
|
<view>{{ item.rejectPerson }}</view>
|
<view>{{ item.rejectTime }}</view>
|
</view>
|
<view
|
style="
|
color: rgba(0, 0, 0, 0.85);
|
font-size: 14px;
|
word-break: break-word;
|
overflow-wrap: break-word;
|
max-width: 100%;
|
padding: 5px 0;
|
"
|
>
|
{{ item.rejectReason.reason }}
|
</view>
|
</view>
|
</view>
|
</wd-card>
|
</wd-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from "vue";
|
const emit = defineEmits(["click"]);
|
defineProps({
|
data: {
|
type: Object,
|
default: () => {},
|
},
|
map: {
|
type: Object,
|
default: () => {},
|
},
|
});
|
const showRejectPopup = ref<boolean>(false);
|
const handleCardClick = () => {
|
emit("click");
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.card_bg {
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
|
padding-bottom: 10px;
|
}
|
|
// 添加：两种不同的背景色样式
|
.reject-card-bg-1 {
|
background-color: #f5f7fa;
|
}
|
|
.reject-card-bg-2 {
|
background-color: #eef2f7;
|
}
|
|
.page-class {
|
:deep() {
|
.custom-shadow {
|
box-shadow:
|
0 3px 1px -2px rgb(0 0 0 / 20%),
|
0 2px 2px 0 rgb(0 0 0 / 14%),
|
0 1px 5px 0 rgb(0 0 0 / 12%);
|
}
|
}
|
}
|
|
.header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
// 修改：调整内容区域的样式
|
.content {
|
padding: 5px;
|
}
|
</style>
|
