agriculture-one-map/src/views/addFarm/components/table.vue

<template>
    <div class="table">
        <div class="header">
            <div class="header-item">
                <span>使用功效：</span>
                {{ pesticideFertilizerListItem.typeName }}
            </div>
            <div class="header-item">
                <div class="header-title">肥药名称：</div>
                <!-- <el-select class="select" v-model="value">
                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                </el-select> -->

                <el-select
                    filterable
                    @change="handlePesticideFertilizerChange"
                    v-model="pesticideFertilizerListItem.pesticideFertilizerId"
                    placeholder="请选择"
                    class="select"
                >
                    <el-option
                        v-for="item in pesticideFertilizersOptions"
                        :key="item.id"
                        :label="item.defaultName"
                        :value="item.id"
                    />
                </el-select>
            </div>
        </div>
        <div class="body">
            <div class="th">
                <div class="td"></div>
                <div class="td">配比<span>(药剂：兑水量)</span></div>
                <!-- <div class="td">施用方式</div> -->
                <div class="td">单亩用量</div>
            </div>
            <div class="tr">
                <div class="td">人工</div>
                <div class="td input-class">
                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.ratio" placeholder="" size="small" />
                </div>
                <div class="td input-class">
                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.muUsage" placeholder="" size="small" />
                </div>
            </div>
            <div class="tr" v-show="hasFly">
                <div class="td">无人机</div>
                <div class="td input-class">
                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.ratio2" placeholder="" size="small" />
                </div>
                <div class="td input-class">
                    <el-input  @change="emitVal" v-model="pesticideFertilizerListItem.muUsage2" placeholder="" size="small" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
const props = defineProps({
    pesticideFertilizerList: {
        type: Object,
        default: () => {},
    },
    hasFly: {
        type: Boolean,
        default: true
    },
    pIndex: {},
    cIndex: {},
});

let pesticideFertilizerListItem = ref({
    key: 1,
    typeName: "",
    muUsage: "",
    muUsage2: "",
    ratio: "",
    ratio2: "",
    remark: "",
});

watch(() => props.pesticideFertilizerList, (newVal, oldVal) => {
    pesticideFertilizerListItem.value = props.pesticideFertilizerList
})
watch(() => props.hasFly, () => {})

onMounted(() => {
    pesticideFertilizerListItem.value = props.pesticideFertilizerList;
});

let pesticideFertilizersOptions = ref([
    {
        id: "null",
        name: "芸苔素内酯 15000倍",
        typeName: "30",
        defaultRatio: null,
        defaultDroneRatio: null,
        unit: 0,
        defaultName: "调节",
    },
]);

VE_API.order.pesticideFertilizers().then(({ data }) => {
    pesticideFertilizersOptions.value = data;
});

/**
 * 选择药肥的时候修改订单中药肥pesticideFertilizerId 以外其他数据
 * @param index
 */
const handlePesticideFertilizerChange = () => {
    let obj = pesticideFertilizersOptions.value.filter(
        (item) => pesticideFertilizerListItem.value.pesticideFertilizerId === item.id
    )[0];
    pesticideFertilizerListItem.value = {
        ...pesticideFertilizerListItem.value,
        typeName: obj.typeName,
        unit: obj.unit,
        defaultRatio: obj.defaultRatio,
        usageModeList: obj.usageModeList,
        ratio: obj.defaultRatio,
        defaultName: obj.defaultName,
        pesticideFertilizerName: obj.name,
        pesticideFertilizerCode: obj.pesticideFertilizerCode,
    };
    console.log("ite", pesticideFertilizerListItem.value);
};

const emit = defineEmits(["updateTableData"])
function emitVal() {
    emit("updateTableData", props.pIndex, props.cIndex, pesticideFertilizerListItem.value)
}

function getItem() {
    return pesticideFertilizerListItem.value
}
defineExpose({ getItem });
</script>

<style lang="scss" scoped>
.table {
    .header {
        display: flex;
        justify-content: center;
        .header-item {
            display: flex;
            align-items: center;
            color: #727272;
            .header-title {
                flex: none;
            }
        }
        .header-item + .header-item {
            margin-left: 36px;
        }
    }
    .body {
        border: 1px solid #444444;
        border-radius: 5px;
        .th {
            border-bottom: 1px solid #444444;
        }
        .th,
        .tr {
            display: flex;
            align-items: center;
            color: #727272;
            height: 46px;
            font-size: 16px;
            .td {
                text-align: center;
                flex: 1;
                span {
                    font-size: 11px;
                    display: inline-block;
                }
            }
            .td + .td {
                border-left: 1px solid #444444;
                height: 46px;
                line-height: 46px;
            }
        }
        .tr + .tr {
            border-top: 1px solid #444444;
        }
    }
    .select {
        min-width: 110px;
        ::v-deep {
            .el-select__wrapper {
                background: transparent;
                padding: 0;
                box-shadow: none;
            }
            .el-select__placeholder,
            .el-select__caret {
                color: #ffd489;
            }
        }
    }

    .input-class {
        ::v-deep {
            .el-input {
                width: 90%;
            }
            .el-input__wrapper {
                background: transparent;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
            }
            .el-input__inner {
                color: #ffd489;
            }
        }
    }
}
</style>