bonus-material-app/src/pages/back/addBack.vue

<template>
	<view style="padding-top: 4vh;background-color: rgb(220, 244, 255);">
	    <uni-nav-bar left-icon="left" @clickLeft="leftClick" right-icon="scan" @clickRight="rightClick" title="退料新增" title-style="font-weight: bolder;"  backgroundColor="rgb(220, 244, 255)" :border="false" />
	</view>
    <view class="accept page-common">
        <div class="card">
            <uni-forms :model="formData" label-width="170rpx" :border="true"> 
                <uni-forms-item label="退料单位：" name="unitId"> 
					<eselect style="width: 100%;height: 90rpx;"  
					ref="treeSelect" :options="unitList" @change="getProject" @clear="clearUnit"></eselect>
                </uni-forms-item>
                <uni-forms-item label="退料工程：" name="proId">
                    <eselect style="width: 100%;height: 90rpx;"
                    ref="treeSelect2" :options="proList" @change="changePro" @clear="clearPro"></eselect>
                </uni-forms-item>
                <uni-forms-item label="退料人员：" name="backPerson">
                    <uni-easyinput v-model="backPerson" maxlength="10" placeholder="请输入退料人" />
                </uni-forms-item>
                <uni-forms-item label="联系电话：" name="phone">
                    <uni-easyinput v-model="phone" maxlength="11" placeholder="请输入联系电话" />
                </uni-forms-item>
            </uni-forms>
        </div>

        <div class="btn">
            <button class="btn-cont" @click="clearForm">清空</button>
            <button class="btn-cont" @click="confirmAdd">确认</button>
        </div>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUnitList,getProjectList,insertApp,getAgreementInfoById } from '../../services/back.js';
import eselect from '@/components/tree-select/eselect.vue';
const treeSelect = ref(null)
const treeSelect2 = ref(null)
const formData = ref({})
const unitId = ref("")
const proId = ref("")
const agreementId = ref("")
const unitList = ref([])
const proList = ref([])
const backPerson = ref("")
const phone = ref("")

//单位
const getUnit = () => {
	// proId.value=e.id;
    let obj = {
        // "projectId":proId.value, 
	} 
	getUnitList(obj).then(res => {
		console.log(res)
		unitList.value = res.data;
        // getAgreement()
	}).catch(error => {
		console.log(error) 
	})  
} 
//工程
const getProject = (e) => {
	// console.log(e)
	unitId.value=e.id;
    let obj = {
        "unitId":unitId.value,
        // "isApp":true
	} 
	getProjectList(obj).then(res => { 
		proList.value = res.data
		proId.value=""
		treeSelect2.value.clearInput();
		agreementId.value=""
        // getAgreement()
	}).catch(error => {
		console.log(error) 
	})  
}
const clearUnit = () =>{
	unitId.value="";
	agreementId.value=""
}
const clearPro = () =>{
	proId.value="";
	agreementId.value=""
}
//工程选择
const changePro = (e) => {
	// console.log(e)
	proId.value=e.id
	getAgreement()
} 
//协议
const getAgreement = () => { 
    let obj = {
        "unitId":unitId.value,
        "projectId":proId.value
	} 
	getAgreementInfoById(obj).then(res => { 
        console.log(res)
        if(res.code==200){
            agreementId.value=res.data.agreementId
        }else{
            agreementId.value=""
        }
	}).catch(error => {
		console.log(error) 
	})  
} 


//清空
const clearForm = () => { 
    unitId.value=""
    proId.value=""
    backPerson.value=""
    phone.value="" 
	agreementId.value=""
	treeSelect.value.clearInput()
	treeSelect2.value.clearInput()
    getUnit()
    // getProject()
} 
//确认
const confirmAdd = () => {
	if(agreementId.value==""){
		uni.showToast({ title: "请确认退料单位,退料工程!", icon: 'none' })
	}else if(backPerson.value==""){
		uni.showToast({ title: "请确认退料人!", icon: 'none' })
	}else if(phone.value==""){
		uni.showToast({ title: "请确认联系电话!", icon: 'none' })
	}else{ 
		let obj = {
			"backApplyInfo":{
				"agreementId":agreementId.value,
				"backPerson":backPerson.value,
				"phone":phone.value
			}
		} 
		insertApp(obj).then(res => { 
			console.log(res)
			if(res.code==200){
				uni.showToast({ title: '新增成功', icon: 'none' })
				uni.navigateBack({
					delta: 1 // 返回到已存在的页面
				});
			}else{
				uni.showToast({ title: res.msg, icon: 'none' })
			}
		}).catch(error => {
			console.log(error) 
		})
	}
} 
const leftClick = () => {
    console.log(1)
    uni.navigateBack({
        delta: 1 // 返回到已存在的页面
    });
}
const rightClick = () => {
    console.log(2)
    uni.navigateTo({ url: `/pages/back/backCodeAdd` })
}
onLoad((options)=>{ 
    getUnit()
    // getProject()
	// formData.value = JSON.parse(options.item)
})
</script>

<style lang="scss">
.accept {
    padding: 24rpx;
    height: 90vh;
    word-break: break-all;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;

    // 卡片样式
    .card {
        padding: 32rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;
        height: auto;

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                padding: 24rpx 0;
                margin-bottom: 0;
                border-bottom: 2rpx solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .uni-forms-item__label {
                    color: #8c8c8c;
                }

                // 下拉选择框样式
                .uni-data-select {
                    .uni-select {
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 88rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-select__input-box {
                            height: 88rpx;
                            line-height: 88rpx;
                        }

                        .uni-select__input-text {
                            font-size: 28rpx;
                            color: #262626;
                        }
                    }
                }

                // 输入框样式
                .uni-easyinput {
                    .uni-easyinput__content {
                        background-color: #f7f8fa;
                        border: 2rpx solid #e8e8e8;
                        border-radius: 12rpx;
                        height: 88rpx;
                        padding: 0 24rpx;
                        transition: all 0.3s ease;

                        &:focus-within {
                            border-color: #3784fb;
                            box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
                        }

                        .uni-easyinput__content-input {
                            font-size: 28rpx;
                            height: 88rpx;
                            line-height: 88rpx;
                            color: #262626;
                        }
                    }
                }
            }
        }
    }

    // 底部按钮
    .btn {
        margin-top: auto;
        padding: 32rpx;
        // background: #fff;
        // box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        gap: 24rpx;

        .btn-cont {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            color: #fff;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }

            // 清空按钮样式
            &:first-child {
                background: #fff;
                color: #3784fb;
                border: 2rpx solid #3784fb;
                box-shadow: none;

                &:active {
                    background: #f7f8fa;
                }
            }
        }
    }
}
</style>