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

<template>
    <view class="con-body">
        <view >
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'走访报告添加客户人员'" :leftFlag="true" :rightFlag="false">
            </customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>
            <uni-easyinput prefixIcon="search" v-model="searchContent" placeholder="请输入客户人员名称" clearable
                @iconClick="iconClick">
            </uni-easyinput>
                <checkbox-group class="block" @change="checkboxChange">
                    <view class="itemClass" v-for="(item, index) in dataList" :key="item.userId">
                        <checkbox class='checkBoxClass' :value="item.userName"></checkbox>
                        <view class="clientClass">
                            <text class="blue-text">{{ item.userName }}</text>
                            {{ " | " }}
                            {{ item.userDept != null ? item.userDept : ' ' }}
                            {{ item.job != null ? item.job : ' ' }}
                            {{ item.mobilePhone }}
                            {{ item.remark != null ? item.remark : ' ' }}
                        </view>
                    </view>
                </checkbox-group>
        </view>
    </view>
</template>

<script setup>
import customHeader from '@/components/customHeader.vue'
import { crmCustomerUser } from '../../../api/crm/api_ys.js'
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMessage } from '../../../utils/message.js'
import cache from '../../../utils/cache'



const message = useMessage();

//点击查询客户人员
const queryParams = ref({
    cusName: '',
    pageNum: 1,
    pageSize: 10
})


onMounted(() => {
    getClientUserName()
})

onLoad(options => {
    queryParams.value.cusName = options.cusName
})
const dataList = ref([])

function getClientUserName() {
    crmCustomerUser(queryParams.value).then(res => {
        dataList.value = res.rows
    })
}


//查询某一客户人员
let searchContent = ref('')

function iconClick() {
    message.toast('点击了查询，当前内容：' + searchContent.value)
}

//监视查询的内容的变化
watch(searchContent,(newValue,oldValue)=>{
    queryParams.value.nickName = searchContent.value
    //变化了之后，重新查询内容
    crmCustomerUser(queryParams.value).then(res => {
        dataList.value = res.rows
    })
})



//勾选内容
function checkboxChange(e) {
    cache.set('checkedRCClientList', e.detail.value)
}



</script>

<style scoped lang="scss">

.con-body{
    background: white;
}


/* Container for the checkbox group */
.checkbox-group.block {
    width: 100%;
}

/* Each item row */
.itemClass {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    margin-left: 15rpx;
    border-bottom: 1px solid #eee;
    /* optional divider */
}

/* Checkbox styling */
.checkBoxClass {
    margin-right: 12rpx;
}

/* Content container */
.clientClass {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 36rpx;
    color: #333;
    /* default text color */
}

/* Blue username text */
.blue-text {
    /* or any blue you prefer */
    margin-right: 5rpx;
}
</style>