plus-pro-components/es/components/display-item/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { createElementVNode, defineComponent, ref, watch, computed, provide, openBlock, createElementBlock, Fragment, createCommentVNode, createBlock, unref, mergeProps, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, renderList, normalizeClass, normalizeStyle, resolveDynamicComponent } from 'vue';
import { cloneDeep } from 'lodash-es';
import { DocumentCopy, Select } from '@element-plus/icons-vue';
import { PlusForm } from '../../form/index.mjs';
import { getValue, setValue, getCustomProps, getFieldSlotName, getExtraSlotName, getTableCellSlotName } from '../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../constants/index.mjs';
import { PlusRender } from '../../render/index.mjs';
import { ElIcon, ElDivider } from 'element-plus';
import { getDisplayComponent, hasDisplayComponent } from './display-item.mjs';
import { useGetOptions } from '../../../hooks/useGetOptions.mjs';
import { selectValueTypeList } from '../../../constants/display-item.mjs';
import { isFunction, isString, isArray } from '../../utils/is.mjs';
import { TableFormRowInfoInjectionKey } from '../../../constants/form.mjs';

const _hoisted_1 = ["innerHTML"];
const _hoisted_2 = { class: "plus-display-item" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode(
  "svg",
  {
    fill: "none",
    viewBox: "0 0 24 24",
    width: "1em",
    height: "1em",
    class: "t-icon t-icon-edit-1",
    "pointer-events": "none"
  },
  [
    /* @__PURE__ */ createElementVNode("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"
    })
  ],
  -1
  /* HOISTED */
);
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "PlusDisplayItem"
  },
  __name: "index",
  props: {
    column: { default: () => ({ prop: "", label: "" }) },
    row: { default: () => ({}) },
    index: { default: 0 },
    editable: { type: [Boolean, String], default: false },
    rest: { default: () => ({}) },
    formProps: { default: () => ({}) }
  },
  emits: ["change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const customFieldProps = ref({});
    const customFieldPropsIsReady = ref(false);
    const customFormProps = ref({});
    const customFormPropsIsReady = ref(false);
    const formInstance = ref();
    const { customOptions: options } = useGetOptions(props.column);
    const columns = 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(() => {
      const value = props.column.valueType === "link" ? props.column.linkText || displayValue.value : displayValue.value;
      if (!selectValueTypeList.includes(props.column.valueType) && !isEdit.value) {
        if (props.column.formatter && isFunction(props.column.formatter)) {
          return props.column.formatter(value, renderParams.value);
        }
        if (displayComponent.value.format && isFunction(displayComponent.value.format)) {
          return displayComponent.value.format(
            value,
            customFieldProps.value.format || customFieldProps.value.valueFormat
          );
        }
      }
      return value;
    });
    const modelValues = computed({
      get() {
        return { [props.column.prop]: displayValue.value };
      },
      set(values) {
        displayValue.value = values[props.column.prop];
      }
    });
    const isTagAndNoValue = computed(
      () => props.column.valueType === "tag" && (displayValue.value === void 0 || 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(() => {
      var _a, _b, _c, _d, _e;
      if (((_a = props.column) == null ? void 0 : _a.customGetStatus) && isFunction((_b = props.column) == null ? void 0 : _b.customGetStatus)) {
        const option2 = (_c = props.column) == null ? void 0 : _c.customGetStatus({
          options: options.value,
          value: displayValue.value,
          row: subRow.value
        });
        return option2 || { label: "", value: "" };
      }
      if (
        // select 多选
        props.column.valueType === "select" && customFieldProps.value.multiple === true || // checkbox
        props.column.valueType === "checkbox"
      ) {
        const option2 = ((_d = options.value) == null ? void 0 : _d.filter((i) => {
          var _a2;
          return (_a2 = displayValue.value) == null ? void 0 : _a2.includes(i.value);
        })) || [];
        return option2;
      }
      const option = ((_e = options.value) == null ? void 0 : _e.find(
        (i) => i.value === displayValue.value
      )) || { label: "", value: "" };
      return option;
    });
    const displayComponent = computed(() => getDisplayComponent(props.column.valueType));
    const displayComponentProps = computed(() => {
      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];
        }
      },
      {
        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) => {
      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, row) => {
      copy(formatterValue.value);
      row.isCopy = true;
      setTimeout(() => {
        row.isCopy = false;
      }, 3e3);
    };
    const handleChange = (values) => {
      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,
        index: props.index,
        rowIndex: props.index,
        cellIndex: props.rest.cellIndex,
        prop: props.column.prop,
        formInstance: computed(() => {
          var _a;
          return (_a = formInstance.value) == null ? void 0 : _a.formInstance;
        })
      };
    };
    __expose({
      startCellEdit,
      stopCellEdit,
      getDisplayItemInstance
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        Fragment,
        null,
        [
          createCommentVNode(" \u8868\u5355\u7B2C\u4E00\u4F18\u5148\u7EA7 "),
          isEdit.value ? (openBlock(), createElementBlock(
            Fragment,
            { key: 0 },
            [
              customFormPropsIsReady.value ? (openBlock(), createBlock(unref(PlusForm), mergeProps({
                key: 0,
                ref_key: "formInstance",
                ref: formInstance,
                modelValue: modelValues.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValues.value = $event),
                model: modelValues.value,
                columns: columns.value,
                "has-footer": false,
                "has-label": false
              }, { ...customFormProps.value, ..._ctx.formProps }, {
                class: "plus-display-item__form",
                onChange: handleChange
              }), createSlots({
                _: 2
                /* DYNAMIC */
              }, [
                _ctx.$slots[unref(getFieldSlotName)(_ctx.column.prop)] ? {
                  name: unref(getFieldSlotName)(_ctx.column.prop),
                  fn: withCtx((scoped) => [
                    renderSlot(_ctx.$slots, unref(getFieldSlotName)(_ctx.column.prop), normalizeProps(guardReactiveProps(scoped)))
                  ]),
                  key: "0"
                } : void 0,
                _ctx.$slots[unref(getExtraSlotName)(_ctx.column.prop)] ? {
                  name: unref(getExtraSlotName)(_ctx.column.prop),
                  fn: withCtx((scoped) => [
                    renderSlot(_ctx.$slots, unref(getExtraSlotName)(_ctx.column.prop), normalizeProps(guardReactiveProps(scoped)))
                  ]),
                  key: "1"
                } : void 0
              ]), 1040, ["modelValue", "model", "columns"])) : createCommentVNode("v-if", true)
            ],
            64
            /* STABLE_FRAGMENT */
          )) : _ctx.column.render && unref(isFunction)(_ctx.column.render) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 1 },
            [
              createCommentVNode(" \u81EA\u5B9A\u4E49\u663E\u793A "),
              customFieldPropsIsReady.value ? (openBlock(), createBlock(unref(PlusRender), {
                key: 0,
                render: _ctx.column.render,
                params: renderParams.value,
                "callback-value": displayValue.value,
                "custom-field-props": customFieldProps.value
              }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : createCommentVNode("v-if", true)
            ],
            64
            /* STABLE_FRAGMENT */
          )) : _ctx.$slots[unref(getTableCellSlotName)(_ctx.column.prop)] ? (openBlock(), createElementBlock(
            Fragment,
            { key: 2 },
            [
              createCommentVNode(" \u63D2\u69FD "),
              renderSlot(_ctx.$slots, unref(getTableCellSlotName)(_ctx.column.prop), mergeProps({ value: displayValue.value }, renderParams.value))
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )) : _ctx.column.renderHTML && unref(isFunction)(_ctx.column.renderHTML) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 3 },
            [
              createCommentVNode("\u663E\u793AHTML "),
              createElementVNode("span", {
                class: "plus-display-item",
                innerHTML: _ctx.column.renderHTML(displayValue.value, renderParams.value)
              }, null, 8, _hoisted_1)
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )) : unref(selectValueTypeList).includes(_ctx.column.valueType) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 4 },
            [
              createCommentVNode(" \u72B6\u6001\u663E\u793A `select`, `radio`, `checkbox`"),
              createElementVNode(
                "span",
                mergeProps({ class: "plus-display-item plus-display-item__badge" }, customFieldProps.value, {
                  class: { "is-list": unref(isArray)(getStatus.value) }
                }),
                [
                  createCommentVNode(" \u591A\u9009 "),
                  unref(isArray)(getStatus.value) ? (openBlock(), createElementBlock(
                    Fragment,
                    { key: 0 },
                    [
                      unref(isFunction)(_ctx.column.formatter) ? (openBlock(), createElementBlock(
                        Fragment,
                        { key: 0 },
                        [
                          createTextVNode(
                            toDisplayString(_ctx.column.formatter(displayValue.value, renderParams.value)),
                            1
                            /* TEXT */
                          )
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      )) : (openBlock(true), createElementBlock(
                        Fragment,
                        { key: 1 },
                        renderList(getStatus.value, (item) => {
                          return openBlock(), createElementBlock("span", {
                            key: String(item.value),
                            class: "plus-display-item__badge__item"
                          }, [
                            createElementVNode(
                              "i",
                              {
                                class: normalizeClass([
                                  "plus-display-item__badge__dot",
                                  item.type && !item.color ? "plus-display-item__badge__dot--" + item.type : ""
                                ]),
                                style: normalizeStyle({ backgroundColor: item.color })
                              },
                              null,
                              6
                              /* CLASS, STYLE */
                            ),
                            createTextVNode(
                              " " + toDisplayString(item.label),
                              1
                              /* TEXT */
                            )
                          ]);
                        }),
                        128
                        /* KEYED_FRAGMENT */
                      ))
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  )) : (openBlock(), createElementBlock(
                    Fragment,
                    { key: 1 },
                    [
                      createCommentVNode(" \u5355\u9009 "),
                      getStatus.value.color || getStatus.value.type ? (openBlock(), createElementBlock(
                        "i",
                        {
                          key: 0,
                          class: normalizeClass([
                            "plus-display-item__badge__dot",
                            getStatus.value.type && !getStatus.value.color ? "plus-display-item__badge__dot--" + getStatus.value.type : ""
                          ]),
                          style: normalizeStyle({ backgroundColor: getStatus.value.color })
                        },
                        null,
                        6
                        /* CLASS, STYLE */
                      )) : createCommentVNode("v-if", true),
                      createTextVNode(
                        " " + toDisplayString(unref(isFunction)(_ctx.column.formatter) ? _ctx.column.formatter(displayValue.value, renderParams.value) : getStatus.value.label),
                        1
                        /* TEXT */
                      )
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  ))
                ],
                16
                /* FULL_PROPS */
              )
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )) : _ctx.column.valueType === "copy" ? (openBlock(), createElementBlock(
            Fragment,
            { key: 5 },
            [
              createCommentVNode(" \u590D\u5236 "),
              createElementVNode("span", _hoisted_2, [
                createTextVNode(
                  toDisplayString(formatterValue.value) + " ",
                  1
                  /* TEXT */
                ),
                displayValue.value ? (openBlock(), createBlock(
                  unref(ElIcon),
                  mergeProps({
                    key: 0,
                    size: "16",
                    class: "plus-display-item__icon__copy"
                  }, customFieldProps.value, {
                    onClick: _cache[1] || (_cache[1] = ($event) => handelClickCopy(_ctx.column, subRow.value))
                  }),
                  {
                    default: withCtx(() => [
                      !subRow.value.isCopy ? (openBlock(), createBlock(unref(DocumentCopy), { key: 0 })) : (openBlock(), createBlock(unref(Select), { key: 1 }))
                    ]),
                    _: 1
                    /* STABLE */
                  },
                  16
                  /* FULL_PROPS */
                )) : createCommentVNode("v-if", true)
              ])
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )) : unref(hasDisplayComponent)(_ctx.column.valueType) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 6 },
            [
              createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
              createCommentVNode("has slots  "),
              displayComponent.value.hasSlots ? (openBlock(), createBlock(resolveDynamicComponent(isTagAndNoValue.value ? "span" : displayComponent.value.component), mergeProps({
                key: 0,
                class: ["plus-display-item", displayComponent.value.class]
              }, { ...renderParams.value, ...displayComponentProps.value }), createSlots({
                default: withCtx(() => [
                  createTextVNode(
                    " " + toDisplayString(formatterValue.value),
                    1
                    /* TEXT */
                  )
                ]),
                _: 2
                /* DYNAMIC */
              }, [
                renderList(_ctx.column.fieldSlots, (fieldSlot, key) => {
                  return {
                    name: key,
                    fn: withCtx((data) => [
                      (openBlock(), createBlock(resolveDynamicComponent(fieldSlot), mergeProps({ value: displayValue.value }, { ...renderParams.value, ...data }), null, 16, ["value"]))
                    ])
                  };
                })
              ]), 1040, ["class"])) : (openBlock(), createElementBlock(
                Fragment,
                { key: 1 },
                [
                  createCommentVNode("no slots  "),
                  (openBlock(), createBlock(resolveDynamicComponent(displayComponent.value.component), mergeProps({
                    class: ["plus-display-item", displayComponent.value.class]
                  }, { ...renderParams.value, ...displayComponentProps.value }), {
                    default: withCtx(() => [
                      createTextVNode(
                        toDisplayString(formatterValue.value),
                        1
                        /* TEXT */
                      )
                    ]),
                    _: 1
                    /* STABLE */
                  }, 16, ["class"]))
                ],
                2112
                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
              ))
            ],
            64
            /* STABLE_FRAGMENT */
          )) : _ctx.column.valueType === "divider" ? (openBlock(), createBlock(
            unref(ElDivider),
            mergeProps({
              key: 7,
              ref: "fieldInstance",
              class: "plus-form-item-field"
            }, customFieldProps.value),
            {
              default: withCtx(() => [
                createTextVNode(
                  toDisplayString(formatterValue.value),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            },
            16
            /* FULL_PROPS */
          )) : (openBlock(), createElementBlock(
            Fragment,
            { key: 8 },
            [
              createCommentVNode(" \u6CA1\u6709format "),
              createElementVNode(
                "span",
                mergeProps({ class: "plus-display-item" }, customFieldProps.value),
                toDisplayString(formatterValue.value),
                17
                /* TEXT, FULL_PROPS */
              )
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          )),
          renderSlot(_ctx.$slots, "edit-icon", {}, () => [
            hasEditIcon.value && !isEdit.value ? (openBlock(), createBlock(unref(ElIcon), {
              key: 0,
              size: 16,
              class: "plus-display-item__edit-icon",
              "pointer-events": "none"
            }, {
              default: withCtx(() => [
                _hoisted_3
              ]),
              _: 1
              /* STABLE */
            })) : createCommentVNode("v-if", true)
          ])
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});

export { _sfc_main as default };