feat: 新增single-cascader组件

--task=1497925 --user=王会俊【前端】【禁售配置】根据配置类目组装通用类目树 https://www.tapd.cn/55786408/s/4066656
qqabcv520 · May 18, 2020 · 01117ea · 01117ea
1 parent 837a10c
commit 01117ea
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 38 deletions.
diff --git a/example/index.html b/example/index.html
@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <title>Title</title>
   <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
-
-  <link rel="stylesheet"  href="https://content.banggood.cn/Content/lib/scb-pm-selector/bundle.css?v=20200515">
+  <link href="../dist/bundle.css" rel="stylesheet">
+<!--  <link href="https://content.banggood.cn/Content/lib/scb-pm-selector/bundle.css?v=20200515" rel="stylesheet">-->
 </head>
 <body style="background-color: #f1f1f1">
 <input pm-selector ps-url="https://sales.banggood.cn/base/productManager/tree?roleId=3"
@@ -29,8 +29,8 @@
 </body>
 
 <script src="../node_modules/jquery/dist/jquery.js"></script>
-
-<script src="https://content.banggood.cn/Content/lib/scb-pm-selector/bundle.js?v=20200515"></script>
+<script src="../dist/bundle.js"></script>
+<!--<script src="https://content.banggood.cn/Content/lib/scb-pm-selector/bundle.js?v=20200515"></script>-->
 <script>
 
 $('#category1').cascader({

diff --git a/src/components/cascader/index.tsx b/src/components/cascader/index.tsx
@@ -38,11 +38,9 @@ export class CascaderComponent extends ValueComponent<any[]> {
   }
   set options(value: any[]) {
     this._options = value;
-    if (value != null) {
-      this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
-      this.leafOptions = this.leafChildren(this.convertedOptions);
-      this.loadCommonOption();
-    }
+    this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
+    this.leafOptions = this.leafChildren(this.convertedOptions);
+    this.loadCommonOption();
     this.update();
   }
 
@@ -216,7 +214,7 @@ export class CascaderComponent extends ValueComponent<any[]> {
     parent: CascaderOption,
     values?: any[],
   ): CascaderOption[] {
-    return options.map(option => {
+    return (options || []).map(option => {
       const obj: CascaderOption = {
         value: option[valueField],
         label: option[labelField],

diff --git a/src/components/pm-selector/index.tsx b/src/components/pm-selector/index.tsx
@@ -39,11 +39,9 @@ export class PmSelectorComponent extends ValueComponent<any[]> {
   }
   set options(value: any[]) {
     this._options = value;
-    if (value != null) {
-      this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
-      this.leafOptions = this.leafChildren(this.convertedOptions);
-      this.loadCommonOption();
-    }
+    this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
+    this.leafOptions = this.leafChildren(this.convertedOptions);
+    this.loadCommonOption();
     this.update();
   }
   private _url: string;
@@ -235,7 +233,7 @@ export class PmSelectorComponent extends ValueComponent<any[]> {
     parent: PmSelectorOption,
     values?: any[],
   ): PmSelectorOption[] {
-    return options.map(option => {
+    return (options || []).map(option => {
       const obj: CascaderOption = {
         value: option[valueField],
         label: option[labelField],

diff --git a/src/components/single-cascader/index.less b/src/components/single-cascader/index.less
@@ -1,8 +1,12 @@
 .bgx-single-cascader {
   display: inline-block;
-  width: 150px;
+  width: 100%;
   position: relative;
 
+  .input-group {
+    width: 100%;
+  }
+
   .bgx-label {
     display: inline-flex;
     align-items: center;
@@ -59,9 +63,6 @@
     color: #333;
   }
 
-
-
-
   .bgx-selector {
     width: 150px;
     position: relative;
@@ -228,6 +229,7 @@
   .bgx-search-option {
     font-size: 12px;
     margin-top: 0;
+    padding: 4px 8px;
     font-weight: normal;
     width: 33.333333%;
     white-space: nowrap;

diff --git a/src/components/single-cascader/index.tsx b/src/components/single-cascader/index.tsx
@@ -36,13 +36,14 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     return this._options;
   }
   set options(value: any[]) {
-    console.log(value);
     this._options = value;
-    if (value != null) {
-      this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
-      this.leafOptions = this.leafChildren(this.convertedOptions);
-      this.loadCommonOption();
+    this.convertedOptions = this.convert(value, this.valueField, this.labelField, this.childrenField, null, this.value);
+    this.leafOptions = this.leafChildren(this.convertedOptions);
+    if (this.selectedOptions.length) {
+      this.selectedIndexes = this.getSelectedIndexes(this.selectedOptions[0]);
+      this.selectedString = this.getSelectedString(this.selectedOptions[0]);
     }
+    this.loadCommonOption();
     this.update();
   }
 
@@ -51,6 +52,7 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
   open = false;
   commonOptions: SingleCascaderOption[] = [];
   selectedIndexes: number[] = [];
+  selectedString = '';
   leafOptions: SingleCascaderOption[] = [];
   searchText = '';
   searchOptions: SingleCascaderOption[] = [];
@@ -75,11 +77,6 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     return this.leafOptions.filter(value => value.selected);
   }
 
-  // 用于界面展示
-  get selectedOptionStr(): string {
-    return this.selectedOptions.map(value => value.label).join(',');
-  }
-
   constructor(args: SingleCascaderComponentProps) {
     super(args);
     this.placeholder = args.placeholder;
@@ -99,7 +96,8 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     if (this.convertedOptions != null) {
       this.leafOptions.forEach(value1 => value1.selected = String(this.value) === String(value1.value));
       if (this.selectedOptions.length) {
-        this.selectedIndexes = this.getParentIndexes(this.selectedOptions[0]);
+        this.selectedIndexes = this.getSelectedIndexes(this.selectedOptions[0]);
+        this.selectedString = this.getSelectedString(this.selectedOptions[0]);
       }
       this.update();
     }
@@ -134,11 +132,12 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     if (level != null && index != null) {
       this.nextLevel(level, index)
     } else {
-      this.selectedIndexes = this.getParentIndexes(option);
+      this.selectedIndexes = this.getSelectedIndexes(option);
     }
     if (this.isLeaf(option)) {
       this.leafOptions.forEach(item => item.selected = false);
       option.selected = true;
+      this.selectedString = this.getSelectedString(option);
       this.saveCommonOption(option);
       this.onChange(option.value);
     }
@@ -152,7 +151,7 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     this.update();
   }
 
-  getParentIndexes(option: SingleCascaderOption) {
+  getSelectedIndexes(option: SingleCascaderOption): number[] {
     let indexes = [];
     let selectedOption = option;
     while (selectedOption.parent) {
@@ -166,12 +165,27 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     return indexes;
   }
 
+  getSelectedString(option: SingleCascaderOption): string {
+    let stringArr = [];
+    let selectedOption = option;
+    while (selectedOption.parent) {
+      const option = selectedOption.parent.children.find(val => String(val.value) === String(selectedOption.value))
+      selectedOption = selectedOption.parent;
+      stringArr.unshift(option);
+    }
+    // 获取第一级index
+    const firstOption = this.convertedOptions.find(val => String(val.value) === String(selectedOption.value));
+    stringArr.unshift(firstOption);
+    return stringArr.map(val => val.label).join(' > ');
+  }
+
   clear = () => {
     this.searchText = '';
     this.selectedOptions.forEach(value => {
       value.selected = false;
     });
     this.selectedIndexes = [];
+    this.selectedString = '';
     this.update();
     this.onChange([]);
   };
@@ -217,11 +231,11 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     parent: SingleCascaderOption,
     value?: any,
   ): SingleCascaderOption[] {
-    return options.map(option => {
+    return (options || []).map(option => {
       const obj: SingleCascaderOption = {
         value: option[valueField],
         label: option[labelField],
-        selected: String(value) === (String(option[valueField])),
+        selected: String(value || '') === (String(option[valueField])),
         parent,
       };
       obj.children = this.convert(option[childrenField] || [], valueField, labelField, childrenField, obj, value);
@@ -270,7 +284,10 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
             {this.searchText && this.showSearch && (<div class="bgx-search-popup" >
                 <div class="bgx-label bgx-search-options">
                   { this.searchOptions.map(value =>
-                    <label key={value.value} class="bgx-label bgx-search-option" onclick={() => this.selectOption(value)}>
+                    <label key={value.value} class={[
+                      'bgx-label bgx-search-option',
+                      this.selectedOptions.includes(value) ? 'bgx-option-selected' : ''
+                    ].join(' ')} onclick={() => this.selectOption(value)}>
                       <span dangerouslySetInnerHTML={value.label.replace(this.searchText, str => str.fontcolor("#1481db"))}>
                       </span>
                     </label>
@@ -319,9 +336,8 @@ export class SingleCascaderComponent extends ValueComponent<any[]> {
     return (
       <div class="bgx-single-cascader" ref="selector">
         <div class="input-group">
-          <input type="text" class="form-control input-sm bgx-input" value={this.selectedOptionStr} placeholder={this.placeholder} onclick={this.openPopup}
+          <input type="text" class="form-control input-sm bgx-input" value={this.selectedString} placeholder={this.placeholder} onclick={this.openPopup}
                  aria-describedby="basic-addon2" readonly/>
-          <span class="input-group-addon" id="basic-addon2">{this.selectedOptions.length}项</span>
         </div>
         {popup}
       </div>