|
|
@@ -4,11 +4,31 @@
|
|
|
<div class="container-box">
|
|
|
<h2>素材库</h2>
|
|
|
<div class="adv-type">
|
|
|
- <el-select v-model="infotype" @change="changeType">
|
|
|
+ <div class="search-list-box">
|
|
|
+ <el-select v-model="infotype" @change="changeType" class="search-box">
|
|
|
<el-option v-for="items in typeList" :key="items.dataCode" :label="items.dataName"
|
|
|
:value="items.dataCode">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
+ <el-input v-model="fileNameSearch" placeholder="文件名称" @input="searchInput" class="file-name-search search-box"></el-input>
|
|
|
+ <el-select v-model="timeSort" @change="timeSortChange" class="search-box">
|
|
|
+ <el-option v-for="item in sortList" :key="item.sortCode" :label="item.sortName"
|
|
|
+ :value="item.sortCode">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="block search-box search-box1">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateSearch"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="dateSearchChange"
|
|
|
+ class="search-inner-box">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
<span>
|
|
|
<myUpload style="float: left;" @uploadBack="uploadBack" :fileInfo="fileInfot"
|
|
|
:fileList="fileInfot.fileList"></myUpload>
|
|
|
@@ -22,12 +42,15 @@
|
|
|
|
|
|
<div class="img-box">
|
|
|
<div class="boximg">
|
|
|
- <div v-for="(item,index) in imgList" :key="item.id">
|
|
|
- <img :src="item.fileBase64" alt="" @click="checkimg(item,index)">
|
|
|
- <el-checkbox v-if="mstatus" v-model="item.checked" @change="checkAdd(item)"></el-checkbox>
|
|
|
+ <div v-for="(item,index) in imgList" :key="item.id" class="img-list">
|
|
|
+ <div class="img-content">
|
|
|
+ <img :src="item.fileBase64" alt="" @click="checkimg(item,index)">
|
|
|
+ <el-checkbox v-if="mstatus" v-model="item.checked" @change="checkAdd(item)"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="file-name" v-model="item.fileName" :readonly="!item.isRename" @dblclick="renameFile(item)" :style="{'border':!item.isRename ? 'none' : '1px solid #ddd'}" @blur="submitFileName(item)">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
|
|
|
+ <el-pagination :page-size="20" class="pageBox" @current-change="currchange" layout="prev, pager, next" background
|
|
|
:total="total">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
@@ -67,7 +90,27 @@
|
|
|
bigImgs: false,
|
|
|
checksrc: null,
|
|
|
mstatus: false,
|
|
|
- checkList: []
|
|
|
+ checkList: [],
|
|
|
+ params:{},
|
|
|
+ fileNameSearch: '',
|
|
|
+ isRename: true,
|
|
|
+
|
|
|
+ //时间排序
|
|
|
+ sortList:[
|
|
|
+ {
|
|
|
+ sortCode: '1',
|
|
|
+ sortName: '倒序'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sortCode: '2',
|
|
|
+ sortName: '正序'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ timeSort:'倒序',
|
|
|
+ isDesc: "desc",
|
|
|
+ dateSearch:[],
|
|
|
+ createTimeFrom: '',
|
|
|
+ createTimeTo:''
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -76,10 +119,31 @@
|
|
|
if (this.typeList[i].dataCode == v) {
|
|
|
this.fileInfot.advType = v;
|
|
|
this.fileInfot.advTypeName = this.typeList[i].dataName;
|
|
|
+ // this.infotype = v
|
|
|
this.getlist(this.pageSize);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ timeSortChange(v){
|
|
|
+ if(v==1){
|
|
|
+ this.isDesc = 'desc'
|
|
|
+ this.getlist(this.pageSize);
|
|
|
+ }else if(v==2){
|
|
|
+ this.isDesc = ''
|
|
|
+ this.getlist(this.pageSize);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dateSearchChange(v){
|
|
|
+ this.createTimeFrom = this.$formatDate(v[0],"YYYY-MM-DD")
|
|
|
+ this.createTimeTo = this.$formatDate(v[1],"YYYY-MM-DD")
|
|
|
+ this.getlist(this.pageSize);
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ searchInput(v){
|
|
|
+ this.fileNameSearch = v
|
|
|
+ this.getlist(this.pageSize);
|
|
|
+ },
|
|
|
uploadBack(v) {
|
|
|
this.getlist(this.pageSize);
|
|
|
},
|
|
|
@@ -149,9 +213,45 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ renameFile(v){
|
|
|
+ this.$set(v,'isRename',true)
|
|
|
+ },
|
|
|
+ submitFileName(v){
|
|
|
+ v.isRename = false;
|
|
|
+ let params = {
|
|
|
+ id: v.id,
|
|
|
+ fileName: v.fileName
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ url: "/market/cadvMaterial/updateMkAdvFileName",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data: params,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.result === 1) {
|
|
|
+ this.$message({
|
|
|
+ message: res.data.desc,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.getlist(this.pageSize);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
getlist(v) {
|
|
|
let params = {
|
|
|
- advType: this.infotype
|
|
|
+ advType: this.infotype,
|
|
|
+ fileName: this.fileNameSearch,
|
|
|
+ isDesc: this.isDesc,
|
|
|
+ createTimeFrom: this.createTimeFrom,
|
|
|
+ createTimeTo: this.createTimeTo,
|
|
|
};
|
|
|
if (this.infotype == '08') {
|
|
|
params.advType = ''
|
|
|
@@ -177,7 +277,7 @@
|
|
|
// 分页
|
|
|
currchange(v) {
|
|
|
this.pageSize = v;
|
|
|
- this.getList(this.pageSize);
|
|
|
+ this.getlist(this.pageSize);
|
|
|
},
|
|
|
gettype() {
|
|
|
this.$http({
|
|
|
@@ -279,7 +379,10 @@
|
|
|
.adv-type {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
+ align-items: center;
|
|
|
+ .file-name-search{
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
|
|
|
@@ -297,35 +400,57 @@
|
|
|
// justify-content: space-between;
|
|
|
margin-top: 20px;
|
|
|
|
|
|
- div {
|
|
|
+ .img-list {
|
|
|
display: inline-block;
|
|
|
width: 18%;
|
|
|
margin-right: 2%;
|
|
|
margin-bottom: 20px;
|
|
|
overflow: hidden;
|
|
|
- border: 1px solid #ddd;
|
|
|
+ // border: 1px solid #ddd;
|
|
|
border-radius: 3px;
|
|
|
background: #fff;
|
|
|
position: relative;
|
|
|
- height: 45%;
|
|
|
-
|
|
|
- img {
|
|
|
+ height: 50%;
|
|
|
+
|
|
|
+
|
|
|
+ .img-content{
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- // height: 100%;
|
|
|
- }
|
|
|
+ height: 80%;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ // width: 100%;
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ // height: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .el-checkbox {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+ .el-checkbox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
- span {}
|
|
|
+ span {}
|
|
|
+ }
|
|
|
+ .file-name{
|
|
|
+ margin-top: 5px;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -367,4 +492,22 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+ .search-list-box{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-width: 50%;
|
|
|
+ .search-box{
|
|
|
+ width: 30%;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .search-inner-box{
|
|
|
+ width: 100%
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-box1{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
wangguangping