This commit is contained in:
cookiemy 2024-06-29 17:35:42 +08:00
parent de1784480b
commit de78d556f9

View File

@ -10,12 +10,16 @@
<div v-for="(item, index) in tableData" :key="index" class="mb16"> <div v-for="(item, index) in tableData" :key="index" class="mb16">
<div class="common-form d-s-c"> <div class="common-form d-s-c">
<span>{{item.name}}</span> <span>{{ item.name }}</span>
</div> </div>
<div class="plus-list"> <div class="plus-list">
<div class="item" v-for="(child, num) in item.children" :key="num"> <div class="item" v-for="(child, num) in item.children" :key="num">
<div class="item-box pr"> <div class="item-box pr">
<a href="javascript:void(0);" class="close-btn" @click="deleteClick(child)"> <a
href="javascript:void(0);"
class="close-btn"
@click="deleteClick(child)"
>
<el-icon :size="20"> <el-icon :size="20">
<CloseBold /> <CloseBold />
</el-icon> </el-icon>
@ -23,17 +27,19 @@
<a> <a>
<span class="iconfont icon" :class="hasIcon(child.icon)"></span> <span class="iconfont icon" :class="hasIcon(child.icon)"></span>
<div class="ml10"> <div class="ml10">
<h3>{{child.name}}</h3> <h3>{{ child.name }}</h3>
<p>{{child.remark}}</p> <p>{{ child.remark }}</p>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="d-s-c mt10"> <div class="d-s-c mt10">
<div class="add-item-box d-c-c" @click="addClick(item)"> <el-icon> <div class="add-item-box d-c-c" @click="addClick(item)">
<el-icon>
<Plus /> <Plus />
</el-icon></div> </el-icon>
</div>
<div class="ml10"> <div class="ml10">
<p class="f14 gray9">添加插件到此类别下</p> <p class="f14 gray9">添加插件到此类别下</p>
</div> </div>
@ -42,19 +48,22 @@
</div> </div>
</div> </div>
<!--添加--> <!--添加-->
<Add v-if="open_add" :open_add="open_add" :curModel="curModel" @closeDialog="closeDialogFunc($event, 'add')"></Add> <Add
</div> v-if="open_add"
:open_add="open_add"
:curModel="curModel"
@closeDialog="closeDialogFunc($event, 'add')"
></Add>
</div>
</template> </template>
<script> <script>
import PlusApi from '@/api/plus.js'; import PlusApi from "@/api/plus.js";
import Add from './dialog/Add.vue'; import Add from "./dialog/Add.vue";
import { import { deepClone } from "@/utils/base.js";
deepClone export default {
} from '@/utils/base.js';
export default {
components: { components: {
Add Add,
}, },
data() { data() {
return { return {
@ -65,12 +74,12 @@
/*是否打开添加弹窗*/ /*是否打开添加弹窗*/
open_add: false, open_add: false,
/*当前编辑的对象*/ /*当前编辑的对象*/
curModel: {} curModel: {},
}; };
}, },
created() { created() {
/*获取列表*/ /*获取列表*/
this.getData(); // this.getData();
}, },
methods: { methods: {
/*获取列表*/ /*获取列表*/
@ -78,16 +87,15 @@
let self = this; let self = this;
let Params = {}; let Params = {};
PlusApi.pluslist(Params, true) PlusApi.pluslist(Params, true)
.then(res => { .then((res) => {
self.loading = false; self.loading = false;
self.tableData = res.data; self.tableData = res.data;
}) })
.catch(error => { .catch((error) => {
self.loading = false; self.loading = false;
}); });
}, },
/*打开添加*/ /*打开添加*/
addClick(e) { addClick(e) {
this.curModel = e; this.curModel = e;
@ -95,9 +103,9 @@
}, },
closeDialogFunc(e, f) { closeDialogFunc(e, f) {
if (f == 'add') { if (f == "add") {
this.open_add = e.openDialog; this.open_add = e.openDialog;
if (e.type == 'success') { if (e.type == "success") {
this.getData(); this.getData();
} }
} }
@ -105,29 +113,30 @@
/*删除插件*/ /*删除插件*/
deleteClick(row) { deleteClick(row) {
let self = this; let self = this;
ElMessageBox.confirm('删除后不可恢复,确认删除该记录吗?', '提示', { ElMessageBox.confirm("删除后不可恢复,确认删除该记录吗?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}) })
.then(() => { .then(() => {
self.loading = true; self.loading = true;
PlusApi.deleteplus({ PlusApi.deleteplus(
id: row.accessId {
id: row.accessId,
}, },
true true
) )
.then(data => { .then((data) => {
if (data.code == 1) { if (data.code == 1) {
self.loading = false; self.loading = false;
ElMessage({ ElMessage({
message: data.msg, message: data.msg,
type: 'success' type: "success",
}); });
self.getData(); self.getData();
} }
}) })
.catch(error => { .catch((error) => {
self.loading = false; self.loading = false;
}); });
}) })
@ -138,38 +147,38 @@
if (e != null && e.length > 0) { if (e != null && e.length > 0) {
return e; return e;
} else { } else {
return 'icon-chajian1'; return "icon-chajian1";
} }
} },
} },
}; };
</script> </script>
<style> <style>
.plus-container { .plus-container {
min-height: 400px; min-height: 400px;
} }
.plus-container .common-form .close-btn { .plus-container .common-form .close-btn {
color: #CCCCCC; color: #cccccc;
} }
.plus-list { .plus-list {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
.plus-list .item { .plus-list .item {
width: 25%; width: 25%;
} }
.plus-list .item .item-box { .plus-list .item .item-box {
margin: 0 10px 20px; margin: 0 10px 20px;
border: 1px solid #FFFFFF; border: 1px solid #ffffff;
} }
.plus-list .item .item-box .close-btn { .plus-list .item .item-box .close-btn {
position: absolute; position: absolute;
padding-left: 0; padding-left: 0;
width: 20px; width: 20px;
@ -178,48 +187,48 @@
right: 4px; right: 4px;
color: #ff0000; color: #ff0000;
display: none; display: none;
} }
.plus-list .item .item-box:hover { .plus-list .item .item-box:hover {
border-radius: 8px; border-radius: 8px;
border: 1px dashed #CCCCCC; border: 1px dashed #cccccc;
} }
.plus-list .item .item-box:hover .close-btn { .plus-list .item .item-box:hover .close-btn {
display: block; display: block;
} }
.plus-list .item .add-item-box { .plus-list .item .add-item-box {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: 20px; margin-left: 20px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #186eeb; border: 1px solid #186eeb;
} }
.plus-list .item a { .plus-list .item a {
display: flex; display: flex;
height: 60px; height: 60px;
padding-left: 10px; padding-left: 10px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.plus-list .item a h3 { .plus-list .item a h3 {
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
} }
.plus-list .item a:hover h3 { .plus-list .item a:hover h3 {
color: #3a8ee6; color: #3a8ee6;
} }
.plus-list .item a p { .plus-list .item a p {
font-size: 12px; font-size: 12px;
color: #999999; color: #999999;
} }
.plus-list .item .item-box .iconfont { .plus-list .item .item-box .iconfont {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -228,10 +237,10 @@
border-radius: 8px; border-radius: 8px;
line-height: 40px; line-height: 40px;
background: #3a8ee6; background: #3a8ee6;
} }
.plus-list .item a .icon.iconfont { .plus-list .item a .icon.iconfont {
color: #ffffff; color: #ffffff;
font-size: 22px font-size: 22px;
} }
</style> </style>