hac/src/views/attendance/business-trip/info.vue

<template>
    <HcCard action-ui="text-center">
        <template #header>
            <div class="hc-expense-total-title">
                出差天数:{{ formModel?.durationAll || '' }}
            </div>
        </template>
        <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">
                            <el-form-item label="出差事由：" prop="tripDesc">
                                <el-input v-model="formModel.tripDesc" />
                            </el-form-item>
                            <HcCardItem v-for="(item, index) in formModel.journeyList" :title="`行程${Number(index + 1)}` " class="mt-2 hc-card-item-box" ui="hac-bg-grey">
                                <el-form :ref="(el) => setFormItemRefs(el, index)" :model="item" :rules="formItemRules" label-position="left" size="large">
                                    <el-form-item label="交通工具" prop="trafficType">
                                        <el-select v-model="item.trafficType" block clearable placeholder="请选择">
                                            <el-option v-for="item in trafficTypeData" :label="item.dictName" :value="item.dictValue" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="单程往返" prop="isSingletonType">
                                        <el-select v-model="item.isSingletonType" block clearable placeholder="请选择">
                                            <el-option v-for="item in wayType" :label="item.name" :value="item.key" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="出发城市" prop="startCity">
                                        <el-input v-model="item.startCity" />
                                    </el-form-item>
                                    <el-form-item label="目的城市" prop="endCity">
                                        <el-input v-model="item.endCity" />
                                    </el-form-item>
                                    <el-form-item label="开始时间" prop="startDate">
                                        <el-date-picker
                                            v-model="item.startDate"
                                            type="date"
                                            placeholder="请选择开始时间"
                                            style="width: 100%;"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"  
                                        />
                                    </el-form-item>
                                    <el-form-item label="结束时间" prop="endDate">
                                        <el-date-picker
                                            v-model="item.endDate"
                                            :getwarin="getwarin(item)"
                                            type="date"
                                            placeholder="请选择结束时间"
                                            style="width: 100%;"
                                            format="YYYY-MM-DD" 
                                            value-format="YYYY-MM-DD"  
                                        />
                                    </el-form-item>
                                    <el-form-item label="时长" prop="duration">
                                        <el-input v-model="item.duration" disabled :getdata="getDiffDaydata(item)" />
                                    </el-form-item>
                                </el-form>
                                <span class="tip ml-8">时长将自动计入考勤统计</span>
                                <!-- <template #extra>
                                        <el-button type="primary" size="small"  @click="addJourney(item,index)">
                                            <HcIcon name="add"/>
                                            <span>增加行程</span>
                                        </el-button>
                                        <el-button type="warning" size="small" @click="delJourney(item,index)" class="ml-2">
                                            <HcIcon name="delete-bin-2"/>
                                            <span>删除行程</span>
                                        </el-button>
                                    </template> -->
                                <template #extra>
                                    <el-button v-if="index > 0" type="danger" size="small" @click="delJourney(index)">
                                        <HcIcon name="delete-bin" />
                                        <span>删除行程</span>
                                    </el-button>
                                </template>
                            </HcCardItem>
                            <div class="mt-16" style="margin-bottom: 40px;">
                                <el-divider content-position="right" border-style="dashed">
                                    <el-button type="primary" hc-btn @click="addJourney(item, index)">
                                        <HcIcon name="add" />
                                        <span>添加行程</span>
                                    </el-button>
                                </el-divider>
                            </div>
                            
                            <el-form-item label="出差天数：" prop="durationAll" class="mt-4">
                                <el-input v-model="formModel.durationAll" disabled />
                            </el-form-item>
                            <el-form-item label="出差备注：" prop="remarks">
                                <el-input v-model="formModel.remarks" type="textarea" />
                            </el-form-item>
                            <el-form-item label="同行人" prop="fellowTravelerUserIds">
                                <el-select
                                    v-model="fellowTravelerUserIds"
                                    block clearable
                                    placeholder="请选择"
                                    style="width: 100%"
                                    multiple
                                >
                                    <el-option v-for="item in partneroptions" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属项目" prop="projectId">
                                <el-select v-model="formModel.projectId" block clearable placeholder="请选择">
                                    <el-option v-for="item in projectType" :label="item.projectName" :value="item.projectId" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="关联预算计划" prop="key">
                                <el-button type="primary" size="small" @click="budgetModalShow(item, index)">
                                    <HcIcon name="add" />
                                    <span>关联预算计划</span>
                                </el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-scrollbar>
            </div>
            <div class="right-box">
                <div class="record-flow-box">
                    <div class="title">
                        流程
                    </div>
                    <div class="content">
                        <el-scrollbar>
                            <el-timeline>
                                <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
                                    <div class="timeline-title">
                                        {{ item.title }}
                                    </div>
                                    <div class="timeline-section">
                                        {{ item.section }}
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </el-scrollbar>
                    </div>
                    <div class="action">
                        <el-button type="warning" hc-btn :loading="tempLoading" @click="tempDraftData">
                            <HcIcon name="draft" />
                            <span>暂存草稿</span>
                        </el-button>
                        <el-button type="primary" hc-btn :loading="saveLoading" @click="saveClick">
                            <HcIcon name="check-double" />
                            <span>提交出差申请</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 关联预算计划 -->
        <HcDialog
            bg-color="#ffffff" is-to-body is-table
            title="关联预算计划" widths="80%" save-text="保存"
            :show="budgetModal"
            @close="budgetCloseClick"
            @save="budgetSaveClick"
        >
            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
                <template #action="{ row, index }">
                    <el-button v-if="row.isRelevance" size="small" type="danger" @click="rowDisassociate(row)">
                        取消关联
                    </el-button>
                    <el-button v-else size="small" type="primary" @click="rowRelevance(row)">
                        关联
                    </el-button>
                </template>
            </HcTable>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import { onActivated, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDictInfo, getProjectList, getuserList } from '~api/other'
import { arrIndex, deepClone, formValidate, getArrValue } from 'js-fast-way'
import { getApprovesList } from '~api/other'
import businessApi from '~api/attendance/business-trip.js'
import { getDiffDay } from '~uti/tools'
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(() => {
  dataType.value = useRoutes?.query?.type ?? 'view'
  dataId.value = useRoutes?.query?.id ?? ''
  getTrafficType()
  getProjectData()
  getDetailsData()
  getUserDict()
  getApprovesListData()
})
const getDetailsData = async () => {
    if (dataType.value === 'view') {
        //预览详情
        let newDetails = {}, newDetails1 = {}
        const { error, code, data, msg } = await businessApi.detail({
            id: dataId.value,
        })
        //判断状态
        if (!error && code === 200) {
            const res = getObjValue(data)
            //基础数据
            Object.keys(detailsObj).forEach(key => {
                newDetails[key] = res[key]
            })
            //明细数据
            Object.keys(detailsObj1).forEach(key => {
                newDetails1[key] = res[key]
            })
            newDetails1.id = res?.id
         
            newDetails.details = [newDetails1]
            fellowTravelerUserIds.value = res.fellowTravelerUserIds.split(',')
        } else {
            newDetails = detailsObj
            newDetails.details = [detailsObj1]
      
            window.$message?.error(msg)
        }
        detailsData.value = newDetails
    } else if (dataType.value === 'draft') {
        //草稿详情
        const { error, code, data } = await businessApi.draftDetail({
            eMDraftIds: dataId.value,
        })
        //判断状态
        const res = getArrValue(data)
        if (!error && code === 200 && res.length > 0) {
            let newDetails = {}, newDetailsArr = []
            res.forEach((item, index) => {
                //基础数据
                if (index === 0) {
                    Object.keys(detailsObj).forEach(key => {
                        newDetails[key] = item[key]
                    })
                }
                //明细数据
                let newDetails1 = {}
                Object.keys(detailsObj1).forEach(key => {
                    newDetails1[key] = item[key]
                })
                newDetails1.id = item?.id
                newDetailsArr.push(newDetails1)
              
            })
            newDetails.journeyList = newDetailsArr
            fellowTravelerUserIds.value = res[0].fellowTravelerUserIds.split(',')
            console.log(formModel.value, 'formModel.value')
            formModel.value = newDetails
        } else {
          
            formModel.value = {
                ...detailsObj,
                details: [detailsObj1],
            }
        }
    } else {

        formModel.value = {
            ...detailsObj,
            details: [detailsObj1],
        }
    }
}
//获取间隔天数
const getDiffDaydata = (item)=>{
   let time = getDiffDay(item.startDate, item.endDate)
 
   item.duration = time || 0
}
const getwarin = (item)=>{
    if (item.endDate < item.startDate) {
        window.$message.warning('结束时间不能小于开始时间')
       
    }
}
//行程表单
const formItemRules = {
    isSingletonType: {
      required: true,
      trigger: 'blur',
      message: '请选择单程往返',
  },
  trafficType: {
      required: true,
      trigger: 'blur',
      message: '请选择交通工具',
  },
  startCity: {
      required: true,
      trigger: 'blur',
      message: '请选择出发城市',
  },
  endCity: {
      required: true,
      trigger: 'blur',
      message: '请选择目的城市',
  },
  startDate: {
      required: true,
      trigger: 'blur',
      message: '请选择开始时间',
  },
  endDate: {
      required: true,
      trigger: 'blur',
      message: '请选择结束时间',
  },
  duration: {
      required: true,
      trigger: 'blur',
      message: '请输入时长',
  },
  durationAll:{
    required: true,
      trigger: 'blur',
      message: '请输入天数',
  },
}
const formRefs = ref([])
const setFormItemRefs = (el, index) => {
    if (el) {
        let indexs = arrIndex(formRefs.value, 'index', index)
        if (indexs !== -1) {
            formRefs.value[index].ref = el
        } else {
            formRefs.value.push({ index: index, ref: el })
        }
    }
}

//获取表单的ref
const getFormRef = async (index) => {
    const indexs = arrIndex(formRefs.value, 'index', index)
    return formRefs.value[indexs].ref
}

//增加行程addJourney
const addJourney = (item, index)=>{
   formModel.value?.journeyList.push({})
}
const delJourney = (item, index)=>{
    console.log(index, 'index')
    formModel?.value.journeyList.splice(index, 1)
}
//单程往返
const wayType = ref([
  { name: '单程', key: 1 },
  { name: '往返', key: 2 },
 
])
//交通工具
const trafficTypeData = ref([

])
//交通类型字典
const getTrafficType = async () => {
    const { error, code, data } = await getDictInfo('traffic_type')
    //判断状态
    if (!error && code === 200) {
        trafficTypeData.value = getArrValue(data)
    } else {
        trafficTypeData.value = []
    }
}
//出发城市cityType
const cityType = ref([
  { name: '北京', key: '1' },
  { name: '上海', key: '2' },
  { name: '深圳', key: '3' },
  { name: '成都', key: '4' },
])
//项目类型
const projectType = ref([

])

//获取项目数据

const getProjectData = async () => {
    const { error, code, data } = await getProjectList()
    //判断状态
    if (!error && code === 200) {
        projectType.value = getArrValue(data)
    } else {
        projectType.value = []
    }
}
//同行人

const partneroptions = ref([])

const getUserDict = async ()=>{
    const { error, code, data } = await getuserList({ tenantId:useAppState.tenantId })
    if (!error && code === 200) {
      partneroptions.value = getArrValue(data)

    } else {
      partneroptions.value = []

    }
}
//合同类型
const contractType = ref([
  { name: '咨询服务+软件', key: '1' },
  { name: '软件', key: '2' },
  { name: '咨询服务', key: '3' },
  { name: '后期服务+软件', key: '4' },
  { name: '数字化扫描+软件', key: '5' },
])



//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    journeyList:[{}],
})
//深度监听
watch(() => [
    formModel.value.journeyList,
], ([datas]) => {
   let timeall = 0
   formModel.value.journeyList.forEach((ele)=>{
    timeall = ele.duration + timeall
   })
   formModel.value.durationAll = timeall//计算总时长
}, { deep: true })
const formRules = {
    tripDesc: {
      required: true,
      trigger: 'blur',
      message: '请输入项出差事由',
  },
 
  projectId: {
      required: true,
      trigger: 'blur',
      message: '请选择项目',
  },


}


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


//时间线数据
const timeLineData = ref([
    { title: '审批人', section: '' },

 
  
])
const timeData = ref([])
const getApprovesListData = async ()=>{
    timeLineData.value = [ { title: '审批人', section: '' }]
    const { error, code, data } = await getApprovesList()
    if (!error && code === 200) {
     timeData.value = data['出差管理流程']
     let approveArr = timeData.value['审批人']
     let copyArr = timeData.value['抄送人']
    approveArr.forEach((ele)=>{
        timeLineData.value.push({ title:'', section:ele })
    })
    timeLineData.value.push({ title:'抄送人', section:copyArr.join(',') })
    } else {
        timeLineData.value = []
    }
}


//关联预算计划
const budgetModal = ref(false)
const budgetIds = ref([])
const budgetIndex = ref([])
const relatedIds = ref([])
const budgetModalShow = (item, index) => {
    budgetModal.value = true
    budgetIndex.value = index
    // budgetIds.value = item.budgetPlanIds?.split(',') || []
    const { budgetPlanIds } = formModel.value
    relatedIds.value = budgetPlanIds?.split(',') || []
    budgetIds.value = formModel.value.projectId
    getBudgetTableData(formModel.value.projectId)
}
const budgetCloseClick = () => {
    budgetModal.value = false
}
const budgetSaveClick = () => {
    // const index = budgetIndex.value
    const ids = relatedIds.value.join(',')
    formModel.value.budgetPlanIds = ids
    window.$message.success('操作成功')
    budgetModal.value = false
    console.log( formModel.value, ' formModel.value.value.details')
}

//关联预算计划表格
const tableBudgetColumn = [
    { key: 'projectName', name: '任务所属项目' },
    { key: 'statusName', name: '状态', width: '120', align: 'center' },
    { key: 'planTaskDesc', name: '任务描述' },
    { key: 'planTarget', name: '完成指标', width: '120', align: 'center' },
    { key: 'action', name: '操作', width: '100', align: 'center' },
]

const tableBudgetData = ref([])
const tableBudgetLoading = ref(false)
const getBudgetTableData = async (projectId) => {
    tableBudgetLoading.value = true
    const { error, code, data } = await businessApi.budget({ projectId })
    //判断状态
    tableBudgetLoading.value = false
    if (!error && code === 200) {
        tableBudgetData.value = await isRowRelevance(data)
    } else {
        tableBudgetData.value = []
    }
}
//判断是否关联
const isRowRelevance = async (data) => {
    const res = getArrValue(data)
    const ids = relatedIds.value
    console.log(relatedIds.value, 'relatedIds.value')
    res.forEach(item => {
        console.log(item.id, 'item.id')
        item.isRelevance = ids.includes(item.id)
    })
    return res
}

//取消关联
const rowDisassociate = (row) => {
    const ids = relatedIds.value
    const index = ids.indexOf(row.id)
    if (index > -1) {
        ids.splice(index, 1)
    }
    relatedIds.value = ids
    row.isRelevance = false


}

//关联
const rowRelevance = (row) => {
    tableBudgetData.value.forEach((ele)=>{
        ele.isRelevance = false
        rowDisassociate(ele)
    })
    const ids = relatedIds.value
    console.log(relatedIds.value, 'relatedIds.value')
    ids.push(row.id)
    relatedIds.value = ids
    row.isRelevance = true
}

//行程
const detailsObj1 = {
    trafficType: '', // 交通工具
    isSingletonType: '', // 单程往返
    startCity: '', // 出发城市
    endCity: '', //目的城市
    startDate: null, // 开始时间
    endDate: null, // 结束时间
    duration: null, // 时长
    //details: [detailsObj1],
}
//基础详情
const detailsObj = {
  
    tripDesc: '', // 出差事由
    durationAll: 0, // 出差天数
    fellowTravelerUserIds: '', // 同行人
    remarks: '', //出差备注
    projectId: '', // 所属项目
    submitStatus: null, // 审提交状态 1=暂存 2=提交审批
    journeyList: [detailsObj1],
    budgetPlanIds:null, //预算计划ID
}
const fellowTravelerUserIds = ref([])
//处理表单数据
const getFormData = (submitStatus = 1) => {
    const res = deepClone(formModel.value)
  

    //----处理数据----
    let newFormData = [], newDetails = {}
    //基础数据
    Object.keys(detailsObj).forEach(key => {
        newDetails[key] = res[key]
    })
    //组装为数组集合的表单数据
    const list = res?.journeyList
    list.forEach(item => {
        newFormData.push({
            ...newDetails,
            ...item,
    
            submitStatus, //提交状态 1=暂存 2=提交审批
        })
    })
    return newFormData
}
const saveLoading = ref(false)
const saveClick = async ()=>{
    const res = await formValidate(formRef.value)
    if (!res) return false
    //处理明细表单效验
    saveLoading.value = true
    const form = getFormData(2)
    for (let i = 0; i < form.length; i++) {
        const refs = await getFormRef(i)
        const res = await formValidate(refs)
        if (!res) {
            saveLoading.value = false
            return
        } else {
           
            form[0].fellowTravelerUserIds = fellowTravelerUserIds.value.join(',')
            console.log(form, 'form')
            const { error, code, msg } = await businessApi.submit(form)
            //判断状态
            tempLoading.value = false
            if (!error && code === 200) {
                window.$message?.success('保存成功')
                router.push({
                    name: 'attendance-business-trip',
                })
            } 
        }
        saveLoading.value = false
    }
    //发起请求
}
//暂存数据
const tempLoading = ref(false)
const tempDraftData = async () => {
    tempLoading.value = true
    const form = getFormData(1)
    form.forEach((ele)=>{
        ele.fellowTravelerUserIds = fellowTravelerUserIds.value.join(',')
    })
    console.log(form, 'form')
    const { error, code, msg } = await businessApi.submit(form)
   
  
    //判断状态
    tempLoading.value = false
    if (!error && code === 200) {
        window.$message?.success('暂存成功')
    } else {
        window.$message?.error(msg)
    }
}
</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 {
    flex: 2;
      .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 {
    // flex: 1;
      padding-left: 24px;
    //   border-left: 1px solid #e9e9e9;
     
      .record-flow-box {
        position: relative;
        height: 100%;
        width: 380px;
        padding-left: 24px;
        border-left: 1px solid #e9e9e9;
        .title {
            position: relative;
            font-size: 20px;
            color: #101010;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .content {
            position: relative;
            height: calc(100% - 60px - 43px);
            .timeline-title {
                font-size: 20px;
                color: #101010;
            }
            .timeline-section {
                margin-top: 10px;
                color: #1784FC;
                font-size: 16px;
            }
        }
        .action {
            position: relative;
            padding: 10px 0;
            display: flex;
            justify-content: space-around;
        }
    }
  }
}
.tip{
    color: gray;
  
    font-size: 14px;
}
.right-box-title{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}
.hc-expense-total-title {
    color: #101010;
    font-size: 20px;
}
.hac-card-project-box .left-box .hc-card-item-box.hac-bg-grey {
    background: #f7f7f7;
}
</style>

<style lang="scss">

</style>