manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/expense/index.vue

<template>
<div>
    <van-nav-bar title="费用报销" left-text="返回" @click-left="back" fixed left-arrow style="z-index:1000" />
    <div class="content">
        <van-tabs v-model="active" @change="activeChange">
            <van-tab title="费用报销" :name="0"></van-tab>
            <van-tab title="单据列表" :name="1"></van-tab>
            <van-tab title="单据审核" :name="2" v-if="canExamine"></van-tab>
        </van-tabs>
        <!-- #region 费用报销 -->
        <div class="edit" v-if="active == 0">
            <van-form class="edit_form" label-width="140">
                <!-- 报销人 -->
                <van-field label="报销人" @click="ownerIdShow = true" readonly clickable required>
                    <template #input>
                        <span v-if="user.userNameNeedTranslate == 1 && formshowText.name"><ww-open-data type='userName' :openid='formshowText.name'></ww-open-data></span>
                        <span v-else>{{formshowText.name}}</span>
                    </template>
                </van-field>
                <van-popup v-model="ownerIdShow" position="bottom" v-if="canExamine">
                    <div style="minHeight:300px;">
                        <van-radio-group v-model="userRadio" v-if="user.userNameNeedTranslate == '1'">
                            <van-radio v-for="item in userList" :key="item.id" :name="item" class="userCheckbox">
                                <ww-open-data type='userName' :openid='item.name'></ww-open-data>
                            </van-radio>
                        </van-radio-group>
                        <van-radio-group v-model="userRadio" v-else>
                            <van-radio v-for="item in userList" :key="item.id" :name="item" class="userCheckbox">{{item.name}}</van-radio>
                        </van-radio-group>
                        <van-button style="width:100%;position: -webkit-sticky;position: sticky;bottom: 0;" @click="ownerIdChange()">确定</van-button>
                    </div>
                </van-popup>
                <!-- 填报日期 -->
                <van-field v-model="editForm.createDate" label="填报日期" @click="createDateShow = true" readonly clickable required></van-field>
                <van-popup v-model="createDateShow" position="bottom">
                    <van-datetime-picker
                    type="date"
                    title="选择填报日期"
                    @confirm="createDateChange"
                    v-model="currentDate1"
                    @cancel="createDateShow = false;$forceUpdate();"
                    :min-date="minDate"
                    :max-date="maxDate"/>
                </van-popup>
                <!-- 发票张数 -->
                <van-field label="发票张数">
                    <template #input>
                        <van-stepper v-model="editForm.ticketNum" disable-input @plus="ticNumChange(1)" @minus="ticNumChange(0)"/>
                    </template>
                </van-field>
                <!-- 费用类型 -->
                <van-field v-model="editForm.type" label="费用主类型" @click="typeShow = true" readonly clickable>
                    <template #input>{{expenseMainType.text}}</template>
                </van-field>
                <van-popup v-model="typeShow" position="bottom">
                    <van-picker
                    show-toolbar
                    :columns="typeList"
                    @confirm="typeChange"
                    @cancel="typeShow = false;$forceUpdate();"/>
                </van-popup>
                <!-- 备注 -->
                <van-field v-model="editForm.remark" label="备注" type="textarea"></van-field>
                <!-- 发票 -->
                <van-field label="发票" readonly>
                    <template #input>总费用： ￥{{totalCost}}</template>
                </van-field>
                <div class="invoice" v-if="invoiceList.length != 0">
                    <div v-for="item,index in invoiceList" :key="item.id" style="position:relative" :class="index == 0 ? '' : 'invoice_item'">
                        <!-- <van-button class="deletebtn" size="mini" type="default" @click="deleteInvoice(index)">删除</van-button> -->
                        <van-icon name="delete-o" class="deletebtn" v-if="index != 0" @click="deleteInvoice(index)" />
                        <van-field label="所属项目：" v-model="item.projectId" @click="in_projectShow = true,invoiceIndex = index" readonly clickable required>
                            <template #input>{{formshowText.inProjectName[index]}}</template>
                        </van-field>
                        <van-field label="费用日期：" v-model="item.happenDate" @click="in_dateShow = true,invoiceIndex = index" readonly clickable required></van-field>
                        <van-field label="发票种类：" v-model="item.invoiceType" @click="in_typeShow = true,invoiceIndex = index" readonly clickable required>
                            <template #input>{{inTypeList[item.invoiceType]}}</template>
                        </van-field>
                        <van-field label="费用类型：" v-model="item.expenseType" @click="in_exTypeShow = true,invoiceIndex = index" readonly clickable required></van-field>
                        <van-field label="费用金额（含税）：" v-model="item.amount" type="number" required></van-field>
                        <van-field label="发票号：" v-model="item.invoiceNo"></van-field>
                        <van-field label="税率%：" v-model="item.taxPercent"></van-field>
                        <van-field label="税额：" readonly>
                            <template #input>￥{{getTaxValue(item.amount,item.taxPercent)}}</template>
                        </van-field>
                        <van-field label="备注：" v-model="item.remark" autosize></van-field>
                        <van-field label="报销凭证：" @click="invoiceIndex = index" clickable>
                            <template #input>
                                <van-uploader v-model="uploader[index]" :before-read="beforeRead" :after-read="afterRead" @delete="item.pic = null" :max-count="1" />
                            </template>
                        </van-field>
                    </div>
                </div>
                <div class="addinvoice"><van-button size="small" icon="plus" type="info" plain hairline @click="addInvoice">添加发票</van-button></div>
                <!-- 发票-popup -->
                <span>
                    <!-- 所属项目 -->
                    <van-popup v-model="in_projectShow" position="bottom">
                        <van-picker
                        value-key="projectName"
                        show-toolbar
                        :columns="inProjectList"
                        @confirm="inProjectChange"
                        @cancel="in_projectShow = false;$forceUpdate();"/>
                    </van-popup>
                    <!-- 费用日期 -->
                    <van-popup v-model="in_dateShow" position="bottom">
                        <van-datetime-picker
                        type="date"
                        title="选择费用日期"
                        @confirm="inDateChange"
                        v-model="currentDate2"
                        @cancel="in_dateShow = false;$forceUpdate();"
                        :min-date="minDate"
                        :max-date="maxDate"/>
                    </van-popup>
                    <!-- 发票种类 -->
                    <van-popup v-model="in_typeShow" position="bottom">
                        <van-picker
                        show-toolbar
                        :columns="inTypeList"
                        @confirm="inTypeChange"
                        @cancel="in_typeShow = false;$forceUpdate();"/>
                    </van-popup>
                    <!-- 费用类型 -->
                    <van-popup v-model="in_exTypeShow" position="bottom">
                        <van-picker
                        value-key="typeName"
                        show-toolbar
                        :columns="inexTypeList"
                        @confirm="inexTypeChange"
                        @cancel="in_exTypeShow = false;$forceUpdate();"/>
                    </van-popup>
                </span>
            </van-form>
            <!-- 提交 -->
            <div class="form_btn" style="position:fixed; bottom:0px;width:100%;">
                <div style="padding-bottom:10px;">
                    <van-button square block type="info" @click="submitExpense" :loading="confirmLoading" style="width:100%;float:left;">提交</van-button>
                </div>
            </div>
            
        </div>
        <!-- #endregion -->
        <!-- 单据列表 -->
        <div class="list" v-if="active == 1">
            <!-- <van-pull-refresh v-model="downLoading" @refresh="onDownRefresh">
                <van-list v-model="uploading" :finished="upFinished" :immediate-check="false" :offset="100" finished-text="没有更多了" @load="onLoadList"></van-list>
            </van-pull-refresh> -->
            <van-collapse v-model="activeName" accordion class="list_collapse">
                <van-collapse-item v-for="item in billList" :key="item.id" title="标题1" :name="item.id">
                    <template #title>
                        <div class="collapse_label_l">票据编号：{{item.code}}</div>
                        <div class="collapse_label_r">报销人：
                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
                            <span v-else>{{item.ownerName}}</span>
                        </div>
                        <div class="collapse_label_l">金额： ￥{{item.totalAmount | numtosum}}</div>
                        <div class="collapse_label_r">状态：<span :class="statusClass[item.status]">{{statusList[item.status]}}</span></div>
                    </template>
                    <div class="wrapper">
                        <div><span>票据编号：</span><span>{{item.code}}</span></div>
                        <div><span>金额：</span><span>￥{{item.totalAmount | numtosum}}</span></div>
                        <div><span>报销人：</span>
                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
                            <span v-else>{{item.ownerName}}</span>
                        </div>
                        <div><span>填报日期：</span><span>{{item.createDate}}</span></div>
                        <div><span>发票张数：</span><span>{{item.ticketNum}}</span></div>
                        <div><span>费用类型：</span><span>{{item.expenseMainTypeName}}</span></div>
                        <!-- <div><span>状态：</span><span>{{item.status}}</span></div> -->
                        <!-- <div><span>驳回原因：</span><span>{{item.denyReason}}</span></div> -->
                        <div><span>备注：</span><span>{{item.remark}}</span></div>
                    </div>
                    <div class="operation">
                        <van-button size="small" type="info" :to="{ name: 'expenseDetails', params: { id: item.id, canEdit: false } }">查看</van-button>
                        <van-button style="margin-left:10px" size="small" type="info" :to="{ name: 'expenseDetails', params: { id: item.id, canEdit: true } }">编辑</van-button>
                        <van-button style="margin-left:10px" size="small" type="danger" @click="deleteBill(item.id)">删除</van-button>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
        <!-- 单据审核 -->
        <div class="audit" v-if="active == 2">
            <van-collapse v-model="auditName" accordion class="list_collapse">
                <van-collapse-item v-for="item in examineList" :key="item.id" title="标题2" :name="item.id">
                    <template #title>
                        <div class="collapse_label_l">票据编号：{{item.code}}</div>
                        <div class="collapse_label_r">报销人：
                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
                            <span v-else>{{item.ownerName}}</span>
                        </div>
                        <div class="collapse_label_l">金额： ￥{{item.totalAmount | numtosum}}</div>
                        <div class="collapse_label_r">状态：<span :class="statusClass[item.status]">{{statusList[item.status]}}</span></div>
                        <div class="operation">
                            <van-button size="small" type="info" :loading="item.approveLoading" @click.stop="approve(item)">通过</van-button>
                            <van-button style="margin-left:15px" size="small" type="danger" @click.stop="denyToReason(item.id)">驳回</van-button>
                        </div>
                    </template>
                    <div class="wrapper">
                        <div><span>票据编号：</span><span>{{item.code}}</span></div>
                        <div><span>金额：</span><span>￥{{item.totalAmount | numtosum}}</span></div>
                        <div><span>报销人：</span>
                            <span v-if="user.userNameNeedTranslate == 1"><ww-open-data type='userName' :openid='item.ownerName'></ww-open-data></span>
                            <span v-else>{{item.ownerName}}</span>
                        </div>
                        <div><span>填报日期：</span><span>{{item.createDate}}</span></div>
                        <div><span>发票张数：</span><span>{{item.ticketNum}}</span></div>
                        <div><span>费用类型：</span><span>{{item.expenseMainTypeName}}</span></div>
                        <!-- <div><span>状态：</span><span>{{item.status}}</span></div> -->
                        <!-- <div><span>驳回原因：</span><span>{{item.denyReason}}</span></div> -->
                        <div><span>备注：</span><span>{{item.remark}}</span></div>
                    </div>
                    <div class="lookup">
                        <van-button size="small" type="info" :to="{ name: 'expenseDetails', params: { id: item.id,canEdit: false } }">查看单据信息</van-button>
                    </div>
                </van-collapse-item>
            </van-collapse>
            <!-- <van-popup v-model="denyReasonDialog" position="bottom" closeable >
                <van-cell>请输入原因</van-cell>
                <van-field class="form_input"
                    v-model="denyParm.denyReason" name="reason" type="textarea" placeholder="请输入您决定驳回的原因"
                    rows="3" autosize  />
                <van-button style="width:100%;" type="info" :loading="denyLoading" @click="deny()">提交</van-button>
            </van-popup> -->
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            active: sessionStorage.page ? JSON.parse(sessionStorage.page) : 0,
            user: JSON.parse(localStorage.userInfo),
            userList: [],
            canExamine: false,
            currentDate1: new Date(),
            currentDate2: new Date(),
            minDate: new Date(2020,0,1),
            maxDate: new Date(2025,11,31),
            confirmLoading: false,
            denyLoading: false,

            formshowText: {
                name: '',
                inProjectName: []
            },
        // #region 费用报销
            editForm: {
                ownerId: '',
                createDate: '',
                ticketNum: 0,
                type: 0,
                remark: ''
            },
            userRadio: null,
            ownerIdShow: false,
            createDateShow: false,
            typeShow: false,
            typeList: [],

            invoiceIndex: 0,
            invoiceList: [
                {
                    projectId: '',
                    happenDate: '',
                    invoiceType: '',
                    expenseType: '',
                    amount: '',
                    invoiceNo: '',
                    taxPercent: '',
                    taxValue: '',
                    remark: '',
                    pic: '',
                }
            ],
            in_projectShow: false,
            in_dateShow: false,
            in_typeShow: false,
            in_exTypeShow: false,

            inProjectList: [],
            inTypeList: ['增值税专用发票','增值税普通发票'],
            allexTypeList: [],
            inexTypeList: [],
            uploader: [[]],
        // #endregion

            // 单据列表
            activeName: '',
            billList: [],
            statusList: ['审核通过','待审核','已驳回','已撤销'],
            statusClass: ['','waiting','rejected',''],

            uploading: false,

            // 单据审核
            auditName: '',
            examineList: [],
            denyReasonDialog: false,
            denyParm: {
                id: '',
                denyReason: ''
            },
            expenseMainType:{
                text:''
            }

        }
    },
    computed: {
        totalCost(){
            let costnum = 0
            for(let i in this.invoiceList){
                costnum += (this.invoiceList[i].amount ? parseFloat(this.invoiceList[i].amount) : 0)
            }
            return costnum.toFixed(2)
        }
    },
    filters: {
        numtosum(value) {
            if (value == undefined || !value) return '0.00'
            value = value.toFixed(2)
            const intPart = Math.trunc(value)
            const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            let floatPart = '.00'
            const valueArray = value.toString().split('.')
            if (valueArray.length === 2) { // 有小数部分
            floatPart = valueArray[1].toString() // 取得小数部分
            return intPartFormat + '.' + floatPart
            }
            return intPartFormat + floatPart
        },
    },
    mounted() {
        this.activeChange()
        for(let i in this.user.functionList){
            if(this.user.functionList[i].name == '费用审核'){
                this.canExamine = true
            }
        }
        if(!this.canExamine){
            this.editForm.ownerId = this.user.id
            this.formshowText.name = this.user.name
        }else{
            this.getUserList()
        }
        this.getProjectList()
        this.getExTypeList()
        this.getExpensMainTypes()
    },
    methods: {
        back(){
            sessionStorage.removeItem("page");
            history.back();
            
        },
        formatDate(date) {
            let mon = date.getMonth() + 1
            return `${date.getFullYear()}-${mon<10?'0'+mon:mon}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`;
        },
        getTaxValue(amount,percent){
            let per = percent / 100
            let amo = amount / (1 + per)*per
            return amo.toFixed(2)
        },
        activeChange(){
            sessionStorage.setItem('page',JSON.stringify(this.active))
            if(this.active == 1){
                this.getBillList()
            }
            if(this.active == 2){
                this.getExamineList()
            }
        },

    // #region 费用报销
        ownerIdChange(){
            this.editForm.ownerId = this.userRadio.id
            this.formshowText.name = this.userRadio.name
            this.ownerIdShow = false
        },
        createDateChange(value,key){
            this.editForm.createDate = this.formatDate(value)
            this.createDateShow = false
        },
        typeChange(value,key){
            this.editForm.type =value.id
            this.expenseMainType.text=value.name
            this.typeShow = false
            for(let i in this.invoiceList){
                    this.invoiceList[i].expenseType=''
                }
            this.inexTypeList = this.allexTypeList.filter(a=>a.mainType == this.editForm.type)
        },
        ticNumChange(value){
            
            if(value){
                this.invoiceList.push({
                    projectId: '',
                    happenDate: '',
                    invoiceType: '',
                    expenseType: '',
                    amount: '',
                    invoiceNo: '',
                    taxPercent: '',
                    taxValue: '',
                    remark: '',
                    pic: '',
                })
            }else{
                this.invoiceList.pop()
            }
        },

        // 发票
        inProjectChange(value,key){
            this.formshowText.inProjectName[this.invoiceIndex] = value.projectName
            this.invoiceList[this.invoiceIndex].projectId = value.id
            this.in_projectShow = false
        },
        inDateChange(value,key){
            this.invoiceList[this.invoiceIndex].happenDate = this.formatDate(value)
            this.in_dateShow = false
        },
        inTypeChange(value,key){
            this.invoiceList[this.invoiceIndex].invoiceType = key
            this.in_typeShow = false
        },
        inexTypeChange(value,key){
            this.invoiceList[this.invoiceIndex].expenseType = value.typeName
            this.in_exTypeShow = false
        },

        addInvoice(){
            this.invoiceList.push({
                projectId: '',
                happenDate: '',
                invoiceType: '',
                expenseType: '',
                amount: '',
                invoiceNo: '',
                taxPercent: '',
                taxValue: '',
                remark: '',
                pic: '',
            })
            this.uploader.push([])
            this.editForm.ticketNum = this.invoiceList.length
        },
        deleteInvoice(index){
            this.invoiceList.splice(index,1)
            this.uploader.splice(index,1)
            this.editForm.ticketNum = this.invoiceList.length
        },

        // 上传报销凭证
        beforeRead(file){
            if(file.type != 'image/jpeg' && file.type != 'image/png'){
                this.$toast.fail('请选择jpg或png格式的图片')
                return false
            }
            return true
        },
        afterRead(file){
            let formData = new FormData();
            formData.append("multipartFile", file.file);
            this.$axios.post("/common/uploadFile", formData)
            .then(res => {
                if(res.code == "ok") {
                    this.invoiceList[this.invoiceIndex].pic = res.data
                } else {
                    this.$toast.fail('上传失败');
                    this.uploader[this.invoiceIndex] = []
                }
            }).catch(err=> {this.$toast.clear();console.log(err);this.uploader[this.invoiceIndex]=[]});
        },

        // 提交
        submitExpense(){
            if(!this.editForm.ownerId){
                this.$toast.fail('请选择报销人')
                return
            }
            if(!this.editForm.createDate){
                this.$toast.fail('请选择填报日期')
                return
            }
            let required1 = false
            let required2 = false
            let required3 = false
            let required4 = false
            let required5 = false
            for(let i in this.invoiceList){
                if(!this.invoiceList[i].projectId){
                    required1 = '所属项目'
                }
                if(!this.invoiceList[i].happenDate){
                    required2 = '费用日期'
                }
                if(!this.invoiceList[i].invoiceType){
                    required3 = '发票种类'
                }
                if(!this.invoiceList[i].expenseType){
                    required4 = '费用类型'
                }
                if(!this.invoiceList[i].amount){
                    required5 = '费用金额（含税）'
                }
            }
            if(required1 || required2 || required3 || required4 || required5){
                let requiredStr = (required1 ? required1 + '、' : '')
                                + (required2 ? required2 + '、' : '')
                                + (required3 ? required3 + '、' : '')
                                + (required4 ? required4 + '、' : '')
                                + (required5 ? required5 + '、' : '')
                requiredStr = requiredStr.substring(0,requiredStr.length - 1)
                this.$toast.fail('请添加发票的[' + requiredStr + ']')
                return
            }
            if(this.invoiceList.length == 0){
                this.$toast.fail('请添加发票')
                return
            }
            for(let i in this.invoiceList){
                this.invoiceList[i].taxValue = this.getTaxValue(this.invoiceList[i].amount,this.invoiceList[i].taxPercent)
            }
            this.editForm.items = JSON.stringify(this.invoiceList)
            this.editForm.totalAmount = this.totalCost
            // 获取新的票据编号
            this.confirmLoading = true
            this.$axios.post("/expense-sheet/getNextCode", {})
            .then(res => {
                if(res.code == "ok") {
                    this.editForm.code = res.data
                    // 提交
                    this.$axios.post("/expense-sheet/add", this.editForm)
                    .then(res => {
                        this.confirmLoading = false
                        if(res.code == "ok") {
                            this.$toast.success('填报成功')
                            this.editForm = {
                                ownerId: '',
                                createDate: '',
                                ticketNum: 0,
                                type: 0,
                                remark: ''
                            }
                            // this.formshowText = {
                            //     name: '',
                            //     inProjectName: []
                            // }
                            this.formshowText.name = ''
                            this.formshowText.inProjectName = []
                            this.invoiceList = []
                            this.uploader = []
                        } else {
                            this.$toast.fail('获取失败');
                        }
                    }).catch(err=> {this.confirmLoading = false;this.$toast.clear();console.log(err)});
                } else {
                    this.confirmLoading = false
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {
                this.confirmLoading = false;
            this.$toast.clear();
            console.log(err)});

            
        },
    // #endregion

        // 单据列表
        deleteBill(pid){
            this.$dialog.confirm({
                message: '确认删除？',
            })
            .then(() => {
                // on confirm
                this.$axios.post("/expense-sheet/delete", {id: pid})
                .then(res => {
                    if(res.code == "ok") {
                        this.$toast.success('删除成功')
                        this.getBillList()
                    } else {
                        this.$toast.fail('获取失败');
                    }
                }).catch(err=> {this.$toast.clear();console.log(err)});
            })
            .catch(() => {
                // on cancel
            });
            
        },

        // 单据审核
        approve(item){
            item.approveLoading = true
            this.$axios.post("/expense-sheet/approve", {id: item.id})
            .then(res => {
                if(res.code == "ok") {
                    this.$toast.success('已通过')
                    item.approveLoading = false
                    this.getExamineList()
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },
        denyToReason(pid){
            this.denyParm.id = pid
            this.denyReasonDialog = true
            this.denyParm.denyReason = ''
            this.deny()
        },
        deny(){
            this.denyLoading = true
            this.$axios.post("/expense-sheet/deny", this.denyParm)
            .then(res => {
                if(res.code == "ok") {
                    this.$toast.success('已驳回')
                    this.denyReasonDialog = false
                    this.denyLoading = false
                    this.getExamineList()
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },

        getUserList(){
            this.$axios.post("/user/getSimpleActiveUserList", {})
            .then(res => {
                if(res.code == "ok") {
                    this.userList = res.data
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },
        getProjectList(){
            this.$axios.post("/project/getProjectList", {})
            .then(res => {
                if(res.code == "ok") {
                    this.inProjectList = res.data
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },
        getExTypeList(){
            this.$axios.post("/expense-type/getList", {})
            .then(res => {
                if(res.code == "ok") {
                    this.allexTypeList = res.data
                    this.inexTypeList = this.allexTypeList.filter(a=>a.mainType == this.editForm.type)
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },

        getExpensMainTypes(){
            this.$axios.post("/expense-main-type/list", {})
            .then(res => {
                if(res.code == "ok") {
                    for(var i in res.data) {
                        res.data[i].text = res.data[i].name
                    }
                    this.typeList=res.data
                    this.expenseMainType.text=res.data[0].name
                    this.editForm.type=res.data[0].id
                    this.getExTypeList
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },

        getBillList(){
            this.$axios.post("/expense-sheet/list", {
                pageSize: 999,
                pageIndex: 1,
                startDate: '',
                endDate: '',
                ownerId: '',
                type: ''
            }).then(res => {
                if(res.code == "ok") {
                    this.billList = res.data.records
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        },

        getExamineList(){
            this.$axios.post("/expense-sheet/list", {
                pageSize: 999,
                pageIndex: 1,
                startDate: '',
                endDate: '',
                ownerId: '',
                type: '',
                status: 1
            }).then(res => {
                if(res.code == "ok") {
                    this.examineList = res.data.records
                    for(let i in this.examineList){
                        this.$set(this.examineList[i],'approveLoading',false)
                    }
                } else {
                    this.$toast.fail('获取失败');
                }
            }).catch(err=> {this.$toast.clear();console.log(err)});
        }
    },
}
</script>

<style lang="less" scoped>
.content{
    margin-top: 46px;
    overflow: auto;
    .edit{
        .userCheckbox {
            padding: 10px;
        }
        padding-bottom: 46px;
        .form_btn{
            z-index: 1000;
        }
        .edit_form{
            .invoice{
                border: 0.5px solid rgb(135, 195, 255);
                margin: 0.2rem;
                .deletebtn{
                    position: absolute;
                    z-index: 900;
                    font-size: 24px;
                    right: 0.08rem;
                    top: 0.08rem;
                    color: #c03131;
                }
                .invoice_item{
                    border-top: 0.5px solid rgb(135, 195, 255);
                }
            }
            .addinvoice{
                padding: 0 0.3rem 0.3rem;
                margin-top: 0.2rem;
                text-align: right;
            }
        }
    }
    .list{
        .list_collapse>div{
            margin: 4px;
        }
        .list_collapse{
            .collapse_label_l{
                width: 50%;
                padding: 4px;
                display: inline-block;
            }
            .collapse_label_r{
                width: 50%;
                padding: 4px;
                display: inline-block;
                .waiting {
                    color:orange;
                }
                .rejected {
                    color:red;
                }
            }
            .wrapper{
                div{
                    margin: 8px 16px;
                }
                div span:nth-child(1){
                    width: 30%;
                    display: inline-block;
                }
                div span:nth-child(2){
                    width: 70%;
                    display: inline-block;
                }
            }
            .operation{
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
        
    }
    .audit{
        .list_collapse>div{
            margin: 4px;
        }
        .list_collapse{
            
            .collapse_label_l{
                width: 60%;
                padding: 4px;
                display: inline-block;
            }
            .collapse_label_r{
                width: 40%;
                padding: 4px;
                display: inline-block;
                .waiting {
                    color:orange;
                }
                .rejected {
                    color:red;
                }
            }
            .operation{
                margin-top: 5px;
                padding-top: 5px;
                border-top: 0.5px solid #ebedf0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                button{
                    width: 1.2rem;
                }
            }
            .wrapper{
                div{
                    margin: 8px 16px;
                }
                div span:nth-child(1){
                    width: 30%;
                    display: inline-block;
                }
                div span:nth-child(2){
                    width: 70%;
                    display: inline-block;
                }
            }
            .lookup{
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
            
        }
        
    }
}
</style>
<style>
.edit_form .invoice .van-field__label{
    color: #999;
}
.edit_form .invoice .van-field__control{
    color: #999;
}
</style>