服务范围模块重构

src/components/TagSelect/index.jsx

@@ -59,6 +59,7 @@ class TagSelect extends React.Component {
     let { value } = this.state;
     if (!inputValue.trim()) {
       message.error('Not Null!!!');
+      this.setState({ inputVisible: false });
       return;
     }
 
@@ -130,6 +131,8 @@ class TagSelect extends React.Component {
               closable={index !== 0 && index !== 1}
               onClose={(e) => this.handleClose(tag, e)}
               visible={true}
+              color={index === 0 || index === 1 ? 'magenta' : ''}
+              style={index === 1 ? { marginBottom: 40 } : ''}
             >
               <span
                 onDoubleClick={(e) => {
@@ -145,7 +148,14 @@ class TagSelect extends React.Component {
               </span>
             </Tag>
           );
-          return isLongTag ? (
+          //   return
+
+          return index === 0 || index === 1 ? (
+            <div style={{ marginBottom: 20 }}>
+              {tagElem}
+              <br />
+            </div>
+          ) : isLongTag ? (
             <Tooltip title={tag} key={tag}>
               {tagElem}
             </Tooltip>

src/pages/UserManagement/ServiceProviderManagement/Services.less

@@ -2,40 +2,45 @@
 
 //基石
 .base {
-    width: 100%;
-    background-color: #ffffff;
-    padding: 34px;
-    min-width: 1020px;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 34px;
+  min-width: 1020px;
 }
 
-.item0{
-    float: left;
+.item0 {
+  float: left;
 }
-.item0_1{
-    float: left;
-    line-height: 32px;
-    margin-left: 38px;
+.item0_1 {
+  float: left;
+  line-height: 32px;
+  margin-left: 38px;
 }
-.item1{
-    float: left;
-    width: 120px;
+.item1 {
+  float: left;
+  width: 120px;
 }
-.item1_1{
-    float: left;
-    margin-left: 16px;
+.item1_1 {
+  float: left;
+  margin-left: 16px;
 }
-.item2{
-    float: right;
+.item2 {
+  float: right;
 }
 
-.clear{
-    clear: both;
+.clear {
+  clear: both;
 }
-.clear0{
-    .clear();
-    margin-bottom: 35px;
+.clear0 {
+  .clear();
+  margin-bottom: 35px;
+}
+.clear1 {
+  .clear();
+  margin-bottom: 16px;
+}
+.title {
+  position: absolute;
+  top: 185px;
+  left: 155px;
 }
-.clear1{
-    .clear();
-    margin-bottom: 16px;
-}
\ No newline at end of file

src/pages/UserManagement/ServiceProviderManagement/Services.tsx

@@ -84,6 +84,7 @@ const Services = (props: any) => {
 
       {DataServices !== null ? (
         <Form ref={formRef} name="basic">
+          <div className={styles.title}>General Service Provider :</div>
           <Form.Item label="Available Services" name="serviceName">
             <TagSelect onAdd={Add} onRemove={Remove} />
           </Form.Item>