机构管理样式完善

src/assets/styles/globals.css

@@ -16,6 +16,13 @@
 
   /* 工具栏高度 */
   --g-toolbar-height: 50px;
+
+  /* 元素边框圆角基础值 */
+  --el-border-radius-base: 2px;
+  /* 元素字体粗细基础值 */
+  --el-font-weight-primary: 400;
+  /* 元素字体基础值 */
+  --el-font-family: PingFang SC, PingFang SC;
 }
 
 /* 明暗模式 CSS 变量 */

src/components/Table/index.vue

@@ -35,23 +35,22 @@
           :label="column.label"
           :sortable="column.sortable ? 'custom' : false"
           :width="column.width"
+          :header-align="column.align"
+          :align="column.align"
         >
           <template #header>
             <slot name="search" :slotData="column"></slot>
           </template>
           <template #default="scope">
-
-
-
               <component v-if="column.formatter" :is="column.formatter(scope.row, column, scope.row[column.prop], scope.$index)" class="routerlick" />
               <span v-else>{{ scope.row[column.prop] }}</span>
-
-
           </template>
         </el-table-column>
-        <el-table-column label="操作" v-if="showOperation">
+        <el-table-column label="操作" header-align="center" v-if="showOperation">
           <template #default="scope">
-            <slot name="operation" :operationData="scope"></slot>
+            <div class="flex">
+              <slot name="operation" :operationData="scope"></slot>
+            </div>
           </template>
           <!-- <template #default="scope">
 						<div v-if="scope.row._edit">
@@ -97,6 +96,7 @@ interface Props{
     sortable?: boolean;
     width?: string;
     style?: string;
+    align?: string;
     formatter?: (row: any, column: any, cellValue: any, index: number) => any;
   }[];
   pageInfo: {
@@ -198,11 +198,11 @@ const selectChange = (value: any[]) => {
       margin: 5px 0;
     }
   }
-  :deep(.cell) {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
+  // :deep(.cell) {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  // }
   .table-title-btn {
     margin-bottom: 20px;
     :deep(.el-button) {

src/views/personnel/institutionManage.vue

@@ -1,18 +1,14 @@
 <template>
-  <div class="institution">
-    <div class="institution-main">
+  <PageMain class="vh100 institution">
       <el-form label-position="left" label-width="auto">
-        <el-row :gutter="16">
-          <el-col :span="6">
+        <el-row :gutter="24">
+          <el-col :span="24">
             <el-form-item label="">
-              <el-input v-model="info.name" placeholder="输入机构名称查找" :prefix-icon="Search" />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="4">
-            <el-form-item label="">
-              <el-button type="primary" @click="getInstitutionList">查询</el-button>
-              <el-button type="primary" plain @click="reset">重置</el-button>
+              <el-input v-model="info.name" class="search-input" placeholder="输入机构名称查找" :prefix-icon="Search" >
+                <template #append>
+                  <el-button text type="primary" class="" @click="getInstitutionList">搜索</el-button>
+                </template>
+              </el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -23,7 +19,7 @@
         @select-all-change="selectAllChange" @select-change="selectChange">
         <template v-slot:table-title-btn>
           <div>
-            <el-button type="primary" @click="add(ruleFormRef)">
+            <el-button plain type="primary" @click="add(ruleFormRef)">
               <el-icon>
                 <Plus />
               </el-icon>添加机构</el-button>
@@ -43,16 +39,16 @@
           </div>
         </template>
         <template v-slot:operation="scope">
-          <el-button type="primary" link @click="addChild(scope.operationData.row)">
-            添加子机构
-          </el-button>
-          <el-dropdown placement="bottom-start">
-            <span class="el-dropdown-link"> 更多 </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item v-on:click="editor(scope.operationData.row)">编辑</el-dropdown-item>
-                <el-dropdown-item v-on:click="del(scope.operationData.row)">
-                  删除
+            <el-button type="primary" link @click="addChild(scope.operationData.row)">
+              添加子机构
+            </el-button>
+            <el-dropdown placement="bottom-start">
+              <span class="el-dropdown-link"> 更多 </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-on:click="editor(scope.operationData.row)">编辑</el-dropdown-item>
+                  <el-dropdown-item v-on:click="del(scope.operationData.row)">
+                    删除
                 </el-dropdown-item>
                 <el-dropdown-item v-on:click="setDeptUser(scope.operationData.row)">设置负责人</el-dropdown-item>
               </el-dropdown-menu>
@@ -63,13 +59,12 @@
           {{ scope.slotData.label }}
         </template>
       </Table>
-    </div>
 
 
     <setDept :dialogVisible="deptDialogVisible" :dept-list="tableData" :dept-ids="deptIdList"
       :dept-selected="deptSelected" :title="'设置负责人'" @close-dialog="confirmCharge"
       @cancel-dialog="deptDialogVisible = false"></setDept>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -231,9 +226,9 @@ const typeformatter = (row: any, column: any, cellValue: any) => {
   return () => h("div", {}, comType);
 };
 const columns = [
-  { prop: "name", label: "机构名称" },
-  { prop: "userCount", label: "人数" },
-  { prop: "comType", label: "机构类型", formatter: typeformatter },
+  { prop: "name", label: "机构名称",width:260 },
+  { prop: "userCount", label: "人数",align:"center" },
+  { prop: "comType", label: "机构类型", formatter: typeformatter,align:"center" },
   {
     prop: "exhibitionScope",
     label: "展业范围",
@@ -245,10 +240,10 @@ const columns = [
       }
       let data = row.exhibitionScope.map((val: any) => exhibitionScopeMap[val] || val)
       return () => h("div", {}, data.toString());
-    },
+    },align:"center"
   },
-  { prop: "address", label: "所属地区" },
-  { prop: "leaderName", label: "负责人" },
+  { prop: "address", label: "所属地区",align:"center" },
+  { prop: "leaderName", label: "负责人",align:"center" },
 ];
 
 const pageInfo = {
@@ -527,6 +522,27 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+:deep(.el-form-item__content .el-input-group.search-input) {
+  --el-border-color: #F7F7F7;
+  --el-input-hover-border-color: #F7F7F7;
+}
+:deep(.el-input-group--append>.el-input__wrapper) {
+  background-color: #F7F7F7;
+}
+:deep(.search-input .el-button__text--expand) {
+  color: #0083FF;
+  &::before{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    height: 24px;
+    background: #EEEEEE;
+    margin: auto;
+  }
+}
 :deep(.table-title-btn) {
   display: flex;
   align-items: center;
@@ -537,30 +553,6 @@ onMounted(() => {
   }
 }
 
-.institution {
-  background: #fff;
-  width: 100%;
-  // height: 100%;
-  // padding: 20px;
-  box-sizing: border-box;
-  display: flex;
-
-  .institution-tree {
-    flex: none;
-    width: 20%;
-    padding: 20px;
-    box-sizing: border-box;
-    border-right: 1px solid #ccc;
-  }
-
-  .institution-main {
-    flex: 1;
-    // width: 80%;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-}
-
 :deep(.el-dropdown-link) {
   cursor: pointer;
   color: var(--el-color-primary);