<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>区域列表</title>
<link href="../../static/plugins/bootstrap/css/bootstrap.min.css"
th:href="@{'/plugins/bootstrap/css/bootstrap.min.css'}" rel="stylesheet" type="text/css" />
<link href="../../static/common/font-awesome/css/font-awesome.min.css"
th:href="@{'/common/font-awesome/css/font-awesome.min.css'}" rel="stylesheet">
<link href="../../static/admin/main/css/animate.css"
th:href="@{'/admin/main/css/animate.css'}" rel="stylesheet">
<link href="../../static/admin/main/css/style.css"
th:href="@{'/admin/main/css/style.css'}" rel="stylesheet">
<link href="../../static/common/bootstrap-table-master/bootstrap-table.min.css"
th:href="@{'/common/bootstrap-table-master/bootstrap-table.min.css'}" rel="stylesheet">
<link href="../../static/common/bootstrap-datepicker-master/css/bootstrap-datepicker.min.css"
th:href="@{'/common/bootstrap-datepicker-master/css/bootstrap-datepicker.min.css'}" rel="stylesheet">
<style type="text/css">
.float {
position: fixed;
right: 50px;
top: 26px;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="main" v-cloak>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>区域列表</h5>
<div class="ibox-tools">
</div>
<!-- <el-input
placeholder="请输入内容"
v-model="searchInput"
style="width:150px;margin-left:1340px;"
clearable>
</el-input>
<el-button @click="onSubmit" title="搜索" onclick="">搜索</el-button> -->
<el-popover placement="bottom" style="width:300;height:600" v-model="visible2" >
<div style="text-align:right; margin: 0">
<p>
区域名称:<el-input style="width:150px" label="区域名称:" placeholder="请输入内容" v-model="searchInput" clearable>
</el-input>
</p>
<el-button size="mini" type="primary" @click="resetInput">重置</el-button>
<el-button size="mini" type="primary" @click="onSubmit" title="搜索" onclick="">确定</el-button>
</div>
<el-button class='float' slot="reference">搜索</el-button>
</el-popover>
<!-- <a id="toolbar" class="btn-group m-t-sm">
<button type="button" class="btn btn-default" title="搜索" onclick="">搜索</button>
</a> -->
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="col-sm-12">
<div class="example-wrap">
<div class="example">
<div>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"
node-key="id" :default-expanded-keys="idArr">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-button v-bind:style="{'display':data.type==='District' ? 'inline':'none'}"
icon="el-icon-circle-plus-outline"
type="text"
size="mini"
@click="addArea(data.id,'form',data)">
</el-button>
<el-button v-bind:style="{'display':data.type!='District'&data.type!='Province'&data.type!='City' ? 'inline':'none'}"
icon="el-icon-edit"
type="text"
size="mini"
@click="editArea(data.id,'form')">
</el-button>
<el-button v-bind:style="{'display':data.type!='District'&data.type!='Province'&data.type!='City' ? 'inline':'none'}"
icon="el-icon-delete"
type="text"
size="mini"
@click="deleteArea(data.id,node)">
</el-button>
</span>
</el-tree>
<el-dialog :title="title" :visible.sync="dialogFormVisible" :modal-append-to-body='false' :center="true" class="dialogs">
<el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
<el-form-item label="区域类型" :label-width="formLabelWidth" prop="areaType">
<el-select v-model="form.areaType" placeholder="请选择区域类型">
<el-option label="街道" value="1"></el-option>
<el-option label="村" value="2"></el-option>
<el-option label="片区" value="3"></el-option>
<el-option label="其他" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="区域名称" :label-width="formLabelWidth" prop="areaName">
<el-input v-model="form.areaName" autocomplete="off" placeholder="请填写区域名称"></el-input>
</el-form-item>
<el-form-item label="备注说明" prop="remark" :label-width="formLabelWidth">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!-- <el-button @click="resetForm('form')">重置</el-button> -->
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/plugins/jquery/jquery-3.1.1.js"
th:src="@{'/plugins/jquery/jquery-3.1.1.js'}" type="text/javascript"></script>
<script src="../static/plugins/bootstrap/js/bootstrap.min.js"
th:src="@{'/plugins/bootstrap/js/bootstrap.min.js'}"></script>
<script src="../static/plugins/hplus/js/plugins/treeview/bootstrap-treeview.js"
th:src="@{'/plugins/hplus/js/plugins/treeview/bootstrap-treeview.js'}"></script>
<!-- Bootstrap table -->
<script src="../static/common/bootstrap-table-master/bootstrap-table.min.js"
th:src="@{'/common/bootstrap-table-master/bootstrap-table.min.js'}"></script>
<script src="../static/common/bootstrap-table-master/extensions/export/bootstrap-table-export.js"
th:src="@{'/common/bootstrap-table-master/extensions/export/bootstrap-table-export.js'}"></script>
<script src="../static/common/bootstrap-table-master/tableExport.js"
th:src="@{'/common/bootstrap-table-master/tableExport.js'}"></script>
<script src="../static/common/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js"
th:src="@{'/common/bootstrap-table-master/locale/bootstrap-table-zh-CN.min.js'}"></script>
<!-- Data picker -->
<script src="../static/common/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js"
th:src="@{'/common/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js'}"></script>
<script src="../../static/common/layer/layer.js"
th:src="@{'/common/layer/layer.js'}" type="text/javascript"></script>
<script src="../../static/admin/main/js/content.js"
th:src="@{'/admin/main/js/content.js'}" type="text/javascript"></script>
<script src="../plug-in/element-ui/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../plug-in/element-ui/index.css">
<!-- 引入组件库 -->
<script src="../plug-in/element-ui/index.js"></script>
<script src="../plug-in/element-ui/axios.min.js"></script>
<script src="../plug-in/element-ui/qs.min.js"></script>
<script>
var globalId;
var globalParam;
new Vue({
el: '#main',
data: function() {
return {
data: [],
defaultProps: {
children: 'children',
label: 'name'
},
visible2: false,
searchInput: '',
idArr:[],
dialogFormVisible: false,
alertVisible:false,
modifyType:'',
title:'',
areaId:'',
addParentData:{},
addChildData:{},
form: {
areaName: '',
areaType: '',
remark: '',
regionId: ''
},
empty: {
areaName: '',
areaType: '',
remark: ''
},
formLabelWidth: '120px',
rules: {
areaType: [
{required: true, message: '请选择区域类型', trigger: 'blur'}
],
areaName: [
{required: true, message: '请输入区域名称', trigger: 'blur'},
{min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur'}
],
remark : [
{min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'blur'}
]
}
};
},
methods: {
handleNodeClick: function (data) {
// let that = this;
//
// var arr = this.data
// var id = data.id
// if(globalId !== id){
// globalId = id;//避免同一区域多次点击查询
// axios.get('list?areaId='+data.id).then(function(res) {
// var resData = res.data.data
// that.idArr = [];
// arr.forEach(province => {
// var cities = province.children
// cities.forEach(city => {
// districts = city.children
// districts.forEach(district => {
// var z = district.id
// if (z == id) {
// district.children = resData
// resData.forEach(rr =>{
// that.idArr.push(rr.id);//展开指定层级
// })
// }
// })
// })
// })
//
// })
// }
},
resetInput:function(data){
this.searchInput = '';
},
onSubmit:function(data){
let that = this;
//if(that.searchInput !== globalParam && that.searchInput !=='' ){
if(that.searchInput !== globalParam){
globalParam = that.searchInput;
axios.get('find',{
params: {
areaName: that.searchInput
}
}).then(function(res) {
that.visible2 = false;
that.data = res.data.data;
that.idArr = [];
that.data.forEach(province=>{
province.children.forEach(city=>{
city.children.forEach(o=>{
that.idArr.push(o.id);//展开指定层级
})
})
});
})
}
},
submitForm:function(formName){//表单提交
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {//校验成功
if (_this.modifyType == 'add') {//新增操作
axios.post('create', _this.form).then(function (res) {
if (res.data.success === true) {
_this.dialogFormVisible = false;
_this.$message({
type: 'success',
message: '保存成功!'
});
_this.form.areaId = res.data.data;
_this.form.id = _this.form.areaId;
_this.form.name = _this.form.areaName;
_this.append(_this.form,_this.addParentData);
}
});
} else {
axios.post('edit', {//修改操作
areaId: _this.areaId,
areaName: _this.form.areaName,
areaType: _this.form.areaType,
remark: _this.form.remark,
regionId: _this.form.regionId
}).then(function (res) {
if (res.data.success === true) {
_this.dialogFormVisible = false;
_this.$message({
type: 'success',
message: '保存成功!'
});
}
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
leftTop:function (obj){//窗口居中
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var scrolltop = $(document).scrollTop();
var scrollleft = $(document).scrollLeft();
var objLeft = (screenWidth - obj.width())/2 + scrollleft ;
var objTop = (screenHeight - 500)/2 + scrolltop;
obj.css({left: objLeft + 'px', top: objTop + 'px'});
},
addArea:function(areaId, formName, data){//新增区域
this.modifyType = 'add';
this.addParentData = data;
this.title = '新增子区域';
this.dialogFormVisible = true;//打开页面
this.form = Object.assign({}, this.empty);//清除表单数据
this.form.regionId = areaId;//传入上级id区域id至表单
if (this.$refs[formName]) {
this.$refs[formName].clearValidate();//清空校验
}
},
editArea:function (areaId,formName) {//修改区域
let _this = this;
_this.modifyType = 'edit';
_this.areaId = areaId;
axios.get(areaId+'/edit').then(function(res) {//根据区域id获取区域信息
if (res.data.success === true){
_this.title = '修改区域';
_this.dialogFormVisible = true;//打开页面
res.data.data.areaType=String(res.data.data.areaType);//select转化成字符串赋值
_this.form = res.data.data;//表单数据赋值
if (_this.$refs[formName]) {
_this.$refs[formName].clearValidate();//清空校验
}
}
});
},
deleteArea:function (areaId, node) {//删除区域
let _this = this;
//删除前先检查是否有和客户关联，若有先删除客户
axios.get('beforeDelete?areaId='+areaId).then(function (res) {
if (res.data.success) {
_this.$confirm("此操作将删除该区域,是否继续?","提示",{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
axios.post('delete', {areaId: areaId}).then(function (res) {
if (res.data.success === true) {
_this.$message({
type: 'success',
message: '删除成功!'
});
_this.remove(node, areaId)
}
});
})
} else {
_this.$alert('该区域下有关联的客户，请先将这些客户转移到其他区域后再进行删除操作！', '警告', {
confirmButtonText: '确定'
});
}
});
},
append(childData, data) {//添加节点
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.unshift(childData);//往树的开头添加子节点
},
remove(node, id) {//移除节点
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === id);
children.splice(index, 1);
},
},
mounted: function() {
let that = this;
axios.get('all').then(function(res) {
that.data = res.data.data;
that.data.forEach(
m=>{that.idArr.push(m.id)//默认展开到市级
});
});
$(window).scroll(function() {//绑定弹窗dialog的窗口居中属性
that.leftTop($('.dialogs'));
});
}
})
</script>
</body>
</html>
<template>
<div class="addequipment org">
<div class="top">
<div class="topfirst">菜单管理</div>
<div class="addequi" @click='addNew'>添加</div>
</div>
<div class="center ">
<!-- 菜单tree -->
<div class="inputlist">
<el-tree
class="org-tree"
:data="menuList"
:props="defaultProps"
node-key="id"
:expand-on-click-node="false"
:load="loadChildNode"
lazy
>
<span class="custom-tree-button" slot-scope="{ node, data }">
<span @click='itemHandle(data)'>{{ node.label }}</span>
<span>
<el-button type="text" size="medium" icon="el-icon-edit-outline" @click="() => edit(data)">
</el-button>
<el-button type="text" size="medium" icon="el-icon-circle-plus-outline" @click="() => addNew(data)">
</el-button>
<el-button type="text" size="medium" icon="el-icon-delete" @click="() => deleteMenu(data)">
</el-button>
</span>
</span>
</el-tree>
</div>
<!-- 权限操作表格 -->
<handlePermission
ref='handlePermission'
:isShowPermissionTable='isShowPermissionTable'
:menuId='menuId'
v-show='isShowPermissionTable'
>
</handlePermission>
</div>
<!-- 新增修改菜单弹窗 -->
<addNewMenu
ref='addNewMenu'
@getMenuTree='getData'
>
</addNewMenu>
</div>
</template>
<script>
import addNewMenu from './component/addNewMenu'
import handlePermission from './component/handlePermission'
import {
getMenuList,
deleteMenu,
listByPid,
}
from "@/api/menu.js";
export default {
name: "menuMang",
computed: {},
data() {
return {
formLabelWidth: "120px",
dialogFormVisible: false,
dialogTitle: "添加",
menuId: "",
sPid: "",
form: {
id: "",
name: "",
type: 1,
url: "",
path: "",
icon: "",
enabled: true,
parentId: "",
sortNum: ""
},
menuList:[],
defaultProps: {
children: "children",
label: "name"
},
menuId: '',
isShowPermissionTable: false
};
},
components: {
addNewMenu,
handlePermission
},
mounted() {
this.getData();
},
methods: {
//点击父节点加载子级数据
loadChildNode(node,resolve) {
if(node.loading){
this.itemHandle(node.data,resolve)
}
},
// 点击节点
itemHandle(data,resolve) {
//动态加载子菜单
console.log('data',data)
this.menuId = ''
if(resolve){
listByPid({ pid: data.id }).then(res => {
let { body, message } = res;
if (message == "SUCCESS") {
resolve(body)
}
})
}
// 如果节点type为0则加载权限操作表格
if (data.type == 0) {
this.menuId = data.id
this.isShowPermissionTable = true
this.$refs.handlePermission.getPermissionList(data.id)
} else {
this.isShowPermissionTable = false
}
},
//符合条件显示权限table
showPermissionTable() {
this.isShowPermissionTable = true
this.$refs.handlePermission.showTable(this.menuId)
},
// 加载菜单数据
getData() {
this.dialogFormVisible = false;
getMenuList().then(res => {
let {
body,
message
} = res;
if (res.code == 200) {
this.menuList = res.body
}
});
},
//打开新增修改弹窗
addNew(data) {
let parentId = data.parentId
let menuId = data.id
this.$refs.addNewMenu.showDialog(1, menuId, parentId)
},
//打开编辑弹窗
edit(data) {
let parentId = data.parentId
let menuId = data.id
this.$refs.addNewMenu.showDialog(2, menuId, parentId)
},
//删除菜单
deleteMenu(data) {
this.$confirm('确定要删除吗')
.then(_ => {
deleteMenu({id: data.id}).then(res => {
if (res.code === 200) {
this.$message({
message: '删除成功',
type: 'success'
});
this.getData()
} else {
this.$message.error(res.message);
}
})
})
.catch(_ => {
this.$message({
message: '确认取消',
type: 'info'
});
});
},
}
};
</script>
<style lang="less" scoped>
.addequipment {
position: absolute;
top: 120px;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 1% 1% 0 5%;
color: #FFFFFF;
.top {
width: 100%;
height: 50px;
background: rgba(2,31,42,.4);
display: flex;
align-items: center;
font-size: 20px;
margin-bottom: 20px;
.topfirst {
color: #01C1DA;
padding: 0 40px 0 20px;
}
.addequi {
background: #1490FF;
width: 130px;
height: 30px;
font-size: 16px;
text-align: center;
line-height: 28px;
border-radius: 8px;
cursor: pointer;
}
}
.center {
width: 100%;
box-sizing: border-box;
padding: 10px;
background:rgba(2,21,62,.4);
overflow: hidden;
.inputlist {
width: 100%;
font-size: 16px;
color: #FFFFFF;
float: left;
box-sizing: border-box;
padding: 30px 10px 0 10px;
margin-bottom: .2rem;
.org-tree {
width: 100%;
background: rgba(0, 0, 0, 0);
color: #FFFFFF;
}
}
.tablelist {
width: 75%;
margin-top: 30px;
float: left;
.styleed {
display: inline-block;
padding: 1px 2px;
color: #1AE2EF;
cursor: pointer;
}
.span1 {
display: inline-block ;
width: 1px;
height: 10px;
background: #12B1D2;
margin:0 3px 0 4px;
}
.span2 {
display: inline-block ;
width: 1px;
height: 10px;
background: #12B1D2;
margin:0 3px 0 4px;
}
.span3 {
display: inline-block;
width: 1px;
height: 10px;
background: #12B1D2;
margin:0 3px 0 4px;
}
}
}
}
</style>
