From b0ef42dc1dbbe2f13fe17e8fc7c156ccdbbf05b7 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 28 Jul 2024 21:41:04 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=96=B0=E5=A2=9E=E6=8F=8F=E8=BF=B0?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8C=85=E8=A3=85=E6=8E=A7=E4=BB=B6=202.=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96tooltip=E6=98=BE=E7=A4=BA=203.=20=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=B1=9E=E6=80=A7slots=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/MockMenus.js                             |  2 +-
 src/components/common-descriptions/index.vue  | 83 +++++++++++++++++++
 .../common-descriptions/public.d.ts           | 30 +++++++
 .../common-form-control/control-child.vue     |  3 +-
 src/components/common-form-control/index.vue  | 34 +++++++-
 src/components/index.js                       |  2 +
 src/components/utils/index.js                 | 24 +++++-
 7 files changed, 172 insertions(+), 6 deletions(-)
 create mode 100644 src/components/common-descriptions/index.vue
 create mode 100644 src/components/common-descriptions/public.d.ts

diff --git a/mock/MockMenus.js b/mock/MockMenus.js
index acde6be..c9695e1 100644
--- a/mock/MockMenus.js
+++ b/mock/MockMenus.js
@@ -78,7 +78,7 @@ const allMenus = [
   {
     id: 25,
     parentId: 2,
-    iconCls: 'PieChartSharp',
+    iconCls: 'PieChart',
     nameCn: '图表示例',
     nameEn: 'Charts',
     menuUrl: '/charts'
diff --git a/src/components/common-descriptions/index.vue b/src/components/common-descriptions/index.vue
new file mode 100644
index 0000000..02b7f3a
--- /dev/null
+++ b/src/components/common-descriptions/index.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { calcSlotsResult, toLabelByKey } from '@/components/utils'
+import { isFunction } from 'lodash-es'
+import { isVNode, computed } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  width: {
+    type: String,
+    default: ''
+  },
+  minWidth: {
+    type: String,
+    default: ''
+  }
+})
+
+const calcItems = computed(() => {
+  return props.items.filter(item => item.enabled !== false).map(item => {
+    const label = item.labelKey ? toLabelByKey(item.labelKey) : item.label
+    const value = isFunction(item.formatter) ? item.formatter(item) : item.value
+    const valueResult = { value, vnode: isVNode(value) }
+    const slotsResult = calcSlotsResult(item)
+    return {
+      ...item,
+      label,
+      width: item.width || props.width,
+      minWidth: item.minWidth || props.minWidth,
+      valueResult,
+      slotsResult
+    }
+  })
+})
+
+</script>
+
+<template>
+  <el-descriptions
+    v-bind="$attrs"
+  >
+    <el-descriptions-item
+      v-for="(calcItem, index) in calcItems"
+      :key="index"
+      :label="calcItem.label"
+      :min-width="calcItem.minWidth"
+      :width="calcItem.width"
+      :span="calcItem.span"
+      :align="calcItem.align"
+      v-bind="calcItem.attrs"
+    >
+      <template
+        v-for="(slot, slotKey) in (calcItem.slots||{})"
+        :key="slotKey"
+        #[slotKey]
+      >
+        <component
+          :is="calcItem.slotsResult[slotKey].result"
+          v-if="calcItem.slotsResult[slotKey]?.vnode"
+        />
+        <template v-else>
+          {{ calcItem.slotsResult[slotKey].result }}
+        </template>
+      </template>
+      <template v-if="calcItem.valueResult.value">
+        <span
+          v-if="calcItem.valueResult.value&&!calcItem.valueResult.vnode"
+          v-html="calcItem.valueResult.value"
+        />
+        <component
+          :is="calcItem.valueResult.value"
+          v-if="calcItem.valueResult.vnode"
+        />
+      </template>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common-descriptions/public.d.ts b/src/components/common-descriptions/public.d.ts
new file mode 100644
index 0000000..2f10b73
--- /dev/null
+++ b/src/components/common-descriptions/public.d.ts
@@ -0,0 +1,30 @@
+import { VNode } from 'vue'
+import { descriptionItemProps } from 'element-plus/es/components/descriptions/src/description-item'
+
+export interface CommonDescriptionItem {
+    label?: string;
+    labelKey?: string;
+    value?: string;
+    span?: number;
+    width?: string;
+    minWidth?: string;
+    className?: string;
+    labelClassName?: string;
+    align?: 'left' | 'right' | 'center';
+    labelAlign?: string;
+    slots?: any;
+    formatter?: (item: CommonDescriptionItem) => string | VNode;
+    attrs?: descriptionItemProps;
+}
+
+export interface CommonDescriptionProps {
+    border?: boolean;
+    column?: number;
+    direction?: 'horizontal' | 'vertical';
+    size?: 'default' | 'small' | 'large';
+    title?: string;
+    extra?: string;
+    items?: Array<CommonDescriptionItem>;
+    width?: string;
+    minWidth?: string;
+}
diff --git a/src/components/common-form-control/control-child.vue b/src/components/common-form-control/control-child.vue
index f91a86a..0118d16 100644
--- a/src/components/common-form-control/control-child.vue
+++ b/src/components/common-form-control/control-child.vue
@@ -48,11 +48,12 @@ const tooltipFunc = ($event) => {
     {{ label }}
     <el-tooltip
       v-if="option.tooltip||option.tooltipFunc"
-      class="box-item"
+      class="box-item common-el-tooltip"
       effect="dark"
       :disabled="!option.tooltip"
       :content="option.tooltip"
       placement="top-start"
+      raw-content
     >
       <span>
         <el-link
diff --git a/src/components/common-form-control/index.vue b/src/components/common-form-control/index.vue
index 11ac3b0..d6c39fa 100644
--- a/src/components/common-form-control/index.vue
+++ b/src/components/common-form-control/index.vue
@@ -222,6 +222,24 @@ const formatResult = computed(() => {
   return null
 })
 
+const slotsResult = computed(() => {
+  const results = {}
+  if (calcOption.value?.slots) {
+    const slots = calcOption.value.slots
+    for (const slotKey in slots) {
+      const slot = slots[slotKey]
+      if (isFunction(slot)) {
+        const slotResult = slot(modelValue.value, calcOption.value)
+        results[slotKey] = {
+          result: slotResult,
+          vnode: isVNode(slotResult)
+        }
+      }
+    }
+  }
+  return results
+})
+
 </script>
 
 <template>
@@ -252,11 +270,12 @@ const formatResult = computed(() => {
       <slot name="afterLabel" />
       <el-tooltip
         v-if="calcOption.tooltip||calcOption.tooltipFunc"
-        class="box-item"
+        class="box-item common-el-tooltip"
         effect="dark"
         :disabled="!calcOption.tooltip"
         :content="calcOption.tooltip"
         placement="top-start"
+        raw-content
       >
         <span>
           <el-link
@@ -280,6 +299,19 @@ const formatResult = computed(() => {
         :readonly="calcOption.readonly"
         @change="controlChange"
       >
+        <template
+          v-for="(slot, slotKey) in (calcOption.slots||{})"
+          :key="slotKey"
+          #[slotKey]
+        >
+          <component
+            :is="slotsResult[slotKey].result"
+            v-if="slotsResult[slotKey]?.vnode"
+          />
+          <template v-else>
+            {{ slotsResult[slotKey].result }}
+          </template>
+        </template>
         <template
           v-if="hasModelText&&formatResult"
           #default
diff --git a/src/components/index.js b/src/components/index.js
index bc39ccf..02143a4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -15,6 +15,7 @@ import CommonBreadcrumb from '@/components/common-breadcrumb/index.vue'
 import CommonWindow from '@/components/common-window/index.vue'
 import CommonAutocomplete from '@/components/common-autocomplete/index.vue'
 import CommonSort from '@/components/common-sort/index.vue'
+import CommonDescriptions from '@/components/common-descriptions/index.vue'
 import CommonDirectives from '@/components/directives'
 
 /**
@@ -42,6 +43,7 @@ export default {
     Vue.component('CommonWindow', CommonWindow)
     Vue.component('CommonAutocomplete', CommonAutocomplete)
     Vue.component('CommonSort', CommonSort)
+    Vue.component('CommonDescriptions', CommonDescriptions)
     Vue.use(CommonDirectives)
   }
 }
diff --git a/src/components/utils/index.js b/src/components/utils/index.js
index 623958e..13e1121 100644
--- a/src/components/utils/index.js
+++ b/src/components/utils/index.js
@@ -1,4 +1,4 @@
-import { ref, unref } from 'vue'
+import { isVNode, ref, unref } from 'vue'
 import { $i18nBundle, $i18nKey } from '@/messages'
 import { isArray, isFunction, isObject } from 'lodash-es'
 
@@ -64,8 +64,8 @@ export const useMenuName = item => {
       return toLabelByKey(menuInfo.labelKey)
     }
   }
-  if (item.meta && item.meta.labelKey) {
-    return toLabelByKey(item.meta.labelKey)
+  if (item.meta && (item.meta.label || item.meta.labelKey)) {
+    return item.meta.label || toLabelByKey(item.meta.labelKey)
   }
   return item.name || 'No Name'
 }
@@ -154,6 +154,24 @@ export const proxyMethod = (targets = [], methodName) => {
   }
 }
 
+export const calcSlotsResult = (config, data) => {
+  const results = {}
+  if (config?.slots) {
+    const slots = config.slots
+    for (const slotKey in slots) {
+      const slot = slots[slotKey]
+      if (isFunction(slot)) {
+        const slotResult = slot(data, config)
+        results[slotKey] = {
+          result: slotResult,
+          vnode: isVNode(slotResult)
+        }
+      }
+    }
+  }
+  return results
+}
+
 /**
  * 定义表单选项，带有jsdoc注解，方便代码提示
  * @param {CommonFormOption|CommonFormOption[]} formOptions 表单选项