asp-smart-ui-plus-test/es/components/pc/advanced/table-list/src/table-column.mjs

A Component Library for Vue 3

import { defineComponent, ref, watchEffect, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createCommentVNode, normalizeClass, normalizeStyle, createElementBlock, Fragment, renderList, createVNode, createElementVNode, toDisplayString, createTextVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';

const _hoisted_1 = { key: 0 };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["onClick"];
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "text-point" };
const _sfc_main = defineComponent({
  __name: "table-column",
  props: {
    col: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ["filterChange", "filterConfirm", "filterReset"],
  setup(__props, { emit }) {
    const props = __props;
    const col = ref(props.col);
    const setColor = (col2, row) => {
      if (typeof col2.color === "function") {
        return col2.color(row);
      }
      return col2.color;
    };
    const setToolTip = (col2, row) => {
      if (typeof col2.tooltip === "function") {
        return col2.tooltip(row);
      }
      return col2.tooltip;
    };
    const handleCommand = (btn, row) => {
      if (!btn.func) {
        return;
      }
      btn.func(row);
    };
    const handleIconCommand = (btn, row) => {
      if (!btn.func) {
        return;
      }
      btn.func(row);
    };
    const handleTag = (tag, row) => {
      if (typeof tag.tag === "function") {
        return tag.tag(row);
      }
      return tag.tag;
    };
    const handleFormInput = (col2, index, row) => {
      if (typeof col2.inputFunc !== "function") {
        return;
      }
      col2.inputFunc(row);
    };
    const handleFormChange = (col2, index, row) => {
      if (typeof col2.changeFunc !== "function") {
        return;
      }
      col2.changeFunc(row);
    };
    const handleFilterRenderHeader = ({
      column,
      $index
    }) => {
      if (!col.value.filtered) {
        col.value.filtered = [];
      }
      if (!col.value.checkAll) {
        col.value.checkAll = false;
      }
    };
    const filterChange = (val) => {
      var _a, _b;
      col.value.checkAll = val.length === ((_a = col.value.filterList) == null ? void 0 : _a.length);
      const filteredIdList = (_b = col.value.filterList) == null ? void 0 : _b.filter((item) => val.includes(item.text)).map((item) => item.value);
      if (typeof col.value.filterChange === "function") {
        col.value.filterChange(filteredIdList);
      }
      const params = {
        filterKey: col.value.filterKey,
        filteredList: val,
        columnName: col.value.label,
        filteredIdList
      };
      emit("filterChange", params);
    };
    const handleFilterAllChange = (val) => {
      var _a;
      const allOptions = (_a = col.value.filterList) == null ? void 0 : _a.map((item) => item.text);
      col.value.filtered = val ? allOptions : [];
      filterChange(col.value.filtered);
      if (typeof col.value.filterAllChange === "function") {
        col.value.filterAllChange(val);
      }
    };
    const filterConfirm = () => {
      emit("filterConfirm");
    };
    const filterReset = () => {
      col.value.filtered = [];
      filterChange([]);
      emit("filterReset");
    };
    watchEffect(() => {
      col.value = props.col;
    });
    return (_ctx, _cache) => {
      const _component_asp_input = resolveComponent("asp-input");
      const _component_asp_option = resolveComponent("asp-option");
      const _component_asp_select = resolveComponent("asp-select");
      const _component_asp_date_picker = resolveComponent("asp-date-picker");
      const _component_asp_form_item = resolveComponent("asp-form-item");
      const _component_asp_tag = resolveComponent("asp-tag");
      const _component_asp_tooltip = resolveComponent("asp-tooltip");
      const _component_asp_table_column = resolveComponent("asp-table-column");
      return openBlock(), createBlock(_component_asp_table_column, mergeProps({
        "class-name": "table-column",
        sortable: col.value.sort === "default" ? true : col.value.sort ? "custom" : false
      }, col.value, {
        prop: col.value.key,
        fixed: col.value.fixed ? col.value.fixed : false,
        resizable: col.value.resizable === void 0 ? true : col.value.resizable,
        "show-overflow-tooltip": col.value.showTooltip !== void 0 ? col.value.showTooltip : true,
        "render-header": col.value.filterKey ? handleFilterRenderHeader : col.value.renderHeader
      }), {
        default: withCtx((scope) => [
          createCommentVNode(" \u53EF\u7F16\u8F91\u533A\u57DF "),
          scope.row.isEdit && col.value.editType ? (openBlock(), createBlock(_component_asp_form_item, {
            key: 0,
            prop: "tableData." + scope.$index + "." + col.value.key,
            rules: col.value.rules,
            class: normalizeClass(scope.row.isEdit ? "is-edit" : "")
          }, {
            default: withCtx(() => [
              createCommentVNode("input \u6587\u672C"),
              col.value.editType === "input" ? (openBlock(), createBlock(_component_asp_input, {
                key: 0,
                modelValue: scope.row[col.value.key],
                "onUpdate:modelValue": ($event) => scope.row[col.value.key] = $event,
                placeholder: col.value.placeholder,
                clearable: "",
                maxlength: col.value.maxlength,
                style: normalizeStyle({ width: col.value.editWidth }),
                "show-word-limit": col.value["show-word-limit"],
                onInput: ($event) => handleFormInput(col.value, scope.$index, scope.row),
                onChange: ($event) => handleFormChange(col.value, scope.$index, scope.row)
              }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "maxlength", "style", "show-word-limit", "onInput", "onChange"])) : createCommentVNode("v-if", true),
              createCommentVNode(" \u4E0B\u62C9\u6846 "),
              col.value.editType === "select" ? (openBlock(), createBlock(_component_asp_select, {
                key: 1,
                modelValue: scope.row[col.value.key],
                "onUpdate:modelValue": ($event) => scope.row[col.value.key] = $event,
                placeholder: "\u8BF7\u9009\u62E9",
                onInput: ($event) => handleFormInput(col.value, scope.$index, scope.row),
                onChange: ($event) => handleFormChange(col.value, scope.$index, scope.row)
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(col.value.options, (item, i) => {
                    return openBlock(), createBlock(_component_asp_option, {
                      key: i,
                      label: col.value.optionsValue ? item[col.value.optionsValue] : item.label,
                      value: col.value.optionsLabel ? item[col.value.optionsLabel] : item.value
                    }, null, 8, ["label", "value"]);
                  }), 128))
                ]),
                _: 2
              }, 1032, ["modelValue", "onUpdate:modelValue", "onInput", "onChange"])) : createCommentVNode("v-if", true),
              createCommentVNode(" \u4E0B\u62C9\u6846 "),
              col.value.editType === "selectOptionFromRow" ? (openBlock(), createBlock(_component_asp_select, {
                key: 2,
                modelValue: scope.row[col.value.key],
                "onUpdate:modelValue": ($event) => scope.row[col.value.key] = $event,
                placeholder: "\u8BF7\u9009\u62E9",
                onInput: ($event) => handleFormInput(col.value, scope.$index, scope.row),
                onChange: ($event) => handleFormChange(col.value, scope.$index, scope.row)
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(scope.row.canChangeOptions, (item, i) => {
                    return openBlock(), createBlock(_component_asp_option, {
                      key: i,
                      label: col.value.optionsValue ? item[col.value.optionsValue] : item.label,
                      value: col.value.optionsLabel ? item[col.value.optionsLabel] : item.value
                    }, null, 8, ["label", "value"]);
                  }), 128))
                ]),
                _: 2
              }, 1032, ["modelValue", "onUpdate:modelValue", "onInput", "onChange"])) : col.value.editType === "datePicker" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
                createCommentVNode("DatePicker \u65E5\u671F\u9009\u62E9\u5668  date/week/month/year "),
                createVNode(_component_asp_date_picker, mergeProps({
                  modelValue: scope.row[col.value.key],
                  "onUpdate:modelValue": ($event) => scope.row[col.value.key] = $event
                }, col.value.props, {
                  format: col.value.timestamp,
                  "value-format": col.value.timestamp,
                  style: { width: col.value.editWidth },
                  onInput: ($event) => handleFormInput(col.value, scope.$index, scope.row),
                  onChange: ($event) => handleFormChange(col.value, scope.$index, scope.row)
                }), null, 16, ["modelValue", "onUpdate:modelValue", "format", "value-format", "style", "onInput", "onChange"])
              ], 2112)) : createCommentVNode("v-if", true)
            ]),
            _: 2
          }, 1032, ["prop", "rules", "class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
            createCommentVNode(" \u4E0D\u53EF\u7F16\u8F91\u533A\u57DF "),
            createCommentVNode("\u6587\u672C"),
            col.value.type === void 0 || col.value.type === "text" ? (openBlock(), createElementBlock("span", _hoisted_1, [
              createElementVNode("span", {
                style: normalizeStyle({ color: setColor(col.value, scope.row) })
              }, toDisplayString(scope.row[col.value.key]), 5)
            ])) : col.value.type === "tag" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
              createCommentVNode("\u6807\u7B7E"),
              createVNode(_component_asp_tag, { type: "success" }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(scope.row[col.value.key]), 1)
                ]),
                _: 2
              }, 1024)
            ], 2112)) : col.value.type === "btn-text" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
              createCommentVNode("\u5B57\u4F53\u53EF\u70B9\u51FB\u6309\u94AE"),
              createCommentVNode(" \u6CA1\u6709tooltip "),
              !setToolTip(col.value, scope.row) ? (openBlock(), createElementBlock("span", {
                key: 0,
                style: normalizeStyle({ color: setColor(col.value, scope.row) }),
                class: "text-btn",
                onClick: withModifiers(($event) => handleCommand(col.value, scope.row), ["stop"])
              }, toDisplayString(scope.row[col.value.key]), 13, _hoisted_2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                createCommentVNode(" \u6709tooltip "),
                createVNode(_component_asp_tooltip, {
                  class: "item",
                  effect: "dark",
                  content: setToolTip(col.value, scope.row),
                  placement: "top"
                }, {
                  default: withCtx(() => [
                    createElementVNode("span", {
                      style: normalizeStyle({ color: setColor(col.value, scope.row) }),
                      class: "text-btn",
                      onClick: withModifiers(($event) => handleCommand(col.value, scope.row), ["stop"])
                    }, toDisplayString(scope.row[col.value.key]), 13, _hoisted_3)
                  ]),
                  _: 2
                }, 1032, ["content"])
              ], 2112))
            ], 64)) : col.value.type === "btn-icon" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
              createCommentVNode("\u5B57\u4F53\u56FE\u6807\u53EF\u70B9\u51FB\u6309\u94AE"),
              createVNode(_component_asp_tooltip, {
                disabled: !col.value.tooltip,
                content: col.value.tooltipContent,
                placement: "top"
              }, {
                default: withCtx(() => [
                  createElementVNode("span", {
                    style: normalizeStyle({ color: setColor(col.value, scope.row) }),
                    class: normalizeClass(["icon-btn iconfont", col.value.className]),
                    onClick: withModifiers(($event) => handleIconCommand(col.value, scope.row), ["stop"])
                  }, null, 14, _hoisted_4)
                ]),
                _: 2
              }, 1032, ["disabled", "content"])
            ], 2112)) : col.value.type === "point" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
              createCommentVNode("\u6587\u672C\u5E26\u7EA2\u70B9"),
              createElementVNode("div", _hoisted_5, [
                createElementVNode("span", {
                  class: "point",
                  style: normalizeStyle({ background: setColor(col.value, scope.row) })
                }, null, 4),
                createTextVNode(" " + toDisplayString(scope.row[col.value.key]), 1)
              ])
            ], 2112)) : col.value.type === "slot" ? (openBlock(), createElementBlock(Fragment, { key: 5 }, [
              createCommentVNode(` <render-item
          v-else-if="col.type === 'render'"
          :col="col"
          :row="scope.row"
          :index="scope.$index"
        /> `),
              renderSlot(_ctx.$slots, col.value.key, normalizeProps(guardReactiveProps(scope)))
            ], 2112)) : createCommentVNode("v-if", true)
          ], 64))
        ]),
        _: 3
      }, 16, ["sortable", "prop", "fixed", "resizable", "show-overflow-tooltip", "render-header"]);
    };
  }
});
var tableColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\table-list\\src\\table-column.vue"]]);

export { tableColumn as default };