完成OKR对齐视图

quasar.conf.js

@@ -48,7 +48,7 @@ module.exports = function (ctx) {
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
       env: ctx.dev ? {
-        API: 'http://192.168.1.27:8300/api'
+        API: 'http://192.168.1.13:8085/api'
       } : {
         API: 'http://eduapi.oytour.com/api'
       },

src/App.vue

@@ -175,7 +175,9 @@ body,
 .micfont {
     font-family: perfectFont !important;
 }
-
+.fixed-right, .absolute-right{
+    overflow: unset;
+}
 .dialog-out-close {
     background: var(--q-color-primary);
     position: absolute !important;

src/api/okr/work.js

@@ -281,4 +281,11 @@ export function queryUserOKRNextAlignView(data){
     method: 'post',
     data
   })
+}
+export function queryOtherSignObjective(data){
+  return request({
+    url: '/OKRPeriod/GetOKROthersObjectiveInfo',
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file

src/components/okr/okr-add.vue

@@ -197,23 +197,7 @@
                     </q-item-section>
                     <q-item-section>提交审核</q-item-section>
                   </q-item>
-                  <q-item
-                    class="items-center"
-                    clickable
-                    v-ripple
-                    v-if="newObjective.Status == 3 || newObjective.Status == 4"
-                    @click="setObjectiveStatus"
-                  >
-                    <q-item-section avatar>
-                      <inline-svg
-                        class="svg-icon svg-icon-g-p"
-                        src="icons/svg/General/Shield-check.svg"
-                        width="20px"
-                        height="20px"
-                      ></inline-svg>
-                    </q-item-section>
-                    <q-item-section>提交审核</q-item-section>
-                  </q-item>
+                  
                   <q-item
                     class="items-center"
                     clickable

src/components/okr/okr-align.vue

 <template>
-  <div class="absolute flex row " style="width:500px;z-index:999;" :style="{'left':direction=='up'?'15px':'15px','top':direction=='up'?'-16px':'11px'}">
+  <div
+    class="absolute flex row "
+    style="width:500px;z-index:999;"
+    :style="{
+      left: direction == 'up' ? '15px' : '15px',
+      top: direction == 'up' ? '-16px' : 'unset',
+      bottom: direction == 'up' ? 'unset' : '13px'
+    }"
+  >
     <svg
       width="24px"
       height="24px"
       style="margin-right:8px"
-      :style="{'transform':direction=='up'?'rotate(0deg)':'rotateX(180deg)','margin-top':direction=='up'?'7px':'4px'}"
+      :style="{
+        transform: direction == 'up' ? 'rotate(0deg)' : 'rotateX(180deg)',
+        'margin-top': direction == 'up' ? '7px' : '4px'
+      }"
       viewBox="0 0 24 24"
       version="1.1"
-      v-if="!showOnly || (showOnly && obj.ParentList.length>0 && direction=='up')||(showOnly && obj.ChildList.length>0 && direction=='down')"
+      v-if="
+        !showOnly ||
+          (showOnly && obj.ParentList.length > 0 && direction == 'up') ||
+          (showOnly && obj.ChildList.length > 0 && direction == 'down')
+      "
     >
       <g
         id="shangduiqi"
@@ -27,8 +42,8 @@
     <template v-for="(x, i) in obj.ParentList">
       <div
         class="hover-primary remark-font cursor-pointer q-mr-xs"
-        :style="{'margin-top':direction=='up'?'0px':'20px'}"
-        v-if="x.AlignList.length > 0 && direction=='up'"
+        :style="{ 'margin-top': direction == 'up' ? '0px' : '20px' }"
+        v-if="x.AlignList.length > 0 && direction == 'up'"
         :key="i"
       >
         <span>{{ x.AccountName }}</span
@@ -46,11 +61,11 @@
         </q-popup-proxy>
       </div>
     </template>
-    <template  v-for="(x, i) in obj.ChildList">
+    <template v-for="(x, i) in obj.ChildList">
       <div
         class="hover-primary remark-font cursor-pointer q-mr-xs"
-        :style="{'margin-top':direction=='up'?'0px':'18px'}"
-        v-if="x.AlignList.length > 0 && direction=='down'"
+        :style="{ 'margin-top': direction == 'up' ? '0px' : '18px' }"
+        v-if="x.AlignList.length > 0 && direction == 'down'"
         :key="i"
       >
         <span>{{ x.AccountName }}</span
@@ -67,7 +82,10 @@
         </q-popup-proxy>
       </div>
     </template>
-    <div class="hover-primary remark-font cursor-pointer" v-if="direction=='up' && !showOnly">
+    <div
+      class="hover-primary remark-font cursor-pointer"
+      v-if="direction == 'up' && !showOnly"
+    >
       <q-icon
         name="iconfont icon-add"
         class="cursor-pointer"
@@ -75,7 +93,11 @@
       ></q-icon>
       <span>添加对齐</span>
       <q-popup-proxy style="z-index: 9999;">
-        <search-okr :period-id="periodId" :source-id="obj.Id" @add="addNewAlign"></search-okr>
+        <search-okr
+          :period-id="periodId"
+          :source-id="obj.Id"
+          @add="addNewAlign"
+        ></search-okr>
       </q-popup-proxy>
     </div>
   </div>
@@ -85,7 +107,7 @@
 import searchOkr from "./search-okr";
 import alignInfo from "./align-info";
 export default {
-  props: ["obj", "periodId",'direction','showOnly'],
+  props: ["obj", "periodId", "direction", "showOnly"],
   components: {
     searchOkr,
     alignInfo

src/components/okr/okr-details-info.vue

+<template>
+  <q-card
+    style="margin-top:61px;width:600px;overflow:unset;"
+    class="no-border-radius"
+    v-if="node"
+  >
+    <q-card-section class="row items-center">
+      <q-avatar
+        size="40px"
+        font-size="18px"
+        rounded
+        color="blue-2"
+        text-color="blue-13"
+      >
+        <img :src="node.EmPhoto" v-if="node.EmPhoto" />
+        <span v-else-if="node.EmName">{{ node.EmName.substring(0, 1) }}</span>
+      </q-avatar>
+      <div class="text-h6 col q-mx-md">{{ node.EmName }}</div>
+      <div class="text-primary cursor-pointer" @click="openObjective(node)">
+        查看详情
+      </div>
+    </q-card-section>
+    <q-card-section v-if="newObjective">
+      <okr-add
+        :objective="newObjective"
+        :show-only="true"
+        class="q-mb-lg"
+        :audit-mode="false"
+        :user-id="0"
+      ></okr-add>
+    </q-card-section>
+    <div
+      class="dialog-out-close"
+      v-close-popup
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;"
+    >
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+  </q-card>
+</template>
+
+<script>
+import okrAdd from "./okr-query";
+import { queryOtherSignObjective, querySignObject } from "../../api/okr/work";
+import { mapGetters } from "vuex";
+export default {
+  props: ["obj", "proid"],
+  components: {
+    okrAdd
+  },
+  data() {
+    return {
+      node: {},
+      newObjective: null
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"])
+  },
+  watch: {
+    obj: {
+      handler(newValue, oldValue) {
+        this.node = newValue;
+        this.newObjective=null
+        this.updatedObjective();
+      },
+      immediate: true,
+      isDeep: true
+    }
+  },
+  methods: {
+    openObjective(x) {
+      let obj = {
+        Id: x.UserId,
+        EmployeeName: x.EmName,
+        UserIcon: x.EmPhoto
+      };
+      this.$root.$emit("openUserObj", obj);
+    },
+    updatedObjective() {
+      if (this.userInfo.Id == this.node.UserId) {
+        querySignObject({ ObjectiveId: this.node.Id }).then(r => {
+          this.newObjective = r.Data;
+          this.$forceUpdate();
+        });
+      } else {
+        queryOtherSignObjective({
+          ObjectiveId: this.node.Id,
+          PeriodId: this.proid,
+          UserId: this.node.UserId
+        }).then(r => {
+          this.newObjective = r.Data;
+          this.$forceUpdate();
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/okr-query.vue

@@ -2,15 +2,17 @@
   <q-card class="q-py-md no-shadow q-mr-md okr-add">
     <q-input
       v-model="newObjective.Title"
+      type="textare"
       autogrow
       ref="obj_content"
       :outlined="newBoxState"
       :placeholder="newObjective.placeHolder"
-      :style="{ 'margin-left': newBoxState ? '-12px' : '15px' }"
+      :style="{ 'margin-left': newBoxState ? '-12px' : '15px'}"
+      :input-style="{'padding-bottom':(newObjective.ChildList && newObjective.ChildList.length > 0 )?'20px':''}"
       readonly
     >
       <template v-slot:before>
-        <div class="relative-position" v-if="!newBoxState">
+        <div class="relative-position" style="height:100%;margin-top:30px;" v-if="!newBoxState">
           <inline-svg
             class="svg-icon"
             :class="{
@@ -304,7 +306,7 @@
         </div>
       </div>
       <q-card flat class="q-mt-md">
-      <q-card-section>
+      <q-card-section v-if="newObjective.AuditUserName && newObjective.AuditUserName!=''">
         <div class="flex row items-center">
           <q-avatar
             size="40px"

src/components/relation/core4vue/SeeksGraphMath.js

@@ -492,7 +492,8 @@ var SeeksGraphMath = {
     }
   },
   conductStrengthToParents(node) {
-    if (node.lot.parent) {
+    console.log("寻找parent:",node.id,node.lot.parent)
+    if (node.lot.parent && !node.nodeParent) {
       node.lot.parent.lot.strengthWithChilds += 1
       this.conductStrengthToParents(node.lot.parent)
     }

src/components/relation/core4vue/SeeksRGUtils.js

@@ -98,7 +98,11 @@ SeeksRGUtils.json2Node = function(originData) {
     disableDrag: originData.disableDrag !== undefined ? originData.disableDrag : false,
     data: originData.data !== undefined ? originData.data : {},
     childNum:originData.childNum !==undefined?originData.childNum:0,
-    nodeParent:originData.nodeParent!==undefined?originData.nodeParent:false
+    nodeParent:originData.nodeParent!==undefined?originData.nodeParent:false,
+    rightNode:originData.rightNode!==undefined?originData.rightNode:false,
+    rootId:originData.rootId!==undefined?originData.rootId:'',
+    rightRootId:originData.rightRootId!==undefined?originData.rightRootId:'',
+    sourceData:originData.sourceData!==undefined?originData.sourceData:{}
   }
   if(jsonData.lot === undefined) jsonData.lot = { childs: [], parent: undefined, eached: false, strength: 0 }
   if(jsonData.lot.childs === undefined) jsonData.lot.childs = []

src/pages/okr/okr-align-view.vue

@@ -9,9 +9,13 @@
         :options="graphOptions"
         :on-node-expand="onNodeExpand"
         :on-node-collapse="onNodeCollapse"
+        :on-node-click="onNodeClick"
       >
       </SeeksRelationGraph>
     </div>
+    <q-dialog v-model="showOkrInfo" maximized full-height  seamless position="right">
+      <okr-detail-info :obj="chosenObj" :proid="proid"></okr-detail-info>
+    </q-dialog>
   </div>
 </template>
 
@@ -21,8 +25,9 @@ import {
   queryUserOKRNextAlignView
 } from "../../api/okr/work";
 import SeeksRelationGraph from "../../components/relation/index";
+import okrDetailInfo from '../../components/okr/okr-details-info'
 export default {
-  components: { SeeksRelationGraph },
+  components: { SeeksRelationGraph,okrDetailInfo },
   data() {
     return {
       g_loading: true,
@@ -46,11 +51,11 @@ export default {
           }
         ],
         defaultLineMarker: {
-          'markerWidth': 12,
-          'markerHeight': 12,
-          'refX': 6,
-          'refY': 6,
-          'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
+          markerWidth: 12,
+          markerHeight: 12,
+          refX: 6,
+          refY: 6,
+          data: "M2,2 L10,6 L2,10 L6,6 L2,2"
         },
         defaultExpandHolderPosition: "right",
         defaultNodeShape: 1,
@@ -60,15 +65,17 @@ export default {
         defaultNodeBorderWidth: 0,
         defaultLineColor: "#cecece",
         defaultNodeColor: "rgba(255,255,255,1)",
-        defaultNodeFontColor: "rgba(0,0,0,1)"
+        defaultNodeFontColor: "rgba(0,0,0,1)",
       },
-      proid: 51,
+      proid: 53,
       rootObjList: [],
       graph_json_data: {
         rootId: "0",
         nodes: [],
         links: []
-      }
+      },
+      showOkrInfo:false,
+      chosenObj:null
     };
   },
   created() {},
@@ -84,6 +91,10 @@ export default {
         this.genernalNodes();
       });
     },
+    onNodeClick(nodeObject, $event) {
+      this.chosenObj=nodeObject.sourceData
+      this.showOkrInfo=true
+    },
     genernalNodes() {
       let node = {
         id: "0",
@@ -91,22 +102,32 @@ export default {
         text: "111"
       };
       this.graph_json_data.nodes.push(node);
-      this.rootObjList.forEach((x,i) => {
-        let q=`main-${this.randomString()}`
-        this.graph_json_data.nodes.push(this.formatNode(x, q));
+      this.rootObjList.forEach((x, i) => {
+        let q = `main-${this.randomString()}`;
+        // if(x.ChildList&&x.ChildList.length>0){
+        //   let tempChild=JSON.parse(JSON.stringify(x.ChildList[0]))
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        // }
+        this.graph_json_data.nodes.push(this.formatNode(x, q, false));
         this.graph_json_data.links.push(
           this.formatLink("0", `${q}_${x.Id}`, true)
         );
         x.ChildList.forEach(y => {
-          let qy=`child-${this.randomString()}`
-          this.graph_json_data.nodes.push(this.formatNode(y, qy));
+          let qy = `child-${this.randomString()}`;
+          let newNode=this.formatNode(y, qy, false)
+          // newNode.rightRootId=`${q}_${x.Id}`
+          this.graph_json_data.nodes.push(newNode);
           this.graph_json_data.links.push(
             this.formatLink(`${q}_${x.Id}`, `${qy}_${y.Id}`, false)
           );
         });
+       
         x.ParentList.forEach(z => {
-          let zy=`parent-${this.randomString()}`
-          this.graph_json_data.nodes.push(this.formatNode(z, zy,true));
+          let zy = `parent-${this.randomString()}`;
+          this.graph_json_data.nodes.push(this.formatNode(z, zy, true));
           this.graph_json_data.links.push(
             this.formatLink(`${zy}_${z.Id}`, `${q}_${x.Id}`, false)
           );
@@ -120,14 +141,18 @@ export default {
             this.graph_json_data.rootId
           ).lot.childs;
           level_1_nodes.forEach(thisLevel1Node => {
+            if(!thisLevel1Node.nodeParent){
+              thisLevel1Node.parentExpanded=false
+            }
             this.applyCollapseStyle2Node(thisLevel1Node);
+            
           });
           this.$refs.seeksRelationGraph.refresh();
         }
       );
     },
     randomString() {
-      let length=6
+      let length = 6;
       var str =
         "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
       var result = "";
@@ -142,7 +167,7 @@ export default {
       }
       let node = {
         id,
-        disableDrag: false,
+        disableDrag: true,
         html: this.formatHtml(
           obj.EmName,
           obj.ProgressState,
@@ -156,13 +181,13 @@ export default {
           ? obj.ChildNum
           : 0
       };
-      if (prev.indexOf('child') != -1) {
+      if (prev.indexOf("child") != -1) {
         node.childNum = obj.ChildList
           ? obj.ChildList.length
           : obj.ChildNum
           ? obj.ChildNum
           : 0;
-      } else if (prev.indexOf('parent') != -1) {
+      } else if (prev.indexOf("parent") != -1) {
         node.childNum = obj.ParentList
           ? obj.ParentList.length
           : obj.ParentNum
@@ -183,10 +208,14 @@ export default {
         };
         node.expandHolderPosition = "left";
         node.expanded = false;
-        if (isParent) {
-          node.nodeParent=true          
-        }
+
+        console.log("接收到父级：", obj, node);
+      }
+      if (isParent) {
+        node.nodeParent = true;
+        node.rootId=node.id
       }
+      node.sourceData=obj
       return node;
     },
     formatLink(from, to, isHide) {
@@ -198,10 +227,16 @@ export default {
       };
     },
     formatHtml(name, status, progress, statusName, title) {
-      let html = `<div class="parent-card"><div class="o-card flex row"><div class="col-auto q-mr-xs"><div style="width:20px;height:20px;font-size:14px;" class="bg-green-2 text-green vertical-middle rounded-borders text-center">${name.substring(
+      let color='primary'
+      if(status==2){
+        color="warning"
+      }else if(status==3){
+        color="negative"
+      }
+      let html = `<div class="parent-card"><div class="o-card flex row" style="border-left:3px solid var(--q-color-${color})"><div class="col-auto q-mr-xs"><div style="width:20px;height:20px;font-size:14px;" class="bg-green-2 text-green vertical-middle rounded-borders text-center">${name.substring(
         0,
         1
-      )}</div></div><div class="col q-ml-xs"><div class="flex row q-mb-xs"><div class="text-grey col f12">${name}</div><div class="text-negative text-weight-bold f12">${statusName} ${progress}%</div></div><div class="q-mt-xs ellipsis-2-lines" title="${title}">${title}</div></div></div></div>`;
+      )}</div></div><div class="col q-ml-xs"><div class="flex row q-mb-xs"><div class="text-grey col f12">${name}</div><div class="text-${color} text-weight-bold f12">${statusName} ${progress}%</div></div><div class="q-mt-xs ellipsis-2-lines" title="${title}">${title}</div></div></div></div>`;
       return html;
     },
     onSizeOptionChanged() {
@@ -217,8 +252,9 @@ export default {
       // _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
       if (_node.lot.childs.length > 0) {
         _node.lot.childs.forEach(thisChildNode => {
-          thisChildNode.isShow = false;
-          this.applyCollapseStyle2Node(thisChildNode);
+         
+            thisChildNode.isShow = false;
+            this.applyCollapseStyle2Node(thisChildNode);
         });
         _node.expanded = false;
         _node.expandHolderPosition = "right";
@@ -251,9 +287,9 @@ export default {
       });
     },
     loadChildNodesFromRemoteServer(node, callback) {
-      let Type=2
-      if(node.id.indexOf('parent')!=-1){
-        Type=1
+      let Type = 2;
+      if (node.id.indexOf("parent") != -1) {
+        Type = 1;
       }
       queryUserOKRNextAlignView({
         PeriodId: this.proid,
@@ -265,16 +301,29 @@ export default {
             nodes: [],
             links: []
           };
-          let zy=`child-${this.randomString()}`
-          if(node.id.indexOf('parent')!=-1){
-            zy=`parent-${this.randomString()}`
-          }
+          let zy = `child-${this.randomString()}`;
+          // if (node.id.indexOf("parent") != -1) {
+          //   zy = `parent-${this.randomString()}`;
+          // }
           r.Data.forEach(x => {
-            _new_json_data.nodes.push(this.formatNode(x, zy));
-            if(zy.indexOf('child')!=-1){
-              _new_json_data.links.push(this.formatLink(node.id, `${zy}_${x.Id}`, false));
-            }else{
-               _new_json_data.links.push(this.formatLink(`${zy}_${x.Id}`,node.id, false));
+            //_new_json_data.nodes.push(this.formatNode(x, zy));
+            let newNode=this.formatNode(x, zy)
+            if(node.nodeParent||node.rightNode){
+              newNode.rightNode=newNode
+              newNode.rootId=node.rootId
+            }else if(node.rightRootId){
+              newNode.rightRootId=node.rightRootId
+            }
+
+            _new_json_data.nodes.push(newNode);
+            if (zy.indexOf("child") != -1) {
+              _new_json_data.links.push(
+                this.formatLink(node.id, `${zy}_${x.Id}`, false)
+              );
+            } else {
+              _new_json_data.links.push(
+                this.formatLink(`${zy}_${x.Id}`, node.id, false)
+              );
             }
           });
           callback(_new_json_data);