Explorar el Código

fix: BsUi-逻辑更新

hanxiaohui hace 4 meses
padre
commit
f705869b19

+ 21 - 9
src/components/BsUi/Descriptions/index.vue

@@ -26,15 +26,23 @@
               </a-tooltip>
               <span class="dsc-label">{{ item.label }}</span>
             </div>
-
           </template>
 
           <template v-if="item.valueSlot">
-           <div class="value_slot">
-             <slot :name="item.valueSlot" :label="item.label" :value="item.value"></slot>
-           </div>
+            <div class="value_slot">
+              <slot :name="item.valueSlot" :label="item.label" :value="item.value"></slot>
+            </div>
+          </template>
+
+          <template v-if="item?.type === 'dict'">
+            <bs-dic-tag :dicts="item.value"></bs-dic-tag>
+          </template>
+
+          <template v-if="item?.type === 'link'">
+            <bs-link :text="item.value" v-bind="item.extraProps"></bs-link>
           </template>
-          <template v-if="!item.valueSlot">
+
+          <template v-if="isRenderValue(item)">
             <div class="dsc-value">
               <bs-ellipsis-text :text="item.value" />
             </div>
@@ -46,8 +54,8 @@
 </template>
 <script setup>
   import { isEmpty } from 'lodash';
-  import {ref, useSlots} from 'vue';
-  import {BsEllipsisText} from "/@/components/BsUi/index.js";
+  import { ref, useSlots } from 'vue';
+  import { BsEllipsisText, BsDicTag, BsLink } from '/@/components/BsUi/index.js';
 
   const props = defineProps({
     title: {
@@ -65,7 +73,7 @@
     extraProps: {
       required: false,
       default: {},
-    }
+    },
   });
 
   const foldState = ref(true);
@@ -77,6 +85,10 @@
   const handleClkHeader = () => {
     foldState.value = !foldState.value;
   };
+
+  const isRenderValue = (item) => {
+    return isEmpty(item.valueSlot) && isEmpty(item.type)
+  }
 </script>
 <style lang="scss" scoped>
   .description {
@@ -92,7 +104,7 @@
       align-items: center;
       gap: 10px;
       &:hover {
-        background: rgba(#000, .1);
+        background: rgba(#000, 0.1);
         border-radius: 8px;
       }
       &::before {

+ 3 - 5
src/components/BsUi/DicTag/index.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="dic-tag">
-    <a-space>
-      <a-tag v-for="(tag, idx) in dicts" :key="idx">{{ tag.valueName }}</a-tag>
-    </a-space>
-  </div>
+  <a-space>
+    <a-tag v-for="(tag, idx) in dicts" :key="idx" :color="tag.dictStyle || 'default'">{{ tag.valueName }}</a-tag>
+  </a-space>
 </template>
 
 <script setup>

+ 28 - 0
src/components/BsUi/Link/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bs-link">
+    <LinkOutlined class="link-txt" />
+    <span class="link-txt">{{ text }}</span>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    text: {
+      required: false,
+      default: '',
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .bs-link {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer;
+    color: var(--vxe-ui-font-primary-color);
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+</style>

+ 1 - 1
src/components/BsUi/Render/cell.jsx

@@ -50,7 +50,7 @@ VxeUI.renderer.add('CellDict', {
   // 默认显示模板
   renderTableDefault(renderOpts, params) {
     if (isEmpty(getValue(params))) return <></>;
-    return <>{getValue(params)[0].valueName || ''}</>;
+    return <bs-dic-tag dicts={getValue(params)}></bs-dic-tag>
   },
 });
 

+ 5 - 2
src/components/BsUi/index.js

@@ -12,6 +12,7 @@ import BsContentsWrapper from "./ContentsWrapper/index.vue"
 import BsTabs from "./Tabs/index.vue"
 import BsEllipsisText from "./EllipsisText/index.vue"
 import BsDicTag from "./DicTag/index.vue"
+import BsLink from "./Link/index.vue"
 
 const BsUi = {
   install(app) {
@@ -26,7 +27,8 @@ const BsUi = {
     app.component('BsContentsWrapper', BsContentsWrapper)
     app.component('BsTabs', BsTabs);
     app.component('BsEllipsisText', BsEllipsisText);
-    app.component('BsDicTag', BsDicTag)
+    app.component('BsDicTag', BsDicTag);
+    app.component('BsDicTag', BsLink)
   },
 };
 
@@ -50,5 +52,6 @@ export {
   BsContentsWrapper,
   BsTabs,
   BsEllipsisText,
-  BsDicTag
+  BsDicTag,
+  BsLink
 };