Bläddra i källkod

feat: 优化客户、单位地址列的显示效果

lanjianrong 5 år sedan
förälder
incheckning
de0ce23a67

+ 5 - 2
src/pages/Customer/Client/index.jsx

@@ -210,8 +210,9 @@ const Client = props => {
       title: '邮箱',
       dataIndex: 'email',
       key: 'email',
-      width: 75,
+      width: 85,
       sorter: true,
+      ellipsis: true,
       search: false
     },
     {
@@ -234,7 +235,9 @@ const Client = props => {
       dataIndex: 'districtName',
       key: 'districtName',
       width: 75,
-      search: false
+      search: false,
+      ellipsis: true,
+      renderText: text => text?.replaceAll(' / ', ',')
     },
     {
       title: '个人标签',

+ 2 - 6
src/pages/Customer/Company/components/ChangeCompany/index.jsx

@@ -94,17 +94,13 @@ const ChangeCompanyInput = props => {
         <div className={styles.nameContent} onClick={handleCompanyClick}>
           {customerName}
         </div>
-        <div className="w-55px">
+        <div className={styles.iconContent}>
           <Tooltip placement="right" title="移除单位">
             <span className={styles.unlinkIcon} onClick={removeCustomer}>
               <LinkInterrupt />
             </span>
           </Tooltip>
-          <Tooltip
-            placement="right"
-            title="更换单位"
-            className="ml-5px"
-            onClick={handleConnectCustomer}>
+          <Tooltip placement="right" title="更换单位" onClick={handleConnectCustomer}>
             <span className={styles.switchIcon}>
               <Switch />
             </span>

+ 36 - 31
src/pages/Customer/Company/components/ChangeCompany/index.less

@@ -23,38 +23,43 @@
       color: #967bbd;
     }
   }
-  .unlinkIcon {
-    padding: 0 3px;
-    color: #fd3995;
-    line-height: 1.15rem;
-    border: 1px solid #fd3995;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    &:hover {
-      color: #ffffff;
-      background-color: #fd3995;
-      border-color: #fd3995;
-      transition: all 0.2s ease-in-out;
+  .iconContent {
+    & > :last-child {
+      margin-left: 5px;
     }
-    // &:active {
-    //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
-    // }
-  }
-  .switchIcon {
-    padding: 0 3px;
-    color: #886ab5;
-    line-height: 1.15rem;
-    border: 1px solid #886ab5;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    &:hover {
-      color: #ffffff;
-      background-color: #886ab5;
-      border-color: #886ab5;
-      transition: all 0.2s ease-in-out;
+    .unlinkIcon {
+      padding: 0 3px;
+      color: #fd3995;
+      line-height: 1.15rem;
+      border: 1px solid #fd3995;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      &:hover {
+        color: #ffffff;
+        background-color: #fd3995;
+        border-color: #fd3995;
+        transition: all 0.2s ease-in-out;
+      }
+      // &:active {
+      //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
+      // }
+    }
+    .switchIcon {
+      padding: 0 3px;
+      color: #886ab5;
+      line-height: 1.15rem;
+      border: 1px solid #886ab5;
+      border-radius: 0.25rem;
+      cursor: pointer;
+      &:hover {
+        color: #ffffff;
+        background-color: #886ab5;
+        border-color: #886ab5;
+        transition: all 0.2s ease-in-out;
+      }
+      // &:active {
+      //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
+      // }
     }
-    // &:active {
-    //   box-shadow: 0 2px 5px rgb(0 0 0 / 15%) inset;
-    // }
   }
 }

+ 4 - 4
src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx

@@ -90,10 +90,10 @@ const SyncClient = ({ customer, client }) => {
         ghost
         type="primary"
         onClick={() => setState({ ...state, visible: true })}>
-        <div className="flex items-center justify-center">
-          <Copy theme="two-tone" fill={['#333', '#535A5D']} />
-          <span className="ml-1">同步地址信息</span>
-        </div>
+        <Copy theme="two-tone" fill={['#333', '#886ab5']} />
+        <span className="ml-1">同步地址信息</span>
+        {/* <div className="flex items-center justify-center">
+        </div> */}
       </Button>
       <Modal
         width="70%"

+ 3 - 1
src/pages/Customer/Company/index.jsx

@@ -175,7 +175,9 @@ const Company = props => {
       dataIndex: 'districtName',
       key: 'districtName',
       search: false,
-      width: 100
+      width: 100,
+      ellipsis: true,
+      renderText: text => text?.replaceAll(' / ', ',')
     },
     {
       title: '单位电话',