From 17211d3e8d6d3d70c2706f686e4823123cddad24 Mon Sep 17 00:00:00 2001
From: wangxia <779219182@qq.com>
Date: Tue, 24 Oct 2023 13:51:23 +0800
Subject: [PATCH] 1

---
 src/components/merchantManagement/memberInfo.vue   | 32 ++++++++---
 .../usercenter/components/dataStatistics.vue       | 64 ++++++++++++----------
 src/style/index.less                               | 31 ++++++-----
 src/utils/commonUtil.js                            | 20 +++++++
 src/views/main.vue                                 | 44 +++++++--------
 src/views/merchantBack.vue                         | 13 +----
 6 files changed, 120 insertions(+), 84 deletions(-)

diff --git a/src/components/merchantManagement/memberInfo.vue b/src/components/merchantManagement/memberInfo.vue
index 288c01f..75a8474 100644
--- a/src/components/merchantManagement/memberInfo.vue
+++ b/src/components/merchantManagement/memberInfo.vue
@@ -33,10 +33,7 @@
           <div class="f12 c9 ml24 mb8">默认角色（11人）</div>
           <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
             <template v-for="(item, index) in ['创建人(1人)','管理员(3人)','成员(12人)']">
-              <a-menu-item :key="item" class="fsa showdot" @click="selectGroup(item)">
-                {{item}}
-              
-              </a-menu-item>
+              <a-menu-item :key="item" class="fsa showdot" @click="selectGroup(item)">{{item}}</a-menu-item>
             </template>
           </a-menu>
           <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div>
@@ -111,7 +108,7 @@
         <!-- :expanded-row-keys.sync="expandedRowKeys" -->
         <!-- v-if="modalTitle == ''" -->
         <div class>
-          <a-table :columns="columns" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
+          <a-table :columns="columns" :scroll="{x:currWidth}" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
             <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
             <span slot="nickName" slot-scope="text, record">
               <!-- <svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px">
@@ -327,7 +324,7 @@
 
 <script>
 import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi } from '../../api/userinfo'
-import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole } from '../../utils/commonUtil'
+import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole, tableWidth } from '../../utils/commonUtil'
 
 export default {
   // 组件名称
@@ -407,7 +404,7 @@ export default {
             }
           },
           // ellipsis: true,
-          width: 60,
+          width: 50,
         },
         {
           title: '姓名',
@@ -415,6 +412,18 @@ export default {
           key: 'nickName',
           scopedSlots: { customRender: 'nickName' },
           ellipsis: true,
+          // customCell: (a,b) => {
+          //   console.log(a);
+          //   console.log(b);
+          //   return {
+          //     style: {
+          //       'min-width': '120px',
+          //       width: '120px',
+          //       overflow: 'hidden',
+          //       display: 'inline-block',
+          //     },
+          //   }
+          // },
           // width: 120,
         },
         {
@@ -438,8 +447,11 @@ export default {
           // width: 100,
           // filters: this.groupList,
           customRender: (text, row, index) => {
-            let text1
+            console.log(text)
+            let text1 = '系统'
             this.groupList.forEach((item) => {
+              // text1 = '系统'
+
               if (item.id == text) {
                 text1 = item.teamName
               }
@@ -499,6 +511,8 @@ export default {
     if (localStorage.getItem('LOGIN_DATA')) {
       this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
     }
+    tableWidth(this, this.columns, 120)
+    console.log(this.currWidth)
     this.$emit('setTitle', '团队成员')
   },
   /**
@@ -1000,7 +1014,7 @@ export default {
     padding-left: 16px;
     overflow: hidden;
     position: relative;
-    min-width: 1020px;
+    // min-width: 1020px;
     &::before {
       position: absolute;
       content: '';
diff --git a/src/components/userinfo/usercenter/components/dataStatistics.vue b/src/components/userinfo/usercenter/components/dataStatistics.vue
index 60a2f28..e93f944 100644
--- a/src/components/userinfo/usercenter/components/dataStatistics.vue
+++ b/src/components/userinfo/usercenter/components/dataStatistics.vue
@@ -121,7 +121,7 @@
         <div class="content">
           <!-- :expanded-row-keys.sync="expandedRowKeys" childrenColumnName="users" -->
           <!-- :scroll="{ y: tableHeight }" -->
-          <a-table :columns="columns" class="dataTable" :data-source="dataList" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
+          <a-table :columns="columns" :scroll="{x:currWidth}" class="dataTable" :data-source="dataList" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
             <span slot="custom_objob">
               <span class="fw500">在职人数</span>
             </span>
@@ -178,7 +178,7 @@
 <script>
 import { dataStatisticsListApi, dataStatisticsTeamDetailApi, getMemberGroupApi } from '../../../../api/userinfo'
 import moment from 'moment'
-import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed } from '../../../../utils/commonUtil'
+import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed, tableWidth } from '../../../../utils/commonUtil'
 const rowSelection = {
   onChange: (selectedRowKeys, selectedRows) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
@@ -326,8 +326,8 @@ export default {
       const columns = [
         {
           // title: ' 序号',
-          dataIndex: 'aliasName',
-          key: 'aliasName',
+          dataIndex: 'index',
+          key: 'index',
           slots: { title: 'title_index' },
 
           customRender: (text, row, index) => {
@@ -337,7 +337,7 @@ export default {
             return index + 1
             // }
           },
-          width: 60,
+          width: 50,
         },
         {
           title: '姓名',
@@ -610,26 +610,32 @@ export default {
   },
   // 侦听器
   watch: {
-    menuType(value) {
-      //  setTimeout(()=>{
-      console.log(value)
-      if (value == 'role') {
-        console.log(this.columns)
-        this.columns.splice(2, 0, {
-          title: '部门',
-          dataIndex: 'agencyTeamName',
-          key: 'agencyTeamName',
-          ellipsis: true,
-          width: 120,
-          slots: { title: 'agencyTeamName' },
-        })
-      } else {
+    menuType: {
+      handler(value) {
         console.log(value)
-        console.log(this.columns.slice(2, 3))
-        if (this.columns.slice(2, 3)[0].title == '部门') {
-          this.columns.splice(2, 1)
+        if (value == 'group') {
+          console.log(this.columns)
+          this.columns.splice(2, 0, {
+            title: '部门',
+            dataIndex: 'agencyTeamName',
+            key: 'agencyTeamName',
+            ellipsis: true,
+            width: 120,
+            slots: { title: 'agencyTeamName' },
+          })
+          tableWidth(this, this.columns, 120)
+          console.log(this.currWidth)
+        } else {
+          console.log(value)
+          console.log(this.columns.slice(2, 3))
+          if (this.columns.slice(2, 3)[0].title == '部门') {
+            this.columns.splice(2, 1)
+          }
         }
-      }
+      },
+      immediate: true,
+      //  setTimeout(()=>{
+
       //  },200)
     },
   },
@@ -641,6 +647,8 @@ export default {
     this.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD')
     this.contentListSearchForm.end = moment().format('YYYY-MM-DD')
     this.billList = [...this.billList, ...this.billList, ...this.billList]
+    tableWidth(this, this.columns, 120)
+    console.log(this.currWidth)
     this.$emit('setTitle', '团队数据')
     this.getDataStatisticsList()
     this.getMemberGroup()
@@ -990,7 +998,7 @@ table {
     padding-left: 16px;
     overflow: hidden;
     position: relative;
-    min-width: 1020px;
+    // min-width: 1020px;
     &::before {
       position: absolute;
       content: '';
@@ -1153,9 +1161,9 @@ td:empty:before {
       // padding-right: 0;
     }
   }
-  .ant-table-body::-webkit-scrollbar {
-    width: 0 !important;
-  }
+  // .ant-table-body::-webkit-scrollbar {
+  //   width: 0 !important;
+  // }
   .ant-table-hide-scrollbar {
     // padding-right: 0 !important;
   }
@@ -1165,7 +1173,7 @@ td:empty:before {
 }
 .content {
   position: relative;
-  overflow: auto;
+  // overflow: auto;
   // max-height: 700px;
 }
 .total {
diff --git a/src/style/index.less b/src/style/index.less
index 707c80d..0579e5e 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -1,4 +1,4 @@
-@import "http://at.alicdn.com/t/c/font_3135652_vgfhlnrtoao.css";
+@import "http://at.alicdn.com/t/c/font_3135652_jgx9kzxm8t.css";
 
 // 初始化页面样式
 body,
@@ -330,11 +330,11 @@ i {
 .pt12 {
 	padding-top: 12px;
 }
-.letter0{
-  letter-spacing: 0;
+.letter0 {
+	letter-spacing: 0;
 }
-.mb40{
-  margin-bottom: 40px;
+.mb40 {
+	margin-bottom: 40px;
 }
 .pb8 {
 	padding-bottom: 8px;
@@ -671,7 +671,7 @@ i {
 		border-radius: 4px;
 		text-align: center;
 		box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
-		padding: 0 16px 16px 16px;
+		padding: 0 16px 10px 16px;
 		> div {
 			padding: 16px;
 			text-align: center;
@@ -682,8 +682,9 @@ i {
 		> a {
 			> div {
 				display: flex;
-				padding: 16px 0;
+				padding: 12px 0;
 				font-size: 14px;
+				line-height: 24px;
 				// font-weight: bold;
 				justify-content: space-between;
 				border-bottom: 1px solid #eee;
@@ -691,7 +692,8 @@ i {
 					color: #ff4400;
 				}
 				span {
-					line-height: 18px;
+					line-height: 24px;
+
 					i {
 						font-size: 18px;
 						margin-right: 5px;
@@ -701,9 +703,9 @@ i {
 			}
 		}
 		button {
-			width: 130px;
+			width: 126px;
 			height: 32px;
-			margin-top: 24px;
+			margin-top: 12px;
 			border: 1px solid rgba(77, 87, 94, 0.1);
 			border-radius: 17px;
 			color: #ff4400;
@@ -722,7 +724,7 @@ i {
 	border-radius: 4px;
 	text-align: center;
 	box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
-	padding: 0 16px 16px 16px;
+	padding: 0 16px 10px 16px;
 	> div {
 		padding: 16px;
 		text-align: center;
@@ -733,7 +735,7 @@ i {
 	> a {
 		> div {
 			display: flex;
-			padding: 16px 0;
+			padding: 12px 0;
 			font-size: 14px;
 			// font-weight: bold;
 			justify-content: space-between;
@@ -742,7 +744,8 @@ i {
 				color: #1890ff;
 			}
 			span {
-				line-height: 18px;
+				line-height: 24px;
+
 				i {
 					font-size: 18px;
 					margin-right: 5px;
@@ -754,7 +757,7 @@ i {
 	button {
 		width: 130px;
 		height: 32px;
-		margin-top: 24px;
+		margin-top: 12px;
 		border: 1px solid rgba(77, 87, 94, 0.1);
 		border-radius: 17px;
 		color: #1890ff;
diff --git a/src/utils/commonUtil.js b/src/utils/commonUtil.js
index 5d0c5c0..cfe062d 100644
--- a/src/utils/commonUtil.js
+++ b/src/utils/commonUtil.js
@@ -1588,7 +1588,27 @@ export function getAgencyRoleTypeById(id) {
 	});
 	return str;
 }
+/**
+* table最小宽度优化
+*
+*
+*/
+export function tableWidth(_context,columns,widthNum){
+  let num = 0;
+  console.log(columns);
+  for (var i = 0; i < columns.length; i++) {
+      if (typeof(columns[i].width) == "undefined") {
+          num += widthNum
+          console.log(widthNum);
+      } else {
+          num += columns[i].width
+      }
+  }
+  console.log(num);
+  _context.currWidth = num;
+  console.log(_context.currWidth+"==============表宽")
 
+}
 /**
  * 代理成员权限
  */
diff --git a/src/views/main.vue b/src/views/main.vue
index 9998da8..fb33111 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -56,14 +56,14 @@
               <span class="fsa">
                 <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
                 <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
-                <div class="ml8">{{ userbaseInfo.userName }}</div>
+                <div class="ml4">{{ userbaseInfo.userName }}</div>
               </span>
               <div class="loginbox" slot="overlay">
                 <!-- <div>
                   <img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" />
                   <span v-else class="iconfont icon-morentouxiang avatar f32"></span>
                   <span class="username">{{loginValue.userName || loginValue.nickName || loginValue.tel}}</span>
-                </div> -->
+                </div>-->
                 <router-link to="/accountsetting">
                   <div>
                     <span>
@@ -75,7 +75,7 @@
                 <router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )">
                   <div>
                     <span>
-                      <i class="iconfont icon-zhanghaoshezhi"></i>商家后台
+                      <i class="iconfont icon-shangjiahoutai"></i>商家后台
                     </span>
                     <i class="iconfont icon-youjiantou"></i>
                   </div>
@@ -135,10 +135,10 @@
           <span class="fsa f14 cf shadow">
             <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
             <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
-            <span class="ml8">{{ userbaseInfo.userName }}</span>
+            <span class="ml4">{{ userbaseInfo.userName }}</span>
           </span>
           <div class="loginbox" slot="overlay">
-            <div>
+            <!-- <div>
               <img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" />
               <span v-else class="iconfont icon-morentouxiang avatar"></span>
               <span class="username">
@@ -146,7 +146,7 @@
                 loginValue.userName || loginValue.nickName || loginValue.tel
                 }}
               </span>
-            </div>
+            </div> -->
             <router-link to="/accountsetting">
               <div>
                 <span>
@@ -158,7 +158,7 @@
             <router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )">
               <div>
                 <span>
-                  <i class="iconfont icon-zhanghaoshezhi"></i>商家后台
+                  <i class="iconfont icon-shangjiahoutai"></i>商家后台
                 </span>
                 <i class="iconfont icon-youjiantou"></i>
               </div>
@@ -680,25 +680,25 @@ export default {
       // justify-content: space-between;
       // line-height: 36px;
 
-        .titleTag {
-          font-size: 14px;
-          display: flex;
-          margin-left: 150px;
-          li {
-            font-weight: 400;
-            color: #333;
-            margin-right: 24px;
-            line-height: 48px;
-            // text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
+      .titleTag {
+        font-size: 14px;
+        display: flex;
+        margin-left: 150px;
+        li {
+          font-weight: 400;
+          color: #333;
+          margin-right: 24px;
+          line-height: 48px;
+          // text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
 
-            a {
-              transition: none;
-              &:hover {
-                color: #ff4400;
-              }
+          a {
+            transition: none;
+            &:hover {
+              color: #ff4400;
             }
           }
         }
+      }
       .navigationright {
         float: right;
         margin-right: 24px;
diff --git a/src/views/merchantBack.vue b/src/views/merchantBack.vue
index c31b3d0..b1fc842 100644
--- a/src/views/merchantBack.vue
+++ b/src/views/merchantBack.vue
@@ -50,18 +50,9 @@
               <span class="fsa f14">
                 <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
                 <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
-                {{ userbaseInfo.userName }}
+                <div class="ml4">{{ userbaseInfo.userName }}</div>
               </span>
               <div class="loginbox backTable" slot="overlay">
-                <div class="tal">
-                  <img :src="userbaseInfo.imgSrc" alt v-if="userbaseInfo.imgSrc !== ''" style="border-radius:50%;width:32px;height:32px;" />
-                  <span v-else class="iconfont icon-morentouxiang avatar"></span>
-                  <span class="username">
-                    {{
-                    userbaseInfo.userName || userbaseInfo.nickName || userbaseInfo.tel
-                    }}
-                  </span>
-                </div>
                 <router-link to="/accountsetting">
                   <div>
                     <span>
@@ -73,7 +64,7 @@
                 <router-link to="/main">
                   <div>
                     <span>
-                      <i class="iconfont icon-zhanghaoshezhi"></i>返回首页
+                      <i class="iconfont icon-shangjiahoutai"></i>返回首页
                     </span>
                     <i class="iconfont icon-youjiantou"></i>
                   </div>