fix 优化属性面板组件参数 review by luox

docs/.vuepress/config.js

@@ -192,7 +192,8 @@ module.exports = {
                     'common/time-slider',
                     'common/time-picker',
                     'common/attributes',
-                    'common/slideshow'
+                    'common/slideshow',
+                    'common/attribute-panel'
                   ]
                 },
                 {

docs/zh/api/common/attribute-panel.md

@@ -4,14 +4,12 @@
 <sm-attribute-panel
   :attrbiutes="[
     {
-        "attribute": "链接",
-        "alias": "bbb",
-        "attributeValue": "www.test1.com"
+        "title": "链接",
+        "value": "www.test1.com"
     },
     {
-        "attribute": "文本",
-        "alias": "text",
-        "attributeValue": "test1"
+        "title": "文本",
+        "value": "test1"
     }
   ]"
 ></sm-attribute-panel>
@@ -21,13 +19,10 @@
 
 | 参数           | 说明                                                                                   | 类型    | 可选值 | 默认值 |
 | :------------- | :------------------------------------------------------------------------------------- | :------ | :----- | :----- |
-| showIcon       | 显示分页                                                                               | boolean | -      | false  |
-| currentIndex   | 当前页索引                                                                             | number  | -      | 0      |
-| paginationText | 自定义分页文本                                                                         | string  | -      |
-| total          | 总分页数                                                                               | number  | -      | -      |
 | title          | 标题                                                                                   | string  | -      | -      |
-| attributes     | 属性数据                                                                               | array   | -      | []     |
-| columns        | 列配置, 具体属性参考[表格列配置文档](https://1x.antdv.com/components/table-cn/#Column) | array   | -      | []     |
+| attributes     | 属性数据,格式为 [{ title: '', value: ''}]                                                                               | array   | -      | []     |
+| titleRender     | 属性数据标题列渲染函数，格式为 Function(text, record, index) {}                                                                               | function   | -      | -     |
+| valueRender     | 属性数据值列渲染函数，格式为 Function(text, record, index) {}                                                                              | function   | -      | -     |
 | showBorder     | 显示边框                                                                               | boolean | -      | true   |
 
 > 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)

src/common/attribute-panel/AttributePanel.vue

@@ -1,20 +1,8 @@
 <template>
   <div class="sm-component-attribute-panel" :style="[getTextColorStyle, !showBorder && { border: 'none' }]">
     <div class="sm-component-attribute-panel__header">
-      <div class="title ellipsis" :title="title">{{ title }}</div>
-      <div v-show="showIcon" class="switchDataText">
-        <sm-icon
-          :class="['icon', 'left-icon', attrIndex === 0 && 'disabled']"
-          type="caret-left"
-          @click="changeIndex(-1)"
-        />
-        <span :title="paginationContent">{{ paginationContent }}</span>
-        <sm-icon
-          type="caret-right"
-          :class="['icon', 'right-icon', attrIndex === total - 1 && 'disabled']"
-          @click="changeIndex(1)"
-        />
-      </div>
+      <div v-if="!$slots.header && title !== undefined" class="title ellipsis" :title="title">{{ title }}</div>
+      <slot name="header" />
     </div>
     <div class="sm-component-attribute-panel__content">
       <sm-table-popup v-bind="tablePopupProps" />
@@ -23,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
+import { Component, Prop, Mixins } from 'vue-property-decorator';
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import SmTablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
 
@@ -32,63 +20,39 @@ import SmTablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
   components: { SmTablePopup }
 })
 class SmAttributePanel extends Mixins(Theme) {
-  attrIndex = 0;
-
-  @Prop({ default: false }) showIcon: Boolean;
-
-  @Prop({ default: 0 }) currentIndex: number;
-
-  @Prop() paginationText: String;
-
-  @Prop() total: number;
-
   @Prop() title: String;
 
   @Prop({ default: true }) showBorder: Boolean;
 
-  @Prop({
-    default: () => {
-      return [];
-    }
-  })
-  attributes: Array<Object>;
+  @Prop() titleRender: Function;
+
+  @Prop() valueRender: Function;
 
   @Prop({
     default: () => {
       return [];
     }
   })
-  columns: Array<Object>;
-
-  @Watch('currentIndex')
-  currentIndexChanged() {
-    this.attrIndex = this.currentIndex;
-  }
-
-  get paginationContent() {
-    if (this.paginationText) {
-      return this.paginationText;
-    }
-    return `${this.attrIndex + 1}/${this.total}`;
-  }
+  attributes: Array<Object>;
 
   get tablePopupProps() {
     return {
       data: this.attributes,
-      columns: this.columns,
+      columns: [
+        {
+          dataIndex: 'title',
+          customRender: this.titleRender
+        },
+        {
+          dataIndex: 'value',
+          customRender: this.valueRender
+        }
+      ],
       showHeader: false,
       background: 'transparent',
       textColor: this.textColor
     };
   }
-
-  changeIndex(delta) {
-    this.attrIndex += delta;
-    if (this.attrIndex < 0) {
-      this.attrIndex = 0;
-    }
-    this.$emit('change', this.attrIndex);
-  }
 }
 export default SmAttributePanel;
 </script>

src/common/attribute-panel/__test__/AttributePanel.spec.js

@@ -17,16 +17,12 @@ describe('AttributePanel.vue', () => {
   it('render', async done => {
     let attr = [
       {
-          "attribute": "video",
-          "alias": "sdsad",
-          "attributeValue": "https://www.runoob.com/try/demo_source/mov_bbb.mp4",
-          "slotName": "cbb14af2926911ef890f1b2f76bec1a4"
+          "title": "video",
+          "value": "https://www.runoob.com/try/demo_source/mov_bbb.mp4",
       },
       {
-          "attribute": "image",
-          "alias": "sdsad",
-          "attributeValue": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
-          "slotName": "cbb14af3926911ef890f1b2f76bec1a4"
+          "title": "image",
+          "value": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
       }
     ];
     wrapper = mount(SmAttributePanel, {
@@ -38,8 +34,6 @@ describe('AttributePanel.vue', () => {
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.tablePopupProps.data).toEqual(attr);
-    wrapper.vm.changeIndex(1);
-    expect(wrapper.vm.attrIndex).toBe(1);
     done();
   });
 });

src/common/attribute-panel/style/attribute-panel.scss

@@ -10,27 +10,7 @@
   border: 1px solid $border-color-split;
   @include e(header) {
     width: 100%;
-    display: inline-flex;
-    align-items: center;
-    padding: 8px;
-    border-bottom: 2px solid $border-color-split;
-    .switchDataText {
-      position: absolute;
-      right: 10px;
-      display: flex;
-      .icon {
-        font-size: 16px;
-      }
-      .left-icon {
-        padding-right: 5px;
-      }
-      .right-icon {
-        padding-left: 5px;
-      }
-      .disabled {
-        color: $disabled-color;
-      }
-    }
+    border-bottom: 1px solid $border-color-split;
     .ellipsis {
       max-width: calc(100% - 80px);
       overflow: hidden;

src/common/image/Image.vue

@@ -88,7 +88,7 @@ export default {
   },
   computed: {
     fullScreenStyle() {
-      return this.previewMode === 'fullScreen'
+      return this.previewMode === 'full'
         ? {
           dialogStyle: {
             backgroundColor: 'transparent',

src/common/image/style/image.scss

@@ -28,7 +28,7 @@
 
     }
   }
-  @include e(previewFull) {
+  @include e(full) {
     width: 100% !important;
     padding: 0 !important;
     .sm-component-modal-content {

src/mapboxgl/layer-highlight/LayerHighlight.vue

@@ -10,7 +10,8 @@
     :background="background"
     :textColor="textColor"
     :mapTarget="mapTarget"
-    :columns="tableColumns"
+    :titleRender="titleRender"
+    :valueRender="valueRender"
     :showHeader="false"
     :title="displayTitle"
     @change="handleChange"
@@ -99,7 +100,15 @@ export default {
       return this.allPopupDatas[this.currentIndex] || [];
     },
     columnStyle() {
-      const { autoResize, keyWidth, valueWidth, keyMaxWidth, valueMaxWidth, keyWordStyle, valueWordStyle } = this.popupStyle;
+      const {
+        autoResize,
+        keyWidth,
+        valueWidth,
+        keyMaxWidth,
+        valueMaxWidth,
+        keyWordStyle,
+        valueWordStyle
+      } = this.popupStyle;
       const style = { keyStyle: {}, valueStyle: {} };
       if (!autoResize) {
         if (keyWidth) {
@@ -129,30 +138,6 @@ export default {
       }
       return style;
     },
-    tableColumns() {
-      return [
-        {
-          dataIndex: 'attribute',
-          customRender: (text, record) => {
-            return <div style={this.columnStyle.keyStyle} title={record.alias || text}>{record.alias || text}</div>;
-          }
-        },
-        {
-          dataIndex: 'attributeValue',
-          customRender: (text, record) => {
-            const valueCustomRender =
-              record.slotName &&
-              ((this.customColumnRenders || {})[record.slotName] ||
-                (this.$parent && this.$parent.$scopedSlots[record.slotName]));
-            const style = this.columnStyle.valueStyle;
-            if (valueCustomRender) {
-              return <div style={style} title={text}>{valueCustomRender({ value: text, style })}</div>;
-            }
-            return <div style={style} title={text}>{text}</div>;
-          }
-        }
-      ];
-    },
     displayTitle() {
       return this.title || this.activeTargetName;
     }
@@ -198,6 +183,39 @@ export default {
     this.clearPopupData();
   },
   methods: {
+    titleRender(text) {
+      return (
+        <div style={this.columnStyle.keyStyle} title={text}>
+          {text}
+        </div>
+      );
+    },
+    valueRender(text, record) {
+      let targetField;
+      Object.keys(this.displayFieldsMap).forEach((layerID) => {
+        targetField = this.displayFieldsMap[layerID].find((item) => {
+          return item.title === record.title || item.field === record.title;
+        });
+      });
+      const slotName = targetField?.slotName;
+      const valueCustomRender =
+        slotName &&
+        ((this.customColumnRenders || {})[slotName] ||
+          (this.$parent && this.$parent.$scopedSlots[slotName]));
+      const style = this.columnStyle.valueStyle;
+      if (valueCustomRender) {
+        return (
+          <div style={style} title={text}>
+            {valueCustomRender({ value: text, style })}
+          </div>
+        );
+      }
+      return (
+        <div style={style} title={text}>
+          {text}
+        </div>
+      );
+    },
     registerEvents() {
       this.viewModel.on('mapselectionchanged', e => {
         const features = e.features;

src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts

@@ -50,9 +50,8 @@ type LayerClickedFeature = mapboxglTypes.MapboxGeoJSONFeature & {
 };
 
 interface PopupFieldsInfo {
-  attribute: string;
-  attributeValue: string;
-  alias?: string;
+  title: string;
+  value: string;
   slotName?: string;
 }
 
@@ -356,9 +355,8 @@ export default class HighlightLayer extends mapboxgl.Evented {
       info: displayFieldsList.reduce((list: PopupFieldsInfo[], item) => {
         if (Object.prototype.hasOwnProperty.call(feature.properties, item.field)) {
           list.push({
-            attribute: item.field,
-            alias: item.title,
-            attributeValue: feature.properties[item.field],
+            title: item.title || item.field,
+            value: feature.properties[item.field],
             slotName: item.slotName
           });
         }