Vue-简单的搜索页面

这个博文主要是为了帮助自己快速回忆vue的单页面开发仅供自己参考回忆勿喷<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" />&lt
小黄瓜要编程

3566人浏览 · 2019-01-31 10:50:22
小黄瓜要编程 · 2019-01-31 10:50:22 发布
这个博文主要是为了帮助自己快速回忆vue的单页面开发
仅供自己参考回忆
勿喷

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>WycTransmitIndex</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>网约车配置</el-header>
            <el-main>
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-dark">
                            <div style="margin:15px 0 15px 0;">
                                <el-input v-model="v_serachinfo" placeholder="请输入车牌号码" class="input-with-select">
                                    <el-select v-model="v_serachtype" slot="prepend" placeholder="请选择">
                                        <el-option label="车牌号码" value="Licenseplatenum"></el-option>
                                        <el-option label="车架号" value="VIN"></el-option>
                                        <el-option label="设备号码" value="Prodnum"></el-option>
                                    </el-select>
                                    <el-button @@click="getVehicleInfo()" slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>
                        </div>  
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-light">
                            <template>
                                <el-table :data="vehicleInfoTableData"
                                          height="700"
                                          border
                                          style="width: 100%">
                                    <el-table-column prop="Licenseplatenum" label="车牌" width="280">
                                    </el-table-column>
                                    <el-table-column prop="VIN" label="车架号码" width="280">
                                    </el-table-column>
                                    <el-table-column prop="Prodnum" label="设备号" width="280">
                                    </el-table-column>
                                    <el-table-column prop="SimNum" label="卡号" width="280">
                                    </el-table-column>
                                    <el-table-column prop="Vehicleid" label="车辆ID" width="280">
                                    </el-table-column>
                                    <el-table-column label="操作" width="280">
                                        <template slot-scope="scope">
                                            <el-button type="primary" size="mini" v-if="scope.row.TransmitFlag==='0'"
                                                       @@click="addTransmit(scope)">增加转发</el-button>
                                            <el-button size="mini"
                                                       type="danger" v-if="scope.row.TransmitFlag==='1'"
                                                       @@click="cancelTransmit(scope)">取消转发</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>wwxc@@2018-2019</el-footer>
        </el-container>
    </div>
</body>
</html>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        padding: 0px 20px 20px 20px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-select .el-input {
        width: 130px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>
<!--自定义样式-->
<style>
    .el-main > el-row {
        line-height: 20px;
    }
</style>
<script>
    var app = new Vue({
        el: '#app'
        , data: function () {
            return {
                v_serachinfo: ''
                , v_serachtype:'Licenseplatenum'
                , vehicleInfoTableData: []
                , mainUrl: "http://localhost:59671/WycTransmit"
            }
        }
        , methods: {
            //  查询车辆信息
            getVehicleInfo: function () {
                var that = this;
                axios.post(this.mainUrl + '/GetVehicleInfo', {
                     serachinfo: this.v_serachinfo
                    ,serachtype: this.v_serachtype
                })
                    .then(function (response) {
                        if (response.data.ResponseCode == "0") {
                            that.vehicleInfoTableData = null;
                            const h = that.$createElement;
                            that.$notify({
                                title: "查询失败",
                                message: h('i', { style: 'color: teal' }, '查询车辆信息失败')
                            });
                        }
                        else {
                            if (response.data.Data[0] == null) {
                                const h = that.$createElement;
                                that.$notify({
                                    title: "查询失败",
                                    message: h('i', { style: 'color: teal' }, '没有相关车辆信息')
                                });
                            }
                            else {
                                that.vehicleInfoTableData = response.data.Data;
                                const h = that.$createElement;
                                that.$notify({
                                    title: "查询成功",
                                    message: h('i', { style: 'color: teal' }, '查询车辆信息成功')
                                });
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
            //新增转发
            , addTransmit: function (veh) {
                var that = this;
                axios.post(this.mainUrl +'/TransmitAdd', {
                     vid: veh.row.Vehicleid
                    , plateno: veh.row.Licenseplatenum
                    , prodnum: veh.row.Prodnum
                    , simno: veh.row.SimNum
                })
                    .then(function (response) {
                        if (response.data) {
                            that.vehicleInfoTableData[0].TransmitFlag = "1";
                            const h = that.$createElement;
                            that.$notify({
                                title: veh.row.Licenseplatenum,
                                message: h('i', { style: 'color: teal' }, '新增转发成功')
                            });
                        }
                        else {
                            const h = that.$createElement;
                            that.$notify({
                                title: veh.row.Licenseplatenum,
                                message: h('i', { style: 'color: teal' }, '新增转发失败')
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
            //取消转发
            , cancelTransmit: function (veh) {
                var that = this;
                axios.post(this.mainUrl +'/TransmitCancel', {
                    vid: veh.row.Vehicleid
                })
                    .then(function (response) {
                        that.vehicleInfoTableData[0].TransmitFlag = "0";
                        if (response.data) {
                            const h = that.$createElement;
                            that.$notify({
                                title: veh.row.Licenseplatenum,
                                message: h('i', { style: 'color: teal' }, '取消转发成功')
                            });
                        }
                        else {
                            const h = that.$createElement;
                            that.$notify({
                                title: veh.row.Licenseplatenum,
                                message: h('i', { style: 'color: teal' }, '取消转发失败')
                            });
                        }
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>
Vue
前往低代码交流专区
更多推荐
vue 表单验证
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^