manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/components/detailcompinents/relatedTasks.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>
                <el-button type="primary" @click="newTask()">新建任务</el-button>
            </div>
        </div>
        <div class="flex-1 overflow-auto pt-3">
            <el-table :data="relatedTaskstable" border style="width: 100%;height: 100%;">
                <el-table-column prop="taskName" label="任务名称">
                    <template #default="scope">
                        <el-button link type="primary" size="large" @click="toTask()">{{
                            scope.row.taskName
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="priorityStr" sortable label="优先级" width="130" />
                <el-table-column prop="statusStr" label="状态" width="130" />
                <el-table-column prop="executorNamesStr" label="执行人" width="130" />
                <el-table-column prop="startTimes" sortable label="开始时间" width="130" />
                <el-table-column prop="endTimes" sortable label="截至时间" width="130" />
            </el-table>
        </div>
    </div>

    <!-- 新建任务 -->
    <TaskModal :visible="allVisible.taskModalVisible" :edit-form="taskModalForm" :save-loading="taskLoading"
        @close="closeTaskModal" @submit="submitForm" :title="'新建任务'" :disabled-list="props.disabledList" />
</template>
<script lang="ts" setup>
import { PRIORITY } from '../TaskModal/api';
import { STATUS } from '../../pages/tasks/api';
import { formatDate } from '../../utils/times';
import { createTaskFromType } from '../../utils/tools';
import { ElNotification, NotificationParamsTyped } from 'element-plus'
import { ref, reactive, onMounted, watchEffect } from 'vue'
import { useRouter } from "vue-router";
import TaskModal from '../TaskModal/index.vue'
import { createTask } from '../TaskModal/taskFunction';
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
import { Props, Emits } from './type';

const props = defineProps<Props>()
const emits = defineEmits<Emits>();

type saveLoadingType = "1" | "2" | "3" | "4"; //1是没有保存, 2是正在保存, 3是保存成功, 4是保存失败

const relatedTaskstable = ref([])
const information = ref<any>({})
const router = useRouter()
const taskLoading = ref<saveLoadingType>('1')
const taskModalForm = ref({}) // 任务弹窗表单
const allVisible = reactive({
    taskModalVisible: false
})

function submitForm(submitData: any, isClose: boolean) { // 任务提交
    taskLoading.value = '2'
    createTask(submitData, isClose).then((res) => {
        const { saveLoading, isClose } = res
        taskLoading.value = saveLoading
        allVisible.taskModalVisible = isClose
        globalPopup('新建成功', 'success')
        emits('refreshData')
    }).catch((err) => {
        const { saveLoading, isClose, message } = err
        taskLoading.value = saveLoading
        allVisible.taskModalVisible = isClose
        globalPopup(message, 'error')
    })
}

function globalPopup(str: string, type: string) {
    notificationTiop({
      message: str || '成功',
      type: type,
      title: "提示",
      duration: 2000
    })
}

const notificationTiop = (options: NotificationParamsTyped) => {
  ElNotification(options)
}

function newTask() {
    const { id } = information.value
    taskModalForm.value = { ...createTaskFromType(props.formTaskType), [props.filed as any]: id, }
    allVisible.taskModalVisible = true
}

function toTask() {
    router.push({
        path: `/tasks`
    })
}

function closeTaskModal() {
    allVisible.taskModalVisible = false
}

// 接收参数赋值
function receiveAssignment(item: any) {
    console.log(item, '<==== 过来的值')
    information.value = item.information
    const dataVal = item.data
    for (let i in dataVal) {
        dataVal[i].executorNamesStr = (dataVal[i].executorNames || []).join(','),
            dataVal[i].startTimes = dataVal[i].startDate ? formatDate(new Date(dataVal[i].startDate)) : '',
            dataVal[i].endTimes = dataVal[i].endDate ? formatDate(new Date(dataVal[i].endDate)) : '',
            dataVal[i].priorityStr = PRIORITY.find(item => item.value == dataVal[i].priority)?.label || '',
            dataVal[i].statusStr = STATUS.find(item => item.value == dataVal[i].status)?.label || ''
    }
    relatedTaskstable.value = dataVal
}

watchEffect(() => {
    receiveAssignment(props)
});

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