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

<template>
    <div class="conferencecost-all">
        <div class="conferencecost-header">
            <div class="conferencecost-header-left">
                <div class="conferencecost-header-left-item">
                    <label style="width:40px;">会务: </label>
                    <el-select @change="conferenceidchange" size="small" v-model="conferenceid" clearable placeholder="请选择">
                        <el-option v-for="item in conferenceidarr" :key="item.id" :label="item.teamName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="conferencecost-header-left-item">
                    <label style="width:80px;">服务地区: </label>
                    <el-input size="small" placeholder="请输入内容" v-model="input" clearable>
                    </el-input>
                </div>
            </div>
            <div class="conferencecost-header-right">
                <el-select size="small" v-model="conferenceid" clearable placeholder="请选择">
                    <el-option v-for="item in conferenceidarr" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button size="small" type="primary">生成表格</el-button>
                <el-button size="small" type="primary">保存</el-button>
                <el-button size="small" type="primary">审核通过</el-button>
            </div>
        </div>
        <div class="conferencecost-content">
            <el-table border ref="multipleTable" :data="tableDatas" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="序号" prop="index" width="55">
                </el-table-column>
                <el-table-column prop="name" label="类型" width="120">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.priceType" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="单项内容" width="120">
                    <template slot-scope="scope">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.priceName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="成本单价" width="120">
                    <template slot-scope="scope">
                        <el-input-number :precision="2" size="mini" :controls="false" v-model="scope.row.costPrice"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="币种" width="80">
                    <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.currency" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="数量" width="100">
                    <template slot-scope="scope">
                        <el-input-number :precision="2" size="mini" :controls="false" v-model="scope.row.count"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="单位" width="100">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.unit" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="系数" width="100">
                    <template slot-scope="scope">
                        <el-input-number :precision="2" size="mini" :controls="false" v-model="scope.row.coefficient"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="单项报价金额" width="100">
                    <template slot-scope="scope">
                        <el-input-number :precision="2" size="mini" :controls="false" v-model="scope.row.baoJiaPrice"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="附加值">
                    <template slot-scope="scope">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.addedValue"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="明细">
                    <template slot-scope="scope">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.details"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="备注">
                    <template slot-scope="scope">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.remark"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="reviewStatus" label="审核状态" width="100">
                </el-table-column>
                <el-table-column label="操作" width="100px">
                    <!-- <template slot-scope="scope"> -->
                        <div class="conferencecost-content-btn">
                            <el-button size="mini" type="danger">移 除</el-button>
                            <el-button size="mini" type="primary">通 过</el-button>
                            <el-button size="mini" type="danger">撤 销</el-button>
                        </div>
                            
                    <!-- </template> -->
                </el-table-column>
            </el-table>
            <div class="Addline">
                <el-button size="small" @click="addlineclick" type="primary">添加一行</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableDatas: [
                // {
                //     priceType:'',//费用类型
                //     priceName:'',//费用名称
                //     costPrice:0,//成本费用
                //     currency:'',//币种
                //     rate:0,//当时汇率
                //     count:0,//数量
                //     unit:'',//单位
                //     coefficient:0,//系数
                //     baoJiaPrice:0,//报价金额
                //     addedValue:'',//附加值
                //     details:'',//明细
                //     reviewStatus:'',//审核状态
                //     diid:'',//团组Id
                //     id:0,//主表Id
                //     remark:'',//备注
                // }
                
            ],
            conferenceid: 0,
            conferenceidarr: [],
            input: '',
            options: [],
            token:'',
            userId: '',
            restriction:true,
        }
    },
    updated() {
        console.log(1);
        if (this.restriction) {
            this.$emit('transfer', true)
            this.restriction=false;
        }
    },
    destroyed() {
        this.$emit('transfer', false)
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //获取基础数据
        ConferenceAffairsInIt(){
            var url = "/api/Groups/ConferenceAffairsInIt"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    userId: that.userId,
                    groupId: that.conferenceid,
                }
            }).then(function (res) {
                that.conferenceidarr = res.data.data.groupList;
                that.conferenceid=that.conferenceidarr[0].id;
                that.options = res.data.data.typeData;
                that.ConferenceAffairsInIts();
            })
        },
        //获取数据
        ConferenceAffairsInIts(){
            var url = "/api/Groups/ConferenceAffairsInIt"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    userId: 21,
                    groupId: that.conferenceid,
                }
            }).then(function (res) {
                
            })
        },
        //会务切换
        conferenceidchange(val) {
            this.ConferenceAffairsInIts();
        },
        //添加一行
        addlineclick(){
            this.tableDatas.push({
                index: this.tableDatas.length + 1,
                priceType:'',//费用类型
                priceName:'',//费用名称
                costPrice:0,//成本费用
                currency:'',//币种
                rate:0,//当时汇率
                count:0,//数量
                unit:'',//单位
                coefficient:0,//系数
                baoJiaPrice:0,//报价金额
                addedValue:'',//附加值
                details:'',//明细
                reviewStatus:'',//审核状态
                diid:this.conferenceid,//团组Id
                id:0,//主表Id
                remark:'',//备注
            });
        }
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.ConferenceAffairsInIt();
    }
}
</script>
<style>
.conferencecost-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.conferencecost-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.conferencecost-header-left {
    display: flex;
    flex-wrap: wrap;
}

.conferencecost-header-left-item {
    margin-right: 15px;
    margin-bottom: 15px;
}

.conferencecost-header-left-item {
    display: flex;
    align-items: center;
}
.conferencecost-content .el-input-number--mini{
    width: 100%;
}
.conferencecost-content-btn{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.conferencecost-content-btn .el-button+.el-button{
    margin-left: 0px;
    margin-top: 5px;
}
.Addline{
    margin-top: 10px;
    text-align: center;
}
.conferencecost-header-right>div,button{
    margin-bottom: 15px;
}
</style>