hac/src/views/project/list/list-info.vue

<template>
    <HcCard action-ui="text-center">
        <div class="hac-card-project-box">
            <div class="left-box">
                <el-scrollbar>
                    <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large" :disabled="dataType === 'view'">
                        <div class="project-form-top">
                            <HcCardItem title="基础信息">
                                <el-form-item label="项目名称：" prop="name">
                                    <el-input v-model="formModel.name" />
                                </el-form-item>
                                <el-form-item label="建设单位：" prop="constructUnit">
                                    <el-input v-model="formModel.constructUnit" />
                                </el-form-item>
                                <el-form-item label="类别：" prop="projectClass">
                                    <el-select v-model="formModel.projectClass" block clearable placeholder="请选择">
                                        <el-option v-for="item in projectClassdata" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="项目类型：" prop="projectType">
                                    <el-select v-model="formModel.projectType" block clearable placeholder="请选择">
                                        <el-option v-for="item in projectType" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="项目进程：" prop="key3">
                                    <el-select v-model="formModel.key3" block disabled="disabled" placeholder="请选择">
                                        <el-option v-for="item in projectProcess" :key="item.key" :label="item.dictName" :value="item.key" />
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="项目进程：" prop="currentProcessName">
                                    <el-input v-model="formModel.currentProcessName" disabled/>
                                </el-form-item> -->
                                <el-form-item label="服务类型：" prop="projectServerType">
                                    <el-select v-model="formModel.projectServerType" block clearable placeholder="请选择">
                                        <el-option v-for="item in serverType" :key="item.dictValue" :label="item.dictName" :value="item.dictValue" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="起止日期：">
                                    <HcDatePicker :dates="probetweenTime" clearable size="large" disabled="disabled" @change="betweenTimeUpdate" />
                                </el-form-item>
                                <el-form-item label="合同额：">
                                    <el-input v-model="formModel.contractMoney" disabled="disabled" />
                                </el-form-item>
                                <el-form-item label="已回款：">
                                    <el-input v-model="formModel.key7" disabled="disabled" />
                                </el-form-item>
                                <el-form-item label="未回款：">
                                    <el-input v-model="formModel.key7" disabled="disabled" />
                                </el-form-item>
                                <el-form-item label="已支出：">
                                    <el-input v-model="formModel.key7" disabled="disabled" />
                                </el-form-item>
                            </HcCardItem>
                        </div>
                        <div class="project-form-bottom">
                            <HcCardItem title="联系人信息">
                                <el-form-item label="项目负责人：">
                                    <el-select v-model="formModel.projectPrincipal" block clearable placeholder="请选择" size="large">
                                        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="实施负责人：">
                                    <el-select v-model="formModel.implementPrincipal" block clearable placeholder="请选择" size="large">
                                        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="维护负责人：">
                                    <el-select v-model="formModel.maintainPrincipal" block clearable placeholder="请选择" size="large">
                                        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </HcCardItem>
                        </div>
                    </el-form>
                </el-scrollbar>
            </div>
            <div class="right-box">
                <el-scrollbar class="hc--right-15">
                    <el-timeline class="p-1">
                        <el-timeline-item v-for="(item, index) in timeLineData" :key="index" :type="item.status === 3 ? 'success' : item.status === 2 ? 'primary' : 'info'">
                            <div class="hac-time-line-box">
                                <div class="hac-time-line-title-box">
                                    <div class="title">
                                        {{ item.name }}
                                    </div>
                                    <div class="state">
                                        {{ item.statusValue }}
                                    </div>
                                </div>
                                <div class="hac-time-line-time">
                                    <span v-if="item.processStartTime" class="time">{{ `${item.processStartTime}~${item.processEndTime}` }}</span>
                                    <span v-if="dataType !== 'view'" class="icon text-blue text-hover" @click="editTime(item)">
                                        <HcIcon name="edit-2" />
                                    </span>
                                </div>
                                <div v-if="item.editTime" class="hac-time-line-time picker">
                                    <div class="picker-box">
                                        <HcDatePicker :dates="item.betweenTime" clearable @change="probetweenTimeUpdate($event, item)" />
                                    </div>
                                    <div class="icon-box text-blue text-hover" @click="item.editTime = false">
                                        <HcIcon name="check" />
                                    </div>
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </el-scrollbar>
            </div>
        </div>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back" />
                <span v-if="dataType !== 'view'">取消并返回</span>
                <span v-else>返回</span>
            </el-button>
            <el-button v-if="dataType !== 'view'" size="large" type="primary" hc-btn :loading="saveLoading" :disabled="saveLoading" @click="doubleClick">
                <HcIcon name="check-double" />
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import { onActivated, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import projectApi from '~api/project/project-list.js'
import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
import { getDictInfo, getuserList } from '~api/other'
import { useAppStore } from '~src/store'
const useAppState = useAppStore()

const router = useRouter()
const useRoutes = useRoute()

//初始变量
const dataType = ref(useRoutes?.query?.type ?? 'view')
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    getProjectType()
    getProjectServerTypeDict()
    getprojectClassType()
    getProjectClass()
    dataType.value = useRoutes?.query?.type ?? 'view'
    dataId.value = useRoutes?.query?.id ?? ''
    getBaseProcess()
    getUserDict()
    if (dataType.value !== 'add') {
        getProjectInfoById()
        
    } else {
        formModel.value = {}
        probetweenTime.value = []
    }
   
})
onMounted(()=>{

  
})
//获取项目类型
const getProjectType = async ()=>{
    const { error, code, data } = await projectApi.getProjectTypeDict()
    if (!error && code === 200) {
        projectType.value = getArrValue(data)
    } else {
        projectType.value = []
    }
}
//获取项目服务类型
const getprojectClassType = async ()=>{
    const { error, code, data } = await projectApi.getProjectServerTypeDict()
    if (!error && code === 200) {
        projectClassType.value = getArrValue(data)
    } else {
        projectClassType.value = []
    }
}
//获取项目类行
const getProjectServerTypeDict = async ()=>{
    const { error, code, data } = await projectApi.getProjectServerTypeDict()
    if (!error && code === 200) {
        serverType.value = getArrValue(data)
    } else {
        serverType.value = []
    }
}
//获取项目类别
const getProjectClass = async ()=>{
    const { error, code, data } = await getDictInfo('project_class')
    if (!error && code === 200) {
        projectClassdata.value = getArrValue(data)
    } else {
        projectClassdata.value = []
    }
}
//获取所有员工
const userList = ref([])
//获取部门人员列表
const getUserDict = async ()=>{
    const { error, code, data } = await getuserList({ tenantId:useAppState.tenantId })
    if (!error && code === 200) {
        userList.value = getArrValue(data)

    } else {
        userList.value = []

    }
}
//获取项目详情
const getProjectInfoById = async ()=>{
    const { error, code, data } = await projectApi.getProjectInfoById({ id: dataId.value })
    if (!error && code === 200) {
        formModel.value = getObjValue(data)
        let arr = []
        arr[0] = formModel.value?.startTime
        arr[1] = formModel.value?.endTime
        probetweenTime.value = arr
        formModel.value.contractMoney = formModel.value.contractMoney > 0 ? formModel.value.contractMoney : ''
        timeLineData.value = formModel.value?.projectProcessList
    } else {
        formModel.value = {}
    }
}
//新增获取项目进程
const getBaseProcess = async ()=>{
    const { error, code, data } = await projectApi.getBaseProcess()
    if (!error && code === 200) {
        timeLineData.value = getArrValue(data)
    } else {
        timeLineData.value = []

    }
}
//项目类型
const projectType = ref([])
//项目类别
const projectClassdata = ref([])
const projectClassType = ref([])
//项目服务类型
const serverType = ref([])

//项目进程
const projectProcess = ref([
    { name: '商机-演示沟通', key: '1' },
    { name: '商机-成本核算及报价', key: '2' },
    { name: '合同-服务范围洽谈', key: '3' },
    { name: '产品-研发', key: '4' },
    { name: '产品-配置', key: '5' },
    { name: '产品-测试', key: '6' },
    { name: '产品-交付', key: '7' },
    { name: '实施-系统培训', key: '8' },
    { name: '实施-现场服务', key: '9' },
    { name: '实施-合同回款', key: '10' },
    { name: '项目验收', key: '11' },
])

//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {
    name: {
        required: true,
        trigger: 'blur',
        message: '请输入项目名称',
    },
    projectType: {
        required: true,
        trigger: 'blur',
        message: '请选择项目类型',
    },
    projectClass:{
        required: true,
        trigger: 'blur',
        message: '请选择类别',
    },
    constructUnit: {
        required: true,
        trigger: 'blur',
        message: '请选择项目建设单位',
    },

}


//日期时间被选择
const probetweenTime = ref(null)
const betweenTimeUpdate = ({ arr, query }) => {
    console.log(arr, 'arr')
    probetweenTime.value = arr
    formModel.value.betweenTime = query
    formModel.value.startTime = arr[0]
    formModel.value.endTime = arr[1]
    console.log(formModel.value.startTime, 'sta')
    if (arr.length === 0) {
        formModel.value.startTime = ''
        formModel.value.endTime = ''
        console.log( formModel.value.endTime, 'end')
    }
}
const betweenTime = ref(null)
const probetweenTimeUpdate = ({ arr }, item) => {
    betweenTime.value = arr
    item.processStartTime = arr[0]
    item.processEndTime = arr[1]
    item.betweenTime = arr
}
const editTime = (item)=>{
    item.editTime = true
    item.betweenTime = [item.processStartTime, item.processEndTime]
}
//时间线数据
const timeLineData = ref([
    { title: '商机-沟通演示', state: '已闭环', time: '2023-02-23~2023-03-14', type: 'success' },
    { title: '商机-成本核算及报价', state: '已闭环', time: '2023-02-23~2023-03-14' },
    { title: '合同-服务范围洽谈', state: '进行中', time: '2023-02-23~2023-03-14', type: 'primary' },
    { title: '产品-研发', state: '未开始', time: '' },
    { title: '产品-配置', state: '未开始', time: '' },
    { title: '产品-测试', state: '未开始', time: '' },
    { title: '产品-交付', state: '未开始', time: '' },
    { title: '实施-系统培训', state: '未开始', time: '' },
    { title: '实施-现场服务', state: '未开始', time: '' },
    { title: '实施-合同回款', state: '未开始', time: '' },
    { title: '劳务合同', state: '未开始', time: '' },
    { title: '交竣工验收', state: '未开始', time: '' },
])

//返回
const goBackClick = () => {
    router.back()
}
const saveLoading = ref(false)
//提交保存
const doubleClick = async () => {
    saveLoading.value = true
    formModel.value.projectProcessList = timeLineData.value
    const res = await formValidate(formRef.value)
    if (res) {
        if (dataId.value.length > 0) {
            formModel.value.id = dataId.value
            updateProjectInfo()
        } else {
            addProjectInfo()
        }
    } else {
        saveLoading.value = false
    }
}
//新增项目
const addProjectInfo = async ()=>{
    const { error, code, msg } = await projectApi.addProjectInfo( formModel.value)
    saveLoading.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
        router.push({
            name: 'project',
        })
    } 
}
//修改
const updateProjectInfo = async ()=>{
    const { error, code, msg } = await projectApi.updateProjectInfo( formModel.value)
    saveLoading.value = false
    if (!error && code === 200) {
       window.$message.success(msg)
       router.push({
            name: 'project',
        })
    } 

}
</script>

<style lang="scss" scoped>
.hac-card-project-box {
    position: relative;
    height: 100%;
    display: flex;
    .left-box, .right-box {
        flex: 1;
        position: relative;
        height: 100%;
    }
    .left-box {
        .project-form-top {
            margin-bottom: 24px;
            padding-right: 24px;
        }
        .project-form-bottom {
            padding-top: 24px;
            padding-right: 24px;
            border-top: 1px solid #e9e9e9;
        }
    }
    .right-box {
        padding-left: 24px;
        border-left: 1px solid #e9e9e9;
        .hac-time-line-box {
            position: relative;
            .hac-time-line-title-box {
                position: relative;
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-bottom: 12px;
                justify-content: space-between;
            }
            .hac-time-line-time {
                position: relative;
                display: flex;
                align-items: center;
                .time {
                    color: gray;
                    margin-right: 8px;
                }
                .icon {
                    font-size: 18px;
                }
                &.picker .icon-box {
                    font-size: 20px;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>

<style lang="scss">

</style>