<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-09-26 15:25:23
|
* @FilePath: /smart-web/src/views/master/person/main/index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="main">
|
<div class="noData" v-if="latticeList.length == 0">
|
<div style="margin-bottom: 12px;">暂无数据</div>
|
<el-button type="primary" @click="table_create">新建</el-button>
|
</div>
|
<div v-if="latticeList.length != 0">
|
<!-- 一个格子 -->
|
<el-button type="primary" @click="create_list" style="margin-bottom: 12px;">新建</el-button>
|
<div v-for="(item,index) in latticeList">
|
<!-- 新增的值 -->
|
<div v-if="item.status != 1">
|
<el-input v-model="item.name" clearable style="width: 200px;" placeholder="请输入内容"></el-input>
|
<span class="add-sure" @click="addLattice(index)">确定</span>
|
<span class="cencel" @click="cencelLattice(index)">取消</span>
|
</div>
|
<!-- 反显的值 -->
|
<div v-if="item.status == 1">
|
<span class="title">{{item.name}}</span>
|
<span class="edit" @click="editData(index)"><el-icon><EditPen /></el-icon>编辑</span>
|
<span class="delData" @click="delData(index)">删除</span>
|
</div>
|
<div class="upload">
|
<el-upload
|
:disabled="!item.id"
|
:action="action"
|
:headers= "myHeader"
|
list-type="picture-card"
|
:show-file-list=false
|
:on-success="(file)=>handleAvatarSuccess(file,index)"
|
:before-upload="(file)=>beforeAvatarUpload(file,index)"
|
class="uploadStyle">
|
<el-icon><Plus /></el-icon>
|
</el-upload>
|
<div v-for="(item1,index1) in item.children" class="imgStyle">
|
<img :src="hostname + '/visual/' + item1.link" alt="">
|
<div class="img-edit">
|
<el-icon @click="viewUrl(item1)"><CirclePlus /></el-icon>
|
<el-icon @click="delUrl(item1)"><Delete /></el-icon>
|
</div>
|
</div>
|
<el-dialog v-model="dialogVisible" class="dialogImageUrl" :width="500">
|
<img :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
name: "supplier",
|
data(){
|
return {
|
dialogImageUrl: "",
|
action: "",
|
dialogVisible: false,
|
latticeList: [],
|
ImageUrlList: [],
|
myHeader: {},
|
hostname: ""
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.getTreeList();
|
//获取地址
|
this.$HTTP.get(`/api/blade-resource/oss/default`).then(res=> {
|
if(res.success) {
|
this.hostname = res.data;
|
}else {
|
this.$message.error(res.msg);
|
}
|
})
|
},
|
components: {
|
...ElementPlusIconsVue
|
},
|
methods: {
|
viewUrl(item1) {
|
this.dialogVisible = true;
|
this.dialogImageUrl = `${this.hostname}/visual/${item1.link}`;
|
},
|
delUrl(item1) {
|
this.$confirm(`删除`, '', {
|
type: 'warning'
|
}).then(() => {
|
this.$HTTP.delete(`/api/blade-system/gallery-item/remove`,[item1.id]).then(res => {
|
if (res.code === 200) {
|
this.$message.success("操作成功");
|
this.getTreeList();
|
}
|
})
|
}).catch(() => {
|
|
})
|
},
|
editData(index) {
|
this.latticeList[index].status = 0;
|
},
|
delData(index) {
|
this.$confirm('删除','提示', {
|
type: 'warning',
|
}).then(() => {
|
this.$HTTP.delete(`/api/blade-system/gallery/remove`,[this.latticeList[index].id]).then(res=> {
|
if(res.code == 200) {
|
this.getTreeList();
|
this.$message.success("操作成功");
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
}).catch(() => {
|
//取消
|
})
|
},
|
addLattice(index) {
|
var obj = {};
|
if(this.latticeList[index].id) {
|
Object.assign(obj,this.latticeList[index]);
|
obj.status = 1;
|
var method = "put";
|
var url = "/api/blade-system/gallery/update";
|
}else {
|
obj.name = this.latticeList[index].name;
|
var method = "post";
|
var url = "/api/blade-system/gallery/insert";
|
}
|
if (this.latticeList.some(item => item.name == "")) {
|
this.$message.error("图库名称不能为空！");
|
return;
|
}else {
|
this.$HTTP[method](url,obj).then(res=> {
|
if(res.code == 200) {
|
this.getTreeList();
|
}
|
})
|
}
|
},
|
getTreeList() {
|
this.$HTTP.get("/api/blade-system/gallery/tree?itemCount=999").then(res=> {
|
if(res.code == 200) {
|
this.latticeList = res.data;
|
}
|
})
|
},
|
cencelLattice(index) {
|
if(this.latticeList[index].id) {
|
this.latticeList[index].status = 1;
|
}else {
|
this.latticeList.splice(index,1);
|
}
|
},
|
beforeAvatarUpload(file,index) {
|
if(this.latticeList[index].id) {
|
var TOKEN = this.$TOOL.cookie.get("TOKEN")
|
this.action = `/api/blade-system/gallery-item/insert?galleryId=${this.latticeList[index].id}`;
|
this.myHeader = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
|
}else {
|
return false;
|
}
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePictureCardPreview(file) {
|
|
},
|
handleAvatarSuccess(file,index) {
|
this.latticeList[index].children.push(file.data);
|
},
|
table_create() {
|
this.latticeList.push({name: "",ImageUrlList: [],status: 0})
|
},
|
create_list() {
|
this.latticeList.unshift({name: "",ImageUrlList: [],status: 0})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.main {
|
border: 1px solid #dcdfe6;
|
box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
|
margin: 8px;
|
padding: 8px;
|
background-color: #fff;
|
min-height: 100%;
|
}
|
.noData {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 300px;
|
font-size: 16px;
|
color: #5e6d82;
|
}
|
.add-sure {
|
color: #409eff;
|
margin: 0 10px;
|
cursor: pointer;
|
}
|
.cencel {
|
cursor: pointer;
|
color: #fa554c;
|
}
|
.delData {
|
cursor: pointer;
|
color: #fa554c;
|
font-size: 14px;
|
font-weight: 700;
|
}
|
.edit {
|
color: #409eff;
|
font-size: 14px;
|
font-weight: 700;
|
cursor: pointer;
|
margin-right: 12px;
|
}
|
.title {
|
font-size: 16px;
|
font-weight: 700;
|
margin-right: 20px;
|
}
|
.upload {
|
margin-top: 12px;
|
margin-bottom: 12px;
|
}
|
.uploadStyle {
|
display: inline-block;
|
vertical-align: top;
|
}
|
.imgStyle {
|
display: inline-block;
|
margin-left: 12px;
|
position: relative;
|
}
|
.imgStyle:hover .img-edit {
|
display: inline-block;
|
}
|
.imgStyle img {
|
width: 148px;
|
height: 148px;
|
}
|
/deep/ .dialogImageUrl {
|
text-align: center;
|
}
|
.dialogImageUrl img {
|
width: 400px;
|
height: 400px;
|
}
|
.img-edit {
|
display: none;
|
vertical-align: top;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 148px;
|
height: 148px;
|
background-color: rgba(0,0,0,.4);
|
text-align: center;
|
line-height: 148px;
|
}
|
.img-edit i {
|
color: #fff;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
.img-edit i:nth-child(1) {
|
margin-right: 12px;
|
}
|
</style>
|
