<template>
|
<div>
|
<v-header title="项目分类管理"></v-header>
|
|
<el-button size="small" type="primary" @click.stop="add('oneLevel')"
|
>新增</el-button
|
>
|
<div class="admin-content">
|
<el-collapse accordion>
|
<el-collapse-item v-for="(lie, index) in item" :key="index">
|
<template slot="title">
|
<span class="name">{{ lie.name }}</span>
|
<span class="btns">
|
<span class="fc-1" @click="add('twoLevel', lie.id)">新增</span
|
><span class="fc-2" @click="edit(lie.id)">编辑</span
|
><span class="fc-3" @click="deletes(lie.id)">删除</span>
|
</span>
|
</template>
|
<div
|
class="flex-s chilren-lie"
|
v-for="(chilren, i) in lie.comActColumnVOList"
|
:key="i"
|
>
|
<span>{{ chilren.name }}</span>
|
<span class="btns pointer">
|
<span class="fc-2" @click="edit(chilren.id)">编辑</span
|
><span class="fc-3" @click="deletes(chilren.id)">删除</span>
|
</span>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
|
<!--新增事件节点分类弹窗-->
|
<el-dialog
|
:title="title"
|
width="25%"
|
class="add-event-dialog"
|
:visible.sync="addEventdialogVisible"
|
center
|
append-to-body
|
size="tiny"
|
>
|
<el-form ref="addEventForm" :model="addEventForm" :rules="rules">
|
<el-form-item label="分类名称" prop="name" required>
|
<el-input v-model="addEventForm.name"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="描述" prop="categoryFlag">
|
<el-input type="textarea" v-model="addEventForm.categoryFlag"></el-input>
|
</el-form-item> -->
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="addEventdialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="addEventFormSubmitBtn('addEventForm')"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
<p class="back">
|
<el-button size="small" @click="$router.go(-1)">返回</el-button>
|
</p>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
title: "",
|
addEventdialogVisible: false,
|
addEventForm: {
|
id: 0,
|
name: "",
|
parentId: "",
|
status: "1",
|
type: 4,
|
updateTime: "",
|
},
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入分类名称",
|
trigger: "change",
|
},
|
],
|
},
|
item: [],
|
};
|
},
|
|
mounted() {
|
this.init();
|
},
|
|
methods: {
|
init() {
|
let params = {
|
id: 0,
|
name: "",
|
parentId: "0",
|
status: "0",
|
type: 4,
|
updateTime: "",
|
};
|
this.$api.post("comActColumn/queryLevel", params, (e) => {
|
this.item = e;
|
});
|
},
|
|
add(type, id) {
|
switch (type) {
|
case "oneLevel": {
|
this.addEventdialogVisible = true;
|
this.title = "新建一级分类";
|
this.addEventForm.parentId = "0";
|
break;
|
}
|
case "twoLevel": {
|
this.addEventdialogVisible = true;
|
this.title = "新建二级分类";
|
this.addEventForm.parentId = id;
|
this.addEventForm.name = "";
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
|
edit(id) {
|
this.addEventdialogVisible = true;
|
this.title = "编辑";
|
this.$api.get(`comActColumn/${id}`, {}, (e) => {
|
this.addEventForm = e;
|
});
|
},
|
|
deletes(id) {
|
this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$api.get("comActColumn/del", { id: id }, (e) => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
});
|
},
|
|
addEventFormSubmitBtn(formName) {
|
this.$refs[formName].validate((val) => {
|
if (val) {
|
if (this.title === "编辑") {
|
this.$api.post("comActColumn/update", this.addEventForm, (e) => {
|
demo.toast("编辑成功");
|
this.$refs[formName].resetFields(); // 重置表单
|
this.addEventdialogVisible = false;
|
this.addEventForm.name = "";
|
this.init();
|
});
|
} else {
|
this.$api.post("comActColumn", this.addEventForm, (e) => {
|
demo.toast("新增成功");
|
this.$refs[formName].resetFields(); // 重置表单
|
this.addEventForm.name = "";
|
this.addEventdialogVisible = false;
|
this.init();
|
});
|
}
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.add {
|
text-align: right;
|
}
|
.admin-content {
|
padding-top: 30px;
|
width: 700px;
|
height: 650px;
|
overflow: auto;
|
border-bottom: 1px #eaeaeb solid;
|
.name {
|
width: 60%;
|
}
|
.pointer {
|
span {
|
cursor: pointer;
|
}
|
}
|
.btns {
|
margin-left: 10px;
|
span {
|
margin-right: 10px;
|
}
|
.fc-1 {
|
color: #f56c6c;
|
}
|
.fc-2 {
|
color: #e6a23c;
|
}
|
.fc-3 {
|
color: #67c23a;
|
}
|
}
|
}
|
.flex-s {
|
display: flex;
|
justify-content: space-between;
|
}
|
.chilren-lie {
|
padding: 0 0 10px 20px;
|
}
|
/deep/.el-collapse-item__header {
|
display: flex;
|
justify-content: space-between;
|
}
|
.back {
|
padding-top: 30px;
|
}
|
</style>
|
