end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化图片库

master
陈裕财 3 years ago
parent
ee72cca731
commit
deb5e90800
5 changed files with 54 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      config/index.js
  2. 3
      src/api/mdp/arc/image.js
  3. 8
      src/components/Image/ImageCategoryTree.vue
  4. 35
      src/components/Image/UploadImage.vue
  5. 18
      src/components/Tinymce/index.vue

8
config/index.js
View File

@ -19,6 +19,14 @@ module.exports = {
} }
}, },
/** /**
'/api/m1/arc': {
target: 'http://localhost:7012',
changeOrigin: true,
pathRewrite: {
'^/api/m1/arc': '/arc'
}
},
'/api/m1/sys': { '/api/m1/sys': {
target: 'http://localhost:7015', target: 'http://localhost:7015',
changeOrigin: true, changeOrigin: true,

3
src/api/mdp/arc/image.js
View File

@ -32,3 +32,6 @@ export const addImage = params => { return axios.post(`${base}/mdp/arc/image/add
export const listTags = params => { return axios.get(`${base}/mdp/arc/image/listTags`, params); }; export const listTags = params => { return axios.get(`${base}/mdp/arc/image/listTags`, params); };
export const uploadBase64 = params => { return axios.post(`${base}/mdp/arc/image/upload/base64`, params); }; export const uploadBase64 = params => { return axios.post(`${base}/mdp/arc/image/upload/base64`, params); };
export const upload = params => { return axios.post(`${base}/mdp/arc/image/upload`, params,{
'Content-type' : 'multipart/form-data'}); };

8
src/components/Image/ImageCategoryTree.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<section> <section>
<el-row class="padding">
<el-button type="primary" style="float:left;" icon="el-icon-plus" @click.prevent.stop="addTopNode()">添加顶级分类</el-button>
</el-row>
<el-row> <el-row>
<el-tree <el-tree
:data="categoryTreeData" :data="categoryTreeData"
@ -21,7 +24,6 @@
<div class="custom-tree-node" slot-scope="{ node, data}"> <div class="custom-tree-node" slot-scope="{ node, data}">
<span>{{data.categoryName=='根'?'移动鼠标到此添加分类':data.categoryName}}</span> <span>{{data.categoryName=='根'?'移动鼠标到此添加分类':data.categoryName}}</span>
<span class="el-ic"> <span class="el-ic">
<i class="el-icon-circle-plus" @click.prevent.stop="addTopNode()" title="添加顶级分类"></i>
<i class="el-icon-plus" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="addNode(data,node)" title="添加子分类"></i> <i class="el-icon-plus" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="addNode(data,node)" title="添加子分类"></i>
<i class="el-icon-edit" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="editNode(data,node)" title="修改名字"></i> <i class="el-icon-edit" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="editNode(data,node)" title="修改名字"></i>
<i class="el-icon-delete" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="deleteNode(data,node)" title="删除该分类"> </i> <i class="el-icon-delete" v-if=" !(!data.id || data.id=='C0'||data.id=='0')" @click.prevent.stop="deleteNode(data,node)" title="删除该分类"> </i>
@ -31,7 +33,7 @@
<el-dialog <el-dialog
title="提示" title="提示"
:visible.sync="addVisible" :visible.sync="addVisible"
width="60%" append-to-body>
width="60%" append-to-body modal-append-to-body>
<el-form ref="addImageCategory" :model="addImageCategory" label-width="200" > <el-form ref="addImageCategory" :model="addImageCategory" label-width="200" >
<el-form-item label="分类编号"> <el-form-item label="分类编号">
<el-input v-model="addImageCategory.id" placeholder="如果为空，则系统自动生成"></el-input> <el-input v-model="addImageCategory.id" placeholder="如果为空，则系统自动生成"></el-input>
@ -52,7 +54,7 @@
<el-dialog <el-dialog
title="提示" title="提示"
:visible.sync="editVisible" :visible.sync="editVisible"
width="60%" append-to-body>
width="60%" append-to-body modal-append-to-body>
<el-form ref="editImageCategory" :model="editImageCategory" label-width="200" > <el-form ref="editImageCategory" :model="editImageCategory" label-width="200" >
<el-form-item label="分类编号" prop="id"> <el-form-item label="分类编号" prop="id">
{{editImageCategory.id}} {{editImageCategory.id}}

35
src/components/Image/UploadImage.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<section> <section>
<el-row class="uploadImgWindow" v-loading="listLoading"> <el-row class="uploadImgWindow" v-loading="listLoading">
<el-col :span=6 class="leftBox">
<el-col :span="6" class="leftBox">
<category-tree ref="categoryTree" :show-count="false" show-checkbox :default-expand-all="true" :expand-on-click-node="false" v-on:check-change="handleLeftCategoryNodeClick"></category-tree> <category-tree ref="categoryTree" :show-count="false" show-checkbox :default-expand-all="true" :expand-on-click-node="false" v-on:check-change="handleLeftCategoryNodeClick"></category-tree>
</el-col> </el-col>
<el-col :span=18 class="rightBox">
<el-col :span=24 class="windowTitle">
<el-col :span=12 class="windowTitlefistchild">
<el-col :span="18" class="rightBox">
<el-row class="windowTitle">
<el-col :span="12" class="windowTitlefistchild">
<el-input v-model="filters.key" style="width:60%;" placeholder="按文件名模糊查询"></el-input> <el-input v-model="filters.key" style="width:60%;" placeholder="按文件名模糊查询"></el-input>
<el-button type="primary" @click="searchImages" icon="el-icon-search"></el-button> <el-button type="primary" @click="searchImages" icon="el-icon-search"></el-button>
</el-col> </el-col>
<el-col :span=4>
<el-col :span="6" >
<el-upload :disabled="uploadOptions.categoryId==''||uploadOptions.categoryId==null" class="upload-demo" :show-file-list="false" :action="uploadAction" :on-change="fileChange" :on-success="handleSuccess" :before-upload="beforeupload" :data="uploadOptions" multiple> <el-upload :disabled="uploadOptions.categoryId==''||uploadOptions.categoryId==null" class="upload-demo" :show-file-list="false" :action="uploadAction" :on-change="fileChange" :on-success="handleSuccess" :before-upload="beforeupload" :data="uploadOptions" multiple>
<el-tooltip class="item" effect="dark" :content="uploadOptions.categoryId==''?'请先选择左边分类':'支持jpg和png,建议大小不超过200KB，超过1M将自动裁剪压缩'" placement="top-start"> <el-tooltip class="item" effect="dark" :content="uploadOptions.categoryId==''?'请先选择左边分类':'支持jpg和png,建议大小不超过200KB，超过1M将自动裁剪压缩'" placement="top-start">
<el-button type="primary">点击上传</el-button> <el-button type="primary">点击上传</el-button>
@ -18,23 +18,14 @@
</el-upload> </el-upload>
</el-col> </el-col>
<el-col :span=4>
<el-upload :disabled="uploadOptions.categoryId==''||uploadOptions.categoryId==null" class="upload-demo" :show-file-list="false" :action="uploadAction" :on-change="fileChangeForShear" :on-success="handleSuccess" :before-upload="beforeupload" :data="uploadOptions" multiple>
<el-tooltip class="item" effect="dark" :content="uploadOptions.categoryId==''?'请先选择分类':'支持jpg和png,建议大小不超过200KB，超过1M将自动裁剪压缩'" placement="top-start">
<el-button type="warning">裁剪上传</el-button>
</el-tooltip>
</el-upload>
</el-col>
<el-col :span=4>
<el-col :span="4" >
<el-button type="danger" @click="handelDel" >删除</el-button> <el-button type="danger" @click="handelDel" >删除</el-button>
</el-col> </el-col>
</el-col>
</el-row>
<el-col :span=24>
<el-col :span=24 type="flex" class="allImg">
<el-col :span=4 v-for="o in images" style="height:200px;width:200px;" :key="o.id" class="imgBox">
<el-row>
<el-col :span="24" type="flex" class="allImg">
<el-col :span="4" v-for="o in images" style="height:200px;width:200px;" :key="o.id" class="imgBox">
<el-card :body-style="{ padding: '0px' }"> <el-card :body-style="{ padding: '0px' }">
<div style="width:100%;position:relative;" :index="o.url" v-on:click="selectImg(o)"> <div style="width:100%;position:relative;" :index="o.url" v-on:click="selectImg(o)">
@ -50,12 +41,10 @@
</el-card> </el-card>
</el-col> </el-col>
</el-col> </el-col>
</el-col>
<el-col :span="24">
</el-row>
<el-pagination layout="total, sizes, prev,pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" style="float:right;"> <el-pagination layout="total, sizes, prev,pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" style="float:right;">
</el-pagination> </el-pagination>
</el-col> </el-col>
</el-col>
</el-row> </el-row>
<el-dialog title="裁剪图片" :visible.sync="shearMngVisible" width="1100px" top="0px" :close-on-click-modal="false" append-to-body> <el-dialog title="裁剪图片" :visible.sync="shearMngVisible" width="1100px" top="0px" :close-on-click-modal="false" append-to-body>
<shear-mng :visible="shearMngVisible" :imgWidth="imgWidth" :imgHeight="imgHeight" :image="selectImages" :storedb="storedb" :branch-id="uploadOptions.branchId" :category-id="uploadOptions.categoryId" :remark="uploadOptions.remark" @cancel="shearMngVisible=false" @upload-success="uploadSuccess"></shear-mng> <shear-mng :visible="shearMngVisible" :imgWidth="imgWidth" :imgHeight="imgHeight" :image="selectImages" :storedb="storedb" :branch-id="uploadOptions.branchId" :category-id="uploadOptions.categoryId" :remark="uploadOptions.remark" @cancel="shearMngVisible=false" @upload-success="uploadSuccess"></shear-mng>
@ -105,7 +94,7 @@
}, },
selectImages: [], selectImages: [],
listLoading: false,//查询中... listLoading: false,//查询中...
uploadOptions:{branchId:this.branchId,categoryId:'',fileName:'',remark:'',deptid:this.deptid},//当前选择上传图片的类型
uploadOptions:{branchId:this.branchId,categoryId:'',fileName:'',remark:'',deptid:this.deptid,storedb:true},//当前选择上传图片的类型
shearMngVisible:false, shearMngVisible:false,
showAddCategoryForm: false, showAddCategoryForm: false,
categoryName: '',//分类名称 categoryName: '',//分类名称

18
src/components/Tinymce/index.vue
View File

@ -5,13 +5,13 @@
> >
<textarea :id="tinymceId" class="tinymce-textarea" /> <textarea :id="tinymceId" class="tinymce-textarea" />
<el-dialog <el-dialog
id="editor-dialog"
class="image-dialog"
title="选择图片" title="选择图片"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="70%"
top="20px"
width="80%"
:close-on-click-modal="false" :close-on-click-modal="false"
append-to-body append-to-body
modal-append-to-body
> >
<upload-image <upload-image
:multiple="true" :multiple="true"
@ -125,9 +125,9 @@ export default {
selector: `#${_this.tinymceId}`, selector: `#${_this.tinymceId}`,
height: _this.height, height: _this.height,
body_class: "panel-body ", body_class: "panel-body ",
object_resizing: false,
object_resizing: true,
toolbar: _this.toolbar.length > 0 ? _this.toolbar : toolbar, toolbar: _this.toolbar.length > 0 ? _this.toolbar : toolbar,
menubar: _this.menubar,
menubar: false,
plugins: plugins, plugins: plugins,
end_container_on_empty_block: true, end_container_on_empty_block: true,
powerpaste_word_import: "clean", powerpaste_word_import: "clean",
@ -193,11 +193,19 @@ export default {
// return img // return img
// }, // },
images_upload_handler(blobInfo, success, failure, progress) { images_upload_handler(blobInfo, success, failure, progress) {
const formData = new FormData(); const formData = new FormData();
formData.append('storedb',false)
formData.append('file', blobInfo.blob()); formData.append('file', blobInfo.blob());
formData.append("categoryId",_this.uploadOptions.categoryId) formData.append("categoryId",_this.uploadOptions.categoryId)
upload(formData).then((res) => { upload(formData).then((res) => {
var tips = res.data.tips;
if(tips.isOk){
success(res.data.data.url) success(res.data.data.url)
}else{
failure(tips.msg)
}
}) })
}, },

Write Preview
Loading…
Cancel
Save