| @@ -13,7 +13,7 @@ | |||||
| <div class="ui sixteen wide column"> | <div class="ui sixteen wide column"> | ||||
| <div class="ui two column stackable grid"> | <div class="ui two column stackable grid"> | ||||
| <div class="column"> | <div class="column"> | ||||
| <el-input placeholder="请输入内容" v-model="search" class="input-with-select"> | |||||
| <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select" @keyup.enter.native="searchName()"> | |||||
| <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button> | <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button> | ||||
| </el-input> | </el-input> | ||||
| </div> | </div> | ||||
| @@ -44,7 +44,7 @@ | |||||
| <el-table-column | <el-table-column | ||||
| label="镜像名称" | label="镜像名称" | ||||
| width="350" | width="350" | ||||
| align="center" | |||||
| align="left" | |||||
| prop="name" | prop="name" | ||||
| sortable | sortable | ||||
| > | > | ||||
| @@ -55,14 +55,14 @@ | |||||
| <el-table-column | <el-table-column | ||||
| label="文件路径/镜像描述" | label="文件路径/镜像描述" | ||||
| width="450" | width="450" | ||||
| align="center" | |||||
| align="left" | |||||
| > | > | ||||
| <template slot-scope="scope"> | <template slot-scope="scope"> | ||||
| <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top"> | <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top"> | ||||
| <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a> | <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a> | ||||
| </el-tooltip> | </el-tooltip> | ||||
| <span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span> | |||||
| <span class="text-over" :title="scope.row.description">{{ scope.row.description | clearP}}</span> | |||||
| </template> | </template> | ||||
| </el-table-column> | </el-table-column> | ||||
| <el-table-column | <el-table-column | ||||
| @@ -77,6 +77,9 @@ | |||||
| label="创建时间" | label="创建时间" | ||||
| align="center" | align="center" | ||||
| sortable> | sortable> | ||||
| <template slot-scope="scope"> | |||||
| {{scope.row.createtime | transformTimestamp}} | |||||
| </template> | |||||
| </el-table-column> | </el-table-column> | ||||
| </el-table> | </el-table> | ||||
| </el-row> | </el-row> | ||||
| @@ -99,7 +102,7 @@ | |||||
| <div class="ui sixteen wide column"> | <div class="ui sixteen wide column"> | ||||
| <div class="ui two column stackable grid"> | <div class="ui two column stackable grid"> | ||||
| <div class="column"> | <div class="column"> | ||||
| <el-input placeholder="请输入内容" v-model="search" class="input-with-select"> | |||||
| <el-input placeholder="请输入内容" v-model="search" class="input-with-select" @keyup.enter.native="searchName()"> | |||||
| <el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button> | <el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button> | ||||
| </el-input> | </el-input> | ||||
| </div> | </div> | ||||
| @@ -132,7 +135,7 @@ | |||||
| <el-table-column | <el-table-column | ||||
| label="镜像名称" | label="镜像名称" | ||||
| width="350" | width="350" | ||||
| align="center" | |||||
| align="left" | |||||
| prop="name" | prop="name" | ||||
| sortable | sortable | ||||
| > | > | ||||
| @@ -143,7 +146,7 @@ | |||||
| <el-table-column | <el-table-column | ||||
| label="文件路径/镜像描述" | label="文件路径/镜像描述" | ||||
| width="450" | width="450" | ||||
| align="center" | |||||
| align="left" | |||||
| > | > | ||||
| <template slot-scope="scope"> | <template slot-scope="scope"> | ||||
| @@ -151,7 +154,7 @@ | |||||
| <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a> | <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a> | ||||
| </el-tooltip> | </el-tooltip> | ||||
| <span class="text-over" :title="scope.row.description">{{ scope.row.description }}</span> | |||||
| <span class="text-over" :title="scope.row.description">{{ scope.row.description | clearP }}</span> | |||||
| </template> | </template> | ||||
| </el-table-column> | </el-table-column> | ||||
| <el-table-column | <el-table-column | ||||
| @@ -166,6 +169,9 @@ | |||||
| label="创建时间" | label="创建时间" | ||||
| align="center" | align="center" | ||||
| sortable> | sortable> | ||||
| <template slot-scope="scope"> | |||||
| {{scope.row.createtime | transformTimestamp}} | |||||
| </template> | |||||
| </el-table-column> | </el-table-column> | ||||
| </el-table> | </el-table> | ||||
| </el-row> | </el-row> | ||||
| @@ -315,7 +321,7 @@ export default { | |||||
| }, | }, | ||||
| handleCurrentChange1(){ | |||||
| handleCurrentChange1(val){ | |||||
| this.params1.page = val | this.params1.page = val | ||||
| this.getImageList1() | this.getImageList1() | ||||
| @@ -365,6 +371,37 @@ export default { | |||||
| } | } | ||||
| }, | |||||
| filters:{ | |||||
| clearP(value){ | |||||
| console.log("sorce value",value) | |||||
| if(!value) return '' | |||||
| const reg = /\<\/?p\>/g; | |||||
| value = value.replace(reg,'') | |||||
| console.log("repalace:",value) | |||||
| return value | |||||
| }, | |||||
| transformTimestamp(timestamp){ | |||||
| console.log("timestamp",timestamp) | |||||
| let a = new Date(timestamp).getTime(); | |||||
| const date = new Date(a); | |||||
| const Y = date.getFullYear() + '-'; | |||||
| const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; | |||||
| const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '; | |||||
| const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'; | |||||
| const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ; | |||||
| const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 | |||||
| const dateString = Y + M + D + h + m + s; | |||||
| // console.log('dateString', dateString); // > dateString 2021-07-06 14:23 | |||||
| return dateString; | |||||
| }, | |||||
| }, | }, | ||||
| watch:{ | watch:{ | ||||
| search(val){ | search(val){ | ||||
| @@ -407,8 +444,57 @@ export default { | |||||
| .el-table thead{ | .el-table thead{ | ||||
| background-color: #f5f5f6; | background-color: #f5f5f6; | ||||
| } | } | ||||
| /deep/ .el-tabs__item:hover{ | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| /deep/ .el-tabs__item.is-active { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| /deep/ .el-tabs__active-bar{ | |||||
| background-color:#000 | |||||
| } | |||||
| /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { | |||||
| background-color: #5bb973; | |||||
| color: #FFF; | |||||
| } | |||||
| /deep/ .el-pagination.is-background .el-pager li.active { | |||||
| color: #fff; | |||||
| cursor: default; | |||||
| } | |||||
| /deep/ .el-pagination.is-background .el-pager li:hover { | |||||
| color: #5bb973; | |||||
| } | |||||
| /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover { | |||||
| color: #5bb973; | |||||
| } | |||||
| /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover { | |||||
| background-color: #5bb973; | |||||
| color: #FFF; | |||||
| } | |||||
| /deep/ .el-pager li.active { | |||||
| color: #08C0B9; | |||||
| cursor: default; | |||||
| } | |||||
| /deep/ .el-pagination .el-pager li:hover { | |||||
| color: #08C0B9; | |||||
| } | |||||
| /deep/ .el-pagination .el-pager li:not(.disabled):hover { | |||||
| color: #08C0B9; | |||||
| } | |||||
| /* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ | |||||
| background-color: #5bb973; | |||||
| color: #000; | |||||
| } */ | |||||
| /* /deep/ .el-pager li:hover{ | |||||
| color: #000; | |||||
| } */ | |||||
| #success{ | #success{ | ||||
| background-color: #4093ff; | |||||
| background-color: #5bb973; | |||||
| color: white; | color: white; | ||||
| } | } | ||||
| .text-over{ | .text-over{ | ||||