<template>
<div class="full-box zhglcss" style="overflow: hidden">
<div class="" style="width: 100%;height:100%;" v-show="iShowDetail===0">
<div class="top-tip-box t-title">当前位置：后台系统管理 > 园区部门管理</div>
<div class="table-info-box">
<div class="table-search-box onerow">
<div class="search-info-box" style="">
<div class="search-item">
<div class="search-item-label">所属部门</div>
<el-select v-model="filter.orgn" clearable filterable placeholder="请选择" style="width: 260px">
<el-option label="全部" value=""></el-option>
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
</el-select>
</div>
<el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
<el-button class="operate-btn" type="primary" style="float:left" @click="showAdd" v-if="false">新增</el-button>
</div>
<div class="search-border-box">
<div class="sbb-line"></div>
<div class="sbb-role"></div>
</div>
</div>
<div class="table-result-boxx" style="height: calc(100% - 100px)">
<div class="table-container-style">
<el-table :data="tableData.list" height="200">
<el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
<el-table-column property="fullname" label="部门名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="simplename" label="部门简称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="num" label="排序" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="tips" label="备注" align="center" show-overflow-tooltip></el-table-column>
</el-table>
<el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
</div>
</div>
</div>
<!--修改密码-->
<el-dialog class="multiColDialog users" :title="type===0?'新增':'修改'" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false>
<el-form :model="addForm" :rules="addRules" ref="addForm">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名" prop="userName">
<el-input v-model="addForm.userName" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="realName">
<el-input v-model="addForm.realName" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="addForm.idCard" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式" prop="phone">
<el-input v-model="addForm.phone" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="7">
<el-form-item label="性别" prop="sex">
<el-select v-model="addForm.sex" clearable filterable placeholder="请选择">
<el-option v-for="item in sexList" :key="item.id" :label="item.name" :value=item.name></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="年龄" prop="age" class="small">
<el-input v-model.number="addForm.age" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出生日期" prop="birthday">
<el-date-picker v-model="addForm.birthday" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属科室" prop="orgn">
<el-select v-model="addForm.orgn" clearable filterable placeholder="请选择">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value=item.name></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职务" prop="duty">
<el-input v-model="addForm.duty" clearable auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateModule('addForm')">确 定</el-button>
</div>
</el-dialog>
</div>
<!--权限设置-->
<transition name="el-zoom-in-bottom">
<div class="full-box" v-show="iShowDetail===1">
<div class="top-tip-box t-title">当前位置：后台系统管理 > 用户人员管理 > 权限设置{{currentUser === "" ? "" : " -- "+currentUser}}</div>
<div style="width:calc(100% - 75px);margin: 0 80px 10px 80px;height: 25px;line-height: 25px;color: white;" v-if="false">
<el-row :gutter="0">
<el-col :span="24">
<div style="margin-right: 20px;border-bottom: 1px solid white;">功能权限</div>
</el-col>
<el-col :span="12" v-if="false">
<div style="border-bottom: 1px solid white;">数据权限</div>
</el-col>
</el-row>
</div>
<div class="form-body privilege-body" style="max-height: calc(100% - 75px);padding-top: 0;overflow-y: auto">
<el-row :gutter="40">
<el-col :span="24">
<el-tree :data="treeData" :props="defaultProps" ref="treeRef" node-key="id" show-checkbox default-expand-all :default-checked-keys="treeCheckedList"></el-tree>
</el-col>
<el-col :span="12" v-if="false">
<div class="privilege-header"></div>
<el-checkbox-group v-model="checkedList">
<template v-for="item in checkGroupList">
<el-checkbox :label="item.id">{{item.name}}</el-checkbox>
</template>
</el-checkbox-group>
</el-col>
</el-row>
</div>
<div class="form-footer">
<el-row >
<el-col :span="24" style="text-align: center;">
<div class="btn-normal" @click="handleSave">保存</div>
<div class="btn-normal" @click="handleBack" style="margin-left: 10px;">返回</div>
</el-col>
</el-row>
</div>
</div>
</transition>
</div>
</template>
<script>
let month = new Date().getMonth()==0?0:new Date().getMonth();
let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
export default {
name: 'yqDepartmentManage',
data () {
return {
iShowDetail:0,
currentUser: "",
type: 0,//标示弹出框类型：0为新增，1为修改
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
filter:{
realName:'',
orgn: "",
},
typeList: [],
tableData:{
list: [],
pageNum: 1,
pageSize: 10,
pages: 0,
total: 0,
},
dialogVisible:false,
addRules:{
userName: [{ required: true, validator: this.$Util.checkUsername, trigger: 'blur' }],
realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
idCard: [{ required: true, validator: this.$Util.checkIDCard, trigger: 'blur' }],
phone: [{ required: true, validator: this.$Util.checkPhone, trigger: 'blur' }],
sex: [{ required: true, message: '请选择性别', trigger: 'blur,change' }],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄为数字值', trigger: 'blur' }
],
birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur,change' }],
duty: [{ required: true, message: '请输入职务', trigger: 'blur' }],
orgn :[{ required: true, message: '请选择所属科室', trigger: 'blur,change' },],
},
addForm: {userName: "",realName: "",sex: "男",idCard: "",phone: "",birthday: "",age: "",duty: "",orgn:''},
sexList: [{id:1,name:"男"},{id:0,name:"女"}],
treeData: [],
defaultProps: {
children: 'children',
label: 'name'
},
treeCheckedList: [],
checkGroupList: [],
checkedList: [],
aaaa:false
}
},
mounted (){},
created(){
this.getTypeList();
this.getDataList()
},
methods:{
searchResult(){
this.getDataList();
},
getTypeList: function (pager) {
let _this = this;
_this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
_this.$http.get('/dx-economy-api/governmentDept').then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
let _list = [];
if(!_this.$Util.isEmpty(_data.data)){
_data.data.forEach(function (item) {
_list.push({id:item.id,name:item.simplename});
});
}
_this.typeList = _list;
} else {
_this.$message.error(_data.message);
}
});
},
getDataList: function (pager) {
let _this = this;
_this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
_this.$http.get('/dx-economy-api/governmentDept/page', {
params: {
name: _this.filter.orgn,
pageNum: _this.tableData.pageNum,
pageSize: _this.tableData.pageSize
}
}).then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
_data.data.list.forEach(function (item) {
item.sexString = item.sex == 1 ? "男" : item.sex == 2 ? "女" : item.sex;
_this.$Util.dateToString(item,["entryDate","joinPartyDate","workDate","preFistDate","middleDate","presentDate"],"yyyy-MM-dd");
});
_this.tableData.list = _data.data.list;
_this.tableData.pageNum = _data.data.pageNum;
_this.tableData.pageSize = _data.data.pageSize;
_this.tableData.pages = _data.data.pages;
_this.tableData.total = _data.data.total;
} else {
_this.$message.error(_data.message);
}
});
},
handlePageChange: function (page) {
this.getDataList(page);
},
resetForm(formName) {
var _this = this;
if(!_this.$Util.isEmpty(_this.$refs[formName])){
_this.$refs[formName].resetFields();
_this.addForm = {userName: "",realName: "",sex: 1,idCard: "",phone: "",birthday: "",age: "",duty: "",orgn:''};
}
},
showAdd(){
this.type = 0;
this.resetForm("addForm");
this.dialogVisible = true;
},
updateModule: function (formName) {
var _this = this;
_this.$refs[formName].validate((valid) => {
if (valid) {
var _form = _this.addForm;
if(_this.type === 0) { // 新增
_this.$http.post('/dx-economy-api/user', _form).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
_this.$message.success("新增用户成功！")
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}else{ // 修改
_this.$http.put('/dx-economy-api/user/'+_form.id, _form).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
_this.$message.success("修改用户成功！")
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}
_this.dialogVisible = false;
} else {
return false;
}
});
},
setPrivilege(rowData){
let _this = this;
if(_this.$Util.isEmpty(rowData.id)) return;
_this.iShowDetail = 1;
_this.$http.get('/dx-economy-api/menu/menuTree').then(function (resp) {
let _data = resp.data;
if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
let _temp_data1 = _data.data;
_this.treeData = _temp_data1;
/**/
_this.$http.get('/dx-economy-api/governmentUser/'+rowData.userId+'/menu').then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
let _temp_data = _data.data;
_this.iShowDetail = 1;
_this.treeCheckedList = _temp_data;
_this.currentUser = _this.$Util.isEmpty(rowData.realName) ? "" : rowData.realName;
_this.currentUserID = rowData.userId;
} else {
_this.$message.error(_data.message);
}
});
/**/
} else {
_this.$message.error(_data.message);
}
});
},
handleBack() {
let _this = this;
_this.iShowDetail = 0;
},
handleSave() {
let _this = this,_form = {};
if(_this.$Util.isEmpty(_this.currentUserID))
return;
_form.menuIds = _this.$refs.treeRef.getCheckedKeys();
_form.halfMenuIds = _this.$refs.treeRef.getHalfCheckedKeys();
_this.$http.put('/dx-economy-api/governmentUser/'+_this.currentUserID+'/menu', _form).then(function (resp) {
let _data = resp.data;
if (_data.code === 200) {
_this.$notify({
title: '提示',
message: '保存权限成功！',
type: 'success'
});
_this.handleBack();
} else {
_this.$message.error(_data.message);
}
});
}
}
}
</script>
<style>
.multiColDialog.users .el-dialog__body{height: auto}
</style>
<style scoped>
.table-result-boxx{height:calc(100% - 95px);}
.el-form-item{margin-bottom:15px;}
.el-form-item label{width: 90px;}
.privilege-body{width: calc(100% - 160px);padding: 0 80px;}
.privilege-body .el-checkbox{display: block;margin-left: 0;height: 26px;}
.serving-main .system-settings-query-element{margin-left: 20px;}
.serving-main .system-settings-row .system-settings-query-element:first-child{margin-left: 0;}
</style>
