@fmdeui/fmui 1.0.160 → 1.0.162

package/es/packages/components/select-table/src/index2.vue.mjs

@@ -1,11 +1,13 @@
-import { defineComponent, useSlots, ref, computed, reactive, watch, nextTick, onMounted, onBeforeUnmount, onUpdated, useAttrs, resolveComponent, resolveDirective, openBlock, createBlock, mergeProps, isRef, unref, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, withDirectives, createElementVNode, normalizeStyle, createElementBlock, createVNode, createTextVNode, toDisplayString, createCommentVNode, withModifiers, Fragment } from 'vue';
+import { defineComponent, useModel, useSlots, ref, reactive, watch, computed, nextTick, onMounted, onBeforeUnmount, onUpdated, useAttrs, resolveComponent, resolveDirective, openBlock, createBlock, mergeProps, isRef, unref, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, withDirectives, createElementVNode, normalizeStyle, createElementBlock, createVNode, createTextVNode, toDisplayString, createCommentVNode, withModifiers, Fragment, mergeModels } from 'vue';
 import '../../query-condition/src/index.vue.mjs';
 import './renderCol.vue.mjs';
 import { ElMessage } from 'element-plus';
 import ClickOutside from './ClickOutside.mjs';
 import { useVirtualized } from './useVirtualized.mjs';
+import '../../../api/index.mjs';
 import '../../../hooks/index.mjs';
 import { useLocale } from '../../../hooks/useLocale.mjs';
+import { useBaseApi } from '../../../api/base/index.mjs';
 import _sfc_main$1 from '../../query-condition/src/index2.vue.mjs';
 import _sfc_main$2 from './renderCol2.vue.mjs';
 
@@ -24,7 +26,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "FSelectTable"
   },
   __name: "index",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     modelValue: { default: void 0 },
     inputValue: { default: void 0 },
     defaultSelectVal: { default: () => [] },
@@ -77,9 +79,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     isExpanded: { type: Boolean, default: false },
     multipleDisableDelete: { type: Boolean, default: true },
     tableLoading: { type: Boolean, default: false },
-    loadingTxt: { default: "" }
-  },
-  emits: ["page-change", "selectionChange", "radioChange", "update:inputValue", "input-focus", "input-blur", "input-clear", "input-click"],
+    loadingTxt: { default: "" },
+    apiService: { default: void 0 },
+    apiAction: { default: "" },
+    queryParams: { default: () => ({}) },
+    responseFormatter: { type: Function, default: (res) => ({
+      data: res.result.items || [],
+      total: res.result.total || 0
+    }) }
+  }, {
+    "id": { default: 0, required: false },
+    "idModifiers": {},
+    "name": { default: "", required: false },
+    "nameModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["page-change", "selectionChange", "radioChange", "update:inputValue", "input-focus", "input-blur", "input-clear", "input-click"], ["update:id", "update:name"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const { t } = useLocale();
     const {
@@ -90,6 +104,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       saveDATA,
       getItemHeightFromCache
     } = useVirtualized();
+    const modeValueId = useModel(__props, "id");
+    const modeValueName = useModel(__props, "name");
     const props = __props;
     const vClickOutside = ClickOutside;
     const emits = __emit;
@@ -101,8 +117,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const isVisible = ref(false);
     const radioVal = ref("");
     const isShowFirstRadio = ref(props.isShowFirstColumn);
-    const selectDefaultLabel = ref(props.modelValue);
+    const selectDefaultLabel = ref(modeValueName.value);
     const scrollTopNum = ref(0);
+    const pagination = reactive({
+      currentPage: props.table.currentPage,
+      pageSize: props.table.pageSize,
+      total: props.table.total
+    });
+    watch(
+      () => props.table,
+      (newVal) => {
+        if (!props.apiService) {
+          pagination.currentPage = newVal.currentPage;
+          pagination.pageSize = newVal.pageSize;
+          pagination.total = newVal.total;
+        }
+      },
+      { deep: true }
+    );
     let selectInputVal = computed({
       get() {
         return props.inputValue;
@@ -193,20 +225,55 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     );
     onMounted(() => {
       var _a;
-      if (state.defaultSelectValue && state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
-        defaultSelect(state.defaultSelectValue);
-      }
-      if (props.selfExpanded) {
-        selectRef.value.expanded = true;
-      }
-      if (props.useVirtual) {
-        saveDATA.value = props.table.data;
-        isShowFirstRadio.value = false;
-        getDom(props);
-        (_a = scrollContainerEl.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
+      if (props.apiService) {
+        fetchTableData();
+      } else {
+        if (state.defaultSelectValue && state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
+          defaultSelect(state.defaultSelectValue);
+        }
+        if (props.selfExpanded) {
+          selectRef.value.expanded = true;
+        }
+        if (props.useVirtual) {
+          saveDATA.value = props.table.data;
+          isShowFirstRadio.value = false;
+          getDom(props);
+          (_a = scrollContainerEl.value) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
+        }
+        if (props.radioSelectValLabel) findLabel();
       }
-      if (props.radioSelectValLabel) findLabel();
     });
+    const internalLoading = ref(false);
+    const internalQueryParams = reactive({ ...props.queryParams });
+    const fetchTableData = async (isResetPage = false) => {
+      if (!props.apiService) return;
+      internalLoading.value = true;
+      try {
+        if (isResetPage) {
+          pagination.currentPage = 1;
+        }
+        const requestParams = {
+          currentPage: pagination.currentPage,
+          pageSize: pagination.pageSize,
+          ...internalQueryParams
+        };
+        const res = await useBaseApi(props.apiService).post(requestParams, props.apiAction);
+        const formatted = props.responseFormatter(res);
+        pagination.total = formatted.total;
+        state.tableData = formatted.data;
+        if (props.useVirtual) {
+          saveDATA.value = formatted.data;
+          updateRenderData(scrollTopNum.value);
+        }
+        if (state.defaultSelectValue && state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
+          defaultSelect(state.defaultSelectValue);
+        }
+      } catch (error) {
+        console.error("FSelectTable API request failed:", error);
+      } finally {
+        internalLoading.value = false;
+      }
+    };
     const updateRenderData = (scrollTop) => {
       let startIndex = 0;
       let offsetHeight = 0;
@@ -254,6 +321,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         if (fQueryConditionRef.value && props.isShowQuery && props.isClearQuery && !selectRef.value.expanded && !props.selfExpanded) {
           (_a = fQueryConditionRef.value) == null ? void 0 : _a.resetData();
+          if (props.apiService) {
+            Object.keys(internalQueryParams).forEach((key) => delete internalQueryParams[key]);
+            Object.assign(internalQueryParams, props.queryParams);
+            fetchTableData(true);
+          }
         }
         findLabel();
         filterMethodHandle("");
@@ -331,6 +403,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const handlesCurrentChange = (val) => {
+      if (props.apiService) {
+        fetchTableData();
+        return;
+      }
       if (props.multiple) {
         if (!props.reserveSelection) {
           clear();
@@ -355,12 +431,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         setTimeout(() => {
           var _a, _b;
           state.defaultValue = multipleList.map((item) => item[props.keywords.label]);
+          state.ids = multipleList.map((item) => item[props.keywords.value]);
           multipleList.forEach((row) => {
             selectTable.value.toggleRowSelection(row, true);
           });
           (_b = (_a = selectRef.value) == null ? void 0 : _a.selected) == null ? void 0 : _b.forEach((item) => {
             item.currentLabel = item.value;
           });
+          modeValueId.value = state.ids;
+          modeValueName.value = state.defaultValue;
         }, 0);
       } else {
         setTimeout(() => {
@@ -369,6 +448,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             radioVal.value = state.tableData.indexOf(row) + 1;
             state.defaultValue = row;
             selectDefaultLabel.value = row[props.keywords.label];
+            modeValueId.value = row[props.keywords.value];
+            modeValueName.value = row[props.keywords.label];
             if (!props.defaultValIsOpenRadioChange) {
               emits("radioChange", row, row[props.keywords.value]);
             }
@@ -385,6 +466,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         state.defaultSelectValue = [];
       }
       emits("selectionChange", val, state.ids);
+      if (props.multiple) {
+        modeValueId.value = state.ids;
+        modeValueName.value = state.defaultValue;
+      }
     };
     const getRowClassName = ({ row }) => {
       if (!props.multiple && JSON.stringify(row) === JSON.stringify(state.defaultValue)) {
@@ -509,6 +594,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       radioVal.value = index;
       state.defaultValue = row;
       emits("radioChange", row, row[props.keywords.value]);
+      modeValueId.value = row[props.keywords.value];
+      modeValueName.value = row[props.keywords.label];
     };
     const rowClick = async (row) => {
       var _a;
@@ -541,6 +628,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         isDefaultSelectVal.value = true;
         state.defaultSelectValue = [];
         state.defaultValue = props.multiple ? [] : null;
+        modeValueId.value = props.multiple ? [] : 0;
+        modeValueName.value = props.multiple ? [] : "";
       };
       if (!selectTable.value) {
         console.warn("selectTable.value is not initialized");
@@ -624,7 +713,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "selectRef",
         ref: selectRef,
         "model-value": __props.multiple ? state.defaultValue : selectDefaultLabel.value,
-        "popper-class": "t-select-table",
+        "popper-class": "f-select-table",
         style: { width: __props.selectWidth ? `${__props.selectWidth}px` : "100%" },
         "value-key": __props.keywords.value,
         "filter-method": __props.filterMethod || filterMethodHandle,
@@ -804,18 +893,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 }, 16, ["data", "class"]),
                 __props.isShowPagination ? (openBlock(), createElementBlock("div", _hoisted_4, [
                   createVNode(_component_el_pagination, mergeProps({
-                    "current-page": __props.table.currentPage,
-                    "onUpdate:currentPage": _cache[6] || (_cache[6] = ($event) => __props.table.currentPage = $event),
-                    "page-size": __props.table.pageSize,
-                    "onUpdate:pageSize": _cache[7] || (_cache[7] = ($event) => __props.table.pageSize = $event),
+                    "current-page": pagination.currentPage,
+                    "onUpdate:currentPage": _cache[6] || (_cache[6] = ($event) => pagination.currentPage = $event),
+                    "page-size": pagination.pageSize,
+                    "onUpdate:pageSize": _cache[7] || (_cache[7] = ($event) => pagination.pageSize = $event),
                     onCurrentChange: handlesCurrentChange,
                     layout: "total, prev, pager, next, jumper",
                     "pager-count": __props.table["pager-count"] || 5,
-                    total: __props.table.total
+                    total: pagination.total
                   }, { background: true, size: __props.paginationSize || "small", ..._ctx.$attrs }), null, 16, ["current-page", "page-size", "pager-count", "total"])
                 ])) : createCommentVNode("v-if", true)
               ], 8, _hoisted_2)), [
-                [_directive_loading, __props.tableLoading]
+                [_directive_loading, __props.tableLoading || internalLoading.value]
               ]),
               renderSlot(_ctx.$slots, "footer")
             ],