<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"
|
:style="{ maxHeight: !pictureType ? '300px' : '700px' }"
|
>
|
<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">
|
<el-dropdown>
|
<span class="el-dropdown-link">
|
<i class="el-icon-more"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
@click.native="onAdd(data.id)"
|
v-if="checkPermi(['admin:category:save'])"
|
>添加分类</el-dropdown-item
|
>
|
<el-dropdown-item
|
v-if="
|
node.label !== '全部图片' &&
|
checkPermi(['admin:category:update'])
|
"
|
@click.native="onEdit(data.id)"
|
>编辑分类</el-dropdown-item
|
>
|
<el-dropdown-item
|
v-if="
|
node.label !== '全部图片' &&
|
checkPermi(['admin:category:delete'])
|
"
|
@click.native="handleDelete(data.id)"
|
>删除分类</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</span>
|
</div>
|
</el-tree>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col v-bind="grid2" class="colLeft">
|
<div class="conter mb15 relative">
|
<div class="bnt">
|
<el-button
|
v-if="!pictureType"
|
size="small"
|
type="primary"
|
class="mr15 mb20"
|
@click="checkPics"
|
>使用选中图片</el-button
|
>
|
<div class="mb20">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="上传图片"
|
placement="top-start"
|
>
|
<el-upload
|
class="upload-demo"
|
action
|
:http-request="handleUploadForm"
|
:on-change="imgSaveToUrl"
|
:headers="myHeaders"
|
:show-file-list="false"
|
multiple
|
>
|
<el-button
|
icon="el-icon-upload2"
|
size="small"
|
class="mr15"
|
v-if="!pictureType"
|
></el-button>
|
</el-upload>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="删除图片"
|
placement="top-start"
|
>
|
<el-button
|
icon="el-icon-delete"
|
class="mr15"
|
type="danger"
|
size="small"
|
@click.stop="editPicList('图片')"
|
v-hasPermi="['admin:system:attachment:delete']"
|
v-if="!pictureType"
|
></el-button>
|
</el-tooltip>
|
</div>
|
<el-upload
|
class="upload-demo"
|
action
|
:http-request="handleUploadForm"
|
:on-change="imgSaveToUrl"
|
:headers="myHeaders"
|
:show-file-list="false"
|
multiple
|
>
|
<el-button class="mr10" type="primary" v-if="pictureType"
|
>上传图片</el-button
|
>
|
</el-upload>
|
<div>
|
<el-button
|
class="mr10"
|
type="danger"
|
@click.stop="editPicList('图片')"
|
v-if="pictureType"
|
>删除图片</el-button
|
>
|
</div>
|
<el-select
|
v-model="sleOptions.attachment_category_name"
|
placeholder="图片移动至"
|
class="mb20"
|
:size="pictureType ? '' : 'small'"
|
>
|
<el-option
|
class="demo"
|
: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 class="abs_video">
|
<el-radio-group v-model="typeDate" @change="radioChange" size="small">
|
<el-radio-button label="pic">图片</el-radio-button>
|
<el-radio-button label="video">视频</el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="pictrueList acea-row" v-loading="loadingPic">
|
<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 scrollbarAll"
|
:style="{ maxHeight: !pictureType ? '500px' : '700px' }"
|
>
|
<div
|
v-for="(item, index) in pictrueList.list"
|
:key="index"
|
class="gridPic"
|
>
|
<span class="num_badge" v-if="item.num > 0">{{item.num}}</span>
|
<img
|
style="object-fit: contain;"
|
v-lazy="item.sattDir ? item.sattDir : localImg"
|
:class="item.isSelect ? 'on' : ''"
|
@click="changImage(item, index, pictrueList.list)"
|
v-if="item.attType !== 'video/mp4'"
|
/>
|
<video
|
:src="item.sattDir"
|
:class="item.isSelect ? 'on' : ''"
|
@click="changImage(item, index, pictrueList.list)"
|
v-if="item.attType == 'video/mp4'"
|
></video>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="block">
|
<el-pagination
|
:page-sizes="!pictureType ? [10, 20, 30, 40] : [30, 60, 90, 120]"
|
:page-size="tableData.limit"
|
:current-page="tableData.page"
|
:pager-count="5"
|
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="上级分类"
|
prop="pid"
|
:rules="[
|
{
|
type: 'number',
|
required: true,
|
message: '请选择上级分类',
|
trigger: ['blur', 'change'],
|
},
|
]"
|
>
|
<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";
|
import { checkPermi } from "@/utils/permission"; // 权限判断函数
|
export default {
|
name: "Upload",
|
props: {
|
pictureType: {
|
type: String,
|
default: "",
|
},
|
isMore: {
|
type: String,
|
default: "1",
|
},
|
modelName: {
|
type: String,
|
default: "",
|
},
|
checkedMore: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
loadingPic: false,
|
loading: false,
|
modals: false,
|
allTreeList: [],
|
categoryProps: {
|
value: "id",
|
label: "name",
|
children: "child",
|
expandTrigger: "hover",
|
checkStrictly: true,
|
emitPath: false,
|
},
|
editPram: {
|
pid: 1000,
|
name: "",
|
type: 2,
|
sort: 1,
|
status: 0,
|
url: "url",
|
id: 0,
|
},
|
visible: false,
|
bizTitle: "",
|
sleOptions: {
|
attrId: "",
|
pid: "",
|
},
|
list: [],
|
grid: {
|
xl: 7,
|
lg: 7,
|
md: 7,
|
sm: 7,
|
xs: 24,
|
},
|
grid2: {
|
xl: 17,
|
lg: 17,
|
md: 17,
|
sm: 17,
|
xs: 24,
|
},
|
filterText: "",
|
treeData: [],
|
treeData2: [],
|
defaultProps: {
|
children: "child",
|
label: "name",
|
},
|
tableData: {
|
page: 1,
|
limit: 10,
|
pid: 0,
|
attType: "jpg,jpeg,gif,png,bmp,PNG,JPG",
|
},
|
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: "",
|
videoStatus: false,
|
typeDate:"pic",
|
};
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
},
|
mounted() {
|
this.pictureType
|
? (this.tableData.limit = 30)
|
: (this.tableData.limit = 10);
|
if (this.$route && this.$route.query.field === "dialog")
|
import("./internal.js");
|
this.getList();
|
this.getFileList();
|
// this.handlerGetList()
|
},
|
methods: {
|
checkPermi,
|
// 选取图片后自动回调，里面可以获取到文件
|
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.checkPicList = [];
|
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.tableData.page = 1;
|
this.getFileList();
|
})
|
.catch((res) => {
|
loading.close();
|
});
|
},
|
// 文件列表
|
getFileList() {
|
if (this.tableData.pid === 10000) this.tableData.pid = 0;
|
this.loadingPic = true;
|
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;
|
this.loadingPic = false;
|
})
|
.catch(() => {
|
this.loadingPic = false;
|
});
|
},
|
pageChange(page) {
|
this.tableData.page = page;
|
this.checkPicList = [];
|
this.getFileList();
|
},
|
handleSizeChange(val) {
|
this.tableData.limit = val;
|
this.getFileList();
|
},
|
// 选中图片
|
changImage(item, index, row) {
|
let activeIndex = 0;
|
if (!item.isSelect) {
|
this.$set(item, "isSelect", true);
|
this.checkPicList.push(item);
|
} else {
|
this.$set(item, "isSelect", !item.isSelect);
|
this.checkPicList.map((el, index) => {
|
if (el.attId == item.attId) {
|
activeIndex = index;
|
}
|
});
|
this.checkPicList.splice(activeIndex, 1);
|
}
|
this.ids = [];
|
this.checkPicList.map((item, i) => {
|
this.ids.push(item.attId);
|
});
|
|
this.pictrueList.list.map((el, i) => {
|
if (el.isSelect) {
|
this.checkPicList.filter((el2, j) => {
|
if (el.attId == el2.attId) {
|
el.num = j + 1;
|
this.$nextTick(() => {
|
this.pictrueList.list;
|
});
|
}
|
});
|
} else {
|
el.num = 0;
|
}
|
});
|
},
|
// 点击使用选中图片
|
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) {
|
if (!this.checkPicList.length)
|
return this.$message.warning("请先选择图片");
|
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 = [];
|
},
|
videoChange(val) {
|
if (val == false) {
|
this.$set(this.tableData, "attType", "jpg,jpeg,gif,png,bmp,PNG,JPG");
|
this.getFileList();
|
} else {
|
this.$set(this.tableData, "attType", "video/mp4");
|
this.getFileList();
|
}
|
},
|
radioChange(val){
|
if(val === 'video'){
|
this.videoChange(true)
|
}else{
|
this.videoChange(false)
|
}
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.demo::-webkit-scrollbar {
|
display: none; /* Chrome Safari */
|
}
|
|
.demo {
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
.temp {
|
height: 0;
|
margin-bottom: 0;
|
border: none;
|
padding: 0;
|
}
|
.selectTreeClass {
|
background: #d5e8fc;
|
}
|
.treeBox {
|
width: 100%;
|
height: 100%;
|
}
|
.upload-demo {
|
display: inline-block !important;
|
float: left;
|
}
|
.tree_w {
|
padding: 20px 30px;
|
}
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 12px;
|
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%;
|
}
|
}
|
.scollhide::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
.conters {
|
display: flex;
|
flex-wrap: wrap;
|
/*max-height: 296px;*/
|
overflow: auto;
|
}
|
.conters:after {
|
content: "";
|
width: 410px !important;
|
}
|
.gridPic {
|
margin-right: 15px;
|
margin-bottom: 10px;
|
width: 110px;
|
height: 110px;
|
position: relative;
|
cursor: pointer;
|
img {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
video {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
.num_badge {
|
position: absolute;
|
bottom: 6px;
|
right: 6px;
|
display: inline-block;
|
min-width: 20px;
|
height: 20px;
|
border-radius: 10px;
|
background: #1890FF;
|
font-size: 14px;
|
text-align: center;
|
color: #fff;
|
line-height: 20px;
|
}
|
}
|
.conter {
|
width: 99%;
|
height: 100%;
|
.bnt {
|
width: 100%;
|
padding: 0 13px 10px 7px;
|
box-sizing: border-box;
|
display: flex;
|
}
|
.pictrueList {
|
/*padding-left: 15px;*/
|
width: 100%;
|
el-image {
|
width: 100%;
|
border: 2px solid #fff;
|
}
|
.on {
|
border: 2px solid #1890FF;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
.relative{
|
position: relative;
|
}
|
.abs_video{
|
position: absolute;
|
right: 20px;
|
top: 0;
|
}
|
</style>
|
