forestry-wx/src/models/select-warehouse-input/select-warehouse-input.vue

<template>
    <view class="flex1">
        <slot>
            <template v-for="(item, index) in values" :key="index">
                <view class="pd-24 mb-12 warehouse-item p-rtv f-s-32 c-#333 f-w-500">
                    {{ item.warehouseName }}{{ item.shelvesName ? '-' : '' }}{{ item.shelvesName || '' }}
                    <view class="close-icon pd-16" @click="deleteItem(index)">
                        <up-icon color="#F81242" name="close" size="32rpx"></up-icon>
                    </view>
                </view>
            </template>
            <up-button @click="clickSlot" type="primary" plain>
                <image class="w-36 h-36 mr-10" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/select_push_icon.png" mode="widthFix" />
                <span>请{{ title }}</span>
            </up-button>
        </slot>
    </view>
    <SelectWarehouseDialog v-model="values" v-if="showWarehouse" v-model:show="showWarehouse" :title="title" :params="params" @confirm="confirmSelection"></SelectWarehouseDialog>
</template>
<script setup lang="ts">
import SelectWarehouseDialog from '../select-warehouse-dialog/select-warehouse-dialog.vue';
const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [],
    },
    title: {
        type: String,
        default: '请选择存放库房',
    },
    params: {
        type: Object,
        default: () => ({}),
    },
});
const emit = defineEmits(['update:modelValue']);
const values = ref<any[]>(props.modelValue);
const showWarehouse = ref(false);
const clickSlot = () => {
    showWarehouse.value = true;
};
const confirmSelection = (selectedValues: any[]) => {
    values.value = selectedValues;
    emit('update:modelValue', selectedValues);
};
const deleteItem = (index: number) => {
    values.value.splice(index, 1);
    emit('update:modelValue', values.value);
};
</script>
<script lang="ts">
export default {
    options: {
        // 微信小程序中 options 选项
        multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
        styleIsolation: 'shared', //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
        addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
        virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
    },
};
</script>
<style lang="scss" scoped>
.warehouse-item {
    background-color: #fbfdfb;
    border: 1px solid #afddbb;
    border-radius: 10px;
}
.close-icon {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
}
</style>