hac/src/views/program/section/form.vue

<template>
    <HcCard actionUi="text-center">
        <template #header>
            <HcNewSwitch :datas="tabTab" :keys="tabKey" @change="tabChange" :round="false"/>
        </template>
        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #taskUser="{row}">
                <el-select v-model="row.taskUser" size="small">
                    <el-option v-for="item in department" :label="item.name" :value="item.id"/>
                </el-select>
            </template>
            <template #action="{row,index}" >
                <el-button size="small" type="primary" @click="openPlanModalShow(row)"  :disabled="row.startOrStop==1||row.startOrStop==0">开启</el-button>
                <el-button size="small" type="danger" @click="pausePlanModalShow(row)" :disabled="row.startOrStop==2||row.startOrStop==0">暂停</el-button>
            </template>
        </HcTable>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>

        <!--开启计划-->
        <HcDialog bgColor="#ffffff" isToBody title="开启计划" widths="40rem" saveText="保存"
                  :show="openPlanModal" @close="openPlanCloseClick" @save="openPlanSaveClick"
        >
            <HcListItem title="原计划起止日期：" :content=" openPlan.planStartTime+'~'+openPlan.planEndTime"/>
            <HcListItem title="中途暂停计划起止日期：" :content="openPlan.pausePlanStartTime+'~'+openPlan.pausePlanEndTime"/>
            <HcListItem title="中途开启计划起止日期：" isCenter>
                <HcDatePicker :dates="betweenTime" @change="betweenTimeUpdate"/>
            </HcListItem>
            <HcListItem title="项目原计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">{{ openPlan?.planDays }}</span>
            </HcListItem>
            <HcListItem title="上一次计划工时(天)：" isCenter>
                <span class="text-red text-xl">{{ openPlan?.lastOpenPlanStartEndDays }}</span>
            </HcListItem>
            <HcListItem title="上一次计划截止暂停阶段起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">{{ openPlan?.lastOpenPlanStartEndDays }}</span>
            </HcListItem>
            <div class="mt-8">
                <el-alert type="warning" title="提示：" description="该计划暂停之后开启的工时加上暂停前的工时已经超出原计划工时，是否安排不合理，请从新安排！" :closable="false"/>
            </div>
        </HcDialog>

        <!--暂停计划-->
        <HcDialog bgColor="#ffffff" isToBody title="暂停计划" widths="40rem" saveText="保存"
                  :show="pausePlanModal" @close="pausePlanCloseClick" @save="pausePlanSaveClick"
        >
            <HcListItem title="原计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="中途暂停计划日期：" isCenter>
                <el-date-picker type="date" class="block" value-format="YYYY-MM-DD"/>
            </HcListItem>
            <HcListItem title="中途开启计划起止日期：" content="2023-02-23~2023-02-28"/>
            <HcListItem title="原计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="原计划截止暂停阶段起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
            <HcListItem title="中途暂停之后开启计划起止工时(天)：" isCenter>
                <span class="text-red text-xl">6</span>
            </HcListItem>
        </HcDialog>

    </HcCard>
</template>

<script setup>

import {useRouter,useRoute} from 'vue-router'
import {onActivated, ref,watch} from "vue";
import sectionApi from '~api/program/section.js';
import {getArrValue,getObjValue,formValidate, arrIndex} from "js-fast-way"
import { getuserList} from "~api/other";
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')
const dataType = ref(useRoutes?.query?.type ?? '')
const planDate=ref(useRoutes?.query?.month ?? '')
const departmentType=ref(useRoutes?.query?.section ?? '')
const deptId=ref(useRoutes?.query?.deptId ?? '')
//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    dataType.value = useRoutes?.query?.type ?? ''
    planDate.value = useRoutes?.query?.month ?? ''
    departmentType.value = useRoutes?.query?.section ?? ''
    deptId.value = useRoutes?.query?.deptId ?? ''
    setTabData(departmentType.value)
    getDepartmentPlan()
    getDepartmentuserDict()//获取部门人员字典

 
})
//获取详情
const getDepartmentPlan=async()=>{
    const {error, code, data} = await sectionApi.getDepartmentPlan(
        {
            departmentType:departmentType.value,
            deptId:deptId.value,
            planDate:planDate.value,
           
        }
    )
    if (!error && code === 200) {
        console.log(getArrValue(data),'详情');
        tableData.value=getArrValue(data)
     
       

    } else {
        // milestoneData.value=[]
    }
}
const department=ref([])
//获取部门人员列表
const getDepartmentuserDict=async()=>{
    const {error, code, data} = await getuserList({deptId:deptId.value})
    if (!error && code === 200) {
        department.value = getArrValue(data)

    } else {
        department.value = []

    }
}

//类型tab数据和相关处理
const tabKey = ref('1')
const tabTab = ref([
    {key: '1', name: '市场部月度预算'},
    {key: '2', name: '研发部月度预算'},
    {key: '3', name: '实施部月度预算'},
    {key: '4', name: '维护部月度预算'},
    {key: '5', name: '人事行政(财务)部月度预算'},
]);
const tabChange = ({key}) => {
    tabKey.value = key
}
//设置tab
const setTabData=(key)=>{
    tabKey.value=key
    if(key=='1'){
        tabTab.value=[{key: '1', name: '市场部月度预算'}]
    }else if(key=='2'){
        console.log(2222222);
        tabTab.value=[{key: '2', name: '研发部月度预算'},]
    }else if(key=='3'){
        tabTab.value=[ {key: '3', name: '实施部月度预算'},]
    }else if(key=='4'){
        tabTab.value=[   {key: '4', name: '维护部月度预算'},]
    }else if(key=='5'){
        tabTab.value=[{key: '5', name: '人事行政(财务)部月度预算'},]
    }
}

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'projectName', name: '所属项目', minWidth: '160'},
    {key: 'projectProcessValue', name: '项目环节', width: '160', align: 'center'},
    {key: 'budgetTypeValue', name: '预算类型', width: '160', align: 'center'},
    {key: 'taskDetailValue', name: '任务明细', width: '160', align: 'center'},
    {key: 'planTaskType', name: '任务类型', width: '160', align: 'center'},
    {key: 'planTaskDesc', name: '任务描述', minWidth: '160', isTooltip: true},
    {key: 'planTarget', name: '完成指标', width: '160', align: 'center'},
    {key: 'taskUser', name: '任务人', width: '160', align: 'center'},
    {key: 'key10', name: '计划起止日期', width: '220', align: 'center'},
    {key: 'budgetTravelExpense', name: '预计差旅费(元)', width: '180', align: 'center'},
    {key: 'statusValue', name: '状态', width: '100', align: 'center'},
    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 2, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 3, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
    {id: 4, key1: 'xxx', key2: 'xxx', key3: 'xx', key4: 'xx', key5: 'xx', key6: 'xx', key10: '2022-07-01~2027-04-12'},
])

const getTableData = () => {

}

//开启计划
const openPlanModal = ref(false)
const openPlanModalShow = (row) => {
    getPlanInOpen(row.id)
    openPlanModal.value = true
}
//获取开启计划
const openPlan=ref({})
const getPlanInOpen=async(id)=>{
    const {error, code, data} = await sectionApi.getPlanInOpen({id})
    if (!error && code === 200) {
        openPlan.value = getObjValue(data)
        betweenTime.value=[openPlan.value.openPlanStartTime,openPlan.value.openPlanEndTime]
    } else {
        openPlan.value = {}

    }
}
const openPlanCloseClick = () => {
    openPlanModal.value = false
}
const openPlanSaveClick = () => {

}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr, query}) => {
    betweenTime.value = arr
}



//暂停计划
const pausePlanModal = ref(false)
const pausePlanModalShow = (row) => {
    getPlanInPause(row.id)
    pausePlanModal.value = true
}
//获取暂停计划
const pausePlan=ref({})
const getPlanInPause=async(id)=>{
    const {error, code, data} = await sectionApi.getPlanInPause({id})
    if (!error && code === 200) {
        pausePlan.value = getObjValue(data)

    } else {
        pausePlan.value = {}

    }
}
const pausePlanCloseClick = () => {
    pausePlanModal.value = false
}
const pausePlanSaveClick = () => {

}


//返回
const goBackClick = () => {
    router.back()
}
const saveLoaing=ref(false)
//提交保存
const saveClick = async() => {
    console.log(tableData.value,'tableData');
    saveLoaing.value=true
        const {error, code, data,msg} = await sectionApi.updateDepartmentPlan( {departmentPlanList:tableData.value})
        saveLoaing.value=false
        if (!error && code === 200) {
            window.$message.success(msg)
        } 

}
</script>