qidian-vue-ui 1.1.58 → 1.1.59

package/dist/components/service-popup-table-select/index.vue2.mjs

@@ -0,0 +1,645 @@
+import './index2.css'
+import './index.css'
+import { defineComponent, mergeDefaults, ref, reactive, computed, createVNode, watch, createBlock, openBlock, unref, mergeProps, isRef, withCtx, renderSlot, createSlots, renderList, createElementBlock, normalizeProps, guardReactiveProps } from "vue";
+import { isEmpty, identifyType, extractSlotsWithPrefix } from "qidian-shared";
+import { Popup, Select, Input, Space, Button } from "tdesign-vue-next";
+import { AddIcon, SearchIcon } from "tdesign-icons-vue-next";
+import { qdServicePopup, qdServicePopupTableSelectProps } from "./props.mjs";
+import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import { qdDialogTableSelectSearchGrid } from "../service-dialog-table-select/props.mjs";
+import { qdServiceSelectKeys } from "../service-select/props.mjs";
+import { useConfig } from "../config-provider/useConfig.mjs";
+import merge from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.mjs";
+import get from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/get.mjs";
+import { useReadonly } from "../../hooks/useReadonly.mjs";
+import { useDisabled } from "../../hooks/useDisabled.mjs";
+import QdCrudTable from "../crud/table/index.vue.mjs";
+const _hoisted_1 = {
+  key: 0,
+  class: "qd-popup-table-select__table-add"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "QdServicePopupTableSelect"
+  },
+  __name: "index",
+  props: /* @__PURE__ */ mergeDefaults({
+    tableSize: {},
+    addBtn: {},
+    addConfirmBtn: {},
+    addCancelBtn: {},
+    addInput: {},
+    title: {},
+    permiPrefix: {},
+    search: {},
+    searchData: {},
+    detail: {},
+    headerBg: {
+      type: Boolean
+    },
+    tree: {},
+    loadingWithData: {
+      type: Boolean
+    },
+    beforeDragSort: {
+      type: Function
+    },
+    expandedTreeNodes: {},
+    defaultExpandedTreeNodes: {},
+    treeExpandAndFoldIcon: {},
+    onAbnormalDragSort: {
+      type: Function
+    },
+    onExpandedTreeNodesChange: {
+      type: Function
+    },
+    onTreeExpandChange: {
+      type: Function
+    },
+    asyncLoading: {},
+    columnController: {},
+    columnControllerVisible: {
+      type: Boolean
+    },
+    defaultColumnControllerVisible: {
+      type: Boolean
+    },
+    columns: {},
+    displayColumns: {},
+    defaultDisplayColumns: {},
+    dragSort: {},
+    dragSortOptions: {},
+    editableCellState: {
+      type: Function
+    },
+    editableRowKeys: {},
+    expandIcon: {
+      type: Boolean
+    },
+    expandOnRowClick: {
+      type: Boolean
+    },
+    expandedRow: {},
+    expandedRowKeys: {},
+    defaultExpandedRowKeys: {},
+    filterIcon: {},
+    filterRow: {},
+    filterValue: {},
+    defaultFilterValue: {},
+    hideSortTips: {
+      type: Boolean
+    },
+    indeterminateSelectedRowKeys: {},
+    multipleSort: {
+      type: Boolean
+    },
+    rowSelectionAllowUncheck: {
+      type: Boolean
+    },
+    rowSelectionType: {},
+    selectOnRowClick: {
+      type: Boolean
+    },
+    defaultSelectedRowKeys: {},
+    showSortColumnBgColor: {
+      type: Boolean
+    },
+    sort: {},
+    defaultSort: {},
+    sortIcon: {},
+    sortOnRowDraggable: {
+      type: Boolean
+    },
+    defaultActiveRowKeys: {},
+    allowResizeColumnWidth: {
+      type: Boolean
+    },
+    attach: {
+      type: [String, Function]
+    },
+    bordered: {
+      type: Boolean
+    },
+    bottomContent: {},
+    cellEmptyContent: {},
+    data: {},
+    disableDataPage: {
+      type: Boolean
+    },
+    disableSpaceInactiveRow: {
+      type: Boolean
+    },
+    empty: {},
+    firstFullRow: {},
+    fixedRows: {},
+    footData: {},
+    footerAffixProps: {},
+    footerAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    footerSummary: {},
+    headerAffixProps: {},
+    headerAffixedTop: {
+      type: [Boolean, Object]
+    },
+    height: {},
+    horizontalScrollAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    hover: {
+      type: Boolean
+    },
+    keyboardRowHover: {
+      type: Boolean
+    },
+    lastFullRow: {},
+    lazyLoad: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    loadingProps: {},
+    locale: {},
+    maxHeight: {},
+    paginationAffixedBottom: {
+      type: [Boolean, Object]
+    },
+    resizable: {
+      type: Boolean
+    },
+    rowAttributes: {
+      type: [Object, Function, Array]
+    },
+    rowClassName: {
+      type: [Object, Array, String, Function]
+    },
+    rowspanAndColspan: {
+      type: Function
+    },
+    rowspanAndColspanInFooter: {
+      type: Function
+    },
+    scroll: {},
+    showHeader: {
+      type: Boolean
+    },
+    stripe: {
+      type: Boolean
+    },
+    tableContentWidth: {},
+    tableLayout: {},
+    topContent: {},
+    verticalAlign: {},
+    onActiveChange: {
+      type: Function
+    },
+    onActiveRowAction: {
+      type: Function
+    },
+    onColumnResizeChange: {
+      type: Function
+    },
+    onPageChange: {
+      type: Function
+    },
+    onRowClick: {
+      type: Function
+    },
+    onRowDblclick: {
+      type: Function
+    },
+    onRowMousedown: {
+      type: Function
+    },
+    onRowMouseenter: {
+      type: Function
+    },
+    onRowMouseleave: {
+      type: Function
+    },
+    onRowMouseover: {
+      type: Function
+    },
+    onRowMouseup: {
+      type: Function
+    },
+    onScroll: {
+      type: Function
+    },
+    onScrollX: {
+      type: Function
+    },
+    onScrollY: {
+      type: Function
+    },
+    cacheKey: {
+      type: [String, Function]
+    },
+    cacheTime: {},
+    pollingInterval: {},
+    onBefore: {
+      type: Function
+    },
+    onAfter: {
+      type: Function
+    },
+    onSuccess: {
+      type: Function
+    },
+    onError: {
+      type: Function
+    },
+    service: {
+      type: Function
+    },
+    manual: {
+      type: Boolean
+    },
+    transformParams: {
+      type: Function
+    },
+    transformRes: {
+      type: Function
+    },
+    pagination: {},
+    modelValue: {},
+    multiple: {
+      type: Boolean
+    },
+    readonly: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean
+    },
+    placeholder: {},
+    clearable: {
+      type: Boolean
+    },
+    creatable: {
+      type: Boolean
+    },
+    keys: {},
+    size: {},
+    valueType: {},
+    fillOptions: {},
+    popupVisible: {
+      type: Boolean
+    },
+    popupProps: {},
+    onClear: {
+      type: Function
+    },
+    onCreate: {
+      type: Function
+    },
+    onChange: {
+      type: Function
+    }
+  }, qdServicePopupTableSelectProps),
+  emits: ["update:modelValue", "update:popupVisible", "update:searchData", "update:data", "update:columnControllerVisible", "update:displayColumns", "update:expandedRowKeys", "update:filterValue", "update:sort", "update:expandedTreeNodes"],
+  setup(__props, {
+    emit: __emit
+  }) {
+    const props = __props;
+    const emit = __emit;
+    const {
+      modelValue,
+      popupVisible,
+      searchData,
+      data,
+      columnControllerVisible,
+      displayColumns,
+      expandedRowKeys,
+      filterValue,
+      sort,
+      expandedTreeNodes
+    } = useVModels(props, emit, {
+      passive: true
+    });
+    const {
+      t
+    } = useConfig("dialogTableSelect");
+    const tdReadonly = useReadonly();
+    const tdDisabled = useDisabled();
+    const selectedRowKeys = ref([]);
+    const selectedRows = ref([]);
+    const addCustom = reactive({
+      visible: false,
+      value: ""
+    });
+    const addConfirmDisabled = computed(() => isEmpty(addCustom.value));
+    const reProps = computed(() => {
+      const {
+        modelValue: modelValue2,
+        popupVisible: popupVisible2,
+        popupProps,
+        fillOptions,
+        searchData: searchData2,
+        data: inData,
+        columnControllerVisible: columnControllerVisible2,
+        displayColumns: displayColumns2,
+        expandedRowKeys: expandedRowKeys2,
+        filterValue: filterValue2,
+        sort: sort2,
+        expandedTreeNodes: expandedTreeNodes2,
+        readonly,
+        multiple,
+        disabled,
+        keys,
+        valueType,
+        clearable,
+        creatable,
+        placeholder,
+        size,
+        onClear,
+        onCreate,
+        onChange,
+        search,
+        tableSize,
+        addBtn,
+        addConfirmBtn,
+        addCancelBtn,
+        addInput,
+        ...tableOptions
+      } = props;
+      const rePopupOptions = merge({}, qdServicePopup, {
+        trigger: "click"
+      }, popupProps, {
+        disabled: tdDisabled.value || tdReadonly.value || disabled || readonly || popupProps?.disabled
+      });
+      const onVisibleChange = rePopupOptions.onVisibleChange;
+      rePopupOptions.onVisibleChange = (visible, context) => {
+        onVisibleChange?.(visible, context);
+        if (visible) {
+          fillOptionsWatchStop?.();
+          handleOpen();
+        } else {
+          if (addCustom.visible) cancelAddCustom();
+          if (reProps.value.popupOptions.destroyOnClose) {
+            data.value = [];
+            searchData2.value = {};
+            selectedRowKeys.value = [];
+          }
+        }
+      };
+      let reOverlayClassName = rePopupOptions.overlayClassName;
+      if (!reOverlayClassName) {
+        reOverlayClassName = "qd-popup-table-select__overlay";
+      } else if (typeof reOverlayClassName === "string") {
+        reOverlayClassName += " qd-popup-table-select__overlay";
+      } else if (identifyType(reOverlayClassName) === "array") {
+        reOverlayClassName.push("qd-popup-table-select__overlay");
+      } else if (identifyType(reOverlayClassName) === "object") {
+        reOverlayClassName["qd-popup-table-select__overlay"] = true;
+      }
+      rePopupOptions.overlayClassName = reOverlayClassName;
+      const addBtnOptions = merge({}, {
+        block: true,
+        theme: "primary",
+        variant: "dashed",
+        icon: () => createVNode(AddIcon, null, null),
+        content: t("addText"),
+        onClick: () => {
+          addCustom.visible = true;
+        }
+      }, typeof addBtn === "string" ? {
+        content: addBtn
+      } : addBtn);
+      const addConfirmBtnOptions = merge({}, {
+        content: t("addConfirmText"),
+        onClick: confirmAddCustom
+      }, typeof addConfirmBtn === "string" ? {
+        content: addConfirmBtn,
+        disabled: addConfirmDisabled.value
+      } : {
+        ...addConfirmBtn,
+        disabled: addConfirmDisabled.value || addConfirmBtn?.disabled
+      });
+      const addCancelBtnOptions = merge({}, {
+        variant: "outline",
+        content: t("addCancelText"),
+        onClick: cancelAddCustom
+      }, typeof addCancelBtn === "string" ? {
+        content: addCancelBtn
+      } : addCancelBtn);
+      const addInputOptions = merge({}, {
+        clearable: true
+      }, typeof addInput === "string" ? {
+        placeholder: addInput
+      } : addInput);
+      return {
+        creatable,
+        fillOptions,
+        popupOptions: rePopupOptions,
+        selectOptions: {
+          multiple,
+          readonly,
+          disabled,
+          keys,
+          valueType,
+          clearable,
+          placeholder,
+          size
+        },
+        tableOptions: {
+          ...tableOptions,
+          size: tableSize,
+          search: {
+            ...search,
+            grid: merge({}, qdDialogTableSelectSearchGrid, search?.grid)
+          },
+          selectType: multiple ? "multiple" : "single",
+          rowKey: keys?.value || qdServiceSelectKeys.value
+        },
+        onClear,
+        onCreate,
+        onChange,
+        addBtnOptions,
+        addConfirmBtnOptions,
+        addCancelBtnOptions,
+        addInputOptions,
+        models: {
+          modelValue: modelValue2,
+          popupVisible: popupVisible2,
+          searchData: searchData2,
+          data: inData,
+          columnControllerVisible: columnControllerVisible2,
+          displayColumns: displayColumns2,
+          expandedRowKeys: expandedRowKeys2,
+          filterValue: filterValue2,
+          sort: sort2,
+          expandedTreeNodes: expandedTreeNodes2
+        }
+      };
+    });
+    let fillOptionsWatchStop;
+    function handleSelectChange(rowKeys, options) {
+      selectedRows.value = options.selectedRowData;
+      const {
+        selectOptions
+      } = reProps.value;
+      const valueKey = selectOptions.keys?.value || qdServiceSelectKeys.value;
+      const labelKey = selectOptions.keys?.label || qdServiceSelectKeys.label;
+      if (selectOptions.valueType === "value") {
+        modelValue.value = selectOptions.multiple ? selectedRows.value.map((item) => get(item, valueKey)) : get(selectedRows.value[0], valueKey);
+      } else {
+        const rows = selectedRows.value.map((item) => ({
+          [valueKey]: get(item, valueKey),
+          [labelKey]: get(item, labelKey)
+        }));
+        modelValue.value = selectOptions.multiple ? rows : rows[0];
+      }
+      reProps.value.onChange?.(modelValue.value, {
+        option: selectedRows.value[selectedRows.value.length - 1],
+        selectedOptions: selectedRows.value,
+        trigger: "check"
+      });
+    }
+    function handleOpen() {
+      const {
+        selectOptions
+      } = reProps.value;
+      const valueKey = selectOptions.keys?.value || qdServiceSelectKeys.value;
+      if (identifyType(modelValue.value) === "array") {
+        selectedRowKeys.value = modelValue.value.map((item) => {
+          if (identifyType(item) === "object") {
+            return get(item, valueKey);
+          }
+          return item;
+        });
+      } else if (identifyType(modelValue.value) === "object") {
+        selectedRowKeys.value = [get(modelValue.value, valueKey)];
+      } else {
+        selectedRowKeys.value = isEmpty(modelValue.value) ? [] : [modelValue.value];
+      }
+    }
+    function handleClear(context) {
+      selectedRowKeys.value = [];
+      reProps.value.onChange?.(void 0, {
+        e: context.e,
+        option: null,
+        selectedOptions: [],
+        trigger: "clear"
+      });
+      reProps.value.onClear?.(context);
+    }
+    function confirmAddCustom(e) {
+      reProps.value.onCreate?.(addCustom.value);
+      reProps.value.onChange?.(addCustom.value, {
+        e,
+        option: null,
+        selectedOptions: [],
+        trigger: "check"
+      });
+      popupVisible.value = false;
+      reProps.value.popupOptions.onVisibleChange?.(popupVisible.value, {
+        e,
+        trigger: "trigger-element-close"
+      });
+    }
+    function cancelAddCustom() {
+      Object.assign(addCustom, {
+        visible: false,
+        value: ""
+      });
+    }
+    fillOptionsWatchStop = watch(() => reProps.value.fillOptions, (fillOpts) => {
+      if (!fillOpts?.length) return;
+      selectedRows.value = fillOpts;
+    }, {
+      immediate: true,
+      deep: true
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Popup), mergeProps({
+        modelValue: unref(popupVisible),
+        "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => isRef(popupVisible) ? popupVisible.value = $event : null)
+      }, reProps.value.popupOptions), {
+        content: withCtx(() => [createVNode(unref(QdCrudTable), mergeProps({
+          class: "qd-popup-table-select__table",
+          "search-data": unref(searchData),
+          "onUpdate:searchData": _cache[2] || (_cache[2] = ($event) => isRef(searchData) ? searchData.value = $event : null),
+          data: unref(data),
+          "onUpdate:data": _cache[3] || (_cache[3] = ($event) => isRef(data) ? data.value = $event : null),
+          "selected-row-keys": selectedRowKeys.value,
+          "onUpdate:selectedRowKeys": _cache[4] || (_cache[4] = ($event) => selectedRowKeys.value = $event),
+          "active-row-keys": selectedRowKeys.value,
+          "onUpdate:activeRowKeys": _cache[5] || (_cache[5] = ($event) => selectedRowKeys.value = $event),
+          "column-controller-visible": unref(columnControllerVisible),
+          "onUpdate:columnControllerVisible": _cache[6] || (_cache[6] = ($event) => isRef(columnControllerVisible) ? columnControllerVisible.value = $event : null),
+          "display-columns": unref(displayColumns),
+          "onUpdate:displayColumns": _cache[7] || (_cache[7] = ($event) => isRef(displayColumns) ? displayColumns.value = $event : null),
+          "expanded-rowKeys": unref(expandedRowKeys),
+          "onUpdate:expandedRowKeys": _cache[8] || (_cache[8] = ($event) => isRef(expandedRowKeys) ? expandedRowKeys.value = $event : null),
+          "filter-value": unref(filterValue),
+          "onUpdate:filterValue": _cache[9] || (_cache[9] = ($event) => isRef(filterValue) ? filterValue.value = $event : null),
+          sort: unref(sort),
+          "onUpdate:sort": _cache[10] || (_cache[10] = ($event) => isRef(sort) ? sort.value = $event : null),
+          "expanded-tree-nodes": unref(expandedTreeNodes),
+          "onUpdate:expandedTreeNodes": _cache[11] || (_cache[11] = ($event) => isRef(expandedTreeNodes) ? expandedTreeNodes.value = $event : null),
+          "reserve-selected-row-on-paginate": "",
+          "active-row-type": "multiple"
+        }, reProps.value.tableOptions, {
+          onSelectChange: handleSelectChange
+        }), createSlots({
+          _: 2
+        }, [reProps.value.creatable ? {
+          name: "table-bottom-content",
+          fn: withCtx(() => [addCustom.visible ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "add-input", {
+            addCustom
+          }, () => [createVNode(unref(Input), mergeProps({
+            modelValue: addCustom.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => addCustom.value = $event)
+          }, reProps.value.addInputOptions), null, 16, ["modelValue"])], true), createVNode(unref(Space), {
+            size: "small"
+          }, {
+            default: withCtx(() => [renderSlot(_ctx.$slots, "add-confirm-btn", {
+              addCustom
+            }, () => [createVNode(unref(Button), normalizeProps(guardReactiveProps(reProps.value.addConfirmBtnOptions)), null, 16)], true), renderSlot(_ctx.$slots, "add-cancel-btn", {
+              addCustom
+            }, () => [createVNode(unref(Button), normalizeProps(guardReactiveProps(reProps.value.addCancelBtnOptions)), null, 16)], true)]),
+            _: 3
+          })])) : renderSlot(_ctx.$slots, "add-btn", {
+            key: 1,
+            addCustom
+          }, () => [createVNode(unref(Button), mergeProps({
+            class: "qd-popup-table-select__table-add"
+          }, reProps.value.addBtnOptions), null, 16)], true)]),
+          key: "0"
+        } : void 0, renderList(unref(extractSlotsWithPrefix)(_ctx.$slots, "search"), (item) => {
+          return {
+            name: item.filterName,
+            fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, item.originalName, normalizeProps(guardReactiveProps(slotProps)), void 0, true)])
+          };
+        }), renderList(unref(extractSlotsWithPrefix)(_ctx.$slots, "table"), (item) => {
+          return {
+            name: item.filterName,
+            fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, item.originalName, mergeProps({
+              addCustom
+            }, slotProps), void 0, true)])
+          };
+        })]), 1040, ["search-data", "data", "selected-row-keys", "active-row-keys", "column-controller-visible", "display-columns", "expanded-rowKeys", "filter-value", "sort", "expanded-tree-nodes"])]),
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+          selectedRows: selectedRows.value
+        }, () => [createVNode(unref(Select), mergeProps({
+          modelValue: unref(modelValue),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
+          options: selectedRows.value,
+          "popup-visible": false
+        }, reProps.value.selectOptions, {
+          onClear: handleClear
+        }), {
+          suffixIcon: withCtx(() => [createVNode(unref(SearchIcon))]),
+          _: 1
+        }, 16, ["modelValue", "options"])], true)]),
+        _: 3
+      }, 16, ["modelValue"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.mjs.map