462 lines
23 KiB
HTML
462 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>{$node.node_title}</title>
|
|
{include file="common/header"/}
|
|
|
|
<el-form :inline="true">
|
|
<el-form-item>
|
|
<el-button icon="el-icon-plus" size="small" @click="clickAdd" plain>添加</el-button>
|
|
</el-form-item>
|
|
<div style="float:right">
|
|
<el-form-item style="width:120px;">
|
|
<el-select placeholder="显示状态" size="small" v-model="search.node_show">
|
|
<el-option value="" label="全部状态">
|
|
</el-option>
|
|
<el-option v-for="show in showList" :value="show.show_id" :label="show.show_title">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item style="width:120px;">
|
|
<el-select placeholder="筛选类别" size="small" v-model="search.filter">
|
|
<el-option value="node_id" label="节点ID">
|
|
</el-option>
|
|
<el-option value="node_title" label="节点名称">
|
|
</el-option>
|
|
<el-option value="node_desc" label="节点描述">
|
|
</el-option>
|
|
<el-option value="node_module" label="模块">
|
|
</el-option>
|
|
<el-option value="node_controller" label="控制器">
|
|
</el-option>
|
|
<el-option value="node_action" label="方法">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input placeholder="输入关键词搜索" size="small" v-model="search.keyword"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="small" @click="getList_search" plain>搜索</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<el-table :data="dataList" default-expand-all @selection-change="changeSelection" v-loading="loading" row-key="node_id" :tree-props="{children: 'sub', hasChildren: 'hasChildren'}">
|
|
<el-table-column prop="node_id" label="ID" width="120">
|
|
</el-table-column>
|
|
<el-table-column prop="node_title" label="节点名称">
|
|
<template slot-scope="scope">
|
|
<i :class="scope.row.node_icon" style="font-size: 16px;"></i> {{scope.row.node_title}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="节点地址">
|
|
<template slot-scope="scope">
|
|
{{scope.row.node_module+"/"+scope.row.node_controller+"/"+scope.row.node_action}}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="node_order" label="排序" width="">
|
|
</el-table-column>
|
|
<el-table-column label="隐藏" width="80">
|
|
<template slot-scope="scope">
|
|
<el-switch v-model="scope.row.node_show==0?true:false" active-color="#ff4949"
|
|
@change="clickShow(scope.row)">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180">
|
|
<template slot-scope="scope">
|
|
<el-link type="primary" @click="clickEdit(scope.row)" :underline="false">编辑</el-link>
|
|
<el-link type="danger" @click="clickDelete(scope.row)" :underline="false">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<!-- 添加框 -->
|
|
<el-dialog title="添加节点" :visible.sync="dialogFormAdd" :modal-append-to-body='false' append-to-body :close-on-click-modal='false'>
|
|
<el-form :model="formAdd" status-icon :rules="rules" ref="formAdd">
|
|
<el-form-item label="节点名称" :label-width="formLabelWidth" prop="node_title">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点描述" :label-width="formLabelWidth">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_desc"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点图标" :label-width="formLabelWidth">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_icon"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属模块" :label-width="formLabelWidth" prop="node_module">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_module"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="控制器" :label-width="formLabelWidth" prop="node_controller">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_controller"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="方法" :label-width="formLabelWidth" prop="node_action">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_action"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示" :label-width="formLabelWidth">
|
|
<el-select placeholder="请选择是否显示到菜单" size="small" v-model="formAdd.node_show">
|
|
<el-option v-for="show in showList" :value="show.show_id" :label="show.show_title">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="父级菜单" :label-width="formLabelWidth">
|
|
<el-select placeholder="请选择菜单" size="small" v-model="formAdd.node_pid">
|
|
<el-option v-for="parent in parentList" :value="parent.node_id" :label="parent.node_title">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="父级菜单" :label-width="formLabelWidth">
|
|
<el-cascader :options="parentList" v-model="formAdd.node_pid" :props="props" :show-all-levels="false">
|
|
</el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="显示顺序" :label-width="formLabelWidth" prop="node_order">
|
|
<el-input size="medium" autocomplete="off" v-model="formAdd.node_order"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="postAdd">确认添加</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 修改框 -->
|
|
<el-dialog title="修改节点" :visible.sync="dialogFormEdit" :modal-append-to-body='false' append-to-body :close-on-click-modal='false'>
|
|
<el-form :model="formEdit" status-icon :rules="rules" ref="formEdit">
|
|
<el-form-item label="节点名称" :label-width="formLabelWidth" prop="node_title">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点描述" :label-width="formLabelWidth">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_desc"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点图标" :label-width="formLabelWidth">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_icon"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属模块" :label-width="formLabelWidth" prop="node_module">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_module"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="控制器" :label-width="formLabelWidth" prop="node_controller">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_controller"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="方法" :label-width="formLabelWidth" prop="node_action">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_action"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="是否显示" :label-width="formLabelWidth">
|
|
<el-select placeholder="请选择是否显示到菜单" size="small" v-model="formEdit.node_show">
|
|
<el-option v-for="show in showList" :value="show.show_id" :label="show.show_title">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="父级菜单" :label-width="formLabelWidth">
|
|
<el-cascader :options="parentList" v-model="formEdit.node_pid" :props="props" :show-all-levels="false"></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="显示顺序" :label-width="formLabelWidth" prop="node_order">
|
|
<el-input size="medium" autocomplete="off" v-model="formEdit.node_order"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="postEdit">确认修改</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
{include file="common/footer"/}
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
this.getList();
|
|
return {
|
|
search: {
|
|
node_show: "",
|
|
keyword: "",
|
|
filter: "node_id"
|
|
},
|
|
formLabelWidth: '80px',
|
|
dialogFormAdd: false,
|
|
dialogFormEdit: false,
|
|
loading: true,
|
|
dataList: [],
|
|
parentList: [],
|
|
props: {
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
value: 'node_id',
|
|
label: 'node_title',
|
|
children: 'sub',
|
|
},
|
|
showList: [
|
|
{
|
|
show_id: 0,
|
|
show_title: "隐藏"
|
|
},
|
|
{
|
|
show_id: 1,
|
|
show_title: "显示"
|
|
}
|
|
],
|
|
selectList: [],
|
|
formAdd: {
|
|
node_readonly: 0,
|
|
node_pid: 0,
|
|
node_order: 1,
|
|
node_show: 1,
|
|
},
|
|
formEdit: {
|
|
node_readonly: 0,
|
|
node_pid: 0,
|
|
},
|
|
rules: {
|
|
node_title: [
|
|
{ required: true, message: '节点名称必须填写', trigger: 'blur' },
|
|
],
|
|
node_controller: [
|
|
// { required: true, pattern: /^[a-z]+$/, message: '控制器为有效小写字母', trigger: 'blur' },
|
|
],
|
|
node_module: [
|
|
{ required: true, pattern: /^[a-z]+$/, message: '模块名为有效小写字母', trigger: 'blur' },
|
|
],
|
|
node_action: [
|
|
{ required: true, pattern: /^[a-z]+$/, message: '方法名为有效小写字母', trigger: 'blur' },
|
|
],
|
|
node_order: [
|
|
{ required: true, pattern: /^\d$/, message: '顺序为有效自然数', trigger: 'blur' },
|
|
],
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getList_search() {
|
|
this.form.page = 1;
|
|
this.getList();
|
|
},
|
|
postMultDelete() {
|
|
var that = this;
|
|
if (that.selectList.length == 0) {
|
|
that.$message.error('未选择任何节点！');
|
|
return;
|
|
}
|
|
this.$confirm('即将删除选中的节点, 是否确认?', '批量删除', {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
axios.post('/admin/node/delete', Object.assign({}, PostBase, {
|
|
node_id: that.selectList.join(",")
|
|
}))
|
|
.then(function (response) {
|
|
that.getList();
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.$message({
|
|
message: response.data.message,
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
changeSelection(list) {
|
|
var that = this;
|
|
that.selectList = [];
|
|
for (var index in list) {
|
|
that.selectList.push(list[index].node_id);
|
|
}
|
|
},
|
|
postEdit() {
|
|
var that = this;
|
|
axios.post('/admin/node/update', Object.assign({}, PostBase, that.formEdit))
|
|
.then(function (response) {
|
|
that.getList();
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.$message({
|
|
message: response.data.message,
|
|
type: 'success'
|
|
});
|
|
that.dialogFormEdit = false;
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
},
|
|
postAdd() {
|
|
var that = this;
|
|
axios.post('/admin/node/add', Object.assign({}, PostBase, that.formAdd))
|
|
.then(function (response) {
|
|
that.getList();
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.$message({
|
|
message: response.data.message,
|
|
type: 'success'
|
|
});
|
|
that.dialogFormAdd = false;
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
},
|
|
clickAdd() {
|
|
var that = this;
|
|
that.formAdd = {
|
|
node_readonly: 0,
|
|
node_pid: 0,
|
|
node_order: 1,
|
|
node_show: 1,
|
|
};
|
|
axios.post('/admin/node/getList', Object.assign({}, PostBase))
|
|
.then(function (response) {
|
|
that.groupList = response.data.data;
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.dialogFormAdd = true;
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
},
|
|
clickDelete(row) {
|
|
var that = this;
|
|
this.$confirm('即将删除这个节点, 是否确认?', '删除提醒', {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
axios.post('/admin/node/delete', Object.assign({}, PostBase, {
|
|
node_id: row.node_id
|
|
}))
|
|
.then(function (response) {
|
|
that.getList();
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.$message({
|
|
message: response.data.message,
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
clickShow(row) {
|
|
var that = this;
|
|
axios.post(row.node_show ? '/admin/node/hide_menu' : '/admin/node/show_menu', Object.assign({}, PostBase, {
|
|
node_id: row.node_id
|
|
}))
|
|
.then(function (response) {
|
|
that.getList();
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.$message({
|
|
message: response.data.message,
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
},
|
|
clickEdit(row) {
|
|
var that = this;
|
|
that.formEdit = row;
|
|
axios.post('/admin/node/getList', Object.assign({}, PostBase))
|
|
.then(function (response) {
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
that.groupList = response.data.data;
|
|
axios.post('/admin/node/detail', Object.assign({}, PostBase, {
|
|
node_id: row.node_id
|
|
}))
|
|
.then(function (response) {
|
|
if (response.data.code == CODE_SUCCESS) {
|
|
response.data.data.node_pid = response.data.data.node_pid==0?'0':response.data.data.node_pid
|
|
that.formEdit = response.data.data;
|
|
that.dialogFormEdit = true;
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
} else {
|
|
that.$message.error(response.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
|
|
},
|
|
changeCurrentPage(page) {
|
|
this.form.page = page;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
var that = this;
|
|
that.loading = true;
|
|
axios.post('/admin/node/getList', Object.assign({}, PostBase, that.form, that.search))
|
|
.then(function (res) {
|
|
that.loading = false;
|
|
if (res.data.code == 200) {
|
|
that.dataList = JSON.parse(JSON.stringify(res.data.data.data));
|
|
that.parentList = [];
|
|
that.parentList.push({
|
|
node_id: "0",
|
|
node_title: "顶级菜单",
|
|
sub: [],
|
|
});
|
|
for (var i in res.data.data.data) {
|
|
res.data.data.data[i].node_id = res.data.data.data[i].node_id
|
|
that.parentList.push(res.data.data.data[i]);
|
|
}
|
|
for (let item of that.parentList) {
|
|
if(item.sub.length>0){
|
|
for (let items of item.sub) {
|
|
items.sub = undefined
|
|
}
|
|
}else{
|
|
item.sub = undefined
|
|
}
|
|
}
|
|
} else {
|
|
that.$message.error(res.data.message);
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
that.loading = false;
|
|
that.$message.error('服务器内部错误');
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
</html> |