ys-app/src/pages/business/CRM/visitorReportEnter.vue

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'走访报告内容录入'" :leftFlag="true" :rightFlag="false"></customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 日常走访 -->
            <view class="white-bg white-bg-2">
                <view class="w-b-title" @click="handleExpand">日常走访
                    <text>
                        {{ expandFlag ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlag, 'icon-down': expandFlag }"></i>
                    </text>
                </view>
                <view v-if="!expandFlag" class="form-con">
                    <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
                        <uni-forms-item label="客户人员" name="guestName1" class="f-c-right">
                            <multipleSelect :multiple="true" :value="monIndex1" downInner :options="guestList1"
                                @change="changeValue1" :key="Math.round()"  :slabel="'label'"
                            ></multipleSelect>
                        </uni-forms-item>
                        <uni-forms-item label="我方参与人" name="guestName2" class="f-c-right">
                            <multipleSelect :multiple="true" :value="monIndex2" downInner :options="guestList2"
                                @change="changeValue2" :key="Math.round()"  :slabel="'label'"
                            ></multipleSelect>
                        </uni-forms-item>
                        <uni-forms-item label="活动内容" name="activeCon" required
                            class="uni-forms-item is-direction-top is-top">
                            <multipleSelect :multiple="true" :value="monIndex3" downInner :options="guestList3"
                                @change="changeValue3" :key="Math.round()" :slabel="'label'"
                            ></multipleSelect>
                        </uni-forms-item>
                        <uni-forms-item label="活动文字" name="activeTxt" class="uni-forms-item is-direction-top is-top">
                            <uni-easyinput  type="textarea" autoHeight v-model="formData.activeTxt" placeholder="请输入" class="form-texarea" />
                        </uni-forms-item>
                    </uni-forms>
                    <view class="footer-con">
                        <button class="btn-default" type="default" @click="handleDelete" size="mini">删 除</button>
                        <button class="btn-primary" type="primary" @click="submitForm" size="mini">保存/修改</button>
                    </view>
                </view>

            </view>

            <!-- 业务招待 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpand2">业务招待
                    <text>
                        {{ expandFlag2 ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlag2, 'icon-down': expandFlag2 }"></i>
                    </text>
                </view>
                <view v-if="!expandFlag2" class="form-con">
                    业务招待
                </view>
            </view>

            <!-- 技术交流 -->
            <view class="white-bg white-bg-2 white-bg-3">
                <view class="w-b-title" @click="handleExpand3">技术交流
                    <text>
                        {{ expandFlag3 ? '展开' : '收起' }}
                        <i :class="{ iconfont: true, 'icon-up': !expandFlag3, 'icon-down': expandFlag3 }"></i>
                    </text>
                </view>
                <view v-if="!expandFlag3" class="form-con">
                    技术交流
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'


// 日常走访
let expandFlag = ref(false);
let handleExpand = () => {
    expandFlag.value = !expandFlag.value;
}

// 客户人员
let monIndex1= reactive([0]);
const changeValue1 = (item, value) => {
    console.log("客户人员", item, value);
    monIndex1 = value;
};
const guestList1 = [
    { value: 0, label: "客户1" },
    { value: 1, label: "客户2" },
    { value: 2, label: "客户3" },
    { value: 3, label: "客户4" },
    { value: 4, label: "客户5" },
];

// 我方人员
let monIndex2= reactive([0]);
const changeValue2 = (item, value) => {
    console.log("我方人员", item, value);
    monIndex2 = value;
};
const guestList2 = [
    { value: 0, label: "我方1" },
    { value: 1, label: "我方2" },
    { value: 2, label: "我方3" },
    { value: 3, label: "我方4" },
    { value: 4, label: "我方5" },
];

// 活动内容
let monIndex3= reactive([0]);
const changeValue3 = (item, value) => {
    console.log("活动内容", item, value);
    monIndex2 = value;
};
const guestList3 = [
    { value: 0, label: "活动内容1" },
    { value: 1, label: "活动内容2" },
    { value: 2, label: "活动内容3" },
    { value: 3, label: "活动内容4" },
    { value: 4, label: "活动内容5" },
];

// 业务招待
let expandFlag2 = ref(true);
let handleExpand2 = () => {
    expandFlag2.value = !expandFlag2.value;
}

// 技术交流
let expandFlag3 = ref(true);
let handleExpand3 = () => {
    expandFlag3.value = !expandFlag3.value;
}

// 表单ref
const formRef = ref(null);

// 表单数据
const formData = ref({
    guestName1: '',
    guestName2: '',
    activeCon:'',
    activeTxt: ''
});
// 验证规则
const rules = {
    activeCon: {
        rules: [
            { required: true, errorMessage: '请选择活动内容' }
        ]
    }

};

// 删除
let handleDelete = ()=>{

}
// 保存/修改
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: 690rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg.white-bg-2 {
    margin-bottom: 20rpx;
}
.white-bg.white-bg-3 {
    border-radius:0
}

.white-bg .w-b-title {
    color: #3384DF;
    font-size: 38rpx;
}

.form-con{
    padding:30rpx 0 0;
}
:deep(.form-con .uni-forms-item){
    margin-bottom:22px !important;
}

</style>