verecord.vue 14.5 KB
<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.trailerFrameNo" placeholder="车牌号查询"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getReCord()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="companyAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="recordList" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="coCode" label="运输公司名称"  width="120px" >
            </el-table-column>
            <el-table-column prop="proposer" label="挂靠单位" width="120px" >
            </el-table-column>
            <el-table-column prop="veTargetNo" label="备案单位" width="130px"  >
            </el-table-column>
            <el-table-column prop="domesticLisenceNo" label="国内车牌"  width="100px">
            </el-table-column>
            <el-table-column prop="veOwnerName" label="车主姓名" width="100px" >
            </el-table-column>
            <el-table-column prop="ownerInsideTel" label="车主联系方式" width="110px" >
            </el-table-column>
            <el-table-column prop="mainPort" label="本地关代码" width="100px" >
            </el-table-column>
            <el-table-column prop="selfWt" label="自重"  width="90px">
            </el-table-column>
            <el-table-column prop="veTon" label="载重"  width="90px">
            </el-table-column>
            <el-table-column prop="returnmessage" label="备案结果"  width="100px">
            </el-table-column>
            <el-table-column prop="apprNo" label="备案编号"  width="140px">
            </el-table-column>
            <el-table-column prop="operationType" :formatter="operationType" label="申报状态"  width="110px">
            </el-table-column>
            <el-table-column prop="updateDate" label="更新时间"  width="160px">
            </el-table-column>
            <el-table-column label="操作" min-width="150">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
                <el-row>
                    <el-col :span="10">
                        <el-row>
                            <el-form-item label="海关代码" prop="mainPort">
                                <el-input v-model="addForm.mainPort" auto-complete="on" placeholder="海关代码"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="挂靠单位" prop="proposer">
                                <el-input v-model="addForm.proposer"  auto-complete="on" placeholder="挂靠单位"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="运输公司名称" label-width="130px" prop="coCode">
                                <el-input v-model="addForm.coCode" auto-complete="on" placeholder="运输公司名称"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="国内车牌" prop="domesticLisenceNo">
                                <el-input v-model="addForm.domesticLisenceNo" auto-complete="on" placeholder="国内车牌"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="车主姓名" prop="veOwnerName">
                                <el-input v-model="addForm.veOwnerName"  auto-complete="on" placeholder="车主姓名"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="车主联系电话" label-width="130px" prop="ownerInsideTel">
                                <el-input v-model="addForm.ownerInsideTel"  auto-complete="on" placeholder="车主联系电话"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="行驶证有效期" label-width="130px" prop="veFactoryDate">
                                <el-date-picker
                                        v-model="addForm.veFactoryDate"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                    </el-col>
                    <el-col :span="10">
                        <el-row>
                            <el-form-item label="自重(空车重量)" label-width="140px" prop="selfWt">
                                <el-input v-model="addForm.selfWt" auto-complete="on" placeholder="自重(空车重量)"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="核定载货重量" prop="veTon">
                                <el-input  v-model="addForm.veTon" auto-complete="on" placeholder="核定载货重量"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="挂车牌号" prop="trailerLicenseNo">
                                <el-input v-model="addForm.trailerLicenseNo" auto-complete="on" placeholder="挂车牌号"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="挂车车架号" prop="trailerFrameNo">
                                <el-input v-model="addForm.trailerFrameNo" auto-complete="on" placeholder="挂车车架号"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="车辆备案编号" label-width="110px" prop="apprNo">
                                <el-input v-model="addForm.apprNo" auto-complete="on" placeholder="车辆备案编号"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="车辆属性" label-width="100px" prop="veClassFlag">
                                <el-select v-model="addForm.veClassFlag"  placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="备注" label-width="100px" prop="memo">
                                <el-input v-model="addForm.memo" auto-complete="on" placeholder="备注"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="addSubmit()">保存</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import { list, save, remove} from '../../api/road_verecord/verecord';
    export default {

        data() {
            return {
                filters: {
                    trailerFrameNo: ''
                },
                recordList: [],
                total: 0,
                pageSize: 1,
                limitSize: 10,
                listLoading: false,
                addFormVisible: false,
                addForm: {
                    mainPort: '4604',
                    proposer: '',
                    coCode: '',
                    domesticLisenceNo: '',
                    veOwnerName: '',
                    ownerInsideTel: '',
                    veFactoryDate: '',
                    selfWt: '',
                    veTon: '',
                    trailerLicenseNo: '',
                    apprNo: '',
                    veClassFlag: '',
                    memo: '',
                    createBy: ''
                },
                options: [{
                    value: '0',
                    label: '普通车辆'
                }, {
                    value: '1',
                    label: '调拨车辆'
                }],
                addFormRules: {
                mainPort: [
                    { required: true, message: '请输入海关关区', trigger: 'blur' }
                ],
                proposer: [
                    { required: true, message: '请输入挂靠单位', trigger: 'blur' }
                ],
                coCode: [
                    { required: true, message: '请输入运输公司名称', trigger: 'blur' }
                ],
                domesticLisenceNo: [
                    { required: true, message: '请输入国内车牌', trigger: 'blur' }
                ],
                veOwnerName: [
                    { required: true, message: '请输入车主姓名', trigger: 'blur' }
                ],
                ownerInsideTel: [
                    { required: true, message: '请输入车主联系方式', trigger: 'blur' }
                ],
                veFactoryDate: [
                    { required: true, message: '请选择驾驶证有效期', trigger: 'blur' }
                ],
                selfWt: [
                    { required: true, message: '请输入车辆自重', trigger: 'blur' }
                ],
                }
            }
        },
        mounted() {
            this.getReCord();
        },
        methods: {
            //获取备案列表
            getReCord() {
                let para = {
                    pageSize: this.pageSize,
                    limitSize: this.limitSize,
                    trailerFrameNo: this.filters.trailerFrameNo
                };
                this.listLoading = true;
                list(para).then((res) => {
                    this.total = res.data.data.total;
                    this.recordList = res.data.data.list;
                    this.listLoading = false;
                }).catch((error) => {
                    this.listLoading = false;
                    if(null!= error.response && error.response!==undefined){
                        let status= error.response.status;
                        let msg = error.response.statusText;
                        alert(status+msg);
                    }else {
                        alert(error);
                    }
                });
            },
            handleDel(index, row){
                this.$confirm('确认删除吗?', '提示', {}).then(() => {
                    let param = {
                        id: row.id,
                        domesticLisenceNo: row.domesticLisenceNo,
                        mainPort: row.mainPort
                    }
                    remove(param).then((res) => {
                        if (res.data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.getReCord();
                    }).catch((error) => {

                    });
                }).catch(() =>{

                });
            },

            companyAdd:function(){
                this.addFormVisible = true;
                if (this.$refs.addForm !==undefined) {
                    this.$refs.addForm.resetFields();
                }
                this.getReCord();
            },

            addSubmit:function(){
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗?', '提示', {}).then(() => {
                            this.addForm.createBy = JSON.parse(sessionStorage.getItem('user')).id;
                            let para = Object.assign({}, this.addForm);
                            save(para).then((res) => {
                                if (res.data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.getReCord();
                                }else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            }).catch(error => alert(error));
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            operationType:function (row, column) {
                if (row.operationType == '1'){
                    return '审批通过'
                }else if (row.operationType == '0'){
                    return '需手动审批通过'
                }
            }
        },

    }
</script>