Skip to content

E
ElectricitySheep
Commit 6fed8421 authored by zhengke's avatar zhengke
Browse files
Options

增加双击选中

parent 8cb29ccb
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 270 deletions
src/components/global/ChooseImg.vue
View file @ 6fed8421
<template> <template>
<div class="ChooseImg"> <div class="ChooseImg">
<el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);"> <el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);">
<el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);"> <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
<el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组</el-button> <el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组
<div style="margin:20px 0"> </el-button>
<el-input v-model="searchVal" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input> <div style="margin:20px 0">
</div> <el-input v-model="searchVal" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
<div class="el-scrollbar" style="height: 450px; width: 100%;"> </div>
<div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;"> <div class="el-scrollbar" style="height: 450px; width: 100%;">
<div class="el-scrollbar__view"> <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
<li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"> <div class="el-scrollbar__view">
<i class="el-icon-tickets"></i> <li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item"
<span >全部</span> style="padding-left: 10px;padding-right: 10px;">
</li> <i class="el-icon-tickets"></i>
<li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)" v-for="(item,index) in NewItems" :key="index" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"> <span>全部</span>
<div flex="dir:left box:last"> </li>
<el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;"> <li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)"
<i class="el-icon-tickets"></i> v-for="(item,index) in NewItems" :key="index" class="el-menu-item"
<span>{{item.Name}}</span> style="padding-left: 10px;padding-right: 10px;">
</el-col> <div flex="dir:left box:last">
<el-col class="blue" :span="6"> <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
<span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑</span> <i class="el-icon-tickets"></i>
| <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span> <span>{{item.Name}}</span>
</el-col> </el-col>
</div> <el-col class="blue" :span="6">
</li> <span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑</span>
</div> | <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span>
</div> </el-col>
</div> </div>
</el-col> </li>
<el-col :span="18"> </div>
<div style="margin-top: 10px;margin-left: 20px;" class="appendInput"> </div>
<el-input size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name"> </div>
<el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button> </el-col>
</el-input> <el-col :span="18">
</div> <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
<div class="basefix app-attachment-list"> <el-input size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name">
<div class="app-attachment-item app-attachment-upload"> <el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;"> </el-input>
<el-upload class="avatar-uploader" action="" </div>
accept="image/jpeg,image/gif,image/png,image/bmp" <div class="basefix app-attachment-list">
:show-file-list="false" :http-request="UploadImage"> <div class="app-attachment-item app-attachment-upload">
<i class="el-icon-upload"></i> <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
</el-upload> <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
</div> :show-file-list="false" :http-request="UploadImage">
</div> <i class="el-icon-upload"></i>
<el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="item.Name" placement="top-start"> </el-upload>
<div @click="PageSelect(item,index)" :class="selectId==item.Id ? 'selected' :''" class="el-tooltip item app-attachment-item" > </div>
<img :src="getIconLink(item.Path)" class="app-attachment-img" style="width: 100px; height: 100px;"> </div>
<div class="app-attachment-name">{{item.Name}}</div> <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" content="双击选中图片"
</div> placement="top-start">
</el-tooltip> <div @click="PageSelect(item,1)" @dblclick="PageSelect(item,2)" :class="selectId==item.Id ? 'selected' :''"
class="el-tooltip item app-attachment-item">
</div> <img :src="getIconLink(item.Path)" class="app-attachment-img" style="width: 100px; height: 100px;">
<div style="padding-right:10px"> <div class="app-attachment-name">{{item.Name}}</div>
<el-pagination style="text-align:right" </div>
background </el-tooltip>
:current-page="currentPage4"
@current-change="handleCurrentChange" </div>
:page-size="msg.pageSize" <div style="padding-right:10px">
layout="prev, pager, next,jumper" <el-pagination style="text-align:right" background :current-page="currentPage4"
:total="total"> @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
</el-pagination> :total="total">
</div> </el-pagination>
</el-col> </div>
</el-row> </el-col>
<div style="margin-top:20px;text-align:right"> </el-row>
<el-button size="small" type="primary" @click="SelectImgId">选定</el-button> <div style="margin-top:20px;text-align:right">
</div> <el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
<!-- 新增分组 --> </div>
<!-- 新增分组 -->
<el-dialog :modal="false" :modal-append-to-body='false' title="分组管理" :visible.sync="addGroupMsgDig" width="400px"> <el-dialog :modal="false" :modal-append-to-body='false' title="分组管理" :visible.sync="addGroupMsgDig" width="400px">
<el-form :model="addGroupMsg" :rules="addGroupMsgrules" ref="addGroupMsg" label-width="100px"> <el-form :model="addGroupMsg" :rules="addGroupMsgrules" ref="addGroupMsg" label-width="100px">
<el-form-item label="分组名称" prop="Name"> <el-form-item label="分组名称" prop="Name">
<el-input <el-input size="small" type="text" placeholder="请输入内容" v-model="addGroupMsg.Name" maxlength="8"
size="small" show-word-limit>
type="text" </el-input>
placeholder="请输入内容"
v-model="addGroupMsg.Name"
maxlength="8"
show-word-limit
>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="Sort"> <el-form-item label="排序" prop="Sort">
<el-input @keyup.native="checkInteger(addGroupMsg,'Sort')" size="small" v-model="addGroupMsg.Sort"></el-input> <el-input @keyup.native="checkInteger(addGroupMsg,'Sort')" size="small" v-model="addGroupMsg.Sort"></el-input>
...@@ -95,237 +90,248 @@ ...@@ -95,237 +90,248 @@
</template> </template>
<script> <script>
export default { export default {
name: 'ChooseImg', name: 'ChooseImg',
data(){ data() {
return{ return {
czType:0, czType: 0,
searchVal:'', searchVal: '',
val:'', val: '',
Id:'', Id: '',
currentPage4:1, currentPage4: 1,
msg:{ msg: {
pageIndex:1, pageIndex: 1,
pageSize:15, pageSize: 15,
}, },
total:0, total: 0,
loading:false, loading: false,
scgroupMsg:{ scgroupMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:1, Type: 1,
Recycled:1, Recycled: 1,
}, },
groupList:[], groupList: [],
PageMsg:{ PageMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:1, Type: 1,
Recycled:1, Recycled: 1,
pageIndex:1, pageIndex: 1,
pageSize:15, pageSize: 17,
GroupId:0, GroupId: 0,
}, },
PageList:[], PageList: [],
addGroupMsgDig:false, addGroupMsgDig: false,
pageMsgDig:false, pageMsgDig: false,
addGroupMsg:{ addGroupMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:'', Type: '',
Sort:'', Sort: '',
}, },
addGroupMsgrules:{ addGroupMsgrules: {
Name: [{ Name: [{
required: true, required: true,
message: '请填写分组名称', message: '请填写分组名称',
trigger: 'blur' trigger: 'blur'
}], }],
Sort: [{ Sort: [{
required: true, required: true,
message: '请填写排序', message: '请填写排序',
trigger: 'blur' trigger: 'blur'
}], }],
}, },
addpageMsg:{ addpageMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:1, Type: 1,
GroupId:0, GroupId: 0,
Path:'', Path: '',
Image:'', Image: '',
VideoTime:0, VideoTime: 0,
WithHeight:0, WithHeight: 0,
}, },
selectId:-1, selectId: -1,
emitmsg:{}, emitmsg: {},
} }
}, },
created(){ created() {
}, },
computed: { computed: {
NewItems() { NewItems() {
var _this = this; var _this = this;
var NewItems = []; var NewItems = [];
this.groupList.map(function(item) { this.groupList.map(function (item) {
if (item.Name.search(_this.searchVal) != -1) { if (item.Name.search(_this.searchVal) != -1) {
NewItems.push(item); NewItems.push(item);
} }
}); });
return NewItems; return NewItems;
} }
}, },
mounted(){ mounted() {
this.GetMemberGradeList(); this.GetMemberGradeList();
this.GetPageList(); this.GetPageList();
},
methods:{
InitData(Type){
this.czType=Type;
this.selectId=-1;
},
SelectImgId(){
this.$emit('SelectId',this.emitmsg)
this.selectId=-1;
}, },
UploadImage(file) { methods: {
InitData(Type) {
this.czType = Type;
this.selectId = -1;
},
SelectImgId() {
this.$emit('SelectId', this.emitmsg)
this.selectId = -1;
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => { this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
this.addpageMsg.Path = res.FileUrl; this.addpageMsg.Path = res.FileUrl;
this.addpageMsg.Name = res.FileName; this.addpageMsg.Name = res.FileName;
this.addPageList(); this.addPageList();
} }
}) })
}, },
// 新增素材信息 // 新增素材信息
addPageList(){ addPageList() {
this.apipost("/api/product/SetMaterialInfo",this.addpageMsg, res => { this.apipost("/api/product/SetMaterialInfo", this.addpageMsg, res => {
if(res.data.resultCode==1){ if (res.data.resultCode == 1) {
this.GetPageList(); this.GetPageList();
} }
}) })
}, },
PageSelect(item){ // clickType 1单击 2双击
this.emitmsg={ PageSelect(item,clickType) {
selectId:item.Id, this.emitmsg = {
url:item.Path selectId: item.Id,
url: item.Path
} }
this.selectId=item.Id; this.selectId = item.Id;
}, if(clickType==2){
this.SelectImgId();
addGroup(){
this.addGroupMsgDig=true;
this.addGroupMsg={
Id:0,
Name:'',
Type:1,
Sort:'',
} }
},
}, addGroup() {
HsGroup(item){ this.addGroupMsgDig = true;
let that=this; this.addGroupMsg = {
Id: 0,
Name: '',
Type: 1,
Sort: '',
}
},
HsGroup(item) {
let that = this;
that.$confirm('是否删除?', '提示', { that.$confirm('是否删除?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.apipost('/api/product/SetMaterialGroupRecycled',{GroupId:item.Id}, this.apipost('/api/product/SetMaterialGroupRecycled', {
res => { GroupId: item.Id
if (res.data.resultCode === 1) { },
this.GetMemberGradeList(); res => {
this.Success(res.data.message) if (res.data.resultCode === 1) {
this.GetMemberGradeList();
this.Success(res.data.message)
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
}).catch(() => { }).catch(() => {
}); });
}, },
EditGroup(item){ EditGroup(item) {
this.addGroupMsgDig=true; this.addGroupMsgDig = true;
this.addGroupMsg={ this.addGroupMsg = {
Id:item.Id, Id: item.Id,
Name:item.Name, Name: item.Name,
Type:item.Type, Type: item.Type,
Sort:item.Sort, Sort: item.Sort,
} }
}, },
GroupsubmitForm (formName) { GroupsubmitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
this.apipost('/api/product/SetMaterialGroupInfo',this.addGroupMsg, this.apipost('/api/product/SetMaterialGroupInfo', this.addGroupMsg,
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
this.GetMemberGradeList(); this.GetMemberGradeList();
this.Success(res.data.message) this.Success(res.data.message)
this.addGroupMsgDig=false; this.addGroupMsgDig = false;
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
} else { } else {
return false; return false;
} }
}); });
}, },
SelectGroup(id){ SelectGroup(id) {
this.PageMsg.GroupId=id; this.PageMsg.GroupId = id;
this.GetPageList(); this.GetPageList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.msg.pageIndex = val; this.PageMsg.pageIndex = val;
console.log(val, 'vallll')
this.GetPageList(); this.GetPageList();
}, },
GetMemberGradeList(){ GetMemberGradeList() {
this.loading=true; this.loading = true;
this.apipost("/api/product/GetMaterialGroupList",this.scgroupMsg, res => { this.apipost("/api/product/GetMaterialGroupList", this.scgroupMsg, res => {
this.loading=false; this.loading = false;
this.groupList=res.data.data; this.groupList = res.data.data;
}) })
}, },
GetPageList(){ GetPageList() {
this.loading=true; this.loading = true;
this.apipost("/api/product/GetMaterialInfoPageList",this.PageMsg, res => { this.apipost("/api/product/GetMaterialInfoPageList", this.PageMsg, res => {
this.loading=false; this.loading = false;
this.total=res.data.data.count; this.total = res.data.data.count;
let data=res.data.data.pageData; let data = res.data.data.pageData;
this.PageList=data; this.PageList = data;
}) })
},
}, },
}
},
}
</script> </script>
<style> <style>
.ChooseImg .el-input.is-active .el-input__inner, .ChooseImg .el-input__inner:focus{ .ChooseImg .el-input.is-active .el-input__inner,
.ChooseImg .el-input__inner:focus {
border-color: #DCDFE6; border-color: #DCDFE6;
} }
.ChooseImg .app-attachment-list .selected {
.ChooseImg .app-attachment-list .selected {
box-shadow: 0 0 0 1px #1ed0ff; box-shadow: 0 0 0 1px #1ed0ff;
background: #daf5ff; background: #daf5ff;
border-radius: 5px; border-radius: 5px;
} }
.ChooseImg .selectActive .el-icon-tickets{
.ChooseImg .selectActive .el-icon-tickets {
color: #409EFF; color: #409EFF;
} }
.ChooseImg .selectActive{
.ChooseImg .selectActive {
color: #409EFF; color: #409EFF;
} }
.ChooseImg .app-attachment-name {
.ChooseImg .app-attachment-name {
color: #666666; color: #666666;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
...@@ -335,15 +341,18 @@ export default { ...@@ -335,15 +341,18 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
} }
.ChooseImg .app-attachment-item .app-attachment-img {
.ChooseImg .app-attachment-item .app-attachment-img {
display: block; display: block;
} }
.ChooseImg .app-attachment-upload i {
.ChooseImg .app-attachment-upload i {
font-size: 30px; font-size: 30px;
color: #909399; color: #909399;
} }
.ChooseImg .app-attachment-item {
.ChooseImg .app-attachment-item {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -353,25 +362,31 @@ export default { ...@@ -353,25 +362,31 @@ export default {
margin: 7.5px; margin: 7.5px;
text-align: center; text-align: center;
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.ChooseImg .app-attachment-upload {
.ChooseImg .app-attachment-upload {
box-shadow: none; box-shadow: none;
border: 1px dashed #b2b6bd; border: 1px dashed #b2b6bd;
height: 100px; height: 100px;
width: 100px; width: 100px;
margin: 17.5px; margin: 17.5px;
padding: 0; padding: 0;
} }
.ChooseImg .app-attachment-list{
.ChooseImg .app-attachment-list {
padding: 5px; padding: 5px;
} min-height: 475px;
.ChooseImg .appendInput .el-input__inner{ }
.ChooseImg .appendInput .el-input__inner {
border-right: none; border-right: none;
} }
.ChooseImg .appendInput .el-input-group__append{
background-color: #fff!important; .ChooseImg .appendInput .el-input-group__append {
background-color: #fff !important;
border-left: none; border-left: none;
padding: 0 15px; padding: 0 15px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment