朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 9e3957383c3fd9b0255c241b18de26e1a9804898 1 个父辈 74747ceb

转关运抵页面样式更新

内嵌 并排对比
正在显示 1 个修改的文件 包含 153 行增加 和 47 行删除
1 -<template>  
2 - <el-row>  
3 - <el-row style="margin-top: 30px">  
4 - <el-col :span="2"> 1 +<template xmlns:el-col="http://www.w3.org/1999/html">
  2 + <section>
  3 +<!-- <el-row class="toolbar">-->
  4 +<!-- <el-col :span="2">-->
  5 +<!-- <el-input-->
  6 +<!-- v-model="formTrn.customscode"-->
  7 +<!-- placeholder="关区"-->
  8 +<!-- style="width: 100px"-->
  9 +<!-- />-->
  10 +<!-- </el-col>-->
  11 +<!-- <el-col :span="3">-->
  12 +<!-- <el-input-->
  13 +<!-- v-model="formTrn.username"-->
  14 +<!-- placeholder="申报用户"-->
  15 +<!-- style="width: 160px"-->
  16 +<!-- />-->
  17 +<!-- </el-col>-->
  18 +<!-- <el-col :span="3">-->
  19 +<!--&lt;!&ndash; <el-input&ndash;&gt;-->
  20 +<!--&lt;!&ndash; v-model="formTrn.trnmode"&ndash;&gt;-->
  21 +<!--&lt;!&ndash; placeholder="转关方式"&ndash;&gt;-->
  22 +<!--&lt;!&ndash; style="width: 140px"&ndash;&gt;-->
  23 +<!--&lt;!&ndash; />&ndash;&gt;-->
  24 +<!-- <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px">-->
  25 +<!-- <el-option label="0-非转关运抵模式" value="0"></el-option>-->
  26 +<!-- <el-option label="1-南方转关运抵模式" value="1"></el-option>-->
  27 +<!-- <el-option label="2-北方转关运抵模式" value="2"></el-option>-->
  28 +<!-- <el-option label="3-水运中转运抵模式" value="3"></el-option>-->
  29 +<!-- </el-select>-->
  30 +<!-- </el-col>-->
  31 +<!-- <el-col :span="3">-->
  32 +<!-- <el-input-->
  33 +<!-- v-model="formTrn.unloadcode"-->
  34 +<!-- placeholder="卸货地代码"-->
  35 +<!-- style="width: 160px"-->
  36 +<!-- />-->
  37 +<!-- </el-col>-->
  38 +<!-- <el-col :span="7">-->
  39 +<!--&lt;!&ndash; <el-input&ndash;&gt;-->
  40 +<!--&lt;!&ndash; v-model="formTrn.creattime"&ndash;&gt;-->
  41 +<!--&lt;!&ndash; placeholder="新增时间段"&ndash;&gt;-->
  42 +<!--&lt;!&ndash; style="width: 160px"&ndash;&gt;-->
  43 +<!--&lt;!&ndash; />&ndash;&gt;-->
  44 +<!-- <el-date-picker-->
  45 +<!-- v-model="formTrn.creattime"-->
  46 +<!-- type="daterange"-->
  47 +<!-- align="right"-->
  48 +<!-- unlink-panels-->
  49 +<!-- range-separator="至"-->
  50 +<!-- start-placeholder="开始日期"-->
  51 +<!-- end-placeholder="结束日期"-->
  52 +<!-- value-format="yyyy-MM-dd"-->
  53 +<!-- format="yyyy-MM-dd"-->
  54 +<!-- :picker-options="pickerOptions">-->
  55 +<!-- </el-date-picker>-->
  56 +<!-- </el-col>-->
  57 +<!-- <el-col :span="5">-->
  58 +<!-- <el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>-->
  59 +<!-- <el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button>-->
  60 +<!-- <el-button type="warning" icon="el-icon-edit" :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>-->
  61 +<!-- </el-col>-->
  62 +<!-- </el-row>-->
  63 + <el-row class="toolbar" style="height: 80px">
  64 + <el-form :inline="true" :model="formTrn">
  65 + <el-row style="margin-top: -20px">
  66 + <el-col :span="6">
  67 + <el-form-item>
5 <el-input 68 <el-input
6 v-model="formTrn.customscode" 69 v-model="formTrn.customscode"
7 - placeholder="关区"  
8 - style="width: 100px"  
9 - /> 70 + placeholder="关区" style="width: 210px"
  71 + >
  72 + <template slot="prepend">关&nbsp;&nbsp;&nbsp;区</template>
  73 + </el-input>
  74 + </el-form-item>
10 </el-col> 75 </el-col>
11 - <el-col :span="3"> 76 + <el-col :span="6">
  77 + <el-form-item>
12 <el-input 78 <el-input
13 v-model="formTrn.username" 79 v-model="formTrn.username"
14 - placeholder="申报用户"  
15 - style="width: 160px"  
16 - /> 80 + placeholder="申报用户" style="width: 210px"
  81 + >
  82 + <template slot="prepend">申报用户</template>
  83 + </el-input>
  84 + </el-form-item>
17 </el-col> 85 </el-col>
18 - <el-col :span="3">  
19 -<!-- <el-input-->  
20 -<!-- v-model="formTrn.trnmode"-->  
21 -<!-- placeholder="转关方式"-->  
22 -<!-- style="width: 140px"-->  
23 -<!-- />-->  
24 - <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px"> 86 + <el-col :span="12">
  87 + <el-form-item>
  88 + <el-input
  89 + v-model="formTrn.unloadcode"
  90 + placeholder="卸货地代码" style="width: 210px"
  91 + >
  92 + <template slot="prepend">卸货地代码</template>
  93 + </el-input>
  94 + </el-form-item>
  95 + </el-col>
  96 + <el-col :span="6"style="margin-top: -28px">
  97 + <el-form-item>
  98 + <div style="display: inline-block;background-color: #6F8294;color: white;
  99 + border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
  100 + border-bottom-left-radius:4px;padding-left: 14px">转关方式</div>
  101 + <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 136px">
25 <el-option label="0-非转关运抵模式" value="0"></el-option> 102 <el-option label="0-非转关运抵模式" value="0"></el-option>
26 <el-option label="1-南方转关运抵模式" value="1"></el-option> 103 <el-option label="1-南方转关运抵模式" value="1"></el-option>
27 <el-option label="2-北方转关运抵模式" value="2"></el-option> 104 <el-option label="2-北方转关运抵模式" value="2"></el-option>
28 <el-option label="3-水运中转运抵模式" value="3"></el-option> 105 <el-option label="3-水运中转运抵模式" value="3"></el-option>
29 </el-select> 106 </el-select>
  107 + </el-form-item>
30 </el-col> 108 </el-col>
31 - <el-col :span="3">  
32 - <el-input  
33 - v-model="formTrn.unloadcode"  
34 - placeholder="卸货地代码"  
35 - style="width: 160px"  
36 - />  
37 - </el-col>  
38 - <el-col :span="7">  
39 -<!-- <el-input-->  
40 -<!-- v-model="formTrn.creattime"-->  
41 -<!-- placeholder="新增时间段"-->  
42 -<!-- style="width: 160px"-->  
43 -<!-- />--> 109 + <el-col :span="10" style="margin-top: -28px">
  110 + <el-form-item>
  111 + <div style="display: inline-block;background-color: #6F8294;color: white;
  112 + border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
  113 + border-bottom-left-radius:4px;padding-left: 14px">新增时间段</div>
44 <el-date-picker 114 <el-date-picker
45 v-model="formTrn.creattime" 115 v-model="formTrn.creattime"
46 type="daterange" 116 type="daterange"
47 - align="right"  
48 unlink-panels 117 unlink-panels
49 - range-separator="至" 118 + range-separator="-"
50 start-placeholder="开始日期" 119 start-placeholder="开始日期"
51 end-placeholder="结束日期" 120 end-placeholder="结束日期"
52 value-format="yyyy-MM-dd" 121 value-format="yyyy-MM-dd"
53 - format="yyyy-MM-dd" 122 + format="yyyy-MM-dd" style="width: 300px"
54 :picker-options="pickerOptions"> 123 :picker-options="pickerOptions">
  124 + <template slot="prepend">新增时间段</template>
55 </el-date-picker> 125 </el-date-picker>
  126 + </el-form-item>
56 </el-col> 127 </el-col>
57 - <el-col :span="5">  
58 - <el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>  
59 - <el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button> 128 + <el-col :span="8" style="margin-top: -28px">
  129 + <el-form-item>
  130 + <el-button type="primary" icon="el-icon-search" @click="trnList">查&nbsp;&nbsp;询</el-button>
  131 + </el-form-item>
  132 + <el-form-item>
  133 + <el-button type="success" icon="el-icon-edit" @click="addTrn">新&nbsp;&nbsp;增</el-button>
  134 + </el-form-item>
  135 + <el-form-item>
60 <el-button type="warning" icon="el-icon-edit" :loading="batchSendLoading" @click="batchTrn">批量申报</el-button> 136 <el-button type="warning" icon="el-icon-edit" :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>
  137 + </el-form-item>
61 </el-col> 138 </el-col>
  139 +<!-- <el-col :span="6">-->
  140 +<!-- <el-form-item>-->
  141 +<!-- <el-date-picker-->
  142 +<!-- v-model="formTrn.creattime"-->
  143 +<!-- type="daterange"-->
  144 +<!-- unlink-panels-->
  145 +<!-- range-separator="至"-->
  146 +<!-- start-placeholder="开始日期"-->
  147 +<!-- end-placeholder="结束日期"-->
  148 +<!-- value-format="yyyy-MM-dd"-->
  149 +<!-- format="yyyy-MM-dd"-->
  150 +<!-- :picker-options="pickerOptions">-->
  151 +<!-- <template slot="prepend">新增时间段</template>-->
  152 +<!-- </el-date-picker>-->
  153 +<!-- </el-form-item>-->
  154 +<!-- </el-col>-->
  155 +
  156 + </el-row>
  157 + </el-form>
62 </el-row> 158 </el-row>
63 <el-row> 159 <el-row>
64 <el-table 160 <el-table
65 v-loading="listLoading" 161 v-loading="listLoading"
66 :data="tableData" 162 :data="tableData"
67 border 163 border
68 - fit  
69 highlight-current-row 164 highlight-current-row
70 - style="width: 100%"  
71 @selection-change="trnSelectionChange" 165 @selection-change="trnSelectionChange"
  166 + height="550px"
  167 + tooltip-effect="dark"
  168 + style="border-radius: 10px 10px 0px 0px;line-height: 25px"
  169 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
72 > 170 >
73 <el-table-column 171 <el-table-column
74 type="selection" 172 type="selection"
@@ -162,21 +260,21 @@ @@ -162,21 +260,21 @@
162 </el-table-column> 260 </el-table-column>
163 <el-table-column label="操作" align="center" width="400" fixed="right"> 261 <el-table-column label="操作" align="center" width="400" fixed="right">
164 <template slot-scope="scope"> 262 <template slot-scope="scope">
165 - <el-button type="warning" size="mini" @click="editTrn(scope.$index,scope.row)">编辑</el-button>  
166 - <el-button type="success" size="mini" @click="declareTrn(scope.row)">  
167 - 申报 263 + <el-button type="success" size="mini" @click="editTrn(scope.$index,scope.row)">编&nbsp;&nbsp;&nbsp;辑</el-button>
  264 + <el-button type="warning" size="mini" @click="declareTrn(scope.row)">
  265 + 申&nbsp;&nbsp;&nbsp;报
168 </el-button> 266 </el-button>
169 - <el-button type="success" size="mini" @click="statusTrn(scope.row)"> 267 + <el-button type="info" size="mini" @click="statusTrn(scope.row)">
170 修改状态 268 修改状态
171 </el-button> 269 </el-button>
172 <el-button type="danger" size="mini" :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="delTrn(scope.row)"> 270 <el-button type="danger" size="mini" :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="delTrn(scope.row)">
173 - 删除 271 + 删&nbsp;&nbsp;&nbsp;除
174 </el-button> 272 </el-button>
175 </template> 273 </template>
176 </el-table-column> 274 </el-table-column>
177 </el-table> 275 </el-table>
178 <!--分页区域--> 276 <!--分页区域-->
179 - <div style="margin-top: 10px"> 277 + <div style="margin-top: 10px" class="toolbar">
180 <el-pagination 278 <el-pagination
181 :current-page="formTrn.pageNum" 279 :current-page="formTrn.pageNum"
182 :page-sizes="[10, 50, 100, 500]" 280 :page-sizes="[10, 50, 100, 500]"
@@ -391,7 +489,7 @@ @@ -391,7 +489,7 @@
391 </el-form> 489 </el-form>
392 </el-dialog> 490 </el-dialog>
393 </el-row> 491 </el-row>
394 - </el-row> 492 + </section>
395 </template> 493 </template>
396 494
397 <script> 495 <script>
@@ -709,5 +807,13 @@ @@ -709,5 +807,13 @@
709 </script> 807 </script>
710 808
711 <style > 809 <style >
712 - 810 + .toolbar{
  811 + height: 60px;
  812 + background-color: white;
  813 + line-height: 60px;
  814 + vertical-align: middle;
  815 + border-radius: 5px 5px 5px 5px;
  816 + padding: 15px 0 0 20px;
  817 + box-shadow: 0px 5px 5px #e5e8eb;
  818 + }
713 </style> 819 </style>