<style lang="less">
|
@import "@/styles/tree-common.less";
|
@import "./categoryManage.less";
|
</style>
|
<template>
|
<div class="search">
|
<Card>
|
<Row class="operation" align="middle" justify="space-between">
|
<div>
|
<Button
|
@click="add"
|
type="primary"
|
icon="md-add"
|
v-show="showType == 'tree'"
|
>添加子类别</Button
|
>
|
<Button @click="addRoot" icon="md-add">添加一级类别</Button>
|
<Button @click="delAll" icon="md-trash">批量删除</Button>
|
<Button @click="getParentList" icon="md-refresh">刷新</Button>
|
<Input
|
v-model="searchKey"
|
suffix="ios-search"
|
@on-change="search"
|
placeholder="输入名称搜索"
|
clearable
|
style="width: 250px"
|
v-show="showType == 'list'"
|
/>
|
<i-switch
|
v-model="strict"
|
size="large"
|
v-show="showType == 'tree'"
|
style="margin-left: 5px"
|
>
|
<span slot="open">级联</span>
|
<span slot="close">单选</span>
|
</i-switch>
|
</div>
|
<div>
|
<RadioGroup v-model="showType" type="button">
|
<Radio title="树结构" label="tree">
|
<Icon type="md-list"></Icon>
|
</Radio>
|
<Radio title="列表" label="list">
|
<Icon type="ios-apps"></Icon>
|
</Radio>
|
</RadioGroup>
|
</div>
|
</Row>
|
<Row type="flex" justify="start" :gutter="16" v-show="showType == 'tree'">
|
<Col :sm="8" :md="8" :lg="8" :xl="6">
|
<Alert show-icon>
|
当前选择编辑：
|
<span class="select-title">{{ editTitle }}</span>
|
<a
|
class="select-clear"
|
v-show="form.id && editTitle"
|
@click="cancelEdit"
|
>取消选择</a
|
>
|
</Alert>
|
<Input
|
v-model="searchKey"
|
suffix="ios-search"
|
@on-change="search"
|
placeholder="输入节点名搜索"
|
clearable
|
/>
|
<div style="position: relative">
|
<div class="tree-bar">
|
<Tree
|
ref="tree"
|
:data="data"
|
:load-data="loadData"
|
:render="renderContent"
|
show-checkbox
|
@on-check-change="changeSelect"
|
@on-select-change="selectTree"
|
:check-strictly="!strict"
|
></Tree>
|
</div>
|
<Spin size="large" fix v-if="loading"></Spin>
|
</div>
|
</Col>
|
<Col :sm="16" :md="16" :lg="16" :xl="9">
|
<Form
|
ref="form"
|
:model="form"
|
:label-width="85"
|
:rules="formValidate"
|
>
|
<FormItem label="上级节点" prop="parentTitle" class="form-noheight">
|
<div style="display: flex">
|
<Input
|
v-model="form.parentTitle"
|
readonly
|
style="margin-right: 10px"
|
/>
|
<Poptip
|
transfer
|
trigger="click"
|
placement="right-start"
|
title="选择上级节点"
|
width="250"
|
>
|
<Button icon="md-list">选择分类</Button>
|
<div slot="content" class="tree-bar tree-select">
|
<Tree
|
:data="dataEdit"
|
:load-data="loadData"
|
@on-select-change="selectTreeEdit"
|
></Tree>
|
<Spin size="large" fix v-if="loadingEdit"></Spin>
|
</div>
|
</Poptip>
|
</div>
|
</FormItem>
|
<FormItem label="节点类型" prop="type">
|
<Select v-model="form.type" placeholder="请选择">
|
<Option value="0">分组</Option>
|
<Option value="1">类别</Option>
|
</Select>
|
</FormItem>
|
<FormItem label="类别名称" prop="title">
|
<Input v-model="form.title" />
|
</FormItem>
|
<FormItem label="排序值" prop="sortOrder">
|
<Tooltip
|
trigger="hover"
|
placement="right"
|
content="值越小越靠前，支持小数"
|
>
|
<InputNumber
|
:max="1000"
|
:min="0"
|
v-model="form.sortOrder"
|
></InputNumber>
|
</Tooltip>
|
</FormItem>
|
<FormItem label="是否启用" prop="status">
|
<i-switch
|
size="large"
|
v-model="form.status"
|
:true-value="0"
|
:false-value="-1"
|
>
|
<span slot="open">启用</span>
|
<span slot="close">禁用</span>
|
</i-switch>
|
</FormItem>
|
<FormItem class="br">
|
<Button
|
@click="submitEdit"
|
:loading="submitLoading"
|
:disabled="!form.id || !editTitle"
|
type="primary"
|
icon="ios-create-outline"
|
>修改并保存</Button
|
>
|
<Button @click="handleReset">重置</Button>
|
</FormItem>
|
</Form>
|
</Col>
|
</Row>
|
<Alert show-icon v-show="showType == 'list'">
|
已选择
|
<span class="select-count">{{ selectList.length }}</span> 项
|
<a class="select-clear" @click="clearSelectAll">清空</a>
|
</Alert>
|
<Table
|
row-key="title"
|
:load-data="loadData"
|
:columns="columns"
|
:data="data"
|
:loading="loading"
|
border
|
:update-show-children="true"
|
ref="table"
|
@on-selection-change="showSelect"
|
v-if="showType == 'list'"
|
></Table>
|
</Card>
|
|
<Modal
|
:title="modalTitle"
|
v-model="modalVisible"
|
:mask-closable="false"
|
:width="500"
|
>
|
<Form
|
ref="formAdd"
|
:model="formAdd"
|
:label-width="85"
|
:rules="formValidate"
|
>
|
<div v-if="showParent">
|
<FormItem label="上级节点：">{{ form.title }}</FormItem>
|
</div>
|
<FormItem label="节点类型" prop="type">
|
<Select v-model="formAdd.type" placeholder="请选择">
|
<Option value="0">分组</Option>
|
<Option value="1">类别</Option>
|
</Select>
|
</FormItem>
|
<FormItem label="类别名称" prop="title">
|
<Input v-model="formAdd.title" />
|
</FormItem>
|
<FormItem label="排序值" prop="sortOrder">
|
<Tooltip
|
trigger="hover"
|
placement="right"
|
content="值越小越靠前，支持小数"
|
>
|
<InputNumber
|
:max="1000"
|
:min="0"
|
v-model="formAdd.sortOrder"
|
></InputNumber>
|
</Tooltip>
|
</FormItem>
|
<FormItem label="是否启用" prop="status">
|
<i-switch
|
size="large"
|
v-model="formAdd.status"
|
:true-value="0"
|
:false-value="-1"
|
>
|
<span slot="open">启用</span>
|
<span slot="close">禁用</span>
|
</i-switch>
|
</FormItem>
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="cancelAdd">取消</Button>
|
<Button type="primary" :loading="submitLoading" @click="submitAdd"
|
>提交</Button
|
>
|
</div>
|
</Modal>
|
</div>
|
</template>
|
|
<script>
|
import {
|
initActCategory,
|
loadActCategory,
|
addActCategory,
|
editActCategory,
|
deleteActCategory,
|
searchActCategory,
|
} from "@/api/activiti";
|
export default {
|
name: "category-manage",
|
data() {
|
return {
|
showType: "tree",
|
strict: true,
|
loading: true,
|
loadingEdit: true,
|
modalVisible: false,
|
selectList: [],
|
showParent: false,
|
modalTitle: "",
|
editTitle: "",
|
searchKey: "",
|
form: {
|
id: "",
|
title: "",
|
parentId: "",
|
parentTitle: "",
|
type: null,
|
sortOrder: 0,
|
status: 0,
|
url: "",
|
},
|
formAdd: {
|
type: null,
|
},
|
formValidate: {
|
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
type: [{ required: true, message: "类型不能为空", trigger: "change" }],
|
sortOrder: [
|
{
|
required: true,
|
type: "number",
|
message: "排序值不能为空",
|
trigger: "change",
|
},
|
],
|
},
|
submitLoading: false,
|
data: [],
|
dataEdit: [],
|
columns: [
|
{
|
type: "selection",
|
width: 60,
|
align: "center",
|
},
|
{
|
type: "index",
|
width: 60,
|
align: "center",
|
},
|
{
|
title: "名称",
|
key: "title",
|
minWidth: 120,
|
sortable: true,
|
tree: true,
|
render: (h, params) => {
|
let icon = "";
|
if (params.row.type == "0") {
|
icon = "md-folder-open";
|
} else if (params.row.type == "1") {
|
icon = "ios-bookmark-outline";
|
}
|
return h("span", [
|
h("span", [
|
h("Icon", {
|
props: {
|
type: icon,
|
size: "16",
|
},
|
style: {
|
"margin-right": "8px",
|
},
|
}),
|
h("span", params.row.title),
|
]),
|
]);
|
},
|
},
|
{
|
title: "排序",
|
key: "sortOrder",
|
width: 150,
|
sortable: true,
|
align: "center",
|
sortType: "asc",
|
},
|
{
|
title: "创建时间",
|
key: "createTime",
|
sortable: true,
|
width: 200,
|
},
|
{
|
title: "操作",
|
key: "action",
|
width: 300,
|
align: "center",
|
render: (h, params) => {
|
return h("div", [
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.tableAdd(params.row);
|
},
|
},
|
},
|
"添加子类别"
|
),
|
h("Divider", {
|
props: {
|
type: "vertical",
|
},
|
}),
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.remove(params.row);
|
},
|
},
|
},
|
"删除"
|
),
|
]);
|
},
|
},
|
],
|
};
|
},
|
methods: {
|
init() {
|
this.getParentList();
|
this.getParentListEdit();
|
},
|
renderContent(h, { root, node, data }) {
|
let icon = "";
|
if (data.type == "0") {
|
icon = "md-folder-open";
|
} else if (data.type == "1") {
|
icon = "ios-bookmark-outline";
|
}
|
return h("span", [
|
h("span", [
|
h("Icon", {
|
props: {
|
type: icon,
|
size: "16",
|
},
|
style: {
|
"margin-right": "8px",
|
},
|
}),
|
h("span", data.title),
|
]),
|
]);
|
},
|
getParentList() {
|
this.loading = true;
|
initActCategory().then((res) => {
|
this.loading = false;
|
if (res.success) {
|
res.result.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
e._loading = false;
|
}
|
});
|
this.data = res.result;
|
}
|
});
|
},
|
getParentListEdit() {
|
this.loadingEdit = true;
|
initActCategory().then((res) => {
|
this.loadingEdit = false;
|
if (res.success) {
|
res.result.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
}
|
});
|
// 头部加入一级
|
let first = {
|
id: "0",
|
title: "一级节点",
|
};
|
res.result.unshift(first);
|
this.dataEdit = res.result;
|
}
|
});
|
},
|
loadData(item, callback) {
|
loadActCategory(item.id).then((res) => {
|
if (res.success) {
|
res.result.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
e._loading = false;
|
}
|
});
|
callback(res.result);
|
}
|
});
|
},
|
search() {
|
if (this.searchKey) {
|
this.loading = true;
|
searchActCategory({ title: this.searchKey }).then((res) => {
|
this.loading = false;
|
if (res.success) {
|
res.result.forEach(function (e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
e._loading = false;
|
}
|
});
|
this.data = res.result;
|
}
|
});
|
} else {
|
this.getParentList();
|
}
|
},
|
selectTree(v) {
|
if (v.length > 0) {
|
// 转换null为""
|
for (let attr in v[0]) {
|
if (v[0][attr] == null) {
|
v[0][attr] = "";
|
}
|
}
|
let str = JSON.stringify(v[0]);
|
let data = JSON.parse(str);
|
data.type += "";
|
this.form = data;
|
this.editTitle = data.title;
|
} else {
|
this.cancelEdit();
|
}
|
},
|
cancelEdit() {
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
if (data) {
|
data.selected = false;
|
}
|
this.$refs.form.resetFields();
|
this.form.id = "";
|
delete this.form.id;
|
this.editTitle = "";
|
},
|
selectTreeEdit(v) {
|
if (v) {
|
// 转换null为""
|
for (let attr in v[0]) {
|
if (v[0][attr] == null) {
|
v[0][attr] = "";
|
}
|
}
|
let str = JSON.stringify(v[0]);
|
let data = JSON.parse(str);
|
if (this.form.id == data.id) {
|
this.$Message.warning("请勿选择自己作为父节点");
|
v[0].selected = false;
|
return;
|
}
|
this.form.parentId = data.id;
|
this.form.parentTitle = data.title;
|
}
|
},
|
cancelAdd() {
|
this.modalVisible = false;
|
},
|
handleReset() {
|
this.$refs.form.resetFields();
|
this.form.status = 0;
|
},
|
submitEdit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (!this.form.id) {
|
this.$Message.warning("请先点击选择要修改的节点");
|
return;
|
}
|
this.submitLoading = true;
|
editActCategory(this.form).then((res) => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("编辑成功");
|
this.init();
|
this.modalVisible = false;
|
}
|
});
|
}
|
});
|
},
|
submitAdd() {
|
this.$refs.formAdd.validate((valid) => {
|
if (valid) {
|
this.submitLoading = true;
|
addActCategory(this.formAdd).then((res) => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("添加成功");
|
this.init();
|
this.modalVisible = false;
|
}
|
});
|
}
|
});
|
},
|
add() {
|
if (this.form.id == "" || this.form.id == null) {
|
this.$Message.warning("请先点击选择一个节点");
|
return;
|
}
|
this.modalTitle = "添加子类别";
|
this.showParent = true;
|
if (!this.form.children) {
|
this.form.children = [];
|
}
|
this.formAdd = {
|
parentId: this.form.id,
|
sortOrder: this.form.children.length + 1,
|
status: 0,
|
icon: "",
|
type: "0",
|
};
|
this.modalVisible = true;
|
},
|
addRoot() {
|
this.modalTitle = "添加一级类别";
|
this.showParent = false;
|
this.formAdd = {
|
parentId: 0,
|
sortOrder: this.data.length + 1,
|
status: 0,
|
icon: "",
|
type: "0",
|
};
|
this.modalVisible = true;
|
},
|
changeSelect(v) {
|
this.selectList = v;
|
},
|
clearSelectAll() {
|
this.$refs.table.selectAll(false);
|
},
|
tableAdd(v) {
|
this.form = v;
|
this.add();
|
this.editTitle = "";
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
if (data) {
|
data.selected = false;
|
}
|
},
|
showSelect(e) {
|
this.selectList = e;
|
},
|
remove(v) {
|
this.selectList = [];
|
this.selectList.push(v);
|
this.delAll();
|
},
|
delAll() {
|
if (this.selectList.length <= 0) {
|
this.$Message.warning("您还未勾选要删除的数据");
|
return;
|
}
|
this.$Modal.confirm({
|
title: "确认删除",
|
content:
|
"您确认要删除所选的 " +
|
this.selectList.length +
|
" 条数据及其下级所有数据?",
|
loading: true,
|
onOk: () => {
|
let ids = "";
|
this.selectList.forEach(function (e) {
|
ids += e.id + ",";
|
});
|
ids = ids.substring(0, ids.length - 1);
|
deleteActCategory({ ids: ids }).then((res) => {
|
this.$Modal.remove();
|
if (res.success) {
|
this.$Message.success("删除成功");
|
this.selectList = [];
|
this.cancelEdit();
|
this.init();
|
}
|
});
|
},
|
});
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
};
|
</script>
|
