<template>
<div class="full-box zhglcss" style="overflow: hidden">
<div class="" style="width: 100%;height:100%;">
<div class="top-tip-box t-title">当前位置：后台系统管理 > 科室管理</div>
<div class="table-info-box">
<div class="table-search-box onerow" v-if="false">
<div class="search-info-box" style="">
</div>
<div class="search-border-box">
<div class="sbb-line"></div>
<div class="sbb-role"></div>
</div>
</div>
<div class="" style="width: 100%;height: 34px;">
<el-button class="operate-btn" type="primary" style="float:left" @click="showAdd">新增</el-button>
</div>
<div class="table-result-boxx" style="height:calc(100% - 49px);">
<div class="table-container-style">
<el-table :data="tableData.list" height="200">
<el-table-column type="index" align="center" label="编号" width="80"></el-table-column>
<el-table-column property="name" label="科室名称" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="leader" label="分管领导" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="function" label="科室职能" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="sort" label="排序" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="createTime" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
<el-table-column property="updateTime" label="最近更新时间" align="center" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" align="center" width="150">
<template slot-scope="scope">
<div class="table-edit-btn" @click="detailModule(scope.row)">查看</div>
<div class="table-edit-btn" @click="editModule(scope.row)">编辑</div>
<div class="table-edit-btn" @click="deleteModule(scope.row)">删除</div>
</template>
</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>
</div>
<el-dialog :title="type==0?'新增':'修改'" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
<el-form :model="addForm" :rules="addRules" ref="addForm" :label-width="formLabelWidth+'px'">
<el-form-item label="科室名称" prop="name">
<el-input v-model="addForm.name" clearable auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input v-model.number="addForm.sort" clearable auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="分管领导" prop="governor">
<el-select v-model="addForm.leader" placeholder="请选择">
<el-option
v-for="item in governorList"
:key="item.realName"
:label="item.realName"
:value="item.realName">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室职能">
<el-input v-model="addForm.function" clearable auto-complete="off"></el-input>
</el-form-item>
</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>
<el-dialog title="详情" :visible.sync="detailDialogVisible" width="450px" :close-on-click-modal=false>
<el-form :model="addForm" :rules="addRules" ref="addForm" :label-width="formLabelWidth+'px'" class="detailks">
<el-form-item label="科室名称">
<el-input v-model="addForm.name" clearable auto-complete="off" readonly ></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model.number="addForm.sort" clearable auto-complete="off" readonly ></el-input>
</el-form-item>
<el-form-item label="分管领导" prop="governor">
<el-select v-model="addForm.leader" placeholder="请选择" disabled>
<el-option
v-for="item in governorList"
:key="item.realName"
:label="item.realName"
:value="item.realName">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室职能">
<el-input v-model="addForm.function" clearable auto-complete="off" readonly></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</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: 'yjManage',
data () {
return {
timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
detailDialogVisible:false,
dialogVisible:false,
type:0,
formLabelWidth: 120,
addRules:{
name: [
{ required: true, message: '请输入科室名称', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入排序', trigger: 'blur' },
{ type: 'integer', message: '排序必须为数字值'}
],
leader:[ { required: true, message: '请选择分管领导', trigger: 'blur' }],
},
addForm: { function: "",leader: "",name: "",sort: ""},
governorList:[],
tableData:{
list: [],
pageNum: 1,
pageSize: 10,
pages: 0,
total: 0,
},
}
},
mounted (){
/*this.loadTabCharts();*/
},
created(){
this.getDataList();
},
methods:{
getDataList: function (pager) {
let _this = this;
_this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.pageNum : pager;
_this.$http.get('/dx-economy-api/department/page', {
params: {
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) {
if(!_this.$Util.isEmpty(item.createTime)){
item.createTime = new Date(item.createTime).format("yyyy-MM-dd HH:mm:ss");
}
if(!_this.$Util.isEmpty(item.updateTime)){
item.updateTime = new Date(item.updateTime).format("yyyy-MM-dd HH:mm:ss");
}
});*/
_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);
}
});
},
resetForm(formName) {
var _this = this;
if(!_this.$Util.isEmpty(_this.$refs[formName])){
_this.$refs[formName].resetFields();
_this.addForm = { function: "",leader: "",name: "",sort: ""}
}
},
showAdd(){
this.type = 0;
this.dialogVisible = true;
this.resetForm("addForm");
},
updateModule: function (formName) {
var _this = this;
_this.$refs[formName].validate((valid) => {
if (valid) {
if(_this.type === 0){ //新增
_this.$http.post('/dx-economy-api/department', _this.addForm).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}else{ // 修改
_this.$http.put('/dx-economy-api/department/'+_this.addForm.id, _this.addForm).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}
_this.dialogVisible = false;
} else {
return false;
}
});
},
detailModule(rowData){
this.addForm = JSON.parse(JSON.stringify(rowData));
this.detailDialogVisible = true;
},
editModule: function (rowData) {
this.type = 1;
this.addForm = JSON.parse(JSON.stringify(rowData));
this.dialogVisible = true;
},
deleteModule: function (rowData) {
var _this = this;
_this.$confirm('确认删除？','提示', {type: 'warning'}).then(() => {
if(!_this.$Util.isEmpty(rowData) && !_this.$Util.isEmpty(rowData.id)){
_this.$http.delete('/dx-economy-api/department/'+rowData.id).then(function (resp) {
var _data = resp.data;
if (_data.code === 200) {
_this.getDataList(1);
} else {
_this.$message.error(_data.message);
}
});
}
}).catch(() => {});
},
handlePageChange(currentPage){
this.getDataList(currentPage)
},
}
}
</script>
<style>
.detailks .el-input.is-disabled .el-input__inner,.detailks .el-input__inner,.detailks .el-textarea__inner{background: rgba(7,182,255,0.1)!important;border:none}
</style>
<style scoped>
.detailks{}
.table-result-boxx{height:calc(100% - 95px);}
.el-form-item{margin-bottom:15px;}
.el-form-item label{width: 90px;}
.aaa{}
.aaa{}
</style>
