hazardousWaste_app/pages/components/WarehousingInfo.vue

<!-- 获取仓库数据 -->
<template>
    <view class="content">
        <uv-form ref="formRef" class="form" :model="formData" label-width="150rpx">
            <!-- 仓库 -->
            <uv-form-item label="仓库" prop="warehouse">
                <u-cell @click="onClick('warehouse')">
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text" v-if="formData?.warehousing?.[0]?.deptName">
                            {{ formData?.warehousing?.[0].deptName }}
                        </text>
                        <text class="placeholder" v-else> 请选择仓库</text>
                        <uni-icons type="right" size="10" />
                    </view>
                </u-cell>
            </uv-form-item>
            <!-- 存储区 -->
            <uv-form-item label="存储区" prop="storageArea">
                <u-cell @click="onClick('storageArea')">
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text" v-if="formData?.storageArea?.[0]?.deptName">
                            {{ formData?.storageArea?.[0].deptName }}
                        </text>
                        <text class="placeholder" v-else> 请选择存储区</text>
                        <uni-icons type="right" size="10" />
                    </view>
                </u-cell>
            </uv-form-item>
            <!-- 备注 -->
            <uv-form-item label="备注">
                <uv-input v-model="formData.remark" placeholder="请输入备注" align="right" border="none" />
            </uv-form-item>
        </uv-form>
    </view>
</template>
<script setup>
import { ref, toRefs } from 'vue';
import { objectToQuery } from '../until';
import { onShow } from "@dcloudio/uni-app";

const props = defineProps({
    // 数据：仓库信息
    warehouseInfo: {
        type: Object,
        default: null,
        required: false
    },
    // 数据：路径参数
    pathParams: {
        type: Object,
        default: null,
        required: false
    }
})
const { warehouseInfo, pathParams } = toRefs(props)

// 表单数据
const formData = ref({ remark: '', warehousing: '', storageArea: '' })

// 赋值:更新列表值
const setFormData = (d) => {
    if (!d) return;
    formData.value = d
}
// 渲染：更新列表值
onShow(() => {
    setFormData(warehouseInfo.value)
})

// 点击事件：选择仓库/选择存储区
const onClick = (type) => {
    uni.setStorageSync('app_billRemark', formData.value.remark)

    let query = { ...pathParams.value, backStr: 'stockIn' }
    if (type == 'warehouse') {
        query = objectToQuery({ ...query, flag: 'warehousing' })
    } else if (type == 'storageArea') {
        query = objectToQuery({ ...query, flag: 'storageArea' })
    }
    uni.navigateTo({
        url: `/pages/warehousing/toChooseList${query}`,
    });
}

//暴露：向父组件暴露 - 暂时没用
defineExpose({
    getWarehousingInfo: () => {
        return { ...formData.value }
    }
})

</script>
<style lang="scss" scoped>
::v-deep .form {
    // background-color: #fff;
    padding: 0 0 12rpx 0;

    .uv-input__content {

        .uv-input__content__field-wrapper__field {
            text-align: right !important;
        }
    }

    .uv-form-item__body {
        background-color: #fff;
        padding: 12rpx;
        margin-bottom: 2rpx;
        align-items: center;
    }

    .uv-form-item__body__left__content__label {
        font-size: 14px;
    }

    .uv-line {
        border-bottom: 0 !important;
    }

    .uv-form-item__body__right__content__slot {
        justify-content: flex-end;
        align-items: center;
    }

    .uv-cell__body {
        padding: 0
    }

    .uni-icons {
        display: block;
    }

    .u-slot-title {

        display: flex;
        align-items: center;
    }
}

.placeholder {
    color: rgb(192, 196, 204);
    margin-right: 10rpx;
}
</style>