feiniao-farm-h5/src/components/recordItem.vue

<template>
    <div class="record-item">
        <div class="record-title">
            <slot name="title"></slot>
        </div>
        <div class="record-content">
            <div class="info-item">
                触发条件：
                <span class="info-val">{{ recordItemData?.condition }}</span>
            </div>
            <div class="info-item">
                农事编号：
                <span class="info-val">{{ recordItemData?.code }}</span>
            </div>
            <div class="info-item">
                推荐时间：
                <span class="info-val">{{ recordItemData?.executeDate }}</span>
            </div>
            <div class="info-item" v-if="recordItemData?.attention">
                巡园提醒：
                <span class="info-val">{{ recordItemData?.attention }}</span>
            </div>
            <div class="info-item recipe-name" v-if="onlyRecipeName && recordItemData?.prescriptionList && recordItemData?.prescriptionList.length">
                <span class="name-text">药物处方：</span>
                <div class="rescription info-val">
                        <span
                            v-for="(
                                fertilizer, fertilizerI
                            ) in recordItemData.prescriptionList"
                            :key="fertilizerI"
                        >
                            <span v-for="(pest, pestI) in fertilizer.pesticideFertilizerList" :key="'sub' + pestI">
                                {{ pest.defaultName }}
                                <span
                                    v-if="
                                        (pestI !== fertilizer.pesticideFertilizerList.length - 1) || (fertilizerI !== recordItemData.prescriptionList.length - 1)
                                    "
                                >
                                    +
                                </span>
                            </span>
                        </span>
                    </div>
            </div>
            <div class="info-item" v-if="!onlyRecipeName && recordItemData?.prescriptionList && recordItemData?.prescriptionList.length">
                药物处方
                <div class="info-table">
                    <div class="table">
                        <div class="th">
                            <div class="td">名称</div>
                            <div class="td width">品牌</div>
                            <div class="td">配比</div>
                            <div class="td">方式</div>
                        </div>
                        <div v-for="(prescriptionItem, prescriptionI) in recordItemData.prescriptionList" :key="prescriptionI">
                            <div class="tr" v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
                                <div class="td">{{ subP.typeName }}</div>
                                <div class="td width">{{ subP.defaultName }}</div>
                                <div class="td">{{ subP.ratio }}</div>
                                <div class="td">人工</div>
                            </div>
                        </div>
                        <!-- <div class="tr">
                            <div class="td width">80%代森锰锌</div>
                            <div class="td">山德生</div>
                            <div class="td">1:2000</div>
                            <div class="td">人工</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <slot name="footer"></slot>
    </div>
</template>

<script setup>
const props = defineProps({
    onlyRecipeName: {
        type: Boolean,
        default: false,
    },
    recordItemData: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<style lang="scss" scoped>
.record-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    margin: 0 10px 10px;
    .record-title {
        font-size: 16px;
        color: #333333;
    }
    .record-content {
        font-size: 12px;
        .info-item {
            color: #bbbbbb;
            margin-bottom: 4px;
            .info-val {
                color: #666666;
            }
        }
        .recipe-name {
            display: flex;
            .name-text {
                flex: none;
            }
            
            .rescription {
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .info-table {
            margin-top: 8px;

            .table {
                border: 1px solid rgba(196, 196, 196, 0.8);
                border-radius: 4px;
                font-size: 13px;
                .th {
                    background: #f6f6f6;
                    color: #999999;
                    display: flex;
                    justify-content: space-between;
                    border-radius: 4px 4px 0 0;
                    padding: 4px 0;
                }
                .tr {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #333333;
                    padding: 10px 0;
                }

                .tr + .tr {
                    border-top: 1px solid rgba(0, 0, 0, 0.08);
                }
                .td {
                    width: 25%;
                    padding: 0 2px;
                    text-align: center;
                }
                .width {
                    width: 55%;
                }
            }
        }
    }
}
</style>