还原机构管理

src/pages/common/tree/index.vue

@@ -130,7 +130,7 @@ export default {
     // 树高度
     treeHeight: {
       type: String,
-      default: 'calc(100vh - 20rem)'
+      default: 'calc(100vh - 24rem)'
     },
     // 是否取消选中节点
     isClearSelectedNode: {

src/pages/data-auth-module/auth-subject-manage/index.scss

@@ -7,41 +7,49 @@
  */
 
 .institutional-attributes {
-    h4 {
-        font-size: 14px;
-        height: 48px;
-        line-height: 48px;
-        padding: 0 15px;
-        border: 0 none;
-        background-color: #eef2fa;
-        text-align: left;
-    }
-    .institutional-info {
-        margin-top: 1rem;
-    }
+  .buttonGroup {
+    margin-bottom: 1rem;
+    background: #fff;
+    line-height: 3.5rem;
+    padding: 0 1rem;
+  }
+  h4 {
+    font-size: 14px;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 15px;
+    border: 0 none;
+    background-color: #eef2fa;
+    text-align: left;
+  }
+  .institutional-info {
+    margin-top: 1rem;
+  }
+  /deep/.el-card {
+    min-height: calc(100vh - 14.5rem);
+  }
 }
 .subject-property /deep/ {
-    .box-card {
-        .el-card__header {
-            display: block;
-        }
-        height: calc(100vh - 12rem);
-    }
-    .subject-property__form-item {
-        display: flex;
-        align-items: center;
-        // margin-bottom: 10px;
-        .icon {
-            margin-left: 10px;
-            cursor: pointer;
-            color: rgba(0, 0, 0, 0.65);
-        }
+  .box-card {
+    .el-card__header {
+      display: block;
     }
-    .subject-property__form-item:last-child {
-        margin-bottom: 0;
+    height: calc(100vh - 12rem);
+  }
+  .subject-property__form-item {
+    display: flex;
+    align-items: center;
+    // margin-bottom: 10px;
+    .icon {
+      margin-left: 10px;
+      cursor: pointer;
+      color: rgba(0, 0, 0, 0.65);
     }
-    .prop-value-item {
-        // margin-bottom: 10px;
-    } 
-   
+  }
+  .subject-property__form-item:last-child {
+    margin-bottom: 0;
+  }
+  .prop-value-item {
+    // margin-bottom: 10px;
+  }
 }

src/pages/data-auth-module/auth-subject-manage/org-prop-manage/index.vue

@@ -13,74 +13,73 @@
                 <span>2021-04-08 12:00:00</span>
             </el-form-item>
         </el-form> -->
-    <!-- 搜索项 -->
-    <search-bar ref="searchBar" :conditionForm="orgConditonForm" @submitSearch="receiveSearch"></search-bar>
-    <!-- 操作 -->
-    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
 
-    <dg-row>
-      <dg-col :span="24">
-        <h4 class="dg-words-title-second">单位详情</h4>
-        <el-form class="institutional-info" ref="form" :model="formInfo" label-suffix="：" label-width="120px">
-          <el-row v-if="formInfo.id">
-            <el-col :span="12" v-for="(item, index) in orgDetail" :key="index">
-              <el-form-item :label="item.label">
-                <div v-if="item.code" v-translate="{ code: item.code }">{{ formInfo[item.value] }}</div>
-                <div v-else-if="item.enum" v-translate="{ enum: item.enum }">
-                  {{ formInfo[item.value] }}
-                </div>
-                <div v-else-if="item.url" v-translate="{ url: item.url, valueName: 'CODE', labelName: 'VALUE' }">
-                  {{ formInfo[item.value] }}
-                </div>
-                <span v-else>{{ formInfo[item.value] }}</span>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <p v-else style="text-align:center">暂无数据</p>
-        </el-form>
+    <div class="buttonGroup">
+      <dg-button type="primary" @click="handleImport" icon="el-icon-upload2">导入</dg-button>
+      <dg-button type="primary" @click="handleSynchro" icon="el-icon-refresh">同步</dg-button>
+    </div>
+
+    <dg-row :gutter="20">
+      <dg-col :span="5">
+        <dg-card shadow="never" header="机构列表">
+          <tree
+            :key="key"
+            ref="tree"
+            class="u-pm__left"
+            :search="true"
+            apiName="getOrgTree"
+            @handleGetNode="handleGetNode"
+            @submitRootNode="submitRootNode"
+          />
+        </dg-card>
+      </dg-col>
+      <dg-col :span="19">
+        <dg-card shadow="never" header="机构管理">
+          <el-form class="institutional-info" ref="form" :model="formInfo" label-suffix=":" label-width="120px">
+            <el-row v-if="formInfo.id">
+              <el-col :span="12" v-for="(item, index) in orgDetail" :key="index">
+                <el-form-item :label="item.label">
+                  <div v-if="item.code" v-translate="{ code: item.code }">{{ formInfo[item.value] }}</div>
+                  <div v-else-if="item.enum" v-translate="{ enum: item.enum }">
+                    {{ formInfo[item.value] }}
+                  </div>
+                  <div v-else-if="item.url" v-translate="{ url: item.url, valueName: 'CODE', labelName: 'VALUE' }">
+                    {{ formInfo[item.value] }}
+                  </div>
+                  <span v-else>{{ formInfo[item.value] }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </dg-card>
       </dg-col>
     </dg-row>
   </main>
 </template>
 
 <script>
-import { orgDetail, orgConditonForm } from '../DataConfig';
+import Tree from '@/pages/common/tree';
+import { orgDetail } from '../DataConfig';
 import { orgInfoDetail } from '@/api/data-auth';
 import { authOrgSync } from '@/api/sync';
 import importFile from '@/components/import';
 import { orgImportUrl } from '@/api/import';
-import searchBar from '@/components/search-bar';
-import operateBar from '@/components/operate-bar';
 export default {
   name: 'institutional-attributes', // 组件名称
   props: {},
-  components: { searchBar, operateBar },
   data() {
     return {
       orgDetail,
-      orgConditonForm,
-      pageOptList: ['导入', '同步'],
       formInfo: {},
-      orgId: '',
+      keyword: '',
+      currentId: '',
       key: 0
     };
   },
   computed: {}, // 计算属性
+  watch: {}, // 侦听器（扩展的计算属性）
+  components: { Tree }, // 注册局部组件
   methods: {
-    /**
-     * @description:查询
-     */
-    receiveSearch(val) {
-      if (this.orgId !== val.orgId.value) {
-        this.formInfo = {};
-        this.orgId = val.orgId.value;
-        this.getDetail();
-      }
-    },
-    /**
-     * @description:接收操作事件
-     */
-    receviceOpt(opt, row) {},
     /**
      * @description:导入方法
      */
@@ -116,13 +115,31 @@ export default {
         this.handleSearch();
       });
     },
+    /**
+     * @description:树方法
+     */
+    handleGetNode({ id }) {
+      if (this.currentId != id) {
+        this.formInfo = {};
+        this.currentId = id;
+        this.getDetail();
+      }
+    },
     /**
      * 获取机构详情
      */
     getDetail() {
-      orgInfoDetail(this.orgId).then((res) => {
+      orgInfoDetail(this.currentId).then((res) => {
         this.formInfo = res.data;
       });
+    },
+    /**
+     * @description: 默认查询跟节点
+     */
+    submitRootNode({ id, name }) {
+      this.$nextTick(() => {
+        this.handleGetNode({ id, name });
+      });
     }
   },
   created() {}, // 组件创建完成后

src/router/modules/data-auth-module.js

@@ -22,7 +22,7 @@ const componentsRouter = [
         path: 'org-prop-manage',
         component: () => import('@/pages/data-auth-module/auth-subject-manage/org-prop-manage'),
         name: 'org-prop-manage',
-        meta: { title: '机构管理', noCache: false, permission: ['QXGL_SQGL_ZTGL_JGSXGL'] }
+        meta: { title: '机构管理', noCache: false, permission: ['QXGL_SQGL_ZTGL_JGSXGL'], layout: "page" }
       },
       {
         path: 'app-prop-manage',