|
@@ -1,133 +1,141 @@
|
|
-<template>
|
|
|
|
- <div class="hui-flex hui-content">
|
|
|
|
- <div class="hui-content-title">
|
|
|
|
- <div class="hui-title-item active">部门管理</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="hui-flex-box hui-flex hui-table">
|
|
|
|
- <div class="hui-content-insert">
|
|
|
|
- <el-button type="primary" size="medium" @click="insertDepartment({})">新建部门</el-button>
|
|
|
|
- </div>
|
|
|
|
- <div class="hui-flex-box">
|
|
|
|
|
|
+<template>
|
|
|
|
+ <div class="hui-flex hui-content">
|
|
|
|
+ <div class="hui-content-title">
|
|
|
|
+ <div class="hui-title-item active">部门管理</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hui-flex-box hui-flex hui-table">
|
|
|
|
+ <div class="hui-content-insert">
|
|
|
|
+ <el-button type="primary" size="medium" @click="insertDepartment({})">新建部门</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="hui-flex-box">
|
|
<el-table :data="treeData" row-key="id" border height="100%">
|
|
<el-table :data="treeData" row-key="id" border height="100%">
|
|
- <el-table-column label="部门名称" prop="name"></el-table-column>
|
|
|
|
- <el-table-column label="部门人数">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <span>{{!scope.row.users ?0: scope.row.users.length}}</span>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="部门责任人">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div class="hui-table-user" v-if="scope.row.responsible && scope.row.responsible!='[]'">
|
|
|
|
- <div class="hui-table-avatar">
|
|
|
|
- <avatar :user="JSON.parse(scope.row.responsible)[0]"></avatar>
|
|
|
|
- </div>
|
|
|
|
- <div>{{JSON.parse(scope.row.responsible)[0].name}}</div>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="操作" width="240">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <div class="hui-table-operation">
|
|
|
|
- <span class="table-operation" @click="lookFlow(scope.row)">
|
|
|
|
- 详情
|
|
|
|
- </span>
|
|
|
|
- <span class="table-operation" @click="insertDepartment(scope.row)">
|
|
|
|
- 添加子部门
|
|
|
|
- </span>
|
|
|
|
- <span class="table-operation" @click="updateDepartment(scope.row)">
|
|
|
|
- 编辑
|
|
|
|
- </span>
|
|
|
|
- <span class="table-operation" @click="deleteDepartment(scope.row)">
|
|
|
|
- 删除
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <template slot="empty">
|
|
|
|
- <empty description="暂无数据"></empty>
|
|
|
|
- </template>
|
|
|
|
- </el-table>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <el-dialog :close-on-click-modal="false" :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px" :append-to-body="true">
|
|
|
|
- <edit v-if="visible" @callback="callback" :isUpdate="isUpdate" :part="part">
|
|
|
|
- </edit>
|
|
|
|
- </el-dialog>
|
|
|
|
- <el-drawer title="部门详情" :visible.sync="drawer" :size="400" :append-to-body="true">
|
|
|
|
- <detail v-if="drawer" :detail="part"></detail>
|
|
|
|
- </el-drawer>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- import {
|
|
|
|
- getPartList,
|
|
|
|
- deleteDepartment
|
|
|
|
- } from '@/httpApi/organization'
|
|
|
|
- import edit from '@/components/work/organization/depart/edit'
|
|
|
|
- import detail from '@/components/work/organization/depart/detail'
|
|
|
|
- import avatar from '@/components/common/avatar'
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- treeData: [],
|
|
|
|
- visible: false,
|
|
|
|
- isUpdate: false,
|
|
|
|
- part: {},
|
|
|
|
- drawer: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.init();
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- init() {
|
|
|
|
- getPartList(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
|
|
|
|
- if (res.state) {
|
|
|
|
- this.treeData = res.data;
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- currentChange(currPage) {
|
|
|
|
- this.currPage = currPage;
|
|
|
|
- this.init();
|
|
|
|
- },
|
|
|
|
- insertDepartment(val) {
|
|
|
|
- this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
- this.visible = true;
|
|
|
|
- this.isUpdate = false;
|
|
|
|
- },
|
|
|
|
- lookFlow(val) {
|
|
|
|
- this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
- this.drawer = true;
|
|
|
|
- },
|
|
|
|
- updateDepartment(val) {
|
|
|
|
- this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
- this.isUpdate = true;
|
|
|
|
- this.visible = true;
|
|
|
|
- },
|
|
|
|
- deleteDepartment(val) {
|
|
|
|
- this.$confirm('确定要删除该部门?', () => {
|
|
|
|
- deleteDepartment(val.id).then(res => {
|
|
|
|
- if (res.state) {
|
|
|
|
- this.$message.success('操作成功');
|
|
|
|
- this.init();
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- callback(type) {
|
|
|
|
- this.visible = false;
|
|
|
|
- if (type === 'init') this.init();
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- components: {
|
|
|
|
- edit,
|
|
|
|
- avatar,
|
|
|
|
- detail
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
+ <el-table-column width="50"></el-table-column>
|
|
|
|
+ <el-table-column label="序号">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{scope.$index + 1}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="部门名称" prop="name"></el-table-column>
|
|
|
|
+ <el-table-column label="部门人数">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{!scope.row.users ?0: scope.row.users.length}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="部门责任人">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div class="hui-table-user" v-if="scope.row.responsible && scope.row.responsible!='[]'">
|
|
|
|
+ <div class="hui-table-avatar">
|
|
|
|
+ <avatar :user="JSON.parse(scope.row.responsible)[0]"></avatar>
|
|
|
|
+ </div>
|
|
|
|
+ <div>{{JSON.parse(scope.row.responsible)[0].name}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>无</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" width="240">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div class="hui-table-operation">
|
|
|
|
+ <span class="table-operation" @click="lookFlow(scope.row)">
|
|
|
|
+ 详情
|
|
|
|
+ </span>
|
|
|
|
+ <span class="table-operation" @click="insertDepartment(scope.row)">
|
|
|
|
+ 添加子部门
|
|
|
|
+ </span>
|
|
|
|
+ <span class="table-operation" @click="updateDepartment(scope.row)">
|
|
|
|
+ 编辑
|
|
|
|
+ </span>
|
|
|
|
+ <span class="table-operation" @click="deleteDepartment(scope.row)">
|
|
|
|
+ 删除
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <template slot="empty">
|
|
|
|
+ <empty description="暂无数据"></empty>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px"
|
|
|
|
+ :append-to-body="true">
|
|
|
|
+ <edit v-if="visible" @callback="callback" :isUpdate="isUpdate" :part="part">
|
|
|
|
+ </edit>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <el-drawer title="部门详情" :visible.sync="drawer" :size="400" :append-to-body="true">
|
|
|
|
+ <detail v-if="drawer" :detail="part"></detail>
|
|
|
|
+ </el-drawer>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ getPartList,
|
|
|
|
+ deleteDepartment
|
|
|
|
+ } from '@/httpApi/organization'
|
|
|
|
+ import edit from '@/components/work/organization/depart/edit'
|
|
|
|
+ import detail from '@/components/work/organization/depart/detail'
|
|
|
|
+ import avatar from '@/components/common/avatar'
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ treeData: [],
|
|
|
|
+ visible: false,
|
|
|
|
+ isUpdate: false,
|
|
|
|
+ part: {},
|
|
|
|
+ drawer: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.init();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ getPartList(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.treeData = res.data;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ currentChange(currPage) {
|
|
|
|
+ this.currPage = currPage;
|
|
|
|
+ this.init();
|
|
|
|
+ },
|
|
|
|
+ insertDepartment(val) {
|
|
|
|
+ this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
+ this.visible = true;
|
|
|
|
+ this.isUpdate = false;
|
|
|
|
+ },
|
|
|
|
+ lookFlow(val) {
|
|
|
|
+ this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
+ this.drawer = true;
|
|
|
|
+ },
|
|
|
|
+ updateDepartment(val) {
|
|
|
|
+ this.part = JSON.parse(JSON.stringify(val));
|
|
|
|
+ this.isUpdate = true;
|
|
|
|
+ this.visible = true;
|
|
|
|
+ },
|
|
|
|
+ deleteDepartment(val) {
|
|
|
|
+ this.$confirm('确定要删除该部门?', () => {
|
|
|
|
+ deleteDepartment(val.id).then(res => {
|
|
|
|
+ if (res.state) {
|
|
|
|
+ this.$message.success('操作成功');
|
|
|
|
+ this.init();
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ callback(type) {
|
|
|
|
+ this.visible = false;
|
|
|
|
+ if (type === 'init') this.init();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ edit,
|
|
|
|
+ avatar,
|
|
|
|
+ detail
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
</style>
|
|
</style>
|