<template>
<div id="contents">
<h1>权限管理</h1>
<div class="viewcontact">
<div class="viewtable">
<div class="viewtitle">
<span class="newpel">
<el-button size="mini" round @click="buildnew">新增部门</el-button>
</span>
</div>
<div>
<el-table id="mytable" stripe :data="tableDatas" border :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column label="序号" type="index" :resizable="resizable" align="center">
</el-table-column>
<el-table-column prop="name" label="部门名称" :resizable="resizable" align="center">
</el-table-column>
<el-table-column prop="create_time" label="添加时间" :resizable="resizable" align="center">
</el-table-column>
<el-table-column label="操作" :resizable="resizable" align="center">
<template slot-scope="scope">
<span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" @click="Detailed(scope.row)">权限明细</span>
<span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" v-if="scope.row.state === 1" @click="editinfo(scope.row)">修改名称</span>
<span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" v-if="scope.row.state === 1" @click="delinfo(scope.row)">删除</span>
</template>
</el-table-column>
</el-table>
</div>
<div id="pages">
<pages :currentPage=currentPage :total=total @setup="changepages"></pages>
</div>
</div>
</div>
<div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="viewshow">
<div class="el-dialog" style="padding:20px 20px; margin-top: 120px;overflow: hidden;clear: both; width: 30%;">
<div class="el-dialog__header">
{{addtitle}}
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeself">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<ul class="addvview">
<li>
<span>部门名称：</span>
<el-input v-model="valname" placeholder="请输入内容" class="addinput"></el-input>
</li>
<li>
<el-button type="primary" style="margin: auto; display:block; text-align: center;" @click="makesure">确定</el-button>
</li>
</ul>
</div>
</div>
<!--//明细显示-->
<div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="detshow">
<div class="el-dialog" style="padding:20px 20px; margin-top: 120px;overflow: hidden;clear: both; width: 50%;">
<div class="el-dialog__header">
权限明细
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closedet">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<div class="shuzhuangtu">
<el-tree
:data="TreeData"
show-checkbox
node-key="id"
ref="tree"
:default-expand-all="showall"
:default-checked-keys="GotData"
:props="defaultProps"
@check="currentChecked"
>
</el-tree>
</div>
<ul class="addvview">
<li style="width: 40%;">
<el-button type="primary" style="float: left;" @click="Savedata">保存</el-button>
<el-button type="danger" style="float: left; margin-left: 100px;" @click="detClear">取消</el-button>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import pages from '../../component/pagination/pagination'
import { API } from '../../lib/api'
import Qs from 'qs'
export default {
name: "transfer",
components: {
pages
},
data() {
return {
departmentId:"",
styleType:"",
showall: true,
addtitle: "",
valpass: "",
valbank: "",
valname: "",
valstate: "",
isSelect: true,
source: -1,
storeId: null,
fromTime: null,
toTime: null,
put_storage: [],
resizable: false,
currentPage: 1,
tableData: [],
searchValue: '',
total: 1,
value2: null,
value3: -1,
value4: "",
value5: "",
viewshow: false,
detshow: false,
multipleSelection: [],
GotData:[],
TreeData: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1',
}, {
id: 8,
label: '二级 3-2',
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
Savedata(){
console.log(this.$refs.tree.getCheckedNodes());
console.log(this.$refs.tree.getCheckedKeys());
},
currentChecked(val){
console.log(val)
},
detClear() {
this.detshow = false;
//this.$refs.multipleTable.clearSelection();
},
delinfo(delval){
console.log(delval.id)
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url:`${API}/sku/privilege/department/delete`,
data: Qs.stringify({
departmentId:delval.id,
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
if(res.data.code==200){
this.getList(1);
this.$message({
type: 'success',
message: '删除成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '删除失败'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
editinfo(infoval) {
this.styleType =2;
this.viewshow = true;
this.addtitle = "修改名称";
this.departmentId = infoval.id;
this.valname = infoval.name;
this.valstate = infoval.status;
},
Detailed(detval) {
this.GotData=[5]
console.log(detval.state)
if(detval.state ===1){
for(let item of this.TreeData) {
this.$set(item, 'disabled', false)
for(let view of item.children){
this.$set(view, 'disabled', false)
}
}
console.log("新数据")
console.log(this.TreeData)
}else{
console.log("需要不可以编辑的")
for(let item of this.TreeData) {
this.$set(item, 'disabled', true)
for(let view of item.children){
this.$set(view, 'disabled', true)
}
}
}
this.detshow = true;
},
closedet() {
this.detshow = false;
//this.$refs.multipleTable.clearSelection();
},
makesure() {
if(this.valname==""){
this.$message.error('请填写名称，再次提交！');
return
}
if(this.styleType ===1){ //增加部门
let myData = Qs.stringify({
departmentName: this.valname,
});
this.axios({
method: 'POST',
url: `${API}/sku/privilege/department/add`,
data:myData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
this.getList(1)
} else {
this.$message({
type: 'error',
message: res.data.msg
})
}
})
this.viewshow = false;
} else if(this.styleType ===2){ //修改部门名称
let myData = Qs.stringify({
departmentName: this.valname,
departmentId: this.departmentId,
});
this.axios({
method: 'POST',
url: `${API}/sku/privilege/department/update`,
data:myData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
this.getList(1)
} else {
this.$message({
type: 'error',
message: res.data.msg
})
}
})
this.viewshow = false;
}
},
closeself() {
this.viewshow = false;
},
buildnew() {
this.styleType =1;
this.valname="";
this.viewshow = true;
this.addtitle = "新增部门";
},
changepages(a) {
this.currentPage = a
},
reset() {
this.value4 = this.value5 = this.input = '';
this.getList(1);
},
getLists(a) {
this.fromTime = this.value4;
this.toTime = this.value5;
if(this.value5 == "" || this.value4 == "") {
this.getList(a)
} else {
if(this.value4 <= this.value5) {
this.getList(a)
} else {
this.$message({
type: 'warning',
message: '日期选择错误'
});
this.value5 = "";
}
}
},
getList(a) {
let myData = Qs.stringify({
page: a,
departmentId: 1,
max: 10,
uuid: localStorage.getItem('uuid')
});
this.axios({
method: 'POST',
url: `${API}/sku/privilege/department/list`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.code === 200) {
console.log(res.data.data)
this.tableData = res.data.data;
this.total = 1;
} else {
this.$message({
type: 'error',
message: res.data.msg
})
}
})
},
},
computed: {
tableDatas: function() {
var search = this.searchValue;
if(search) {
return this.tableData.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
watch: {
currentPage: function() {
this.getList(this.currentPage)
},
source: function() {
// console.log(this.source)
if(this.source === -1) {
this.isSelect = true;
this.storeId = "";
} else {
this.isSelect = false;
}
}
},
created() {
this.getList(1);
},
};
</script>
<style scoped="scoped">
.shuzhuangtu{
width: 70%;
margin:10px auto;
box-sizing: border-box;
border: 1px solid #E1E1E1;
}
.addvview li {
list-style: none;
width: 100%;
overflow: hidden;
clear: both;
margin: 15px auto;
}
.addvview li span {
display: inline-block;
float: left;
width: 20%;
line-height: 40px;
}
.addvview .addinput {
display: inline-block;
float: left;
width: 70%;
}
.viewcontact {
overflow: hidden;
clear: both;
box-sizing: border-box;
padding: 10px 30px;
}
.mastertree {
padding-top: 10px;
padding-bottom: 10px;
}
.viewtitle {
width: 100%;
overflow: hidden;
clear: both;
background: #1f8df9;
height: 45px;
line-height: 45px;
color: white;
margin-bottom: 10px;
}
.viewtitle span {
display: inline-block;
box-sizing: border-box;
padding: 0px 20px;
}
.viewtitle .newpel {
float: right;
}
.viewcontact .viewtree {
float: left;
width: 25%;
box-sizing: border-box;
border: 1px solid #E1E1E1;
}
.viewcontact .viewtable {
width: 100%;
}
</style>
网友评论