admin/src/components/related-project/related-project.vue

<template>
    <div class="hc-related-project-box">
        <div class="add-btn" @click="addFormList">
            <i class="i-iconoir-plus" />
            <span class="ml-[1px]">添加项目</span>
        </div>
        <div v-for="(item, index) in formList" :key="index" class="hc-form-list">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-select v-model="item.projectId" filterable block @change="projectChange($event, index)">
                        <el-option v-for="(items) in projectList" :key="items.id" :label="items.projectName" :value="items.id" />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select v-model="item.contractId" filterable block @change="contractChange($event, index)">
                        <template v-for="(items) in projectList[item.projectIndex]?.contractInfoList" :key="items.id">
                            <el-option :label="items.contractName" :value="items.id" />
                        </template>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select v-model="item.roleId" filterable block @change="roleChange($event, index)">
                        <el-option v-for="(items) in roleList" :key="items.id" :label="items.roleName" :value="items.id" />
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button hc-btn type="danger" @click="delFormList(index)">删除</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { arrIndex, deepClone, getArrValue, isNullES } from 'js-fast-way'
import { onMounted, ref } from 'vue'
import mainApi from '~api/certificate/list'

defineOptions({
    name: 'HcRelatedProject',
})

//双向绑定
// eslint-disable-next-line no-undef
const queryValue = defineModel('modelValue', {
    default: '',
})

//初始变量
const formList = ref([])
const formValue = ref([])

//渲染完成
onMounted(() => {
    getDataApi()
})

const getDataApi = async () => {
    await getProjectAndContract()
    await getRoleData()
    await setInitData()
}

//项目列表
const projectList = ref([])
const getProjectAndContract = async () => {
    const { data } = await mainApi.queryProjectAndContract()
    projectList.value = getArrValue(data)
}

//获取角色方
const roleList = ref([])
const getRoleData = async () => {
    const { data } = await mainApi.queryRole()
    roleList.value = getArrValue(data)
}

//添加项目
const addFormList = () => {
    formList.value.push({ projectId: '', projectIndex: -1, contractId: '', contractIndex: -1, roleId: '' })
}

//设置初始数据
const setInitData = async () => {
    const val = queryValue.value
    if (isNullES(val)) return
    const arr = val.split(','), project = projectList.value
    let newFormArr = []
    for (let i = 0; i < arr.length; i++) {
        const items = arr[i].split('-')
        const projectIndex = arrIndex(project, 'id', items[0])
        const contractArr = getArrValue(project[projectIndex]?.contractInfoList)
        const contractIndex = arrIndex(contractArr, 'id', items[1])
        newFormArr.push({
            projectId: items[0],
            projectIndex: projectIndex,
            contractId: items[1],
            contractIndex: contractIndex,
            roleId: items[2],
        })
    }
    formList.value = newFormArr
    formValue.value = arr
}

//项目选择
const projectChange = (id, index) => {
    const pindex = arrIndex(projectList.value, 'id', id)
    formList.value[index].projectIndex = pindex ?? -1
    formList.value[index].contractIndex = null
    formList.value[index].contractId = null
}

//合同段选择
const contractChange = (id, index) => {
    const contractList = projectList.value[formList.value[index].projectIndex]?.contractInfoList ?? []
    const cindex = arrIndex(contractList, 'id', id)
    formList.value[index].contractIndex = cindex ?? -1
}

//角色被选择
const roleChange = (id, index) => {
    const form = deepClone(formList.value[index])
    const testValue = `${form.projectId}-${form.contractId}-${id}`
    const testIndex = formValue.value.indexOf(testValue)
    if (testIndex === -1) {
        formValue.value.push(testValue)
        queryValue.value = formValue.value.join(',')
    } else if (testIndex !== index) {
        window.$message.error('关联的项目参见方不可重复')
        formList.value[index].roleId = null
    }
}

//删除当前项目
const delFormList = (index) => {
    const list = deepClone(formList.value)
    list.splice(index, 1)
    formList.value = list
}
</script>

<style scoped lang="scss">
.hc-related-project-box {
    position: relative;
    color: #606266;
    font-size: 14px;
    padding: 0 12px;
    min-height: 32px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dddfe6;
    cursor: pointer;
    user-select: none;
    transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    &:hover {
        border-color: var(--el-color-primary);
    }
    .add-btn {
        position: relative;
        display: flex;
        align-items: center;
        i {
            font-size: 18px;
        }
    }
    .add-btn + .hc-form-list {
        margin-top: 10px;
    }
    .hc-form-list {
        position: relative;
        margin-bottom: 10px;
    }
}
</style>