style:登簿日志查询
Showing
9 changed files
with
69 additions
and
54 deletions
src/image/tablebk.png
0 → 100644
19.4 KB
| ... | @@ -22,5 +22,6 @@ export default { | ... | @@ -22,5 +22,6 @@ export default { | 
| 22 | box-sizing: border-box; | 22 | box-sizing: border-box; | 
| 23 | flex: 1; | 23 | flex: 1; | 
| 24 | width: 100%; | 24 | width: 100%; | 
| 25 | margin-right: 15px; | ||
| 25 | } | 26 | } | 
| 26 | </style> | 27 | </style> | 
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... | 
| ... | @@ -173,40 +173,36 @@ | ... | @@ -173,40 +173,36 @@ | 
| 173 | // element table 样式修改 | 173 | // element table 样式修改 | 
| 174 | //去掉表格内的线 | 174 | //去掉表格内的线 | 
| 175 | table th { | 175 | table th { | 
| 176 | border-bottom: 5px solid #000637 !important; | 176 | border-bottom: 1px solid #29409D !important; | 
| 177 | } | 177 | } | 
| 178 | 178 | ||
| 179 | table td { | 179 | table td { | 
| 180 | border-bottom: 5px solid #000637 !important; | 180 | border-bottom: 1px solid #29409D !important; | 
| 181 | } | 181 | } | 
| 182 | 182 | ||
| 183 | //去掉最下面的那一条线 | 183 | //去掉最下面的那一条线 | 
| 184 | .el-table::before { | 184 | .el-table::before { | 
| 185 | height: 5px !important; | 185 | height: 1px !important; | 
| 186 | background-color: #000637 !important; | 186 | background-color: #29409D !important; | 
| 187 | } | 187 | } | 
| 188 | 188 | ||
| 189 | .lb-table { | 189 | .lb-table { | 
| 190 | background-color: #000637 !important; | 190 | background-color: $containerbg; | 
| 191 | } | 191 | } | 
| 192 | 192 | ||
| 193 | .el-table__body-wrapper { | 193 | .el-table__body-wrapper { | 
| 194 | background-color: #000637 !important; | 194 | background-color: $containerbg !important; | 
| 195 | } | 195 | } | 
| 196 | 196 | ||
| 197 | .el-table--enable-row-hover .el-table__body tr:hover>td { | 197 | .el-table__body tr:hover { | 
| 198 | background-color: #103E99 !important; | 198 | background: rgba(2, 160, 253, 0.1) !important; | 
| 199 | box-shadow: inset 0px 0px 18px 0px #02A0FD !important; | ||
| 199 | } | 200 | } | 
| 200 | 201 | ||
| 201 | .el-table__body .el-table__row.hover-row td { | 202 | .el-table__body tr:hover>td.el-table__cell { | 
| 202 | background-color: #103E99 !important; | 203 | background: none !important; | 
| 203 | } | 204 | } | 
| 204 | 205 | ||
| 205 | .el-table tbody tr:hover>td { | ||
| 206 | background-color: #103E99 !important; | ||
| 207 | } | ||
| 208 | |||
| 209 | |||
| 210 | // 表格样式 | 206 | // 表格样式 | 
| 211 | .el-table th { | 207 | .el-table th { | 
| 212 | height: 48px !important; | 208 | height: 48px !important; | ... | ... | 
| ... | @@ -7,8 +7,7 @@ | ... | @@ -7,8 +7,7 @@ | 
| 7 | } | 7 | } | 
| 8 | 8 | ||
| 9 | .el-table__row { | 9 | .el-table__row { | 
| 10 | background-color: #00275F !important; | 10 | background-color: $containerbg !important; | 
| 11 | margin-top: 5px; | ||
| 12 | } | 11 | } | 
| 13 | 12 | ||
| 14 | thead { | 13 | thead { | 
| ... | @@ -35,16 +34,15 @@ | ... | @@ -35,16 +34,15 @@ | 
| 35 | height: 100%; | 34 | height: 100%; | 
| 36 | width: 100%; | 35 | width: 100%; | 
| 37 | box-sizing: border-box; | 36 | box-sizing: border-box; | 
| 38 | background-color: #000637; | ||
| 39 | overflow-x: hidden; | 37 | overflow-x: hidden; | 
| 38 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 39 | background-size: 100% 100%; | ||
| 40 | padding: 2px; | ||
| 40 | 41 | ||
| 41 | &-header { | 42 | &-header { | 
| 42 | width: 100%; | 43 | width: 100%; | 
| 43 | padding: 10px; | 44 | padding: 10px; | 
| 44 | box-sizing: border-box; | 45 | box-sizing: border-box; | 
| 45 | background: #061858; | ||
| 46 | box-shadow: inset 0px 0px 14px 0px #1D66DC; | ||
| 47 | border: 2px solid #1A3F81; | ||
| 48 | 46 | ||
| 49 | /deep/.el-form-item__label { | 47 | /deep/.el-form-item__label { | 
| 50 | color: #E3F1FF; | 48 | color: #E3F1FF; | 
| ... | @@ -95,7 +93,6 @@ | ... | @@ -95,7 +93,6 @@ | 
| 95 | &-content { | 93 | &-content { | 
| 96 | width: 100%; | 94 | width: 100%; | 
| 97 | box-sizing: border-box; | 95 | box-sizing: border-box; | 
| 98 | background: #FFFFFF; | ||
| 99 | margin-top: 10px; | 96 | margin-top: 10px; | 
| 100 | 97 | ||
| 101 | //修改表头的背景颜色横向渐变色 | 98 | //修改表头的背景颜色横向渐变色 | 
| ... | @@ -105,6 +102,20 @@ | ... | @@ -105,6 +102,20 @@ | 
| 105 | color: #FFFFFF; | 102 | color: #FFFFFF; | 
| 106 | } | 103 | } | 
| 107 | 104 | ||
| 105 | /deep/ .el-pagination { | ||
| 106 | .el-input__inner { | ||
| 107 | background: #1F357A !important; | ||
| 108 | color: #FFFFFF; | ||
| 109 | border: none; | ||
| 110 | } | ||
| 111 | } | ||
| 112 | |||
| 113 | /deep/.btn-next, | ||
| 114 | /deep/.btn-prev { | ||
| 115 | background: #1F357A !important; | ||
| 116 | color: #FFFFFF; | ||
| 117 | } | ||
| 118 | |||
| 108 | } | 119 | } | 
| 109 | 120 | ||
| 110 | .el-form--inline .el-form-item { | 121 | .el-form--inline .el-form-item { | ... | ... | 
| ... | @@ -11,8 +11,7 @@ | ... | @@ -11,8 +11,7 @@ | 
| 11 | transition: width 0.28s; | 11 | transition: width 0.28s; | 
| 12 | width: $sideBarWidth !important; | 12 | width: $sideBarWidth !important; | 
| 13 | font-size: 0px; | 13 | font-size: 0px; | 
| 14 | 14 | margin-right: 15px; | |
| 15 | |||
| 16 | 15 | ||
| 17 | .horizontal-collapse-transition { | 16 | .horizontal-collapse-transition { | 
| 18 | transition: 0s width ease-in-out, 0s padding-left ease-in-out, | 17 | transition: 0s width ease-in-out, 0s padding-left ease-in-out, | ... | ... | 
| ... | @@ -11,9 +11,9 @@ export default { | ... | @@ -11,9 +11,9 @@ export default { | 
| 11 | computed: { | 11 | computed: { | 
| 12 | ...mapGetters(['dictData']), | 12 | ...mapGetters(['dictData']), | 
| 13 | }, | 13 | }, | 
| 14 | created () { | 14 | mounted () { | 
| 15 | if (this.fetchData) { | 15 | if (this.queryClick) { | 
| 16 | this.fetchData() | 16 | this.queryClick() | 
| 17 | } | 17 | } | 
| 18 | }, | 18 | }, | 
| 19 | methods: { | 19 | methods: { | 
| ... | @@ -24,14 +24,9 @@ export default { | ... | @@ -24,14 +24,9 @@ export default { | 
| 24 | }, | 24 | }, | 
| 25 | handleCurrentChange (val) { | 25 | handleCurrentChange (val) { | 
| 26 | this.pageData.currentPage = val | 26 | this.pageData.currentPage = val | 
| 27 | if (this.fetchData) { | ||
| 28 | this.fetchData() | ||
| 29 | } | ||
| 30 | console.log('this.queryClick,', this.queryClick, 'this.fetchData', this.fetchData); | ||
| 31 | if (this.queryClick) { | 27 | if (this.queryClick) { | 
| 32 | this.queryClick() | 28 | this.queryClick() | 
| 33 | } | 29 | } | 
| 34 | console.log(val, this.pageData.currentPage, 'this.pageDatathis.pageData'); | ||
| 35 | }, | 30 | }, | 
| 36 | handleDel () { | 31 | handleDel () { | 
| 37 | let deleteAfterPage = Math.ceil((this.tableData.total - 1) / this.pageData.pageSize) | 32 | let deleteAfterPage = Math.ceil((this.tableData.total - 1) / this.pageData.pageSize) | ... | ... | 
| 1 | let vm = null | ||
| 2 | const sendThis = (_this) => { | ||
| 3 | vm = _this | ||
| 4 | } | ||
| 1 | class data { | 5 | class data { | 
| 2 | columns () { | 6 | columns () { | 
| 3 | return [ | 7 | return [ | 
| 4 | 8 | { | |
| 9 | label: '序号', | ||
| 10 | type: 'index', | ||
| 11 | width: '50', | ||
| 12 | render: (h, scope) => { | ||
| 13 | return ( | ||
| 14 | <div> | ||
| 15 | {(vm.pageData.currentPage - 1) * vm.pageData.pageSize + scope.$index + 1} | ||
| 16 | </div> | ||
| 17 | ) | ||
| 18 | } | ||
| 19 | }, | ||
| 5 | { | 20 | { | 
| 6 | prop: "AREANAME", | 21 | prop: "AREANAME", | 
| 7 | label: "区域名称", | 22 | label: "区域名称", | 
| ... | @@ -163,4 +178,9 @@ class data { | ... | @@ -163,4 +178,9 @@ class data { | 
| 163 | ] | 178 | ] | 
| 164 | } | 179 | } | 
| 165 | } | 180 | } | 
| 166 | export default new data() | 181 | let datas = new data() | 
| 182 | export { | ||
| 183 | datas, | ||
| 184 | sendThis | ||
| 185 | } | ||
| 186 | ... | ... | 
| ... | @@ -28,7 +28,7 @@ | ... | @@ -28,7 +28,7 @@ | 
| 28 | <!-- 操作按钮 --> | 28 | <!-- 操作按钮 --> | 
| 29 | <el-col :span="6" class="btnColRight"> | 29 | <el-col :span="6" class="btnColRight"> | 
| 30 | <btn nativeType="cz" @click="resetForm('ruleForm')">重置</btn> | 30 | <btn nativeType="cz" @click="resetForm('ruleForm')">重置</btn> | 
| 31 | <btn nativeType="cx" @click="handleSubmit">查询</btn> | 31 | <btn nativeType="cx" @click="queryClick">查询</btn> | 
| 32 | </el-col> | 32 | </el-col> | 
| 33 | </el-row> | 33 | </el-row> | 
| 34 | </el-form> | 34 | </el-form> | 
| ... | @@ -36,7 +36,7 @@ | ... | @@ -36,7 +36,7 @@ | 
| 36 | <!-- 列表区域 --> | 36 | <!-- 列表区域 --> | 
| 37 | <div class="from-clues-content"> | 37 | <div class="from-clues-content"> | 
| 38 | <lb-table :page-size="pageData.size" :heightNum="200" :current-page.sync="pageData.current" | 38 | <lb-table :page-size="pageData.size" :heightNum="200" :current-page.sync="pageData.current" | 
| 39 | :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" | 39 | :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" | 
| 40 | :column="tableData.columns" :data="tableData.data"> | 40 | :column="tableData.columns" :data="tableData.data"> | 
| 41 | </lb-table> | 41 | </lb-table> | 
| 42 | </div> | 42 | </div> | 
| ... | @@ -45,14 +45,14 @@ | ... | @@ -45,14 +45,14 @@ | 
| 45 | <script> | 45 | <script> | 
| 46 | // 登簿日志查询 | 46 | // 登簿日志查询 | 
| 47 | // 引入列表数据 | 47 | // 引入列表数据 | 
| 48 | import data from "./data" | 48 | import { datas, sendThis } from "./data" | 
| 49 | // 引入表格混入方法 | 49 | // 引入表格混入方法 | 
| 50 | import tableMixin from '@/mixins/tableMixin.js' | 50 | import table from "@/utils/mixin/table" | 
| 51 | import { getRecordLogPage } from "@/api/dbrzcx.js"; | 51 | import { getRecordLogPage } from "@/api/dbrzcx.js"; | 
| 52 | import { mapGetters } from 'vuex' | 52 | import { mapGetters } from 'vuex' | 
| 53 | export default { | 53 | export default { | 
| 54 | name: "dbrzcx", | 54 | name: "dbrzcx", | 
| 55 | mixins: [tableMixin], | 55 | mixins: [table], | 
| 56 | computed: { | 56 | computed: { | 
| 57 | ...mapGetters(['dicData']) | 57 | ...mapGetters(['dicData']) | 
| 58 | }, | 58 | }, | 
| ... | @@ -87,34 +87,27 @@ export default { | ... | @@ -87,34 +87,27 @@ export default { | 
| 87 | // table数据 | 87 | // table数据 | 
| 88 | tableData: { | 88 | tableData: { | 
| 89 | // 表头 | 89 | // 表头 | 
| 90 | columns: [{ | 90 | columns: datas.columns(), | 
| 91 | label: '序号', | ||
| 92 | type: 'index', | ||
| 93 | width: '50', | ||
| 94 | index: this.indexMethod, | ||
| 95 | }].concat(data.columns()), | ||
| 96 | // 列表 | 91 | // 列表 | 
| 97 | data: [], | 92 | data: [], | 
| 98 | total: 0, | 93 | total: 0, | 
| 99 | }, | ||
| 100 | // 分页 | ||
| 101 | pageData: { | ||
| 102 | total: 0, | ||
| 103 | pageSize: 15 | ||
| 104 | } | 94 | } | 
| 105 | } | 95 | } | 
| 106 | }, | 96 | }, | 
| 97 | mounted () { | ||
| 98 | sendThis(this); | ||
| 99 | }, | ||
| 107 | methods: { | 100 | methods: { | 
| 108 | // 重置表单 | 101 | // 重置表单 | 
| 109 | resetForm () { | 102 | resetForm () { | 
| 110 | this.$refs.ruleForm.resetFields(); | 103 | this.$refs.ruleForm.resetFields(); | 
| 111 | }, | 104 | }, | 
| 112 | async featchData () { | 105 | queryClick () { | 
| 113 | getRecordLogPage({ ...this.form, ...this.pageData }).then(res => { | 106 | getRecordLogPage({ ...this.form, ...this.pageData }).then(res => { | 
| 114 | if (res.code === 200) { | 107 | if (res.code === 200) { | 
| 115 | let { total, records } = res.result | 108 | let { records, total } = res.result | 
| 116 | this.tableData.total = total; | ||
| 117 | this.tableData.data = records ? records : [] | 109 | this.tableData.data = records ? records : [] | 
| 110 | this.tableData.total = total ? total : 0 | ||
| 118 | } | 111 | } | 
| 119 | }) | 112 | }) | 
| 120 | } | 113 | } | ... | ... | 
- 
Please register or sign in to post a comment