|
@@ -1,8 +1,10 @@
|
|
|
+<!-- 📚📚📚 Vxe-Table 文档: https://vxetable.cn/#/table/start/install -->
|
|
|
+
|
|
|
<template>
|
|
|
<!-- 查询表单 card -->
|
|
|
<!-- <div class="table-box"> -->
|
|
|
<SearchForm
|
|
|
- v-if="isShowSearch"
|
|
|
+ v-if="ifSearch && isShowSearch"
|
|
|
:search="search"
|
|
|
:reset="reset"
|
|
|
:columns="searchColumns"
|
|
@@ -241,7 +243,7 @@
|
|
|
<slot></slot>
|
|
|
<template v-for="item in tableColumns" :key="item">
|
|
|
<!-- checkbox || seq || expand -->
|
|
|
- <vxe-column v-bind="item" :align="item.align ?? 'center'" v-if="item?.type && TABLE_TYPE_FILTER.includes(item.type)">
|
|
|
+ <vxe-column v-bind="item" :align="item.align ?? 'center'" v-if="item.type && TABLE_TYPE_FILTER.includes(item.type)">
|
|
|
<template #content="scope" v-if="item.type == 'expand'">
|
|
|
<slot :name="item.type" v-bind="scope"></slot>
|
|
|
</template>
|
|
@@ -458,6 +460,8 @@ import { pinyinFilter } from "@/utils/pinyin";
|
|
|
import { TourEnum } from "@/enums/tourEnum";
|
|
|
import { useTour } from "@/hooks/useTour";
|
|
|
// import { onKeyStroke } from "@vueuse/core";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { onClickOutside } from "@vueuse/core";
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
const globalStore = useGlobalStore();
|
|
@@ -508,23 +512,23 @@ const props = withDefaults(defineProps<LjVxetableProps>(), {
|
|
|
layoutAttr: () => TABLE_LAYOUT_ATTR,
|
|
|
layoutAttrDefine: () => TABLE_LAYOUT_ATTR_DEFINE,
|
|
|
// height: "auto",
|
|
|
- tableCls: "card",
|
|
|
+ tableCls: "card h-full",
|
|
|
tableProps: {},
|
|
|
extraLoading: false,
|
|
|
tableEvents: {},
|
|
|
toolButton: () => ["refresh", "setting", "search", "location"],
|
|
|
toolButtonPower: () => [],
|
|
|
autoLoadLayout: true,
|
|
|
- collapseButtons: false,
|
|
|
+ collapseButtons: true,
|
|
|
miniSearchbar: true,
|
|
|
footerSumAttrs: () => [],
|
|
|
searchBtnSizeExtent: () => ["xs", "sm", "md"],
|
|
|
multiSelect: undefined,
|
|
|
editable: false,
|
|
|
autoSelectFirstAfterRefresh: false,
|
|
|
- ifLoadQueryHabit: true
|
|
|
+ ifLoadQueryHabit: true,
|
|
|
+ ifSearch: true
|
|
|
});
|
|
|
-
|
|
|
/**
|
|
|
* @description 是否可编辑
|
|
|
*/
|
|
@@ -535,9 +539,23 @@ const _defineProps = ref({
|
|
|
border: true,
|
|
|
showOverflow: "tooltip",
|
|
|
showHeaderOverflow: true,
|
|
|
- height: "",
|
|
|
+ height: "auto",
|
|
|
minHeight: "100px",
|
|
|
- rowConfig: { isCurrent: true, isHover: true, useKey: true },
|
|
|
+ rowConfig: {
|
|
|
+ isCurrent: true,
|
|
|
+ isHover: true,
|
|
|
+ useKey: true,
|
|
|
+ currentMethod: ({ row }: any) => {
|
|
|
+ if (Object.keys(props).includes("lockRow")) {
|
|
|
+ if (isBoolean(props?.lockRow)) {
|
|
|
+ return !props.lockRow;
|
|
|
+ } else if (isFunction(props?.lockRow)) {
|
|
|
+ return !props?.lockRow(row);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
columnConfig: { isHover: true, resizable: true },
|
|
|
exportConfig: {},
|
|
|
sortConfig: { trigger: "cell", multiple: true, chronological: true, defaultSort: {}, showIcon: false },
|
|
@@ -720,8 +738,6 @@ const _defineProps = ref({
|
|
|
});
|
|
|
|
|
|
// const propsDefine = Object.assign(_defineProps.value, props.tableProps);
|
|
|
-const propsDefine = defaultsDeep(props.tableProps, _defineProps.value);
|
|
|
-console.log("init propsDefine :>> ", propsDefine);
|
|
|
|
|
|
interface RowVO {
|
|
|
[key: string]: any;
|
|
@@ -751,12 +767,102 @@ const getToolButton = (type: string) => {
|
|
|
return false;
|
|
|
};
|
|
|
|
|
|
+const emit = defineEmits([
|
|
|
+ "afterMounted",
|
|
|
+ "firstMounted",
|
|
|
+ "layoutChange",
|
|
|
+ "keydownStart",
|
|
|
+ "keydown",
|
|
|
+ "keydownEnd",
|
|
|
+ "currentChange",
|
|
|
+ "radioChange",
|
|
|
+ "checkboxChange",
|
|
|
+ "checkboxAll",
|
|
|
+ "checkboxRangeStart",
|
|
|
+ "checkboxRangeChange",
|
|
|
+ "checkboxRangeEnd",
|
|
|
+ "cellClick",
|
|
|
+ "cellDblclick",
|
|
|
+ "cellMenu",
|
|
|
+ "cellMouseenter",
|
|
|
+ "cellMouseleave",
|
|
|
+ "cellDeleteValue",
|
|
|
+ "headerCellClick",
|
|
|
+ "headerCellDblclick",
|
|
|
+ "headerCellMenu",
|
|
|
+ "footerCellClick",
|
|
|
+ "footerCellDblclick",
|
|
|
+ "footerCellMenu",
|
|
|
+ "clearMerge",
|
|
|
+ "sortChange",
|
|
|
+ "clearSort",
|
|
|
+ "filterChange",
|
|
|
+ "filterVisible",
|
|
|
+ "clearFilter",
|
|
|
+ "resizableChange",
|
|
|
+ "toggleRowExpand",
|
|
|
+ "toggleTreeExpand",
|
|
|
+ "menuClick",
|
|
|
+ "cellSelected",
|
|
|
+ "editClosed",
|
|
|
+ "editActivated",
|
|
|
+ "editDisabled",
|
|
|
+ "validError",
|
|
|
+ "scroll",
|
|
|
+ "scrollBoundary",
|
|
|
+ "custom"
|
|
|
+]);
|
|
|
// 表格绑定的事件
|
|
|
const propsEvents = computed(() => {
|
|
|
let defineEv = {
|
|
|
- "resizable-change": handleResizChange,
|
|
|
- "sort-change": handleSortChange,
|
|
|
- "cell-selected": handleCellSelected,
|
|
|
+ keydownStart: (data: any) => emit("keydownStart", data),
|
|
|
+ keydown: (data: any) => emit("keydown", data),
|
|
|
+ keydownEnd: (data: any) => emit("keydownEnd", data),
|
|
|
+ currentChange: (data: any) => emit("currentChange", data),
|
|
|
+ radioChange: (data: any) => emit("radioChange", data),
|
|
|
+ checkboxChange: (data: any) => emit("checkboxChange", data),
|
|
|
+ checkboxAll: (data: any) => emit("checkboxAll", data),
|
|
|
+ checkboxRangeStart: (data: any) => emit("checkboxRangeStart", data),
|
|
|
+ checkboxRangeChange: (data: any) => emit("checkboxRangeChange", data),
|
|
|
+ checkboxRangeEnd: (data: any) => emit("checkboxRangeEnd", data),
|
|
|
+ cellClick: (data: any) => emit("cellClick", data),
|
|
|
+ cellDblclick: (data: any) => emit("cellDblclick", data),
|
|
|
+ cellMenu: (data: any) => emit("cellMenu", data),
|
|
|
+ cellMouseenter: (data: any) => emit("cellMouseenter", data),
|
|
|
+ cellMouseleave: (data: any) => emit("cellMouseleave", data),
|
|
|
+ cellDeleteValue: (data: any) => emit("cellDeleteValue", data),
|
|
|
+ headerCellClick: (data: any) => emit("headerCellClick", data),
|
|
|
+ headerCellDblclick: (data: any) => emit("headerCellDblclick", data),
|
|
|
+ headerCellMenu: (data: any) => emit("headerCellMenu", data),
|
|
|
+ footerCellClick: (data: any) => emit("footerCellClick", data),
|
|
|
+ footerCellDblclick: (data: any) => emit("footerCellDblclick", data),
|
|
|
+ footerCellMenu: (data: any) => emit("footerCellMenu", data),
|
|
|
+ clearMerge: (data: any) => emit("clearMerge", data),
|
|
|
+ sortChange: (data: any) => {
|
|
|
+ handleSortChange(data);
|
|
|
+ emit("sortChange", data);
|
|
|
+ },
|
|
|
+ clearSort: (data: any) => emit("clearSort", data),
|
|
|
+ filterChange: (data: any) => emit("filterChange", data),
|
|
|
+ filterVisible: (data: any) => emit("filterVisible", data),
|
|
|
+ clearFilter: (data: any) => emit("clearFilter", data),
|
|
|
+ resizableChange: (data: any) => {
|
|
|
+ handleResizChange(data);
|
|
|
+ emit("resizableChange", data);
|
|
|
+ },
|
|
|
+ toggleRowExpand: (data: any) => emit("toggleRowExpand", data),
|
|
|
+ toggleTreeExpand: (data: any) => emit("toggleTreeExpand", data),
|
|
|
+ cellSelected: (data: any) => {
|
|
|
+ handleCellSelected(data);
|
|
|
+ emit("cellSelected", data);
|
|
|
+ },
|
|
|
+ editClosed: (data: any) => emit("editClosed", data),
|
|
|
+ editActivated: (data: any) => emit("editActivated", data),
|
|
|
+ editDisabled: (data: any) => emit("editDisabled", data),
|
|
|
+ validError: (data: any) => emit("validError", data),
|
|
|
+ scroll: (data: any) => emit("scroll", data),
|
|
|
+ scrollBoundary: (data: any) => emit("scrollBoundary", data),
|
|
|
+ custom: (data: any) => emit("custom", data),
|
|
|
menuClick({ menu, type, row, rowIndex, column, columnIndex, $event }: any) {
|
|
|
console.log("menu :>> ", menu);
|
|
|
console.log("menu row :>> ", row);
|
|
@@ -851,6 +957,8 @@ const propsEvents = computed(() => {
|
|
|
column && clearSortEvent(column.field);
|
|
|
break;
|
|
|
}
|
|
|
+
|
|
|
+ emit("menuClick", { menu, type, row, rowIndex, column, columnIndex, $event });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -875,10 +983,10 @@ const loadDwLayout = (data: any) => {
|
|
|
|
|
|
console.log("onMounted dwLayout.value :>> ", dwLayout.value);
|
|
|
loadDwLayoutFunc(dwLayout.value);
|
|
|
- tableColumns.value = cloneDeep(props.columns);
|
|
|
+ // tableColumns.value = cloneDeep(props.columns);
|
|
|
console.log("数行化BF,还原个性设置 tableColumns.value :>> ", tableColumns.value);
|
|
|
// 扁平化,并读取个性设置
|
|
|
- flatColumns.value = flatColumnsFunc(tableColumns.value, dwFieldMap);
|
|
|
+ flatColumns.value = flatColumnsFunc(cloneDeep(props.columns), dwFieldMap);
|
|
|
console.log("读取个性设置 flatColumns.value loadDwLayout:>> ", flatColumns.value);
|
|
|
|
|
|
initLayoutColumns();
|
|
@@ -939,6 +1047,49 @@ const TourSteps = [
|
|
|
|
|
|
// 新手指导
|
|
|
const { checkIfNeedGuide } = useTour(t, TourEnum.table, TourSteps);
|
|
|
+import { CommonDynamicSelect } from "@/api/modules/common";
|
|
|
+import { isNumber } from "xe-utils";
|
|
|
+import { isBoolean, isFunction } from "@/utils/is";
|
|
|
+const defaultRequest = (params: any) => {
|
|
|
+ let newParams: any = {};
|
|
|
+ params.pageNum && (newParams.pageindex = params.pageNum);
|
|
|
+ params.pageSize && (newParams.pagesize = params.pageSize);
|
|
|
+ delete params.pageNum;
|
|
|
+ delete params.pageSize;
|
|
|
+ newParams.queryParams = JSON.parse(JSON.stringify(params));
|
|
|
+ console.log("newParams", newParams);
|
|
|
+ let pkeys = Object.keys(newParams.queryParams);
|
|
|
+ console.log("pkeys :>> ", pkeys);
|
|
|
+ let flatSearchColumns = new Map<string, any>();
|
|
|
+ for (let searchCol of searchColumns.value) {
|
|
|
+ flatSearchColumns.set(searchCol.field || "", searchCol);
|
|
|
+ }
|
|
|
+ for (let pk of pkeys) {
|
|
|
+ console.log("pk :>> ", pk);
|
|
|
+ console.log("haspk", flatSearchColumns.has(pk));
|
|
|
+ if (flatSearchColumns.has(pk)) {
|
|
|
+ let searchInfo = flatSearchColumns.get(pk);
|
|
|
+ console.log("searchInfo :>> ", searchInfo);
|
|
|
+ if (searchInfo.search && searchInfo.search.props && searchInfo.search.props.type == "date") {
|
|
|
+ const today = dayjs(dayjs().format("YYYY-MM-DD"));
|
|
|
+ if (isNumber(newParams.queryParams[pk])) {
|
|
|
+ newParams.queryParams[pk] = today.add(newParams.queryParams[pk], "day").format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ newParams.dsname = props.dwname;
|
|
|
+ return CommonDynamicSelect(newParams, newParams.dsname);
|
|
|
+};
|
|
|
+const defaultDataCallback = (data: any) => {
|
|
|
+ return {
|
|
|
+ list: data.datatable,
|
|
|
+ tableinfo: data.tableinfo,
|
|
|
+ total: data.totalcnt,
|
|
|
+ pageNum: data.pageindex,
|
|
|
+ pageSize: data.pagesize
|
|
|
+ };
|
|
|
+};
|
|
|
|
|
|
// 表格操作 Hooks
|
|
|
const {
|
|
@@ -955,10 +1106,10 @@ const {
|
|
|
// handleCurrentChange,
|
|
|
handlePageChange
|
|
|
} = useTable(
|
|
|
- props.requestApi,
|
|
|
+ props.requestApi || defaultRequest,
|
|
|
props.initParam,
|
|
|
props.pagination,
|
|
|
- props.dataCallback,
|
|
|
+ props.dataCallback || defaultDataCallback,
|
|
|
props.requestError,
|
|
|
props.dwname,
|
|
|
curPageSizes,
|
|
@@ -980,10 +1131,7 @@ const defineFooterMethod = ({ columns, data }: any) => {
|
|
|
if (columnIndex === 1) {
|
|
|
return data.length;
|
|
|
}
|
|
|
- if (
|
|
|
- (!props.footerSumAttrs && column.field && column.field.indexOf("qty") > -1) ||
|
|
|
- props.footerSumAttrs?.includes(column.field)
|
|
|
- ) {
|
|
|
+ if ((column.field && column.field.indexOf("qty") > -1) || props.footerSumAttrs?.includes(column.field)) {
|
|
|
let count = 0;
|
|
|
data.forEach((item: any) => {
|
|
|
count = floatAdd(count, isNaN(Number(item[column.field])) ? 0 : Number(item[column.field]));
|
|
@@ -994,13 +1142,45 @@ const defineFooterMethod = ({ columns, data }: any) => {
|
|
|
];
|
|
|
};
|
|
|
|
|
|
+const propsDefine = defaultsDeep(props.tableProps, _defineProps.value);
|
|
|
+
|
|
|
// 表格参数:init
|
|
|
-const tableOptions = reactive<VxeTableProps<RowVO>>({
|
|
|
+const tableOptions = reactive<any>({
|
|
|
showFooter: typeof props.footerMethod != "boolean",
|
|
|
footerMethod: typeof props.footerMethod != "boolean" ? props.footerMethod ?? defineFooterMethod : undefined,
|
|
|
...propsDefine
|
|
|
});
|
|
|
|
|
|
+watch(
|
|
|
+ () => props.editable,
|
|
|
+ (newVal, oldVal) => {
|
|
|
+ tableOptions.editConfig.enabled = newVal;
|
|
|
+ }
|
|
|
+);
|
|
|
+console.log("init propsDefine :>> ", propsDefine);
|
|
|
+
|
|
|
+if (props?.multiSelect != undefined) {
|
|
|
+ tableOptions.checkboxConfig = {
|
|
|
+ range: true,
|
|
|
+ trigger: "cell",
|
|
|
+ highlight: true
|
|
|
+ };
|
|
|
+ tableOptions.checkboxConfig.checkField = props.multiSelect ?? "";
|
|
|
+
|
|
|
+ if (!props.columns.some(c => c.type == "checkbox")) {
|
|
|
+ props.columns.unshift({
|
|
|
+ type: "checkbox",
|
|
|
+ width: 50
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+if (props?.editable) {
|
|
|
+ if (tableOptions.editConfig == undefined) {
|
|
|
+ tableOptions.editConfig = { trigger: "click", mode: "cell" };
|
|
|
+ }
|
|
|
+ tableOptions.editConfig.enabled = props?.editable ?? false;
|
|
|
+}
|
|
|
+
|
|
|
/**表格存储参数 */
|
|
|
const tableprop_save = ref<dwnameSaveLayoutAttr>({
|
|
|
scrollY: {},
|
|
@@ -1013,7 +1193,7 @@ const tableprop_save = ref<dwnameSaveLayoutAttr>({
|
|
|
const isShowSearch = ref(true);
|
|
|
|
|
|
// 是否更新数据
|
|
|
-const isUpdate = ref(false);
|
|
|
+const isUpdate = ref(0);
|
|
|
|
|
|
// 表格 DOM 元素
|
|
|
const tableRef = ref<VxeTableInstance>();
|
|
@@ -1086,7 +1266,8 @@ const {
|
|
|
props.autoLoadLayout,
|
|
|
props.dwname,
|
|
|
loadLayoutCallBack,
|
|
|
- flatColumnsCallBack
|
|
|
+ flatColumnsCallBack,
|
|
|
+ props?.editable
|
|
|
);
|
|
|
|
|
|
/**
|
|
@@ -1341,7 +1522,6 @@ const handleCellSelected = ({ row, rowIndex, $rowIndex, column, columnIndex, $co
|
|
|
// };
|
|
|
// provide("updateSettingColumn", fnUpdateSettingColumn);
|
|
|
// const emit = defineEmits(["update:columns"]);
|
|
|
-const emit = defineEmits(["onMountedData"]);
|
|
|
|
|
|
// const columnStreamlineFunc = (column: any, scrollParam?: any) => {
|
|
|
// let oriColumns = cloneDeep(props.columns);
|
|
@@ -1500,7 +1680,7 @@ const saveColumnsFunc = async (argColumns: any, param: any = {}, online: boolean
|
|
|
console.log("arr :>> ", arr);
|
|
|
// tableColumns.value = arr;
|
|
|
// $table?.reloadColumn(arr);
|
|
|
- // isUpdate.value = !isUpdate.value;
|
|
|
+ // isUpdate.value++;
|
|
|
// console.log("settingConfirm tableColumns.value :>> ", tableColumns.value);
|
|
|
// // 更新个性属性设置数据源
|
|
|
// colSetting = cloneDeep(column);
|
|
@@ -1560,7 +1740,7 @@ const settingConfirm = async (column: any, param: any = {}, updateLocal = true,
|
|
|
|
|
|
tableColumns.value = arr;
|
|
|
$table?.reloadColumn(arr);
|
|
|
- isUpdate.value = !isUpdate.value;
|
|
|
+ isUpdate.value++;
|
|
|
console.log("settingConfirm tableColumns.value :>> ", tableColumns.value);
|
|
|
console.log("warch project newVal settingConfirm tableprop_save.value:>> ", tableprop_save.value);
|
|
|
// 更新个性属性设置数据源
|
|
@@ -1815,7 +1995,7 @@ const initLayoutColumns = () => {
|
|
|
|
|
|
// tableRef.value?.reloadColumn(tableColumns.value);
|
|
|
nextTick(() => {
|
|
|
- isUpdate.value = !isUpdate.value;
|
|
|
+ isUpdate.value++;
|
|
|
});
|
|
|
|
|
|
// 过滤需要搜索的配置项
|
|
@@ -1852,6 +2032,22 @@ const initLayoutColumns = () => {
|
|
|
|
|
|
// 排序搜索表单项
|
|
|
searchColumns.value.sort((a, b) => a.search!.order! - b.search!.order!);
|
|
|
+ emit("layoutChange", tableColumns.value);
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 获取表格数据后,自动执行选中第一行
|
|
|
+ */
|
|
|
+const afterGetData = () => {
|
|
|
+ emit("afterMounted", tableData.value);
|
|
|
+ if (props.autoSelectFirstAfterRefresh && tableData.value.length) {
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value?.setCurrentRow(tableData.value[0]);
|
|
|
+ if (props.tableEvents && "current-change" in props.tableEvents) {
|
|
|
+ props.tableEvents["current-change"]({ newValue: tableData.value[0], row: tableData.value[0] });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 初始化请求
|
|
@@ -1859,28 +2055,22 @@ onMounted(async () => {
|
|
|
await loadLayoutFunc();
|
|
|
|
|
|
initLayoutColumns();
|
|
|
+ console.log("onMounted .ifLoadQueryHabit :>> ", searchParam.value);
|
|
|
|
|
|
if (props.requestAuto) {
|
|
|
getTableList().then(() => {
|
|
|
- emit("onMountedData", tableData.value);
|
|
|
+ emit("firstMounted", tableData.value);
|
|
|
console.log("onMounted tableColumns.value :>> ", tableColumns.value);
|
|
|
|
|
|
nextTick(() => {
|
|
|
+ // 指导
|
|
|
props.toolButton.indexOf("guide") > -1 && checkIfNeedGuide();
|
|
|
-
|
|
|
- props.afterMound && props.afterMound(tableData.value);
|
|
|
- if (props.autoSelectFirstAfterRefresh && tableData.value.length) {
|
|
|
- nextTick(() => {
|
|
|
- tableRef.value?.setCurrentRow(tableData.value[0]);
|
|
|
- if (props.tableEvents && "current-change" in props.tableEvents) {
|
|
|
- props.tableEvents["current-change"]({ newValue: tableData.value[0] });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ afterGetData();
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
- props.afterMound && props.afterMound(tableData.value);
|
|
|
+ emit("firstMounted", tableData.value);
|
|
|
+ afterGetData();
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -1966,10 +2156,12 @@ const saveDefaultLayout = async (column: any, param: any, cb: any) => {
|
|
|
/**
|
|
|
* @description 主动刷新数据
|
|
|
*/
|
|
|
-const refresh = () => {
|
|
|
- getTableList();
|
|
|
+const refresh = async () => {
|
|
|
+ await getTableList();
|
|
|
nextTick(() => {
|
|
|
- isUpdate.value = !isUpdate.value;
|
|
|
+ isUpdate.value++;
|
|
|
+
|
|
|
+ afterGetData();
|
|
|
});
|
|
|
};
|
|
|
|
|
@@ -2444,20 +2636,73 @@ const autoCloseLocation = () => {
|
|
|
// 监听页面 initParam 改化,重新获取表格数据
|
|
|
watch(
|
|
|
() => props.initParam,
|
|
|
- val => {
|
|
|
- Object.assign(searchParam.value, val);
|
|
|
- search();
|
|
|
+ async val => {
|
|
|
+ await search();
|
|
|
+ afterGetData();
|
|
|
},
|
|
|
{ deep: true }
|
|
|
);
|
|
|
|
|
|
+/**
|
|
|
+ * @description vxeTable方法封装
|
|
|
+ */
|
|
|
+const vxeTableEvents = {
|
|
|
+ getTableData: () => tableRef.value?.getTableData(),
|
|
|
+ insertAt: (records: any | any[], row?: any | -1 | 0) => tableRef.value?.insertAt(records, row),
|
|
|
+ setCurrentRow: (params: any) =>
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value?.setCurrentRow(params);
|
|
|
+ }),
|
|
|
+ setRow: (rows: any, record: any) => tableRef.value?.setRow(rows, record),
|
|
|
+ remove: (params: any) => tableRef.value?.remove(params),
|
|
|
+ getCurrentRecord: () => tableRef.value?.getCurrentRecord(),
|
|
|
+ getCheckboxRecords: (isFull: any) => tableRef.value?.getCheckboxRecords(isFull),
|
|
|
+ /**
|
|
|
+ * @description 获取当前勾选/选中的数据,否则自动选择第一条数据
|
|
|
+ */
|
|
|
+ getCurrentRecords: () => {
|
|
|
+ const _records = tableRef.value?.getCheckboxRecords() ?? [];
|
|
|
+ const _cRecords = tableRef.value?.getCurrentRecord() ?? null;
|
|
|
+
|
|
|
+ let curRecords: any[] = [];
|
|
|
+ if (_records.length) {
|
|
|
+ // 获取勾选列表
|
|
|
+ curRecords = _records;
|
|
|
+ } else if (_cRecords) {
|
|
|
+ // 获取当前选中数据
|
|
|
+ curRecords = [_cRecords];
|
|
|
+ } else {
|
|
|
+ // 默认获取第一条记录
|
|
|
+ let visibleData = tableRef.value?.getTableData().visibleData;
|
|
|
+ if (visibleData?.length) {
|
|
|
+ curRecords = [visibleData[0]];
|
|
|
+ tableRef.value?.setCurrentRow(visibleData[0]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return curRecords;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * @description 点击表格外部,关闭编辑状态
|
|
|
+ */
|
|
|
+onClickOutside(tableRef, event => {
|
|
|
+ let ifEdit = tableRef.value.getEditRecord();
|
|
|
+
|
|
|
+ if (ifEdit) {
|
|
|
+ tableRef.value.clearEdit();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
// 暴露给父组件的参数和方法(外部需要什么,都可以从这里暴露出去)
|
|
|
defineExpose({
|
|
|
element: tableRef,
|
|
|
+ ...vxeTableEvents,
|
|
|
tableData,
|
|
|
- pageable,
|
|
|
+ // pageable,
|
|
|
searchParam,
|
|
|
- searchInitParam,
|
|
|
+ // searchInitParam,
|
|
|
tableColumns,
|
|
|
getTableList,
|
|
|
search,
|
|
@@ -2469,10 +2714,11 @@ defineExpose({
|
|
|
openColSetting,
|
|
|
// clearSelection,
|
|
|
enumMap,
|
|
|
- baseEnumMap
|
|
|
+ baseEnumMap,
|
|
|
// isSelected,
|
|
|
// selectedList,
|
|
|
// selectedListIds
|
|
|
+ initLayoutColumns
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -2485,10 +2731,9 @@ defineExpose({
|
|
|
.search-btn.active {
|
|
|
box-shadow: $shadow-1-down-inset;
|
|
|
}
|
|
|
-
|
|
|
.table-main__tool-button {
|
|
|
- margin-left: 12px;
|
|
|
margin-right: 12px;
|
|
|
+ margin-left: 12px;
|
|
|
:deep(.el-button-group) {
|
|
|
.el-button:first-child {
|
|
|
border-top-left-radius: 16px;
|
|
@@ -2509,9 +2754,9 @@ defineExpose({
|
|
|
z-index: 5;
|
|
|
}
|
|
|
.more-btn {
|
|
|
- transform: translateX(70%);
|
|
|
// opacity: 0.68;
|
|
|
transition: all ease-in-out 0.2s;
|
|
|
+ transform: translateX(70%);
|
|
|
}
|
|
|
&:hover {
|
|
|
.more-btn {
|
|
@@ -2527,12 +2772,11 @@ defineExpose({
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.card + .card {
|
|
|
margin-top: $space-b2;
|
|
|
}
|
|
|
|
|
|
-/*滚动条整体部分*/
|
|
|
+/* 滚动条整体部分 */
|
|
|
.lj-vxetable ::-webkit-scrollbar {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
@@ -2560,7 +2804,6 @@ defineExpose({
|
|
|
.tableheader-tabs {
|
|
|
--el-tabs-header-height: 33px;
|
|
|
}
|
|
|
-
|
|
|
.table-box .table-search,
|
|
|
.table-main .table-search {
|
|
|
margin-bottom: 0;
|