You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
8.1 KiB
277 lines
8.1 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
|
|
width=device-width,initial-scale=1.0" />
|
|
<title>模块管理</title>
|
|
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
|
|
|
|
<link rel="stylesheet" href="lib/element-ui/index.css">
|
|
<script src="lib/element-ui/vue.min.js"></script>
|
|
<script src="lib/element-ui/index.js"></script>
|
|
<script src="../common/util.js"></script>
|
|
|
|
<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>
|
|
<style type="text/css">
|
|
.webuploader-element-invisible{
|
|
display: none;
|
|
}
|
|
.deleteUploadImg {
|
|
position: absolute;
|
|
display: none;
|
|
right: 5px;
|
|
top: 5px;
|
|
height: 10px;
|
|
width: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.img-container{
|
|
display: inline-block;position:relative;
|
|
}
|
|
.img-container:HOVER img {
|
|
display: inline;
|
|
}
|
|
body,html{
|
|
background: #fff ;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" >
|
|
<el-row style="padding:20px;">
|
|
<el-col :span="12" style="padding:20px;border:1px solid #d9d9d9;height:600px;overflow:auto;" >
|
|
<el-collapse v-model="activeNameImgKun" accordion >
|
|
<el-collapse-item v-for="(item,index) in visualPartList" :title="item.name" :name="index">
|
|
<div class="img-container" v-for="(sitem,index) in imgObjList" v-if="item.code ==sitem.moudle_type ">
|
|
<img style="width: 60px;height:60px;margin-right:5px;" :src="sitem.dis_img" />
|
|
<img :id="sitem.id" style="width: 10px;height: 10px;" src="./image/delete.png" class="deleteUploadImg" >
|
|
</div>
|
|
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-col>
|
|
<el-col :span="11" style="padding: 20px; ">
|
|
<el-select v-model="code" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in visualPartList"
|
|
:key="item.code"
|
|
:label="item.name"
|
|
:value="item.code">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<div class="uploadBtns" style="margin-top: 20px;">
|
|
<div class="upload_img mr10" id="upload_img" >
|
|
<button tag="" class="el-button el-button--primary" >上传图片</button>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el:"#app",
|
|
data:function(){
|
|
return {
|
|
visualPartList: [] , // 虚拟组件
|
|
imgObjList: [] , // 组件图片列表
|
|
activeNameImgKun: [0] , // 图库系统
|
|
code: '' , // code值
|
|
uploadImgs:[],
|
|
initUpload:'',
|
|
uploadImgCount:0,
|
|
};
|
|
},
|
|
methods:{
|
|
initVisualPart(){
|
|
// 获取组件类型
|
|
var that = this;
|
|
commonAjax('GET', baseurl+'/service/dictionary/130' , "" ,function (res) {
|
|
if(isOK(res)){
|
|
that.visualPartList = res.data ;
|
|
}
|
|
}) ;
|
|
},
|
|
handleChange(){
|
|
var that = this;
|
|
commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {} ,
|
|
function (e) {
|
|
if(isOK(e)){
|
|
that.imgObjList = e.data.data ;
|
|
}
|
|
}) ;
|
|
},
|
|
},created(){
|
|
|
|
},mounted() {
|
|
this.initVisualPart();
|
|
this.handleChange();
|
|
initImgUpload("upload_img");
|
|
}
|
|
})
|
|
|
|
function saveImg(url){
|
|
if(util.isEmpty(app.code)){
|
|
app.$message.error("请选择上传目录");
|
|
return ;
|
|
}
|
|
var data = {
|
|
name:'上传图片',
|
|
dis_img:url,
|
|
moudle_type: app.code
|
|
}
|
|
commonAjax("POST",baseurl+"/service/moudle/visual", data,function(e){
|
|
if(e.status == 2){
|
|
app.imgObjList.push(e.data);
|
|
app.$message({
|
|
message: '成功',
|
|
type:'success'
|
|
});
|
|
}else{
|
|
app.$message.error(e.statusMsg);
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).delegate(".deleteUploadImg","click",function(event){
|
|
var that = $(this) ;
|
|
commonAjax('DELETE', baseurl+'/service/moudle/visual.json?id='+ $(this).attr("id") , '',function(res){
|
|
if(res.status == 2){
|
|
// 删除成功
|
|
that.parent().remove();
|
|
}
|
|
} );
|
|
});
|
|
|
|
function initImgUpload(id){
|
|
//上传模板
|
|
UploadInit( baseurl + '/service/upload.json' , {category:"img"} ,function(file,data){
|
|
if(data.status==2){
|
|
var url = "/res"+data.data;
|
|
saveImg(url);
|
|
}
|
|
}, id ,id,"110px", "35px") ;
|
|
}
|
|
|
|
/**
|
|
* @Func 文件上傳功能，目前只支持單個
|
|
* @param imgUrl domain
|
|
* @param user_id 用戶id
|
|
* @param func 成功之後的回調
|
|
* @Param id 文件选择id
|
|
*/
|
|
function UploadInit(imgFindUrl, userInfo ,func,id,domId,thumbnailWidth, thumbnailHeight,accept,acceptconfig){
|
|
var $ = jQuery,
|
|
state = 'pending',
|
|
uploader;
|
|
// 增加类型修改，可以传入类型
|
|
if(accept == undefined){
|
|
acceptconfig = "" ;
|
|
}else{
|
|
acceptconfig = getVal( acceptconfig, { // 默认值兼容之前
|
|
title: 'Images',
|
|
extensions: 'gif,jpg,jpeg,bmp,png,pdf',
|
|
mimeTypes: 'image/jpg,image/jpeg,image/png'
|
|
});
|
|
}
|
|
|
|
uploader = WebUploader.create({
|
|
// 自动上传
|
|
auto: true,
|
|
// 不压缩image
|
|
resize: false,
|
|
//不压缩图片
|
|
compress:false,
|
|
// swf文件路径
|
|
swf: baseurl + '/lib/webUploader/Uploader.swf',
|
|
// 文件接收服务端。
|
|
server: imgFindUrl,
|
|
// 选择文件的按钮。可选。
|
|
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
|
pick: '#'+id ,
|
|
duplicate: true ,
|
|
fileSingleSizeLimit: 5*1024*1024,
|
|
// 只允许选择文件，可选。
|
|
accept:acceptconfig
|
|
});
|
|
|
|
uploader.on("error",function (type){
|
|
if (type=="Q_TYPE_DENIED"){
|
|
if(typeof(layer)!="undefined"){
|
|
showTip("请上传正确的文件格式");
|
|
}else{
|
|
alert("请上传正确的文件格式");
|
|
}
|
|
}else if(type=="F_EXCEED_SIZE"){
|
|
if(typeof(layer)!="undefined"){
|
|
showTip("文件大小不能超过5M");
|
|
}else{
|
|
alert("文件大小不能超过5M");
|
|
}
|
|
}
|
|
});
|
|
// 当有文件添加进来的时候
|
|
uploader.on('fileQueued', function(file) {
|
|
$("#"+domId).css("width","0%");
|
|
$("#"+domId).attr("ids","");
|
|
$("#"+domId).css("display","inherit");
|
|
uploader.options.formData= gdv(userInfo , {}) ;
|
|
uploader.makeThumb( file, function( error, src ) {
|
|
$("#back_"+domId).css("background","url("+src+")");
|
|
|
|
}, thumbnailWidth, thumbnailHeight );
|
|
});
|
|
// 文件上传过程中创建进度条实时显示。
|
|
uploader.on('uploadProgress', function(file, percentage) {
|
|
$("#all_"+domId).text(parseInt(percentage*100)+"%");
|
|
$("#"+domId).css("width",parseInt(100-percentage*100)+"%");
|
|
});
|
|
uploader.on('uploadSuccess', func);
|
|
uploader.on('uploadError', function(file) {
|
|
console.log("文件上传出错");
|
|
});
|
|
uploader.on('uploadComplete', function(file) {
|
|
});
|
|
uploader.on('all', function(type) {
|
|
});
|
|
};
|
|
|
|
function commonAjax(method,url, data,sucessCallBack, errorCallBack) {
|
|
var config = {
|
|
type : method ,
|
|
url : url,
|
|
contentType : "application/json",
|
|
dataType : "json",
|
|
async : true,
|
|
success : function(data){
|
|
if(data.status == 20000){
|
|
return;
|
|
}else{
|
|
sucessCallBack(data);
|
|
}
|
|
},
|
|
error : errorCallBack
|
|
};
|
|
if(typeof(ucode) != "undefined"){
|
|
config.headers={ 'USER-KEY' :ucode };
|
|
}
|
|
if(method.toUpperCase() != 'GET' && method.toUpperCase() != 'DELETE' ){
|
|
config.data = JSON.stringify(data);
|
|
}
|
|
$.ajax(config)
|
|
};
|
|
|
|
var isOk= isOK ;
|
|
function isOK(e){
|
|
if(e.status == 2 ){
|
|
return true ;
|
|
}else{
|
|
return false ;
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|
|
|