成员管理样式修改

src/views/personnel/memberManagement.vue

@@ -2,7 +2,7 @@
   <PageMain class="vh100">
     <div class="flex j-s" style="height: 100%;">
       <div class="member-tree mr-1">
-        <el-input v-model="firstForm.name" style="width: 240px" placeholder="姓名，手机号，工号查询" >
+        <el-input v-model="firstForm.name" style="width: 240px" placeholder="姓名，手机号，工号查询">
           <template #append>
             <el-button :icon="Search" link @click="statusChange" />
           </template>
@@ -40,32 +40,34 @@
         :showSelect="true" :pageInfo="pageInfo" @getList="getList" @selectionChange="selectChange"
         :showOperation="true">
         <template v-slot:table-title-btn>
-            <el-form v-model="firstForm" >
-                <el-row :gutter="0">
-                  <el-col :span="8">
-                    <el-form-item label="状态">
-                        <el-select v-model="firstForm.status">
-                          <el-option :label="'全部'" :value="'-1'"></el-option>
-                          <el-option v-for="item in statusList" :key="item.id" :label="item.label"
-                            :value="item.value"></el-option>
-                        </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8">
-                    <el-form-item label="成员信息" style="margin-left:6px">
-                        <el-select v-model="firstForm.attrType" placeholder="请选择">
-                            <el-option label="展示全部成员" value="1"></el-option>
-                        </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
-                    <el-button type="primary" @click="statusChange">搜索</el-button>
-                    <el-button plain @click="showAllMember">重置</el-button>
-                  </el-col>
-                </el-row>
+          <div class="w-full">
+
+            <el-form v-model="firstForm">
+              <el-row :gutter="0">
+                <el-col :span="8">
+                  <el-form-item label="状态">
+                    <el-select v-model="firstForm.status">
+                      <el-option :label="'全部'" :value="'-1'"></el-option>
+                      <el-option v-for="item in statusList" :key="item.id" :label="item.label"
+                        :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="成员信息" style="margin-left:6px">
+                    <el-select v-model="firstForm.attrType" placeholder="请选择">
+                      <el-option label="展示全部成员" value="1"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8" style="display: flex; align-items: start; justify-content: flex-end">
+                  <el-button type="primary" @click="statusChange">搜索</el-button>
+                  <el-button plain @click="showAllMember">重置</el-button>
+                </el-col>
+              </el-row>
             </el-form>
             <div style="margin: 6px 0 24px;border-top: 1px dashed #EEEEEE;"></div>
-            <div >
+            <div>
               <el-button type="primary" @click="add(ruleFormRef)">
                 <el-icon>
                   <Plus />
@@ -88,6 +90,7 @@
               <el-button type="primary" :disabled="!deptItem.id" @click="manySetDeptUser()">
                 设置负责人</el-button>
             </div>
+          </div>
         </template>
         <template v-slot:operation="scope">
           <el-button type="primary" link @click="editor(scope.operationData)">
@@ -107,7 +110,8 @@
           {{ scope.slotData.label }}
         </template>
       </ComplexTable>
-      <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="资源转移" width="800" draggable append-to-body>
+      <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="资源转移" width="800" draggable
+        append-to-body>
         <el-row :gutter="24">
           <el-col :span="20">
             <div style="display: flex; align-items: center">
@@ -148,15 +152,18 @@
         </template>
       </el-dialog>
       <setDept :dialogVisible="deptDialogVisible" :dept-list="deptTreeData" :dept-ids="[deptItem.id]"
-        @close-dialog="confirmDialogInfo" :title="title" typeAttr="2" @cancel-dialog="deptDialogVisible = false"></setDept>
+        @close-dialog="confirmDialogInfo" :title="title" typeAttr="2" @cancel-dialog="deptDialogVisible = false">
+      </setDept>
 
 
-      <el-dialog :close-on-click-modal="false" v-model="changeDeptDialog" title="变更机构" width="600" append-to-body draggable>
+      <el-dialog :close-on-click-modal="false" v-model="changeDeptDialog" title="变更机构" width="600" append-to-body
+        draggable>
         <div>
-          <el-input v-model="filterText" style="width: 100%" class="search-input2" placeholder="请输入机构名称查找" :prefix-icon="Search">
+          <el-input v-model="filterText" style="width: 100%" class="search-input2" placeholder="请输入机构名称查找"
+            :prefix-icon="Search">
             <template #append>
-                  <el-button text type="primary" class="" >搜索</el-button>
-                </template>
+              <el-button text type="primary" class="">搜索</el-button>
+            </template>
           </el-input>
           <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="deptTreeData" :props="defaultProps"
             :default-expand-all="false" :expand-on-click-node="false" :filter-node-method="filterNode"
@@ -221,9 +228,9 @@ onMounted(async () => {
 //状态字典
 const statusList = ref<dictType[]>([]);
 const firstForm = ref({
-  status:'-1',
-  attrType:'1',
-  name:'',
+  status: '-1',
+  attrType: '1',
+  name: '',
 })
 //机构列表
 
@@ -237,7 +244,7 @@ const deptTreeData = ref();
 const getInstitutionList = () => {
   // pageInfo.pageNum=item.pageNum
 
-    api.institutionApi.institutionList({userInfo: filterText.value}).then((res) => {
+  api.institutionApi.institutionList({ userInfo: filterText.value }).then((res) => {
     // if(res.code===200){
 
     // }
@@ -751,21 +758,25 @@ function manySetDeptUser() {
     margin: auto;
   }
 }
-:deep( .el-tree-node>.el-tree-node__content .el-icon) {
+
+:deep(.el-tree-node>.el-tree-node__content .el-icon) {
   color: #666;
 }
+
 :deep(.member-tree .el-input-group__append) {
   color: #fff;
-  background: linear-gradient( 91deg, #4FCAFF 0%, #2B62FF 100%);
+  background: linear-gradient(91deg, #4FCAFF 0%, #2B62FF 100%);
 }
 
 :deep(.el-table__inner-wrapper:before) {
   display: none
 }
+
 :deep(.el-tree-node__content) {
   height: 32px;
   margin-bottom: 5px;
 }
+
 :deep(.el-dropdown-link) {
   cursor: pointer;
   color: var(--el-color-primary);
@@ -773,21 +784,25 @@ function manySetDeptUser() {
   align-items: center;
   margin-left: 15px;
 }
-.member-tree{
+
+.member-tree {
   width: 278px;
   height: 100%;
   position: relative;
   margin-right: 24px;
+
   :deep(.el-checkbox__inner) {
     border-radius: 50%
   }
-  :deep(.el-tree-node.is-current>.el-tree-node__content){
-  background-color: #F3F9FF;
+
+  :deep(.el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #F3F9FF;
 
   }
-  &::after{
-    content:'';
-    position:absolute;
+
+  &::after {
+    content: '';
+    position: absolute;
     height: calc(100% + 40px);
     width: 1px;
     background-color: #EEEEEE;
@@ -796,6 +811,7 @@ function manySetDeptUser() {
     bottom: -20px;
   }
 }
+
 .table {
   flex: 1;
   /* 占据剩余空间 */