measure/src/components/hc-report/modules/index.vue

<template>
    <div :class="ui" class="hc-report-tasks-user-box">
        <div class="tag-user-list" @click="userShowModal">
            <template v-for="(item, index) in userData" :key="index">
                <el-tag>{{ item.userName }}</el-tag>
                <hc-icon v-if="(userData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
            </template>
            <div v-if="userData.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
        </div>
        <!-- 选择任务人 -->
        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { arrToKey, deepClone, getObjValue } from 'js-fast-way'
import HcUserModal from './user-modal.vue'

//参数
const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    data: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['change'])

//监听基础数据
const dataInfo = ref(props.data)
watch(() => props.data, (data) => {
    dataInfo.value = getObjValue(data)
}, { deep: true, immediate: true })

//展开弹窗
const isUserModalShow = ref(false)
const userShowModal = () => {
    isUserModalShow.value = true
}

//选择完成
const userData = ref([])
const fixedUserFinish = (data) => {
    const res = deepClone(data)
    userData.value = res
    const userIds = arrToKey(res, 'userId', ',')
    emit('change', userIds)
}
</script>

<style lang="scss">
@import './index.scss';
</style>