oa-system/src/components/Finance/DailyFeePayment.vue

<template>
    <div class="visa-box">
        <div class="search-ul">
            <div class="search-li">
                <div class="feeType-box">
                    <label>费用类型: </label>
                    <el-select  v-model="feeTypValue" filterable placeholder="请选择费用类型"  @change="filtersub()">
                        <el-option
                        v-for="item in feeTypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>费用子类型: </label>
                    <el-select @change="downtrigger()" :disabled="banned" v-model="feeSubTypeValue" filterable placeholder="请选择费用子类型">
                        <el-option
                        v-for="item in feeSubTypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>财务审核: </label>
                    <el-select @change="downtrigger()" v-model="financialValue" filterable placeholder="请输入财务审核状态">
                        <el-option
                        v-for="item in financialAudit"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="feeType-box">
                    <label>总经理审核: </label>
                    <el-select @change="downtrigger()" v-model="GMValue" filterable placeholder="请输入总经理审核状态">
                        <el-option
                        v-for="item in GMAudit"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <!-- <div class="feeType-box">
                    <label>申请说明:</label>
                    <el-input v-model="formInline.feeDesc" placeholder="申请说明"></el-input>
                </div> -->
                <div class="feeType-box">
                    <label>申请人: </label>
                    <el-select @change="downtrigger()" v-model="userNameValue" filterable placeholder="请选择申请人">
                        <el-option
                        v-for="item in userNameData"
                        :key="item.id"
                        :label="item.cnName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <!-- <div class="search-li">
                <el-button type="primary">查询</el-button>
            </div> -->
        </div>
        <el-row>
            <el-button type="primary">导出费用</el-button>
            <el-button type="primary">批量生成</el-button>
            <el-button @click="addDaily()" type="primary">新增数据</el-button>
          </el-row>
        <div class="dailyment-box">
            <template>
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                    <el-table-column
                        prop="rouNumber"
                        label="序 号"
                        width="55">
                        <template slot-scope="scope">
                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="companyName"
                        width="200"
                        label="公 司">
                    </el-table-column>
                    <el-table-column
                        prop="instructions"
                        label="费用描述"
                        width="220">
                    </el-table-column>
                    <el-table-column
                        prop="sumPrice"
                        :formatter="numFilter"
                        label="费用总计"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="createUser"
                        label="申请人"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="申请时间"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="fAuditDesc"
                        label="财务审核"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="mAuditDesc"
                        label="总经理审核"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="Id"
                        label="操 作">
                        <template slot-scope="scope">
                            <el-button
                            title="生成"
                            size="mini"
                            @click="handleGenerate(scope.$index, scope.row)"><i class="el-icon-share"></i></el-button>
                            <el-button
                            title="详情"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit-outline"></i></el-button>
                            <el-button
                            title="删除"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,tableData)"><i class="el-icon-delete"></i></el-button>
                          </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination align='center' 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage" 
                    :page-sizes="[5,10,15,20]" 
                    :page-size="pageSize" 
                    layout="total, sizes, prev, pager, next" 
                    :total="tableDataLength">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            banned:true,
            input: '',
            financialValue:-1,
            financialAudit:[
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 0,
                    label: '未审核'
                },
                {
                    value: 1,
                    label: '已通过'
                },
                {
                    value: 2,
                    label: '未通过'
                },
            ],
            GMValue:-1,
            GMAudit:[
                {
                    value: -1,
                    label: '全部'
                },
                {
                    value: 0,
                    label: '未审核'
                },
                {
                    value: 1,
                    label: '已通过'
                },
                {
                    value: 2,
                    label: '未通过'
                },
            ],
            feeTypeData:[
                {
                    id: -1,
                    name: "全部"
                },
            ],
            feeTypValue:-1,
            userNameData:[
                {
                    cnName: "全部",
                    id:-1
                }
            ],
            userNameValue:-1,
            feeSubType:[],
            feeSubTypeData:[
                {
                    id: -1,
                    name: "全部",
                    sTid:'-1'
                }
            ],
            feeSubTypeValue:-1,
            formInline:{
                feeDesc:""
            },
            tableData: [],
            tableDataLength: 0, // 数据总条数
            currentPage: 1,     // 当前页码
            pageSize: 10 ,       // 每页的数据条数
           
            multipleTable:[],
            token:'',
            userid:''
        }
    },
    methods:{
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.postPageDailyPaymentList()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(val)
            this.currentPage = val;
            this.postPageDailyPaymentList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection)
        },
        getRowKeys(row) {
            return row.num
        },
        numFilter(row,column) {
            return parseFloat(row[column.property]).toFixed(2);
        },
        async postPageDailyPaymentList() {
            console.log(this.feeTypValue)
            var url = "/api/Financial/PostPageSearchDailyPaymentList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: that.currentPage,
                    pageSize: that.pageSize,
                    companyId: -1,
                    financialAuditStatus: that.financialValue,//财务审核
                    managerAuditStatus: that.GMValue,  //总经理审核
                    feeTypeId: that.feeTypValue,           //费用类型
                    feeSubTypeId: that.feeSubTypeValue,       //费用子类型
                    feeDesc: '',    //描述
                    createUserId: that.userNameValue //申请人
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.tableData = res.data.data.dataList;
                    that.tableDataLength = res.data.data.dataCount;
                }
                console.log(that.tableData);
            })
        },
        getTypeData() {
            var url = "/api/Financial/PostPageSearchDailyPaymentPriceTypeData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    for(var u=0;u<res.data.data.userNameData.length;u++){
                        that.userNameData.push(res.data.data.userNameData[u])
                    }
                    // that.userNameData=res.data.data.userNameData;
                    for(var l=0;l<res.data.data.feeTypeData.length;l++){
                        that.feeTypeData.push(res.data.data.feeTypeData[l])
                    }
                    // that.feeTypeData=res.data.data.feeTypeData;
                    that.feeSubType=res.data.data.feeSubTypeData;
                }
            })
        },
        filtersub(){
            this.feeSubTypeData=[
                {
                    id: -1,
                    name: "全部",
                    sTid:'-1'
                }
            ];
            this.feeSubTypeValue=-1;
            for(var i=0;i<this.feeSubType.length;i++){
                if(this.feeSubType[i].sTid==this.feeTypValue){
                    this.feeSubTypeData.push(this.feeSubType[i]);
                }
            }
            console.log(this.feeTypValue);
            if(this.feeSubTypeData.length==1){
                this.banned=true;
            }else{
                this.banned=false;
            }
            this.currentPage= 1;
            this.postPageDailyPaymentList();
        },
        downtrigger(){
            this.currentPage= 1;
            this.postPageDailyPaymentList();
        },
        addDaily(){
            this.$router.push({ path: "/home/DailyFeeedit"});
        },
        handleEdit(index, row) {
            this.$router.push({path: '/home/DailyFeeedit?id=' + row.id +''});
        },
        handleDelete(index, row,rows) {
            console.log(index, row);
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Financial/PostDelDailyPayment"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                        userId:that.userid
                    }
                }).then(function(res){
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                            offset:50
                        });
                        rows.splice(index, 1);
                        that.postPageDailyPaymentList();
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleGenerate(index, row){
            this.$confirm('是否生成此条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url="/api/Financial/PostExcelDailyPaymentDownload"
                var that=this
                this.$axios({
                    method: 'post',
                    url:url,
                    headers:{
                        Authorization:'Bearer '+this.token
                    },
                    data:{
                        portType: 1,
                        id:row.id,
                    }
                }).then(function(res){
                    console.log(res)
                    if(res.data.code==200){
                        that.$message({
                            message:"生成成功！" ,
                            type: 'success',
                            offset:50
                        });
                        window.open(res.data.msg);
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                            offset:50
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.postPageDailyPaymentList();
        this.getTypeData();
        
    },
    watch:{
        'feeSubTypeData.length': {
        handler(newValue, oldValue) {
            if (newValue !== oldValue) {
                // this.banned=false
            }
        }
    }
    }
}
</script>
<style>
    .visa-box{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    /*.search-li:nth-child(1){
        width: 80%;
    }*/

    /*.search-li:nth-child(2){
        width: 20%;
        justify-content: end;
    }*/
    .search-ul{
        margin-bottom: 10px;
    }
    .search-li label{
        color: #606266;
    }
    .search-li{
        display: flex;
        justify-content: space-between;
    }
    .search-li>div{
        margin-right: 10px;
    }
    .dailyment-box .el-table th.el-table__cell>.cell{
        text-align: center;
    }
    .dailyment-box .el-table td.el-table__cell div{
        text-align: center;
    }
    .dailyment-box .block{
        margin-top: 10px;
    }
    .visa-box .el-row{
        text-align: right;
        margin-bottom: 5px;
    }
    .visas-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .visas-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .visas-box{
        display: flex;
    }
    .visas-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
 
    .country-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .interpret-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .dailyment-box .el-link{
        margin: 0 8px;
    }
    .search-li .feeType-box{
        margin-right: 0;
    }
</style>