团队 渠道 电销列表样式完善

src/views/operationManagement/channel.vue

@@ -1,43 +1,50 @@
 <template>
-  <div class="team">
-    <el-row :gutter="20" style="width: 100%; overflow:hidden;">
-      <el-col :span="4">
-        <div class="teamTree">
-          <el-input class="search-input" v-model="treeValue" placeholder="渠道名称查找" prefix-icon="Search" @keyup.enter="initTeam"></el-input>
-          <div class="custom-tree-node" v-for="item in teamData" :key="item.id" @click.stop="initList(item)">
-            <span class="custom-tree-node-label">{{ item.name }}</span>
-            <el-dropdown class="custom-tree-node-more" @command="treeNodeCommend(item, $event)">
-              <el-icon><MoreFilled /></el-icon>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="编辑">编辑</el-dropdown-item>
-                  <el-dropdown-item command="删除">删除</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
+  <PageMain class="vh100">
+    <div class="flex j-s" style="height: 100%;">
+      <div class="w-278px h-full m-r-24px member-tree relative flex-shrink-0">
+        <el-input v-model="treeValue" style="width: 260px" placeholder="渠道名称查找" @keyup.enter="initTeam">
+          <template #append>
+            <el-button icon="Search" link @click="initTeam" />
+          </template>
+        </el-input>
+        <el-tree class="h-[calc(100%-76px)] m-t-12px" :props="defaultProps" :data="teamData"
+          :expand-on-click-node="false" @node-click="initList">
+          <template #default="{ node, data }">
+            <div class="custom-tree-node">
+              <div>{{ node.label }}</div>
+              <el-dropdown>
+                <div class="h-14px">
+                  <el-icon>
+                    <More />
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="treeNodeCommend(data, '编辑')">编辑</el-dropdown-item>
+                    <el-dropdown-item @click="treeNodeCommend(data, '删除')">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-tree>
+        <div class="flex justify-center">
+          <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加渠道</el-button>
+        </div>
+      </div>
+      <div class="w-[calc(100%-302px)]">
+        <div class="color-[#333] text-18px font-500 line-height-22px h-22px">{{ teamInfo.name }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-12px">所属机构： {{ teamInfo?.deptName }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">管理人： {{ teamInfo?.managerName ?
+          `${teamInfo?.managerName}-` : '' }}{{ teamInfo?.managerId }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">描述：{{ teamInfo?.describeInformation }}</div>
+        <div class="flex justify-between items-center p-t-24px b-t-(1px solid #EEEEEE) m-t-24px h-56px">
+          <el-button type="primary" @click="setPeople">设置负责人</el-button>
+          <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search"
+            placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
         </div>
-        <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加渠道</el-button>
-      </el-col>
-      <el-col :span="20">
-        <el-row :gutter="20">
-          <el-col :span="22" class="info">
-            <h3>{{ teamInfo.name }}</h3>
-            <p>所属机构： {{ teamInfo?.deptName }}</p>
-            <p>管理人： {{ teamInfo?.managerName?`${teamInfo?.managerName}-`:'' }}{{ teamInfo?.managerId }}</p>
-            <p>描述：{{ teamInfo?.describeInformation }}</p>
-          </el-col>
-          <el-col :span="2" class="btn">
-            <el-button plain @click="setPeople">设置负责人</el-button>
-          </el-col>
-        </el-row>
-        <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search" placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
-        <el-table
-          :data="tableData"
-          ref="operationListRef"
-          height="530"
-          @selection-change="handleSelectionChange"
-        >
+        <el-table :data="tableData" class="w-full m-t-24px" ref="operationListRef" height="calc(100% - 262px)"
+          @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="姓名" prop="name" width="80">
             <template #default="scope">
@@ -61,7 +68,7 @@
           </el-table-column>
           <el-table-column label="账号状态" prop="isEnable" width="150">
             <template #default="scope">
-              {{ scope.row.isEnable == '1'?'禁用':scope.row.isEnable == '0'?'启用': '--' }}
+              {{ scope.row.isEnable == '1' ? '禁用' : scope.row.isEnable == '0' ? '启用' : '--' }}
             </template>
           </el-table-column>
           <el-table-column label="管理人" prop="leaderName" width="150"></el-table-column>
@@ -88,85 +95,59 @@
             </template>
           </el-table-column>
         </el-table>
-        <div style="display: flex; justify-content: center; margin-top: 15px">
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 30, 40]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+        <div style="display: flex; justify-content: flex-end; margin-top: 15px">
+          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
         </div>
-      </el-col>
-    </el-row>
-    <el-dialog
-      v-model="dialogShow"
-      :title="title"
-      width="1000"
-    >
+      </div>
+    </div>
+    <el-dialog v-model="dialogShow" :title="title" width="1000">
       <addOperation ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
     </el-dialog>
-    <el-dialog
-      v-model="addTeamShow"
-      title="添加"
-      width="800"
-    >
+    <el-dialog v-model="addTeamShow" title="添加" width="800">
       <addTeam ref="AddTeamRef" @closeDialog="closeAddTeamDialog"></addTeam>
     </el-dialog>
-    <el-dialog
-      v-model="allocationShow"
-      title="分配管理人"
-      width="800"
-    >
+    <el-dialog v-model="allocationShow" title="分配管理人" width="800">
       <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
     </el-dialog>
-    <el-dialog
-      v-model="peopleShow"
-      title="设置负责人"
-      width="800"
-    >
-        <el-row :gutter="20">
-            <el-col :span="12">
-                <el-tree
-                        ref="treeRef"
-                        :data="options"
-                        :props="cascaderProps"
-                        @node-click="handleNodeClick"
-                />
-            </el-col>
-            <el-col :span="12">
-                <el-radio-group v-if="tableData?.length>0" v-model="radioValue" class="allocation-radio">
-                    <el-radio v-for="item in tableData" :value="item.id" size="large">
-                        <template #default>
-                            <div>{{ item.name }}</div>
-                            <div>{{ item.id }}</div>
-                        </template>
-                    </el-radio>
-                </el-radio-group>
-                <el-empty v-else description="暂无数据" />
-            </el-col>
-        </el-row>
+    <el-dialog v-model="peopleShow" title="设置负责人" width="800">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-tree ref="treeRef" :data="options" :props="cascaderProps" @node-click="handleNodeClick" />
+        </el-col>
+        <el-col :span="12">
+          <el-radio-group v-if="tableData?.length > 0" v-model="radioValue" class="allocation-radio">
+            <el-radio v-for="item in tableData" :value="item.id" size="large">
+              <template #default>
+                <div>{{ item.name }}</div>
+                <div>{{ item.id }}</div>
+              </template>
+            </el-radio>
+          </el-radio-group>
+          <el-empty v-else description="暂无数据" />
+        </el-col>
+      </el-row>
       <template #footer>
         <el-button @click="onCancel">取消</el-button>
         <el-button type="primary" @click="onConfirm">确定</el-button>
       </template>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import {ElMessageBox, ElMessage, TableInstance} from 'element-plus'
+import { ElMessageBox, ElMessage, TableInstance } from 'element-plus'
 import { useRouter } from 'vue-router'
 import api from "@/api";
 import addOperation from './modules/addOperation.vue'
 import allocation from './modules/allocation.vue'
 import addTeam from './modules/addTeam.vue'
 import Allocation from "@/views/operationManagement/modules/allocation.vue";
-import {initial} from "lodash-es";
+import { initial } from "lodash-es";
 import team from "@/api/modules/team.ts";
+import { SwitchLabel } from '@headlessui/vue';
 
 let myRouter = useRouter()
 const AddTeamRef = ref(null)
@@ -175,9 +156,9 @@ const AllocationRef = ref(null)
 
 // 机构数据
 const cascaderProps = {
-    value: 'id',
-    label: 'name',
-    children: 'children'
+  value: 'id',
+  label: 'name',
+  children: 'children'
 }
 let options = ref([])
 // 人员类型匹配
@@ -210,7 +191,7 @@ const statusMap = (value: any) => {
 // 获取机构数据
 const institutionList = () => {
   api.institutionApi.institutionList({ name: '', system: '' }).then(res => {
-    if(res?.code == 200) {
+    if (res?.code == 200) {
       options.value = res.data
     } else {
       ElMessage({
@@ -221,7 +202,7 @@ const institutionList = () => {
   })
 }
 const handleNodeClick = (data) => {
-    initList(teamData.value[0])
+  initList(teamData.value[0])
 }
 
 // 团队
@@ -233,9 +214,10 @@ const initTeam = () => {
     param: treeValue.value,
     attribute: 2
   }).then(res => {
-    if(res.code == 200) {
+    if (res.code == 200) {
       teamData.value = res.data
-      if(teamData.value) {
+      console.log("🚀 ~ initTeam ~ teamData.value:", teamData.value)
+      if (teamData.value) {
         initList(teamData.value[0])
       }
     } else {
@@ -275,7 +257,7 @@ const initList = (item) => {
     pages: currentPage.value,
     size: pageSize.value
   }).then(res => {
-    if(res.code == 200) {
+    if (res.code == 200) {
       tableData.value = res.data.records
       total.value = res.data.total
     } else {
@@ -302,10 +284,10 @@ const treeNodeCommend = (item, e) => {
         showCancelButton: true,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-      }).then(( action ) => {
-        if(action === 'confirm') {
+      }).then((action) => {
+        if (action === 'confirm') {
           api.teamApi.deleteById(item.id).then(res => {
-            if(res.code == 200) {
+            if (res.code == 200) {
               ElMessage({
                 message: res.msg,
                 type: 'success'
@@ -319,7 +301,7 @@ const treeNodeCommend = (item, e) => {
             }
           })
         }
-      }).catch(( action ) => {
+      }).catch((action) => {
 
       })
       break;
@@ -374,7 +356,7 @@ const onCancel = () => {
   radioValue.value = ''
 }
 const onConfirm = () => {
-  if(!radioValue.value) {
+  if (!radioValue.value) {
     ElMessage({
       message: '请选择负责人',
       type: 'warning'
@@ -385,7 +367,7 @@ const onConfirm = () => {
     id: teamInfo.value.id,
     managerId: radioValue.value
   }).then(res => {
-    if(res.code == 200) {
+    if (res.code == 200) {
       ElMessage({
         message: res.msg,
         type: 'success'
@@ -410,7 +392,7 @@ const tableDataCommand = (scope, e) => {
     case '编辑':
       dialogShow.value = true
       nextTick(() => {
-        AddOperationRef.value.initEditData(scope.row.userId,scope.row.id)
+        AddOperationRef.value.initEditData(scope.row.userId, scope.row.id)
       })
       title.value = '编辑'
       break;
@@ -422,13 +404,13 @@ const tableDataCommand = (scope, e) => {
         showCancelButton: true,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-      }).then(( action ) => {
-        if(action === 'confirm') {
+      }).then((action) => {
+        if (action === 'confirm') {
           api.teamApi.deleteAssociatedUsers({
             id: teamInfo.value.id,
             userIds: [scope.row.userId]
           }).then(res => {
-            if(res?.code == 200) {
+            if (res?.code == 200) {
               ElMessage({
                 message: res.msg,
                 type: 'success'
@@ -442,7 +424,7 @@ const tableDataCommand = (scope, e) => {
             }
           })
         }
-      }).catch(( action ) => {
+      }).catch((action) => {
 
       })
       break;
@@ -454,15 +436,15 @@ const tableDataCommand = (scope, e) => {
         showCancelButton: true,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-      }).then(( action ) => {
-        if(action === 'confirm') {
+      }).then((action) => {
+        if (action === 'confirm') {
           let data = {
             ids: [scope.row.id],
             isEnable: 1,
             getAll: 0
           }
           api.operationApi.operationIsEnable(data).then(res => {
-            if(res?.code == 200) {
+            if (res?.code == 200) {
               ElMessage({
                 message: res.msg,
                 type: 'success'
@@ -476,7 +458,7 @@ const tableDataCommand = (scope, e) => {
             }
           })
         }
-      }).catch(( action ) => {
+      }).catch((action) => {
 
       })
       break;
@@ -488,15 +470,15 @@ const tableDataCommand = (scope, e) => {
         showCancelButton: true,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-      }).then(( action ) => {
-        if(action === 'confirm'){
+      }).then((action) => {
+        if (action === 'confirm') {
           let data = {
             ids: [scope.row.id],
             isEnable: 0,
             getAll: 0
           }
           api.operationApi.operationIsEnable(data).then(res => {
-            if(res?.code == 200) {
+            if (res?.code == 200) {
               ElMessage({
                 message: res.msg,
                 type: 'success'
@@ -510,7 +492,7 @@ const tableDataCommand = (scope, e) => {
             }
           })
         }
-      }).catch(( action ) => {
+      }).catch((action) => {
 
       })
       break;
@@ -527,6 +509,11 @@ const closeAddOperation = (type: string) => {
   dialogShow.value = false
 }
 
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+
 onMounted(() => {
   institutionList()
   initTeam()
@@ -535,63 +522,52 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.team{
-  height: 770px;
-  background: #fff;
-  .search-input{
-    padding: 10px 20px;
-  }
-  .teamTree{
-    height: 700px;
-    overflow-y: auto;
-    background: #fff;
-    .custom-tree-node{
-      width: calc(100% - 40px);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 5px 10px;
-      margin: 5px auto;
-      cursor: pointer;
-      &:hover{
-        background: rgba(0,0,0,.1);
-      }
-      .custom-tree-node-label{
-        width: 70%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+.member-tree {
+  :deep(.el-tree-node) {
+    height: 32px;
+    padding-right: 16px;
+    position: relative;
+
+    &.is-focusable {
+      &::after {
+        content: '';
+        position: absolute;
+        height: 32px;
+        width: 1px;
+        background-color: #0083FF;
+        top: 0;
+        right: 0;
+        bottom: 0;
       }
     }
   }
-  .add-btn{
-    display: block;
-    margin: 0 auto;
-  }
-  .info{
-    h3{
-      margin: 10px 0;
-    }
-    p{
-      margin: 6px 0;
-      font-size: 14px;
-      color: rgba(0,0,0,.7);
-    }
+
+  :deep(.el-icon.el-tree-node__expand-icon.is-leaf) {
+    display: none
   }
-  .btn{
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+
+  :deep(.el-checkbox__inner) {
+    border-radius: 50%
   }
-  .nameInfo{
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    span{
-      background: #f0f0f0;
-      padding: 2px 4px;
-      border-radius: 2px;
-    }
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: calc(100% + 40px);
+    width: 1px;
+    background-color: #EEEEEE;
+    top: -20px;
+    right: 0;
+    bottom: -20px;
   }
 }
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  width: 100%;
+}
 </style>

src/views/operationManagement/operationDetail.vue

@@ -1,24 +1,36 @@
 <template>
-  <div class="detail">
-    <div class="state" v-if="dataDetail?.status == 5">
-      <el-icon :size="20" style="color: red; margin: 3px 10px 0 0;">
-        <CircleClose />
-      </el-icon>
-      <div>
-        <h3>审核不通过</h3>
-        <p>{{ dataDetail?.approvalOpinion }}如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
-        <el-button link type="primary" @click="editDetail">修改并重提交</el-button>
+  <PageMain class="vh100">
+    <div class="flex flex-col h-[calc(100%+40px)] bg-[#f5f8ff] m-[-1.5rem_-1.5rem] overflow-hidden">
+      <div class="state-box" v-if="dataDetail?.status === 5">
+        <div class="state">
+          <el-icon :size="20" style="color: red; margin: 3px 10px 0 0;">
+            <CircleClose />
+          </el-icon>
+          <div>
+            <h3>审核不通过</h3>
+            <p>{{ dataDetail?.approvalOpinion }}如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
+            <el-button link type="primary" @click="editDetail">修改并重提交</el-button>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="info">
-      <el-descriptions>
-        <template #title>
-          <el-row :gutter="20" flex justify="space-between">
-            <el-col :span="12" style="display: flex; align-items: center;">
-              <span class="firstName">{{ initName(dataDetail?.name) }}</span>
-              <span class="allName">{{ dataDetail?.name }}</span>
-            </el-col>
-            <el-col :span="12" style="display: flex; justify-content: flex-end">
+      <div class="bg-[#f5f8ff]" :class="dataDetail?.status !== 5 ? 'h-full' : 'h-[calc(100%-105px)]'">
+        <div class="info">
+          <div class="flex items-start justify-between">
+            <div class="flex items-center">
+              <el-avatar :size="100" src="">
+                <div class="bg-[#00a0f4] w-full h-full line-height-100px font-size-48px">
+                  {{ initName(dataDetail?.name) }}
+                </div>
+              </el-avatar>
+              <div class="flex flex-col items-start justify-center m-l-16px">
+                <div class="font-size-20px line-height-[1] color-[#333] font-600 m-b-12px">
+                  {{ dataDetail?.name }}
+                </div>
+                <el-tag class="m-t-12px" :type="setStatusObj(dataDetail?.status)?.type">{{
+                  setStatusObj(dataDetail?.status)?.label }}</el-tag>
+              </div>
+            </div>
+            <div class="flex">
               <el-button class="bg-white" style="border-radius: 2px" plain type="primary" @click="checkPass"
                 v-if="dataDetail?.status == 0 || dataDetail?.status == 1 || dataDetail?.status == 2 || dataDetail?.status == 3">审核通过</el-button>
               <el-button class="bg-white" style="border-radius: 2px" plain type="primary" @click="checkNotPass"
@@ -36,173 +48,158 @@
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
-            </el-col>
-          </el-row>
-        </template>
-        <el-descriptions-item label="工号：" width="33%">{{ dataDetail?.userId }}</el-descriptions-item>
-        <el-descriptions-item label="所属机构：" width="33%">{{ dataDetail?.deptName }}</el-descriptions-item>
-        <el-descriptions-item label="状态：" width="33%">{{ statusMap(dataDetail?.status) }}</el-descriptions-item>
-        <el-descriptions-item label="类型：" width="33%">{{ typeAttrMap(dataDetail?.typeAttr) }}</el-descriptions-item>
-        <el-descriptions-item label="所属团队：" width="33%">{{ dataDetail?.organizationName }}</el-descriptions-item>
-        <el-descriptions-item label="创建人：" width="33%">{{ dataDetail?.updateBy }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间：" width="33%">{{ dataDetail?.createTime }}</el-descriptions-item>
-      </el-descriptions>
-    </div>
-    <div class="message">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="(tab) => { activeName = tab }">
-        <el-tab-pane label="基本信息" name="msg" style="padding: 0 24px">
-          <div class="other">
-            <el-descriptions title="个人信息">
-              <el-descriptions-item label="姓名：" width="33%">{{ dataDetail?.name }}</el-descriptions-item>
-              <el-descriptions-item label="手机号：" width="33%">{{ dataDetail?.mobile }}</el-descriptions-item>
-              <el-descriptions-item label="证件号：" width="33%">{{ dataDetail?.identity }}</el-descriptions-item>
-              <el-descriptions-item label="证件有效期始：" width="33%">{{ dataDetail?.identityTimeStart
-                }}</el-descriptions-item>
-              <el-descriptions-item label="证件有效期止：" width="33%">{{ dataDetail?.identityTimeEnd }}</el-descriptions-item>
-            </el-descriptions>
-            <el-descriptions title="其他信息">
-              <el-descriptions-item>
-                <template #default>
-                  <el-row :gutter="20">
-                    <el-col :span="12" class="mb-5">
-                      管理人：{{ dataDetail?.leaderName }}
-                    </el-col>
-                    <el-col :span="12" class="mb-5">
-                      管理人工号：{{ dataDetail?.leaderId }}
-                    </el-col>
-                    <el-col :span="12" class="mb-5">
-                      推荐人：{{ dataDetail?.referrerName }}
-                    </el-col>
-                    <el-col :span="12" class="mb-5">
-                      推荐人工号：{{ dataDetail?.referrerId }}
-                    </el-col>
-                  </el-row>
-                </template>
-              </el-descriptions-item>
-            </el-descriptions>
-            <el-descriptions title="银行卡信息">
-              <el-descriptions-item>
-                <template #default>
-                  <el-table :data="dataDetail?.bankCardList" height="300">
-                    <el-table-column prop="name" label="姓名"></el-table-column>
-                    <el-table-column prop="bankName" label="开户行"></el-table-column>
-                    <el-table-column prop="bankCardNumber" label="卡号"></el-table-column>
-                    <el-table-column prop="bankAddress" label="开户支行"></el-table-column>
-                    <el-table-column prop="auditStatus" label="审核状态">
-                      <template #default="scope">
-                        {{ scope.row.auditStatus == '0' ? '未审核' : scope.row.auditStatus == '1' ? '审核通过' : scope.row.auditStatus
-                        == '2'?'审核驳回':''}}
-                      </template>
-                    </el-table-column>
-                    <el-table-column label="操作">
-                      <template #default="scope">
-                        <el-button link type="primary" @click="editBankCard(scope.row)">详情</el-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-                </template>
-              </el-descriptions-item>
-            </el-descriptions>
-            <el-button class="bg-white" plain type="primary" icon="plus" style="width: 100%; border-radius: 2px"
-              @click="addBankCard">添加银行卡</el-button>
+            </div>
           </div>
-        </el-tab-pane>
-        <el-tab-pane label="资料附件" name="file" style="padding: 0 24px">
-          <div class="other">
-            <el-descriptions title="资料附件">
-              <el-descriptions-item>
-                <template #default>
-                  <div class="fileItem" v-if="imageChangeName('sfz1')">
-                    <span class="label">身份证（人像面）</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('sfz1') }}</span>
-                      <el-icon class="file-icon" @click="imageView('sfz1')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('sfz1')">
-                        <Download />
-                      </el-icon>
+          <el-descriptions class="m-t-18px">
+            <el-descriptions-item label="工号：" width="33%">{{ dataDetail?.userId }}</el-descriptions-item>
+            <el-descriptions-item label="所属机构：" width="33%">{{ dataDetail?.deptName }}</el-descriptions-item>
+            <el-descriptions-item label="类型：" width="33%">{{ typeAttrMap(dataDetail?.typeAttr) }}</el-descriptions-item>
+            <el-descriptions-item label="所属团队：" width="33%">{{ dataDetail?.organizationName }}</el-descriptions-item>
+            <el-descriptions-item label="创建人：" width="33%">{{ dataDetail?.updateBy }}</el-descriptions-item>
+            <el-descriptions-item label="创建时间：" width="33%">{{ dataDetail?.createTime }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="message h-[calc(100%-224px)]">
+          <el-tabs v-model="activeName" class="demo-tabs h-full" @tab-click="(tab) => { activeName = tab }">
+            <el-tab-pane label="基本信息" name="msg" class=" h-full overflow-auto" style="padding: 0 24px">
+              <el-descriptions title="个人信息">
+                <el-descriptions-item label="姓名：" width="33%">{{ dataDetail?.name }}</el-descriptions-item>
+                <el-descriptions-item label="手机号：" width="33%">{{ dataDetail?.mobile }}</el-descriptions-item>
+                <el-descriptions-item label="证件号：" width="33%">{{ dataDetail?.identity }}</el-descriptions-item>
+                <el-descriptions-item label="证件有效期始：" width="33%">{{ dataDetail?.identityTimeStart
+                  }}</el-descriptions-item>
+                <el-descriptions-item label="证件有效期止：" width="33%">{{ dataDetail?.identityTimeEnd
+                  }}</el-descriptions-item>
+              </el-descriptions>
+              <el-descriptions title="其他信息">
+                <el-descriptions-item label="管理人：" width="33%">{{ dataDetail?.leaderName }}</el-descriptions-item>
+                <el-descriptions-item label="管理人工号：" width="33%">{{ dataDetail?.leaderId }}</el-descriptions-item>
+                <el-descriptions-item label="推荐人：" width="33%">{{ dataDetail?.referrerName }}</el-descriptions-item>
+                <el-descriptions-item label="推荐人工号：" width="33%">{{ dataDetail?.referrerId }}</el-descriptions-item>
+              </el-descriptions>
+              <el-descriptions title="银行卡信息">
+                <el-descriptions-item>
+                  <template #default>
+                    <el-table :data="dataDetail?.bankCardList" height="300">
+                      <el-table-column prop="name" label="姓名"></el-table-column>
+                      <el-table-column prop="bankName" label="开户行"></el-table-column>
+                      <el-table-column prop="bankCardNumber" label="卡号"></el-table-column>
+                      <el-table-column prop="bankAddress" label="开户支行"></el-table-column>
+                      <el-table-column prop="auditStatus" label="审核状态">
+                        <template #default="scope">
+                          {{ scope.row.auditStatus == '0' ? '未审核' : scope.row.auditStatus == '1' ? '审核通过' :
+                            scope.row.auditStatus
+                              == '2' ? '审核驳回' : '' }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="操作">
+                        <template #default="scope">
+                          <el-button link type="primary" @click="editBankCard(scope.row)">详情</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </template>
+                </el-descriptions-item>
+              </el-descriptions>
+              <el-button class="bg-white" plain type="primary" icon="plus" style="width: 100%; border-radius: 2px"
+                @click="addBankCard">添加银行卡</el-button>
+            </el-tab-pane>
+            <el-tab-pane label="资料附件" name="file" class=" h-full overflow-auto" style="padding: 0 24px">
+              <el-descriptions title="资料附件">
+                <el-descriptions-item>
+                  <template #default>
+                    <div class="fileItem" v-if="imageChangeName('sfz1')">
+                      <span class="label">身份证（人像面）</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('sfz1') }}</span>
+                        <el-icon class="file-icon" @click="imageView('sfz1')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('sfz1')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                  <div class="fileItem" v-if="imageChangeName('sfz2')">
-                    <span class="label">身份证（国徽面）</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('sfz2') }}</span>
-                      <el-icon class="file-icon" @click="imageView('sfz2')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('sfz2')">
-                        <Download />
-                      </el-icon>
+                    <div class="fileItem" v-if="imageChangeName('sfz2')">
+                      <span class="label">身份证（国徽面）</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('sfz2') }}</span>
+                        <el-icon class="file-icon" @click="imageView('sfz2')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('sfz2')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                  <div class="fileItem" v-if="imageChangeName('qualification')">
-                    <span class="label">展业资格证</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('qualification') }}</span>
-                      <el-icon class="file-icon" @click="imageView('qualification')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('qualification')">
-                        <Download />
-                      </el-icon>
+                    <div class="fileItem" v-if="imageChangeName('qualification')">
+                      <span class="label">展业资格证</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('qualification') }}</span>
+                        <el-icon class="file-icon" @click="imageView('qualification')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('qualification')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-
-                  <div class="fileItem" v-if="imageChangeName('contract')">
-                    <span class="label">劳动合同</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('contract') }}</span>
-                      <el-icon class="file-icon" @click="imageView('contract')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('contract')">
-                        <Download />
-                      </el-icon>
+
+                    <div class="fileItem" v-if="imageChangeName('contract')">
+                      <span class="label">劳动合同</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('contract') }}</span>
+                        <el-icon class="file-icon" @click="imageView('contract')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('contract')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                  <div class="fileItem" v-if="imageChangeName('applicant')">
-                    <span class="label">应聘表</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('applicant') }}</span>
-                      <el-icon class="file-icon" @click="imageView('applicant')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('applicant')">
-                        <Download />
-                      </el-icon>
+                    <div class="fileItem" v-if="imageChangeName('applicant')">
+                      <span class="label">应聘表</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('applicant') }}</span>
+                        <el-icon class="file-icon" @click="imageView('applicant')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('applicant')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                  <div class="fileItem" v-if="imageChangeName('salaryTable')">
-                    <span class="label">定薪表</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('salaryTable') }}</span>
-                      <el-icon class="file-icon" @click="imageView('salaryTable')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('salaryTable')">
-                        <Download />
-                      </el-icon>
+                    <div class="fileItem" v-if="imageChangeName('salaryTable')">
+                      <span class="label">定薪表</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('salaryTable') }}</span>
+                        <el-icon class="file-icon" @click="imageView('salaryTable')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('salaryTable')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                  <div class="fileItem" v-if="imageChangeName('leaveTable')">
-                    <span class="label">离职表</span>
-                    <div class="fileName">
-                      <span class="file-name">{{ imageChangeName('leaveTable') }}</span>
-                      <el-icon class="file-icon" @click="imageView('leaveTable')">
-                        <View />
-                      </el-icon>
-                      <el-icon class="file-icon" @click="downloadImage('leaveTable')">
-                        <Download />
-                      </el-icon>
+                    <div class="fileItem" v-if="imageChangeName('leaveTable')">
+                      <span class="label">离职表</span>
+                      <div class="fileName">
+                        <span class="file-name">{{ imageChangeName('leaveTable') }}</span>
+                        <el-icon class="file-icon" @click="imageView('leaveTable')">
+                          <View />
+                        </el-icon>
+                        <el-icon class="file-icon" @click="downloadImage('leaveTable')">
+                          <Download />
+                        </el-icon>
+                      </div>
                     </div>
-                  </div>
-                </template>
-              </el-descriptions-item>
-            </el-descriptions>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
+                  </template>
+                </el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
     </div>
     <el-dialog v-model="bankCardDialogShow" :title="bankTitle" width="500">
       <addCard v-if="bankCardDialogShow" @closeDialog="closeAddBankCard" :userInfo="bankCardInfo"></addCard>
@@ -221,23 +218,21 @@
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
 import { nextTick, ref } from 'vue'
 import addOperation from './modules/addOperation.vue'
 import addCard from './modules/addCard.vue'
-import allocation from './modules/allocation.vue'
 import pinyin from "js-pinyin";
 import { ElMessage, ElMessageBox } from 'element-plus'
 import Allocation from "@/views/operationManagement/modules/allocation.vue";
 import { useRoute, useRouter } from 'vue-router'
 import api from '@/api'
 import { OperationIsEnable } from "@/api/modules/operation.ts";
-import router from "@/router";
-import Detail from '../representative/detail.vue';
 import VueOfficeDocx from "@vue-office/docx";
+import { getDictItems } from "@/api/dict";
 
 
 let AddOperationRef = ref(null)
@@ -350,7 +345,22 @@ const typeAttrMap = (value) => {
   }
   return map[value]
 }
+interface dictType {
+  value: string;
+  id: string;
+  label: string;
 
+  [property: string]: any;
+}
+const statusList = ref<dictType[]>([]);
+
+const setStatusObj = (status: number) => {
+  let type = "info";
+  if ([2, 5, 8].includes(status)) type = "danger";
+  if ([6].includes(status)) type = "primary";
+  const obj = statusList.value.find((v) => Number(v.value) === status);
+  return { ...obj, type };
+};
 
 // 银行卡列表数据
 // let tableData = ref([])
@@ -727,34 +737,32 @@ const initName = (name: string) => {
   return name ? pinyin.getFullChars(name).substring(0, 1) : ''
 }
 
-onMounted(() => {
+onMounted(async () => {
   initDetail()
   initBankCard()
+  statusList.value = await getDictItems({ dictCode: "person_status" });
 })
 
 </script>
 
 <style scoped lang="scss">
-.detail {
-  margin: 0 10px;
-  height: calc(100vh - 120px);
-  background-color: white;
-  overflow-y: auto;
+.state-box {
+  padding-bottom: 10px;
+  background-color: #f5f8ff;
 
   .state {
-    border: 1px solid #FF4545;
-    border-radius: 10px;
+    border: 1px solid #ff4545;
+    border-radius: 4px;
     padding: 10px 20px;
-    background: #FFF4F4;
+    background: #fff4f4;
     display: flex;
-    margin: 5px 0;
     font-weight: 400;
     color: #333333;
 
     h3 {
       font-size: 16px;
       margin: 0 0 10px;
-      color: rgba(0, 0, 0, .64);
+      color: rgba(0, 0, 0, 0.64);
     }
 
     p {
@@ -762,123 +770,128 @@ onMounted(() => {
       margin: 10px 0;
     }
   }
+}
 
-  .info {
-    background: white;
-    padding: 24px;
-    margin: 10px 0;
-    border-radius: 10px;
+:deep(.el-tabs__nav-scroll) {
+  padding-left: 24px;
+}
 
-    :deep(.el-descriptions__title) {
-      width: 100%;
-    }
+:deep(.el-tabs__item.is-top) {
+  font-size: 18px;
+  height: 60px;
+}
 
-    :deep(.el-tabs__nav-wrap) {
-      padding: 0 25px;
-    }
+.info {
+  background: white;
+  padding: 24px 24px 0;
+  margin-bottom: 10px;
+  border-radius: 6px;
 
-    :deep(.el-tabs__item) {
-      font-size: 18px;
-    }
+  :deep(.el-descriptions__title) {
+    width: 100%;
+  }
 
-    .firstName {
-      width: 30px;
-      height: 30px;
-      text-align: center;
-      line-height: 30px;
-      border-radius: 15px;
-      background: #409EFF;
-      color: white;
-      font-size: 18px;
-      margin-right: 10px;
-    }
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 25px;
+  }
 
-    .allName {
-      font-size: 14px;
-    }
+  :deep(.el-tabs__item) {
+    font-size: 18px;
+  }
+
+  .firstName {
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 15px;
+    background: #409EFF;
+    color: white;
+    font-size: 18px;
+    margin-right: 10px;
   }
 
-  .message {
-    background: white;
+  .allName {
+    font-size: 14px;
+  }
+}
 
-    :deep(.el-tabs__nav-scroll) {
-      padding: 24px 0 0 24px;
-    }
+.message {
+  background: white;
+
+  .other {
+    .fileItem {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin: 10px 0;
 
-    .other {
-      .fileItem {
+      .label {
+        width: 200px;
+      }
+
+      .fileName {
+        width: calc(100% - 500px);
+        line-height: 30px;
         display: flex;
-        justify-content: flex-start;
         align-items: center;
-        margin: 10px 0;
+        padding: 0 20px;
+
+        &:hover {
+          background: #ccc;
+        }
 
-        .label {
+        .file-name {
           width: 200px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-right: 20px;
         }
 
-        .fileName {
-          width: calc(100% - 500px);
-          line-height: 30px;
+        .file-icon {
           display: flex;
+          justify-content: flex-start;
           align-items: center;
-          padding: 0 20px;
+          height: 30px;
+          margin-left: 10px;
+          font-size: 16px;
+          cursor: pointer;
 
           &:hover {
-            background: #ccc;
-          }
-
-          .file-name {
-            width: 200px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-right: 20px;
-          }
-
-          .file-icon {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            height: 30px;
-            margin-left: 10px;
-            font-size: 16px;
-            cursor: pointer;
-
-            &:hover {
-              color: #00a0f4;
-            }
+            color: #00a0f4;
           }
         }
       }
+    }
 
-      .cardImage {
-        display: block;
-        width: 80px;
-        height: 80px;
-        border-radius: 5px;
-      }
+    .cardImage {
+      display: block;
+      width: 80px;
+      height: 80px;
+      border-radius: 5px;
+    }
 
-      :deep(.el-descriptions__title) {
-        padding-left: 20px;
-        font-size: 16px;
-      }
+    :deep(.el-descriptions__title) {
+      padding-left: 20px;
+      font-size: 16px;
     }
   }
+}
 
-  .image-box {
-    display: flex;
-    align-content: center;
-    justify-content: center;
+.image-box {
+  display: flex;
+  align-content: center;
+  justify-content: center;
 
-    .image-view {
-      width: 300px;
-      height: 200px;
-    }
+  .image-view {
+    width: 300px;
+    height: 200px;
   }
+}
 
-  :deep(.el-table th.el-table__cell) {
-    background-color: #F7F7F9;
-  }
+:deep(.el-table th.el-table__cell) {
+  background-color: #F7F7F9;
 }
 
 :deep(.vue-office-docx-main) {

src/views/operationManagement/team.vue

@@ -1,42 +1,53 @@
 <template>
-  <div class="team">
-    <el-row :gutter="20" style="width: 100%; overflow:hidden;">
-      <el-col :span="4">
-        <div class="teamTree">
-          <el-input class="search-input" v-model="treeValue" placeholder="团队名称查找" prefix-icon="Search"
-            @keyup.enter="initTeam"></el-input>
-          <div class="custom-tree-node" v-for="item in teamData" :key="item.id" @click.stop="initList(item)">
-            <span class="custom-tree-node-label">{{ item.name }}</span>
-            <el-dropdown class="custom-tree-node-more" @command="treeNodeCommend(item, $event)">
-              <el-icon>
-                <MoreFilled />
-              </el-icon>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="编辑">编辑</el-dropdown-item>
-                  <el-dropdown-item command="删除">删除</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
+  <PageMain class="vh100">
+    <div class="flex j-s" style="height: 100%;">
+      <div class="w-278px h-full m-r-24px member-tree relative flex-shrink-0">
+        <el-input v-model="treeValue" style="width: 260px" placeholder="团队名称查找" @keyup.enter="initTeam">
+          <template #append>
+            <el-button icon="Search" link @click="initTeam" />
+          </template>
+        </el-input>
+        <!-- <div style="display: flex;justify-content: space-between;margin: 10px 0;">
+          <el-checkbox @change="expandTree" v-model="isExpand" :label="isExpand ? '全部收起' : '全部展开'" />
+        </div> -->
+        <el-tree class="h-[calc(100%-76px)] m-t-12px" :data="teamData" :props="defaultProps"
+          :expand-on-click-node="false" @node-click="initList">
+          <template #default="{ node, data }">
+            <div class="custom-tree-node">
+              <div>{{ node.label }}</div>
+              <el-dropdown>
+                <div class="h-14px">
+                  <el-icon>
+                    <More />
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="treeNodeCommend(data, '编辑')">编辑</el-dropdown-item>
+                    <el-dropdown-item @click="treeNodeCommend(data, '删除')">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-tree>
+        <div class="flex justify-center">
+          <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加团队</el-button>
+        </div>
+      </div>
+      <div class="w-[calc(100%-302px)]">
+        <div class="color-[#333] text-18px font-500 line-height-22px">{{ teamInfo.name }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-12px">所属机构： {{ teamInfo?.deptName }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">管理人： {{ teamInfo?.managerName ?
+          `${teamInfo?.managerName}-` : '' }}{{ teamInfo?.managerId }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">描述：{{ teamInfo?.describeInformation }}</div>
+        <div class="flex justify-between items-center p-t-24px b-t-(1px solid #EEEEEE) m-t-24px h-56px">
+          <el-button type="primary" @click="setPeople">设置负责人</el-button>
+          <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search"
+            placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
         </div>
-        <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加团队</el-button>
-      </el-col>
-      <el-col :span="20">
-        <el-row :gutter="20">
-          <el-col :span="22" class="info">
-            <h3>{{ teamInfo.name }}</h3>
-            <p>所属机构： {{ teamInfo?.deptName }}</p>
-            <p>管理人： {{ teamInfo?.managerName ? `${teamInfo?.managerName}-` : '' }}{{ teamInfo?.managerId }}</p>
-            <p>描述：{{ teamInfo?.describeInformation }}</p>
-          </el-col>
-          <el-col :span="2" class="btn">
-            <el-button plain @click="setPeople">设置负责人</el-button>
-          </el-col>
-        </el-row>
-        <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search"
-          placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
-        <el-table :data="tableData" ref="operationListRef" height="530" @selection-change="handleSelectionChange">
+        <el-table :data="tableData" class="w-full m-t-24px" ref="operationListRef" height="calc(100% - 262px)"
+          @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="姓名" prop="name" width="80">
             <template #default="scope">
@@ -86,13 +97,13 @@
             </template>
           </el-table-column>
         </el-table>
-        <div style="display: flex; justify-content: center; margin-top: 15px">
+        <div style="display: flex; justify-content: flex-end; margin-top: 15px">
           <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
             layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
             @current-change="handleCurrentChange" />
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <el-dialog v-model="dialogShow" :title="title" width="1000">
       <addOperation ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
     </el-dialog>
@@ -105,7 +116,7 @@
     <el-dialog v-model="peopleShow" title="设置负责人" width="800">
       <el-row :gutter="20">
         <el-col :span="12">
-          <el-tree ref="treeRef" :data="options" :props="cascaderProps" @node-click="handleNodeClick" />
+          <el-tree :data="options" :props="cascaderProps" @node-click="handleNodeClick" />
         </el-col>
         <el-col :span="12">
           <el-radio-group v-if="tableData?.length > 0" v-model="radioValue" class="allocation-radio">
@@ -124,7 +135,7 @@
         <el-button type="primary" @click="onConfirm">确定</el-button>
       </template>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -499,6 +510,12 @@ const closeAddOperation = (type: string) => {
   initList(teamInfo.value)
 }
 
+
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+
 onMounted(() => {
   institutionList()
   initTeam()
@@ -507,74 +524,52 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.team {
-  height: 770px;
-  background: #fff;
+.member-tree {
+  :deep(.el-tree-node) {
+    height: 32px;
+    padding-right: 16px;
+    position: relative;
 
-  .search-input {
-    padding: 10px 20px;
-  }
-
-  .teamTree {
-    height: 700px;
-    overflow-y: auto;
-    background: #fff;
-
-    .custom-tree-node {
-      width: calc(100% - 40px);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 5px 10px;
-      margin: 5px auto;
-      cursor: pointer;
-
-      &:hover {
-        background: rgba(0, 0, 0, .1);
-      }
-
-      .custom-tree-node-label {
-        width: 70%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    &.is-focusable {
+      &::after {
+        content: '';
+        position: absolute;
+        height: 32px;
+        width: 1px;
+        background-color: #0083FF;
+        top: 0;
+        right: 0;
+        bottom: 0;
       }
     }
   }
 
-  .add-btn {
-    display: block;
-    margin: 0 auto;
+  :deep(.el-icon.el-tree-node__expand-icon.is-leaf) {
+    display: none
   }
 
-  .info {
-    h3 {
-      margin: 10px 0;
-    }
-
-    p {
-      margin: 6px 0;
-      font-size: 14px;
-      color: rgba(0, 0, 0, .7);
-    }
+  :deep(.el-checkbox__inner) {
+    border-radius: 50%
   }
 
-  .btn {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+  &::after {
+    content: '';
+    position: absolute;
+    height: calc(100% + 40px);
+    width: 1px;
+    background-color: #EEEEEE;
+    top: -20px;
+    right: 0;
+    bottom: -20px;
   }
+}
 
-  .nameInfo {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-
-    span {
-      background: #f0f0f0;
-      padding: 2px 4px;
-      border-radius: 2px;
-    }
-  }
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  width: 100%;
 }
 </style>

src/views/operationManagement/telemarketing.vue

@@ -1,43 +1,51 @@
 <template>
-  <div class="team">
-    <el-row :gutter="20" style="width: 100%; overflow:hidden;">
-      <el-col :span="4">
-        <div class="teamTree">
-          <el-input class="search-input" v-model="treeValue" placeholder="电销组名称查找" prefix-icon="Search" @keyup.enter="initTeam"></el-input>
-          <div class="custom-tree-node" v-for="item in teamData" :key="item.id" @click.stop="initList(item)">
-            <span class="custom-tree-node-label">{{ item.name }}</span>
-            <el-dropdown class="custom-tree-node-more" @command="treeNodeCommend(item, $event)">
-              <el-icon><MoreFilled /></el-icon>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="编辑">编辑</el-dropdown-item>
-                  <el-dropdown-item command="删除">删除</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
+  <PageMain class="vh100">
+    <div class="flex j-s" style="height: 100%;">
+      <div class="w-278px h-full m-r-24px member-tree relative flex-shrink-0">
+        <el-input v-model="treeValue" style="width: 260px" placeholder="电销组名称查找" @keyup.enter="initTeam">
+          <template #append>
+            <el-button icon="Search" link @click="initTeam" />
+          </template>
+        </el-input>
+        <el-tree class="h-[calc(100%-76px)] m-t-12px" :props="defaultProps" :data="teamData"
+          :expand-on-click-node="false" @node-click="initList">
+          <template #default="{ node, data }">
+            <div class="custom-tree-node">
+              <div>{{ node.label }}</div>
+              <el-dropdown>
+                <div class="h-14px">
+                  <el-icon>
+                    <More />
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="treeNodeCommend(data, '编辑')">编辑</el-dropdown-item>
+                    <el-dropdown-item @click="treeNodeCommend(data, '删除')">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-tree>
+         <div class="flex justify-center">
+          <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加电销组</el-button>
         </div>
-        <el-button class="add-btn" icon="plus" @click="addTeamDraw">添加电销组</el-button>
-      </el-col>
-      <el-col :span="20">
-        <el-row :gutter="20">
-          <el-col :span="22" class="info">
-            <h3>{{ teamInfo.name }}</h3>
-            <p>所属机构： {{ teamInfo?.deptName }}</p>
-            <p>管理人： {{ teamInfo?.managerName?`${teamInfo?.managerName}-`:'' }}{{ teamInfo?.managerId }}</p>
-            <p>描述：{{ teamInfo?.describeInformation }}</p>
-          </el-col>
-          <el-col :span="2" class="btn">
-            <el-button plain @click="setPeople">设置负责人</el-button>
-          </el-col>
-        </el-row>
-        <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search" placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
-        <el-table
-          :data="tableData"
-          ref="operationListRef"
-          height="530"
-          @selection-change="handleSelectionChange"
-        >
+      </div>
+      <div class="w-[calc(100%-302px)]">
+        <div class="color-[#333] text-18px font-500 line-height-22px h-22px">{{ teamInfo.name }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-12px">所属机构： {{ teamInfo?.deptName }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">管理人： {{ teamInfo?.managerName ?
+          `${teamInfo?.managerName}-` : '' }}{{ teamInfo?.managerId }}</div>
+        <div class="color-[#333] text-14px line-height-22px m-t-6px">描述：{{ teamInfo?.describeInformation }}</div>
+        <div class="flex justify-between items-center p-t-24px b-t-(1px solid #EEEEEE) m-t-24px h-56px">
+          <el-button type="primary" @click="setPeople">设置负责人</el-button>
+          <el-input style="width: 300px; margin: 10px 0" v-model="searchValue" prefix-icon="Search"
+            placeholder="输入姓名，手机号，工号查找" clearable @keyup.enter="initList(teamInfo)"></el-input>
+        </div>
+        <el-table :data="tableData" class="w-full m-t-24px" ref="operationListRef" height="calc(100% - 262px)"
+          @selection-change="handleSelectionChange">
+
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="姓名" prop="name" width="80">
             <template #default="scope">
@@ -87,19 +95,13 @@
             </template>
           </el-table-column>
         </el-table>
-        <div style="display: flex; justify-content: center; margin-top: 15px">
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 30, 40]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+        <div style="display: flex; justify-content: flex-end; margin-top: 15px">
+          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <el-dialog
       v-model="dialogShow"
       :title="title"
@@ -152,7 +154,7 @@
         <el-button type="primary" @click="onConfirm">确定</el-button>
       </template>
     </el-dialog>
-  </div>
+  </PageMain>
 </template>
 
 <script setup lang="ts">
@@ -161,11 +163,8 @@ import {ElMessageBox, ElMessage, TableInstance} from 'element-plus'
 import { useRouter } from 'vue-router'
 import api from "@/api";
 import addOperation from './modules/addOperation.vue'
-import allocation from './modules/allocation.vue'
 import addTeam from './modules/addTeam.vue'
 import Allocation from "@/views/operationManagement/modules/allocation.vue";
-import {initial} from "lodash-es";
-import team from "@/api/modules/team.ts";
 
 let myRouter = useRouter()
 const AddTeamRef = ref(null)
@@ -528,6 +527,11 @@ const closeAddOperation = (type: string) => {
   dialogShow.value = false
 }
 
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+
 onMounted(() => {
   institutionList()
   initTeam()
@@ -536,63 +540,52 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.team{
-  height: 770px;
-  background: #fff;
-  .search-input{
-    padding: 10px 20px;
-  }
-  .teamTree{
-    height: 700px;
-    overflow-y: auto;
-    background: #fff;
-    .custom-tree-node{
-      width: calc(100% - 40px);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 5px 10px;
-      margin: 5px auto;
-      cursor: pointer;
-      &:hover{
-        background: rgba(0,0,0,.1);
-      }
-      .custom-tree-node-label{
-        width: 70%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+.member-tree {
+  :deep(.el-tree-node) {
+    height: 32px;
+    padding-right: 16px;
+    position: relative;
+
+    &.is-focusable {
+      &::after {
+        content: '';
+        position: absolute;
+        height: 32px;
+        width: 1px;
+        background-color: #0083FF;
+        top: 0;
+        right: 0;
+        bottom: 0;
       }
     }
   }
-  .add-btn{
-    display: block;
-    margin: 0 auto;
-  }
-  .info{
-    h3{
-      margin: 10px 0;
-    }
-    p{
-      margin: 6px 0;
-      font-size: 14px;
-      color: rgba(0,0,0,.7);
-    }
+
+  :deep(.el-icon.el-tree-node__expand-icon.is-leaf) {
+    display: none
   }
-  .btn{
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+
+  :deep(.el-checkbox__inner) {
+    border-radius: 50%
   }
-  .nameInfo{
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    span{
-      background: #f0f0f0;
-      padding: 2px 4px;
-      border-radius: 2px;
-    }
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: calc(100% + 40px);
+    width: 1px;
+    background-color: #EEEEEE;
+    top: -20px;
+    right: 0;
+    bottom: -20px;
   }
 }
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+  width: 100%;
+}
 </style>

src/views/personnel/modules/memberMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <pageMain class="vh100">
-    <div class="flex flex-col h-[calc(100%+40px)] bg-[#f5f8ff] m-[-20px_-20px] overflow-hidden">
+    <div class="flex flex-col h-[calc(100%+40px)] bg-[#f5f8ff] m-[-1.5rem_-1.5rem] overflow-hidden">
       <div class="state-box" v-if="operationForm?.status===5">
         <div class="state">
           <el-icon :size="20" style="color: red; margin: 3px 10px 0 0">