New file |
| | |
| | | <template> |
| | | <div> |
| | | <div class="form flex a-center j-between mt--23"> |
| | | <div class="form-left ml--30"> |
| | | <el-form :inline="true" :model="searchForm" class="demo-form-inline"> |
| | | <el-form-item label="类型名称:" prop="level" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.level" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="驾驶员手机号:" prop="name" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="紧急联系人姓名:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> --> |
| | | </el-form> |
| | | </div> |
| | | <div class="form-right mr--24 mb--22"> |
| | | <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small" |
| | | @click="search">查询</el-button> |
| | | <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14" |
| | | size="small">重置</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table-box ml--30 mt--23 mr--30"> |
| | | <el-table :data="tableData" border stripe style="width: 100%" :height="height"> |
| | | <el-table-column prop="date" label="序号"></el-table-column> |
| | | <el-table-column prop="name" label="图标"> |
| | | <template slot-scope="scope"> |
| | | <img :src="scope.row.img" alt="" style="width: 40px;height: 40px;" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="类型"></el-table-column> |
| | | <el-table-column prop="name" label="车辆数"></el-table-column> |
| | | <!-- <el-table-column prop="name" label="驾驶员通信地址"></el-table-column> |
| | | <el-table-column prop="name" label="紧急情况联系人"></el-table-column> |
| | | <el-table-column prop="name" label="紧急情况联系人电话"></el-table-column> |
| | | <el-table-column prop="name" label="驾驶员手机号"></el-table-column> |
| | | <el-table-column prop="name" label="驾驶员合同签订公司"></el-table-column> |
| | | <el-table-column prop="name" label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="showDetail">详情</el-button> |
| | | </template> |
| | | </el-table-column> --> |
| | | </el-table> |
| | | <div class="relative mt--23 flex j-end"> |
| | | <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
| | | :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper" |
| | | :total="searchForm.total"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | searchForm: { |
| | | total: 0, |
| | | page: 1, |
| | | pageSize: 10, |
| | | }, |
| | | tableData: [], |
| | | }; |
| | | }, |
| | | computed: { |
| | | height() { |
| | | return this.$baseTableHeight(); |
| | | }, |
| | | }, |
| | | methods: { |
| | | showDetail() { |
| | | this.$refs.detailModal.dialogVisible = true; |
| | | }, |
| | | reset() {}, |
| | | search() {}, |
| | | handleSizeChange(e) { |
| | | this.searchForm.pageSize = e; |
| | | }, |
| | | handleCurrentChange(e) { |
| | | this.searchForm.page = e; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style scoped lang="less"> |
| | | ::v-deep .el-form-item .el-input__inner { |
| | | width: 240px; |
| | | } |
| | | </style> |