hac/src/views/home/task/task-details.vue

<template>
    <HcCard scrollbar actionUi="text-center">
        <HcCardItem>
            <div class="hac-task-name-box">
                <div class="label">任务名称</div>
                <div class="name">{{ taskBasicsInfo?.taskName }}</div>
            </div>
            <div class="hac-task-text-box">
                <span>上报类型：{{ taskBasicsInfo?.ReportTypeName }}</span>
                <span class="ml-10">上报人：{{ taskBasicsInfo?.reportUser }}</span>
                <span class="ml-10">上报时间：{{ taskBasicsInfo?.reportDate }}</span>
            </div>
        </HcCardItem>

        <HcCardItem title="任务详情" class="mt-4">
            <div class="h-52">
                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData"/>
            </div>
        </HcCardItem>

        <HcCardItem title="操作任务" class="mt-4" v-if="dataType === '任务审批'">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="" :disabled="tabsKey !== 1">
                <el-form-item label="变更类别：" prop="type" size="large">
                    <el-radio-group v-model="formModel.type" size="large">
                        <el-radio label="1">已完成</el-radio>
                        <el-radio label="2" class="ml-4">任务转移</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="完成时间：" prop="finish_time" class="w-72" v-if="formModel.type === '1'">
                    <el-date-picker class="block" v-model="formModel.finish_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="转移时间：" prop="transfer" class="w-72" v-if="formModel.type === '2'">
                    <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="转移对象：" prop="type" size="large" v-if="formModel.type === '2'">
                    <div class="form-item-div">张三</div>
                </el-form-item>
                <el-form-item label="转移原因：" prop="textContent" v-if="formModel.type === '2'">
                    <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcCardItem>

        <HcCardItem title="数据详情" class="mt-4"  v-if="dataType!=='任务审批'">
             <!-- 报销 -->
            <div class="hc-info-list" v-if="dataType=='报销审批'">
                <HcListItem title="报销金额：" :content="otherInfo?.frMoney"/>
                <HcListItem title="发生日期：" :content="otherInfo?.frDate"/>
                <HcListItem title="费用类型：" :content="otherInfo?.frTypeName"/>
                <HcListItem title="费用说明：" :content="otherInfo?.frDesc"/>
                <HcListItem title="电子发票：" >
                    <HcImg ui="img" :index="0"
                    v-if="otherInfo?.frElectronicInvoiceUrl"
                           :src="otherInfo?.frElectronicInvoiceUrl"
                           :srcs="[otherInfo?.frElectronicInvoiceUrl]"
                    />
          
                </HcListItem>
                <HcListItem title="附件文件：" >
                    <HcImg ui="img" :index="0"
                    v-if="otherInfo?.frElectronicInvoiceUrl"
                            :src="otherInfo?.frAttachmentUrl"
                           :srcs="[otherInfo?.frAttachmentUrl]"
                    />
        
                </HcListItem>
                <HcListItem title="归属人：" :content="otherInfo?.userNameVesting"/>
                <HcListItem title="备注信息：" content="备注数据"/>
            </div>
             <!-- 出差审批 -->
            <div class="hc-info-list" v-if="dataType==='出差审批'">
                <tripInfo :other-info="otherInfo"/>
            </div>
             <!-- 支付申请 -->
            <div class="hc-info-list" v-if="dataType==='支付审批'">
                <paymentRequest :other-info="otherInfo"/>
            </div>
              <!-- 借款申请 -->
             <div class="hc-info-list" v-if="dataType==='借款审批'">
                <loanRequest :other-info="otherInfo"/>
            </div>
             <!-- 采购申请 -->
            <div class="hc-info-list" v-if="dataType==='采购审批'">
                <purchaseRequest :other-info="otherInfo"/>
            </div>
            <!-- 用车申请 -->
            <div class="hc-info-list" v-if="dataType==='用车审批'">
                <vehicleRequest :other-info="otherInfo"/>
            </div>
            <!-- 开票申请 -->
            <div class="hc-info-list" v-if="dataType==='发票审批'">
                <invoiceRequest :other-info="otherInfo"/>
            </div>
              <!-- 外包支付 -->
            <div class="hc-info-list" v-if="dataType==='外包支付'">
                <outsourcing :other-info="otherInfo"/>
            </div>
            <!-- 成本测算 -->
            <div class="hc-info-list" v-if="dataType==='成本测算'">
                <costBudget :other-info="otherInfo"/>
            </div>
           
        </HcCardItem>
  
        <HcCardItem title="操作任务" class="mt-4" v-if="dataType !== '1' && authType">
            <HcListItem ui="items-center" title="支付状态：">
                <el-radio-group v-model="taskBasicsInfo.payStatus" size="large">
                    <el-radio label="1">已支付</el-radio>
                    <el-radio label="0" class="ml-4">待支付</el-radio>
                </el-radio-group>
            </HcListItem>
        </HcCardItem>

        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="tabsKey === 'to-do'">取消并返回</span>
                <span v-else>返回</span>
            </el-button>
            <el-button size="large" type="danger" hc-btn @click="groundsShow"   v-if="tabsKey === 1">
                <HcIcon name="arrow-go-forward"/>
                <span>驳回申请</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="doubleClick"  v-if="tabsKey === 1">
                <HcIcon name="check-double"/>
                <span>审核通过</span>
            </el-button>

            <!--模拟效果-->
            <!-- <div class="w-36 mx-6 inline-block">
                <el-select v-model="dataType" block placeholder="选择模拟类型" size="large">
                    <el-option label="任务详情" value="任务审批"/>
                    <el-option label="财务报销" value="报销审批"/>
                    <el-option label="采购审批" value="采购审批"/>
                    <el-option label="外包支付" value="外包支付"/>
                    <el-option label="借款审批" value="借款审批"/>
                    <el-option label="出差审批" value="出差审批"/>
                    <el-option label="支付申请" value="支付审批"/>
                    <el-option label="用车审批" value="用车审批"/>
                    <el-option label="发票审批" value="发票审批"/>
                    <el-option label="成本测算" value="成本测算"/>
                </el-select>
            </div> -->
            <!-- <el-button hc-btn @click="authTypeClick">模拟财务审核</el-button> -->
        </template>

        <HcDialog bgColor="#ffffff" isToBody :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
            <el-form ref="formGroundsRef" :model="formGroundsModel" :rules="formGroundsRules" label-width="0" size="large">
                <el-form-item prop="rejectDesc">
                    <el-input v-model="formGroundsModel.rejectDesc" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入驳回理由" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
import taskApi from '~api/home/task.js';
import {getArrValue,getObjValue,formValidate} from "js-fast-way"
import tripInfo from './components/trip-info.vue'//出差申请
import paymentRequest from './components/pay-request.vue'
import loanRequest from './components/loan-request.vue' 
import purchaseRequest from './components/purch-request.vue'//采购
import vehicleRequest from './components/vehicle-request.vue' 
import invoiceRequest from './components/invoice-request.vue' 
import outsourcing from './components/outsourcing.vue'
import costBudget from './components/cost-budget.vue'
import {useAppStore} from "~src/store";
import { getdepartmentList} from "~api/other";
const useAppState = useAppStore();


//初始变量
const router = useRouter()
const useRoutes = useRoute()
const tabsKey = ref(useRoutes?.query?.tabKey ?? '')
const dataType = ref(useRoutes?.query?.type ?? '')
const dataId = ref(useRoutes?.query?.id ?? '')
const authType = ref(false)//是否是财务人员

//缓存页面被激活时
onActivated(() => {
    tabsKey.value = useRoutes?.query?.tabKey ?? ''
    dataType.value = useRoutes?.query?.type ?? ''
    dataId.value = useRoutes?.query?.id ?? ''

    getTaskDatail()

})

const authTypeClick = () => {
    authType.value = !authType.value
}
const taskDetail=ref({})
const taskBasicsInfo=ref({})//基础信息
const otherInfo=ref({})
const getTaskDatail=async()=>{
    const {error, code, data} = await taskApi.getDetail({id: dataId.value})
    if (!error && code === 200) {
        taskDetail.value=getObjValue(data)
        tableData.value=data['planTaskInfoList']
        taskBasicsInfo.value=data['basicsInfo']
        otherInfo.value=data['otherInfo']
        let isFinancialPersonnel=data['basicsInfo'].isFinancialPersonnel
        if(isFinancialPersonnel==1){//1 是财务审核
            authType.value=true
        }else{
            authType.value=false
        }
    } else {
        taskDetail.value={}
    }
}
//部门
const departMent = ref([])

//任务表格
const tableColumn = [
    {key: 'projectName', name: '所属项目'},
    {key: 'taskDesc', name: '任务描述'}
]
const tableData = ref([])

//任务操作数据
const formRef = ref(null)
const formModel = ref({
    type: '1',
})
const formRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: "请输入节点名称"
    },
}
const formPay = ref('1')

const groundsShow = () => {
    groundsLoading.value = false
    groundsModal.value = true
}

//驳回弹窗
const groundsLoading = ref(false)
const groundsModal = ref(false)

//驳回表单
const formGroundsRef = ref(null)
const formGroundsModel = ref({rejectDesc: ''})
const formGroundsRules = {
    rejectDesc: {
        required: true,
        trigger: 'blur',
        message: "请输入驳回理由"
    },
}

//确认驳回
const saveGroundsClick = async() => {
 
    const res = await formValidate(formGroundsRef.value)
    if(res){
        const {error, code, data} = await taskApi.rejectTask(
        {
            id: taskDetail.value.basicsInfo.taskId,
            rejectDesc:formGroundsModel.value?.rejectDesc
        }
        )
        if (!error && code === 200) {
            window?.$message.warning('驳回成功!')
        }
        closeGroundsClick()
    }
 
   
    
    
}

//取消驳回
const closeGroundsClick = async() => {
    groundsModal.value = false
    groundsLoading.value = false
    console.log(formGroundsModel.value,'formGroundsModel');
    console.log(taskDetail.value,'renwu');

}

//审核通过
const doubleClick = async() => {
 
    console.log(formGroundsModel.value,'formGroundsModel');
    console.log(taskDetail.value,'renwu');
    const {error, code, data} = await taskApi.submitTask(
        {
            id: taskDetail.value.basicsInfo.taskId,
            payStatus:taskBasicsInfo.value?.payStatus
        }
        )
    if (!error && code === 200) {
        window?.$message.success('审核通过!')
    } 
}

//返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.hac-task-name-box {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #c5d7ff;
    border-radius: 3px;
    .label {
        position: relative;
        padding: 12px;
        background: #cddcff;
    }
    .name {
        position: relative;
        padding: 12px;
        border-left: 1px solid #c5d7ff;
    }
}
.hac-task-text-box {
    position: relative;
    font-size: 14px;
    margin-top: 14px;
}
</style>