<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-06-05 17:06:58
|
* @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">
|
<div v-for="(item1,index1) in item.ImageUrlList">
|
<img :src="item1.url" alt="" @click="viewUrl(item1)">
|
</div>
|
<el-upload
|
:disabled="!item.id"
|
:action="action"
|
list-type="picture-card"
|
:on-success="(file)=>handleAvatarSuccess(file,index)"
|
:before-upload="(file)=>beforeAvatarUpload(file,index)">
|
<el-icon><Plus /></el-icon>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible">
|
<img width="100%" :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: [],
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.getTreeList();
|
},
|
components: {
|
...ElementPlusIconsVue
|
},
|
methods: {
|
viewUrl(item1) {
|
this.dialogVisible = true;
|
this.dialogImageUrl = item1.url;
|
},
|
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) {
|
this.action = `/api/blade-system/gallery-item/insert?galleryId=${this.latticeList[index].id}`;
|
}else {
|
return false;
|
}
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePictureCardPreview(file) {
|
|
},
|
handleAvatarSuccess(file,index) {
|
this.latticeList[index].ImageUrlList.push({
|
url: file.url
|
})
|
},
|
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;
|
}
|
</style>
|
