frontend/src/views/management/userEquipment/lineInformation/index.vue

<template>
    <div class="lineInformation">
        <div class="lineBtnGroup">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">批量添加</el-button>
            <el-button type="primary">修改</el-button>
            <el-button type="primary">修改公司</el-button>
            <el-button type="primary">删除</el-button>
            <el-button type="primary">查询</el-button>
            <el-button type="primary">导入</el-button>
            <el-button type="primary">导入模板下载</el-button>
            <el-button type="primary">导出</el-button>
        </div>
        <div class="searchForm">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="单位:">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="DY等级:">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="XL名称:">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="是否为采集">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="PMS编号:">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="lineTable">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="index" width="55"> </el-table-column>
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="单位">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="XL名称"> </el-table-column>
                <el-table-column prop="address" label="DY等级" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="name" label="起始GT"> </el-table-column>
                <el-table-column prop="name" label="终止GT"> </el-table-column>
                <el-table-column prop="name" label="PMS编号"> </el-table-column>
                <el-table-column prop="name" label="备注"> </el-table-column>
                <el-table-column prop="name" label="排序号"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            multipleSelection: []
        };
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
};
</script>
<style lang="less">
.lineInformation {
    width: 100%;
    height: 100%;
    background: @color-white;
    .lineBtnGroup {
        padding: 16px 8px;
    }
    .searchForm {
        padding: 0px 8px;
        .el-form {
            .el-form-item {
                margin-bottom: 0px;
            }
        }
    }
    .lineTable {
        padding: 16px 8px 0 8px;
    }
}
</style>