Skip to content

E
ElectricitySheep
Commit 4fe69012 authored by 黄奎's avatar 黄奎
Browse files
Options

新增多选

parent b4603283
Hide whitespace changes
Inline Side-by-side
Showing with 590 additions and 565 deletions
src/components/CommodityMan/materialMan.vue
View file @ 4fe69012
<template> <template>
<div class="ChooseImg materialMan"> <div class="ChooseImg materialMan">
<div class="head-title"> <div class="head-title">
<span class="point" @click="SelectRecycled(1)" :class="scgroupMsg.Recycled==2 ? 'blue' :''">素材管理</span> <span class="point" @click="SelectRecycled(1)" :class="scgroupMsg.Recycled==2 ? 'blue' :''">素材管理</span>
<span v-if="scgroupMsg.Recycled==2"> / 回收站</span> <span v-if="scgroupMsg.Recycled==2"> / 回收站</span>
<el-button @click="SelectRecycled(2)" style="float:right;margin-top: -5px;" size="small" type="primary">回收站</el-button> <el-button @click="SelectRecycled(2)" style="float:right;margin-top: -5px;" size="small" type="primary">回收站
</el-button>
</div> </div>
<div v-loading="loading" style="margin-top:10px;background:#fff;padding:20px"> <div v-loading="loading" style="margin-top:10px;background:#fff;padding:20px">
<div class="TabDiv"> <div class="TabDiv">
<span :class="commonType==1?'spanActive':''" @click="handleClick(1)">图片</span> <span :class="commonType==1?'spanActive':''" @click="handleClick(1)">图片</span>
<span :class="commonType==2?'spanActive':''" @click="handleClick(2)">视频</span> <span :class="commonType==2?'spanActive':''" @click="handleClick(2)">视频</span>
</div> </div>
<div> <div>
<div style="height: 718px;" flex="box:first"> <div style="height: 718px;" flex="box:first">
<div style="margin-right: 15px;width: auto;-webkit-box-flex: 0;flex-shrink: 0;flex-grow: 0;"> <div style="margin-right: 15px;width: auto;-webkit-box-flex: 0;flex-shrink: 0;flex-grow: 0;">
<el-button @click="addGroup" style="margin-bottom: 12px;" type="primary" size="small">添加分组</el-button> <el-button @click="addGroup" style="margin-bottom: 12px;" type="primary" size="small">添加分组</el-button>
<div style="border: 1px solid rgb(227, 227, 227);width:250px"> <div style="border: 1px solid rgb(227, 227, 227);width:250px">
<!-- <div style="margin:20px 0"> <!-- <div style="margin:20px 0">
<el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input> <el-input v-model="val" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
</div> --> </div> -->
<div class="el-scrollbar" style="width: 100%;height:670px"> <div class="el-scrollbar" style="width: 100%;height:670px">
<div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;"> <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
<div class="el-scrollbar__view"> <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;"> <li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item"
<i class="el-icon-tickets"></i> style="padding-left: 10px;padding-right: 10px;">
<span>全部</span> <i class="el-icon-tickets"></i>
</li> <span>全部</span>
<li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)" v-for="(item,index) in groupList" :key="index" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"> </li>
<div flex="dir:left box:last"> <li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)"
<el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;"> v-for="(item,index) in groupList" :key="index" class="el-menu-item"
<i class="el-icon-tickets"></i> style="padding-left: 10px;padding-right: 10px;">
<span>{{item.Name}}</span> <div flex="dir:left box:last">
</el-col> <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
<el-col class="blue" :span="6"> <i class="el-icon-tickets"></i>
<span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑 |</span> <span>{{item.Name}}</span>
<span v-if="scgroupMsg.Recycled==2" @click.prevent="HYGroup(item)">还原 |</span> </el-col>
<!-- 回收 --> <el-col class="blue" :span="6">
<span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span> <span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑 |</span>
<!--回收站删除 --> <span v-if="scgroupMsg.Recycled==2" @click.prevent="HYGroup(item)">还原 |</span>
<span v-if="scgroupMsg.Recycled==2" @click.prevent="DeleteGroup(item)">删除</span> <!-- 回收 -->
</el-col> <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span>
</div> <!--回收站删除 -->
</li> <span v-if="scgroupMsg.Recycled==2" @click.prevent="DeleteGroup(item)">删除</span>
</div> </el-col>
</div> </div>
</div> </li>
</div> </div>
</div>
</div>
</div>
</div>
<div flex="dir:top" class="box">
<div>
<div class="basefix" style="margin-bottom:12px">
<span>全部</span>
<div style="display:inline-block;float:right">
<div style="margin-left: 20px;display:inline-block;" class="appendInput">
<el-input @keyup.enter.native="GetPageList()" 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>
<el-checkbox style="margin-left:12px" :indeterminate="isIndeterminate" v-model="checkAll"
@change="CheckAllChange">全选</el-checkbox>
<el-button v-if="PageMsg.Recycled==1" @click="HsPage" style="margin:0 12px" size="small">删除
</el-button>
<el-button v-if="PageMsg.Recycled==2" @click="HYPage" style="margin-left:12px" size="small">还原
</el-button>
<el-button v-if="PageMsg.Recycled==2" @click="DeletePage" size="small">删除</el-button>
<el-dropdown v-if="scgroupMsg.Recycled==1" size="small" split-button>
移动至
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in groupList" :key="index">
<div @click="SelectPageId(item)">{{item.Name}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div style="border: 1px solid rgb(227, 227, 227);height:674px">
<div class="basefix app-attachment-list">
<template v-if="PageMsg.Type==1">
<div class="material-item material-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage" multiple>
<i class="el-icon-upload"></i>
</el-upload>
</div>
</div> </div>
<div flex="dir:top" class="box"> <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark"
<div> :content="item.Name" placement="top-start">
<div class="basefix" style="margin-bottom:12px"> <div @click="PageSelect(item,index)" :class="item.Selected ? 'selected' :''"
<span>全部</span> class="el-tooltip item material-item ">
<div style="display:inline-block;float:right"> <img :src="getIconLink(item.Path)" class="material-img" style="width: 140px; height: 140px;">
<div style="margin-left: 20px;display:inline-block;" class="appendInput"> <div flex="dir:left" style="margin-top: 5px;">
<el-input @keyup.enter.native="GetPageList()" size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name"> <div class="material-name">{{item.Name}}</div>
<el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button> <div style="margin: 0px 5px;">|</div>
</el-input> <div>
</div> <button type="button" class="el-button el-button--text" style="padding: 0px;">
<el-checkbox style="margin-left:12px" :indeterminate="isIndeterminate" v-model="checkAll" @change="CheckAllChange">全选</el-checkbox> <span @click="EditPage(item)">编辑</span>
<el-button v-if="PageMsg.Recycled==1" @click="HsPage" style="margin:0 12px" size="small">删除</el-button> </button>
<el-button v-if="PageMsg.Recycled==2" @click="HYPage" style="margin-left:12px" size="small">还原</el-button> </div>
<el-button v-if="PageMsg.Recycled==2" @click="DeletePage" size="small">删除</el-button>
<el-dropdown v-if="scgroupMsg.Recycled==1" size="small" split-button>
移动至
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in groupList" :key="index">
<div @click="SelectPageId(item)">{{item.Name}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div style="border: 1px solid rgb(227, 227, 227);height:674px">
<div class="basefix app-attachment-list">
<template v-if="PageMsg.Type==1">
<div class="material-item material-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
<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="item.Selected ? 'selected' :''" class="el-tooltip item material-item ">
<img :src="getIconLink(item.Path)" class="material-img" style="width: 140px; height: 140px;">
<div flex="dir:left" style="margin-top: 5px;">
<div class="material-name">{{item.Name}}</div>
<div style="margin: 0px 5px;">|</div>
<div>
<button type="button" class="el-button el-button--text" style="padding: 0px;">
<span @click="EditPage(item)">编辑</span>
</button>
</div>
</div>
</div>
</el-tooltip>
</template>
<template v-if="PageMsg.Type==2">
<div class="material-item material-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
<el-upload class="avatar-uploader" action=""
:before-upload="beforeAvatarUpload"
accept="video/mp4,video/ogg,video/webm"
: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="item.Selected ? 'selected' :''" class="el-tooltip item material-item ">
<img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'" class="material-img" style="width: 140px; height: 140px;">
<div class="material-video-info"><i class="el-icon-video-play"></i> <span>{{Time(item.VideoTime)}}</span></div>
<div flex="dir:left" style="margin-top: 5px;">
<div class="material-name">{{item.Name}}</div>
<div style="margin: 0px 5px;">|</div>
<div>
<button type="button" class="el-button el-button--text" style="padding: 0px;">
<span @click="EditPage(item)">编辑</span>
</button>
</div>
</div>
</div>
</el-tooltip>
</template>
</div>
<div style="padding-right:10px">
<el-pagination style="text-align:right"
background
:current-page="currentPage4"
@current-change="handleCurrentChange"
:page-size="PageMsg.pageSize"
layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</div>
</div>
</div> </div>
</div>
</el-tooltip>
</template>
<template v-if="PageMsg.Type==2">
<div class="material-item material-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 140px; height: 140px;">
<el-upload class="avatar-uploader" action="" :before-upload="beforeAvatarUpload"
accept="video/mp4,video/ogg,video/webm" :show-file-list="false" :http-request="UploadImage" multiple>
<i class="el-icon-upload"></i>
</el-upload>
</div>
</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="item.Selected ? 'selected' :''"
class="el-tooltip item material-item ">
<img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'"
class="material-img" style="width: 140px; height: 140px;">
<div class="material-video-info"><i class="el-icon-video-play"></i>
<span>{{Time(item.VideoTime)}}</span></div>
<div flex="dir:left" style="margin-top: 5px;">
<div class="material-name">{{item.Name}}</div>
<div style="margin: 0px 5px;">|</div>
<div>
<button type="button" class="el-button el-button--text" style="padding: 0px;">
<span @click="EditPage(item)">编辑</span>
</button>
</div>
</div>
</div>
</el-tooltip>
</template>
</div> </div>
<div style="padding-right:10px">
<el-pagination style="text-align:right" background :current-page="currentPage4"
@current-change="handleCurrentChange" :page-size="PageMsg.pageSize"
layout="prev, pager, next,jumper" :total="total">
</el-pagination>
</div>
</div>
</div> </div>
<video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)"> </div>
</video> </div>
</div>
<video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)">
</video>
</div> </div>
<!-- 新增分组 --> <!-- 新增分组 -->
<el-dialog title="分组管理" :visible.sync="addGroupMsgDig" width="400px"> <el-dialog 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>
...@@ -177,13 +178,8 @@ ...@@ -177,13 +178,8 @@
<el-dialog title="图片名称修改" :visible.sync="pageMsgDig" width="400px"> <el-dialog title="图片名称修改" :visible.sync="pageMsgDig" width="400px">
<el-form :model="addpageMsg" :rules="addpageMsg" ref="addpageMsg" label-width="100px"> <el-form :model="addpageMsg" :rules="addpageMsg" ref="addpageMsg" 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="addpageMsg.Name">
size="small" </el-input>
type="text"
placeholder="请输入内容"
v-model="addpageMsg.Name"
>
</el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -191,458 +187,470 @@ ...@@ -191,458 +187,470 @@
<el-button size="small" type="primary" @click="pagesubmitForm('addpageMsg')">确 定</el-button> <el-button size="small" type="primary" @click="pagesubmitForm('addpageMsg')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'ChooseImg', name: 'ChooseImg',
data(){ data() {
return{ return {
loading:false, loading: false,
commonType:1, commonType: 1,
activeName:'first', activeName: 'first',
val:'', val: '',
Id:'', Id: '',
currentPage4:1, currentPage4: 1,
scgroupMsg:{ scgroupMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:1, Type: 1,
Recycled:1, Recycled: 1,
}, },
isIndeterminate:false, isIndeterminate: false,
groupList:[], groupList: [],
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'
}], }],
}, },
addGroupMsgDig:false, addGroupMsgDig: false,
PageMsg:{ PageMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:1, Type: 1,
Recycled:1, Recycled: 1,
pageIndex:1, pageIndex: 1,
pageSize:20, pageSize: 20,
GroupId:0, GroupId: 0,
}, },
PageList:[], PageList: [],
total:0, total: 0,
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,
}, },
pageMsgDig:false, pageMsgDig: false,
checkList:[], checkList: [],
checkAllList:[], checkAllList: [],
checkAll:false, checkAll: false,
} }
}, },
created(){ created() {
this.GetMemberGradeList(); this.GetMemberGradeList();
this.GetPageList(); this.GetPageList();
}, },
mounted(){ mounted() {
}, },
methods:{ methods: {
Time(value){ Time(value) {
var theTime = parseInt(value);// 秒 var theTime = parseInt(value); // 秒
    var middle= 0;// 分 var middle = 0; // 分
    var hour= 0;// 小时 var hour = 0; // 小时
    if(theTime > 60) { if (theTime > 60) {
        middle= parseInt(theTime/60); middle = parseInt(theTime / 60);
        theTime = parseInt(theTime%60); theTime = parseInt(theTime % 60);
        if(middle> 60) { if (middle > 60) {
            hour= parseInt(middle/60); hour = parseInt(middle / 60);
            middle= parseInt(middle%60); middle = parseInt(middle % 60);
        } }
    }
    var result = ""+parseInt(theTime);
if(theTime<10){
result="0"+parseInt(theTime);
} }
    if(middle > 0) { var result = "" + parseInt(theTime);
        result = ""+parseInt(middle)+":"+result; if (theTime < 10) {
    } result = "0" + parseInt(theTime);
else{
result = "00:"+result;
} }
    if(hour> 0) { if (middle > 0) {
        result = ""+parseInt(hour)+"小时"+result; result = "" + parseInt(middle) + ":" + result;
    } } else {
    return result; result = "00:" + result;
}, }
SelectPageId(item){ if (hour > 0) {
this.PageList.forEach(item=>{ result = "" + parseInt(hour) + "小时" + result;
if(item.Selected){ }
this.checkList.push(item.Id) return result;
} },
SelectPageId(item) {
this.PageList.forEach(item => {
if (item.Selected) {
this.checkList.push(item.Id)
}
}) })
if(this.checkList.length==0){ if (this.checkList.length == 0) {
this.Error("至少选择一项！"); this.Error("至少选择一项！");
return; return;
} }
let MaterialIds= this.checkList.join(","); let MaterialIds = this.checkList.join(",");
let msg={ let msg = {
MaterialIds:MaterialIds, MaterialIds: MaterialIds,
GroupId:item.Id, GroupId: item.Id,
Type:this.commonType Type: this.commonType
} }
this.apipost("/api/product/SetMaterialInfoTransfer",msg, res => { this.apipost("/api/product/SetMaterialInfoTransfer", msg, res => {
this.loading=false; this.loading = false;
if(res.data.resultCode==1){ if (res.data.resultCode == 1) {
this.GetPageList(); this.GetPageList();
this.checkList=[]; this.checkList = [];
} }
}) })
}, },
// 全选 // 全选
CheckAllChange(val){ CheckAllChange(val) {
this.PageList.forEach(item=>{ this.PageList.forEach(item => {
if(val){ if (val) {
item.Selected=true; item.Selected = true;
}else{ } else {
item.Selected=false; item.Selected = false;
} }
}) })
}, },
// 删除 // 删除
DeletePage(){ DeletePage() {
this.checkList=[]; this.checkList = [];
this.PageList.forEach(item=>{ this.PageList.forEach(item => {
if(item.Selected){ if (item.Selected) {
this.checkList.push(item.Id) this.checkList.push(item.Id)
} }
}) })
if(this.checkList.length==0){ if (this.checkList.length == 0) {
this.Error("至少选择一项！"); this.Error("至少选择一项！");
return; return;
} }
let MaterialIds= this.checkList.join(","); let MaterialIds = this.checkList.join(",");
this.loading=true; this.loading = true;
this.apipost("/api/product/DelMaterialInfo",{MaterialIds:MaterialIds}, res => { this.apipost("/api/product/DelMaterialInfo", {
this.loading=false; MaterialIds: MaterialIds
if(res.data.resultCode==1){ }, res => {
this.GetPageList(); this.loading = false;
this.checkList=[]; if (res.data.resultCode == 1) {
} this.GetPageList();
this.checkList = [];
}
}) })
}, },
// 还原 // 还原
HYPage(){ HYPage() {
this.checkList=[]; this.checkList = [];
this.PageList.forEach(item=>{ this.PageList.forEach(item => {
if(item.Selected){ if (item.Selected) {
this.checkList.push(item.Id) this.checkList.push(item.Id)
} }
}) })
if(this.checkList.length==0){ if (this.checkList.length == 0) {
this.Error("至少选择一项！"); this.Error("至少选择一项！");
return; return;
} }
let MaterialIds= this.checkList.join(","); let MaterialIds = this.checkList.join(",");
this.loading=true; this.loading = true;
this.apipost("/api/product/SetMaterialInfoRestore",{MaterialIds:MaterialIds}, res => { this.apipost("/api/product/SetMaterialInfoRestore", {
this.loading=false; MaterialIds: MaterialIds
if(res.data.resultCode==1){ }, res => {
this.GetPageList(); this.loading = false;
this.checkList=[]; if (res.data.resultCode == 1) {
} this.GetPageList();
this.checkList = [];
}
}) })
}, },
// 回收 // 回收
HsPage(){ HsPage() {
this.checkList=[]; this.checkList = [];
this.PageList.forEach(item=>{ this.PageList.forEach(item => {
if(item.Selected){ if (item.Selected) {
this.checkList.push(item.Id) this.checkList.push(item.Id)
} }
}) })
if(this.checkList.length==0){ if (this.checkList.length == 0) {
this.Error("至少选择一项！"); this.Error("至少选择一项！");
return; return;
} }
let MaterialIds= this.checkList.join(","); let MaterialIds = this.checkList.join(",");
this.loading=true; this.loading = true;
this.apipost("/api/product/SetMaterialInfoRecycled",{MaterialIds:MaterialIds}, res => { this.apipost("/api/product/SetMaterialInfoRecycled", {
this.loading=false; MaterialIds: MaterialIds
if(res.data.resultCode==1){ }, res => {
this.GetPageList(); this.loading = false;
this.checkList=[]; if (res.data.resultCode == 1) {
} this.GetPageList();
this.checkList = [];
}
}) })
}, },
// 单个删除 // 单个删除
PageSelect(item,index){ PageSelect(item, index) {
item.Selected=!item.Selected; item.Selected = !item.Selected;
}, },
// 数组去重 // 数组去重
unique(arr) { unique(arr) {
return arr.filter(function(item, index, arr) { return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素 //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index; return arr.indexOf(item, 0) === index;
}); });
}, },
SelectGroup(id){ SelectGroup(id) {
this.PageMsg.GroupId=id; this.PageMsg.GroupId = id;
this.addpageMsg.GroupId=id; this.addpageMsg.GroupId = id;
this.GetPageList(); this.GetPageList();
}, },
EditPage(item){ EditPage(item) {
this.pageMsgDig=true; this.pageMsgDig = true;
this.addpageMsg={ this.addpageMsg = {
Id:item.Id, Id: item.Id,
Name:item.Name, Name: item.Name,
Type:item.Type, Type: item.Type,
GroupId:item.GroupId, GroupId: item.GroupId,
Path:item.Path, Path: item.Path,
Image:item.Image, Image: item.Image,
VideoTime:item.VideoTime, VideoTime: item.VideoTime,
WithHeight:item.WithHeight, WithHeight: item.WithHeight,
} }
}, },
pagesubmitForm(formName) { pagesubmitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
this.apipost('/api/product/SetMaterialInfo',this.addpageMsg, this.apipost('/api/product/SetMaterialInfo', this.addpageMsg,
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
this.GetPageList(); this.GetPageList();
this.Success(res.data.message) this.Success(res.data.message)
this.pageMsgDig=false; this.pageMsgDig = false;
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
} else { } else {
return false; return false;
} }
}); });
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
this.getTimes(file); // this.getTimes(file); //
}, },
getTimes(file) { //获取时长 getTimes(file) { //获取时长
var content = file; var content = file;
var url = URL.createObjectURL(content); var url = URL.createObjectURL(content);
//经测试，发现audio也可获取视频的时长 //经测试，发现audio也可获取视频的时长
var audioElement = new Audio(url); var audioElement = new Audio(url);
audioElement.addEventListener("loadedmetadata", (_event) => { audioElement.addEventListener("loadedmetadata", (_event) => {
this.audioDuration = parseInt(audioElement.duration); this.audioDuration = parseInt(audioElement.duration);
this.addpageMsg.VideoTime=this.audioDuration; this.addpageMsg.VideoTime = this.audioDuration;
}); });
}, },
UploadImage(file) { 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) {
if(this.addpageMsg.Type==2){ if (this.addpageMsg.Type == 2) {
this.addpageMsg.Image = res.FileUrl; this.addpageMsg.Image = res.FileUrl;
} }
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();
} }
}) })
}, },
SelectRecycled(num){ SelectRecycled(num) {
this.scgroupMsg.Recycled=num; this.scgroupMsg.Recycled = num;
this.PageMsg.Recycled=num; this.PageMsg.Recycled = num;
this.GetMemberGradeList(); this.GetMemberGradeList();
this.GetPageList(); this.GetPageList();
}, },
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,
} }
}, },
HYGroup(item){ HYGroup(item) {
let that=this; let that = this;
that.$confirm('是否还原?', '提示', { that.$confirm('是否还原?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.apipost('/api/product/SetMaterialGroupRestore',{GroupId:item.Id}, this.apipost('/api/product/SetMaterialGroupRestore', {
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(() => {
}); });
}, },
HsGroup(item){ HsGroup(item) {
let that=this; 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(() => {
}); });
}, },
DeleteGroup(item){ DeleteGroup(item) {
let that=this; let that = this;
that.$confirm('是否删除?', '提示', { that.$confirm('是否删除?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.apipost('/api/product/DelMaterialGroupInfo',{GroupId:item.Id}, this.apipost('/api/product/DelMaterialGroupInfo', {
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(() => {
}); });
}, },
addGroup(){ addGroup() {
this.addGroupMsgDig=true; this.addGroupMsgDig = true;
this.addGroupMsg={ this.addGroupMsg = {
Id:0, Id: 0,
Name:'', Name: '',
Type:this.commonType, Type: this.commonType,
Sort:'', 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;
} }
}); });
}, },
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.checkAllList=[]; this.checkAllList = [];
data.forEach(item=>{ data.forEach(item => {
this.checkAllList.push(item.Id) this.checkAllList.push(item.Id)
item.Selected=false; item.Selected = false;
}) })
this.PageList=data; this.PageList = data;
}) })
}, },
handleClick(val){ handleClick(val) {
this.commonType=val; this.commonType = val;
this.scgroupMsg.Type=val; this.scgroupMsg.Type = val;
this.PageMsg.Type=val; this.PageMsg.Type = val;
this.addpageMsg.Type=val; this.addpageMsg.Type = val;
this.GetMemberGradeList(); this.GetMemberGradeList();
this.GetPageList(); this.GetPageList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.PageMsg.pageIndex = val; this.PageMsg.pageIndex = val;
this.GetPageList(); this.GetPageList();
},
}, },
}
},
}
</script> </script>
<style> <style>
.materialMan .material-video-info { .materialMan .material-video-info {
background: rgba(0, 0, 0, .35); background: rgba(0, 0, 0, .35);
color: #fff; color: #fff;
position: absolute; position: absolute;
...@@ -650,31 +658,37 @@ export default { ...@@ -650,31 +658,37 @@ export default {
bottom: 31px; bottom: 31px;
padding: 1px 3px; padding: 1px 3px;
font-size: 14px; font-size: 14px;
} }
.materialMan .TabDiv .spanActive{
.materialMan .TabDiv .spanActive {
border-bottom: 2px solid #409EFF; border-bottom: 2px solid #409EFF;
color:#409EFF; color: #409EFF;
} }
.materialMan .TabDiv span{
.materialMan .TabDiv span {
font-size: 14px; font-size: 14px;
margin-right: 20px; margin-right: 20px;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
.materialMan .TabDiv{
.materialMan .TabDiv {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-bottom: 2px solid #f3f3f3; border-bottom: 2px solid #f3f3f3;
margin-bottom: 20px; margin-bottom: 20px;
} }
.materialMan .selectActive .el-icon-tickets{
.materialMan .selectActive .el-icon-tickets {
color: #409EFF; color: #409EFF;
} }
.materialMan .selectActive{
.materialMan .selectActive {
color: #409EFF; color: #409EFF;
} }
.materialMan .material-name {
.materialMan .material-name {
color: #666666; color: #666666;
font-size: 13px; font-size: 13px;
margin-top: 0px; margin-top: 0px;
...@@ -685,17 +699,21 @@ export default { ...@@ -685,17 +699,21 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
} }
.materialMan .material-item.checked, .material-item.selected {
.materialMan .material-item.checked,
.material-item.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;
} }
.materialMan .material-upload i {
.materialMan .material-upload i {
font-size: 30px; font-size: 30px;
color: #909399; color: #909399;
} }
.materialMan .material-item {
.materialMan .material-item {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -705,29 +723,35 @@ export default { ...@@ -705,29 +723,35 @@ export default {
margin: 7.5px; margin: 7.5px;
text-align: center; text-align: center;
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.materialMan .material-upload {
.materialMan .material-upload {
box-shadow: none; box-shadow: none;
border: 1px dashed #b2b6bd; border: 1px dashed #b2b6bd;
height: 140px; height: 140px;
width: 140px; width: 140px;
margin: 17.5px; margin: 17.5px;
padding: 0; padding: 0;
} }
.ChooseImg .app-attachment-list{ .ChooseImg .app-attachment-list {
padding: 5px; padding: 5px;
} }
.materialMan .appendInput .el-input.is-active .el-input__inner,.materialMan .appendInput .el-input__inner:focus{
.materialMan .appendInput .el-input.is-active .el-input__inner,
.materialMan .appendInput .el-input__inner:focus {
border-color: #DCDFE6; border-color: #DCDFE6;
} }
.ChooseImg .appendInput .el-input__inner{
.ChooseImg .appendInput .el-input__inner {
border-right: none; border-right: none;
outline: none; outline: 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>
src/components/global/ChooseImg.vue
View file @ 4fe69012
...@@ -42,14 +42,14 @@ ...@@ -42,14 +42,14 @@
<div class="basefix app-attachment-list"> <div class="basefix app-attachment-list">
<div class="app-attachment-item app-attachment-upload"> <div class="app-attachment-item app-attachment-upload">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp" <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage"> :show-file-list="false" :http-request="UploadImage">
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;"> <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
</div> </div>
</el-upload> </el-upload>
</div> </div>
<el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="'双击选中【'+item.Name+'】'" <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark"
placement="top-start"> :content="'双击选中【'+item.Name+'】'" placement="top-start">
<div @click="PageSelect(item,1)" @dblclick="PageSelect(item,2)" :class="selectId==item.Id ? 'selected' :''" <div @click="PageSelect(item,1)" @dblclick="PageSelect(item,2)" :class="selectId==item.Id ? 'selected' :''"
class="el-tooltip item app-attachment-item"> class="el-tooltip item app-attachment-item">
<img :src="getIconLink(item.Path)" class="app-attachment-img" style="width: 100px; height: 100px;"> <img :src="getIconLink(item.Path)" class="app-attachment-img" style="width: 100px; height: 100px;">
...@@ -91,6 +91,8 @@ ...@@ -91,6 +91,8 @@
<script> <script>
export default { export default {
//是否多选
props: ["IsMultiple"],
name: 'ChooseImg', name: 'ChooseImg',
data() { data() {
return { return {
...@@ -199,19 +201,18 @@ ...@@ -199,19 +201,18 @@
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();
} }
}) })
}, },
// clickType 1单击 2双击 // clickType 1单击 2双击
PageSelect(item,clickType) { PageSelect(item, clickType) {
this.emitmsg = { this.emitmsg = {
selectId: item.Id, selectId: item.Id,
url: item.Path url: item.Path
} }
this.selectId = item.Id; this.selectId = item.Id;
if(clickType==2){ if (clickType == 2) {
this.SelectImgId(); this.SelectImgId();
} }
}, },
...@@ -282,7 +283,7 @@ ...@@ -282,7 +283,7 @@
}, },
SelectGroup(id) { SelectGroup(id) {
this.PageMsg.GroupId = id; this.PageMsg.GroupId = id;
this.addpageMsg.GroupId=id; this.addpageMsg.GroupId = id;
this.GetPageList(); this.GetPageList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
......
src/plug/index.js
View file @ 4fe69012
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
var filename = fileObj.name; var filename = fileObj.name;
var index = filename.lastIndexOf("."); var index = filename.lastIndexOf(".");
var suffix = filename.substr(index); var suffix = filename.substr(index);
var timestamp1 = Date.parse(new Date()); var timestamp1 = Date.parse(new Date())+"_"+(Math.ceil(Math.random()*1000));
let str = ''; let str = '';
if (this.isOnline()) { if (this.isOnline()) {
str = "/Test" str = "/Test"
......
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