manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/component/relatedContacts.vue

<template>
    <div class="relatedTasks pl-4 pr-4 pt-3 pb-3 h-full flex flex-col">
        <div class="flex justify-between">
            <div class="title">相关联系人</div>
            <div v-permission="['contactsAdd']">
                <el-button type="primary" @click="editContacts(information)">新建联系人</el-button>
            </div>
        </div>
        <div class="flex-1 overflow-auto pt-3">
            <el-table :data="relatedCustomertable" border style="width: 100%;height: 300px;">
                <el-table-column label="序号" width="80">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="联系人姓名">
                    <template #default="scope">
                        <el-button link type="primary" size="large">{{
                            scope.row.name
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话号码" width="130" />
                <el-table-column prop="email" label="邮箱" width="130" />
                <el-table-column prop="position" label="职务" width="130" />
                <el-table-column prop="sexValue" label="性别" width="130" />
                <el-table-column prop="ownerName" label="负责人" width="130" />
                <el-table-column prop="creatorName" label="创建人" width="130" />
                <el-table-column prop="createTime" label="创建时间" width="130" />
            </el-table>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="allVisible.editContactsVisible" width="1000" :show-close="false" top="10vh">
            <template #header="{ close, titleId, titleClass }">
                <div class="flex justify-between items-center border-b pb-3 dialog-header">
                    <h4 :id="titleId">{{ '新建联系人' }}</h4>
                    <div>
                        <el-button type="primary" :loading="allLoading.editContactsSaveLoading"
                            @click="editContactsSave(false)">新建</el-button>
                        <el-button @click="closeVisible('editContactsVisible')">取消</el-button>
                    </div>
                </div>
            </template>
            <div class="h-[60vh] overflow-y-auto scroll-bar pt-3">
                <div class="ml-4 mr-4">
                    <GenerateForm ref="contactsTemplateRef" :data="contactsTemplate" :value="contactsTemplateValue"
                        :key="contactsTemplateRefKey" v-loading="allLoading.contactsTemplateRefLoading" />
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { GETGENERATEFOEM, URL_ADD } from '@/pages/contacts/api';
import { get, post } from '@/utils/request';
import { setTemplateDataDisable } from '@/utils/tools';
import { GenerateForm } from '@zmjs/form-design';
import { ref, reactive, onMounted, onUnmounted, defineExpose, inject, watchEffect } from 'vue'

const emits = defineEmits(['refreshData']);
const globalPopup = inject<GlobalPopup>('globalPopup')
const props = defineProps<{
    data: any
}>()

const information = ref({})
const relatedCustomertable = ref([])
const contactsTemplateValue = ref({})
const contactsTemplateRefKey = ref(1)
const contactsTemplateRef = ref<typeof GenerateForm>()
const contactsTemplate = ref({
    list: [],
    config: {}
})

function editContactsSave(flag: boolean) {
    contactsTemplateRef.value?.getData().then((res: any) => {
        allLoading.editContactsSaveLoading = true
        post(URL_ADD, { ...contactsTemplateValue.value, ...res }).then((_res) => {
            allVisible.editContactsVisible = flag
            globalPopup?.showSuccess('操作成功')
            if (flag) {
                contactsTemplateRef.value?.reset()
            }
            emits('refreshData')
        }).finally(() => {
            allLoading.editContactsSaveLoading = false
        })
    }).catch((_err: any) => {
        console.log(_err)
        globalPopup?.showError('请填写完整')
    })
}

function editContacts(data: any) {
    showVisible('editContactsVisible')
    const { id, telPhone } = data
    contactsTemplateValue.value = { customId: id, phone: telPhone }
    allLoading.contactsTemplateRefLoading = true
    setTimeout(() => {
        contactsTemplateRefKey.value++
        allLoading.contactsTemplateRefLoading = false
    }, 1000);
}

const allLoading = reactive({
    contactsTemplateRefLoading: false,
    editContactsSaveLoading: false
})

const allVisible = reactive({
    editContactsVisible: false,
})

watchEffect(() => {
    const { data } = props
    information.value = data
    relatedCustomertable.value = (data.contacts || [])
})

async function getSystemField() {
    const datas = await get(GETGENERATEFOEM)
    let newConfig = JSON.parse(datas.data[0].config)
    newConfig.list = setTemplateDataDisable(newConfig.list, ['customId'])
    contactsTemplate.value = newConfig
}

function showVisible(type: keyof typeof allVisible) {
    allVisible[type] = true
}

function closeVisible(type: keyof typeof allVisible) {
    allVisible[type] = false
}

// 生命周期钩子
onMounted(() => {
    getSystemField()
});
</script>
<style scoped lang="scss">
.relatedTasks {
    .title {
        font-size: 18px;
        color: #000
    }
}
</style>