|
|
@@ -0,0 +1,502 @@
|
|
|
+<template>
|
|
|
+ <div style="overflow: auto; width: 100%">
|
|
|
+ <TreeChart
|
|
|
+ :json="treeData"
|
|
|
+ :class="{ landscape: isVertical }"
|
|
|
+ :isDetail="isDetail"
|
|
|
+ @add="addStock"
|
|
|
+ @delete="deleteStock"
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="500px"
|
|
|
+ :before-close="closeDig"
|
|
|
+ >
|
|
|
+ <!-- 当符合条件时需要暂时属于哪一届 -->
|
|
|
+ <div class="tips">
|
|
|
+ <el-form :model="ruleForm" ref="ruleForm" :rules="rules" class="demo-ruleForm">
|
|
|
+ <el-form-item
|
|
|
+ label="所属年级"
|
|
|
+ prop="grade"
|
|
|
+ class="imput_com"
|
|
|
+ v-show="isShowGrade"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.grade"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择所属年级"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gradeOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组织架构名称" prop="orgName" class="imput_com">
|
|
|
+ <el-input
|
|
|
+ placeholder="输入组织架构名称"
|
|
|
+ :maxlength="32"
|
|
|
+ v-model="ruleForm.orgName"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <div class="tip-left">
|
|
|
+ <el-button type="info" @click="closeDig">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 删除提示弹框 -->
|
|
|
+ <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
|
|
|
+ <div class="tips">
|
|
|
+ <p style="text-align: left">确定删除该组织信息?</p>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <div class="tip-left">
|
|
|
+ <el-button type="info" @click="dialogVisible2 = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confimdelete">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <div class="changeDirection" @click="changeDir">切换方向</div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TreeChart from "@/components/TreeData";
|
|
|
+import { Loading } from "element-ui";
|
|
|
+import { oSessionStorage } from "../../../utils/utils";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "tree",
|
|
|
+ components: {
|
|
|
+ TreeChart,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ group: "",
|
|
|
+ ppData: [],
|
|
|
+ groupData: [],
|
|
|
+
|
|
|
+ // treeData: {
|
|
|
+ // //公司名称
|
|
|
+ // orgName: "大米科技公司",
|
|
|
+ // proportionShares: "100",
|
|
|
+ // //公司层级
|
|
|
+ // level: 2,
|
|
|
+ // //公司编号
|
|
|
+ // orgNo: 1,
|
|
|
+ // },
|
|
|
+ treeData: {
|
|
|
+ //公司名称
|
|
|
+ orgName: "根节点",
|
|
|
+ proportionShares: "100",
|
|
|
+ //公司层级
|
|
|
+ level: 2,
|
|
|
+ //公司编号
|
|
|
+ orgNo: 1,
|
|
|
+ },
|
|
|
+ isVertical: false, // 是否是竖方向,只给最外层的添加
|
|
|
+ isDetail: false, // 是否是详情,不可编辑操作
|
|
|
+ dialogVisible: false, // 添加股东弹框
|
|
|
+ dialogVisible2: false, // 删除提示弹框
|
|
|
+ //当前取到的对象
|
|
|
+ currentSelectObj: {},
|
|
|
+ //输入表单的对象
|
|
|
+ ruleForm: {
|
|
|
+ orgName: "",
|
|
|
+ grade: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ orgName: [{ required: true, message: "请输入组织名称", trigger: "blur" }],
|
|
|
+ grade: [{ required: true, message: "请选择年级", trigger: "change" }],
|
|
|
+ },
|
|
|
+ shareholderTypeOptions: [
|
|
|
+ {
|
|
|
+ labelEn: "Individual",
|
|
|
+ labelZh: "个人",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ labelEn: "Company",
|
|
|
+ labelZh: "公司",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ labelEn: "Other",
|
|
|
+ labelZh: "其他",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ ], // 股东类型
|
|
|
+ lastId: 11, // 最后一级id
|
|
|
+ currentTreeData: {},
|
|
|
+ userInfo: {},
|
|
|
+ gradeOption: [],
|
|
|
+ isShowGrade: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
|
|
|
+ this.getChannel();
|
|
|
+ this.getGradeFun();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //新增修改框关闭后的回调
|
|
|
+ closeDig() {
|
|
|
+ //重置数据
|
|
|
+ this.$refs["ruleForm"].resetFields();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ //获取当前届数
|
|
|
+ getGradeFun() {
|
|
|
+ this.gradeOption = [];
|
|
|
+ //获取当前届数
|
|
|
+ //获取当前年份
|
|
|
+ let date = new Date();
|
|
|
+ let currentYear = date.getFullYear();
|
|
|
+ let preYear = currentYear - 12;
|
|
|
+ let list = [];
|
|
|
+ for (let i = preYear; i < currentYear + 1; i++) {
|
|
|
+ //
|
|
|
+ let obj = {
|
|
|
+ value: i + "",
|
|
|
+ label: i + "级",
|
|
|
+ };
|
|
|
+ list.push(obj);
|
|
|
+ }
|
|
|
+ this.gradeOption = list.reverse();
|
|
|
+ },
|
|
|
+ changeDir() {
|
|
|
+ //改变方向
|
|
|
+ this.isVertical = !this.isVertical;
|
|
|
+ },
|
|
|
+ //获取组织架构方法--------------------开始-----------------------
|
|
|
+ getChannel() {
|
|
|
+ this.$http.get(
|
|
|
+ // `/org/findAllOrgByPOrgNo?orgNo=${this.userInfo.orgNo}`,
|
|
|
+ `/org/findAllOrgByCurrent`,
|
|
|
+ {},
|
|
|
+ (res) => {
|
|
|
+ // this.$toast.success({message:'成功'});
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ //将值赋值给list
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ console.log(res.data);
|
|
|
+ //
|
|
|
+ //先筛选出学院级别的数据
|
|
|
+
|
|
|
+ let resAdd = this.addPro(res.data);
|
|
|
+ this.ppData = JSON.parse(JSON.stringify(resAdd));
|
|
|
+ let forRes = this.arrToTree(resAdd);
|
|
|
+
|
|
|
+ let resultRes = this.deleteChildren(forRes);
|
|
|
+
|
|
|
+ let levelList = this.markersFun(resultRes, 1);
|
|
|
+
|
|
|
+ this.treeData = levelList[0];
|
|
|
+ } else {
|
|
|
+ this.groupData = [];
|
|
|
+ }
|
|
|
+ // this.channelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //z增加
|
|
|
+ addPro(val) {
|
|
|
+ let data = JSON.parse(JSON.stringify(val));
|
|
|
+ for (let i = 0; i < val.length; i++) {
|
|
|
+ data[i].value = val[i].orgNo;
|
|
|
+ data[i].label = val[i].orgName;
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ //非递归方式：将平铺数据转换为树形结构数据
|
|
|
+ arrToTree(arr) {
|
|
|
+ let data = arr.filter((item) => {
|
|
|
+ item.children = arr.filter((e) => {
|
|
|
+ return item.orgNo === e.parentOrgNo;
|
|
|
+ });
|
|
|
+ return item.orgNo == this.userInfo.orgNo;
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ //去除转换树形结构数据后存在的空children
|
|
|
+ deleteChildren(arr) {
|
|
|
+ let childs = arr;
|
|
|
+ for (let i = childs.length; i--; i > 0) {
|
|
|
+ if (childs[i].children) {
|
|
|
+ if (childs[i].children.length) {
|
|
|
+ this.deleteChildren(childs[i].children);
|
|
|
+ } else {
|
|
|
+ delete childs[i].children;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+
|
|
|
+ //标记层级
|
|
|
+ markersFun(arr, level) {
|
|
|
+ if (!arr || !arr.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ arr.forEach((item) => {
|
|
|
+ item.level = level;
|
|
|
+ //设置都可以编辑
|
|
|
+ item.isEdit = true;
|
|
|
+ //设置都可以增加
|
|
|
+ item.isAdd = true;
|
|
|
+ //设置都可以删除
|
|
|
+ item.isDelete = true;
|
|
|
+ // item.extend = true;
|
|
|
+ item.isExtend = true;
|
|
|
+
|
|
|
+ //当角色是超级管理员时
|
|
|
+ if (this.userInfo.roleType == "5") {
|
|
|
+ //则level 是三级时
|
|
|
+ if (level == "3") {
|
|
|
+ item.isAdd = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // //当角色是院管理员时
|
|
|
+ if (this.userInfo.roleType == "4") {
|
|
|
+ //则level 是三级时
|
|
|
+ if (level == "2") {
|
|
|
+ item.isAdd = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ //
|
|
|
+ this.markersFun(item.children, level + 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ //获取组织架构方法--------------------结束-----------------------
|
|
|
+
|
|
|
+ // 新增编辑股东,val: 0 新增, 1 编辑
|
|
|
+ addStock(data) {
|
|
|
+ this.isShowGrade = false;
|
|
|
+ //判断是新增还是编辑
|
|
|
+ //当等于0时是新增
|
|
|
+ //当等于1时是修改
|
|
|
+ if (data.val == "1") {
|
|
|
+ //管理员编辑
|
|
|
+ if (this.userInfo.roleType == "5" && data.data.level == "3") {
|
|
|
+ this.isShowGrade = true;
|
|
|
+ }
|
|
|
+ //院管理员编辑
|
|
|
+ if (this.userInfo.roleType == "4" && data.data.level == "2") {
|
|
|
+ this.isShowGrade = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.val == "0") {
|
|
|
+ //管理员新增 是否显示届数
|
|
|
+ if (this.userInfo.roleType == "5" && data.data.level == "2") {
|
|
|
+ this.isShowGrade = true;
|
|
|
+ }
|
|
|
+ //院管理员新增 是否显示届数
|
|
|
+ if (this.userInfo.roleType == "4" && data.data.level == "1") {
|
|
|
+ this.isShowGrade = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //当是管理员登录时
|
|
|
+ // if(this.userInfo.roleType=='5'&&data.data.level=='3'){
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ // this.isShowGrade = true;
|
|
|
+ //判断是修改还是
|
|
|
+ this.currentSelectObj = JSON.parse(JSON.stringify(data.data));
|
|
|
+ if (data.val) {
|
|
|
+ this.ruleForm.orgName = data.data.orgName;
|
|
|
+ this.ruleForm.grade = data.data.extend;
|
|
|
+ // 不使用=赋值,内存相同,改变后,treeData数据也会改变
|
|
|
+ // this.ruleForm = data.data;
|
|
|
+ // this.ruleForm = Object.assign(this.ruleForm, data.data);
|
|
|
+ // this.ruleForm.type = data.data.level;
|
|
|
+ } else {
|
|
|
+ this.ruleForm.orgName = "";
|
|
|
+ this.ruleForm.grade = "";
|
|
|
+ }
|
|
|
+ this.isEdit = data.val;
|
|
|
+ // 使用=赋值,编辑时改变currentTreeData, 源数据treeData也会改变
|
|
|
+ this.currentTreeData = data.data;
|
|
|
+
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ deleteStock(data) {
|
|
|
+ this.currentSelectObj = data;
|
|
|
+
|
|
|
+ this.dialogVisible2 = true;
|
|
|
+ },
|
|
|
+ // 确定删除
|
|
|
+ confimdelete() {
|
|
|
+ // 前端删除 遍历原数据,删除匹配id数据
|
|
|
+ this.$http.get(`/org/deleteOrgById?id=${this.currentSelectObj.id}`, {}, (res) => {
|
|
|
+ // this.$toast.success({message:'成功'});
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ //将值赋值给list
|
|
|
+ //调用查询全部的
|
|
|
+ this.getChannel();
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ // this.channelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.dialogVisible2 = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存添加股东
|
|
|
+ confirm() {
|
|
|
+ // let loading = Loading.service();
|
|
|
+ //判断是否输入值了
|
|
|
+ // if (this.ruleForm.orgName != "" && this.ruleForm.orgName != null) {
|
|
|
+ // this.sendData();
|
|
|
+ // } else {
|
|
|
+ // this.$message.warning("请输入组织架构名称");
|
|
|
+ // }
|
|
|
+
|
|
|
+ //当届数显示时--需要校验届数字段
|
|
|
+
|
|
|
+ //
|
|
|
+ let validSp = [];
|
|
|
+ let aa = [];
|
|
|
+ if (this.isShowGrade) {
|
|
|
+ validSp = ["orgName", "grade"];
|
|
|
+ } else {
|
|
|
+ validSp = ["orgName"];
|
|
|
+ }
|
|
|
+ this.$refs["ruleForm"].validateField(validSp, (valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ aa.push(valid);
|
|
|
+ if (this.isShowGrade) {
|
|
|
+ if (aa.length == 2) {
|
|
|
+ this.sendData();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (aa.length == 1) {
|
|
|
+ this.sendData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 发送添加股东数据
|
|
|
+ sendData() {
|
|
|
+ // let loading = Loading.service();
|
|
|
+
|
|
|
+ if (this.isEdit) {
|
|
|
+ // 编辑
|
|
|
+ // data.id = this.treeData.id;
|
|
|
+ //将参数调用接口
|
|
|
+ this.currentSelectObj.orgName = this.ruleForm.orgName;
|
|
|
+ this.currentSelectObj.extend = this.ruleForm.grade;
|
|
|
+ this.$http.post(`/org/addOrUpdateOrg`, this.currentSelectObj, (res) => {
|
|
|
+ // this.$toast.success({message:'成功'});
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ //将值赋值给list
|
|
|
+ //调用查询全部的
|
|
|
+ this.getChannel();
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // this.channelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ // this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.clearDialog();
|
|
|
+ // loading.close();
|
|
|
+ } else {
|
|
|
+ let data = {
|
|
|
+ parentOrgNo: this.currentSelectObj.orgNo,
|
|
|
+ orgName: this.ruleForm.orgName,
|
|
|
+ extend: this.ruleForm.grade,
|
|
|
+ };
|
|
|
+ //将参数调用接口
|
|
|
+ this.$http.post(`/org/addOrUpdateOrg`, data, (res) => {
|
|
|
+ // this.$toast.success({message:'成功'});
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ //将值赋值给list
|
|
|
+ //调用查询全部的
|
|
|
+ this.getChannel();
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // this.channelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //新增后接着查询就行了
|
|
|
+
|
|
|
+ // 添加
|
|
|
+ // 前端添加数据,需要自己生成子级id,可以传数据的时候把最后一级id传过来,进行累加
|
|
|
+ // data.id = this.lastId++;
|
|
|
+ // data.partnerCode = this.currentTreeData.id;
|
|
|
+ // data.extend = true;
|
|
|
+ // const render = (formData) => {
|
|
|
+ // formData.some((item) => {
|
|
|
+ // if (item.id === this.currentTreeData.id) {
|
|
|
+ // if (item.children) {
|
|
|
+ // item.children.push(data);
|
|
|
+ // } else {
|
|
|
+ // this.$set(item, "children", [data]);
|
|
|
+ // }
|
|
|
+ // return;
|
|
|
+ // } else if (item.children) {
|
|
|
+ // render(item.children);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // };
|
|
|
+ // let arr = [this.treeData];
|
|
|
+ // render(arr);
|
|
|
+ // this.treeData = arr[0];
|
|
|
+
|
|
|
+ // this.clearDialog();
|
|
|
+ // loading.close();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.imput_com >>> .el-input__inner {
|
|
|
+ width: 400px !important;
|
|
|
+}
|
|
|
+.imput_com >>> .el-input {
|
|
|
+ width: 400px !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.changeDirection {
|
|
|
+ position: fixed;
|
|
|
+ right: 50px;
|
|
|
+ bottom: 80px;
|
|
|
+ margin: auto;
|
|
|
+ background-color: #48d68e;
|
|
|
+ padding: 10px;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
