Cold_erp_web/src/views/salary/ReimburseMy.vue

<template>
    <div class="reimburseMy">
        <div class="reimburseMy-table">
            <el-button type="primary" icon="Plus" style="margin-bottom: 10px;"
                @click="showDrawer('news', null)">新增报销</el-button>
            <el-table :data="data.tableData" style="width: 100%" border>
                <el-table-column :show-overflow-tooltip="true" label="序号" type="index" width="70" />
                <!-- <el-table-column :show-overflow-tooltip="true" prop="Id" label="ID" width="180" /> -->
                <el-table-column :show-overflow-tooltip="true" prop="T_money" label="报销总金额" width="180" />
                <el-table-column :show-overflow-tooltip="true" prop="T_approval_money" label="审批总金额" width="100" />
                <el-table-column :show-overflow-tooltip="true" prop="T_remit" label="打款金额" width="180" />
                <el-table-column :show-overflow-tooltip="true" label="状态" width="150">
                    <!-- 0 删除 1 未提交审核 2待审核  审核通过  审核不通过 5 已部分打款 6已全部打款 -->
                    <template #default="scope">
                        <el-tag v-if="scope.row.T_State == 1" class="ml-2" type="danger">未提交审核</el-tag>
                        <el-tag v-if="scope.row.T_State == 2" class="ml-2" type="warning">待审核</el-tag>
                        <el-tag v-if="scope.row.T_State == 3">审核通过</el-tag>
                        <el-tag v-if="scope.row.T_State == 4" class="ml-2" type="danger">审核不通过</el-tag>
                        <el-tag v-if="scope.row.T_State == 5" type="warning">已部分打款</el-tag>
                        <el-tag v-if="scope.row.T_State == 6">已全部打款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="T_date" label="提交日期" width="220" />
                <el-table-column label="操作" fixed="right" min-width="350">
                    <template #default="scope">
                        <el-button @click="showDrawer('det', scope.row)">详情</el-button>
                        <el-button @click="showDrawer('edi', scope.row)" v-if="scope.row.T_State != 6 &&
                        scope.row.T_State != 5 && scope.row.T_State != 3
                        ">编辑</el-button>
                        <el-button @click="delReimbu(scope.row)" type="danger" v-if="scope.row.T_State != 6 &&
                        scope.row.T_State != 5 && scope.row.T_State != 3
                        ">删除</el-button>
                        <el-button @click="showDrawer('sub', scope.row)" type="primary"  v-if="scope.row.T_State != 6 &&
                        scope.row.T_State != 5 && scope.row.T_State != 3
                        ">提交审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <el-pagination v-model:current-page="data.pages.page" layout="total, prev, pager, next, jumper"
                v-model:page-size="data.pages.page_z" :total="data.total" @current-change="handleCurrentChange"
                style="margin-top: 20px;" />
        </div>
        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" :before-close="handleClose" size="100%">
            <el-form :model="data.fromData" label-position="top">
                <el-form-item label="报销总金额">
                    <div style="display: flex;">
                        <el-input v-model.number="data.fromData.T_money" style="flex: 1;"
                            :disabled="data.drawerTiti == '详情' ? true : false" />
                        <span style="padding-left: 20px;">元</span>
                    </div>
                </el-form-item>
                <el-form-item label="审批总金额" v-if="data.drawerTiti=='详情'">
                    <div style="display: flex;">
                        <el-input v-model="data.fromData.T_approval_money" disabled style="flex: 1;" /><span style="padding-left: 20px;">元</span>
                    </div>
                </el-form-item>
                <el-form-item label="报销明细">
                    <el-table :data="data.fromData.ReimburseDetails" style="width: 100%">
                        <el-table-column type="index" label="序号" width="70" />
                        <el-table-column label="出差地点">
                            <el-table-column label="起点站" width="150">
                                <template #default="scope">
                                    <el-input v-model="scope.row.T_trip_origin" placeholder="起点站"
                                        :disabled="data.disabledNum == scope.$index ? false : true" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="city" label="终点站" width="150">
                                <template #default="scope">
                                    <el-input v-model="scope.row.T_trip_terminus" placeholder="终点站"
                                        :disabled="data.disabledNum == scope.$index ? false : true" />
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="出差时间起止时间" width="250">
                            <template #default="scope">
                                <el-date-picker v-model="scope.row.mapPick" type="daterange" style="width: 220px;"
                                    @change="changeFun($event, scope)" value-format="YYYY-MM-DD"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>

                        </el-table-column>
                        <el-table-column label="费用类型" width="150">
                            <template #default="scope">
                                <el-select v-model.number="scope.row.T_fee_type" class="m-2" placeholder="费用类型" size="large"
                                    :disabled="data.disabledNum == scope.$index ? false : true">
                                    <el-option v-for="item in data.optionsFeeType" :key="item.Id" :label="item.T_name"
                                        @click="clickFeeType(item)" :value="item.Id" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="费用明细" width="150">
                            <template #default="scope">
                                <el-select v-model.number="scope.row.T_fee_details" class="m-2" placeholder="费用明细" size="large"
                                    :disabled="data.disabledNum == scope.$index ? false : true">
                                    <el-option v-for="item in scope.row.selectData" :key="item.Id" :label="item.T_name"
                                        :value="item.Id" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="费用金额" width="150">
                            <template #default="scope">
                                <el-input v-model.number="scope.row.T_money" placeholder="费用金额"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>
                        <el-table-column label="审批金额" width="100">
                        <template #default="scope">
                            <el-input v-model="scope.row.T_approval_money" :disabled="data.drawerTiti=='详情'?true:false" placeholder="审批金额" />
                        </template>
                        </el-table-column>
                        <el-table-column label="费用事由" width="150">
                            <template #default="scope">
                                <el-input v-model="scope.row.T_reasons" placeholder="费用事由"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>
                        <el-table-column label="涉及项目" width="150" :show-overflow-tooltip="true">
                            <template #default="scope">
                                <div v-if="data.drawerTiti == '详情'" style="width: 130px;overflow-x: hidden;">
                                    {{ scope.row.T_project }}
                                </div>
                                <el-input v-else v-model="scope.row.T_project" placeholder="涉及项目"
                                    :disabled="data.disabledNum == scope.$index ? false : true" />
                            </template>
                        </el-table-column>

                        <el-table-column label="附件" :min-width="data.drawerTiti != '详情' ? '80' : ''">
                            <template #default="scope">
                                <upImg v-model:upImg="scope.row.T_img" :imgData="scope.row.T_img" :disabled="data.drawerTiti=='详情'?true:false"></upImg>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" min-width="300" v-if="data.drawerTiti != '详情'">
                            <template #default="scope">
                                <el-button type="primary" @click="EditFun(scope)">修改</el-button>
                                <el-button @click="newDel(scope)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="newMingxi" @click="newAdd" v-if="data.drawerTiti != '详情'">
                        <el-icon color="#409EFC" class="no-inherit">
                            <Plus />
                        </el-icon>
                        <span style="padding-left: 5px;">新增明细</span>
                    </div>
                </el-form-item>
                 <el-form-item label="打款明细" v-if="data.drawerTiti == '详情'">
                    <el-table :data="data.tableRemit" :header-cell-style="{ background: '#f5f7fa' }" border>
                        <el-table-column type="index" label="序号" fixed width="70" />
                        <el-table-column prop="T_time" label="打款时间" width="300" />
                        <el-table-column prop="T_money" label="打款金额" />
                    </el-table>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button type="primary" @click="subData" v-if="data.drawerTiti != '详情'">立即提交</el-button>
                <el-button @click="data.drawer = false">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog v-model="dialogVisible" :draggable="true" style="width: 500px;max-height: 700px;">
            <img :src="dialogImageUrl" style="width: 100%;height: auto;object-fit: contain;" />
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import {
    ReimburseMy_List, ReimburseMy_Del, ReimburseMy_Add,ReimburseMy_Edit, ReimburseMy_Get,
    ReimburseMy_FeeType,ReimburseMy_Submit
} from '@/api/ReimburseMy/index'
import { computed, reactive, ref,watch } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
import { GlobalStore } from '@/stores/index'

import upImg from '@/components/upImg/upimg.vue'

// import dataList from '@/plugins/reimbursemyData.js'


const data = reactive({
    //费用类型
    optionsFeeType: [{ Id: '', T_name: '',FeeDetails:[]}],
    pages: {
        page: 1,
        page_z: 10
    },
    fileList: [],
    total: 0,//列表总页码
    disabledNum: 0,
    pickerdATA: [],
    drawer: false,
    drawerTiti: '',
    tableData: [],
    tableRemit:[],//打款明细
    fromData: {//新增，编辑的提交参数
        User_tokey: GlobalStore().GET_User_tokey,
        T_money: 0,
        T_id:'',
        T_approval_money:'',
        ReimburseDetails:[{
            mapPick: [],
            selectData:[],
            T_approval_money:"",
            T_trip_start_time: "",
            T_trip_end_time: "",
            T_trip_origin: "",
            T_trip_terminus: "",
            T_fee_type: null,
            T_fee_details: null,
            T_money: 0,
            T_reasons: "",
            T_project: "",
            T_img: ""
        },]
    }
})


const T_money = computed(()=>{
    const arr = data.fromData.ReimburseDetails
    const arrMoney:any = []
    arr.forEach(item => {
        arrMoney.push(item.T_money)
    });
    // const sun = 
    data.fromData.T_money = arrMoney.reduce((n:any,m:any) => n + m)
    console.log('计算属性',data.fromData.T_money)
    return arrMoney.reduce((n:any,m:any) => n + m)
    

})

const uploadRef = ref()

const changeFun = (timeKey: any, e: any) => {
    data.fromData.ReimburseDetails[e.$index].T_trip_start_time = timeKey[0]
    data.fromData.ReimburseDetails[e.$index].T_trip_end_time = timeKey[1]
}
const ReimburseMyListApi = async () => {
    const res: any = await ReimburseMy_List(data.pages)
    data.tableData = res.Data.Data
    data.total = res.Data.Num

}
ReimburseMyListApi()

const handleRemove = (r: any) => {
    console.log('删除', r)
}

const handlePictureCardPreview = (uploadFile: any) => {
    console.log('查看', uploadFile)
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
//点击编辑/新增得确定按钮
const subData = () => {
    console.log('编辑',data.fromData)
    // return
    if (data.drawerTiti == '新增') {
        setAddApi()
    } else {
        seteditApi()
    }
}
//编辑
const seteditApi = async()=>{
    console.log('编辑',data.fromData)
    const resIt: any = await ReimburseMy_Edit(data.fromData)
    console.log('编辑', resIt)
    if (resIt.Code == 200) {
        ElMessage.success('编辑报销数据成功')
        data.drawer = false
        ReimburseMyListApi()
    }
}
//新增api
const setAddApi = async () => {
    const resIt: any = await ReimburseMy_Add(data.fromData)
    console.log('新增返回', resIt)
    if (resIt.Code == 200) {
        ElMessage.success('新增成功')
        data.drawer = false
        ReimburseMyListApi()
    }
}

//费用类型列表api
const FeeTypeApi = async () => {
    const resIt: any = await ReimburseMy_FeeType({})
    console.log('费用类型', resIt)
    if (resIt.Code == 200) {
        data.optionsFeeType = resIt.Data
    }
}
const clickFeeType = (data:any) => {
    console.log('点击',data)
    // data.fromData.ReimburseDetails[data.disabledNum].T_fee_details = null
}

watch(() => data.fromData, (newvalue,oldvalue) => {
    const arr = data.fromData.ReimburseDetails
    for (let index = 0; index < arr.length; index++) {
        if (arr[index].T_fee_type) {
            let select:any = (data.optionsFeeType.find(item => item.Id == arr[index].T_fee_type))?.FeeDetails ?? [{ Id: "", T_name: "" }]
            data.fromData.ReimburseDetails[index].selectData = select
        } else {
            return []
        }
    }
  },{ deep: true}
);



//删除报销列表
const delReimbu = (data: any) => {
    console.log('删除', data)
    ElMessageBox.confirm('删除报销，是否继续?', '提示', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        center: true,
    }).then(async () => {
        const res: any = await ReimburseMy_Del({ T_id: data.Id })
        console.log('返回', res)
        if (res.Code == 200) {
            ElMessage.success('已删除报销')
            ReimburseMyListApi()
        }
    }).catch(() => {
        ElMessage.info('已取消删除报销')
    })
}
//分页
const handleCurrentChange = (val: number) => {
    data.pages.page = val
    ReimburseMyListApi()
}
//显示弹窗
const showDrawer = (e: string, datas: any) => {
    
    let id
    if (datas) id = datas.Id
    
    switch (e) {
        case 'news':
            FeeTypeApi()//获取费用类型
            data.drawer = true
            data.drawerTiti = '新增'
            data.fromData = {
                User_tokey: GlobalStore().GET_User_tokey,
                T_id:'',
                T_money: 0,
                T_approval_money:'',
                ReimburseDetails: [{
                    mapPick: [],
                    selectData:[],
                    T_approval_money:"",
                    T_trip_start_time: "",
                    T_trip_end_time: "",
                    T_trip_origin: "",
                    T_trip_terminus: "",
                    T_fee_type: null,
                    T_fee_details: null,
                    T_money: 0,
                    T_reasons: "",
                    T_project: "",
                    T_img: ""
                }]
            }
            data.disabledNum = 0
            break;
        case 'det':
            FeeTypeApi()//获取费用类型
            data.drawer = true
            data.drawerTiti = '详情'
            console.log('datas', datas,e)
            GetdetAPi(id)
            data.disabledNum = -1
            // data.fromData.ReimburseDetails = [...data.fromData.ReimburseDetails,...dataList]
            break;
        case 'edi':
            FeeTypeApi()//获取费用类型
            data.drawer = true
            data.drawerTiti = '编辑'
            data.disabledNum = 0
            GetdetAPi(id)
            data.fromData.T_id = id
            // data.fromData.ReimburseDetails = [...data.fromData.ReimburseDetails,...dataList]
            break;
        default:
            console.log('提交审核')
            SubmitApi(id)
            break;
    }
    
}
//提交审核api
const SubmitApi = async(Id:any)=>{
    const resIt: any = await ReimburseMy_Submit({ T_id: Id })
    console.log('获取详情',resIt)
    if (resIt.Code == 200) {
        ElMessage.success('ok，提交成功')
        ReimburseMyListApi()
    }
}
//获取详情Api
const GetdetAPi = async (Id: any) => {
    const resIt: any = await ReimburseMy_Get({ T_id: Id })
    console.log('获取详情',resIt)
    if (resIt.Code == 200) {
        const arr = resIt.Data.T_reimburse_details
        data.tableRemit = resIt.Data.T_remit_detail
        data.fromData.T_money = resIt.Data.T_money
        data.fromData.T_approval_money = resIt.Data.T_approval_money
        data.fromData.ReimburseDetails = []
        console.log('datas',uploadRef.value)
        arr.forEach((item: any) => {
            item.mapPick = [item.T_trip_start_time, item.T_trip_end_time]
        })
        data.fromData.ReimburseDetails = arr
        
    }
   
}
//关闭弹窗
const handleClose = () => {
    data.drawer = false
}

//点击了编辑
const EditFun = (e: any) => {
    data.disabledNum = e.$index
}
//添加任务
const newAdd = () => {
    data.fromData.ReimburseDetails.push({
        mapPick: [],
        selectData:[],
        T_approval_money:"",
        T_trip_start_time: "",
        T_trip_end_time: "",
        T_trip_origin: "",
        T_trip_terminus: "",
        T_fee_type: null,
        T_fee_details: null,
        T_money: 0,
        T_reasons: "",
        T_project: "",
        T_img: ""
    })
    data.disabledNum = data.fromData.ReimburseDetails.length - 1
}
//删除任务
const newDel = (e: any) => {

    data.fromData.ReimburseDetails.splice(e.$index, 1)
    console.log('e', data.fromData.ReimburseDetails)
}
</script>
<style lang="scss">
// to fix el-message弹框被el-dialog覆盖的问题。
.el-message {
    z-index: 99999999 !important;
}

.newMingxi {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #409EFC;
    cursor: pointer;
    line-height: 0;
    padding: 10px 0 2px 0;
    color: #409EFC;
    user-select: none;
}

.reimburseMy {
    &-table {
        padding: 20px;
        background: #fff;
        border: 1px solid var(--el-card-border-color);
        box-shadow: var(--el-box-shadow-light);
        border-radius: 5px;
    }
}

// 上传图片框样式

.el-upload--picture-card {
    width: 50px;
    height: 50px;
    font-size: 16px !important;
}

.el-upload {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover {
    opacity: 1;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}
</style>