@seemusic/ui-components/lib/components/SopBasicTable/EditTableCell.vue.mjs

A Vue 3 UI Library. Uses Composable.

import { defineComponent, ref, computed, watch, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, createBlock, unref, createCommentVNode, mergeProps, resolveDynamicComponent, withCtx, renderList, createVNode } from "vue";
import { ElInput, ElMessage, ElDatePicker, ElTimePicker, ElOption, ElInputNumber, ElSelect, ElSelectV2, ElTimeSelect, ElCascader, ElSwitch } from "element-plus";
import { Icon } from "@iconify/vue";
import { useLocale } from "../../composables/useLocale.mjs";
const _hoisted_1 = { class: "edit-cell" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "EditTableCell",
  props: {
    column: {},
    scope: {},
    isOpenEdit: { type: Boolean },
    isCancelEditRow: { type: Boolean }
  },
  emits: ["edit-column-change", "cancel-edit-row-state-change"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const { t } = useLocale();
    const componentMap = {
      "ElInput": ElInput,
      "ElInputNumber": ElInputNumber,
      "ElSelect": ElSelect,
      "ElSelectV2": ElSelectV2,
      "ElTimeSelect": ElTimeSelect,
      "ElCascader": ElCascader,
      "ElSwitch": ElSwitch,
      "ElTimePicker": ElTimePicker,
      "ElDatePicker": ElDatePicker
    };
    const isEdit = ref(false);
    const ComponentName = computed(() => props.column.editComponent ? componentMap[props.column.editComponent] : ElInput);
    const ComponentProps = computed(() => props.column.editComponentProps ? props.column.editComponentProps : {});
    const ComponentRule = computed(() => props.column.editRule);
    const editMode = computed(() => props.column.editRow ? "EDIT_ROW" : props.column.editColumn ? "EDIT_COLUMN" : "");
    const defaultContent = ref(props.scope.row[props.column.prop] || "");
    const bindVal = ref(defaultContent.value);
    watch(
      () => props.isOpenEdit,
      (isOpenEdit) => {
        editScheduler(isOpenEdit);
        if (!isOpenEdit) {
          if (!props.isCancelEditRow) {
            existCellEdit(true, false);
          } else {
            emits("cancel-edit-row-state-change");
          }
          bindVal.value = defaultContent.value;
        }
      }
    );
    function existCellEdit(flag, isNeedScheduler = true) {
      if (flag) {
        if ((ComponentRule.value || ComponentRule.value === void 0) && !bindVal.value) {
          ElMessage.error(t("sop.basicTable.emptyRuleValidatorText"));
          return;
        }
        defaultContent.value = bindVal.value;
        emits("edit-column-change", defaultContent.value);
      } else {
        bindVal.value = defaultContent.value;
      }
      if (isNeedScheduler) {
        editScheduler(false);
      }
    }
    async function editScheduler(editable) {
      if (props.column.editColumnScheduler && !isEdit.value) {
        isEdit.value = await props.column.editColumnScheduler();
      } else {
        isEdit.value = editable;
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        !isEdit.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          createElementVNode("span", null, toDisplayString(defaultContent.value), 1),
          editMode.value === "EDIT_COLUMN" ? (openBlock(), createBlock(unref(Icon), {
            key: 0,
            class: "edit-cell__hover-icon",
            icon: "solar:pen-2-outline",
            onClick: _cache[0] || (_cache[0] = ($event) => editScheduler(true))
          })) : createCommentVNode("", true)
        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
          _ctx.column.editComponent === "ElDatePicker" ? (openBlock(), createBlock(unref(ElDatePicker), mergeProps({
            key: 0,
            modelValue: bindVal.value,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => bindVal.value = $event)
          }, ComponentProps.value), null, 16, ["modelValue"])) : _ctx.column.editComponent === "ElTimePicker" ? (openBlock(), createBlock(unref(ElTimePicker), mergeProps({
            key: 1,
            modelValue: bindVal.value,
            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => bindVal.value = $event)
          }, ComponentProps.value), null, 16, ["modelValue"])) : (openBlock(), createBlock(resolveDynamicComponent(ComponentName.value), mergeProps({
            key: 2,
            modelValue: bindVal.value,
            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => bindVal.value = $event)
          }, ComponentProps.value), {
            default: withCtx(() => {
              var _a;
              return [
                _ctx.column.editComponent === "ElSelect" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList((_a = _ctx.column.editComponentProps) == null ? void 0 : _a.options, (item) => {
                  return openBlock(), createBlock(unref(ElOption), {
                    key: item.value,
                    label: item.label,
                    value: item.value
                  }, null, 8, ["label", "value"]);
                }), 128)) : createCommentVNode("", true)
              ];
            }),
            _: 1
          }, 16, ["modelValue"])),
          editMode.value !== "EDIT_ROW" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
            createVNode(unref(Icon), {
              class: "edit-cell__icon",
              icon: "clarity:success-line",
              onClick: _cache[4] || (_cache[4] = ($event) => existCellEdit(true))
            }),
            createVNode(unref(Icon), {
              class: "edit-cell__icon",
              icon: "ic:baseline-clear",
              onClick: _cache[5] || (_cache[5] = ($event) => existCellEdit(false))
            })
          ], 64)) : createCommentVNode("", true)
        ], 64))
      ]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=EditTableCell.vue.mjs.map