xunjian_web/src/views/patrol/system/dept/index.vue

<template>
  <div class="app-container flex-column p4">
    <el-input
        class="w500"
        placeholder="查找部门"
        clearable
        @clear="keyword=undefined"
        v-model="keyword">
    </el-input>
    <div class="tree-container w500 mt10">
      <el-tree
          :data="dept"
          default-expand-all
          :props="{label:'name'}"
          :filter-node-method="filterDept"
          node-key="id"
          empty-text="无数据"
          ref="dept">
        <div class="custom-tree-node" slot-scope="{ node, dept }">
          <div>{{ node.label }}</div>
          <div>
            <router-link :to="{name:'SystemUser',params:{deptId:node.data.id}}">
              <el-link type="primary" icon="el-icon-view">查看用户</el-link>
            </router-link>
            <el-link @click.native.stop @click="onAdd(node)" class="ml20" type="success" >添加</el-link>
            <el-link @click.native.stop :disabled="!node.data.id" @click="onEdit(node)" class="ml20" type="warning" >修改</el-link>
            <el-link @click.native.stop :disabled="!node.data.id" @click="onRemove(node)" class="ml20" type="danger" >删除</el-link>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {isNotEmpty} from "@/utils/validate";

export default {
  name: "SystemDept",
  data() {
    return {
      keyword: undefined, // 过滤关键字

      deptForm: {
        id: undefined, // 部门id
        name: undefined, // 部门名称
        parentId: undefined, // 上级部门id
      },

      dept: undefined, // 所有部门
    }
  },

  watch: {
    keyword(val) {
      this.$refs["dept"].filter(val);
    }
  },

  // 页面创建
  created() {
  },

  // 页面挂载
  mounted() {
  },

  // keep-alive 显示界面时调用
  activated() {
    this.getDept();
  },

  // keep-alive 页面隐藏
  deactivated() {
  },

  methods: {

    // 获取部门
    getDept() {
      this.$axios.get("/v1/system/dept/list/tree").then((data) => {
        this.dept = [{
          "id": 0,
          "name": "数字巡检系统运维平台",
          "parentId": 0,
          "children": data
        }];
      });
    },

    // 添加
    onAdd(node) {
      this.$prompt(undefined, '添加部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: isNotEmpty,
        inputPlaceholder: '请输入部门名称',
        inputErrorMessage: '部门名称不能为空',
        closeOnClickModal: false
      }).then(({value}) => {
        this.deptForm.parentId = node.data.id;
        this.deptForm.name = value;
        this.$axios.post("/v1/system/dept/add", this.deptForm).then(() => {
          this.deptForm.name = undefined;
          this.getDept();
        });
      }).catch(() => {
        this.deptForm.name = undefined;
      });
    },
    // 修改
    onEdit(node) {
      this.$prompt(undefined, '修改部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: isNotEmpty,
        inputPlaceholder: '请输入部门名称',
        inputErrorMessage: '部门名称不能为空',
        closeOnClickModal: false,
        inputValue:node.data.name
      }).then(({value}) => {
        this.deptForm.id = node.data.id;
        this.deptForm.name = value;
        this.$axios.put("/v1/system/dept/update", this.deptForm).then(() => {
          this.deptForm.name = undefined;
          this.getDept();
        });
      }).catch(() => {
        this.deptForm.name = undefined;
      });
    },

    // 删除
    onRemove(node) {
      this.$confirm('此操作将删除部门, 是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$axios.delete(`/v1/system/dept/delete/${node.data.id}`).then(() => {
          this.$message.success("删除成功！");
          this.getDept();
        });
      }).catch(() => {
        this.$message.info("取消操作!")
      });
    },

    // 部门显示过滤
    filterDept(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  max-height: calc(100vh - 70px);

  .tree-container {
    flex: 1;
    overflow-y: auto;

    ::v-deep .el-form-item__content {
      max-height: 100%;
      overflow-y: auto;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
}
</style>