oa-system/src/components/Resource/GroundDetailedfees.vue

<template>
    <div>
        <div class="grounddetafees-all">
            <div class="grounddetafees-head">
                <div class="grounddetafees-head-li">
                    <label>团组名称:</label>
                    <el-select v-model="value" filterable placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.groupName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button type="primary">生 成</el-button>
                    <el-button type="primary">保存数据</el-button>
                    <el-button type="primary">返 回</el-button>
                </div>
            </div>
            <div class="grounddetafees-info">
                <div class="grounddetafees-info-li">
                    <label>团 号：</label>
                    <span>团 号：</span>
                </div>
                <div class="grounddetafees-info-li">
                    <label>客 户：</label>
                    <span>客 户：</span>
                </div>
                <div class="grounddetafees-info-li">
                    <label>出访国家：</label>
                    <span>出访国家：</span>
                </div>
                <div class="grounddetafees-info-li">
                    <label>起止日期：</label>
                    <span> 起止日期：</span>
                </div>
                <div class="grounddetafees-info-li">
                    <label>天数/人数：</label>
                    <span>天数/人数：</span>
                </div>
            </div>
            <div class="grounddetafees-table">
                <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="date"
                label="费用项目"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="金额"
                width="180">
                    <!-- eslint-disable-next-line -->
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="币种"
                width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="费用明细"
                width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="备注"
                width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" autocomplete="off"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                prop="address"
                label="地址">
                </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value:'',
            options:'',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
}
</script>
<style>
.grounddetafees-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.grounddetafees-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.grounddetafees-head{
    display: flex;
    justify-content: space-between;
}
.grounddetafees-info{
    display: flex;
    margin-top: 10px;
}
.grounddetafees-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.grounddetafees-info-li span{ 
    color: #606266;
    font-size: 14px;
}
.grounddetafees-table{
    margin-top: 10px;
}
</style>