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