157 lines
6.0 KiB
Vue
157 lines
6.0 KiB
Vue
<template>
|
|
<div class="layout-content-wrap">
|
|
<div class="border-b-solid-lighter-1 p-h-24">
|
|
<div class="flex-row justify-content-between height-56 align-items-center">
|
|
<div class="color-text-primary f22">部门管理</div>
|
|
<div class="flex-row color-text-regular f14">
|
|
<div class="mr-24">
|
|
<el-input
|
|
placeholder="请输入搜索内容"
|
|
suffix-icon="el-icon-search"
|
|
v-model.trim="queryData.name"
|
|
size="small"
|
|
clearable
|
|
@change="handleSearch"
|
|
@keydown.enter.native="handleSearch"
|
|
>
|
|
</el-input>
|
|
</div>
|
|
<el-button type="primary" @click="handleAddForm" size="small">新增</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layout-tabs-content-box">
|
|
<!-- table -->
|
|
<div class="">
|
|
<el-table ref="monthlyPlanTable"
|
|
:data="tableData"
|
|
:header-cell-style="{background:'#F5F7FA'}"
|
|
>
|
|
<el-table-column prop="name" label="部门名称" width="350"></el-table-column>
|
|
<!-- <el-table-column label="部门负责人">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
{{ListToString(scope.row.masterName)}}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="部门负责人手机号">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
{{ListToString(scope.row.masterPhone)}}
|
|
</div>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="count" label="部门人数" width="160"></el-table-column>
|
|
<el-table-column prop="remark" label="部门描述"></el-table-column>
|
|
<el-table-column label="操作" width="170">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
<div class="f14 color-1960F4 cursor-pointer mr-8" @click="handleAddForm(scope)">编辑</div>
|
|
<div class="f14 color-1960F4 cursor-pointer" @click="handleDelete(scope)">删除</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="text-center p-v-24">
|
|
<el-pagination
|
|
@size-change="getDeptList"
|
|
@current-change="getDeptList"
|
|
:current-page="queryData.current"
|
|
:page-size="queryData.size"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 新增-编辑 -->
|
|
<addOrEditDepartmentDialog v-if="addOrEditDepartmentConfig" :addOrEditDepartmentConfig.sync="addOrEditDepartmentConfig" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import systemManageApi from "@/services/systemManage";
|
|
export default {
|
|
components: {
|
|
addOrEditDepartmentDialog: () => import('./components/addOrEditDepartmentDialog.vue'),
|
|
},
|
|
data() {
|
|
return {
|
|
tableData:[],
|
|
queryData: {
|
|
pid:'0',
|
|
name:'',
|
|
current: 1,
|
|
size: 10,
|
|
companyId:this.$store.state.userinfo.companyId,//机构id 平台管理默认为0
|
|
},
|
|
total: 0,
|
|
addOrEditDepartmentConfig:null,//新增弹窗
|
|
};
|
|
},
|
|
created() {
|
|
this.getDeptList(1)
|
|
},
|
|
methods: {
|
|
// 新增
|
|
handleAddForm(scope){
|
|
let title = scope.row?'编辑部门':'新增部门'
|
|
let data = scope.row?scope.row:''
|
|
this.addOrEditDepartmentConfig={
|
|
title:title,
|
|
data: data
|
|
}
|
|
},
|
|
// 搜索
|
|
handleSearch(){
|
|
this.queryData.current = 1;
|
|
this.queryData.size = 10;
|
|
this.getDeptList()
|
|
},
|
|
getDeptList(val){
|
|
if(val!=undefined){this.queryData.current = val}
|
|
systemManageApi.getDeptList(this.queryData).then(res => {
|
|
if (!res.code) {
|
|
this.tableData = res.records;
|
|
this.total = res.total;
|
|
}
|
|
})
|
|
},
|
|
// 删除
|
|
handleDelete(scope){
|
|
this.$confirm("此操作将永久删除该部门, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
systemManageApi.deleteDeptById({ id: scope.row.id }).then((res) => {
|
|
this.$message.success("成功");
|
|
this.getDeptList(1)
|
|
});
|
|
}).catch((e) => {});
|
|
},
|
|
ListToString(letlist){
|
|
let letString=''
|
|
if(letlist){
|
|
letlist.forEach((element,index) => {
|
|
if(index==0){letString=element}else{letString+=','+element}
|
|
});
|
|
}
|
|
|
|
return letString;
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.el-table--fit {
|
|
border:1px solid $border-color-lighter !important;
|
|
border-bottom: 0!important;
|
|
}
|
|
|
|
</style> |