机构界面完成

src/pages/data-auth-module/property-management/DataConfig.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Liugh
  * @Date: 2021-05-17 15:38:23
- * @LastEditTime: 2021-05-17 17:17:51
+ * @LastEditTime: 2021-05-18 11:20:40
  * @LastEditors: Do not edit
  * @Description:
  */
@@ -69,5 +69,16 @@ const typeData = {
         { label: "人员类型", value: "typePersonnel" }
     ]
 };
+const institutionField = [
+    { label: "上级行政机构", value: "upGovName" },
+    { label: "机构类型", value: "orgType" },
+    { label: "机构名称", value: "fullName" },
+    { label: "行政区划", value: "areaCode" },
+    { label: "机构代码", value: "upGovCode" },
+    { label: "机构类别", value: "unitClass" },
+    { label: "单位层级", value: "orgLevel" },
+    { label: "单位级别", value: "orgCode" },
+    { label: "单位类别", value: "orgKind" }
+];
 
-export { UserTableData, typeData };
+export { UserTableData, typeData, institutionField };

src/pages/data-auth-module/property-management/index.scss

@@ -1,12 +1,28 @@
 /*
  * @Author: Liugh
  * @Date: 2021-05-17 15:18:43
- * @LastEditTime: 2021-05-17 15:43:21
+ * @LastEditTime: 2021-05-18 11:24:31
  * @LastEditors: Do not edit
  * @Description: 
  */
-.user-attributes {
+.user-attributes,
+.institutional-attributes {
     .buttonGroup {
         margin-bottom: 20px;
     }
 }
+.institutional-attributes {
+    // border: 1px solid red;
+    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: 2.5rem;
+    }
+}

src/pages/data-auth-module/property-management/institutional-attributes.vue

@@ -1,7 +1,138 @@
 <!--
  * @Author: Liugh
  * @Date: 2021-05-17 14:53:19
- * @LastEditTime: 2021-05-17 14:53:19
+ * @LastEditTime: 2021-05-18 11:24:49
  * @LastEditors: Do not edit
+ * @FilePath: \auth-web\src\pages\data-auth-module\property-management\institutional-attributes.vue
  * @Description: 
 -->
+<template>
+    <main class="institutional-attributes">
+        <el-form ref="ruleForm" inline :rules="rules" :model="form">
+            <el-form-item label="机构名称">
+                <el-input v-model="form.name" placeholder="请输入机构名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
+            </el-form-item>
+
+            <el-form-item label="最近同步时间：" style="float:right">
+                <span>2021-04-08 12:00:00</span>
+            </el-form-item>
+        </el-form>
+
+        <div class="buttonGroup">
+            <dg-button type="primary" @click="handleLeading" 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">
+                <tree
+                    ref="tree"
+                    class="u-pm__left"
+                    title="机构列表"
+                    @handleGetNode="handleGetNode"
+                    @submitRootNode="submitRootNode"
+                />
+            </dg-col>
+            <dg-col :span="19">
+                <h4 class="dg-words-title-second">机构管理</h4>
+                <el-form class="institutional-info" ref="form" :model="formInfo" label-suffix=":" label-width="120px">
+                    <el-row>
+                        <el-col :span="12" v-for="(item, index) in institutionField" :key="index">
+                            <el-form-item :label="item.label">
+                                <span>{{ formInfo[item.value] }}</span>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </dg-col>
+        </dg-row>
+    </main>
+</template>
+
+<script>
+import Tree from "@/pages/common/tree";
+import { institutionField } from "./DataConfig";
+import * as empowMegApi from "@/api/empower-manage";
+export default {
+    name: "institutional-attributes", // 组件名称
+    props: {
+        // 接收父组件的数据
+    },
+    data() {
+        // 组件内部参数
+        return {
+            // 参数名称及默认值
+            institutionField,
+            form: {},
+            formInfo: {
+                upGovName: "测试",
+                orgType: "测试",
+                fullName: "测试",
+                areaCode: "测试",
+                upGovCode: "测试",
+                unitClass: "测试",
+                orgLevel: "测试",
+                orgCode: "测试",
+                orgKind: "测试"
+            },
+            rules: {},
+            tableUrl: empowMegApi.tableUrl,
+            reportPersionForm: {
+                applyName: { value: "", op: "like" },
+                orgId: { value: "", op: "=" }
+            }
+        };
+    },
+    computed: {}, // 计算属性
+    watch: {}, // 侦听器（扩展的计算属性）
+    components: { Tree }, // 注册局部组件
+    methods: {
+        /**
+         * @description:导入方法
+         */
+        handleLeading() {},
+        /**
+         * @description:同步方法
+         */
+        handleSynchro() {},
+        /**
+         * @description:树方法
+         */
+        handleGetNode({ id }) {
+            const that = this;
+            const oldVal = that.reportPersionForm.orgId.value;
+            if (oldVal != id) {
+                that.reportPersionForm.orgId.value = id;
+                that.handleSearch();
+            }
+        },
+        /**
+         * @description: 默认查询跟节点
+         */
+        submitRootNode({ id, name }) {
+            const that = this;
+            this.$nextTick(() => {
+                that.handleGetNode({ id, name });
+            });
+        },
+        /**
+         * @description: 表单查询
+         */
+        handleSearch() {}
+    }, // 内部方法
+    beforeCreate() {}, // 组件创建前
+    created() {}, // 组件创建完成后
+    beforeMount() {}, // 组件挂载前
+    mounted() {}, // 组件挂载完成后
+    beforeUpdate() {}, // 组件更新前
+    updated() {}, // 组件挂载完成后
+    beforeDestroy() {}, // 组件销毁前
+    destroyed() {} // 组件销毁完成后
+};
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>