vue2-client 1.10.30 → 1.10.32-alpha

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

@@ -4,23 +4,24 @@
       <template v-for="(card, itemIndex) in data">
         <a-card :key="'card' + itemIndex" class="data-card">
           <!-- 绑带 -->
-<!--          <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>-->
-          <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>-->
+          <div
+            v-if="config && card[config.ribbon]"
+            class="ribbon"
+            :style="{ backgroundColor: getRibbonColor(card[config.ribbonColor]) }">
+            {{ card[config.ribbon] }}
           </div>
           <!-- 自定义标题 -->
           <template #title>
@@ -33,6 +34,7 @@
                 <div class="title-main">
                   <span class="title-name">{{ card[config.title] }}</span>
                   <span class="title-info">{{ card[config.title2] }}</span>
+                  <span class="title-title3">{{ card[config.title3] }}</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]">
@@ -51,7 +53,7 @@
           <!-- 主体 -->
           <div class="body">
             <div class="body-text" v-if="card[config.text]">
-              <a-tooltip>
+              <a-tooltip :title="card[config.text]">
                 <span class="text-ellipsis">{{ card[config.text] }}</span>
               </a-tooltip>
             </div>
@@ -94,8 +96,8 @@
             </template>
           </div>
           <!-- 下方按钮 -->
-          <div class="footer">
-            <a-row align="middle">
+          <template #actions>
+            <a-row align="middle" class="custom-actions">
               <template v-for="(item, footerIndex) in config.footer">
                 <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit)">
                   <span>
@@ -112,7 +114,7 @@
                 </a-col>
               </template>
             </a-row>
-          </div>
+          </template>
         </a-card>
       </template>
     </div>
@@ -220,14 +222,13 @@ export default {
         id: '未获取到配置',
         title: '未获取到配置',
         title2: '未获取到配置',
+        title3: '未获取到配置',
         subtitle2: '未获取到配置',
         subtitle3: '未获取到配置',
         subtitle4: '未获取到配置',
         text: '未获取到配置',
-        bandage: {
-          ribbon: '未获取到配置',
-          ribbonColor: '未获取到配置'
-        },
+        ribbon: '未获取到配置',
+        ribbonColor: '未获取到配置',
         content: [
           {
             label: '未获取到配置',
@@ -388,9 +389,13 @@ export default {
     max-width: 300px;
     border: 2px solid rgb(244,244,244);
     border-radius: 5px;
-    margin: 5px;
+    margin: 2px;
     overflow: hidden;
 
+    ::v-deep .ant-card-body {
+      padding: 15px !important; // 使用 !important 确保样式覆盖
+    }
+
     .header {
       width: 100%;
       background-color: rgb(244,244,244);
@@ -417,7 +422,7 @@ export default {
       }
 
       .body-item {
-        padding: 5px 15px;
+        padding: 3px 5px;
       }
 
       .body-split {
@@ -465,29 +470,6 @@ export default {
         color: black;
       }
     }
-
-    .footer {
-      padding: 5px 15px;
-      background-color: rgb(244,244,244);
-      margin: 0 -10px -10px -10px;
-      .footer-icon {
-        margin-right: 5px;
-      }
-
-      .footer-item-split {
-        color: rgba(220, 220, 220, 0.59);
-      }
-
-      .footer-item {
-        color: rgba(117, 117, 117, 0.8);
-        font-size: 1em;
-      }
-
-      .footer-item:hover {
-        color: rgb( 24,144,255 );
-        cursor: pointer;
-      }
-    }
   }
 
   .custom-title {
@@ -497,7 +479,7 @@ export default {
 
     .title-id {
       flex-shrink: 0;
-      width: 60px;
+      width: 65px;
       color: #1890ff;
       font-size: 16px;
       font-weight: bold;
@@ -529,6 +511,10 @@ export default {
         align-items: center;
         gap: 8px;
         .title-info {
+          margin-left: 6px;
+          color: #808080;
+        }
+        .title-title3 {
           color: #808080;
         }
       }
@@ -557,6 +543,26 @@ export default {
     transform-origin: top right;
     z-index: 1;
   }
+
+  .custom-actions {
+      .footer-icon {
+        margin-right: 5px;
+      }
+
+      .footer-item-split {
+        color: rgba(220, 220, 220, 0.59);
+      }
+
+      .footer-item {
+        color: rgba(117, 117, 117, 0.8);
+        font-size: 1em;
+      }
+
+      .footer-item:hover {
+        color: rgb( 24,144,255 );
+        cursor: pointer;
+      }
+  }
 }
 
 .ellipsis {

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

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

@@ -1,41 +1,41 @@
-# XForm
-
-通用数据抽屉控件，快速制作数据详情抽屉
-
-
-## 何时使用
-
-当需要一个通用数据抽屉时
-
-
-引用方式：
-
-```javascript
-import XDataDrawer from '@vue2-client/base-client/components/XDataDrawer/XDataDrawer'
-
-export default {
-    components: {
-      XDataDrawer
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-data-drawer
-  :isExports="true"
-  @onSubmit="onSubmit">
-</x-data-drawer>
-```
-
-## API
-
-| 参数        | 说明                       | 类型      | 默认值  |
-|-----------|--------------------------|---------|------|
-| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
-| isExports | 是否显示导出按钮                 | Boolean | true |
-| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
-| @onSubmit | 表单的提交事件                  | event   | -    |
+# XForm
+
+通用数据抽屉控件，快速制作数据详情抽屉
+
+
+## 何时使用
+
+当需要一个通用数据抽屉时
+
+
+引用方式：
+
+```javascript
+import XDataDrawer from '@vue2-client/base-client/components/XDataDrawer/XDataDrawer'
+
+export default {
+    components: {
+      XDataDrawer
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-data-drawer
+  :isExports="true"
+  @onSubmit="onSubmit">
+</x-data-drawer>
+```
+
+## API
+
+| 参数        | 说明                       | 类型      | 默认值  |
+|-----------|--------------------------|---------|------|
+| jsonData  | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}   |
+| isExports | 是否显示导出按钮                 | Boolean | true |
+| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
+| @onSubmit | 表单的提交事件                  | event   | -    |