优化属性面板 addut

Author: xilanhuaweidapao

src/common/attribute-panel/AttributePanel.vue

@@ -22,18 +22,13 @@
         <ul>
           <li v-for="(value, key, index) in attributes" :key="index" class="content">
             <div class="left ellipsis" :title="key" :style="formatStyle.keyStyle">{{ key }}</div>
-            <div class="right ellipsis" :title="value.value || value" :style="formatStyle.valueStyle">
+            <div class="right ellipsis" :title="value" :style="formatStyle.valueStyle">
               <slot v-if="fieldsMap[key]" :name="fieldsMap[key]" :value="value"></slot>
               <span v-else>{{ value }}</span>
             </div>
           </li>
         </ul>
       </div>
-      <sm-table-popup
-        v-if="!$slots.default && !($scopedSlots && Object.keys($scopedSlots).length) && Object.keys(attributes).length"
-        v-bind="tablePopupProps"
-        class="sm-component-attribute-panel__self-content"
-      />
       <sm-empty v-if="!$slots.default && !Object.keys(attributes).length" />
     </div>
   </div>
@@ -42,12 +37,11 @@
 <script lang="ts">
 import { Component, Prop, Watch, 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';
 import SmEmpty from 'vue-iclient/src/common/empty/Empty.vue';
 
 @Component({
   name: 'SmAttributePanel',
-  components: { SmTablePopup, SmEmpty }
+  components: { SmEmpty }
 })
 class SmAttributePanel extends Mixins(Theme) {
   attrIndex = 0;
@@ -88,13 +82,6 @@ class SmAttributePanel extends Mixins(Theme) {
   })
   attributes: Object;
 
-  @Prop({
-    default: () => {
-      return [];
-    }
-  })
-  columns: Array<Object>;
-
   @Watch('currentIndex')
   currentIndexChanged() {
     this.attrIndex = this.currentIndex;
@@ -116,22 +103,32 @@ class SmAttributePanel extends Mixins(Theme) {
     return `${this.attrIndex + 1}/${this.total}`;
   }
 
-  get tablePopupProps() {
-    return { data: [this.attributes], columns: this.columns };
-  }
-
   get formatStyle() {
     let style = Object.assign({}, this.attributeStyle);
     Object.keys(style).forEach(item => {
       // @ts-ignore
       if (Object.prototype.hasOwnProperty.call(style[item], 'width')) {
         // @ts-ignore
-        style[item].width += 'px';
+        if (style[item].width === 0) {
+          style[item].width = 'unset';
+          style[item].flex = 1;
+        } else {
+          if (style[item].width !== 'unset') {
+            style[item].width += 'px';
+          }
+          style[item].flex = 'unset';
+        }
       }
       // @ts-ignore
       if (Object.prototype.hasOwnProperty.call(style[item], 'height')) {
         // @ts-ignore
-        style[item].height += 'px';
+        if (style[item].height === 0) {
+          style[item].height = 'unset';
+        } else {
+          if (style[item].height !== 'unset') {
+            style[item].height += 'px';
+          }
+        }
       }
     });
     return style;

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

@@ -0,0 +1,61 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import SmAttributePanel from '../AttributePanel.vue';
+const localVue = createLocalVue();
+
+describe('AttributePanel.vue', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = null;
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('render', async done => {
+    wrapper = mount(SmAttributePanel, {
+      localVue,
+      propsData: {
+        attributeStyle: {
+          "keyStyle":
+          {
+            "fontFamily": "微软雅黑",
+            "color": "",
+            "textAlign": "left",
+            "width": "110",
+            "fontSize": "0.296296rem",
+            "fontWeight": "normal",
+            "height": "unset",
+            "flex": "unset"
+          },
+          "valueStyle": {
+            "fontFamily": "微软雅黑",
+            "color": "",
+            "textAlign": "left",
+            "width": "170",
+            "fontSize": "0.296296rem",
+            "fontWeight": "normal",
+            "height": "unset",
+            "flex": "unset"
+          }
+        },
+        attributes: {
+          "链接": "www.test.com",
+          "text": "weidapao2",
+        },
+        fields: [
+          { "slotName": "11", "linkTitle": "", "field": "链接", "linkTarget": "_blank", "repeatOption": "left", "title": "链接", "type": "text" },
+          { "slotName": "13", "linkTitle": "", "field": "text", "linkTarget": "_blank", "repeatOption": "left", "title": "text", "type": "text" }]
+      },
+      attachToDocument: 'body'
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.fieldsMap).toEqual({ "链接": "11", "text": "13" });
+    expect(wrapper.vm.formatStyle).toEqual({ "keyStyle": { "fontFamily": "微软雅黑", "color": "", "textAlign": "left", "width": "110px", "fontSize": "0.296296rem", "fontWeight": "normal", "height": "unset", "flex": "unset" }, "valueStyle": { "fontFamily": "微软雅黑", "color": "", "textAlign": "left", "width": "170px", "fontSize": "0.296296rem", "fontWeight": "normal", "height": "unset", "flex": "unset" } });
+    wrapper.vm.changeIndex(1);
+    expect(wrapper.vm.attrIndex).toBe(1);
+    done();
+  });
+});

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

@@ -5,14 +5,13 @@
   min-width: 200px;
   height: 100%;
   overflow: auto;
-  padding: 10px;
   border-radius: 4px;
   border: 1px solid $border-color-split;
   @include e(header) {
     width: 100%;
     display: inline-flex;
     align-items: center;
-    padding: 0px 8px 4px ;
+    padding: 8px 8px 2px ;
     border-bottom: 2px solid $border-color-split;
     .switchDataText {
       position: absolute;
@@ -48,17 +47,15 @@
         margin: 0;
         padding: 0;
         font-size: 14px;
-        max-height: 200px;
         background: transparent;
         li {
           > div {
-            padding: 4px 16px;
+            margin: 4px 16px;
           }
         }
         border-collapse: separate;
         .content {
           display: flex;
-          justify-content: space-around;
           .left {
             width: 110px;
           }