feat: 迁移素材库
This commit is contained in:
Gaoxs
46
src/api/tools/material.js
Normal file
46
src/api/tools/material.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/*
|
||||||
|
* @Author: Gaoxs
|
||||||
|
* @Date: 2023-05-21 23:40:06
|
||||||
|
* @LastEditors: Gaoxs
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export async function getPage(query) {
|
||||||
|
return await request.get({
|
||||||
|
url: '/shop/material/page',
|
||||||
|
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addObj(obj) {
|
||||||
|
return await request.post({
|
||||||
|
url: '/shop/material/create',
|
||||||
|
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getObj(id) {
|
||||||
|
return await request.ge({
|
||||||
|
url: '/shop/material/' + id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function delObj(id) {
|
||||||
|
return await request.delete({
|
||||||
|
url: '/shop/material/delete',
|
||||||
|
params: {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function putObj(obj) {
|
||||||
|
return await request.put({
|
||||||
|
url: '/shop/material/update',
|
||||||
|
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
52
src/api/tools/materialgroup.js
Normal file
52
src/api/tools/materialgroup.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/*
|
||||||
|
* @Author: Gaoxs
|
||||||
|
* @Date: 2023-05-21 23:40:06
|
||||||
|
* @LastEditors: Gaoxs
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export async function getPage(query) {
|
||||||
|
return await request.get({
|
||||||
|
url: '/shop/material-group/page',
|
||||||
|
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getList(query) {
|
||||||
|
return await request.get({
|
||||||
|
url: '/shop/material-group/list',
|
||||||
|
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addObj(obj) {
|
||||||
|
return await request.post({
|
||||||
|
url: '/shop/material-group/create',
|
||||||
|
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getObj(id) {
|
||||||
|
return await request.ge({
|
||||||
|
url: '/shop/material-group/' + id
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function delObj(id) {
|
||||||
|
return await request.delete({
|
||||||
|
url: '/shop/material-group/delete',
|
||||||
|
params: { id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function putObj(obj) {
|
||||||
|
return await request.put({
|
||||||
|
url: '/shop/material-group/update',
|
||||||
|
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,3 +0,0 @@
|
|||||||
// import Materials from './src/Materials.vue'
|
|
||||||
|
|
||||||
// export { Materials }
|
|
||||||
@ -1,481 +0,0 @@
|
|||||||
<!-- <template>
|
|
||||||
<div v-if="type == 'image'">
|
|
||||||
<div v-if="myValue != ''">
|
|
||||||
<ul class="el-upload-list el-upload-list--picture-card">
|
|
||||||
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'">
|
|
||||||
<div>
|
|
||||||
<img :src="myValue" alt="" class="el-upload-list__item-thumbnail">
|
|
||||||
<span class="el-upload-list__item-actions">
|
|
||||||
<span class="el-upload-list__item-delete" @click="deleteMaterial">
|
|
||||||
<i class="el-icon-delete" />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-else tabindex="0" class="el-upload el-upload--picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial">
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
append-to-body
|
|
||||||
:visible.sync="dialogVisible"
|
|
||||||
width="35%"
|
|
||||||
>
|
|
||||||
<img :src="url" alt="" style="width: 100%">
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
title="图片素材库"
|
|
||||||
append-to-body
|
|
||||||
:visible.sync="listDialogVisible"
|
|
||||||
width="70%"
|
|
||||||
>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="unset">
|
|
||||||
<div style="margin-bottom: 10px">
|
|
||||||
<el-button
|
|
||||||
class="el-icon-plus"
|
|
||||||
size="small"
|
|
||||||
@click="materialgroupAdd()"
|
|
||||||
>
|
|
||||||
添加分组
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="(item,index) in materialgroupList"
|
|
||||||
:key="item.id"
|
|
||||||
:name="item.id"
|
|
||||||
>
|
|
||||||
<span slot="label"> {{ item.name }}</span>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-aside>
|
|
||||||
<el-main>
|
|
||||||
<el-card>
|
|
||||||
<div slot="header">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<span>{{ materialgroupObj.name }}</span>
|
|
||||||
<span v-if="materialgroupObj.id != '-1'">
|
|
||||||
<el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">重命名</el-button>
|
|
||||||
<el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" style="text-align: right;">
|
|
||||||
<el-upload
|
|
||||||
:action="uploadApi"
|
|
||||||
:headers="headers"
|
|
||||||
:file-list="[]"
|
|
||||||
:on-progress="handleProgress"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:data="{type: 1}"
|
|
||||||
multiple
|
|
||||||
>
|
|
||||||
<el-button size="small" type="primary">批量上传</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div v-loading="tableLoading">
|
|
||||||
<el-alert
|
|
||||||
v-if="tableData.length <= 0"
|
|
||||||
title="暂无数据"
|
|
||||||
type="info"
|
|
||||||
:closable="false"
|
|
||||||
center
|
|
||||||
show-icon
|
|
||||||
/>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-checkbox-group v-model="urls" :max="num - myValue.length">
|
|
||||||
<el-col v-for="(item,index) in tableData" :key="index" :span="4">
|
|
||||||
<el-card :body-style="{ padding: '5px' }">
|
|
||||||
<el-image
|
|
||||||
style="width: 100%;height: 100px"
|
|
||||||
:src="item.url"
|
|
||||||
fit="contain"
|
|
||||||
:preview-src-list="[item.url]"
|
|
||||||
:z-index="999"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<el-checkbox class="material-name" :label="item.url">
|
|
||||||
选择
|
|
||||||
</el-checkbox>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24" class="col-do">
|
|
||||||
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-row>
|
|
||||||
<el-pagination
|
|
||||||
:current-page.sync="page.currentPage"
|
|
||||||
:page-sizes="[12, 24]"
|
|
||||||
:page-size="page.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="page.total"
|
|
||||||
class="pagination"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@current-change="pageChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="listDialogVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="sureUrls">确 定</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { getList as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
|
|
||||||
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
|
|
||||||
import { getToken } from '@/utils/auth'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MaterialList',
|
|
||||||
props: {
|
|
||||||
// 素材数据
|
|
||||||
value: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
// 素材类型
|
|
||||||
type: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
// 素材限制数量，默认5个
|
|
||||||
num: {
|
|
||||||
type: Number,
|
|
||||||
default() {
|
|
||||||
return 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 宽度
|
|
||||||
width: {
|
|
||||||
type: Number,
|
|
||||||
default() {
|
|
||||||
return 150
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 宽度
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default() {
|
|
||||||
return 150
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
headers: {
|
|
||||||
Authorization: getToken()
|
|
||||||
},
|
|
||||||
dialogVisible: false,
|
|
||||||
myValue: this.value,
|
|
||||||
url: '',
|
|
||||||
listDialogVisible: false,
|
|
||||||
materialgroupList: [],
|
|
||||||
materialgroupObjId: '',
|
|
||||||
materialgroupObj: {},
|
|
||||||
materialgroupLoading: false,
|
|
||||||
tableData: [],
|
|
||||||
resultNumber: 0,
|
|
||||||
page: {
|
|
||||||
total: 0, // 总页数
|
|
||||||
currentPage: 1, // 当前页数
|
|
||||||
pageSize: 12, // 每页显示多少条
|
|
||||||
ascs: [], // 升序字段
|
|
||||||
descs: 'create_time'// 降序字段
|
|
||||||
},
|
|
||||||
tableLoading: false,
|
|
||||||
groupId: null,
|
|
||||||
urls: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'uploadApi'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: function(val) {
|
|
||||||
this.myValue = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
moveMaterial(index, type) {
|
|
||||||
if (type == 'up') {
|
|
||||||
const tempOption = this.value[index - 1]
|
|
||||||
this.$set(this.value, index - 1, this.value[index])
|
|
||||||
this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
if (type == 'down') {
|
|
||||||
const tempOption = this.value[index + 1]
|
|
||||||
this.$set(this.value, index + 1, this.value[index])
|
|
||||||
this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zoomMaterial(index) {
|
|
||||||
this.dialogVisible = true
|
|
||||||
this.url = this.value[index]
|
|
||||||
},
|
|
||||||
deleteMaterial() {
|
|
||||||
const that = this
|
|
||||||
this.$confirm('是否确认删除？', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(function() {
|
|
||||||
that.myValue = ''
|
|
||||||
that.urls = []
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toSeleteMaterial() {
|
|
||||||
this.listDialogVisible = true
|
|
||||||
if (this.tableData.length <= 0) {
|
|
||||||
this.materialgroupPage()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
materialgroupPage() {
|
|
||||||
this.materialgroupLoading = true
|
|
||||||
materialgroupPage({
|
|
||||||
total: 0, // 总页数
|
|
||||||
page: 1, // 当前页数
|
|
||||||
size: 100, // 每页显示多少条
|
|
||||||
ascs: [], // 升序字段
|
|
||||||
sort: 'create_time,desc'// 降序字段
|
|
||||||
}).then(response => {
|
|
||||||
this.materialgroupLoading = false
|
|
||||||
const materialgroupList = response
|
|
||||||
materialgroupList.unshift({
|
|
||||||
id: '-1',
|
|
||||||
name: '全部分组'
|
|
||||||
})
|
|
||||||
this.materialgroupList = materialgroupList
|
|
||||||
this.tabClick({
|
|
||||||
index: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
materialgroupDelete(materialgroupObj) {
|
|
||||||
const that = this
|
|
||||||
this.$confirm('是否确认删除该分组？', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(function() {
|
|
||||||
materialgroupDel(materialgroupObj.id)
|
|
||||||
.then(function() {
|
|
||||||
that.$delete(that.materialgroupList, materialgroupObj.index)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
materialgroupEdit(materialgroupObj) {
|
|
||||||
const that = this
|
|
||||||
this.$prompt('请输入分组名', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
inputValue: materialgroupObj.name
|
|
||||||
}).then(({ value }) => {
|
|
||||||
materialgroupEdit({
|
|
||||||
id: materialgroupObj.id,
|
|
||||||
name: value
|
|
||||||
}).then(function() {
|
|
||||||
materialgroupObj.name = value
|
|
||||||
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
materialgroupAdd() {
|
|
||||||
const that = this
|
|
||||||
this.$prompt('请输入分组名', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消'
|
|
||||||
}).then(({ value }) => {
|
|
||||||
materialgroupAdd({
|
|
||||||
name: value
|
|
||||||
}).then(function() {
|
|
||||||
that.materialgroupPage()
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
tabClick(tab, event) {
|
|
||||||
this.urls = []
|
|
||||||
const index = Number(tab.index)
|
|
||||||
const materialgroupObj = this.materialgroupList[index]
|
|
||||||
materialgroupObj.index = index
|
|
||||||
this.materialgroupObj = materialgroupObj
|
|
||||||
this.materialgroupObjId = materialgroupObj.id
|
|
||||||
this.page.currentPage = 1
|
|
||||||
this.page.total = 0
|
|
||||||
if (materialgroupObj.id != '-1') {
|
|
||||||
this.groupId = materialgroupObj.id
|
|
||||||
} else {
|
|
||||||
this.groupId = null
|
|
||||||
}
|
|
||||||
this.getPage(this.page)
|
|
||||||
},
|
|
||||||
getPage(page, params) {
|
|
||||||
this.tableLoading = true
|
|
||||||
getPage(Object.assign({
|
|
||||||
page: page.currentPage - 1,
|
|
||||||
size: page.pageSize,
|
|
||||||
descs: this.page.descs,
|
|
||||||
ascs: this.page.ascs,
|
|
||||||
sort: 'create_time,desc'
|
|
||||||
}, {
|
|
||||||
groupId: this.groupId
|
|
||||||
})).then(response => {
|
|
||||||
const tableData = response.content
|
|
||||||
this.page.total = response.totalElements
|
|
||||||
this.page.currentPage = page.currentPage
|
|
||||||
this.page.pageSize = page.pageSize
|
|
||||||
this.tableData = tableData
|
|
||||||
this.tableLoading = false
|
|
||||||
}).catch(() => {
|
|
||||||
this.tableLoading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
sizeChange(val) {
|
|
||||||
console.log(val)
|
|
||||||
this.page.currentPage = 1
|
|
||||||
this.page.pageSize = val
|
|
||||||
this.getPage(this.page)
|
|
||||||
},
|
|
||||||
pageChange(val) {
|
|
||||||
console.log(val)
|
|
||||||
this.page.currentPage = val
|
|
||||||
// this.page.pageSize = val
|
|
||||||
this.getPage(this.page)
|
|
||||||
},
|
|
||||||
materialRename(item) {
|
|
||||||
const that = this
|
|
||||||
this.$prompt('请输入素材名', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
inputValue: item.name
|
|
||||||
}).then(({ value }) => {
|
|
||||||
putObj({
|
|
||||||
id: item.id,
|
|
||||||
name: value
|
|
||||||
}).then(function() {
|
|
||||||
that.getPage(that.page)
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
materialUrl(item) {
|
|
||||||
const that = this
|
|
||||||
this.$prompt('素材链接', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
inputValue: item.url
|
|
||||||
}).then(({ value }) => {
|
|
||||||
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
materialDel(item) {
|
|
||||||
const that = this
|
|
||||||
this.$confirm('是否确认删除该素材？', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(function() {
|
|
||||||
delObj(item.id)
|
|
||||||
.then(function() {
|
|
||||||
that.getPage(that.page)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCommand(command) {
|
|
||||||
const that = this
|
|
||||||
const s = command.split('-')
|
|
||||||
putObj({
|
|
||||||
id: s[0],
|
|
||||||
groupId: s[1]
|
|
||||||
}).then(function() {
|
|
||||||
that.getPage(that.page)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleProgress(event, file, fileList) {
|
|
||||||
console.log(event)
|
|
||||||
// let uploadProgress = file.percentage.toFixed(0)
|
|
||||||
// this.uploadProgress = uploadProgress
|
|
||||||
},
|
|
||||||
handleSuccess(response, file, fileList) {
|
|
||||||
const that = this
|
|
||||||
this.uploadProgress = 0
|
|
||||||
addObj({
|
|
||||||
type: '1',
|
|
||||||
groupId: this.groupId != '-1' ? this.groupId : null,
|
|
||||||
name: file.name,
|
|
||||||
url: response.link
|
|
||||||
}).then(() => {
|
|
||||||
this.resultNumber++
|
|
||||||
if (fileList.length === this.resultNumber) {
|
|
||||||
that.getPage(that.page)
|
|
||||||
this.resultNumber = 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeUpload(file) {
|
|
||||||
const isPic =
|
|
||||||
file.type === 'image/jpeg' ||
|
|
||||||
file.type === 'image/png' ||
|
|
||||||
file.type === 'image/gif' ||
|
|
||||||
file.type === 'image/jpg'
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2
|
|
||||||
if (!isPic) {
|
|
||||||
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (!isLt2M) {
|
|
||||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
||||||
}
|
|
||||||
return isPic && isLt2M
|
|
||||||
},
|
|
||||||
sureUrls() {
|
|
||||||
console.log('this.urls:' + this.urls)
|
|
||||||
this.myValue = this.urls[0]
|
|
||||||
this.$emit('input', this.urls[0])
|
|
||||||
this.listDialogVisible = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .el-icon-circle-close{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.material-name{
|
|
||||||
padding: 8px 0px;
|
|
||||||
}
|
|
||||||
.col-do{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.button-do{
|
|
||||||
padding: unset!important;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
-->
|
|
||||||
@ -1,624 +0,0 @@
|
|||||||
<!-- <template>
|
|
||||||
<div>
|
|
||||||
<ul
|
|
||||||
v-for="(item, index) in value"
|
|
||||||
:key="index"
|
|
||||||
class="el-upload-list el-upload-list--picture-card"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
tabindex="0"
|
|
||||||
class="el-upload-list__item is-ready"
|
|
||||||
:style="'width: ' + width + 'px;height: ' + height + 'px'"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<img :src="item" alt="" class="el-upload-list__item-thumbnail" />
|
|
||||||
<span class="el-upload-list__item-actions">
|
|
||||||
<span
|
|
||||||
v-if="index != 0"
|
|
||||||
class="el-upload-list__item-preview"
|
|
||||||
@click="moveMaterial(index, 'up')"
|
|
||||||
>
|
|
||||||
<i class="el-icon-back" />
|
|
||||||
</span>
|
|
||||||
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
|
|
||||||
<i class="el-icon-view" />
|
|
||||||
</span>
|
|
||||||
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
|
|
||||||
<i class="el-icon-delete" />
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="index != value.length - 1"
|
|
||||||
class="el-upload-list__item-preview"
|
|
||||||
@click="moveMaterial(index, 'down')"
|
|
||||||
>
|
|
||||||
<i class="el-icon-right" />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div
|
|
||||||
v-if="num > value.length"
|
|
||||||
tabindex="0"
|
|
||||||
class="el-upload el-upload--picture-card"
|
|
||||||
:style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
|
|
||||||
@click="toSeleteMaterial"
|
|
||||||
>
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dialog append-to-body :visible.sync="dialogVisible" width="35%">
|
|
||||||
<img :src="url" alt="" style="width: 100%" />
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<el-dialog title="图片素材库" append-to-body :visible.sync="listDialogVisible" width="70%">
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="unset">
|
|
||||||
<div style="margin-bottom: 10px">
|
|
||||||
<el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">
|
|
||||||
添加分组
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-tabs
|
|
||||||
v-model="materialgroupObjId"
|
|
||||||
v-loading="materialgroupLoading"
|
|
||||||
tab-position="left"
|
|
||||||
@tab-click="tabClick"
|
|
||||||
>
|
|
||||||
<el-tab-pane v-for="(item, index) in materialgroupList" :key="item.id" :name="item.id">
|
|
||||||
<span slot="label"> {{ item.name }}</span>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-aside>
|
|
||||||
<el-main>
|
|
||||||
<el-card>
|
|
||||||
<div slot="header">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<span>{{ materialgroupObj.name }}</span>
|
|
||||||
<span v-if="materialgroupObj.id != '-1'">
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
class="el-icon-edit"
|
|
||||||
style="margin-left: 10px"
|
|
||||||
@click="materialgroupEdit(materialgroupObj)"
|
|
||||||
>重命名</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
class="el-icon-delete"
|
|
||||||
style="margin-left: 10px; color: red"
|
|
||||||
@click="materialgroupDelete(materialgroupObj)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" style="text-align: right">
|
|
||||||
<el-upload
|
|
||||||
:action="uploadApi"
|
|
||||||
:headers="headers"
|
|
||||||
:file-list="[]"
|
|
||||||
:on-progress="handleProgress"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:data="{ type: 1 }"
|
|
||||||
multiple
|
|
||||||
>
|
|
||||||
<el-button size="small" type="primary">批量上传</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div v-loading="tableLoading">
|
|
||||||
<el-alert
|
|
||||||
v-if="tableData.length <= 0"
|
|
||||||
title="暂无数据"
|
|
||||||
type="info"
|
|
||||||
:closable="false"
|
|
||||||
center
|
|
||||||
show-icon
|
|
||||||
/>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-checkbox-group v-model="urls" :max="num - value.length">
|
|
||||||
<el-col v-for="(item, index) in tableData" :key="index" :span="4">
|
|
||||||
<el-card :body-style="{ padding: '5px' }">
|
|
||||||
<el-image
|
|
||||||
style="width: 100%; height: 100px"
|
|
||||||
:src="item.url"
|
|
||||||
fit="contain"
|
|
||||||
:preview-src-list="[item.url]"
|
|
||||||
:z-index="9999"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<el-checkbox class="material-name" :label="item.url"> 选择 </el-checkbox>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24" class="col-do">
|
|
||||||
<el-button type="text" size="medium" @click="materialDel(item)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-row>
|
|
||||||
<el-pagination
|
|
||||||
:current-page.sync="page.currentPage"
|
|
||||||
:page-sizes="[12, 24]"
|
|
||||||
:page-size="page.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="page.total"
|
|
||||||
class="pagination"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@current-change="pageChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="listDialogVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="sureUrls">确 定</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="Materials">
|
|
||||||
// import {
|
|
||||||
// getList as materialgroupPage,
|
|
||||||
// addObj as materialgroupAdd,
|
|
||||||
// delObj as materialgroupDel,
|
|
||||||
// putObj as materialgroupEdit
|
|
||||||
// } from '@/api/tools/materialgroup'
|
|
||||||
import * as MaterialGroupApi from '@/api/mall/shop/materialGroup'
|
|
||||||
//import { getPage, addObj, delObj, putObj } from '@/api/mall/tools/material'
|
|
||||||
// import { getToken } from '@/utils/auth'
|
|
||||||
// import { mapGetters } from 'vuex'
|
|
||||||
import { propTypes } from '@/utils/propTypes'
|
|
||||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Array as PropType<string[]>,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
|
|
||||||
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
|
|
||||||
num: propTypes.number.def(5) // 最大图片上传数 ==> 非必传（默认为 5张）
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
let dialogVisible = ref(false)
|
|
||||||
let url = ref("")
|
|
||||||
let listDialogVisible = ref(false)
|
|
||||||
let materialgroupList = ref([])
|
|
||||||
let materialgroupObjId = ref("")
|
|
||||||
let materialgroupObj = reactive({})
|
|
||||||
let materialgroupLoading = ref(false)
|
|
||||||
let tableData = ref([])
|
|
||||||
let resultNumber = ref(0)
|
|
||||||
let tableLoading = ref(false)
|
|
||||||
let groupId = ref(0)
|
|
||||||
left urls = ref([])
|
|
||||||
|
|
||||||
|
|
||||||
const page = reactive({
|
|
||||||
total: 0, // 总页数
|
|
||||||
currentPage: 1, // 当前页数
|
|
||||||
pageSize: 12, // 每页显示多少条
|
|
||||||
ascs: [], // 升序字段
|
|
||||||
descs: 'create_time' // 降序字段
|
|
||||||
})
|
|
||||||
|
|
||||||
const moveMaterial = (index: number, type: string) => {
|
|
||||||
if (type == 'up') {
|
|
||||||
const tempOption = props.modelValue[index - 1]
|
|
||||||
props.modelValue[index - 1] = props.modelValue[index]
|
|
||||||
props.modelValue[index] = tempOption
|
|
||||||
//this.$set(this.value, index - 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
if (type == 'down') {
|
|
||||||
const tempOption = props.modelValue[index + 1]
|
|
||||||
props.modelValue[index +1] = props.modelValue[index]
|
|
||||||
props.modelValue[index] = tempOption
|
|
||||||
// this.$set(this.value, index + 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const zoomMaterial = (index: number) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
url.value = props.modelValue[index]
|
|
||||||
//this.url = this.value[index]
|
|
||||||
},
|
|
||||||
|
|
||||||
const deleteMaterial = (index: number) => {
|
|
||||||
console.log(index)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toSeleteMaterial = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupPage = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupDelete = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupEdit = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupAdd = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabClick = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const getPage = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const sizeChange = (val: number) => {
|
|
||||||
console.log(val)
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageChange = (val: number) => {
|
|
||||||
console.log(val)
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialRename = (item: object) => {
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialUrl = (item: object) => {
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
const materialDel = (item: object) => {
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
cons
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MaterialList',
|
|
||||||
// props: {
|
|
||||||
// // 素材数据
|
|
||||||
// value: {
|
|
||||||
// type: Array,
|
|
||||||
// default() {
|
|
||||||
// return []
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // 素材类型
|
|
||||||
// type: {
|
|
||||||
// type: String
|
|
||||||
// },
|
|
||||||
// // 素材限制数量，默认5个
|
|
||||||
// num: {
|
|
||||||
// type: Number,
|
|
||||||
// default() {
|
|
||||||
// return 5
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // 宽度
|
|
||||||
// width: {
|
|
||||||
// type: Number,
|
|
||||||
// default() {
|
|
||||||
// return 150
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// // 宽度
|
|
||||||
// height: {
|
|
||||||
// type: Number,
|
|
||||||
// default() {
|
|
||||||
// return 150
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// headers: {
|
|
||||||
// Authorization: getToken()
|
|
||||||
// },
|
|
||||||
// dialogVisible: false,
|
|
||||||
// url: '',
|
|
||||||
//listDialogVisible: false,
|
|
||||||
// materialgroupList: [],
|
|
||||||
// materialgroupObjId: '',
|
|
||||||
// materialgroupObj: {},
|
|
||||||
// materialgroupLoading: false,
|
|
||||||
// tableData: [],
|
|
||||||
// resultNumber: 0,
|
|
||||||
// page: {
|
|
||||||
// total: 0, // 总页数
|
|
||||||
// currentPage: 1, // 当前页数
|
|
||||||
// pageSize: 12, // 每页显示多少条
|
|
||||||
// ascs: [], // 升序字段
|
|
||||||
// descs: 'create_time' // 降序字段
|
|
||||||
// },
|
|
||||||
// tableLoading: false,
|
|
||||||
// groupId: null,
|
|
||||||
// urls: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// computed: {
|
|
||||||
// ...mapGetters(['uploadApi'])
|
|
||||||
// },
|
|
||||||
methods: {
|
|
||||||
// moveMaterial(index, type) {
|
|
||||||
// if (type == 'up') {
|
|
||||||
// const tempOption = this.value[index - 1]
|
|
||||||
// this.$set(this.value, index - 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
// }
|
|
||||||
// if (type == 'down') {
|
|
||||||
// const tempOption = this.value[index + 1]
|
|
||||||
// this.$set(this.value, index + 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// zoomMaterial(index) {
|
|
||||||
// this.dialogVisible = true
|
|
||||||
// this.url = this.value[index]
|
|
||||||
// },
|
|
||||||
// deleteMaterial(index) {
|
|
||||||
// const that = this
|
|
||||||
// this.$confirm('是否确认删除？', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// type: 'warning'
|
|
||||||
// }).then(function () {
|
|
||||||
// that.value.splice(index, 1)
|
|
||||||
// that.urls = []
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// toSeleteMaterial() {
|
|
||||||
// this.listDialogVisible = true
|
|
||||||
// if (this.tableData.length <= 0) {
|
|
||||||
// this.materialgroupPage()
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// materialgroupPage() {
|
|
||||||
// this.materialgroupLoading = true
|
|
||||||
// materialgroupPage({
|
|
||||||
// total: 0, // 总页数
|
|
||||||
// page: 1, // 当前页数
|
|
||||||
// size: 100, // 每页显示多少条
|
|
||||||
// ascs: [], // 升序字段
|
|
||||||
// sort: 'create_time,desc' // 降序字段
|
|
||||||
// }).then((response) => {
|
|
||||||
// this.materialgroupLoading = false
|
|
||||||
// const materialgroupList = response
|
|
||||||
// materialgroupList.unshift({
|
|
||||||
// id: '-1',
|
|
||||||
// name: '全部分组'
|
|
||||||
// })
|
|
||||||
// this.materialgroupList = materialgroupList
|
|
||||||
// this.tabClick({
|
|
||||||
// index: 0
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// materialgroupDelete(materialgroupObj) {
|
|
||||||
// const that = this
|
|
||||||
// this.$confirm('是否确认删除该分组？', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// type: 'warning'
|
|
||||||
// }).then(function () {
|
|
||||||
// materialgroupDel(materialgroupObj.id).then(function () {
|
|
||||||
// that.$delete(that.materialgroupList, materialgroupObj.index)
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// materialgroupEdit(materialgroupObj) {
|
|
||||||
// const that = this
|
|
||||||
// this.$prompt('请输入分组名', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// inputValue: materialgroupObj.name
|
|
||||||
// })
|
|
||||||
// .then(({ value }) => {
|
|
||||||
// materialgroupEdit({
|
|
||||||
// id: materialgroupObj.id,
|
|
||||||
// name: value
|
|
||||||
// }).then(function () {
|
|
||||||
// materialgroupObj.name = value
|
|
||||||
// that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// .catch(() => {})
|
|
||||||
// },
|
|
||||||
// materialgroupAdd() {
|
|
||||||
// const that = this
|
|
||||||
// this.$prompt('请输入分组名', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消'
|
|
||||||
// })
|
|
||||||
// .then(({ value }) => {
|
|
||||||
// materialgroupAdd({
|
|
||||||
// name: value
|
|
||||||
// }).then(function () {
|
|
||||||
// that.materialgroupPage()
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// .catch(() => {})
|
|
||||||
// },
|
|
||||||
// tabClick(tab, event) {
|
|
||||||
// this.urls = []
|
|
||||||
// const index = Number(tab.index)
|
|
||||||
// const materialgroupObj = this.materialgroupList[index]
|
|
||||||
// materialgroupObj.index = index
|
|
||||||
// this.materialgroupObj = materialgroupObj
|
|
||||||
// this.materialgroupObjId = materialgroupObj.id
|
|
||||||
// this.page.currentPage = 1
|
|
||||||
// this.page.total = 0
|
|
||||||
// if (materialgroupObj.id != '-1') {
|
|
||||||
// this.groupId = materialgroupObj.id
|
|
||||||
// } else {
|
|
||||||
// this.groupId = null
|
|
||||||
// }
|
|
||||||
// this.getPage(this.page)
|
|
||||||
// },
|
|
||||||
// getPage(page, params) {
|
|
||||||
// this.tableLoading = true
|
|
||||||
// getPage(
|
|
||||||
// Object.assign(
|
|
||||||
// {
|
|
||||||
// page: page.currentPage - 1,
|
|
||||||
// size: page.pageSize,
|
|
||||||
// descs: this.page.descs,
|
|
||||||
// ascs: this.page.ascs,
|
|
||||||
// sort: 'create_time,desc'
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// groupId: this.groupId
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
// )
|
|
||||||
// .then((response) => {
|
|
||||||
// const tableData = response.content
|
|
||||||
// this.page.total = response.totalElements
|
|
||||||
// this.page.currentPage = page.currentPage
|
|
||||||
// this.page.pageSize = page.pageSize
|
|
||||||
// this.tableData = tableData
|
|
||||||
// this.tableLoading = false
|
|
||||||
// })
|
|
||||||
// .catch(() => {
|
|
||||||
// this.tableLoading = false
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// sizeChange(val) {
|
|
||||||
// console.log(val)
|
|
||||||
// this.page.currentPage = 1
|
|
||||||
// this.page.pageSize = val
|
|
||||||
// this.getPage(this.page)
|
|
||||||
// },
|
|
||||||
// pageChange(val) {
|
|
||||||
// console.log(val)
|
|
||||||
// this.page.currentPage = val
|
|
||||||
// // this.page.pageSize = val
|
|
||||||
// this.getPage(this.page)
|
|
||||||
// },
|
|
||||||
// materialRename(item) {
|
|
||||||
// const that = this
|
|
||||||
// this.$prompt('请输入素材名', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// inputValue: item.name
|
|
||||||
// })
|
|
||||||
// .then(({ value }) => {
|
|
||||||
// putObj({
|
|
||||||
// id: item.id,
|
|
||||||
// name: value
|
|
||||||
// }).then(function () {
|
|
||||||
// that.getPage(that.page)
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// .catch(() => {})
|
|
||||||
// },
|
|
||||||
// materialUrl(item) {
|
|
||||||
// const that = this
|
|
||||||
// this.$prompt('素材链接', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// inputValue: item.url
|
|
||||||
// })
|
|
||||||
// .then(({ value }) => {})
|
|
||||||
// .catch(() => {})
|
|
||||||
// },
|
|
||||||
// materialDel(item) {
|
|
||||||
// const that = this
|
|
||||||
// this.$confirm('是否确认删除该素材？', '提示', {
|
|
||||||
// confirmButtonText: '确定',
|
|
||||||
// cancelButtonText: '取消',
|
|
||||||
// type: 'warning'
|
|
||||||
// }).then(function () {
|
|
||||||
// delObj(item.id).then(function () {
|
|
||||||
// that.getPage(that.page)
|
|
||||||
// })
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// handleCommand(command) {
|
|
||||||
// const that = this
|
|
||||||
// const s = command.split('-')
|
|
||||||
// putObj({
|
|
||||||
// id: s[0],
|
|
||||||
// groupId: s[1]
|
|
||||||
// }).then(function () {
|
|
||||||
// that.getPage(that.page)
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
handleProgress(event, file, fileList) {
|
|
||||||
console.log(event)
|
|
||||||
// let uploadProgress = file.percentage.toFixed(0)
|
|
||||||
// this.uploadProgress = uploadProgress
|
|
||||||
},
|
|
||||||
handleSuccess(response, file, fileList) {
|
|
||||||
const that = this
|
|
||||||
this.uploadProgress = 0
|
|
||||||
addObj({
|
|
||||||
type: '1',
|
|
||||||
groupId: this.groupId != '-1' ? this.groupId : null,
|
|
||||||
name: file.name,
|
|
||||||
url: response.link
|
|
||||||
}).then(() => {
|
|
||||||
this.resultNumber++
|
|
||||||
if (fileList.length === this.resultNumber) {
|
|
||||||
that.getPage(that.page)
|
|
||||||
this.resultNumber = 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeUpload(file) {
|
|
||||||
const isPic =
|
|
||||||
file.type === 'image/jpeg' ||
|
|
||||||
file.type === 'image/png' ||
|
|
||||||
file.type === 'image/gif' ||
|
|
||||||
file.type === 'image/jpg'
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 2
|
|
||||||
if (!isPic) {
|
|
||||||
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (!isLt2M) {
|
|
||||||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
||||||
}
|
|
||||||
return isPic && isLt2M
|
|
||||||
},
|
|
||||||
sureUrls() {
|
|
||||||
this.urls.forEach((item) => {
|
|
||||||
this.$set(this.value, this.value.length, item)
|
|
||||||
})
|
|
||||||
this.listDialogVisible = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .el-icon-circle-close {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.material-name {
|
|
||||||
padding: 8px 0px;
|
|
||||||
}
|
|
||||||
.col-do {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.button-do {
|
|
||||||
padding: unset !important;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
-->
|
|
||||||
@ -1,402 +0,0 @@
|
|||||||
<!-- <template>
|
|
||||||
<div>
|
|
||||||
<ul
|
|
||||||
v-for="(item, index) in value"
|
|
||||||
:key="index"
|
|
||||||
class="el-upload-list el-upload-list--picture-card"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
tabindex="0"
|
|
||||||
class="el-upload-list__item is-ready"
|
|
||||||
:style="'width: ' + width + 'px;height: ' + height + 'px'"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<img :src="item" alt="" class="el-upload-list__item-thumbnail" />
|
|
||||||
<span class="el-upload-list__item-actions">
|
|
||||||
<span
|
|
||||||
v-if="index != 0"
|
|
||||||
class="el-upload-list__item-preview"
|
|
||||||
@click="moveMaterial(index, 'up')"
|
|
||||||
>
|
|
||||||
<i class="el-icon-back" ></i>
|
|
||||||
</span>
|
|
||||||
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
|
|
||||||
<i class="el-icon-view" ></i>
|
|
||||||
</span>
|
|
||||||
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
|
|
||||||
<i class="el-icon-delete" ></i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="index != value.length - 1"
|
|
||||||
class="el-upload-list__item-preview"
|
|
||||||
@click="moveMaterial(index, 'down')"
|
|
||||||
>
|
|
||||||
<i class="el-icon-right" ></i>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div
|
|
||||||
v-if="num > value.length"
|
|
||||||
tabindex="0"
|
|
||||||
class="el-upload el-upload--picture-card"
|
|
||||||
:style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
|
|
||||||
@click="toSeleteMaterial"
|
|
||||||
>
|
|
||||||
<i class="el-icon-plus"></i>
|
|
||||||
eee
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dialog append-to-body v-model="dialogVisible" width="35%">
|
|
||||||
<img :src="url" alt="" style="width: 100%" />
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<el-dialog title="图片素材库" append-to-body v-model="listDialogVisible" width="70%">
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="unset">
|
|
||||||
<div style="margin-bottom: 10px">
|
|
||||||
<el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">
|
|
||||||
添加分组
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-tabs
|
|
||||||
v-model="materialgroupObjId"
|
|
||||||
v-loading="materialgroupLoading"
|
|
||||||
tab-position="left"
|
|
||||||
@tab-click="tabClick"
|
|
||||||
>
|
|
||||||
<el-tab-pane v-for="(item) in materialgroupList" :key="item.id" :name="item.id">
|
|
||||||
<span > {{ item.name }}</span>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</el-aside>
|
|
||||||
<el-main>
|
|
||||||
<el-card>
|
|
||||||
<template v-slot:header>
|
|
||||||
<div>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12">
|
|
||||||
<span>{{ materialgroupObj.name }}</span>
|
|
||||||
<span v-if="materialgroupObj.id != '-1'">
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
class="el-icon-edit"
|
|
||||||
style="margin-left: 10px"
|
|
||||||
@click="materialgroupEdit(materialgroupObj)"
|
|
||||||
>重命名</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
class="el-icon-delete"
|
|
||||||
style="margin-left: 10px; color: red"
|
|
||||||
@click="materialgroupDelete(materialgroupObj)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" style="text-align: right">
|
|
||||||
<el-upload
|
|
||||||
:action="updateUrl"
|
|
||||||
:headers="uploadHeaders"
|
|
||||||
:file-list="[]"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:on-success="uploadSuccess"
|
|
||||||
:on-error="uploadError"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:data="{ type: 1 }"
|
|
||||||
multiple
|
|
||||||
>
|
|
||||||
<el-button size="small" type="primary">批量上传</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div v-loading="tableLoading">
|
|
||||||
<el-alert
|
|
||||||
v-if="tableData.length <= 0"
|
|
||||||
title="暂无数据"
|
|
||||||
type="info"
|
|
||||||
:closable="false"
|
|
||||||
center
|
|
||||||
show-icon
|
|
||||||
/>
|
|
||||||
<el-row :gutter="5">
|
|
||||||
<el-checkbox-group v-model="urls" :max="num - value.length">
|
|
||||||
<el-col v-for="(item, index) in tableData" :key="index" :span="4">
|
|
||||||
<el-card :body-style="{ padding: '5px' }">
|
|
||||||
<el-image
|
|
||||||
style="width: 100%; height: 100px"
|
|
||||||
:src="item.url"
|
|
||||||
fit="contain"
|
|
||||||
:preview-src-list="[item.url]"
|
|
||||||
:z-index="9999"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<el-checkbox class="material-name" :label="item.url"> 选择 </el-checkbox>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24" class="col-do">
|
|
||||||
<el-button type="text" size="medium" @click="materialDel(item)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-row>
|
|
||||||
<el-pagination
|
|
||||||
:modal:current-page="page.currentPage"
|
|
||||||
:page-sizes="[12, 24]"
|
|
||||||
:page-size="page.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="page.total"
|
|
||||||
class="pagination"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@current-change="pageChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-main>
|
|
||||||
</el-container>
|
|
||||||
<template v-slot:header>
|
|
||||||
<span class="dialog-footer">
|
|
||||||
<el-button @click="listDialogVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="sureUrls">确 定</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="Materials">
|
|
||||||
//import * as MaterialGroupApi from '@/api/mall/shop/materialGroup'
|
|
||||||
import { propTypes } from '@/utils/propTypes'
|
|
||||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
||||||
import { ElNotification } from 'element-plus'
|
|
||||||
import type { UploadProps, UploadFile, UploadUserFile } from 'element-plus'
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
|
||||||
|
|
||||||
type FileTypes =
|
|
||||||
| 'image/apng'
|
|
||||||
| 'image/bmp'
|
|
||||||
| 'image/gif'
|
|
||||||
| 'image/jpeg'
|
|
||||||
| 'image/pjpeg'
|
|
||||||
| 'image/png'
|
|
||||||
| 'image/svg+xml'
|
|
||||||
| 'image/tiff'
|
|
||||||
| 'image/webp'
|
|
||||||
| 'image/x-icon'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
//type: Array as PropType<string[]>,
|
|
||||||
type: Array as PropType<UploadUserFile[]>,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传（默认为 5M）
|
|
||||||
fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']),
|
|
||||||
updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
|
|
||||||
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
|
|
||||||
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
|
|
||||||
num: propTypes.number.def(5) // 最大图片上传数 ==> 非必传（默认为 5张）
|
|
||||||
})
|
|
||||||
|
|
||||||
const value = ref(props.modelValue)
|
|
||||||
let dialogVisible = ref(false)
|
|
||||||
let url = ref("")
|
|
||||||
let listDialogVisible = ref(false)
|
|
||||||
let materialgroupList = ref([])
|
|
||||||
let materialgroupObjId = ref("")
|
|
||||||
let materialgroupObj = reactive({})
|
|
||||||
let materialgroupLoading = ref(false)
|
|
||||||
let tableData = ref([])
|
|
||||||
//let resultNumber = ref(0)
|
|
||||||
let tableLoading = ref(false)
|
|
||||||
//let groupId = ref(0)
|
|
||||||
let urls = ref([])
|
|
||||||
|
|
||||||
|
|
||||||
const page = reactive({
|
|
||||||
total: 0, // 总页数
|
|
||||||
currentPage: 1, // 当前页数
|
|
||||||
pageSize: 12, // 每页显示多少条
|
|
||||||
ascs: [], // 升序字段
|
|
||||||
descs: 'create_time' // 降序字段
|
|
||||||
})
|
|
||||||
|
|
||||||
const moveMaterial = (index: number, type: string) => {
|
|
||||||
if (type == 'up') {
|
|
||||||
const tempOption = props.modelValue[index - 1]
|
|
||||||
props.modelValue[index - 1] = props.modelValue[index]
|
|
||||||
props.modelValue[index] = tempOption
|
|
||||||
//this.$set(this.value, index - 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
if (type == 'down') {
|
|
||||||
const tempOption = props.modelValue[index + 1]
|
|
||||||
props.modelValue[index +1] = props.modelValue[index]
|
|
||||||
props.modelValue[index] = tempOption
|
|
||||||
// this.$set(this.value, index + 1, this.value[index])
|
|
||||||
// this.$set(this.value, index, tempOption)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const zoomMaterial = (index: number) => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
console.log(index)
|
|
||||||
// url.value = props.modelValue[index]
|
|
||||||
//this.url = this.value[index]
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteMaterial = (index: number) => {
|
|
||||||
console.log(index)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toSeleteMaterial = () => {
|
|
||||||
listDialogVisible.value = true
|
|
||||||
if (tableData.value.length <= 0) {
|
|
||||||
materialgroupPage()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupPage = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupDelete = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupEdit = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const materialgroupAdd = () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabClick = () => {
|
|
||||||
// urls.value = []
|
|
||||||
// const index = Number(tab.index)
|
|
||||||
// const materialgroupObj = materialgroupList.value[index]
|
|
||||||
// materialgroupObj.index = index
|
|
||||||
// materialgroupObj.value = materialgroupObj
|
|
||||||
// materialgroupObjId.value = materialgroupObj.id
|
|
||||||
// page.currentPage = 1
|
|
||||||
// page.total = 0
|
|
||||||
// if (materialgroupObj.id != '-1') {
|
|
||||||
// groupId.value = materialgroupObj.id
|
|
||||||
// } else {
|
|
||||||
// groupId.value = null
|
|
||||||
// }
|
|
||||||
// materialgroupPage(page.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// const getPage = () => {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
const sizeChange = (val: number) => {
|
|
||||||
console.log(val)
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageChange = (val: number) => {
|
|
||||||
console.log(val)
|
|
||||||
}
|
|
||||||
|
|
||||||
// const materialRename = (item: object) => {
|
|
||||||
// console.log(item)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const materialUrl = (item: object) => {
|
|
||||||
// console.log(item)
|
|
||||||
// }
|
|
||||||
const materialDel = (item: object) => {
|
|
||||||
console.log(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const uploadHeaders = ref({
|
|
||||||
Authorization: 'Bearer ' + getAccessToken(),
|
|
||||||
'tenant-id': getTenantId()
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const fileList = ref<UploadUserFile[]>(props.modelValue)
|
|
||||||
/**
|
|
||||||
* @description 文件上传之前判断
|
|
||||||
* @param rawFile 上传的文件
|
|
||||||
* */
|
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
||||||
const imgSize = rawFile.size / 1024 / 1024 < props.fileSize
|
|
||||||
const imgType = props.fileType
|
|
||||||
if (!imgType.includes(rawFile.type as FileTypes))
|
|
||||||
ElNotification({
|
|
||||||
title: '温馨提示',
|
|
||||||
message: '上传图片不符合所需的格式！',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
if (!imgSize)
|
|
||||||
ElNotification({
|
|
||||||
title: '温馨提示',
|
|
||||||
message: `上传图片大小不能超过 ${props.fileSize}M！`,
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return imgType.includes(rawFile.type as FileTypes) && imgSize
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图片上传成功
|
|
||||||
interface UploadEmits {
|
|
||||||
(e: 'update:modelValue', value: UploadUserFile[]): void
|
|
||||||
}
|
|
||||||
const emit = defineEmits<UploadEmits>()
|
|
||||||
const uploadSuccess = (response, uploadFile: UploadFile) => {
|
|
||||||
if (!response) return
|
|
||||||
uploadFile.url = response.data
|
|
||||||
emit('update:modelValue', fileList.value)
|
|
||||||
message.success('上传成功')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图片上传错误提示
|
|
||||||
const uploadError = () => {
|
|
||||||
ElNotification({
|
|
||||||
title: '温馨提示',
|
|
||||||
message: '图片上传失败，请您重新上传！',
|
|
||||||
type: 'error'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 文件数超出提示
|
|
||||||
const handleExceed = () => {
|
|
||||||
ElNotification({
|
|
||||||
title: '温馨提示',
|
|
||||||
message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .el-icon-circle-close {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.material-name {
|
|
||||||
padding: 8px 0px;
|
|
||||||
}
|
|
||||||
.col-do {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.button-do {
|
|
||||||
padding: unset !important;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
-->
|
|
||||||
9
src/components/Materials/index.ts
Normal file
9
src/components/Materials/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/*
|
||||||
|
* @Author: Gaoxs
|
||||||
|
* @Date: 2023-05-21 23:36:03
|
||||||
|
* @LastEditors: Gaoxs
|
||||||
|
* @Description:
|
||||||
|
*/
|
||||||
|
import Materials from './src/Materials.vue'
|
||||||
|
|
||||||
|
export default Materials
|
||||||
514
src/components/Materials/src/Materials.vue
Normal file
514
src/components/Materials/src/Materials.vue
Normal file
@ -0,0 +1,514 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="type == 'image'">
|
||||||
|
<ul
|
||||||
|
v-for="(item, index) in value"
|
||||||
|
:key="index"
|
||||||
|
class="el-upload-list el-upload-list--picture-card"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
tabindex="0"
|
||||||
|
class="el-upload-list__item is-ready"
|
||||||
|
:style="'width: ' + width + 'px;height: ' + height + 'px'"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img :src="item" alt="" class="el-upload-list__item-thumbnail" />
|
||||||
|
<span class="el-upload-list__item-actions">
|
||||||
|
<span
|
||||||
|
v-if="index != 0"
|
||||||
|
class="el-upload-list__item-preview"
|
||||||
|
@click="moveMaterial(index, 'up')"
|
||||||
|
>
|
||||||
|
<i class="el-icon-back"></i>
|
||||||
|
</span>
|
||||||
|
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
|
||||||
|
<i class="el-icon-view"></i>
|
||||||
|
</span>
|
||||||
|
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="index != value.length - 1"
|
||||||
|
class="el-upload-list__item-preview"
|
||||||
|
@click="moveMaterial(index, 'down')"
|
||||||
|
>
|
||||||
|
<i class="el-icon-right"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
v-if="num > value.length"
|
||||||
|
tabindex="0"
|
||||||
|
class="el-upload el-upload--picture-card"
|
||||||
|
:style="'width: ' + width + 'px;height: ' + height + 'px;' + 'line-height:' + height + 'px;'"
|
||||||
|
@click="toSeleteMaterial"
|
||||||
|
>
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="图片素材库" append-to-body v-model="listDialogVisible" width="70%">
|
||||||
|
<el-container>
|
||||||
|
<el-aside width="100px">
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<el-button class="el-icon-plus" size="small" @click="handleMaterialgroupAdd()">
|
||||||
|
添加分组
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-tabs
|
||||||
|
v-model="materialgroupObjId"
|
||||||
|
v-loading="materialgroupLoading"
|
||||||
|
tab-position="left"
|
||||||
|
@tab-click="tabClick"
|
||||||
|
>
|
||||||
|
<el-tab-pane v-for="item in materialgroupList" :key="item.id" :name="item.id">
|
||||||
|
<template #label>
|
||||||
|
<span> {{ item.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-aside>
|
||||||
|
<el-main>
|
||||||
|
<el-card>
|
||||||
|
<template #header>
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<span>{{ materialgroupObj.name }}</span>
|
||||||
|
<span v-if="materialgroupObj.id != '-1'">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="text"
|
||||||
|
class="el-icon-edit"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
@click="handleMaterialgroupEdit(materialgroupObj)"
|
||||||
|
>重命名</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="text"
|
||||||
|
class="el-icon-delete"
|
||||||
|
style="margin-left: 10px; color: red"
|
||||||
|
@click="materialgroupDelete(materialgroupObj)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" style="text-align: right">
|
||||||
|
<el-upload
|
||||||
|
:action="uploadApi"
|
||||||
|
:headers="headers"
|
||||||
|
:file-list="[]"
|
||||||
|
:on-progress="handleProgress"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
:on-success="handleSuccess"
|
||||||
|
:data="{ type: 1 }"
|
||||||
|
multiple
|
||||||
|
>
|
||||||
|
<el-button size="small" type="primary">批量上传</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-loading="tableLoading">
|
||||||
|
<el-alert
|
||||||
|
v-if="tableData.length <= 0"
|
||||||
|
title="暂无数据"
|
||||||
|
type="info"
|
||||||
|
:closable="false"
|
||||||
|
center
|
||||||
|
show-icon
|
||||||
|
/>
|
||||||
|
<el-checkbox-group v-model="urls" :max="num - value.length">
|
||||||
|
<el-row :gutter="5">
|
||||||
|
<el-col v-for="(item, index) in tableData" :key="index" :span="4">
|
||||||
|
<el-card :body-style="{ padding: '5px' }">
|
||||||
|
<el-image
|
||||||
|
style="width: 100%; height: 100px"
|
||||||
|
:src="item.url"
|
||||||
|
fit="contain"
|
||||||
|
:preview-src-list="[item.url]"
|
||||||
|
:z-index="9999"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<el-checkbox class="material-name" :label="item.url"> 选择 </el-checkbox>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24" class="col-do">
|
||||||
|
<el-button type="text" size="medium" @click="materialDel(item)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page.currentPage"
|
||||||
|
:page-sizes="[12, 24]"
|
||||||
|
:page-size="page.pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="page.total"
|
||||||
|
class="pagination"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="pageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="listDialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="sureUrls">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import {
|
||||||
|
getList as materialgroupPage,
|
||||||
|
addObj as materialgroupAdd,
|
||||||
|
delObj as materialgroupDel,
|
||||||
|
putObj as materialgroupEdit
|
||||||
|
} from '@/api/tools/materialgroup'
|
||||||
|
import { getPage, addObj, delObj } from '@/api/tools/material'
|
||||||
|
// import { getToken } from '@/utils/auth'
|
||||||
|
// import { useStore } from 'vuex'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 素材类型
|
||||||
|
type: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
// 素材限制数量，默认5个
|
||||||
|
num: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 宽度
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 150
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 宽度
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default() {
|
||||||
|
return 150
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const headers = ref({
|
||||||
|
// Authorization: getToken()
|
||||||
|
})
|
||||||
|
const value = ref(props.value)
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const url = ref('')
|
||||||
|
const listDialogVisible = ref(false)
|
||||||
|
const listDialogVisible2 = ref(false)
|
||||||
|
const materialgroupList = ref([])
|
||||||
|
const materialgroupObjId = ref('')
|
||||||
|
const materialgroupObj = ref({})
|
||||||
|
const materialgroupLoading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const resultNumber = ref(0)
|
||||||
|
const page = ref({
|
||||||
|
total: 0, // 总页数
|
||||||
|
currentPage: 1, // 当前页数
|
||||||
|
pageSize: 12, // 每页显示多少条
|
||||||
|
ascs: [], // 升序字段
|
||||||
|
descs: 'create_time' // 降序字段
|
||||||
|
})
|
||||||
|
const tableLoading = ref(false)
|
||||||
|
const groupId = ref(null)
|
||||||
|
const urls = ref([])
|
||||||
|
|
||||||
|
// const store = useStore()
|
||||||
|
|
||||||
|
const uploadApi = import.meta.env.VITE_UPLOAD_URL
|
||||||
|
|
||||||
|
function moveMaterial(index, type) {
|
||||||
|
if (type == 'up') {
|
||||||
|
const tempOption = value.value[index - 1]
|
||||||
|
value.value[index - 1] = value.value[index]
|
||||||
|
value.value[index] = tempOption
|
||||||
|
}
|
||||||
|
if (type == 'down') {
|
||||||
|
const tempOption = value.value[index + 1]
|
||||||
|
value.value[index + 1] = value.value[index]
|
||||||
|
value.value[index] = tempOption
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function zoomMaterial(index) {
|
||||||
|
dialogVisible.value = true
|
||||||
|
url.value = value.value[index]
|
||||||
|
}
|
||||||
|
function deleteMaterial(index) {
|
||||||
|
// 修改为新的提示
|
||||||
|
ElMessageBox.confirm('是否确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(function () {
|
||||||
|
value.value.splice(index, 1)
|
||||||
|
urls.value = []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function toSeleteMaterial() {
|
||||||
|
listDialogVisible.value = true
|
||||||
|
listDialogVisible2.value = true
|
||||||
|
if (tableData.value.length <= 0) {
|
||||||
|
getMaterialgroupPage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getMaterialgroupPage() {
|
||||||
|
materialgroupLoading.value = true
|
||||||
|
materialgroupPage({
|
||||||
|
total: 0, // 总页数
|
||||||
|
page: 1, // 当前页数
|
||||||
|
size: 100, // 每页显示多少条
|
||||||
|
ascs: [], // 升序字段
|
||||||
|
sort: 'create_time,desc' // 降序字段
|
||||||
|
}).then((response) => {
|
||||||
|
materialgroupLoading.value = false
|
||||||
|
materialgroupList.value = response
|
||||||
|
materialgroupList.value.unshift({
|
||||||
|
id: '-1',
|
||||||
|
name: '全部分组'
|
||||||
|
})
|
||||||
|
|
||||||
|
tabClick({
|
||||||
|
index: 0
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function materialgroupDelete(materialgroupObj) {
|
||||||
|
ElMessageBox.confirm('是否确认删除该分组？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(function () {
|
||||||
|
materialgroupDel(materialgroupObj.id).then(function () {
|
||||||
|
getMaterialgroupPage()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleMaterialgroupEdit(materialgroupObj) {
|
||||||
|
ElMessageBox.prompt('请输入分组名', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
inputValue: materialgroupObj.name
|
||||||
|
})
|
||||||
|
.then(({ value }) => {
|
||||||
|
materialgroupEdit({
|
||||||
|
id: materialgroupObj.id,
|
||||||
|
name: value
|
||||||
|
}).then(function () {
|
||||||
|
materialgroupObj.name = value
|
||||||
|
materialgroupList.value[materialgroupObj.index] = materialgroupObj
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
function handleMaterialgroupAdd() {
|
||||||
|
ElMessageBox.prompt('请输入分组名', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消'
|
||||||
|
})
|
||||||
|
.then(({ value }) => {
|
||||||
|
materialgroupAdd({
|
||||||
|
name: value
|
||||||
|
}).then(function () {
|
||||||
|
getMaterialgroupPage()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
function tabClick(tab) {
|
||||||
|
urls.value = []
|
||||||
|
const index = Number(tab.index)
|
||||||
|
materialgroupObj.value = materialgroupList.value[index]
|
||||||
|
|
||||||
|
console.log('🚀 ~ file: Materials.vue:351 ~ tabClick ~ materialgroupObj:', materialgroupObj)
|
||||||
|
|
||||||
|
materialgroupObj.value.index = index
|
||||||
|
materialgroupObjId.value = materialgroupObj.value.id
|
||||||
|
|
||||||
|
page.value.currentPage = 1
|
||||||
|
page.value.total = 0
|
||||||
|
if (materialgroupObj.value.id != '-1') {
|
||||||
|
groupId.value = materialgroupObj.value.id
|
||||||
|
} else {
|
||||||
|
groupId.value = null
|
||||||
|
}
|
||||||
|
getMaterialPage(page.value)
|
||||||
|
}
|
||||||
|
function getMaterialPage(initPage) {
|
||||||
|
tableLoading.value = true
|
||||||
|
getPage(
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
page: initPage.currentPage - 1,
|
||||||
|
size: initPage.pageSize,
|
||||||
|
descs: initPage.descs,
|
||||||
|
ascs: initPage.ascs,
|
||||||
|
sort: 'create_time,desc'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupId: groupId.value
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.then((response) => {
|
||||||
|
console.log('🚀 ~ file: Materials.vue:382 ~ .then ~ response:', response.list)
|
||||||
|
console.log('🚀 ~ file: Materials.vue:382 ~ .then ~ response:', response.total)
|
||||||
|
page.value.total = response.total
|
||||||
|
page.value.currentPage = initPage.currentPage
|
||||||
|
page.value.pageSize = initPage.pageSize
|
||||||
|
tableData.value = response.list
|
||||||
|
console.log('🚀 ~ file: Materials.vue:387 ~ .then ~ tableData.value:', tableData.value)
|
||||||
|
tableLoading.value = false
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('🚀 ~ file: Materials.vue:391 ~ getMaterialPage ~ error:', error)
|
||||||
|
tableLoading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function sizeChange(val) {
|
||||||
|
console.log(val)
|
||||||
|
page.value.currentPage = 1
|
||||||
|
page.value.pageSize = val
|
||||||
|
getMaterialPage(this.page)
|
||||||
|
}
|
||||||
|
function pageChange(val) {
|
||||||
|
console.log(val)
|
||||||
|
page.value.currentPage = val
|
||||||
|
// this.page.pageSize = val
|
||||||
|
getMaterialPage(page.value)
|
||||||
|
}
|
||||||
|
// function materialRename(item) {
|
||||||
|
// ElMessageBox.prompt('请输入素材名', '提示', {
|
||||||
|
// confirmButtonText: '确定',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// inputValue: item.name
|
||||||
|
// })
|
||||||
|
// .then(({ value }) => {
|
||||||
|
// putObj({
|
||||||
|
// id: item.id,
|
||||||
|
// name: value
|
||||||
|
// }).then(function () {
|
||||||
|
// getMaterialPage(page.value)
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// .catch(() => {})
|
||||||
|
// }
|
||||||
|
// function materialUrl(item) {
|
||||||
|
// ElMessageBox.prompt('素材链接', '提示', {
|
||||||
|
// confirmButtonText: '确定',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// inputValue: item.url
|
||||||
|
// })
|
||||||
|
// .then(({ value }) => {})
|
||||||
|
// .catch(() => {})
|
||||||
|
// }
|
||||||
|
function materialDel(item) {
|
||||||
|
ElMessageBox.confirm('是否确认删除该素材？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(function () {
|
||||||
|
delObj(item.id).finally(function () {
|
||||||
|
console.log('getMaterialPage')
|
||||||
|
getMaterialPage(page.value)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// function handleCommand(command) {
|
||||||
|
// const s = command.split('-')
|
||||||
|
// putObj({
|
||||||
|
// id: s[0],
|
||||||
|
// groupId: s[1]
|
||||||
|
// }).then(function () {
|
||||||
|
// getMaterialPage(page.value)
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
function handleProgress(event) {
|
||||||
|
console.log(event)
|
||||||
|
// let uploadProgress = file.percentage.toFixed(0)
|
||||||
|
// this.uploadProgress = uploadProgress
|
||||||
|
}
|
||||||
|
function handleSuccess(response, file, fileList) {
|
||||||
|
addObj({
|
||||||
|
type: '1',
|
||||||
|
groupId: groupId.value != '-1' ? groupId.value : null,
|
||||||
|
name: file.name,
|
||||||
|
url: response.link
|
||||||
|
}).then(() => {
|
||||||
|
resultNumber.value++
|
||||||
|
if (fileList.length === resultNumber.value) {
|
||||||
|
getMaterialPage(page.value)
|
||||||
|
resultNumber.value = 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function beforeUpload(file) {
|
||||||
|
const isPic =
|
||||||
|
file.type === 'image/jpeg' ||
|
||||||
|
file.type === 'image/png' ||
|
||||||
|
file.type === 'image/gif' ||
|
||||||
|
file.type === 'image/jpg'
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2
|
||||||
|
if (!isPic) {
|
||||||
|
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||||||
|
}
|
||||||
|
return isPic && isLt2M
|
||||||
|
}
|
||||||
|
function sureUrls() {
|
||||||
|
urls.value.forEach((item) => {
|
||||||
|
value.value[value.value.length] = item
|
||||||
|
})
|
||||||
|
listDialogVisible.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.el-icon-circle-close {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-name {
|
||||||
|
padding: 8px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-do {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-do {
|
||||||
|
padding: unset !important;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -9,6 +9,16 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
|
||||||
|
<ContentWrap>
|
||||||
|
<MaterialList
|
||||||
|
v-model="form.coverImgArr"
|
||||||
|
style="width: 370px"
|
||||||
|
type="image"
|
||||||
|
:num="1"
|
||||||
|
:width="150"
|
||||||
|
:height="150"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
<ContentWrap>
|
<ContentWrap>
|
||||||
<el-tabs v-model="type" @tab-change="onTabChange">
|
<el-tabs v-model="type" @tab-change="onTabChange">
|
||||||
<!-- tab 1：图片 -->
|
<!-- tab 1：图片 -->
|
||||||
@ -91,10 +101,17 @@ import VoiceTable from './components/VoiceTable.vue'
|
|||||||
import VideoTable from './components/VideoTable.vue'
|
import VideoTable from './components/VideoTable.vue'
|
||||||
import UploadFile from './components/UploadFile.vue'
|
import UploadFile from './components/UploadFile.vue'
|
||||||
import UploadVideo from './components/UploadVideo.vue'
|
import UploadVideo from './components/UploadVideo.vue'
|
||||||
|
|
||||||
|
import MaterialList from '@/components/materials'
|
||||||
|
|
||||||
import { UploadType } from './components/upload'
|
import { UploadType } from './components/upload'
|
||||||
import * as MpMaterialApi from '@/api/mp/material'
|
import * as MpMaterialApi from '@/api/mp/material'
|
||||||
const message = useMessage() // 消息
|
const message = useMessage() // 消息
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
coverImgArr: null
|
||||||
|
}) // 遮罩层
|
||||||
|
|
||||||
const type = ref<UploadType>(UploadType.Image) // 素材类型
|
const type = ref<UploadType>(UploadType.Image) // 素材类型
|
||||||
const loading = ref(false) // 遮罩层
|
const loading = ref(false) // 遮罩层
|
||||||
const list = ref<any[]>([]) // 总条数
|
const list = ref<any[]>([]) // 总条数
|
||||||
|
|||||||
Reference in New Issue
Block a user