vue2-client 1.10.26 → 1.10.27

package/src/base-client/components/common/XDataCard/XDataCard.vue

@@ -3,43 +3,50 @@
     <div v-if="render" class="XCard">
       <template v-for="(card, itemIndex) in data">
         <a-card :key="'card' + itemIndex" class="data-card">
-          <!-- 绑带 -->
-          <div v-if="config.bandage && card[config.bandage.ribbon] && card[config.bandage.ribbonColor]"
-               class="ribbon"
-               :style="{ backgroundColor: getRibbonColor(card[config.bandage.ribbonColor]) }">
-            {{ card[config.bandage.ribbon] }}
+          <div class="ribbon" v-for="column in tableColumns" v-if="column.dataIndex === item.key" :key="column.dataIndex">
+            <template v-if="column.slotType === 'badge'">
+              <x-badge
+                :service-name="serviceName"
+                :env="env"
+                :dataCard="true"
+                :badge-key="column.slotKeyMap"
+                :value="card[item.key]" />
+            </template>
+            <template v-else>
+              <slot :name="column.slots.customRender">{{ card[config.bandage] }}</slot>
+            </template>
           </div>
+          <!-- 绑带 -->
           <!-- 自定义标题 -->
           <template #title>
             <div class="custom-title">
-              <div class="title-main">
-                <span v-if="card[config.id]" class="title-id ellipsis">
-                   <a-tooltip :title="card[config.id]">
-                    <span>{{ card[config.id] }}</span>
-                   </a-tooltip>
-                </span>
-                <span class="title-name">{{ card[config.title] }}</span>
-                <span class="title-info">{{ card[config.title2] }}</span>
-              </div>
-              <div class="additional-info">
-                <span class="subtitle2">
-                  <a-tooltip :title="card[config.subtitle2]">
-                    <span>{{ card[config.subtitle2] }}</span>
+              <a-tooltip placement="top">
+                <template #title>{{ card[config.id] }}</template>
+                <div class="title-id" v-if="card[config.id]">{{ card[config.id] }}</div>
+              </a-tooltip>
+              <div class="title-basic">
+                <div class="title-main">
+                  <span class="title-name">{{ card[config.title] }}</span>
+                  <span class="title-info">{{ card[config.title2] }}</span>
+                </div>
+                <div class="additional-info" v-if="card[config.subtitle2] || card[config.subtitle3] || card[config.subtitle4]">
+                  <a-tooltip placement="top" v-if="card[config.subtitle2]">
+                    <template #title>{{ card[config.subtitle2] }}</template>
+                    <span class="subtitle2">{{ card[config.subtitle2] }}</span>
                   </a-tooltip>
-                </span>
-                <span class="subtitle3">
-                  <a-tooltip :title="card[config.subtitle3]">
-                    <span>{{ card[config.subtitle3] }}</span>
+                  <a-tooltip placement="top" v-if="card[config.subtitle3]">
+                    <template #title>{{ card[config.subtitle3] }}</template>
+                    <span class="subtitle3">{{ card[config.subtitle3] }}</span>
                   </a-tooltip>
-                </span>
-                <span class="subtitle4">{{ card[config.subtitle4] }}</span>
+                  <span class="subtitle4" v-if="card[config.subtitle4]">{{ card[config.subtitle4] }}</span>
+                </div>
               </div>
             </div>
           </template>
           <!-- 主体 -->
           <div class="body">
-            <div class="body-text">
-              <a-tooltip :title="card[config.text]">
+            <div class="body-text" v-if="card[config.text]">
+              <a-tooltip>
                 <span class="text-ellipsis">{{ card[config.text] }}</span>
               </a-tooltip>
             </div>
@@ -66,7 +73,7 @@
                         :value="card[item.key]" />
                     </template>
                     <template v-else>
-                      <slot :name="column.slots.customRender">{{ card[item.key] }}</slot>
+                      <slot :name="column.slots.customRender">{{ card[item.label] }}</slot>
                     </template>
                   </span>
                 </template>
@@ -212,10 +219,7 @@ export default {
         subtitle3: '未获取到配置',
         subtitle4: '未获取到配置',
         text: '未获取到配置',
-        bandage: {
-          ribbon: '未获取到配置',
-          ribbonColor: '未获取到配置',
-        },
+        bandage: '未获取到配置',
         content: [
           {
             label: '未获取到配置',
@@ -266,12 +270,12 @@ export default {
       // }
     } else {
       this.data = {
-          one: '14534331231',
-          two: '2',
-          three: '3',
-          four: '4',
-          five: '5',
-          six: 70,
+          one: '未获取到配置',
+          two: '未获取到配置',
+          three: '未获取到配置',
+          four: '未获取到配置',
+          five: '未获取到配置',
+          six: 70
         }
     }
     // 测试数据初始化
@@ -371,7 +375,6 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 85vh;
-
   .data-card {
     width: 100%;
     max-width: 300px;
@@ -480,63 +483,55 @@ export default {
 
   .custom-title {
     display: flex;
-    flex-direction: column;
-    .title-main {
-      display: flex;
-      align-items: center;
-      .title-id {
-        color: #1890ff;
-        font-size: 16px;
-        font-weight: bold;
-        padding: 4px 2px;
-        border: 1px solid #1890ff;
-        border-radius: 4px;
-        line-height: 1.4;
-        width: 60px;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-right: 8px;
-      }
-      .title-name {
-        font-weight: bold;
-        margin-right: 8px;
-      }
-      .title-info {
-        font-size: 14px;
-        color: #888;
-      }
+    align-items: center;
+    gap: 12px;
+
+    .title-id {
+      flex-shrink: 0;
+      width: 60px;
+      color: #1890ff;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 4px 8px;
+      border: 1px solid #1890ff;
+      border-radius: 4px;
+      line-height: 1.4;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .additional-info {
+
+    .title-basic {
       display: flex;
-      justify-content: flex-start;
-      margin-top: 4px;
-      margin-left: 68px;
+      flex-direction: column;
+      flex-grow: 1;
 
-      .subtitle2,
-      .subtitle3 {
-        color: #555;
+      .subtitle2, .subtitle3 {
+        display: inline-block;
+        max-width: 50px; /* 固定宽度 */
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-      };
-
-      .subtitle2 {
-        font-size: 12px;
-        width: 60px;
-        margin-right: 8px;
-      };
+      }
 
-      .subtitle3 {
-        font-size: 12px;
-        width: 80px;
-        margin-right: 8px;
-      };
+      .title-main {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .title-info {
+          color: #808080;
+        }
+      }
 
-      .subtitle4 {
-        color: #1890ff;
-        margin-right: 16px;
+      .additional-info {
+        display: flex;
+        gap: 8px;
+        font-size: 13px;
+        color: #808080;
+        .subtitle4 {
+          color: rgba(0, 0, 255, 0.8);
+        }
       }
     }
   }

package/src/base-client/components/common/XDataCard/index.js

@@ -1,3 +1,3 @@
-import XDataCard from './XDataCard.vue'
-
-export default XDataCard
+import XDataCard from './XDataCard.vue'
+
+export default XDataCard

package/src/base-client/components/common/XDataCard/index.md

@@ -1 +1 @@
-# XDataCard
+# XDataCard

package/src/base-client/components/common/XDataDrawer/XDataDrawer.vue

@@ -1,180 +1,180 @@
-<template>
-  <a-drawer
-    :visible="visible"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    placement="right"
-    :title="title"
-    @close="onClose"
-  >
-    <a-spin :spinning="loading">
-      <a-page-header :title="getPageHeaderTitle">
-        <div class="row">
-          <div class="content">
-            <slot name="contentDescriptions" :datas="details"></slot>
-          </div>
-          <div class="extra">
-            <a-row class="status-list" v-for="(item,index) in extraStatusList" :key="'extraStatus' + index">
-              <a-col :sm="24" :xs="12">
-                <div class="text">{{ item.text }}</div>
-                <div class="heading">
-                  <x-badge :is-external-text="true" :value="item.key" :badge-key="item.keyMap ? item.keyMap : 'none'"/>
-                </div>
-              </a-col>
-            </a-row>
-          </div>
-        </div>
-        <!-- actions -->
-        <template #extra>
-          <a-button-group style="margin-right: 4px;">
-            <a-button :loading="loading" type="dashed" @click="initView('1')">刷新</a-button>
-          </a-button-group>
-          <a-button-group style="margin-right: 4px;">
-            <slot name="extraActions" :datas="details"></slot>
-          </a-button-group>
-        </template>
-        <template #footer>
-          <slot name="footerContent" :datas="details"></slot>
-        </template>
-      </a-page-header>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
-
-export default {
-  name: 'InstructDetailsView',
-  components: {
-    XBadge
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // Tab页签
-      tabActiveKey: '1',
-      // 数据详情
-      details: {},
-      // 加载状态
-      loading: true
-    }
-  },
-  mounted () {
-    this.initView('1')
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    extraStatusList: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView (tabActiveKey) {
-      this.tabActiveKey = tabActiveKey || '1'
-      this.getDatas()
-    },
-    // 获取详情信息
-    getDatas () {
-      this.loading = true
-      this.$emit('load').then(res => {
-        this.details = res
-      }, err => {
-        console.error(err)
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    // 获取页头标题
-    getPageHeaderTitle () {
-      this.$emit('getPageHeaderTitle', this.details)
-    },
-    // 关闭抽屉时回调
-    onClose () {
-      this.$emit('update:visible', false)
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.initView('1')
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.detail-layout {
-  margin-left: 44px;
-}
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.no-data {
-  color: rgba(0, 0, 0, .25);
-  text-align: center;
-  line-height: 64px;
-  font-size: 16px;
-
-  i {
-    font-size: 24px;
-    margin-right: 16px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.mobile {
-  .detail-layout {
-    margin-left: unset;
-  }
-  .text {
-
-  }
-  .status-list {
-    text-align: left;
-  }
-}
-
-.row {
-  display: flex;
-
-  .content {
-    -webkit-box-flex: 1;
-    flex: auto;
-    -ms-flex: auto;
-  }
-
-  .extra {
-    flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 1 auto;
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <a-drawer
+    :visible="visible"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    placement="right"
+    :title="title"
+    @close="onClose"
+  >
+    <a-spin :spinning="loading">
+      <a-page-header :title="getPageHeaderTitle">
+        <div class="row">
+          <div class="content">
+            <slot name="contentDescriptions" :datas="details"></slot>
+          </div>
+          <div class="extra">
+            <a-row class="status-list" v-for="(item,index) in extraStatusList" :key="'extraStatus' + index">
+              <a-col :sm="24" :xs="12">
+                <div class="text">{{ item.text }}</div>
+                <div class="heading">
+                  <x-badge :is-external-text="true" :value="item.key" :badge-key="item.keyMap ? item.keyMap : 'none'"/>
+                </div>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+        <!-- actions -->
+        <template #extra>
+          <a-button-group style="margin-right: 4px;">
+            <a-button :loading="loading" type="dashed" @click="initView('1')">刷新</a-button>
+          </a-button-group>
+          <a-button-group style="margin-right: 4px;">
+            <slot name="extraActions" :datas="details"></slot>
+          </a-button-group>
+        </template>
+        <template #footer>
+          <slot name="footerContent" :datas="details"></slot>
+        </template>
+      </a-page-header>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
+
+export default {
+  name: 'InstructDetailsView',
+  components: {
+    XBadge
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // Tab页签
+      tabActiveKey: '1',
+      // 数据详情
+      details: {},
+      // 加载状态
+      loading: true
+    }
+  },
+  mounted () {
+    this.initView('1')
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    extraStatusList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView (tabActiveKey) {
+      this.tabActiveKey = tabActiveKey || '1'
+      this.getDatas()
+    },
+    // 获取详情信息
+    getDatas () {
+      this.loading = true
+      this.$emit('load').then(res => {
+        this.details = res
+      }, err => {
+        console.error(err)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 获取页头标题
+    getPageHeaderTitle () {
+      this.$emit('getPageHeaderTitle', this.details)
+    },
+    // 关闭抽屉时回调
+    onClose () {
+      this.$emit('update:visible', false)
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView('1')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>

package/src/base-client/components/common/XDataDrawer/index.js

@@ -1,3 +1,3 @@
-import XDataDrawer from './XDataDrawer'
-
-export default XDataDrawer
+import XDataDrawer from './XDataDrawer'
+
+export default XDataDrawer