完善sbTree

src/components/WorkTree/WorkTree.vue

@@ -1,18 +1,36 @@
 <template>
-  <div>
+  <div class="wrapper">
+    <div v-if="!list.length" >
+      <div class="branch-one">
+        <div class="condition-node-box">
+          <div class="line"></div>
+          <div class="deal-node-box" @click="click(list)">
+            <div class="audit-background head-row">
+              {{ list.taskName }}
+            </div>
+            <div class="foot-row">{{ list.approverName }}</div>
+            <a class="del-node" @click.stop="close(list)">×</a>
+          </div>
+          <div class="add-btn-box">
+            <button type="button" class="add-bar" @click="add(list)">+</button>
+          </div>
+        </div>
+        <work-tree v-if="list.children" :list="list.children"></work-tree>
+      </div>
+    </div>
     <div v-if="list.length == 1" >
-      <div v-for="(item, index) in list" :key="index" class="branch-one">
+      <div v-for="(item, index) in list" :key="index" class="branch-one" style="flex-grow:1;">
         <div class="condition-node-box">
           <div class="line"></div>
-          <div class="deal-node-box">
+          <div class="deal-node-box" @click="click(item)">
             <div class="audit-background head-row">
               {{ item.taskName }}
             </div>
             <div class="foot-row">{{ item.approverName }}</div>
-            <a class="del-node">×</a>
+            <a class="del-node" @click.stop="close(item)">×</a>
           </div>
           <div class="add-btn-box">
-            <button type="button" class="add-bar">+</button>
+            <button type="button" class="add-bar" @click="add(item)">+</button>
           </div>
         </div>
         <work-tree v-if="item.children" :list="item.children"></work-tree>
@@ -30,15 +48,15 @@
             <div class="branch-one">
               <div class="condition-node-box">
                 <div class="line"></div>
-                <div class="deal-node-box">
+                <div class="deal-node-box" @click="click(item)">
                   <div class="head-row" :class=" item.children? 'audit-background' : 'fill-background'">
                     {{ item.taskName }}
                   </div>
                   <div class="foot-row">{{ item.approverName }}</div>
-                  <a class="del-node">×</a>
+                  <a class="del-node" @click.stop="close(item)">×</a>
                 </div>
                 <div class="add-btn-box">
-                  <button type="button" class="add-bar">+</button>
+                  <button type="button" class="add-bar" @click="add(item)">+</button>
                 </div>
               </div>
             </div>
@@ -71,6 +89,20 @@ export default {
   },
   props: {
     list: [Array, Object]
+  },
+  methods: {
+    close (value) {
+      console.log(value)
+      this.$emit('close', value)
+    },
+    add (value) {
+      console.log(value)
+      this.$emit('close', value)
+    },
+    click (value) {
+      console.log(value)
+      this.$emit('click', value)
+    }
   }
 }
 </script>
@@ -83,18 +115,10 @@ export default {
 }
 
 .wrapper {
-  position: relative;
   width: 100%;
-  padding: 54.5px 0;
+  position: relative;
   display: flex;
-  align-items: flex-start;
   justify-content: center;
-  flex-wrap: wrap;
-  min-width: -webkit-min-content;
-  min-width: -moz-min-content;
-  min-width: min-content;
-  background-color: #f9fafc;
-  transform-origin: 0 0 0;
 }
 .deal-node-box .del-node {
   transition: all 0.2s ease;
@@ -134,7 +158,7 @@ export default {
 }
 .deal-node-box {
   position: relative;
-  width: 270px;
+  width: 200px;
   flex-shrink: 0;
   box-shadow: 0 4px 10px 0 rgba(12, 31, 80, 0.08);
   background-color: #fff;

src/views/sb/info/modules/Detail.vue

@@ -20,6 +20,7 @@
               <a-badge :count="numCheckjob" title="保养任务总数" :number-style="{ backgroundColor: '#52c41a' }">
                 <a-button style="margin-left: 20px" type="default" @click="handleViewCheckJob()">保养任务</a-button>
               </a-badge>
+              <a-button style="margin-left: 20px" type="default" @click="handleViewTree()">设备树</a-button>
               <a-button v-show="model.useType==4" style="margin-left: 8px" type="default" @click="handleMeasure()">检定记录</a-button>
               <a-button style="margin-left: 20px" type="error" @click="handleTuiCalendar(1)">保养日历</a-button>
               <a-button style="margin-left: 20px" type="default" @click="handleRepairReportSbInfo()">工单分析</a-button>
@@ -219,6 +220,7 @@
         </a-layout-content>
       </a-layout>
     </div>
+    <tree-modal ref="treeModal" @ok="handleOk"></tree-modal>
     <base-form ref="baseModal" @ok="handleOk"/>
     <detail-sb-bom ref="detailSbBomModal" @ok="handleOk"/>
     <detail-sb-check ref="detailSbCheckModal" @ok="handleOk"/>
@@ -232,6 +234,7 @@
 </template>
 
 <script>
+import TreeModal from './SbTreeModal.vue'
 import BaseForm from './BaseForm'
 import DetailList from '@/components/tools/DetailList'
 import RepairApplicationFormTable from '@/views/repair/application-form/modules/RepairApplicationFormTable'
@@ -263,6 +266,7 @@ const DetailListItem = DetailList.Item
 export default {
   name: 'SbInfoDetail',
   components: {
+    TreeModal,
     BaseForm,
     DetailList,
     DetailListItem,
@@ -417,6 +421,11 @@ export default {
     inited (viewer) {
       this.$viewer = viewer
     },
+    handleViewTree () {
+      const routeUrl = this.$router.resolve({ path: '/tree', query: { parentId: this.model.id, parentName: this.model.name } })
+      // let routeUrl = this.$router.resolve(`/share/${96}`)
+      window.open(routeUrl.href, '_blank')
+    },
     handleViewBom (record) {
       const routeUrl = this.$router.resolve({ path: '/sb/modelbom', query: { id: this.model.id } })
       window.open(routeUrl.href, '_blank')
@@ -546,6 +555,7 @@ export default {
     },
     handleOk () {
       this.confirmLoading = true
+      this.modalTitle = '详情'
       this.visible = true
       fetchSbInfo({ id: this.model.id }).then(res => {
         this.confirmLoading = false

src/views/sb/info/modules/SbTreeModal.vue

@@ -1,7 +1,10 @@
 <template>
-  <a-card v-show="visibleTree" :title="modalTitle" bordereds >
+  <div v-show="visibleTree" class="container">
+
+    <!-- <a-button style="margin: 20px;float:right;" type="primary" @click="handleBack()">返回</a-button> -->
+
     <work-tree :list="list"></work-tree>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -13,9 +16,8 @@ export default {
   },
   data () {
     return {
-      modalTitle: '设备树',
       visibleTree: true,
-      list: [
+      list:
         {
           taskName: '流程1',
           approverName: '审计测试人员,test1',
@@ -25,342 +27,54 @@ export default {
               approverName: 'admin,审计局',
               children: [
                 { taskName: '流程2', approverName: 'admin,审计局' },
-                { taskName: '流程2', approverName: 'admin,审计局' }
+                {
+                  taskName: '流程2',
+                  approverName: 'admin,审计局',
+                  children: [
+                    { taskName: '流程2', approverName: 'admin,审计局' },
+                    { taskName: '流程2', approverName: 'admin,审计局' }
+                  ]
+                }
               ]
             },
             {
               taskName: '流程2',
               approverName: 'admin,审计局',
               children: [
-                { taskName: '流程2', approverName: 'admin,审计局' }
+                {
+                  taskName: '流程2',
+                  approverName: 'admin,审计局',
+                  children: [
+                    { taskName: '流程2', approverName: 'admin,审计局' },
+                    { taskName: '流程2', approverName: 'admin,审计局' }
+                  ]
+                }
               ]
             }
           ]
-        },
-        { taskName: '流程3', approverName: '审计单位账号,admin' }
-      ]
+        }
+    }
+  },
+  methods: {
+    base (record) {
+      this.visibleTree = true
+      console.log(record)
+    },
+    handleBack () {
+      this.visibleTree = false
+
+      this.$emit('ok')
     }
   }
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 
-*,
-:after,
-:before {
-  box-sizing: border-box;
-}
-
-.wrapper {
+.container{
   position: relative;
   width: 100%;
-  padding: 54.5px 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-wrap: wrap;
-  min-width: -webkit-min-content;
-  min-width: -moz-min-content;
-  min-width: min-content;
-  background-color: #f9fafc;
-  transform-origin: 0 0 0;
-}
-.deal-node-box .del-node {
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.deal-node-box .head-row{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.deal-node-box .foot-row .footnote{
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.audit-background {
-  background: linear-gradient(89.96deg, #fa6f32 0.05%, #fb9337 79.83%);
-}
-.fill-background {
-  background: linear-gradient(90.04deg, #268bfb -16.37%, #33e1ae 137.34%);
-}
-.flow-parent-box {
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  min-height: 180px;
-  width: 100%;
-  padding: 0 50px;
-}
-.deal-node-box,
-.flow-parent-box {
-  display: inline-flex;
-  flex-direction: column;
-}
-.deal-node-box {
-  position: relative;
-  width: 270px;
-  flex-shrink: 0;
-  box-shadow: 0 4px 10px 0 rgba(12, 31, 80, 0.08);
-  background-color: #fff;
-  cursor: pointer;
-  border-radius: 8px;
-}
-.deal-node-box .head-row {
-  width: 100%;
-  height: 50px;
-  border-radius: 8px 8px 0 0;
-  color: #fff;
-  padding: 0 14px;
-}
-.deal-node-box .head-row .user-name {
-  width: 100%;
-  font-weight: 500;
-}
-.deal-node-box .head-row > .iconfont {
-  font-size: 24px;
-  opacity: 0.3;
-}
-.deal-node-box .foot-row {
-  padding: 0 15px;
-  color: #6b737b;
-}
-.deal-node-box .foot-row .auditor-container {
-  padding-top: 10px;
-  font-size: 14px;
-}
-.deal-node-box .foot-row .auditor-container-hint {
-  color: #b0b0b9;
-}
-.deal-node-box .foot-row .footnote {
-  position: relative;
-  height: 40px;
-  color: #6b737b;
-  border-top: 1px solid #f5f5f7;
-  font-family: QingflowFont, sans-serif;
-}
-.deal-node-box .footer-profile {
-  padding: 10px 15px;
-}
-.deal-node-box .footer-profile .footnote {
-  margin-bottom: -10px;
-}
-.deal-node-box .del-node {
-  cursor: pointer;
-  opacity: 0;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  position: absolute;
-  right: -15px;
-  top: -15px;
-}
-.deal-node-box .del-node i {
-  font-size: 20px;
-  color: #acb3bd;
-}
-.deal-node-box .del-node:before {
-  content: "";
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  bottom: -10px;
-  left: -10px;
-}
-.deal-node-box:hover .del-node {
-  opacity: 1;
-}
-.cut-node .foot-row,
-.cut-node .head-row {
-  opacity: 0.4;
-}
-.line-in-middle {
-  width: 240px;
-  min-height: 90px;
-  display: inline-flex;
-  flex-shrink: 0;
-  flex-grow: 1;
-  position: relative;
-}
-.line-in-middle .line {
-  position: absolute;
-  right: 50%;
-  width: 1px;
-  height: 100%;
-  background-color: #ccd4e0;
-}
-.add-btn-box {
-  width: 100%;
-  padding: 30px 0;
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-  flex-grow: 1;
-}
-.add-bar {
-  width: 30px;
-  height: 30px;
-  background-color: #fff;
-  box-shadow: 0 4px 10px 0 rgba(12, 31, 80, 0.08);
-  border-radius: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  z-index: 1;
-  position: relative;
-  outline: none;
-  border: none;
-  color: #fb9337;
-}
-.add-bar i {
-  font-size: 10px;
-  display: inline-block;
-  margin: auto;
-}
-.add-bar:hover {
-  background-color: #fb9337;
-  color: #fff;
-}
-.line-in-middle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.branch-box .add-branch {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.flow-child-box {
-  display: inline-flex;
-}
-.branch,
-.flow-child-box {
-  width: 100%;
-  flex-shrink: 0;
-}
-.branch {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: center;
-  min-height: 270px;
-}
-.branch-box {
-  overflow: visible;
-  min-height: 180px;
-  height: auto;
-  border-bottom: 1px solid #dfdfe8;
-  border-top: 1px solid #dfdfe8;
-  position: relative;
-  display: flex;
-}
-.branch-box .col-box {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.branch-box .col-box .bottom-left-cover-line,
-.branch-box .col-box .bottom-right-cover-line,
-.branch-box .col-box .top-left-cover-line,
-.branch-box .col-box .top-right-cover-line {
-  position: absolute;
-  height: 3px;
-  width: 50%;
-  background: #f9fafc;
-}
-.branch-box .col-box .top-left-cover-line {
-  top: -2px;
-  left: 0;
-}
-.branch-box .col-box .top-right-cover-line {
-  top: -2px;
-  right: 0;
-}
-.branch-box .col-box .bottom-left-cover-line {
-  bottom: -2px;
-  left: 0;
-}
-.branch-box .col-box .bottom-right-cover-line {
-  bottom: -2px;
-  right: 0;
-}
-.line-in-middle {
-  width: 240px;
-  min-height: 90px;
-  position: relative;
-}
-.line-in-middle .line {
-  position: absolute;
-  left: 50%;
-  width: 1px;
-  height: 100%;
-  background-color: #dfdfe8;
-}
-.condition-node-box .auto-judge .del-btn,
-.transition {
-  transition: all 0.2s ease;
-}
-.condition-node-box .auto-judge .del-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.condition-node-box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.condition-node-box .auto-judge .foot-row,
-.inline-flex-sc {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.single-line-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.animated {
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-.branch-one {
-  min-height: 220px;
-  display: inline-flex;
-}
-.condition-node-box,
-.branch-one {
-  flex-direction: column;
-  flex-grow: 1;
-}
-.condition-node-box {
-  position: relative;
-  min-height: 100%;
-  padding: 30px 50px 0;
-}
-.condition-node-box .line {
-  position: absolute;
-  top: 0;
-  width: 1px;
-  height: 100%;
-  background-color: #dfdfe8;
-}
-.condition-node-box .del-btn {
-  opacity: 1;
-}
-.del-node {
-  color: #fa6f32;
-}
-.end-node {
-  text-align: center;
+overflow-x:scroll;
+overflow-y: hidden;
 }
 </style>