我们发布啦
This commit is contained in:
张乐
670
admin/src/components/uploadPicture/index.vue
Normal file
670
admin/src/components/uploadPicture/index.vue
Normal file
@@ -0,0 +1,670 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="30">
|
||||
<el-col v-bind="grid">
|
||||
<div class="Nav">
|
||||
<div class="input">
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
placeholder="选择分类"
|
||||
prefix-icon="el-icon-search"
|
||||
style="width: 100%;"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="trees-coadd">
|
||||
<div class="scollhide">
|
||||
<div class="trees">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData2"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
>
|
||||
<div slot-scope="{ node, data}" class="custom-tree-node" @click.stop="handleNodeClick(data)">
|
||||
<div>
|
||||
<span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
|
||||
<span
|
||||
v-if="data.space_property_name"
|
||||
style="font-size: 11px;color: #3889b1"
|
||||
>（{{ data.name }}）</span>
|
||||
</div>
|
||||
<span class="el-ic">
|
||||
<svg-icon
|
||||
icon-class="example"
|
||||
title="添加分类"
|
||||
class="icon-space"
|
||||
@click.stop="onAdd(data.id)"
|
||||
/>
|
||||
<svg-icon
|
||||
icon-class="danyuan"
|
||||
title="添加管理单元"
|
||||
class="icon-space"
|
||||
/>
|
||||
<i
|
||||
v-if="data.id!== 10000"
|
||||
class="el-icon-edit"
|
||||
title="修改"
|
||||
@click.stop="onEdit(data.id)"
|
||||
/>
|
||||
<svg-icon
|
||||
icon-class="detail"
|
||||
title="查看该空间详情"
|
||||
class="icon-space"
|
||||
/>
|
||||
<i
|
||||
v-if="data.id!== 10000"
|
||||
class="el-icon-delete"
|
||||
title="删除分类"
|
||||
@click.stop="() => handleDelete(data.id)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-bind="grid2" class="colLeft">
|
||||
<div class="conter mb15">
|
||||
<div class="bnt">
|
||||
<el-button size="mini" type="primary" class="mb10 mr10" @click="checkPics">使用选中图片</el-button>
|
||||
<el-upload
|
||||
class="upload-demo mr10 mb15"
|
||||
action
|
||||
:http-request="handleUploadForm"
|
||||
:on-change="imgSaveToUrl"
|
||||
:headers="myHeaders"
|
||||
:show-file-list="false"
|
||||
multiple
|
||||
>
|
||||
<el-button size="mini" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-button type="success" size="mini" @click.stop="onAdd">添加分类</el-button>
|
||||
<el-button type="error" size="mini" class="mr10" :disabled="checkPicList.length===0" @click.stop="editPicList('图片')">删除图片</el-button>
|
||||
<el-select v-model="sleOptions.attachment_category_name" placeholder="图片移动至" class="mb15" size="mini">
|
||||
<el-option
|
||||
:label="sleOptions.attachment_category_name"
|
||||
:value="sleOptions.attachment_category_id"
|
||||
style="max-width: 560px;height:200px;overflow: auto;background-color:#fff"
|
||||
>
|
||||
<el-tree
|
||||
ref="tree2"
|
||||
:data="treeData2"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
@node-click="handleSelClick"
|
||||
/>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="pictrueList acea-row">
|
||||
<div v-show="isShowPic" class="imagesNo">
|
||||
<i class="el-icon-picture" style="font-size: 60px;color: rgb(219, 219, 219);" />
|
||||
<span class="imagesNo_sp">图片库为空</span>
|
||||
</div>
|
||||
<div class="conters">
|
||||
<div
|
||||
v-for="(item, index) in pictrueList.list"
|
||||
:key="index"
|
||||
class="gridPic"
|
||||
>
|
||||
<img v-if="index === 0" v-lazy="item.localImg?item.localImg:item.sattDir" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" />
|
||||
<img v-else v-lazy="item.sattDir?item.sattDir:localImg" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:page-sizes="[12, 24, 48, 60]"
|
||||
:page-size="tableData.limit"
|
||||
:current-page="tableData.page"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pictrueList.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:title="bizTitle"
|
||||
:visible.sync="visible"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
:modal="modals"
|
||||
@close="closeModel"
|
||||
>
|
||||
<el-form ref="editPram" :model="editPram" label-width="100px" v-loading="loading">
|
||||
<el-form-item label="上级分类">
|
||||
<el-cascader v-model="editPram.pid" :options="treeData2" :props="categoryProps" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="分类名称"
|
||||
prop="name"
|
||||
:rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
|
||||
>
|
||||
<el-input v-model="editPram.name" placeholder="分类名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="editPram.sort"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerSubmit('editPram')">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addCategroy, listCategroy, treeCategroy, infoCategroy, updateCategroy, deleteCategroy } from '@/api/categoryApi'
|
||||
import { fileImageApi, fileListApi, fileDeleteApi, attachmentMoveApi } from '@/api/systemSetting'
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'Upload',
|
||||
props: {
|
||||
isMore: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
modelName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
checkedMore: {
|
||||
type: Array,
|
||||
default: ()=> []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
modals: false,
|
||||
allTreeList:[],
|
||||
categoryProps: {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'child',
|
||||
expandTrigger: 'hover',
|
||||
checkStrictly: true,
|
||||
emitPath: false
|
||||
},
|
||||
editPram:{
|
||||
pid: 0,
|
||||
name: '',
|
||||
type: 2,
|
||||
sort: 1,
|
||||
status: 0,
|
||||
url:'url',
|
||||
id: 0
|
||||
},
|
||||
visible: false,
|
||||
bizTitle: '',
|
||||
sleOptions: {
|
||||
attrId: '',
|
||||
pid: ''
|
||||
},
|
||||
list: [],
|
||||
grid: {
|
||||
xl: 8,
|
||||
lg: 8,
|
||||
md: 8,
|
||||
sm: 8,
|
||||
xs: 24
|
||||
},
|
||||
grid2: {
|
||||
xl: 16,
|
||||
lg: 16,
|
||||
md: 16,
|
||||
sm: 16,
|
||||
xs: 24
|
||||
},
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
treeData2: [],
|
||||
defaultProps: {
|
||||
children: 'child',
|
||||
label: 'name'
|
||||
},
|
||||
tableData: {
|
||||
page: 1,
|
||||
limit: 12,
|
||||
pid: 0
|
||||
},
|
||||
classifyId: 0,
|
||||
myHeaders: { 'X-Token': getToken() },
|
||||
treeFrom: {
|
||||
status: -1,
|
||||
type: 2
|
||||
},
|
||||
pictrueList: {
|
||||
list: [],
|
||||
total: 0
|
||||
},
|
||||
isShowPic: false,
|
||||
checkPicList: [],
|
||||
ids: [],
|
||||
listPram: {
|
||||
pid: 0,
|
||||
type: 2,
|
||||
status: 0,
|
||||
name: '',
|
||||
page: 1,
|
||||
limit: 9999
|
||||
},
|
||||
localImg: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route && this.$route.query.field === 'dialog') import('../../../public/UEditor/dialogs/internal.js')
|
||||
this.getList()
|
||||
this.getFileList()
|
||||
// this.handlerGetList()
|
||||
},
|
||||
methods: {
|
||||
// 选取图片后自动回调，里面可以获取到文件
|
||||
imgSaveToUrl(event){ // 也可以用file
|
||||
this.localFile=event.raw // 或者 this.localFile=file.raw
|
||||
|
||||
// 转换操作可以不放到这个函数里面，
|
||||
// 因为这个函数会被多次触发，上传时触发，上传成功也触发
|
||||
let reader = new FileReader()
|
||||
reader.readAsDataURL(this.localFile);// 这里也可以直接写参数event.raw
|
||||
|
||||
// 转换成功后的操作，reader.result即为转换后的DataURL ，
|
||||
// 它不需要自己定义，你可以console.log(reader.result)看一下
|
||||
reader.onload=()=>{
|
||||
// console.log(reader.result)
|
||||
}
|
||||
|
||||
/* 另外一种本地预览方法 */
|
||||
let URL = window.URL || window.webkitURL;
|
||||
this.localImg = URL.createObjectURL(event.raw);
|
||||
// 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
|
||||
},
|
||||
closeModel(){
|
||||
this.$refs['editPram'].resetFields();
|
||||
},
|
||||
handlerSubmit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if( this.editPram.pid === 10000 ) this.editPram.pid = 0
|
||||
this.bizTitle==='添加分类' ? addCategroy(this.editPram).then(data => {
|
||||
this.$message.success('创建成功')
|
||||
this.visible = false
|
||||
this.getList()
|
||||
}) : updateCategroy(this.editPram).then(data => {
|
||||
this.$message.success('编辑成功')
|
||||
this.visible = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单分类
|
||||
handlerGetList() {
|
||||
let datas = {
|
||||
name: '全部分类',
|
||||
id: ''
|
||||
}
|
||||
treeCategroy(this.treeFrom).then(data => {
|
||||
this.allTreeList = data
|
||||
this.allTreeLis.unshift(datas)
|
||||
})
|
||||
},
|
||||
// 搜索分类
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
// 所有分类
|
||||
getList() {
|
||||
const data = {
|
||||
name: '全部分类',
|
||||
id: 10000
|
||||
}
|
||||
treeCategroy(this.treeFrom).then(res => {
|
||||
this.treeData = res
|
||||
this.treeData.unshift(data)
|
||||
this.treeData2 = [...this.treeData]
|
||||
})
|
||||
},
|
||||
// 添加分类
|
||||
onAdd(id) {
|
||||
this.tableData.pid = id
|
||||
if ( this.tableData.pid === 10000) this.tableData.pid = 0
|
||||
this.bizTitle = '添加分类'
|
||||
this.visible = true
|
||||
if(id) this.editPram = {
|
||||
pid: id,
|
||||
name: '',
|
||||
type: 2,
|
||||
sort: 1,
|
||||
status: 0,
|
||||
url:'url',
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
// 编辑
|
||||
onEdit(id) {
|
||||
if( id === 10000 ) id = 0
|
||||
this.bizTitle = '编辑分类'
|
||||
this.loading = true
|
||||
infoCategroy({id:id}).then((res) => {
|
||||
this.editPram = res
|
||||
this.loading = false
|
||||
})
|
||||
this.visible = true
|
||||
},
|
||||
// 删除
|
||||
handleDelete(id) {
|
||||
if(id === 10000) id = 0
|
||||
this.$modalSure().then(() => {
|
||||
deleteCategroy({id:id}).then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.tableData.pid = data.id
|
||||
this.getFileList()
|
||||
},
|
||||
// 上传
|
||||
handleUploadForm(param){
|
||||
const formData = new FormData()
|
||||
const data = {
|
||||
model: this.modelName ? this.modelName : this.$route.path.split("/")[1],
|
||||
pid: this.tableData.pid
|
||||
}
|
||||
formData.append('multipart', param.file)
|
||||
let loading = this.$loading({
|
||||
lock: true,
|
||||
text: '上传中，请稍候...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
fileImageApi(formData, data).then(res => {
|
||||
loading.close()
|
||||
this.$message.success('上传成功')
|
||||
this.getFileList()
|
||||
}).catch(res => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
// 文件列表
|
||||
getFileList() {
|
||||
if ( this.tableData.pid === 10000) this.tableData.pid = 0
|
||||
fileListApi(this.tableData).then(async res => {
|
||||
this.pictrueList.list = res.list
|
||||
if(this.tableData.page === 1 && this.pictrueList.list.length > 0) this.pictrueList.list[0].localImg = this.localImg
|
||||
if (this.pictrueList.list.length) {
|
||||
this.isShowPic = false
|
||||
} else {
|
||||
this.isShowPic = true
|
||||
}
|
||||
this.pictrueList.total = res.total
|
||||
})
|
||||
},
|
||||
pageChange(page) {
|
||||
this.tableData.page = page
|
||||
this.getFileList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.tableData.limit = val
|
||||
this.getFileList()
|
||||
},
|
||||
// 选中图片
|
||||
changImage(item, index, row) {
|
||||
let selectItem = ''
|
||||
this.$set(item, 'isSelect', item.isSelect === undefined ? true : !item.isSelect)
|
||||
selectItem = this.pictrueList.list.filter((item) => { return item.isSelect === true })
|
||||
this.checkPicList = selectItem
|
||||
this.ids = []
|
||||
this.checkPicList.map((item, index) => {
|
||||
this.ids.push(item.attId)
|
||||
})
|
||||
},
|
||||
// 点击使用选中图片
|
||||
checkPics() {
|
||||
if (!this.checkPicList.length) return this.$message.warning('请先选择图片')
|
||||
if (this.$route && this.$route.query.field === 'dialog') {
|
||||
let str = '';
|
||||
for (let i = 0; i < this.checkPicList.length; i++) {
|
||||
str += '<img src="' + this.checkPicList[i].sattDir + '">'
|
||||
}
|
||||
/* eslint-disable */
|
||||
nowEditor.dialog.close(true);
|
||||
nowEditor.editor.setContent(str,true)
|
||||
}else{
|
||||
if(this.isMore==='1' && this.checkPicList.length > 1){ return this.$message.warning('最多只能选一张图片')}
|
||||
this.$emit('getImage', [...this.checkedMore,...this.checkPicList ])
|
||||
}
|
||||
},
|
||||
// 删除图片
|
||||
editPicList(tit) {
|
||||
this.$modalSure().then(() => {
|
||||
fileDeleteApi(this.ids.join(',')).then(() => {
|
||||
this.$message.success('刪除成功')
|
||||
this.getFileList()
|
||||
this.checkPicList = []
|
||||
})
|
||||
})
|
||||
},
|
||||
// 移动分类点击
|
||||
handleSelClick(node) {
|
||||
if (this.ids.length) {
|
||||
this.sleOptions = {
|
||||
attrId: this.ids.join(','),
|
||||
pid: node.id
|
||||
}
|
||||
this.getMove()
|
||||
} else {
|
||||
this.$message.warning('请先选择图片')
|
||||
}
|
||||
},
|
||||
getMove() {
|
||||
attachmentMoveApi(this.sleOptions).then(async res => {
|
||||
this.$message.success('操作成功')
|
||||
this.clearBoth()
|
||||
this.getFileList()
|
||||
}).catch(res => {
|
||||
this.clearBoth()
|
||||
})
|
||||
},
|
||||
clearBoth() {
|
||||
this.sleOptions = {
|
||||
attrId: '',
|
||||
pid: ''
|
||||
}
|
||||
this.checkPicList = []
|
||||
this.ids = []
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.temp {
|
||||
height: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.selectTreeClass {
|
||||
background: #d5e8fc;
|
||||
}
|
||||
.treeBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.upload-demo {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.tree_w {
|
||||
padding: 20px 30px
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
color: #4386c6;
|
||||
}
|
||||
.custom-tree-node-label{
|
||||
display: block;
|
||||
width: 125px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.el-ic {
|
||||
display: none;
|
||||
i, span {
|
||||
/*padding: 0 14px;*/
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.svg-icon {
|
||||
color: #4386c6;
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
height: 38px;
|
||||
}
|
||||
.el-tree-node__expand-icon {
|
||||
color: #428bca;
|
||||
/*padding: 10px 10px 0px 10px !important;*/
|
||||
}
|
||||
.el-tree-node__content:hover .el-ic {
|
||||
color: #428bca !important;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content :hover {
|
||||
.el-tree-node__expand-icon.is-leaf {
|
||||
color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
/*background-color: #3998d9;*/
|
||||
.custom-tree-node {
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-tree-node__expand-icon {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
.upload-container .image-preview .image-preview-wrapper img {
|
||||
height: 100px;
|
||||
}
|
||||
.el-dialog .el-collapse-item__wrap {
|
||||
padding-top: 0px;
|
||||
|
||||
}
|
||||
.spatial_img {
|
||||
.el-collapse-item__wrap {
|
||||
margin-bottom: 0;
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
.upload-container .image-preview .image-preview-wrapper {
|
||||
width: 120px;
|
||||
}
|
||||
.upload-container .image-preview .image-preview-action {
|
||||
line-height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.trees-coadd {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.scollhide {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding: 10px 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
.trees {
|
||||
width: 100%;
|
||||
max-height: 374px;
|
||||
}
|
||||
}
|
||||
.scollhide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.conters{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.conters:after {content: ""; width: 410px !important; }
|
||||
.gridPic{
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.conter {
|
||||
width: 99%;
|
||||
height: 100%;
|
||||
.bnt {
|
||||
width: 100%;
|
||||
padding: 0 13px 10px 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pictrueList {
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
el-image {
|
||||
width: 100%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.on {
|
||||
border: 2px solid #5FB878;
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.imagesNo{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 65px 0;
|
||||
.imagesNo_sp{
|
||||
font-size: 13px;
|
||||
color: #dbdbdb;
|
||||
line-height: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user