<template>
|
<div class="classificationSettings">
|
<!-- 头部搜索栏 -->
|
<v-header
|
title="分类设置"
|
:bar="bar"
|
search
|
@on-search="onSearch"
|
></v-header>
|
|
<div class="operation">
|
<!-- 批量删除 -->
|
<div class="Tips">
|
<i style="color: #409EFF" class="el-icon-info"></i>
|
<span class="Tips-cont"
|
>已选择<span>{{ ids.length }}</span
|
>项</span
|
>
|
<el-button class="cancel" type="text" @click="cancel">取消</el-button>
|
</div>
|
|
<!-- 新增 -->
|
<div class="add-btn">
|
<el-button size="medium" type="primary" @click="addClassification"
|
>新增</el-button
|
>
|
<el-button size="medium" type="primary" @click="clear()"
|
>批量删除</el-button
|
>
|
</div>
|
</div>
|
<!-- 表单 -->
|
<div style="padding-top: 10px">
|
<v-tool-table :trs="trs" :tds="tds" first firstWidth="50px">
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox
|
@change="change"
|
v-model="item.scope.che"
|
:disabled="
|
item.scope.communityId == '0' && item.scope.category != 4
|
"
|
></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button @click="details(scope)" type="text">查看</el-button>
|
<el-button @click="edit(scope)" type="text">修改</el-button>
|
<el-button type="text" @click="clear(scope.id)"
|
><span v-if="scope.communityId != '0'">删除</span></el-button
|
>
|
</template>
|
</v-tool-table>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
<!-- 修改弹框 -->
|
<EditModel
|
v-model="isShow"
|
:item="editData"
|
@change="(isShow = false), (editData = {})"
|
@success="onEditSuccess"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import EditModel from "./components/EditModel.vue";
|
export default {
|
components: { EditModel },
|
data() {
|
return {
|
bar: [
|
{
|
title: "分类编码/分类名词",
|
name: "keyWord"
|
}
|
],
|
tds: [],
|
keyWord: "",
|
search: {}, //用户搜索内容
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "分类编码", val: "id" },
|
{ text: "分类名称", val: "name" },
|
{ text: "创建人", val: "createBy" },
|
{ text: "创建时间", val: "createAt", width: "200px" },
|
{ text: "上次修改人", val: "updateBy" },
|
{ text: "上次修改时间", val: "updateAt", width: "200px" },
|
{ text: "操作", val: "btn", width: "150px" }
|
],
|
ids: [], //选中的id集合
|
alls: false, //全选状态
|
isShow: false,
|
editData: {},
|
paged: { page: 0, total: 0, r: 0, limit: 10 }, //分页
|
categoryId: ""
|
};
|
},
|
computed: {
|
submitStatus() {
|
return this.$store.state.pageReset.r;
|
},
|
editsStatus() {
|
return this.$store.state.pageReset.page;
|
}
|
},
|
watch: {
|
//新增成功后重新获取表单数据
|
submitStatus(newval, old) {
|
this.init();
|
},
|
//修改错误处理
|
editsStatus(newval, old) {
|
console.log(newval);
|
this.init();
|
}
|
},
|
|
mounted() {
|
this.categoryId = this.$route.query.id;
|
},
|
|
methods: {
|
onEditSuccess() {
|
this.init();
|
},
|
//分类搜索
|
onSearch(v) {
|
console.log(v);
|
this.keyWord = v.keyWord;
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
|
init() {
|
let parmas = {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
keyWord: this.keyWord,
|
category: this.categoryId // 1.社区动态 3.基务公开
|
};
|
if (this.categoryId == "2") {
|
parmas["area"] = 2;
|
}
|
this.$api.post("dyn/type/page", parmas, e => {
|
this.paged.total = e.total;
|
this.tds = e.records;
|
this.tds.map((item, index) => {
|
item.index = index + 1;
|
this.$set(item, "che", false);
|
});
|
});
|
},
|
|
cheAll() {
|
//全选
|
this.tds.map(item => {
|
item.che = this.alls;
|
});
|
this.change();
|
},
|
change() {
|
//单个选择
|
this.ids = [];
|
this.tds.map(item => {
|
if (item.che) {
|
this.ids.push(item.id);
|
} else {
|
this.alls = false;
|
}
|
});
|
},
|
//查看
|
details(v) {
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: { type: "dynamic-show", data: { v } },
|
time: Date.now()
|
});
|
},
|
//修改
|
edit(v) {
|
this.editData = v;
|
this.isShow = true;
|
// console.log(v)
|
// this.$store.dispatch("setFixed", {
|
// event: "add",
|
// data: { type: "dynamic-edits", data: { v } },
|
// time: Date.now(),
|
// });
|
},
|
//新增
|
addClassification() {
|
this.editData = {};
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: { type: "dynamic-add", data: { category: this.categoryId } },
|
time: Date.now()
|
});
|
},
|
|
//删除
|
clear(v) {
|
//批量删除判断是否勾选
|
if (!this.ids.length && !v) {
|
demo.toast("请勾选需要删除的分类");
|
return;
|
}
|
let t = this;
|
t.$js.model("提示", "确定要删除该分类吗？", res => {
|
if (res) {
|
if (v) {
|
t.ids = [v];
|
}
|
// console.log(t.ids)
|
// return
|
t.$api.post("dyn/type/delete", t.ids, e => {
|
demo.toast("删除成功");
|
t.ids = [];
|
t.init();
|
});
|
}
|
});
|
},
|
//取消
|
cancel() {
|
this.ids = [];
|
//取消
|
this.Change = false;
|
this.alls = false;
|
this.tds.map(item => {
|
item.che = false;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.classificationSettings {
|
overflow-y: auto;
|
.operation {
|
width: 100%;
|
height: 50px;
|
padding-top: 50px;
|
.Tips {
|
float: left;
|
.Tips-cont {
|
span {
|
font-size: 16px;
|
color: #409eff;
|
padding: 0 5px;
|
}
|
}
|
.cancel {
|
font-size: 16px;
|
margin-left: 15px;
|
}
|
}
|
.add-btn {
|
float: right;
|
}
|
}
|
}
|
</style>
|
