完成岗位页面的增删查改功能

src/assets/css/mydoc.css

@@ -1,4 +1,3 @@
-
 .right-main {
   /* padding-top: 10px; */
   padding-left: 30px;
@@ -35,6 +34,16 @@
   text-indent: 2em;
 }
 
+.jd-li {
+  font-size: 1.1em;
+  line-height: 1.5em;
+  padding-left: 3em;
+}
+
+.jd-li2 {
+  padding-left: 1em;
+}
+
 .jd-block1 {
   margin-top: 15px;
 }
@@ -68,8 +77,9 @@
 }
 
 .jd-table2 td {
+  padding-left: 1em;
   text-align: left;
-    text-indent: 2em;
+  /* text-indent: 1em; */
   line-height: 1.5em;
 }
 
@@ -84,3 +94,15 @@
 .vertical-four {
   width: 5em;
 }
+
+.confirm-button {
+  background: #fff;
+  color:#000;
+  border: 1px solid #dcdfe6;
+  border-radius: 5px;
+}
+
+.confirm-button:hover {
+  color: #409eff;
+  background-color: #ecf5ff;
+}

src/components/EditList/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
+    <ul :key="listKey">
+      <li v-for="(item, index) in dataList" :key="index">
         <edit-div
-      v-for="(item, index) in dataList"
-      :key="index"
           v-model="dataList[index]"
           @changeVal="checkList"
           :class="{ add: item == '双击添加' }"
         ></edit-div>
-  </div>
+      </li>
+    </ul>
 </template>
 
 <script>
@@ -18,6 +18,7 @@ export default {
   data() {
     return {
       dataList: this.data,
+      listKey: 0
     };
   },
   mounted() {
@@ -27,11 +28,24 @@ export default {
   },
   methods: {
     checkList() {
+      // 删除""
+      for (let i=0; i<this.dataList.length; i++) {
+        if (!this.dataList[i].trim()) {
+          this.dataList.splice(i, 1);
+          break;
+        }
+      }
+      
       if (this.dataList[this.dataList.length - 1] != "双击添加") {
-        console.log('add')
+        console.log("add");
         this.dataList.push("双击添加");
       }
+
+      this.reRenderList();
     },
+    reRenderList() {
+      this.listKey = (this.listKey + 1) % 100;
+    }
   },
   components: {
     EditDiv,
@@ -44,4 +58,10 @@ export default {
   color: #c0c4cc;
   font-size: 0.7em;
 }
+ul {
+  list-style-type:circle;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 </style>

src/utils/request.js

@@ -12,7 +12,6 @@ const service = axios.create({
 
 // request interceptor
 service.interceptors.request.use(
-  console.log('have a request')
   // config => {
   //   // do something before request is sent
 

src/views/job/components/DepDescription.vue

@@ -1,6 +1,21 @@
 <template>
   <el-main class="right-main">
-    <div class="jd-title">{{ depData.部门名称 }}</div>
+    <div class="jd-title">
+      <edit-div
+        v-model="depData.部门名称"
+        v-if="titleEdit"
+      ></edit-div>
+      <div v-if="!titleEdit">
+        {{ depData.部门名称 }}
+      </div>
+    </div>
+
+    <!-- <div class="jd-title">
+      <edit-div
+        v-model="depData.部门名称"
+      ></edit-div>
+    </div> -->
+
     <div class="jd-block1">
       <table class="jd-table">
         <tr>
@@ -32,17 +47,17 @@ import EditDiv from "@/components/EditDiv/index.vue";
 
 export default {
   name: "DepShow",
-  props: ["data"],
+  props: ["data", "comTitleEdit"],
   data() {
     return {
       depData: this.data,
+      titleEdit: this.comTitleEdit
     };
   },
   components: {
     EditDiv,
   },
-  mounted() {
+  mounted() {},
-  },
   methods: {},
 };
 </script>

src/views/job/components/JobDescription.vue

@@ -1,6 +1,19 @@
 <template>
   <el-main class="right-main">
-    <div class="jd-title">{{ jobData.岗位名称 }} 岗位说明书</div>
+    <div class="jd-title">
+      <edit-div
+        v-model="jobData.岗位名称"
+        v-if="titleEdit"
+      ></edit-div>
+      <div v-if="!titleEdit">{{ jobData.岗位名称 }}</div>
+    </div>
+
+    <!-- <div class="jd-title">
+      <edit-div
+        v-model="jobData.岗位名称"
+      ></edit-div>
+    </div> -->
+
     <div class="jd-block1">
       <div class="jd-h1">一、岗位概况</div>
       <table class="jd-table">
@@ -85,53 +98,59 @@
       </div>
       <div class="jd-block2">
         <div class="jd-h2">2、工作说明</div>
-        <div class="jd-block3" v-if="'党风廉政建设' in jobData.工作内容.工作说明">
+        <div
+          class="jd-block3"
+          v-if="'党风廉政建设' in jobData.工作内容.工作说明"
+        >
           <div class="jd-h3">党风廉政建设</div>
           <edit-list
             :data="jobData.工作内容.工作说明.党风廉政建设"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
         <div class="jd-block3" v-if="'工作职责' in jobData.工作内容.工作说明">
           <div class="jd-h3">工作职责</div>
           <edit-list
             :data="jobData.工作内容.工作说明.工作职责"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
         <div class="jd-block3" v-if="'部门管理' in jobData.工作内容.工作说明">
           <div class="jd-h3">部门管理</div>
           <edit-list
             :data="jobData.工作内容.工作说明.部门管理"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
         <div class="jd-block3" v-if="'业务管理' in jobData.工作内容.工作说明">
           <div class="jd-h3">业务管理</div>
           <edit-list
             :data="jobData.工作内容.工作说明.业务管理"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
         <div class="jd-block3" v-if="'属员管理' in jobData.工作内容.工作说明">
           <div class="jd-h3">属员管理</div>
           <edit-list
             :data="jobData.工作内容.工作说明.属员管理"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
         <div class="jd-block3" v-if="'安全职责' in jobData.工作内容.工作说明">
           <div class="jd-h3">安全职责</div>
           <edit-list
             :data="jobData.工作内容.工作说明.安全职责"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
-        <div class="jd-block3" v-if="'临时代理工作' in jobData.工作内容.工作说明">
+        <div
+          class="jd-block3"
+          v-if="'临时代理工作' in jobData.工作内容.工作说明"
+        >
           <div class="jd-h3">兼办、协助、临时代理工作</div>
           <edit-list
             :data="jobData.工作内容.工作说明.临时代理工作"
-            class="jd-text"
+            class="jd-li"
           ></edit-list>
         </div>
       </div>
@@ -153,7 +172,10 @@
           <tr>
             <th colspan="2">工作权限</th>
             <td>
-              <edit-list :data="jobData.工作内容.职权范围.工作权限"></edit-list>
+              <edit-list
+                :data="jobData.工作内容.职权范围.工作权限"
+                class="jd-li2"
+              ></edit-list>
             </td>
           </tr>
           <tr>
@@ -162,6 +184,7 @@
             <td>
               <edit-list
                 :data="jobData.工作内容.职权范围.沟通关系企业内部"
+                class="jd-li2"
               ></edit-list>
             </td>
           </tr>
@@ -170,6 +193,7 @@
             <td>
               <edit-list
                 :data="jobData.工作内容.职权范围.沟通关系企业外部"
+                class="jd-li2"
               ></edit-list>
             </td>
           </tr>
@@ -301,7 +325,10 @@
         <tr>
           <th class="vertical-four">所需技能能力</th>
           <td>
-            <edit-list :data="jobData.任职资格.所需技能或能力"></edit-list>
+            <edit-list
+              :data="jobData.任职资格.所需技能或能力"
+              class="jd-li2"
+            ></edit-list>
             <!-- <edit-div v-model="jobData.任职资格.所需技能或能力"></edit-div> -->
           </td>
         </tr>
@@ -340,10 +367,11 @@ import EditList from "@/components/EditList/index.vue";
 
 export default {
   name: "JobShow",
-  props: ["data"],
+  props: ["data", "comTitleEdit"],
   data() {
     return {
-        jobData: this.data
+      jobData: this.data,
+      titleEdit: this.comTitleEdit
     };
   },
   methods: {
@@ -357,17 +385,15 @@ export default {
     },
     getVal() {
       return this.jobData;
-    }
+    },
   },
   components: {
     EditText,
     EditDiv,
-    EditList
+    EditList,
-  }
+  },
 };
 </script>
 
 <style scoped>
-
-
 </style>

src/views/job/show.vue

@@ -47,7 +47,7 @@
           >
           <el-col :span="2">
             <el-button
-              @click="clickSave"
+              @click="clickSaveTree"
               size="medium"
               v-bind:disabled="!allowSave"
               >保存</el-button
@@ -59,6 +59,7 @@
         style="height: 90%; width: 100%"
         id="jsmind_container"
         v-on:click="clickNode"
+        @dblclick="editNode"
       ></div>
     </el-container>
     <el-container class="body-right">
@@ -87,7 +88,12 @@
         </el-row>
       </el-header>
       <!-- <job-description :data="jobData" ref="jobDescription"></job-description> -->
-      <component :is="comName" :data="comData" :key="comKey"></component>
+      <component
+        :is="comName"
+        :data="comData"
+        :key="comKey"
+        :comTitleEdit="comTitleEdit"
+      ></component>
     </el-container>
   </el-container>
 </template>
@@ -97,10 +103,10 @@ import "@/assets/css/jsmind.css";
 import jsMind from "jsmind/js/jsmind.js";
 window.jsMind = jsMind;
 
-const { init } = require("@/assets/js/jsmind.menu.js");
+// const { init } = require("@/assets/js/jsmind.menu.js");
 // require("jsmind/js/jsmind.draggable.js");
 require("jsmind/js/jsmind.screenshot.js");
-init(jsMind);
+// init(jsMind);
 
 import JobDescription from "./components/JobDescription.vue";
 import DepDescription from "./components/DepDescription.vue";
@@ -153,125 +159,25 @@ export default {
       preSelectNodeId: null,
       curDep: null,
       curJob: null,
+      curNewNode: null,
+      intervalId: null,
+      comTitleEdit: null,
     };
   },
-  created() {
+  created() {},
-    this.jobData = {
-      岗位名称: "财务科科长",
-      岗位概况: {
-        岗位名称: "科长",
-        岗位级别: "10",
-        定编人数: "1",
-        所属部门: "财务科",
-        岗位类别: "专业管理类",
-        辖员人数: "9",
-        直接上级: "分管领导",
-        直接下级: "副科长",
-      },
-      工作内容: {
-        工作概况:
-          "依据《会计法》及相关财经法规，开展企业会计审核、会计监督、资金调拨、预算控制、财务分析等财务管理工作，建立、健全现代企业财务管理体系，确保企业稳定健康发展对财务的需求。",
-        工作说明: {
-          党风廉政建设:
-            '1、抓好全面从严治党和党风廉政建设，切实履行好党建的“一岗双责”。抓好本部门的党风廉政建设，把反腐倡廉、案件防范工作与业务工作同研究、同规划、同布置、同检查、同考核、同问责，真正做到"两手抓、两手硬"，使党风廉政建设和反腐败工作始终保持应有的力度。',
-          部门管理: [
-            "2、根据企业管理规范，组织制定企业内部财务管理制度、会计控制规范及会计核算规程，以及部门相关的岗位职责、和工作流程；",
-            "3、组织开展本部门综合管理体系的推行与维护工作；",
-            "4、根据预算管理，执行本部门费用控制；",
-            "5、对本部门直接管辖范围内人员、场所负全面安全管理责任。",
-          ],
-          业务管理: [
-            "6、协助分管财务厂长完善全厂的财务管理体系，主持全厂会计核算工作；",
-            "7、组织实施企业全面预算管理工作，监督财务预算执行情况，上报企业年度及月度财务预算；",
-            "8、组织企业财务分析，参与企业生产经营决策，编制财务分析资料，供领导决策参考；",
-            "9、筹集、调度资金，保证企业生产及经营管理的正常运行对资金的需求；",
-            "10、审批会计凭证及各项资金和费用；",
-            "11、监督和参与企业重大采购、投资、资产处置及工程招投标活动；",
-            "12、组织财经法规、财务制度的宣传工作。",
-          ],
-          属员管理: [
-            "13、开展本部门员工的绩效管理工作，对员工任免提出意见；",
-            "14、组织部门员工培训工作，督导企业会计人员的政治学习和业务学习，加强团队建设与廉政作风建设，增强团队凝聚力。",
-          ],
-          安全职责: [
-            "15、保证国家安全生产法规和厂安全生产规章制度在本部门的贯彻执行，对本部门的安全工作负全面责任，健全安全机构，层层落实安全生产责任。",
-            "16、贯彻“五同时”的原则，即在计划、布置、检查、总结、评比生产工作的同时，同时计划、布置、检查、总结、评比安全工作。",
-            "17、监督检查本部门对安全生产各项规章制度的执行情况，及时纠正“三违”行为。",
-            "18、组织制订并实施本部门安全生产管理规定、安全技术操作规程、安全技术措施计划。",
-            "19、负责组织对部门职工进行经常性的安全思想、安全知识和安全技术教育培训；组织并参加厂组织的安全活动，至少组织两次部门的安全活动，掌握其部门存在的危险因素、防范措施及事故应急措施。",
-            "20、负责组织本部门安全检查，每季度参加本部门安全检查一次以上，落实隐患整改，保证生产设备、安全设施、消防设施、防护器材等处于完好状态，并教育职工加强维护、正确使用。",
-            "21、负责本部门的应急管理，定期开展应急处置预案的演练及评估，发生事故应及时现场组织抢救，协助事故调查处理。",
-            "22、负责组织分析本部门安全生产动态，向上级领导汇报本部门的安全生产情况。",
-          ],
-          临时代理工作: ["23、完成上级领导临时交办的其他工作任务。"],
-        },
-        职权范围: {
-          所受监督:
-            "企业资金安全、资金和费用的审批支付、资金调度、企业预算管理",
-          所施监督:
-            "会计核算、财务分析、预算的执行与控制、资金与费用的支付、工程招投标",
-          工作权限: [
-            "1、对企业财务预算的分解落实、资金及费用的支付有建议权和执行权；",
-            "2、对企业内部财务管理制度有拟定权和监督权；",
-            "3、企业重大采购、投资、资产处置及工程招投标有监督权；",
-            "4、对财务会计人员的任用、考核、培训、晋升有建议权；",
-            "5、对本部门费用的使用有支配权；",
-            "6、对本厂安全工作有建议权，对本部门安全工作有决策权；",
-            "7、有权拒绝违章指挥和强令冒险作业，并对他人违章作业加以劝阻和制止。",
-          ],
-          沟通关系企业内部: [
-            "与企业领导就预算执行情况、财务分析、资金使用情况等进行请示、汇报；",
-            "与厂内各科室就安全管理、财务预算、固定资产保管与处置等进行沟通。",
-          ],
-          沟通关系企业外部: [
-            "与中烟公司财务部领导就本企业财务预算及资金使用情况等进行汇报；",
-            "与银行、税务、财政、保险等单位就资金划拨、税收、财产保险等事项进行沟通。",
-          ],
-        },
-        工作环境与条件: {
-          工作时间: "不定时工作制",
-          工作强度脑力劳动: "中",
-          工作强度体力劳动: "低",
-          出差频度: "经常出差",
-          主要工作场所: "室内",
-          工作环境的舒适性: "舒适",
-          工作环境的特殊性: ["无"],
-        },
-      },
-      任职资格: {
-        学历: "大专及以上",
-        专业: "财会",
-        技术职称: "会计师及以上职称",
-        所需知识: "熟悉会计及税务法规，掌握财务及企业管理知识",
-        所需技能或能力: [
-          "具备较强的独立工作能力、良好的沟通与团队协作能力、写作与表达能力；",
-          "具备良好的人际交往和社会活动能力以及计划和执行能力；",
-          "对企业财务有较强的理解、分析和判断的能力；",
-          "熟练掌握财务软件及办公软件。",
-        ],
-        所需经历或经验:
-          "行业工作经验5年以上，相关中层管理岗位工作经验2年以上。",
-        所需体能: "身体健康，精力充沛，能连续工作8小时以上",
-        所需职业风格: "作风严谨、思维敏捷、开拓创新；为人诚实可靠、品行端正",
-      },
-      备注: "无",
-    };
-    this.comData = this.jobData;
-  },
   mounted() {
     // 请求组织架构
     jobApi.getFramework().then(
       (res) => {
         let originalMindData = res.data;
         // 添加 id 和 expanded
-        let i = 1;
+        // let i = 1;
-        originalMindData["id"] = "root";
         originalMindData["expanded"] = true;
         let addId = function (data) {
-          if (!data.hasOwnProperty("id")) {
+          // if (!data.hasOwnProperty("id")) {
-            data["id"] = i;
+          //   data["id"] = i;
-            i += 1;
+          //   i += 1;
-          }
+          // }
           if (!data.hasOwnProperty("expanded")) {
             data["expanded"] = false;
           }
@@ -285,7 +191,7 @@ export default {
 
         // 修改方向
         for (let j = 0; j < originalMindData["children"].length; j++) {
-          if (originalMindData["children"][j]["id"] % 2 == 0) {
+          if (j % 2 == 0) {
             originalMindData["children"][j]["direction"] = "right";
           } else {
             originalMindData["children"][j]["direction"] = "left";
@@ -301,15 +207,33 @@ export default {
       }
     );
 
-    // 绑定全局键盘输入事件
+    // this.intervalId = setInterval(() => {
-    document.onkeydown = function (e) {
+    //   if (this.jm) {
-      // jsmind输入事件
+    //     // 绑定全局键盘输入事件
-      // console.log(e);
+    //     let that = this;
-    };
+    //     document.onkeydown = function (e) {
+    //       // jsmind输入事件
+    //       if (
+    //         e.code == "Enter" &&
+    //         document.activeElement.className == "jsmind-inner"
+    //       ) {
+    //         // 在编辑节点时输入Enter不会捕获到这里
+    //         let node = that.jm.get_selected_node();
+    //         if (node) {
+    //           if (node.topic == "新节点") {
+    //             that.curNewNode = node;
+    //             that.addNewDoc();
+    //           }
+    //         }
+    //       }
+    //     };
+    //     clearInterval(this.intervalId);
+    //   } else {
+    //   }
+    // }, 1000);
   },
   methods: {
     showChart() {
-      console.log(this.mindIndex);
       var mind = {
         /* 元数据，定义思维导图的名称、作者、版本等信息 */
         meta: {
@@ -349,21 +273,25 @@ export default {
             myAddChild: function (jm, e) {
               let node = jm.get_selected_node();
               if (node) {
+                if (jm.options.editable) {
                   let childId = jm.options.maxIndex;
                   jm.options.maxIndex += 1;
                   jm.add_node(node, childId, "新节点", "");
                   jm.select_node(jm.get_node(childId));
-                jm.begin_edit(childId);
+                  // jm.begin_edit(childId);
+                }
               }
             },
             myAddBrother: function (jm, e) {
               let node = jm.get_selected_node();
               if (node) {
+                if (jm.options.editable && !node.isroot) {
                   let broId = jm.options.maxIndex;
                   jm.options.maxIndex += 1;
                   jm.insert_node_after(node, broId, "新节点", "");
                   jm.select_node(jm.get_node(broId));
-                jm.begin_edit(broId);
+                  // jm.begin_edit(broId);
+                }
               }
             },
           }, // 命名的快捷键事件处理器
@@ -380,23 +308,8 @@ export default {
             down: 40, // <Down>
           },
         },
-        menuOpts: {
+        // 新增节点id十万起步，保证容错
-          // 这里加入一个专门配置menu的对象
+        maxIndex: 100000,
-          showMenu: true, //showMenu 为 true 则打开右键功能 ，反之关闭
-          injectionList: [
-            { target: "edit", text: "编辑节点" },
-            { target: "delete", text: "删除节点" },
-            { target: "addChild", text: "添加子节点" },
-            { target: "addBrother", text: "添加兄弟节点" },
-          ],
-          style: {
-            menuItem: {
-              "line-height": "28px",
-            },
-          },
-        },
-        // 修改与整理
-        maxIndex: 10000,
       };
       this.jm = new jsMind(options);
       this.jm.show(mind);
@@ -421,17 +334,22 @@ export default {
       this.comKey = (this.comKey + 1) % 100;
     },
     clickNode() {
-      // let jsmindElement = document.getElementById('jsmind_container')
-      // console.log(jsmindElement.hasFocus());
-
       let node = this.jm.get_selected_node();
       if (node) {
+        // 新节点 添加文档
+        if (node.topic == "新节点") {
+          // this.curNewNode = node;
+          // this.addNewDoc();
+          return;
+        }
+
         // 重复点击不变
         if (node.id === this.preSelectNodeId) {
           return;
         } else {
           this.preSelectNodeId = node.id;
         }
+
         // 根节点无动作
         if (node.isroot) {
           return;
@@ -440,12 +358,18 @@ export default {
           // 请求部门详细数据
           jobApi.getDepartmentDetail({ department: node.topic }).then(
             (res) => {
+              if (res.code === 0) {
                 // 切换右边页面
                 this.depData = res.data;
                 this.comName = "DepDescription";
                 this.comData = this.depData;
+                this.comTitleEdit = false;
                 this.renderComponent();
                 this.curDep = node.topic;
+              } else {
+                this.comName = "NoData";
+                this.comData = null;
+              }
             },
             (err) => {
               console.log("err: ", err);
@@ -453,134 +377,132 @@ export default {
           );
         } else {
           // 请求岗位详细数据
-          // let jobDep = node.parent.topic;
+          let jobDep = node.parent.topic;
-          // jobApi.getJobDetail({ department: jobDep, job: node.topic }).then(
+          jobApi.getJobDetail({ department: jobDep, job: node.topic }).then(
-          //   (res) => {
+            (res) => {
-          //     if (res.code === 0) {
+              if (res.code === 0) {
-          //       // 数据存在
+                // 数据存在
-          //       this.jobData = res.data;
+                this.jobData = res.data;
-          //       this.comName = "JobDescription";
+                this.comName = "JobDescription";
-          //       this.comData = this.jobData;
+                this.comData = this.jobData;
-          //       this.renderComponent();
+                this.comTitleEdit = false;
-          //       this.curDep = jobDep;
+                this.renderComponent();
-          //       this.curJob = node.topic;
+                this.curDep = jobDep;
-          //     } else {
+                this.curJob = node.topic;
-          //       this.comName = "NoData";
+              } else {
-          //       this.comData = null;
+                this.comName = "NoData";
-          //     }
+                this.comData = null;
-          //   },
+              }
-          //   (err) => {
+            },
-          //     console.log("err: ", err);
+            (err) => {
-          //   }
+              console.log("err: ", err);
-          // );
+            }
+          );
+        }
+      }
+    },
+    editNode() {
+      let node = this.jm.get_selected_node();
+      if (node) {
+        if (node.topic == "新节点") {
+          this.curNewNode = node;
+          this.addNewDoc();
+        }
+      }
+    },
+    addNewDoc() {
+      this.$confirm("新建部门还是岗位？", "提示", {
+        confirmButtonText: "部门",
+        confirmButtonClass: "confirm-button",
+        cancelButtonText: "岗位",
+        cancelButtonClass: "confirm-button",
+        type: "success",
+      })
+        .then(() => {
+          this.depData = {
+            部门名称: "<<部门名称>>",
+            所属上级组织机构: "<<湖北中烟工业有限责任公司恩施卷烟厂>>",
+            部门属性: "<<职能部门>>",
+            是否为虚拟部门: true,
+          };
+          this.comName = "DepDescription";
+          this.comData = this.depData;
+          this.comTitleEdit = true;
+          this.renderComponent();
+
+          this.curDep = null;
+        })
+        .catch(() => {
+          this.curDep = this.curNewNode.parent.topic;
+          this.curJob = null;
+          // 切换页面
           this.jobData = {
-            岗位名称: "财务科科长",
+            岗位名称: "<<岗位名称>>",
             岗位概况: {
-              岗位名称: "科长",
+              岗位名称: "<<科长>>",
-              岗位级别: "10",
+              岗位级别: "<<10>>",
-              定编人数: "1",
+              定编人数: "<<1>>",
-              所属部门: "财务科",
+              所属部门: this.curDep,
-              岗位类别: "专业管理类",
+              岗位类别: "<<专业管理类>>",
-              辖员人数: "9",
+              辖员人数: "<<9>>",
-              直接上级: "分管领导",
+              直接上级: "<<分管领导>>",
-              直接下级: "副科长",
+              直接下级: "<<副科长>>",
             },
             工作内容: {
-              工作概况:
+              工作概况: "依据《会计法》及相关财经法规，……",
-                "依据《会计法》及相关财经法规，开展企业会计审核、会计监督、资金调拨、预算控制、财务分析等财务管理工作，建立、健全现代企业财务管理体系，确保企业稳定健康发展对财务的需求。",
               工作说明: {
-                党风廉政建设: [
+                党风廉政建设: ["抓好全面从严治党和党风廉政建设，……"],
-                  '1、抓好全面从严治党和党风廉政建设，切实履行好党建的“一岗双责”。抓好本部门的党风廉政建设，把反腐倡廉、案件防范工作与业务工作同研究、同规划、同布置、同检查、同考核、同问责，真正做到"两手抓、两手硬"，使党风廉政建设和反腐败工作始终保持应有的力度。',
+                工作职责: [
-                ],
+                  "组织制定企业内部财务管理制度、会计控制规范及会计核算规程，……",
-                部门管理: [
-                  "2、根据企业管理规范，组织制定企业内部财务管理制度、会计控制规范及会计核算规程，以及部门相关的岗位职责、和工作流程；",
-                  "3、组织开展本部门综合管理体系的推行与维护工作；",
-                  "4、根据预算管理，执行本部门费用控制；",
-                  "5、对本部门直接管辖范围内人员、场所负全面安全管理责任。",
-                ],
-                业务管理: [
-                  "6、协助分管财务厂长完善全厂的财务管理体系，主持全厂会计核算工作；",
-                  "7、组织实施企业全面预算管理工作，监督财务预算执行情况，上报企业年度及月度财务预算；",
-                  "8、组织企业财务分析，参与企业生产经营决策，编制财务分析资料，供领导决策参考；",
-                  "9、筹集、调度资金，保证企业生产及经营管理的正常运行对资金的需求；",
-                  "10、审批会计凭证及各项资金和费用；",
-                  "11、监督和参与企业重大采购、投资、资产处置及工程招投标活动；",
-                  "12、组织财经法规、财务制度的宣传工作。",
-                ],
-                属员管理: [
-                  "13、开展本部门员工的绩效管理工作，对员工任免提出意见；",
-                  "14、组织部门员工培训工作，督导企业会计人员的政治学习和业务学习，加强团队建设与廉政作风建设，增强团队凝聚力。",
                 ],
+                部门管理: ["根据企业管理规范，……"],
+                业务管理: ["协助分管财务厂长完善全厂的财务管理体系，……"],
+                属员管理: ["开展本部门员工的绩效管理工作，……"],
                 安全职责: [
-                  "15、保证国家安全生产法规和厂安全生产规章制度在本部门的贯彻执行，对本部门的安全工作负全面责任，健全安全机构，层层落实安全生产责任。",
+                  "保证国家安全生产法规和厂安全生产规章制度在本部门的贯彻执行，……",
-                  "16、贯彻“五同时”的原则，即在计划、布置、检查、总结、评比生产工作的同时，同时计划、布置、检查、总结、评比安全工作。",
-                  "17、监督检查本部门对安全生产各项规章制度的执行情况，及时纠正“三违”行为。",
-                  "18、组织制订并实施本部门安全生产管理规定、安全技术操作规程、安全技术措施计划。",
-                  "19、负责组织对部门职工进行经常性的安全思想、安全知识和安全技术教育培训；组织并参加厂组织的安全活动，至少组织两次部门的安全活动，掌握其部门存在的危险因素、防范措施及事故应急措施。",
-                  "20、负责组织本部门安全检查，每季度参加本部门安全检查一次以上，落实隐患整改，保证生产设备、安全设施、消防设施、防护器材等处于完好状态，并教育职工加强维护、正确使用。",
-                  "21、负责本部门的应急管理，定期开展应急处置预案的演练及评估，发生事故应及时现场组织抢救，协助事故调查处理。",
-                  "22、负责组织分析本部门安全生产动态，向上级领导汇报本部门的安全生产情况。",
                 ],
-                临时代理工作: ["23、完成上级领导临时交办的其他工作任务。"],
+                临时代理工作: ["完成上级领导临时交办的其他工作任务，……"],
               },
               职权范围: {
-                所受监督:
+                所受监督: "企业资金安全、……",
-                  "企业资金安全、资金和费用的审批支付、资金调度、企业预算管理",
+                所施监督: "会计核算、……",
-                所施监督:
-                  "会计核算、财务分析、预算的执行与控制、资金与费用的支付、工程招投标",
                 工作权限: [
-                  "1、对企业财务预算的分解落实、资金及费用的支付有建议权和执行权；",
+                  "对企业财务预算的分解落实、资金及费用的支付有建议权和执行权……",
-                  "2、对企业内部财务管理制度有拟定权和监督权；",
-                  "3、企业重大采购、投资、资产处置及工程招投标有监督权；",
-                  "4、对财务会计人员的任用、考核、培训、晋升有建议权；",
-                  "5、对本部门费用的使用有支配权；",
-                  "6、对本厂安全工作有建议权，对本部门安全工作有决策权；",
-                  "7、有权拒绝违章指挥和强令冒险作业，并对他人违章作业加以劝阻和制止。",
                 ],
                 沟通关系企业内部: [
-                  "与企业领导就预算执行情况、财务分析、资金使用情况等进行请示、汇报；",
+                  "与企业领导就预算执行情况、财务分析、资金使用情况等……",
-                  "与厂内各科室就安全管理、财务预算、固定资产保管与处置等进行沟通。",
                 ],
                 沟通关系企业外部: [
-                  "与中烟公司财务部领导就本企业财务预算及资金使用情况等进行汇报；",
+                  "与中烟公司财务部领导就本企业财务预算及资金使用情况等……",
-                  "与银行、税务、财政、保险等单位就资金划拨、税收、财产保险等事项进行沟通。",
                 ],
               },
               工作环境与条件: {
-                工作时间: "不定时工作制",
+                工作时间: "办公班，实际工作时间8小时",
-                工作强度脑力劳动: "中",
+                工作强度脑力劳动: "高",
-                工作强度体力劳动: "低",
+                工作强度体力劳动: "高",
-                出差频度: "经常出差",
+                出差频度: "驻外工作",
                 主要工作场所: "室内",
                 工作环境的舒适性: "舒适",
-                工作环境的特殊性: ["无"],
+                工作环境的特殊性: ["无", "噪音"],
               },
             },
             任职资格: {
-              学历: "大专及以上",
+              学历: "<<大专及以上>>",
-              专业: "财会",
+              专业: "<<财会>>",
-              技术职称: "会计师及以上职称",
+              技术职称: "<<会计师及以上职称>>",
-              所需知识: "熟悉会计及税务法规，掌握财务及企业管理知识",
+              所需知识: "熟悉会计及税务法规，……",
-              所需技能或能力: [
+              所需技能或能力: ["具备较强的独立工作能力，……"],
-                "具备较强的独立工作能力、良好的沟通与团队协作能力、写作与表达能力；",
+              所需经历或经验: "行业工作经验5年以上，……",
-                "具备良好的人际交往和社会活动能力以及计划和执行能力；",
+              所需体能: "身体健康，……",
-                "对企业财务有较强的理解、分析和判断的能力；",
+              所需职业风格: "作风严谨，……",
-                "熟练掌握财务软件及办公软件。",
-              ],
-              所需经历或经验:
-                "行业工作经验5年以上，相关中层管理岗位工作经验2年以上。",
-              所需体能: "身体健康，精力充沛，能连续工作8小时以上",
-              所需职业风格:
-                "作风严谨、思维敏捷、开拓创新；为人诚实可靠、品行端正",
             },
             备注: "无",
           };
           this.comName = "JobDescription";
           this.comData = this.jobData;
+          this.comTitleEdit = true;
           this.renderComponent();
-
+        });
-        }
-      }
     },
     shotScreen() {
       this.jm.screenshot.shootDownload();
@@ -607,29 +529,29 @@ export default {
         type: "warning",
       });
       this.allowSave = true;
-      // this.jm.options.editable = true;
       this.jm.enable_edit();
     },
-    clickSave() {
+    cleanTreeData() {
       // 深复制对象
-      let deepClone = function (obj, newObj) {
+      // let deepClone = function (obj, newObj) {
-        var newObj = newObj || {};
+      //   var newObj = newObj || {};
-        for (let key in obj) {
+      //   for (let key in obj) {
-          if (typeof obj[key] == "object") {
+      //     if (typeof obj[key] == "object") {
-            newObj[key] = obj[key].constructor === Array ? [] : {};
+      //       newObj[key] = obj[key].constructor === Array ? [] : {};
-            deepClone(obj[key], newObj[key]);
+      //       deepClone(obj[key], newObj[key]);
-          } else {
+      //     } else {
-            newObj[key] = obj[key];
+      //       newObj[key] = obj[key];
-          }
+      //     }
-        }
+      //   }
-        return newObj;
+      //   return newObj;
-      };
+      // };
-      let resData = deepClone(this.jm.get_data("node_tree")["data"]);
+      // let resData = deepClone(this.jm.get_data("node_tree")["data"]);
+      let resData = this.jm.get_data("node_tree")["data"];
       // 去除id, expanded, direction
       let removeInvalidAttribution = function (data) {
-        if (data.hasOwnProperty("id")) {
+        // if (data.hasOwnProperty("id")) {
-          delete data.id;
+        //   delete data.id;
-        }
+        // }
         if (data.hasOwnProperty("expanded")) {
           delete data.expanded;
         }
@@ -638,14 +560,22 @@ export default {
         }
         if (data.hasOwnProperty("children")) {
           for (let i = 0; i < data.children.length; i++) {
+            if (data.children[i].topic == "新节点") {
+              data.children.splice(i, 1);
+              i -= 1;
+            } else {
               removeInvalidAttribution(data.children[i]);
             }
           }
+        }
       };
       removeInvalidAttribution(resData);
-
+      return resData;
+    },
+    clickSaveTree() {
+      let resData = this.cleanTreeData();
       // 发送请求
-      jobApi.modifyFramework(resData).then(
+      jobApi.modifyFramework({ data: resData }).then(
         (res) => {
           if (res.code === 0) {
             Message({
@@ -679,6 +609,7 @@ export default {
       // }, err => {
       //   console.log('err :', err);
       // })
+      console.log("Hello");
     },
     clickTest1() {
       console.log(this.depData);
@@ -687,10 +618,70 @@ export default {
       this.comName = "DepDescription";
       this.comData = "Hello";
     },
+    checkNewNodeValid(nodeName) {
+      if (nodeName.indexOf("<") != -1 || nodeName.indexOf(">") != -1) {
+        return "名称不能包含'<' 或 '>'";
+      }
+
+      // 不能有重复的兄弟
+      let brotherArr = this.curNewNode.parent.children;
+      for (let brother of brotherArr) {
+        if (brother.id != this.curNewNode.id) {
+          if (brother.topic == nodeName) {
+            return "名称与不能与兄弟节点重名";
+          }
+        }
+      }
+      return "合法名称";
+    },
     clickSaveDoc() {
+      // 增加节点，判断是否可添加
+      if (this.curNewNode) {
+        if (this.comName == "DepDescription") {
+          this.curDep = this.depData.部门名称;
+        } else {
+          this.curJob = this.jobData.岗位概况.岗位名称;
+        }
+        let nodeName =
+          this.comName == "DepDescription" ? this.curDep : this.curJob;
+        let msg = this.checkNewNodeValid(nodeName);
+        if (msg == "合法名称") {
+          // 保存修改到架构图
+          this.jm.update_node(this.curNewNode.id, nodeName);
+          // 发送保存架构图请求
+          let resData = this.cleanTreeData();
+          // 发送请求
+          jobApi.modifyFramework({ data: resData }).then(
+            (res) => {
+              if (res.code == 0) {
+              }
+            },
+            (err) => {
+              console.log("err: ", err);
+            }
+          );
+          // 还原curNewNode状态
+          this.curNewNode = null;
+        } else {
+          Message({
+            message: msg,
+            type: "error",
+            duration: 1 * 1000,
+          });
+          return;
+        }
+      }
+
+      // 修改节点
       if (this.comName === "DepDescription") {
-        // todo 整理数据
+        // 整理数据
-        console.log(this.depData)
+        // 去除两端空字符
+        for (let i of Object.keys(this.depData)) {
+          if (i == "是否为虚拟部门") {
+            continue;
+          }
+          this.depData[i] = this.depData[i].trim();
+        }
         // 部门保存
         jobApi
           .modifyDepartmentDetail({
@@ -712,10 +703,47 @@ export default {
             }
           );
       } else if (this.comName === "JobDescription") {
-        // 岗位保存
-
         // 整理数据
-        console.log(this.jobData);
+        let tinyData = function (data) {
+          for (let name in data) {
+            if (typeof data[name] == "string") {
+              data[name] = data[name].trim();
+            } else if (data[name] instanceof Array) {
+              // 去除 "双击添加"
+              let arr = data[name];
+              while (arr[arr.length - 1] == "双击添加") {
+                arr.pop();
+              }
+              // 去除 空字符串""
+              // for (let i = 0; i < arr.length; i++) {
+              //   if (arr[i].trim() == "") {
+              //     arr.splice(i, 1);
+              //     i -= 1;
+              //   }
+              // }
+
+              // 去除空数组
+              let deleteArr = [
+                "党风廉政建设",
+                "工作职责",
+                "部门管理",
+                "业务管理",
+                "属员管理",
+                "安全职责",
+                "临时代理工作",
+              ];
+              if (!arr.length && deleteArr.includes(name)) {
+                delete data[name];
+              }
+            } else if (data[name] instanceof Object) {
+              tinyData(data[name]);
+            } else {
+              // console.log(data[name]);
+            }
+          }
+        };
+        tinyData(this.jobData);
+        // 岗位保存
         jobApi
           .modifyJobDetail({
             data: this.jobData,
@@ -724,7 +752,7 @@ export default {
           })
           .then(
             (res) => {
-              if (res.code === 0) {
+              if (res.code) {
                 Message({
                   message: "保存成功",
                   type: "success",

vue.config.js

@@ -38,8 +38,8 @@ module.exports = {
     },
     proxy: {
       '/': {
-        target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        // target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
-        // target: 'http://192.168.31.102:8000',
+        target: 'http://192.168.31.102:8000',
         changeOrigin: true,
         pathRewrite: {
         }