@fmdevui/fm-dev 1.0.97 → 1.0.99

package/lib/packages/core/ui/components/inpttable/index.vue2.js

@@ -0,0 +1,776 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var index = require('../../../api/base/index.js');
+
+const _hoisted_1 = { class: "w100 selector-loading-container" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "Fminputtable"
+  },
+  __name: "index",
+  props: {
+    /**
+     * 使用示例：
+     * 
+     * 单选模式：
+     * <pulldown-selecter
+     *      v-model="state.ruleForm.userId"
+     *      :defaultOptions="[ id: state.ruleForm.userId, realName: state.ruleForm.realName ]"
+     *      :fetch-options="handleSysUserTable"
+     *      :queryParams="state.queryParams"
+     *      :dropdown-width="dropdownWidth"
+     *      :placeholder="placeholder"
+     *      :label-prop="realName"
+     *      :value-prop="id"
+     *      @@change="handelChange"
+     *      filterable
+     *      clearable
+     *      class="w100"
+     *  >
+     * 
+     * 多选模式：
+     * <pulldown-selecter
+     *      v-model="state.ruleForm.userIds"
+     *      :defaultOptions="state.ruleForm.defaultUsers"
+     *      :fetch-options="handleSysUserTable"
+     *      :queryParams="state.queryParams"
+     *      :dropdown-width="dropdownWidth"
+     *      :placeholder="placeholder"
+     *      :label-prop="realName"
+     *      :value-prop="id"
+     *      @@change="handelChange"
+     *      multiple
+     *      filterable
+     *      clearable
+     *      class="w100"
+     *  >
+     * 
+     * 查询条件表单插槽：
+     *     <template #queryForm="{ query, handleQuery }">
+     *       <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+     *         <el-form-item label="姓名" prop="realName">
+     *           <el-input v-model="query.realName" placeholder="请输入姓名" class="w100" clearable @keydown.enter.native="handleQuery()" />
+     *         </el-form-item>
+     *       </el-col>
+     *       <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
+     *         <el-form-item label="电话" prop="phone">
+     *           <el-input v-model="query.phone" placeholder="请输入电话" class="w100" clearable @keydown.enter.native="handleQuery()" />
+     *         </el-form-item>
+     *       </el-col>
+     *    </template>
+     * 
+     * 表格列插槽：
+     *    <template #columns>
+     *      <el-table-column prop="realName" label="姓名" />
+     *      <el-table-column prop="account" label="账号" width="160"/ >
+     *      <el-table-column prop="idCardNo" label="身份证号" width="140" />
+     *      <el-table-column prop="cardNo" label="卡号" width="140" />
+     *      <el-table-column prop="gender" label="性别" width="85">
+     *        <template #default="{ row }">
+     *          <g-sys-dict v-model="row.gender" code="GenderEnum" />
+     *        </template>
+     *      </el-table-column>
+     *      <el-table-column prop="birthday" label="生日">
+     *        <template #default="{ row, $index }">
+     *          {{ commonFun.dateFormatYMD(row, $index, row.birthday) }}
+     *        </template>
+     *      </el-table-column>
+     *      <el-table-column prop="phone" label="联系电话" width="100" />
+     *    </template>
+     *  </pulldown-selecter>
+     */
+    // v-model绑定的值，支持字符串、数字、数组或null类型
+    modelValue: [String, Number, Array, null],
+    /**
+     * 获取表格数据的异步方法（必填）
+     * @example
+     * const handleSysUserTable = (params: any) => {
+     *  return getAPI(SysUserApi).apiSysUserPagePost(params);
+     * };
+     */
+    fetchOptions: {
+      type: Function,
+      // 函数类型
+      required: true
+      // 必填项
+    },
+    /**
+    * api service name
+    */
+    apiService: {
+      type: String,
+      default: "baseData"
+    },
+    /**
+    * api service 下的方法
+    */
+    apiAction: {
+      type: String,
+      default: "BaseData"
+    },
+    /**
+     * 基础编码 自动获取数据
+     */
+    method: {
+      type: String,
+      default: "post"
+    },
+    /**
+     * 选中记录后绑定值的属性名
+     * 默认为'id'，即选中某行后，会取该行数据的id字段作为值
+     */
+    valueProp: {
+      type: String,
+      default: "id"
+    },
+    /**
+     * 选中记录后显示文本的属性名
+     * 默认为'name'，即在下拉框中显示的文本取自该字段
+     */
+    labelProp: {
+      type: String,
+      default: "name"
+    },
+    /**
+     * 显示值的格式化方法
+     * 可以自定义选中后在输入框中显示的文本格式
+     * @example
+     * :labelFormat="(item: any) => `${item.realName}(${item.account})`"
+     */
+    labelFormat: {
+      type: Function,
+      default: (item) => void 0
+      // 默认不进行格式化
+    },
+    /**
+     * 默认查询条件的属性名
+     * 在输入框中输入的关键词会赋值给该字段
+     */
+    keywordProp: {
+      type: String,
+      default: "keyword"
+    },
+    /**
+     * 下拉框的宽度
+     */
+    dropdownWidth: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * 下拉框的高度
+     */
+    dropdownHeight: {
+      type: String,
+      default: "550px"
+    },
+    /**
+     * 输入框的占位符文本
+     */
+    placeholder: {
+      type: String,
+      default: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD"
+    },
+    /**
+     * 默认选项，用于回显已选中的数据
+     * 当数据不在当前页时，通过该属性提供数据进行回显
+     */
+    defaultOptions: {
+      type: Array,
+      default: []
+    },
+    /**
+     * 查询表单的高度偏移量
+     * 用于计算表格高度时减去查询表单占用的高度
+     */
+    queryHeightOffset: {
+      type: Number,
+      default: 35
+    },
+    /**
+     * 查询表单标签的宽度
+     */
+    queryLabelWidth: {
+      type: String
+    },
+    /**
+     * 查询参数对象
+     * 父组件传入的额外查询条件，会与组件内部的查询条件合并
+     */
+    queryParams: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * 是否显示分页组件
+     */
+    pagination: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否禁用组件
+     */
+    disabled: Boolean,
+    /**
+     * 是否多选模式
+     */
+    multiple: Boolean,
+    /**
+     * 是否可清空
+     */
+    clearable: Boolean
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const CONSTANTS = {
+      MAX_PAGE_SIZE: 99999,
+      // 不分页时的最大页面大小
+      DROPDOWN_DELAY: 1e3,
+      // 下拉框打开后的延迟时间（毫秒）
+      TABLE_HEIGHT_OFFSET: 175
+      // 表格高度基础偏移量（像素）
+    };
+    const props = __props;
+    const tableRef = vue.ref();
+    const selectRef = vue.ref();
+    const emit = __emit;
+    const state = vue.reactive({
+      // 当前选中的值，单选时为字符串/数字，多选时为数组
+      selectedValues: "",
+      // 表格查询参数对象
+      tableQuery: {
+        [props.keywordProp]: "",
+        // 动态属性名，默认为'keyword'，用于存储搜索关键词
+        page: props.queryParams.page,
+        // 当前页码，从父组件传入
+        pageSize: props.queryParams?.pageSize
+        // 每页显示数量，从父组件传入
+      },
+      // 表格数据对象
+      tableData: {
+        items: [],
+        // 当前页的数据列表
+        total: 0
+        // 总数据条数
+      },
+      // 默认选项数组，用于回显
+      defaultOptions: props.defaultOptions,
+      // 加载状态标识
+      loading: false,
+      // 选中的行数据数组，用于表格高亮显示和跨页选择
+      selectedRows: [],
+      // 查询执行标识，防止重复执行
+      isQuerying: false,
+      // 下拉框是否刚打开的标识（用于防止remoteMethod在打开时重复查询）
+      justOpened: false
+    });
+    const currentRowIndex = vue.ref(-1);
+    const tableHeight = vue.computed(() => {
+      const baseHeight = `${props.dropdownHeight} - ${CONSTANTS.TABLE_HEIGHT_OFFSET}px`;
+      const queryOffset = props.queryHeightOffset > 0 ? ` - ${props.queryHeightOffset}px` : "";
+      return `calc(${baseHeight}${queryOffset})`;
+    });
+    const mergeSelectedRows = (values) => {
+      const currentPageRows = state.tableData.items.filter(
+        (item) => values.includes(item[props.valueProp])
+      );
+      const previousRows = state.selectedRows.filter(
+        (item) => values.includes(item[props.valueProp])
+      );
+      const allRows = [...currentPageRows];
+      previousRows.forEach((row) => {
+        if (!allRows.find((item) => item[props.valueProp] === row[props.valueProp])) {
+          allRows.push(row);
+        }
+      });
+      return allRows;
+    };
+    const isRowSelected = (row) => {
+      if (!row || row[props.valueProp] === void 0 || row[props.valueProp] === null) {
+        return false;
+      }
+      if (props.multiple) {
+        if (!Array.isArray(state.selectedValues)) {
+          return false;
+        }
+        return state.selectedValues.some((val) => val === row[props.valueProp]);
+      } else {
+        return state.selectedValues !== null && state.selectedValues !== void 0 && state.selectedValues === row[props.valueProp];
+      }
+    };
+    const updateSelectedRows = () => {
+      if (props.multiple) {
+        const selectedValues = Array.isArray(state.selectedValues) ? state.selectedValues : [];
+        state.selectedRows = mergeSelectedRows(selectedValues);
+      } else {
+        const selectedRow = state.tableData.items.find(
+          (item) => item[props.valueProp] === state.selectedValues
+        );
+        state.selectedRows = selectedRow ? [selectedRow] : [];
+      }
+    };
+    const handleKeydown = (e) => {
+      const tableData = state.tableData?.items || [];
+      if (!tableData.length) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const direction = e.key === "ArrowDown" ? 1 : -1;
+        const newIndex = Math.max(0, Math.min(currentRowIndex.value + direction, tableData.length - 1));
+        if (newIndex !== currentRowIndex.value) {
+          currentRowIndex.value = newIndex;
+          const row = tableData[newIndex];
+          tableRef.value?.setCurrentRow(row);
+        }
+      } else if (e.key === "Enter") {
+        const row = tableData[currentRowIndex.value];
+        handleChange(row);
+      }
+    };
+    const handleSizeChange = (pageSize) => {
+      state.loading = true;
+      state.tableQuery.pageSize = pageSize;
+      state.tableQuery.page = 1;
+      executeQuery();
+    };
+    const handleCurrentChange = (page) => {
+      state.loading = true;
+      state.tableQuery.page = page;
+      executeQuery();
+    };
+    vue.onMounted(() => {
+      selectRef.value?.inputRef?.addEventListener("keydown", handleKeydown);
+    });
+    vue.onUnmounted(() => {
+      selectRef.value?.inputRef?.removeEventListener("keydown", handleKeydown);
+    });
+    const executeQuery = () => {
+      if (state.isQuerying) {
+        return;
+      }
+      state.isQuerying = true;
+      state.loading = true;
+      const finalParams = Object.assign({}, props.queryParams, state.tableQuery);
+      if (typeof props.fetchOptions === "function") {
+        props.fetchOptions(finalParams).then((res) => {
+          const result = res.data?.result;
+          state.tableData.items = result?.items ?? [];
+          state.tableData.total = result?.total ?? 0;
+          state.loading = false;
+          state.isQuerying = false;
+          updateSelectedRows();
+        }).catch((error) => {
+          elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
+          state.tableData.items = [];
+          state.tableData.total = 0;
+          state.loading = false;
+          state.isQuerying = false;
+        });
+      } else {
+        if (props.method == "post") {
+          index.useBaseApi(props.apiAction).post(finalParams, props.apiAction).then((res) => {
+            const result = res.data?.result;
+            state.tableData.items = result?.items ?? [];
+            state.tableData.total = result?.total ?? 0;
+            state.loading = false;
+            state.isQuerying = false;
+            updateSelectedRows();
+          }).catch((error) => {
+            elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
+            state.tableData.items = [];
+            state.tableData.total = 0;
+            state.loading = false;
+            state.isQuerying = false;
+          });
+        } else {
+          index.useBaseApi(props.apiAction).get(finalParams, props.apiAction).then((res) => {
+            const result = res.data?.result;
+            state.tableData.items = result?.items ?? [];
+            state.tableData.total = result?.total ?? 0;
+            state.loading = false;
+            state.isQuerying = false;
+            updateSelectedRows();
+          }).catch((error) => {
+            elementPlus.ElMessage.error("\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
+            state.tableData.items = [];
+            state.tableData.total = 0;
+            state.loading = false;
+            state.isQuerying = false;
+          });
+        }
+      }
+    };
+    const resetQuery = () => {
+      state.loading = true;
+      const currentPageSize = state.tableQuery.pageSize;
+      state.tableQuery = Object.assign({}, props.queryParams, { pageSize: currentPageSize });
+      state.tableQuery.page = 1;
+      executeQuery();
+    };
+    const remoteMethod = (query) => {
+      if (state.justOpened) {
+        state.justOpened = false;
+        return;
+      }
+      if (state.isQuerying) {
+        return;
+      }
+      state.loading = true;
+      if (typeof query === "string") {
+        state.tableQuery[props.keywordProp] = query.trim();
+        state.tableQuery.page = 1;
+      }
+      executeQuery();
+    };
+    const handleQuery = (clearKeyword = false) => {
+      state.loading = true;
+      if (clearKeyword) {
+        state.tableQuery[props.keywordProp] = void 0;
+        const input = selectRef.value.$el.querySelector("input");
+        if (input) input.value = "";
+      }
+      state.tableQuery.page = 1;
+      remoteMethod(state.tableQuery);
+    };
+    const handleQueryClick = () => {
+      state.loading = true;
+      state.tableQuery.page = 1;
+      executeQuery();
+    };
+    const handleChange = (row) => {
+      if (!row || !row[props.valueProp]) return;
+      if (typeof row[props.valueProp] === "string") row[props.valueProp] = row[props.valueProp]?.trim();
+      setDefaultOptions([row]);
+      if (props.multiple) {
+        if (!Array.isArray(state.selectedValues)) {
+          state.selectedValues = [];
+        }
+        const currentValues = Array.isArray(state.selectedValues) ? [...state.selectedValues] : [];
+        const valueIndex = currentValues.indexOf(row[props.valueProp]);
+        if (valueIndex > -1) {
+          currentValues.splice(valueIndex, 1);
+          state.selectedRows = state.selectedRows.filter((item) => item[props.valueProp] !== row[props.valueProp]);
+        } else {
+          currentValues.push(row[props.valueProp]);
+          const existingRow = state.selectedRows.find((item) => item[props.valueProp] === row[props.valueProp]);
+          if (!existingRow) {
+            state.selectedRows.push(row);
+          }
+        }
+        state.selectedValues = currentValues;
+      } else {
+        state.selectedValues = row[props.valueProp];
+        state.selectedRows = [row];
+      }
+      emit("update:modelValue", state.selectedValues);
+      emit("change", state.selectedValues, props.multiple ? state.selectedRows : row);
+      if (!props.multiple) {
+        tableRef.value?.setCurrentRow(row);
+        selectRef.value?.blur();
+      }
+    };
+    const selectVisibleChange = (visible) => {
+      if (visible) {
+        state.loading = true;
+        state.justOpened = true;
+        const paginationParams = {
+          page: state.tableQuery.page,
+          // 保留当前页码
+          pageSize: state.tableQuery.pageSize,
+          // 保留分页大小
+          [props.keywordProp]: void 0
+          // 清空关键词（打开时不带搜索条件）
+        };
+        state.tableQuery = Object.assign({}, props.queryParams, paginationParams);
+        executeQuery();
+        setTimeout(() => {
+          state.justOpened = false;
+        }, CONSTANTS.DROPDOWN_DELAY);
+      } else {
+        state.loading = false;
+        state.justOpened = false;
+      }
+    };
+    const setDefaultOptions = (options) => {
+      const map = /* @__PURE__ */ new Map();
+      for (const item of [...options ?? [], ...state.defaultOptions]) {
+        const value = item?.[props.valueProp];
+        const label = props.labelFormat?.(item) || item?.[props.labelProp];
+        if (value && label) {
+          map.set(value, { [props.valueProp]: value, [props.labelProp]: label });
+        }
+      }
+      state.defaultOptions = Array.from(map.values());
+    };
+    const setQueryParams = (query, append = true) => {
+      if (!props.pagination) {
+        query = Object.assign(query, {
+          pageSize: CONSTANTS.MAX_PAGE_SIZE
+        });
+      }
+      query = Object.assign({}, props.queryParams, query ?? {});
+      state.tableQuery = append ? Object.assign(state.tableQuery, query) : query;
+    };
+    const setValue = (option, row) => {
+      option = Array.isArray(option) ? option : [option];
+      state.tableData.total = option.length;
+      state.tableData.items = option;
+      if (props.multiple) {
+        state.selectedValues = option.map((item) => item[props.valueProp]);
+        state.selectedRows = option;
+        emit("update:modelValue", state.selectedValues);
+        emit("change", state.selectedValues, option);
+      } else {
+        state.selectedValues = option[0]?.[props.valueProp];
+        state.selectedRows = option[0] ? [option[0]] : [];
+        emit("update:modelValue", state.selectedValues);
+        emit("change", state.selectedValues, option[0]);
+      }
+    };
+    const selectedValuesChange = (val) => {
+      state.selectedValues = val;
+      emit("update:modelValue", val);
+      if (props.multiple) {
+        const selectedValues = Array.isArray(val) ? val : [];
+        const allSelectedRows = mergeSelectedRows(selectedValues);
+        state.selectedRows = allSelectedRows;
+        emit("change", val, allSelectedRows);
+      } else {
+        const selectedRow = state.tableData?.items?.find((item) => item[props.valueProp] === val);
+        if (selectedRow) {
+          state.selectedRows = [selectedRow];
+          tableRef.value?.setCurrentRow(selectedRow);
+        } else {
+          state.selectedRows = [];
+          tableRef.value?.setCurrentRow(null);
+        }
+        emit("change", val, selectedRow);
+      }
+    };
+    const getRowStyle = ({ row }) => {
+      return isRowSelected(row) ? {
+        backgroundColor: "var(--el-color-primary-light-9)",
+        borderLeft: "3px solid var(--el-color-primary)"
+      } : {};
+    };
+    const getRowClassName = ({ row }) => {
+      return isRowSelected(row) ? "selected-row" : "";
+    };
+    vue.watch(
+      () => props.modelValue,
+      // 监听的数据源
+      (val) => {
+        if (props.multiple) {
+          state.selectedValues = Array.isArray(val) ? val : val ? [val] : [];
+        } else {
+          state.selectedValues = val;
+        }
+        updateSelectedRows();
+      },
+      { immediate: true }
+      // 立即执行一次，确保初始化时也能正确设置
+    );
+    vue.watch(
+      () => props.defaultOptions,
+      // 监听的数据源
+      (val) => setDefaultOptions(val),
+      // 调用设置方法
+      { immediate: true }
+      // 立即执行一次
+    );
+    __expose({
+      setValue,
+      // 设置选中值（用于程序化设置选中的数据）
+      handleQuery,
+      // 执行查询（用于手动触发查询，可选择是否清空关键词）
+      setQueryParams,
+      // 设置查询参数（用于动态修改查询条件）
+      setDefaultOptions
+      // 设置默认选项（用于手动添加回显选项）
+    });
+    return (_ctx, _cache) => {
+      const _component_el_option = vue.resolveComponent("el-option");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      const _component_el_row = vue.resolveComponent("el-row");
+      const _component_el_form = vue.resolveComponent("el-form");
+      const _component_el_empty = vue.resolveComponent("el-empty");
+      const _component_el_table = vue.resolveComponent("el-table");
+      const _component_el_pagination = vue.resolveComponent("el-pagination");
+      const _component_el_select = vue.resolveComponent("el-select");
+      const _directive_reclick = vue.resolveDirective("reclick");
+      const _directive_loading = vue.resolveDirective("loading");
+      return vue.openBlock(), vue.createElementBlock(
+        vue.Fragment,
+        null,
+        [
+          vue.createCommentVNode(" Element Plus\u4E0B\u62C9\u9009\u62E9\u5668\u7EC4\u4EF6 "),
+          vue.createVNode(_component_el_select, vue.mergeProps(_ctx.$attrs, {
+            modelValue: state.selectedValues,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.selectedValues = $event),
+            clearable: __props.clearable,
+            multiple: __props.multiple,
+            disabled: __props.disabled,
+            placeholder: __props.placeholder,
+            "remote-method": remoteMethod,
+            onVisibleChange: selectVisibleChange,
+            onChange: selectedValuesChange,
+            style: { width: __props.dropdownWidth },
+            "popper-class": "popper-class",
+            ref_key: "selectRef",
+            ref: selectRef,
+            "remote-show-suffix": "",
+            filterable: "",
+            remote: ""
+          }), {
+            default: vue.withCtx(() => [
+              vue.createCommentVNode(" \u9690\u85CF\u7684\u9009\u9879\uFF0C\u7528\u4E8E\u5360\u4F4D\uFF0C\u9632\u6B62Element Plus\u8B66\u544A "),
+              vue.createVNode(_component_el_option, {
+                style: { "width": "0", "height": "0" },
+                value: ""
+              }),
+              vue.createCommentVNode(" \u9ED8\u8BA4\u9009\u9879\uFF0C\u7528\u4E8E\u56DE\u663E\u6570\u636E "),
+              vue.createCommentVNode(" \u5F53\u9009\u4E2D\u7684\u6570\u636E\u4E0D\u5728\u5F53\u524D\u9875\u65F6\uFF0C\u901A\u8FC7\u8FD9\u4E9B\u9690\u85CF\u9009\u9879\u8FDB\u884C\u56DE\u663E "),
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(state.defaultOptions ?? [], (item) => {
+                  return vue.openBlock(), vue.createBlock(_component_el_option, {
+                    key: item[__props.valueProp],
+                    label: __props.labelFormat(item) || item[__props.labelProp],
+                    value: item[__props.valueProp],
+                    style: { "width": "0", "height": "0" }
+                  }, null, 8, ["label", "value"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              vue.createCommentVNode(" \u4E0B\u62C9\u6846\u5185\u5BB9\u533A\u57DF "),
+              vue.createCommentVNode(' \r\n		v-loading\u6307\u4EE4\uFF1A\u663E\u793A\u52A0\u8F7D\u52A8\u753B\r\n		\u6CE8\u610F\uFF1Aloading\u72B6\u6001\u653E\u5728div\u4E0A\u800C\u4E0D\u662Ftable\u4E0A\uFF0C\u662F\u4E3A\u4E86\u8986\u76D6\u6574\u4E2A\u4E0B\u62C9\u533A\u57DF\uFF08\u5305\u62EC\u67E5\u8BE2\u8868\u5355\u548C\u5206\u9875\uFF09\r\n		\u8FD9\u6837\u53EF\u4EE5\u907F\u514D\u67E5\u8BE2\u65F6\u95EA\u73B0"\u6682\u65E0\u6570\u636E"\u7684\u63D0\u793A\r\n	'),
+              vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                vue.createCommentVNode(" \u67E5\u8BE2\u8868\u5355\u533A\u57DF\uFF08\u4EC5\u5F53\u7236\u7EC4\u4EF6\u63D0\u4F9B\u4E86queryForm\u63D2\u69FD\u65F6\u663E\u793A\uFF09 "),
+                _ctx.$slots.queryForm ? (vue.openBlock(), vue.createBlock(_component_el_form, {
+                  key: 0,
+                  model: state.tableQuery,
+                  class: "mg5 query-form",
+                  "label-width": __props.queryLabelWidth ?? "",
+                  onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                  }, ["stop"]))
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_el_row, { gutter: 10 }, {
+                      default: vue.withCtx(() => [
+                        vue.createCommentVNode(" \u67E5\u8BE2\u8868\u5355\u63D2\u69FD\uFF1A\u7531\u7236\u7EC4\u4EF6\u63D0\u4F9B\u8868\u5355\u5185\u5BB9 "),
+                        vue.renderSlot(_ctx.$slots, "queryForm", {
+                          query: state.tableQuery,
+                          handleQuery: () => handleQuery(true)
+                        }, void 0, true),
+                        vue.createCommentVNode(" \u67E5\u8BE2\u548C\u91CD\u7F6E\u6309\u94AE\u7EC4 "),
+                        vue.createVNode(_component_el_button_group, { style: { "position": "absolute", "right": "10px" } }, {
+                          default: vue.withCtx(() => [
+                            vue.createCommentVNode(" \u67E5\u8BE2\u6309\u94AE\uFF1A\u70B9\u51FB\u65F6\u7ACB\u5373\u663E\u793A\u52A0\u8F7D\u52A8\u753B\u5E76\u6267\u884C\u67E5\u8BE2 "),
+                            vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
+                              type: "primary",
+                              icon: "ele-Search",
+                              onClick: handleQueryClick
+                            }, {
+                              default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                                vue.createTextVNode(
+                                  " \u67E5\u8BE2 ",
+                                  -1
+                                  /* CACHED */
+                                )
+                              ])]),
+                              _: 1
+                              /* STABLE */
+                            })), [
+                              [_directive_reclick, 1e3]
+                            ]),
+                            vue.createCommentVNode(" \u91CD\u7F6E\u6309\u94AE\uFF1A\u91CD\u7F6E\u67E5\u8BE2\u6761\u4EF6\u5E76\u91CD\u65B0\u67E5\u8BE2 "),
+                            vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
+                              icon: "ele-Refresh",
+                              onClick: resetQuery
+                            }, {
+                              default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                                vue.createTextVNode(
+                                  " \u91CD\u7F6E ",
+                                  -1
+                                  /* CACHED */
+                                )
+                              ])]),
+                              _: 1
+                              /* STABLE */
+                            })), [
+                              [_directive_reclick, 1e3]
+                            ])
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    })
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                }, 8, ["model", "label-width"])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \r\n			\u6570\u636E\u8868\u683C \r\n			\u5173\u952E\u914D\u7F6E\u8BF4\u660E\uFF1A\r\n			1. height: \u52A8\u6001\u8BA1\u7B97\u9AD8\u5EA6\uFF0C\u6709\u67E5\u8BE2\u8868\u5355\u65F6\u4F7F\u7528\u8BA1\u7B97\u5C5E\u6027tableHeight\uFF0C\u5426\u5219\u4F7F\u7528\u56FA\u5B9A\u8BA1\u7B97\u5F0F\r\n			2. highlight-current-row: \u5355\u9009\u6A21\u5F0F\u542F\u7528\u884C\u9AD8\u4EAE\uFF0C\u591A\u9009\u6A21\u5F0F\u7981\u7528\uFF08\u591A\u9009\u7528row-style\u5B9E\u73B0\uFF09\r\n			3. row-class-name: \u4E3A\u9009\u4E2D\u884C\u6DFB\u52A0'selected-row'\u7C7B\u540D\uFF0C\u7528\u4E8ECSS\u6837\u5F0F\u63A7\u5236\r\n			4. row-style: \u4E3A\u9009\u4E2D\u884C\u6DFB\u52A0\u5185\u8054\u6837\u5F0F\uFF08\u80CC\u666F\u8272\u548C\u5DE6\u8FB9\u6846\uFF09\uFF0C\u786E\u4FDD\u8DE8\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\r\n\r\n            ({ row }: { row: any }) => isRowSelected(row) ? 'selected-row' : ''\r\n            ({ row }: { row: any }) => isRowSelected(row) ? { backgroundColor: 'var(--el-color-primary-light-9)', borderLeft: '3px solid var(--el-color-primary)' } : {}\r\n		"),
+                vue.createVNode(_component_el_table, {
+                  ref_key: "tableRef",
+                  ref: tableRef,
+                  onRowClick: handleChange,
+                  data: state.tableData?.items ?? [],
+                  height: _ctx.$slots.queryForm ? tableHeight.value : `calc(${__props.dropdownHeight} - ${CONSTANTS.TABLE_HEIGHT_OFFSET}px)`,
+                  "highlight-current-row": !__props.multiple,
+                  "row-class-name": getRowClassName,
+                  "row-style": getRowStyle
+                }, {
+                  empty: vue.withCtx(() => [
+                    !state.loading ? (vue.openBlock(), vue.createBlock(_component_el_empty, {
+                      key: 0,
+                      "image-size": 25
+                    })) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "columns", {}, void 0, true)
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                }, 8, ["data", "height", "highlight-current-row"]),
+                vue.createCommentVNode(" \r\n				\u5206\u9875\u7EC4\u4EF6\uFF08\u4EC5\u5F53\u542F\u7528\u5206\u9875\u65F6\u663E\u793A\uFF09\r\n				\u914D\u7F6E\u8BF4\u660E\uFF1A\r\n				1. disabled: \u52A0\u8F7D\u65F6\u7981\u7528\u5206\u9875\u64CD\u4F5C\uFF0C\u9632\u6B62\u91CD\u590D\u8BF7\u6C42\r\n				2. pager-count: \u663E\u793A5\u4E2A\u9875\u7801\u6309\u94AE\uFF0C\u9002\u5408\u4E0B\u62C9\u6846\u7684\u6709\u9650\u7A7A\u95F4\r\n				3. layout: \u7B80\u5316\u5E03\u5C40\uFF08\u53EA\u663E\u793A\u4E0A\u4E00\u9875\u3001\u9875\u7801\u3001\u4E0B\u4E00\u9875\uFF09\uFF0C\u8282\u7701\u7A7A\u95F4\r\n				4. size: \u4F7F\u7528\u5C0F\u5C3A\u5BF8\uFF0C\u9002\u914D\u4E0B\u62C9\u6846\u9AD8\u5EA6\r\n			"),
+                props.pagination ? (vue.openBlock(), vue.createBlock(_component_el_pagination, {
+                  key: 1,
+                  disabled: state.loading,
+                  currentPage: state.tableQuery.page,
+                  "page-size": state.tableQuery.pageSize,
+                  total: state.tableData.total,
+                  "pager-count": 5,
+                  onSizeChange: handleSizeChange,
+                  onCurrentChange: handleCurrentChange,
+                  layout: "prev, pager, next",
+                  size: "small",
+                  background: ""
+                }, null, 8, ["disabled", "currentPage", "page-size", "total"])) : vue.createCommentVNode("v-if", true)
+              ])), [
+                [_directive_loading, state.loading]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["modelValue", "clearable", "multiple", "disabled", "placeholder", "style"])
+        ],
+        2112
+        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;