150 lines
4.4 KiB
Vue
150 lines
4.4 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" :title="'走访报告添加'" :leftFlag="true" :rightFlag="true">
|
||
<template #right>
|
||
<view class="head-right" @click="submitForm">
|
||
<uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
|
||
color="#B7D2FF"></uni-icons>保存
|
||
</view>
|
||
</template>
|
||
</customHeader>
|
||
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
|
||
<!-- 正文内容 -->
|
||
<view class="white-bg">
|
||
<view class="form-con">
|
||
<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" >
|
||
<uni-forms-item label="客户名称" name="guestName" class="f-c-right">
|
||
<picker @change="bindPickerChange" :value="guestIndex" :range="guestArr">
|
||
<view class="f-c-text">
|
||
{{guestArr[guestIndex]}}
|
||
<uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="签到记录" class="f-c-right">
|
||
<view class="f-c-text txt-right">--</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="我方领导" name="leader" required class="uni-forms-item is-direction-top is-top">
|
||
<uni-easyinput v-model="formData.leader" placeholder="请输入我方领导" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="走访日期" name="visitDate" class="uni-forms-item is-direction-top is-top">
|
||
<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.visitDate" @change="changeDate" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import customHeader from '@/components/customHeader.vue'
|
||
import{ getGuestList} from '@/api/business.js'
|
||
|
||
// 客户名称列表
|
||
let guestList = ref([]);
|
||
let guestArr = ref([])
|
||
let guestIndex = ref(0);
|
||
let selectGuestList = async ()=>{
|
||
let res = await getGuestList();
|
||
let list = res.list;
|
||
list.forEach(item => {
|
||
guestArr.value.push(item.name)
|
||
});
|
||
guestList.value = res.list
|
||
}
|
||
selectGuestList();
|
||
|
||
// 选择客户列表
|
||
let bindPickerChange = (e)=>{
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
guestIndex.value = e.detail.value
|
||
}
|
||
|
||
// 表单ref
|
||
const formRef = ref(null);
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
guestName:'',
|
||
leader:'',
|
||
visitDate:''
|
||
});
|
||
// 验证规则
|
||
const rules = {
|
||
leader: {
|
||
rules: [
|
||
{ required: true, errorMessage: '我方领导不能为空' }
|
||
]
|
||
}
|
||
|
||
};
|
||
|
||
// 修改日期
|
||
let changeDate = (e)=>{
|
||
console.log('changeDate:', e);
|
||
};
|
||
|
||
// 保存走访报告
|
||
const submitForm = async () => {
|
||
try {
|
||
// 验证表单
|
||
await formRef.value.validate();
|
||
|
||
// 验证通过后的操作
|
||
uni.showToast({
|
||
title: '验证通过',
|
||
icon: 'success'
|
||
});
|
||
console.log('表单数据:', formData.value);
|
||
|
||
// 这里可以添加提交到服务器的代码
|
||
|
||
} catch (err) {
|
||
console.log('表单验证失败:', err);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.white-bg {
|
||
width: 750rpx;
|
||
padding: 30rpx 0 0;
|
||
margin-bottom: 0;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
.form-con{
|
||
/* #ifdef APP-PLUS */
|
||
height:calc(100vh - 100px)
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
height:calc(100vh - 80px)
|
||
/* #endif */
|
||
}
|
||
|
||
:deep(.uni-date-x){
|
||
display: block;
|
||
}
|
||
:deep(.uni-date-x .icon-calendar){
|
||
float: right;
|
||
margin-top:15rpx;
|
||
margin-right: 20rpx;
|
||
background:url('../../../static/images/business/icon-date.png') no-repeat;
|
||
background-size:32rpx 35rpx;
|
||
width:32rpx;
|
||
height: 35rpx;
|
||
}
|
||
:deep(.uni-date-x .icon-calendar::before){
|
||
display: none;
|
||
}
|
||
:deep(.uni-date-x .uni-date__x-input){
|
||
padding-left:20rpx;
|
||
color:#919191;
|
||
}
|
||
</style> |