优化资料填报的样式

src/styles/data-fill/wbs.scss

@@ -7,6 +7,10 @@
         position: relative;
         background: #f1f5f8;
         border-radius: 10px;
+        transition: 0.2s;
+        margin-right: 24px;
+        margin-left: -24px;
+        visibility: hidden;
         box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
         .horizontal-drag-line {
             position: absolute;
@@ -90,12 +94,18 @@
                 }
             }
         }
+        &.on-transition {
+            transition: none;
+        }
+        &.show {
+            margin-left: 0;
+            visibility: visible;
+        }
     }
     .hc-layout-content-box {
         flex: 1;
         display: inline-grid;
         position: relative;
-        margin-left: 24px;
         .data-fill-foot-box {
             position: absolute;
             bottom: 0;

src/views/data-fill/wbs.vue

@@ -3,25 +3,12 @@
         <HcCard id-ref="wbs-node-tree-card-target" v-if="wbsTypeTabKey === 'map'">
             <template #header>
                 <HcTooltip keys="wbs_views_division_btn">
-                    <el-button type="primary" hc-btn @click="divisionClick">
+                    <el-button type="primary" class="mr-10" hc-btn @click="divisionClick">
                         <HcIcon name="node-tree" :line="false"/>
                         <span>划分变更</span>
                     </el-button>
                 </HcTooltip>
-                <HcTooltip keys="wbs_views_drawings" v-if="isDrawer">
-                    <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings">
-                        <HcIcon name="image"/>
-                        <span>查看图纸</span>
-                    </el-button>
-                </HcTooltip>
-                <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')" v-if="isDrawer">
-                    <HcIcon name="folder-user"/>
-                    <span>施工自检</span>
-                </el-button>
-                <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')" v-if="isDrawer">
-                    <HcIcon name="folder-shield"/>
-                    <span>监理质检</span>
-                </el-button>
+                <HcNewSwitch :datas="authBtnTabdata" :keys="authBtnTabKey" @change="authBtnTabClick" size="default" :round="false" v-if="isDrawer"/>
             </template>
             <template #extra>
                 <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
@@ -73,11 +60,21 @@
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="wbs_abolish" v-if="NodeStatus === '3'">
-                        <el-button hc-btn @click="abolishOneClick">
+                        <el-button hc-btn>
                             <HcIcon name="arrow-go-back"/>
                             <span>撤回上报流程</span>
                         </el-button>
                     </HcTooltip>
+                    <HcTooltip keys="wbs_views_drawings">
+                        <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings">
+                            <HcIcon name="image"/>
+                            <span>图纸</span>
+                        </el-button>
+                    </HcTooltip>
+                    <el-button hc-btn @click="viewsDrawings">
+                        <HcIcon name="file"/>
+                        <span>附件</span>
+                    </el-button>
                     <el-button hc-btn @click="drawerClose">
                         <HcIcon name="close"/>
                         <span>关闭填报页面</span>
@@ -86,7 +83,7 @@
             </HcDrawer>
         </HcCard>
         <div class="hc-layout-box" v-if="wbsTypeTabKey === 'tree'">
-            <div class="hc-layout-left-box" id="wbs-left-tree" :style="'width:' + leftWidth + 'px;'" v-if="true">
+            <div class="hc-layout-left-box" id="wbs-left-tree" :style="'width:' + (isWbsTreeShow ? leftWidth : 0) + 'px;'" :class="[isWbsTreeShow?'show':'', isMouseTree ? 'on-transition':'']">
                 <div class="hc-project-box">
                     <div class="hc-project-icon-box">
                         <HcIcon name="stack"/>
@@ -136,7 +133,6 @@
                                       @nodeLoading="ElTreeNodeLoading"
                                       ref="wbstree"
                                       :treeKey="wbstreeKey"
-
                                        />
                                 </template>
                             </KeepAlive>
@@ -153,35 +149,15 @@
                 <div class="horizontal-drag-line" @mousedown="onmousedown"/>
             </div>
             <div class="hc-layout-content-box">
-                <!-- <div  class="hc-layout-content-box-lefticon" v-if="isShowLefticon">
-                      <el-icon><CaretLeft @click="isHiddenleftbox"  /></el-icon>
-                </div>
-                  <div  class="hc-layout-content-box-righticon" v-else>
-                      <el-icon><CaretRight @click="isShowleftbox" /></el-icon>
-                </div> -->
-                 <div class="hc-arrow-icon hc-layout-content-box-lefticon" v-if="isShowLefticon" @click="isHiddenleftbox">
-                    <HcIcon name="arrow-left" />
-                </div>
-                <div class="hc-arrow-icon hc-layout-content-box-righticon" v-else @click="isShowleftbox">
-                    <HcIcon name="arrow-right" />
+                <!---展开收缩树-->
+                <div class="hc-expansion-contraction-tree" @click="setWbsTreeShow">
+                    <HcIcon name="arrow-left-s" v-show="isWbsTreeShow"/>
+                    <HcIcon name="arrow-right-s" v-show="!isWbsTreeShow"/>
                 </div>
+
                 <HcCard actionUi="text-center">
                     <template #header>
-                        <HcTooltip keys="wbs_views_drawings">
-                            <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings" style="height:30px">
-                                <HcIcon name="image"/>
-                                <span>查看图纸</span>
-                            </el-button>
-                        </HcTooltip>
-                        <!-- <el-button :type="authBtnTabKey === '1'?'primary':''" hc-btn @click="authBtnTabClick('1')">
-                            <HcIcon name="folder-user"/>
-                            <span>施工自检</span>
-                        </el-button>
-                        <el-button :type="authBtnTabKey === '2'?'primary':''" hc-btn @click="authBtnTabClick('2')">
-                            <HcIcon name="folder-shield"/>
-                            <span>监理质检</span>
-                        </el-button> -->
-                         <HcNewSwitchtype :datas="authBtnTabdata" :keys="authBtnTabKey" @change="authBtnTabClick" style="margin-left:20px"/>
+                        <HcNewSwitch :datas="authBtnTabdata" :keys="authBtnTabKey" @change="authBtnTabClick" size="default" :round="false"/>
                     </template>
                     <!--切换导图或树形模式-->
                     <template #extra>
@@ -208,45 +184,56 @@
                     <HcStatus text="暂无表单" v-else/>
 
                     <!--底部按钮区域-->
-                    <template #action >
+                    <template #action>
+                        <div class="hc-table-form-action-tip">
                             <el-alert title="完善资料填写后记得一定要保存哦"
-                            show-icon
-                            type="warning"
-                             :closable="false"
-                             style="background-color:#f1f5f8;display: inline;vertical-align: middle;"/>
-
-                            <HcTooltip keys="wbs_save" v-if="NodeStatus !== '3'">
-                                <el-button
-                                type="primary"
-                                style="width:150px;font-weight: bold;font-size:large"
-                                hc-btn
-                                :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
-                                :loading="tableFormSaveLoading"
-                                @click="tableFormSaveClick">
-                                    <HcIcon name="save"/>
-                                    <span>保存</span>
-                                </el-button>
-                            </HcTooltip>
-                            <HcTooltip keys="wbs_report" v-if="NodeStatus !== '3'">
-                                <el-button hc-btn :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading" @click="reportModalClick">
-                                    <HcIcon name="send-plane-2"/>
-                                    <span>上报</span>
-                                </el-button>
-                            </HcTooltip>
-                            <HcTooltip keys="wbs_preview">
-                                <el-button hc-btn :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" @click="bussPdfsClick">
-                                    <HcIcon name="eye"/>
-                                    <span>预览</span>
-                                </el-button>
-                            </HcTooltip>
-                            <HcTooltip keys="wbs_abolish" v-if="NodeStatus === '3'">
-                                <el-button hc-btn @click="abolishOneClick">
-                                    <HcIcon name="arrow-go-back"/>
-                                    <span>撤回上报流程</span>
-                                </el-button>
-                            </HcTooltip>
-
+                                      show-icon
+                                      type="warning"
+                                      :closable="false"
+                                      class="hc-alert"
+                                      style=""/>
+                        </div>
 
+                        <HcTooltip keys="wbs_save" v-if="NodeStatus !== '3'">
+                            <el-button
+                            type="primary"
+                            style="width:150px;font-weight: bold;font-size:large"
+                            hc-btn
+                            :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
+                            :loading="tableFormSaveLoading"
+                            @click="tableFormSaveClick">
+                                <HcIcon name="save"/>
+                                <span>保存</span>
+                            </el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="wbs_report" v-if="NodeStatus !== '3'">
+                            <el-button hc-btn :disabled="NodeStatus === '3' || NodeStatus === '1'" :loading="reportLoading" @click="reportModalClick">
+                                <HcIcon name="send-plane-2"/>
+                                <span>上报</span>
+                            </el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="wbs_preview">
+                            <el-button hc-btn :disabled="NodeStatus === '1'" :loading="bussPdfsLoading" @click="bussPdfsClick">
+                                <HcIcon name="eye"/>
+                                <span>预览</span>
+                            </el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="wbs_abolish" v-if="NodeStatus === '3'">
+                            <el-button hc-btn @click="abolishOneClick">
+                                <HcIcon name="arrow-go-back"/>
+                                <span>撤回上报流程</span>
+                            </el-button>
+                        </HcTooltip>
+                        <HcTooltip keys="wbs_views_drawings">
+                            <el-button hc-btn :disabled="!nodeDataInfo?.fileUrl" @click="viewsDrawings">
+                                <HcIcon name="image"/>
+                                <span>图纸</span>
+                            </el-button>
+                        </HcTooltip>
+                        <el-button hc-btn>
+                            <HcIcon name="file"/>
+                            <span>附件</span>
+                        </el-button>
                     </template>
                 </HcCard>
             </div>
@@ -478,17 +465,16 @@ const getSearchTreeData=async()=>{
     if(contractInfo.value?.contractType==2){
           const {error, code, data} = await queryApi.getTreeallJl({
             contractId: contractId.value,
-          
         })
         //判断状态
         if (!error && code === 200) {
             // searchTreeData.value = getArrValue(data)
              let searchobj=getObjValue(data)
             let searcharr=[]
-            for (let key in searchobj) { 
+            for (let key in searchobj) {
                     searcharr.push(searchobj[key][0])
                 }
-            searchTreeData.value =searcharr  
+            searchTreeData.value =searcharr
              searchElTreeLoadNode.value = false
             treeLoading.value = false
         } else {
@@ -514,7 +500,7 @@ const getSearchTreeData=async()=>{
             searchTreeData.value = []
         }
     }
-      
+
 
 }
 //监听
@@ -553,11 +539,8 @@ const authBtnTabClick = (val) => {
         window?.$message?.warning('请先在左侧项目树选择一个节点')
     } else if (val['key'] !== authBtnTabKey.value) {
         authBtnTabKey.value = val['key']
-      
         //  wbstreeKey.value=new Date().toString()
         getTableDataAll()
-
-
     }
 }
 //contractType,  1施工，2监理
@@ -681,7 +664,7 @@ const changeisSearch=()=>{
 }
 const changetreelaod=(val)=>{
     treeLoading.value=val
-   
+
 }
 const treeLoading = ref(false)
 const searchTreeClick = async () => {
@@ -1559,25 +1542,19 @@ const divisionClick = () => {
         path: '/data-fill/division'
     })
 }
-const isShowLefticon=ref(true)
-//
-const isShowleftbox = () => {
-    let item = document.getElementById("wbs-left-tree");
-    item.style.display="block"
-    isShowLefticon.value=true
-}
-
-const isHiddenleftbox = () => {
-    let item = document.getElementById("wbs-left-tree");
-    item.style.display="none"
-    isShowLefticon.value=false
-
 
+//树展开和收起
+const isWbsTreeShow = ref(true)
+const setWbsTreeShow = () => {
+    isWbsTreeShow.value = !isWbsTreeShow.value
 }
+
 //左右拖动，改变树形结构宽度
 const leftWidth = ref(382);
+const isMouseTree = ref(false);
 const onmousedown = () => {
     const leftNum = isCollapse.value ? 142 : 272
+    isMouseTree.value = true;
     document.onmousemove = (ve) => {
         let diffVal = ve.clientX - leftNum;
         if(diffVal >= 310 && diffVal <= 900) {
@@ -1587,6 +1564,7 @@ const onmousedown = () => {
     document.onmouseup = () => {
         document.onmousemove = null;
         document.onmouseup = null;
+        isMouseTree.value = false;
     }
 }
 </script>
@@ -1607,7 +1585,32 @@ const onmousedown = () => {
         position: relative;
     }
 }
-
+.hc-expansion-contraction-tree {
+    position: absolute;
+    left: -21px;
+    top: 0;
+    width: 18px;
+    height: 100%;
+    user-select: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #8c9099;
+    font-size: 22px;
+    border-radius: 5px;
+    transition: background 0.2s;
+    background: rgba(255,255,255,0);
+    &:hover {
+        background: #f1f5f8;
+        color: var(--el-color-primary);
+    }
+}
+.hc-table-form-action-tip {
+    position: absolute;
+    bottom: 77px;
+    width: 100%;
+}
 html.theme-dark {
     .bg-svg-xml {
         background-color: initial;
@@ -1687,46 +1690,14 @@ html.theme-dark {
 .hc-layout-content-box{
     position: relative;
 }
-.hc-layout-content-box-lefticon {
-    position: absolute;
-    left: -28px;
-    top:50%;
-    z-index: 1000;
-    font-size: 50px;
-      color: var(--el-color-primary);
-      cursor:pointer;
-    // float: left;
-
-}
-.hc-layout-content-box-righticon {
-    position: absolute;
-    left: -28px;
-    top:50%;
-    z-index: 1001;
-     font-size: 50px;
-     color: var(--el-color-primary);
-     cursor:pointer;
-    // float: left;
-
-}
-.hc-arrow-icon {
-    width: 28px;
-    height: 28px;
-    display: flex;
-    font-size: 20px;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: color 0.2s;
-    border-radius: 50%;
 
-    box-shadow: var(--hc-shadow);
-        background:var(--el-color-primary-light-9);
-    &:hover {
-        color: var(--el-color-primary);
-    }
-}
 .iscusor{
     cursor: pointer;
 }
+.hc-table-form-action-tip .hc-alert {
+    background-color:#f1f5f8;
+    display: inline;
+    vertical-align: middle;
+    box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+}
 </style>