@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/components/display-item/src/index.vue

@@ -0,0 +1,605 @@
+<template>
+  <!-- 表单第一优先级 -->
+  <template v-if="isEdit">
+    <PlusForm
+      v-if="customFormPropsIsReady"
+      ref="formInstance"
+      v-model="modelValues"
+      :model="modelValues"
+      :columns="columns"
+      :has-footer="false"
+      :has-label="false"
+      v-bind="{ ...customFormProps, ...formProps }"
+      class="plus-display-item__form"
+      @change="handleChange"
+    >
+      <!--表单单项的插槽 -->
+      <template
+        v-if="$slots[getFieldSlotName(column.prop)]"
+        #[getFieldSlotName(column.prop)]="scoped"
+      >
+        <slot :name="getFieldSlotName(column.prop)" v-bind="scoped" />
+      </template>
+
+      <!-- 表单el-form-item 下一行额外的内容 的插槽 -->
+      <template
+        v-if="$slots[getExtraSlotName(column.prop)]"
+        #[getExtraSlotName(column.prop)]="scoped"
+      >
+        <slot :name="getExtraSlotName(column.prop)" v-bind="scoped" />
+      </template>
+
+      <!-- 表单el-form-item 上一行的内容 的插槽 -->
+      <template
+        v-if="$slots[getPreviousSlotName(column.prop)]"
+        #[getPreviousSlotName(column.prop)]="scoped"
+      >
+        <slot :name="getPreviousSlotName(column.prop)" v-bind="scoped" />
+      </template>
+    </PlusForm>
+  </template>
+
+  <!-- 自定义显示 -->
+  <template v-else-if="column.render && isFunction(column.render)">
+    <PlusRender
+      v-if="customFieldPropsIsReady"
+      :render="column.render"
+      :params="renderParams"
+      :callback-value="displayValue"
+      :custom-field-props="customFieldProps"
+    />
+  </template>
+
+  <!-- 插槽 -->
+  <slot
+    v-else-if="$slots[getTableCellSlotName(column.prop)]"
+    :name="getTableCellSlotName(column.prop)"
+    :value="displayValue"
+    v-bind="renderParams"
+  />
+
+  <!--显示HTML -->
+  <span
+    v-else-if="column.renderHTML && isFunction(column.renderHTML)"
+    class="plus-display-item"
+    v-html="column.renderHTML(displayValue, renderParams)"
+  />
+
+  <!-- 状态显示 `select`, `radio`, `checkbox`-->
+  <span
+    v-else-if="selectValueTypeList.includes(column.valueType)"
+    class="plus-display-item plus-display-item__badge"
+    v-bind="customFieldProps"
+    :class="{ 'is-list': isArray(getStatus) }"
+  >
+    <!-- 多选 -->
+    <template v-if="isArray(getStatus)">
+      <template v-if="isFunction(column.formatter)">
+        {{ column.formatter(displayValue, renderParams) }}
+      </template>
+
+      <template v-else>
+        <template v-for="item in getStatus" :key="String(item.value)">
+          <span class="plus-display-item__badge__item">
+            <i
+              :class="[
+                'plus-display-item__badge__dot',
+                item.type && !item.color ? 'plus-display-item__badge__dot--' + item.type : ''
+              ]"
+              :style="{ backgroundColor: item.color }"
+            />
+            {{ item.label }}
+          </span>
+        </template>
+      </template>
+    </template>
+
+    <!-- 单选 -->
+    <template v-else>
+      <i
+        v-if="getStatus.color || getStatus.type"
+        :class="[
+          'plus-display-item__badge__dot',
+          getStatus.type && !getStatus.color
+            ? 'plus-display-item__badge__dot--' + getStatus.type
+            : ''
+        ]"
+        :style="{ backgroundColor: getStatus.color }"
+      />
+      {{
+        isFunction(column.formatter)
+          ? column.formatter(displayValue, renderParams)
+          : getStatus.label
+      }}
+    </template>
+  </span>
+
+  <!-- 复制 -->
+  <span v-else-if="column.valueType === 'copy'" class="plus-display-item">
+    {{ formatterValue }}
+    <el-icon
+      v-if="displayValue"
+      size="16"
+      class="plus-display-item__icon__copy"
+      v-bind="customFieldProps"
+      @click="handelClickCopy(column, subRow)"
+    >
+      <DocumentCopy v-if="!subRow.isCopy" />
+      <Select v-else />
+    </el-icon>
+  </span>
+
+  <!-- 统一处理 -->
+  <template v-else-if="hasDisplayComponent(column.valueType)">
+    <!--has slots  -->
+    <component
+      :is="isTagAndNoValue ? 'span' : displayComponent.component"
+      v-if="displayComponent.hasSlots"
+      :class="['plus-display-item', displayComponent.class]"
+      v-bind="{ ...renderParams, ...displayComponentProps }"
+    >
+      <template v-for="(fieldSlot, key) in column.fieldSlots" :key="key" #[key]="data">
+        <component :is="fieldSlot" :value="displayValue" v-bind="{ ...renderParams, ...data }" />
+      </template>
+
+      {{ formatterValue }}
+    </component>
+    <!--no slots  -->
+    <component
+      :is="displayComponent.component"
+      v-else
+      :class="['plus-display-item', displayComponent.class]"
+      v-bind="{ ...renderParams, ...displayComponentProps }"
+    >
+      {{ formatterValue }}
+    </component>
+  </template>
+
+  <el-divider
+    v-else-if="column.valueType === 'divider'"
+    ref="fieldInstance"
+    class="plus-form-item-field"
+    v-bind="customFieldProps"
+  >
+    {{ formatterValue }}
+  </el-divider>
+
+  <!-- 没有format -->
+  <span v-else class="plus-display-item" v-bind="customFieldProps">{{ formatterValue }} </span>
+
+  <slot name="edit-icon">
+    <el-icon
+      v-if="hasEditIcon && !isEdit"
+      :size="16"
+      class="plus-display-item__edit-icon"
+      pointer-events="none"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+        class="t-icon t-icon-edit-1"
+        pointer-events="none"
+      >
+        <path
+          fill="currentColor"
+          d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+        />
+      </svg>
+    </el-icon>
+  </slot>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash-es'
+import { DocumentCopy, Select } from '@element-plus/icons-vue'
+import type { PlusFormProps } from '@wlydfe/pro-ui-components/form'
+import { PlusForm } from '@wlydfe/pro-ui-components/form'
+import {
+  isFunction,
+  isArray,
+  isString,
+  getCustomProps,
+  getTableCellSlotName,
+  getFieldSlotName,
+  getExtraSlotName,
+  getPreviousSlotName,
+  getValue,
+  setValue
+} from '@wlydfe/pro-ui-components/utils'
+import type { Ref } from 'vue'
+import { ref, watch, computed, provide } from 'vue'
+import type {
+  PlusColumn,
+  RecordType,
+  FieldValueType,
+  FieldValues,
+  OptionsRow
+} from '@wlydfe/pro-ui-types'
+import { useGetOptions } from '@wlydfe/pro-ui-hooks'
+import { TableFormRowInfoInjectionKey, selectValueTypeList } from '@wlydfe/pro-ui-constants'
+import { PlusRender } from '@wlydfe/pro-ui-components/render'
+import { ElIcon, ElDivider } from 'element-plus'
+import { hasDisplayComponent, getDisplayComponent } from './display-item'
+
+export interface PlusDisplayItemProps {
+  column: PlusColumn
+  row: RecordType
+  index?: number
+  editable?: boolean | 'click' | 'dblclick'
+  rest?: RecordType
+  /**
+   * PlusFormProps 优先级低于column.formProps
+   * @version 0.1.17
+   */
+  formProps?: PlusFormProps
+}
+export interface PlusTableTableColumnEmits {
+  (e: 'change', data: { value: FieldValueType; prop: string; row: RecordType }): void
+}
+
+defineOptions({
+  name: 'PlusDisplayItem'
+})
+
+const props = withDefaults(defineProps<PlusDisplayItemProps>(), {
+  column: () => ({ prop: '', label: '' }),
+  row: () => ({}),
+  index: 0,
+  editable: false,
+  rest: () => ({}),
+  formProps: () => ({})
+})
+const emit = defineEmits<PlusTableTableColumnEmits>()
+
+const customFieldProps = ref<RecordType>({})
+const customFieldPropsIsReady = ref(false)
+
+const customFormProps = ref<RecordType>({})
+const customFormPropsIsReady = ref(false)
+
+const formInstance = ref()
+const { customOptions: options } = useGetOptions(props.column)
+const columns: Ref<PlusColumn[]> = ref([])
+const subRow = ref(cloneDeep(props.row))
+
+const isEdit = ref(false)
+const falseArray = [false, 'click', 'dblclick']
+
+watch(
+  () => props.row,
+  val => {
+    subRow.value = cloneDeep(val)
+  },
+  {
+    deep: true
+  }
+)
+
+watch(
+  () => [props.editable, props.column.editable],
+  () => {
+    if (props.column.editable === true) {
+      isEdit.value = true
+      return
+    }
+    if (props.column.editable === false) {
+      isEdit.value = false
+      return
+    }
+
+    if (props.editable === true) {
+      isEdit.value = true
+      return
+    }
+    if (falseArray.includes(props.editable)) {
+      isEdit.value = false
+      return
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const hasEditIcon = computed(
+  () =>
+    (props.editable === 'click' || props.editable === 'dblclick') && props.column.editable !== false
+)
+
+/** 多层值支持，原始值 */
+const displayValue = computed({
+  get() {
+    return getValue(subRow.value, props.column.prop)
+  },
+  set(value) {
+    setValue(subRow.value, props.column.prop, value)
+  }
+})
+
+/** 格式化后的值  */
+const formatterValue = computed(() => {
+  //  link 支持统一字段
+  const value =
+    props.column.valueType === 'link'
+      ? props.column.linkText || displayValue.value
+      : displayValue.value
+
+  // 格式化，不包含状态类型和表单
+  if (!selectValueTypeList.includes(props.column.valueType) && !isEdit.value) {
+    // formatter 第一优先
+    if (props.column.formatter && isFunction(props.column.formatter)) {
+      return props.column.formatter(value, renderParams.value)
+    }
+
+    // 自身的 format，日期和金钱
+    if (displayComponent.value.format && isFunction(displayComponent.value.format)) {
+      return displayComponent.value.format(
+        value,
+        customFieldProps.value.format || customFieldProps.value.valueFormat
+      )
+    }
+  }
+
+  // 如果值为空，返回 "-"
+  if (value === undefined || value === null || value === '') {
+    return '-'
+  }
+
+  return value
+})
+
+/**
+ * 表单绑定值处理
+ */
+const modelValues = computed({
+  get() {
+    return { [props.column.prop]: displayValue.value }
+  },
+  set(values) {
+    displayValue.value = values[props.column.prop]
+  }
+})
+
+/**
+ * tag 没有值的时候不渲染
+ */
+const isTagAndNoValue = computed(
+  () =>
+    props.column.valueType === 'tag' &&
+    (displayValue.value === undefined || displayValue.value === null || displayValue.value === '')
+)
+
+/**
+ * 渲染参数
+ */
+const renderParams = computed(() => ({
+  prop: props.column.prop,
+  valueType: props.column.valueType,
+  row: subRow.value,
+  index: props.index,
+  rowIndex: props.index,
+  fieldProps: customFieldProps.value,
+  options: options.value,
+  ...props.rest,
+  column: { ...props.rest.column, ...props.column }
+}))
+
+/**
+ * 表单中注入行信息
+ */
+const tableRowInfo = computed(() => ({
+  row: subRow.value,
+  index: props.index,
+  rowIndex: props.index,
+  ...props.rest,
+  column: { ...props.rest.column, ...props.column }
+}))
+
+// 向表单中注入行信息
+provide(TableFormRowInfoInjectionKey, tableRowInfo)
+
+const imageUrl = computed(() => {
+  const option = formatterValue.value
+  if (option && isString(option)) {
+    return { options: [option], url: option }
+  }
+  if (isArray(option)) {
+    return { options: option, url: option[0] }
+  }
+  return { options: [], url: '' }
+})
+
+const getStatus = computed(() => {
+  // 自定义
+  if (props.column?.customGetStatus && isFunction(props.column?.customGetStatus)) {
+    const option = props.column?.customGetStatus({
+      options: options.value,
+      value: displayValue.value,
+      row: subRow.value
+    })
+    return option || { label: '', value: '' }
+  }
+
+  if (
+    // select 多选
+    (props.column.valueType === 'select' && customFieldProps.value.multiple === true) ||
+    // checkbox
+    props.column.valueType === 'checkbox'
+  ) {
+    const option = options.value?.filter(i => displayValue.value?.includes(i.value)) || []
+    return option
+  }
+
+  // 单选
+  const option: OptionsRow | OptionsRow[] | undefined = options.value?.find(
+    i => i.value === displayValue.value
+  ) || { label: '', value: '' }
+
+  return option
+})
+
+const displayComponent = computed(() => getDisplayComponent(props.column.valueType))
+
+const displayComponentProps = computed<any>(() => {
+  return {
+    // img
+    ...(props.column.valueType === 'img'
+      ? {
+          fit: 'cover',
+          previewTeleported: true,
+          src: imageUrl.value.url,
+          previewSrcList: props.column.preview !== false ? imageUrl.value.options : []
+        }
+      : null),
+    // progress
+    ...(props.column.valueType === 'progress'
+      ? {
+          percentage: formatterValue.value
+        }
+      : null),
+    // link
+    ...(props.column.valueType === 'link'
+      ? {
+          type: 'primary'
+        }
+      : null),
+    // avatar
+    ...(props.column.valueType === 'avatar'
+      ? {
+          src: formatterValue.value
+        }
+      : null),
+    ...customFieldProps.value
+  }
+})
+
+watch(
+  () => props.column,
+  val => {
+    if (val) {
+      columns.value = [val as PlusColumn]
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.column.fieldProps,
+  val => {
+    getCustomProps(val, displayValue.value, subRow.value, props.index, 'fieldProps')
+      .then(data => {
+        customFieldProps.value = data
+        customFieldPropsIsReady.value = true
+      })
+      .catch(err => {
+        throw err
+      })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => [props.column.formProps, subRow.value],
+  () => {
+    getCustomProps(
+      props.column.formProps,
+      displayValue.value,
+      subRow.value,
+      props.index,
+      'formProps'
+    )
+      .then(data => {
+        customFormProps.value = data
+        customFormPropsIsReady.value = true
+      })
+      .catch(err => {
+        throw err
+      })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.row,
+  val => {
+    subRow.value = { ...val }
+  },
+  {
+    deep: true
+  }
+)
+
+const copy = (data: string) => {
+  const url = data
+  const textarea = document.createElement('textarea')
+  textarea.readOnly = true
+  textarea.style.position = 'absolute'
+  textarea.style.left = '-9999px'
+  textarea.value = url
+  document.body.appendChild(textarea)
+  textarea.select()
+  document.execCommand('Copy')
+  textarea.remove()
+}
+
+const handelClickCopy = (item: PlusColumn, row: RecordType) => {
+  copy(formatterValue.value)
+  row.isCopy = true
+  setTimeout(() => {
+    row.isCopy = false
+  }, 3000)
+}
+
+const handleChange = (values: FieldValues) => {
+  emit('change', {
+    value: values[props.column.prop],
+    prop: props.column.prop,
+    // 兼容 value 代码
+    row: { value: subRow.value, ...subRow.value }
+  })
+}
+
+const startCellEdit = () => {
+  if (props.column.editable === false) {
+    isEdit.value = false
+    return
+  }
+  isEdit.value = true
+}
+
+const stopCellEdit = () => {
+  if (props.column.editable === true) {
+    isEdit.value = true
+    return
+  }
+  isEdit.value = false
+}
+
+const getDisplayItemInstance = () => {
+  return {
+    isEdit: isEdit,
+    index: props.index,
+    rowIndex: props.index,
+    cellIndex: props.rest.cellIndex,
+    prop: props.column.prop,
+    formInstance: computed(() => formInstance.value?.formInstance)
+  }
+}
+
+defineExpose({
+  startCellEdit,
+  stopCellEdit,
+  getDisplayItemInstance
+})
+</script>

package/packages/components/display-item/style/css.ts

@@ -0,0 +1,11 @@
+import '@external/image/style/css'
+import '@external/link/style/css'
+import '@external/tag/style/css'
+import '@external/progress/style/css'
+import '@external/icon/style/css'
+import '@external/avatar/style/css'
+import '@external/divider/style/css'
+
+import '@wlydfe/pro-ui-components/form/style/css'
+
+import '@wlydfe/pro-ui-theme-chalk/plus-display-item.css'

package/packages/components/display-item/style/index.ts

@@ -0,0 +1,10 @@
+import '@external/image/style/index'
+import '@external/link/style/index'
+import '@external/tag/style/index'
+import '@external/progress/style/index'
+import '@external/avatar/style/index'
+import '@external/divider/style/index'
+
+import '@wlydfe/pro-ui-components/form/style/index'
+
+import '@wlydfe/pro-ui-theme-chalk/src/display-item.scss'