ys-app/src/pages/business/CRM/marketActivity/components/wtVisistComponent.vue

<template>
    <uni-forms ref="formRef" :model="formData"  label-width="100px" label-position="top">
        <uni-forms-item label="客户人员" name="customerUserList" class="f-c-right">
            <uni-easyinput v-model="formData.customerUserList" placeholder="请选择客户人员" name="input"
            :disabled="isDisabled"
                @focus="chooseClientUser"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="我方参与人" name="myUserList" class="f-c-right">
            <uni-easyinput v-model="formData.myUserList" placeholder="请选择我方参与人" name="input"
            :disabled="isDisabled"
                @focus="chooseMyUser"></uni-easyinput>
        </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="handleDeleteVisistDetailItem" size="mini">删 除</button>
        <button class="btn-primary" type="primary" @click="submitForm" size="mini">保存/修改</button>
    </view>
</template>

<script setup name="wtVisitComponent">
import { ref, reactive } from 'vue'
import cache from '../../../../../utils/cache'
import { onShow, onUnload } from '@dcloudio/uni-app';
import { addVisistDetail, deleVisistDetailItem, getVisistDetailItem } from '../../../../../api/crm/activity/activity';

let customerUserList = ref([])
let myUserList = ref([])
let activeTxt = ref('')
let isDisabled = ref(false)
const props = defineProps({
    cusName: String, //客户单位名称
    cusId: Number,//客户ID
    visistId: Number,//活动ID
    status: String //状态
})

// 表单数据
const formData = ref({
    customerUserList,
    myUserList,
    activeTxt
});

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

//删除明细项的内容
let wtDeleteForm = reactive({})
function handleDeleteVisistDetailItem() {
    wtDeleteForm.treeName = '文体活动'
    wtDeleteForm.visistId = props.visistId
    deleVisistDetailItem(wtDeleteForm).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: '删除成功',
                duration: 2000
            });
            //响应成功，删除缓存记录
            handleDelete()
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            });
        }
    })
}

// 删除内容
let handleDelete = () => {
    formData.value.customerUserList = null
    formData.value.myUserList = null
    formData.value.activeTxt = null
    if (cache.get('checkedWTClientList') != null) {
        cache.remove('checkedWTClientList');
    }
    if (cache.get('checkedWTMyUserList') != null) {
        cache.remove('checkedWTMyUserList');
    }
}

//删除缓存
let handleDeleteLocal = () => {
    cache.remove('checkedWTClientList');
    cache.remove('checkedWTMyUserList');
}

let wtForm = reactive({})
// 保存/修改
const submitForm = async () => {
    try {
        // 验证表单
        await formRef.value.validate();
        // 验证通过后的操作
        uni.showToast({
            title: '验证通过',
            icon: 'success'
        });
        wtForm.treeName = '文体活动'
        wtForm.cusId = props.cusId
        wtForm.visistId = props.visistId

        if (Array.isArray(myUserList.value)) {
            wtForm.ourPersonnel = myUserList.value.join(',')
        } else {
            wtForm.ourPersonnel = myUserList.value
        }

        if (Array.isArray(customerUserList.value)) {
            wtForm.cusPersonnel = customerUserList.value.join(',')
        } else {
            wtForm.cusPersonnel = customerUserList.value
        }

        wtForm.bandResult = activeTxt.value
        // 提交服务器进行新增
        addVisistDetail(wtForm).then(res => {
            if (res.code == 200) {
                uni.showToast({
                    title: '提交成功',
                    duration: 2000
                });
                //响应成功，删除缓存记录
                handleDeleteLocal()
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                });
            }
        })
    } catch (err) {
        console.log('表单验证失败:', err);
    }
};

//页面渲染完成后，查询catch的get
onShow(() => {

    if (cache.get('checkedWTClientList') != null && cache.get('checkedWTClientList') != []) {
        customerUserList.value = cache.get('checkedWTClientList')
    }

    if (cache.get('checkedWTMyUserList') != null && cache.get('checkedWTMyUserList') != []) {
        myUserList.value = cache.get('checkedWTMyUserList')
    }


        if(props.status=='完成'){
        isDisabled.value = true
    }else{
        isDisabled.value = false
    }
})

//查询日常走访的内容
let queryWTForm = reactive({})
let getWTVisitReportDetailContent = () => {
    queryWTForm.visistId = props.visistId
    queryWTForm.cusId = props.cusId
    queryWTForm.treeName = '文体活动'
    getVisistDetailItem(queryWTForm).then(res => {
        if (res.rows[0] != null) {
            customerUserList.value = res.rows[0].customerPersonnel
            myUserList.value = res.rows[0].ourPersonnel
            activeTxt.value = res.rows[0].bandResult
        }
    })
}



//页面卸载之后，删除缓存信息
onUnload(() => {
    handleDeleteLocal()
})


//选择客户人员
function chooseClientUser() {
    uni.navigateTo({
        url: '/pages/business/CRM/marketActivity/customerUserList?cusName=' + props.cusName + '&chooseType=文体活动'
    })
}

//选择我方参与人
function chooseMyUser() {
    uni.navigateTo({
        url: '/pages/business/CRM/marketActivity/myUserList?chooseType=文体活动'
    })
}

// 明确暴露给父组件的方法
defineExpose({
    handleDelete,
    getWTVisitReportDetailContent
})

</script>


<style scoped lang="scss">
.all-body {
    /* #ifdef APP-PLUS */
    top: 150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top: 120rpx;
    height: calc(100vh);
    /* #endif */
}

.search {
    display: flex;
}

.search .btn-search {
    border: none;
    background: none;
    line-height: normal;
    color: #fff;
    line-height: 56rpx !important;
    padding: 10rpx 0 0;
    text-align: left;
    cursor: pointer;
}

.search .btn-search::after {
    display: none;
}

.search .custom-search {
    width: 80%;

}

.search .custom-search.uni-searchbar {
    padding-right: 0 !important;
}

.scroll-h {
    /* #ifdef APP-PLUS */
    height: calc(100vh - 120px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 110px);
    /* #endif */
}

.white-bg {
    padding-bottom: 10rpx;
}
</style>