内部机构

src/http/moudules/dept.js

@@ -210,4 +210,57 @@ export const withdraw = (data) => {
         method: 'post',
         data
     })
+}
+
+//获取树结构
+export const sysDeptInternalAgentFindTree = (params) => {
+    return axios({
+        url: '/sysDeptInternalAgent/findTree',
+        method: 'get',
+        params
+    })
+}
+// 内部机构添加修改
+export const sysDeptInternalAgentAddOrUpdate = (data) => {
+    return axios({
+        url: '/sysDeptInternalAgent/addOrUpdate',
+        method: 'post',
+        data
+    })
+}
+
+//内部机构编辑回显
+export const findSysDeptInternalAgentById = (params) => {
+    return axios({
+        url: '/sysDeptInternalAgent/findSysDeptInternalAgentById',
+        method: 'get',
+        params
+    })
+}
+// 内部机构分页
+export const sysDeptInternalAgentQueryPage = (data) => {
+    return axios({
+        url: '/sysDeptInternalAgent/queryPage',
+        method: 'post',
+        data
+    })
+}
+
+
+// 机构类型
+export const sysDeptInternalAgentType = (data) => {
+    return axios({
+        url: '/sysDict/dictDetails/sysDeptInternalAgentType',
+        method: 'get',
+        data
+    })
+}
+
+// 内部机构删除
+export const sysDeptInternalAgentDelete = (data) => {
+    return axios({
+        url: '/sysDeptInternalAgent/delete',
+        method: 'post',
+        data
+    })
 }

src/views/PeopleManage/Staff/AreaOrganization.vue

@@ -0,0 +1,457 @@
+<template>
+  <div class="container" style="width: 99%; margin-top: 0px">
+    <!--布局容器-->
+    <el-container style="height: 100%" direction="vertical">
+      <el-main ref="elMain" style="padding: 0px">
+        <!-- 搜索 新增-展开折叠 -->
+        <div style="margin-bottom: 20px; margin-top: 15px" class="flex a-start">
+          <el-button
+            size="small"
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            :label="$t('action.addCompany')"
+            @click="handleAddCompany"
+            >新增子机构</el-button
+          >
+          <el-button
+            size="small"
+            type="info"
+            plain
+            icon="el-icon-sort"
+            @click="fold()"
+            >展开折叠</el-button
+          >
+          <!-- <el-form
+            :inline="true"
+            class="demo-form-inline"
+            size="small"
+            style="margin-left: 30px"
+          >
+            <el-form-item>
+              <el-button
+                type="primary"
+                size="small"
+                @click="managementSourceQuery"
+                >查询</el-button
+              >
+            </el-form-item>
+          </el-form> -->
+        </div>
+        <!-- 表格渲染 -->
+        <el-table
+          permsEdit="sys:dept:edit"
+          height="600"
+          permsDelete="sys:dept:delete"
+          row-key="id"
+          :expand-row-keys="['9']"
+          v-loading="loading"
+          border
+          :data="ztreeNodes"
+          :tree-props="{ children: 'children', hasChildren: 'hasChilkdren' }"
+          :header-cell-style="{
+            background: '#F2F7FC',
+            fontWeight: '900',
+            color: '#606266',
+          }"
+          size="small"
+          ref="expandTable"
+          highlight-current-row
+          @row-click="rowClick"
+        >
+          <el-table-column prop="name" label="机构名称" width="300" />
+          <el-table-column prop="deptCount" label="机构数量" width="80" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.row.children ? scope.row.children.length : 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="id" label="ID" align="center" />
+          <el-table-column
+            prop="comtype"
+            label="机构类型"
+            :formatter="comtypeFormatter"
+            align="center"
+          >
+          </el-table-column>
+          <!-- <el-table-column prop="address" label="机构地址" align="center">
+          </el-table-column> -->
+          <el-table-column
+            label="操作"
+            fixed="right"
+            align="center"
+            width="150"
+          >
+            <template slot-scope="scope">
+              <KtButton :perms="'sys:institution:edit'" :size="'medium'" :type="'text'" :label="'编辑'"
+              @click.native.stop="handleEdit(scope.row)"
+                @findPage="findSubDeptPage"
+               ></KtButton>
+               <KtButton :perms="'sys:institution:delete'" :size="'medium'" :type="'text'" :label="'删除'"
+              @click.native.stop="deleteMechanism(scope.row)"
+               ></KtButton>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-main>
+    </el-container>
+    <!-- 新增修改机构界面 -->
+    <el-dialog
+      :title="dialogTitle"
+      width="1000px"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      @close="closeDialog"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        @keyup.enter.native="submitForm()"
+        label-width="100px"
+        size="small"
+        style="text-align: left"
+      >
+        <el-row>
+          <el-col :span="8" v-show="operType == 'EDIT'">
+            <el-form-item label="机构编码" prop="id">
+              <el-input
+                style="width: 100%"
+                v-model="dataForm.id"
+                placeholder="机构编码"
+                disabled
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="上级机构" prop="parentName">
+              <span style="width: 100%" class="span-disabled">{{ parentName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="机构名称" prop="name">
+              <el-input
+                style="width: 100%"
+                v-model="dataForm.name"
+                placeholder="机构名称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="机构类型" prop="comtype">
+              <el-select
+                style="width: 100%"
+                v-model="dataForm.comtype"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in comtypeoptions"
+                  :key="item.dictValue"
+                  :label="item.dictTag"
+                  :value="item.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="排序" prop="orderNum">
+              <el-input-number
+                v-model="dataForm.orderNum"
+                placeholder="排序"
+                controls-position="right"
+                :min="0"
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          size="small"
+          type="primary"
+          style="background-color: #ffc000; border: 1px solid #ffc000"
+          @click="dialogVisible = false"
+          >取消</el-button
+        >
+        <el-button size="small" type="primary" @click="submitForm()">{{
+          $t("action.comfirm")
+        }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Cookies from "js-cookie";
+import KtButton from "@/views/Core/KtButton"; //按钮权限组件
+import tree from "@/components/ztree.vue"; //机构树组件
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import CommonUtil from "@/utils/comutil.js";
+export default {
+  name: "Deptall",
+  components: {
+    KtButton,
+    tree,
+    KtCommonTable,
+  },
+  created() {
+    this.findTreeData(); // 获取左边机构树数据
+    this.$api.dept.sysDeptInternalAgentType().then(res => {
+      this.comtypeoptions = res.data.ddList
+    })
+  },
+  data() {
+    return {
+      loading: false,
+      peopledeptid: "",
+      managementSource: "", //来源类型
+      filters: {
+        id: "",
+      },
+      pageRequest: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      pageResult: {},
+      //----ztreeData start---------
+      ztreeLeftWidth: 0, //左边区域的宽度
+      ztreeRightWidth: 0, //右边区域的宽度
+      ztreeObj: null,
+      ztreeSetting: {
+        // 机构树上的数据格式
+        check: {
+          enable: false,
+        },
+        data: {
+          simpleData: {
+            enable: true,
+            pIdKey: "parentId",
+          },
+        },
+        view: {
+          showIcon: false,
+        },
+      },
+      ztreeNodes: [], // 机构树上的数据
+      currentTreeNode: {},
+      comtypeoptions: [],
+      operType: "ADD", //'ADD','EDIT'
+      dialogTitle: "窗口",
+      dialogVisible: false,
+      dataForm: {
+        parentId: 0,
+        name: "",
+        comtype: "", //机构类型
+        orderNum: 0,
+      },
+      //表单验证
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: "机构名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        comtype: [
+          {
+            required: true,
+            message: "请选择机构类型",
+            trigger: "blur",
+          },
+        ]
+      },
+      isshow: false,
+      expanded: false, // 在这里定义了展开与否的标志
+      parentName: '',
+    };
+  },
+  mounted() {
+    this.changeTreeWidth(); // 初始化树的宽度
+    this.filters.id = "9";
+    this.findSubDeptPage(); //初始化数据
+  },
+  methods: {
+    //点击每一行的事件
+    rowClick(row, treeNode) {
+      //点每行展开折叠
+      row.expanded = !row.expanded;
+      this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
+      //新增子公司、部门
+      this.currentTreeNode = row;
+      this.parentName = row.name
+      // this.currentTreeNode = treeNode;
+      this.filters.id = this.currentTreeNode.id;
+      this.findSubDeptPage();
+    },
+    //遍历表格数据
+    forTableData(arr, isExpand) {
+      arr.forEach((i) => {
+        this.$refs.expandTable.toggleRowExpansion(i, isExpand);
+        if (i.children) {
+          this.forTableData(i.children, isExpand);
+        }
+      });
+    },
+    //展开收起树列表
+    fold() {
+      this.isshow = !this.isshow;
+      this.forTableData(this.ztreeNodes, this.isshow);
+    },
+    // 添加子公司
+    handleAddCompany() {
+      if (!this.currentTreeNode.name) {
+        return this.$message({
+          message: "请选择所属机构",
+          type: "info",
+        });
+      }
+      this.operType = "ADD";
+      this.dialogVisible = true;
+    },
+
+    changeTreeWidth() {
+      // 初始化树的宽度
+      this.ztreeLeftWidth = Math.ceil(
+        (240 / this.$refs.elMain.$el.clientWidth) * 100
+      );
+      this.ztreeRightWidth = 100 - (this.ztreeLeftWidth - 0);
+    },
+    findTreeData() {
+      // 获取机构树的数据
+      this.loading = true;
+      this.$api.dept.sysDeptInternalAgentFindTree().then((res) => {
+        this.ztreeNodes = res.data;
+        this.loading = false;
+      });
+    },
+    // managementSourceQuery() {
+    //   this.loading = true;
+    //   this.$api.dept
+    //     .sysDeptInternalAgentFindTree()
+    //     .then((res) => {
+    //       this.ztreeNodes = res.data;
+    //       this.loading = false;
+    //     });
+    // },
+    // 右边表格Start
+    findSubDeptPage: function (data) {
+      // 获取分页数据
+      if (!!data) {
+        this.pageRequest = data.pageRequest;
+      }
+      this.pageRequest.columnFilters = {
+        id: {
+          name: "id",
+          value: this.filters.id,
+        },
+      };
+    },
+
+    // 编辑机构或部门
+    handleEdit(data) {
+      this.operType = "EDIT";
+      this.dialogTitle = "修改机构信息";
+      this.$api.dept.findSysDeptInternalAgentById({
+        id: data.id
+      }).then(res => {
+        this.parentName = res.data.parentName
+        this.dataForm = {
+          id: res.data.id,
+          parentId: res.data.parentId,
+          name: res.data.name,
+          orderNum: res.data.orderNum,
+          comtype: res.data.comtype
+        }
+      })
+      this.dialogVisible = true;
+    },
+    //删除机构或部门
+    deleteMechanism(data) {
+      this.$confirm('确定删除?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$api.dept.sysDeptInternalAgentDelete({ ids: [data.id] }).then((res) => {
+            if (res.code == 200) {
+              this.findSubDeptPage();
+              this.findTreeData();
+              this.currentTreeNode = null;
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+            }
+            else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });          
+        });
+
+      
+    },
+    comtypeFormatter(row, column) {
+      let comtype = row.comtype;
+      return CommonUtil.getDataName({
+        dataList: this.comtypeoptions,
+        value: "dictValue",
+        label: "dictTag",
+        data: comtype,
+      });
+    },
+
+    // 提交表单
+    submitForm() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          if (this.operType == 'ADD') {
+            this.dataForm.parentId = this.currentTreeNode.id
+          }
+          this.$api.dept.sysDeptInternalAgentAddOrUpdate(this.dataForm).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+              });
+              this.closeDialog()
+            } else {
+              this.$message({
+                message: "操作失败, " + res.msg,
+                type: "error",
+              });
+            }
+            this.findSubDeptPage();
+            this.findTreeData();
+          })
+        }
+      });
+    },
+    //关闭机构弹框
+    closeDialog() {
+      this.dialogVisible = false;
+      this.$refs.dataForm.resetFields();
+
+    },
+  },
+};
+</script>
+
+<style scoped>
+body {
+  scrollbar-gutter: stable both-edges;
+}
+
+.bh-medium-font-size {
+  font-size: 30px !important;
+}
+</style>