Files
crmeb_java/admin/src/components/uploadPicture/index.vue
337031187 9c2062e521 ## v1.3.1 更新列表
1. 【修复】申请退款后积分等操作可能出现错误的问题
	2. 【修复】拼团支付可能出现支付错误的问题
	3. 【修复】退款申请后的订单流程优化和积分赠送的问题
	4. 【修复】回收站中的商品无法恢复的问题
	5. 【修复】一号通短信查询记录不完整的问题
	6. 【修复】用户管理批量加分组,标签的问题
	7. 【修复】积分日志搜索显示有误的问题
	8. 【修复】手动发送优惠券可能会出错的问题
	9. 【修复】核销订单创建在某种条件下会出错的问题
	10. 【修复】移动端商品详情,购物车等样式兼容问题
	11. 【修复】业务流程性的优化
2021-01-19 10:16:45 +08:00

739 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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">
<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)">添加分类</el-dropdown-item>
<el-dropdown-item @click.native="onEdit(data.id)">编辑分类</el-dropdown-item>
<el-dropdown-item @click.native="handleDelete(data.id)">删除分类</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!--<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-tooltip class="item" effect="dark" content="使用选中图片" placement="top-start">-->
<!--<i class="el-icon-thumb mr20" style="font-size: 25px;" @click="checkPics"></i>-->
<!--</el-tooltip>-->
<!--<el-upload-->
<!--class="upload-demo mb15"-->
<!--action-->
<!--:http-request="handleUploadForm"-->
<!--:on-change="imgSaveToUrl"-->
<!--:headers="myHeaders"-->
<!--:show-file-list="false"-->
<!--multiple-->
<!--&gt;-->
<!--<el-tooltip class="item" effect="dark" content="上传图片" placement="top-start">-->
<!--<i class="el-icon-upload2 mr20" style="font-size: 25px;"></i>-->
<!--</el-tooltip>-->
<!--&lt;!&ndash;<el-button size="mini" type="primary">点击上传</el-button>&ndash;&gt;-->
<!--</el-upload>-->
<el-button size="small" type="primary" class="mr20 mb20" @click="checkPics">使用选中图片</el-button>
<div class="mr20 mb20">
<el-button-group>
<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 type="primary" icon="el-icon-upload2" size="mini" style="font-size: 15px;"></el-button>
</el-upload>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="添加分类" placement="top-start">
<el-button type="primary" icon="el-icon-circle-plus-outline" style="font-size: 15px;" size="mini" @click="onAdd"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除图片" placement="top-start">
<el-button type="primary" icon="el-icon-delete" style="font-size: 15px;" size="mini" @click.stop="editPicList('图片')"></el-button>
</el-tooltip>
</el-button-group>
</div>
<!--<el-tooltip class="item" effect="dark" content="添加分类" placement="top-start">-->
<!--<i class="el-icon-circle-plus-outline mr20" style="font-size: 25px;" @click="onAdd"></i>-->
<!--</el-tooltip>-->
<!--<el-button type="success" size="mini" @click.stop="onAdd">添加分类</el-button>-->
<!--<el-tooltip class="item" effect="dark" content="删除图片" placement="top-start">-->
<!--<i class="el-icon-delete mr20" style="font-size: 25px;" @click.stop="editPicList('图片')"></i>-->
<!--</el-tooltip>-->
<!--<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="mb20" size="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>
<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 scrollbarAll">
<div
v-for="(item, index) in pictrueList.list"
:key="index"
class="gridPic"
>
<img v-lazy="item.sattDir?item.sattDir:localImg" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" />
<!--<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="[10, 20, 30, 40]"
: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'
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: 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
},
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) {
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 = []
}
}
}
</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%;
max-height: 345px;
}
}
.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;
cursor: pointer;
img{
width: 100%;
height: 100%;
display: block;
}
}
.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 #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>