|
@@ -0,0 +1,240 @@
|
|
|
+<template>
|
|
|
+ <div class="team">
|
|
|
+ <el-card class="left-card">
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :data="teamData"
|
|
|
+ node-key="id"
|
|
|
+ highlight-current
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="currentKey">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <span>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click.stop="() => append(node, data)">
|
|
|
+ Append
|
|
|
+ </el-button>
|
|
|
+ <!--
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click.stop="() => remove(node, data)">
|
|
|
+ Delete
|
|
|
+ </el-button>
|
|
|
+ -->
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="right-card">
|
|
|
+ <el-table
|
|
|
+ :data="teamChildData"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column type="expand">
|
|
|
+ <template slot-scope="props">
|
|
|
+ <el-form label-position="left" inline class="demo-table-expand">
|
|
|
+ <el-form-item label="部门名称">
|
|
|
+ <span>{{ props.row.name }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门 ID">
|
|
|
+ <span>{{ props.row.id }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门分类">
|
|
|
+ <span>{{ props.row.category }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上级部门">
|
|
|
+ <span>{{ props.row.desc }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="部门 ID"
|
|
|
+ prop="id">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="部门名称"
|
|
|
+ prop="name">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="上级部门"
|
|
|
+ prop="desc">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
+ <!--
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ <el-dialog title="新增部门" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="form" ref="form">
|
|
|
+ <el-form-item label="部门编码" prop="code" :label-width="formLabelWidth" :rules="[{ required: true, message: '编码不能为空'}]">
|
|
|
+ <el-input v-model="form.code" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门名称" prop="name" :label-width="formLabelWidth" :rules="[{ required: true, message: '名称不能为空'}]">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门状态" prop="status" :label-width="formLabelWidth" :rules="[{ required: true, message: '状态不能为空'}]">
|
|
|
+ <el-select v-model="form.status" placeholder="请选择状态值">
|
|
|
+ <el-option label="正常" value="NORMAL"></el-option>
|
|
|
+ <el-option label="已删除" value="DEL"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门排序" prop="sort" :label-width="formLabelWidth" :rules="[
|
|
|
+ { required: true, message: '排序不能为空'},
|
|
|
+ { type: 'number', message: '排序必须为数字值'}
|
|
|
+ ]">
|
|
|
+ <el-input v-model.number="form.sort" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="resetForm('form')">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script scoped>
|
|
|
+import { getTeamList, getTeamChildList, addTeam, setTeam } from '@/api/teamApi'
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ teamData: [],
|
|
|
+ teamChildData: [],
|
|
|
+ dialogFormVisible: false,
|
|
|
+ addFlag: false,
|
|
|
+ id: '',
|
|
|
+ form: {
|
|
|
+ path: '',
|
|
|
+ code: '',
|
|
|
+ name: '',
|
|
|
+ status: '',
|
|
|
+ sort: ''
|
|
|
+ },
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ index: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ getTeamList().then(res => {
|
|
|
+ console.log(res.data.data.children)
|
|
|
+ this.teamData = res.data.data.children
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 新增部门
|
|
|
+ append(node, data) {
|
|
|
+ this.addFlag = true;
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.form.path = data.id;
|
|
|
+ },
|
|
|
+ // 删除部门
|
|
|
+ // remove(node, data) {
|
|
|
+ // console.log(data.id)
|
|
|
+ // const parent = node.parent;
|
|
|
+ // const children = parent.data.children || parent.data;
|
|
|
+ // const index = children.findIndex(d => d.id === data.id);
|
|
|
+ // children.splice(index, 1);
|
|
|
+ // setTeam({
|
|
|
+ // id: data.id,
|
|
|
+ // status: 'DEL'
|
|
|
+ // }).then( res => {
|
|
|
+ // console.log(res)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ //选择节点
|
|
|
+ currentKey(val) {
|
|
|
+ getTeamChildList(val.id).then( res => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ this.teamChildData = res.data.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 编辑部门
|
|
|
+ handleEdit(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ this.form.code = row.code;
|
|
|
+ this.form.name = row.name;
|
|
|
+ this.form.status = row.status;
|
|
|
+ this.form.sort = row.sort;
|
|
|
+ this.form.path = row.path;
|
|
|
+ this.id = row.id;
|
|
|
+ this.index = index;
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.addFlag = false;
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ // 提交新增
|
|
|
+ submitForm(formName) {
|
|
|
+ //验证表单
|
|
|
+ this.$refs[formName].validate((valid, value) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.form);
|
|
|
+ if(this.addFlag) {
|
|
|
+ addTeam(this.form).then(res => {
|
|
|
+ console.log(res.data.data.name)
|
|
|
+ //追加元素
|
|
|
+ this.$refs.tree.append({
|
|
|
+ id: res.data.data.id,
|
|
|
+ label: res.data.data.name
|
|
|
+ }, this.form.path)
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.form.id = this.id;
|
|
|
+ setTeam(this.form).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ console.log(this.index)
|
|
|
+ this.teamChildData.splice(this.index, 1, res.data.data)
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scope>
|
|
|
+ .team {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .left-card {
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+ .right-card {
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+ .demo-table-expand label {
|
|
|
+ width: 90px;
|
|
|
+ color: #99a9bf;
|
|
|
+ }
|
|
|
+ .demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|