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

<template>
    <div v-loading="fullscreenLoading" class="dailyedit-box">
        <div class="dailyedit-title">
            新增日常费用付款申请款项
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
            <div class="dailyedit-set">
                <el-form-item label="类型标识:" label-width="85px" prop="transferation">
                    <el-select :disabled="thesame" @change="trans()" v-model="ruleForm.transferation" placeholder="请选择转账标识">
                        <el-option v-for="(item,index) in Transferlogo" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="转账标识:" prop="identification" label-width="85px">
                    <el-select :disabled="banned" v-model="ruleForm.identification" placeholder="请选择费用类型">
                        <el-option v-for="(item,index) in identificationset" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="费用类型:" prop="type" label-width="85px">
                    <el-select :disabled="thesame" @change="typechange()" v-model="ruleForm.type" placeholder="请选择费用类型">
                        <el-option v-for="(item,index) in typeset" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="费用名称:" prop="name" label-width="85px">
                    <el-select :disabled="bannedtype" v-model="ruleForm.name" placeholder="请选择费用名称">
                        <el-option v-for="(item,index) in nameset" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请公司:" prop="company" label-width="85px">
                    <el-select :disabled="thesame" v-model="ruleForm.company" placeholder="请选择申请公司">
                        <el-option v-for="(item,index) in companyset" :key="index" :label="item.companyName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="申请说明:" label-width="85px" prop="desc">
                <el-input :disabled="thesame" type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <div class="dailyfrom-title">
                <div>录入具体费用</div>
                <el-form-item>
                    <el-button size="mini" @click="AddForm()" type="primary">新 增</el-button>
                </el-form-item>
            </div>
            <div class="items-form">
                <div v-for="(item,index) in itemsArr" :key="index" class="items-li">
                    <el-form  :model="item" class="demo-form-inline" label-width="85px">
                        <el-form-item label="费用项目:">
                            <el-input :disabled="thesame" v-model="item.priceName" placeholder="费用项目名称"></el-input>
                        </el-form-item>
                        <el-form-item label="数量:">
                            <template>
                                <el-input-number :disabled="thesame" :min="1" v-model="item.quantity"></el-input-number>
                            </template>
                        </el-form-item>
                        <el-form-item label="单价(CNY):">
                            <el-input-number :disabled="thesame" :controls="false" v-model="item.price" :precision="2"></el-input-number>
                        </el-form-item>
                        <el-form-item label="小计(CNY):">
                            <div class="sub-box">{{item.itemTotal=(item.quantity*item.price).toFixed(2)}}</div>
                        </el-form-item>
                        <el-form-item label="备注:">
                            <el-input :disabled="thesame" v-model="item.remark" placeholder="备注"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                              size="mini"
                              type="danger"
                              :disabled="itemsArr.length<=1"
                              @click="deleteRow(index,itemsArr )"><i class="el-icon-delete"></i></el-button>
                          </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-form-item style="text-align: right;">
                <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
                <el-button @click="resetForm('ruleForm')">返 回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    // beforeRouteLeave(to, from, next) {
    //     if(to.name=='DailyFeePayment'){
    //         to.meta.keepAlive = true;
    //     }
    //     next()
    // },
    data(){
        return{
            editid:'',
            userid:'',
            token:'',
            banned:true,
            bannedtype:true,
            thesame:false,//是否能编辑标识
            ruleForm: {
                transferation:'',
                identification: '',
                type: '',
                name: '',
                company: '',
                desc:''
            },
            SumPrice:0,
            itemsArr:[
                {
                    priceName:"",
                    quantity:'',
                    price:"",
                    itemTotal:'',
                    remark:""
                }
            ],
            rules: {
                transferation: [
                    { required: true, message: '请选择转账标识', trigger: 'change' }
                ],
                identification: [
                    { required: true, message: '请选择费用标识', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择费用类型', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请选择费用名称', trigger: 'change' }
                ],
                company: [
                    { required: true, message: '请选择申请公司', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写申请说明', trigger: 'change' }
                ],
            },
            Transferlogo:[],//类型标识
            feeMarkSubTypeData:[],//转账标识ALL
            identificationset:[],//转账标识
            typeset:[],//费用类型
            feeSubTypeData:[],//费用名称ALL
            nameset:[],//费用名称
            companyset:[],//申请公司
            fullscreenLoading:false,//loading
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(valid)
                if (valid) {
                    console.log(this.itemsArr)
                    var issubmit=true;
                    for(var g=0;g<this.itemsArr.length;g++){
                        if(this.itemsArr[g].itemTotal!=""&&this.itemsArr[g].price!=0&&this.itemsArr[g].priceName!=""&&this.itemsArr[g].quantity!=""){
                            if(!this.thesame){
                                //for(var k=0;k<this.itemsArr.length;k++){
                                    this.SumPrice+=Number(this.itemsArr[g].itemTotal)
                                //}
                            }else{
                                this.$message({
                                    showClose: true,
                                    message: '本申请不是您建立的或已被审核，无法修改！',
                                    type: 'error'
                                });
                                issubmit=false;
                                break;
                            }
                        }else{
                            this.$message({
                                showClose: true,
                                message: '请检查录入具体费用是否填写完整！',
                                type: 'error'
                            });
                            issubmit=false;
                            break;
                        }
                    }
                    if(issubmit){
                        if(this.editid!=undefined){
                            this.UpdateDailyPayment()
                        }else{
                            this.AddDailyPayment()
                        }
                    }
 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.$router.push({ path: "/home/DailyFeePayment"});
        },
        AddForm(){
            if(this.thesame){
                this.$message({
                    showClose: true,
                    message: '本申请不是您建立的或已被审核，无法操作！',
                    type: 'error'
                });
                return false
            }
            this.itemsArr.push(
                {priceName: '', quantity: '', price:'',itemTotal:'', remark: ''}
            )
        },
        deleteRow(index, rows) {
            if(this.thesame){
                this.$message({
                    showClose: true,
                    message: '本申请不是您建立的或已被审核，无法操作！',
                    type: 'error'
                });
                return false
            }
            rows.splice(index, 1);
        },
        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) {
                console.log(res)
                if (res.data.code == 200) {
                    that.Transferlogo=res.data.data.feeMarkTypeData;
                    that.feeMarkSubTypeData=res.data.data.feeMarkSubTypeData;
                    that.typeset=res.data.data.feeTypeData;
                    that.feeSubTypeData=res.data.data.feeSubTypeData;
                    that.companyset=res.data.data.companyNameData;
                }
            })
        },
        trans(){
            this.identificationset=[];
            this.ruleForm.identification='';
            for(var i=0;i<this.feeMarkSubTypeData.length;i++){
                if(this.feeMarkSubTypeData[i].sTid==this.ruleForm.transferation){
                    this.identificationset.push(this.feeMarkSubTypeData[i]);
                }
            }
            if(this.identificationset.length==0){
                this.banned=true;
            }else{
                this.banned=false;
            }
        },
        typechange(){
            this.nameset=[];
            this.ruleForm.name='';
            console.log(this.feeSubTypeData)
            for(var i=0;i<this.feeSubTypeData.length;i++){
                if(this.feeSubTypeData[i].sTid==this.ruleForm.type){
                    this.nameset.push(this.feeSubTypeData[i]);
                }
            }
            if(this.nameset.length==0){
                this.bannedtype=true;
            }else{
                this.bannedtype=false;
            }
        },
        AddDailyPayment(){
            var url = "/api/Financial/PostAddDailyPayment"
            var that = this
            var data={
                UserId:that.userid,
                Instructions:that.ruleForm.desc,
                SumPrice:that.SumPrice,
                TransferTypeId:that.ruleForm.identification,
                PriceTypeId:that.ruleForm.name,
                CompanyId:that.ruleForm.company,
                FeeContents:that.itemsArr
            }
            console.log(data)
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    PortType: 1,
                    UserId:that.userid,
                    Instructions:that.ruleForm.desc,
                    SumPrice:that.SumPrice,
                    TransferTypeId:that.ruleForm.identification,
                    PriceTypeId:that.ruleForm.name,
                    CompanyId:that.ruleForm.company,
                    FeeContents:that.itemsArr
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                    that.$router.push({ path: "/home/DailyFeePayment"});
                }
            })
        },
        UpdateDailyPayment(){
            var url = "/api/Financial/PostEditDailyPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    PortType: 1,
                    Id:that.editid,
                    UserId:that.userid,
                    Instructions:that.ruleForm.desc,
                    SumPrice:that.SumPrice,
                    TransferTypeId:that.ruleForm.identification,
                    PriceTypeId:that.ruleForm.name,
                    CompanyId:that.ruleForm.company,
                    FeeContents:that.itemsArr
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                    that.$router.push({ path: "/home/DailyFeePayment"});
                }
            })
        },
        getPostSearchDailyPaymentInfo(){
            if(this.editid!=undefined){
                console.log("jing")
                this.fullscreenLoading=true;
                var url = "/api/Financial/PostSearchDailyPaymentInfo"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: {
                        PortType: 1,
                        id:that.editid
                    }
                }).then(function (res) {
                    console.log(res)
                    console.log(that.feeMarkSubTypeData)
                    if (res.data.code == 200) {
                        that.itemsArr=res.data.data.feeContents;
                        that.ruleForm.desc=res.data.data.instructions;
                        setTimeout(function (){
                            for(var a=0;a<that.feeMarkSubTypeData.length;a++){
                                if(that.feeMarkSubTypeData[a].id==res.data.data.transferTypeId){
                                    that.ruleForm.transferation=that.feeMarkSubTypeData[a].sTid;
                                }
                            }
                            that.trans();
                            that.ruleForm.identification=res.data.data.transferTypeId;
                            for(var b=0;b<that.feeSubTypeData.length;b++){
                                if(that.feeSubTypeData[b].id==res.data.data.priceTypeId){
                                    that.ruleForm.type=that.feeSubTypeData[b].sTid;
                                }
                            }
                            that.typechange()
                            that.ruleForm.name=res.data.data.priceTypeId;
                            that.fullscreenLoading=false;
                            if(that.userid!=res.data.data.createUserId){
                                that.thesame=true;
                            }else if(res.data.data.fAudit!=0||res.data.data.mAudit!=0){
                                that.thesame=true;
                            }
                            if(that.thesame==true){
                                that.banned=true;
                                that.bannedtype=true;
                            }
                        },1000);
                        that.ruleForm.company=res.data.data.companyId;
                    }
                })
            }
        }
    },
    mounted(){
        this.editid=this.$route.query.id;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getTypeData();
        this.getPostSearchDailyPaymentInfo();
    }
}
</script>
<style>
    .dailyedit-box{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        min-height: 800px;
    }
    .dailyedit-title{
        font-size: 17px;
        font-weight: 600;
        color: #555;
        margin-bottom: 30px;
    }
    .dailyedit-set{
        display: flex;
        justify-content: space-between;
    }
    .items-li{
        border-bottom: 1px #DCDFE6 solid;
        margin-bottom: 12px;
    }
    .items-li .demo-form-inline{
        display: flex;
        justify-content: space-between;
    }
    .dailyfrom-title{
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .dailyfrom-title .el-form-item{
        margin: 0;
    }
    .items-li .el-form-item{
        margin-bottom: 10px;
    }
    .dailyedit-box .sub-box{
        -ms-user-select: none;
        font-family:"微软雅黑";
        -khtml-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;  
    }
</style>