671 lines
18 KiB
Vue
671 lines
18 KiB
Vue
<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.integralLog(reader.result)看一下
|
||
reader.onload=()=>{
|
||
// console.integralLog(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>
|