|
@@ -1,6 +1,7 @@
|
|
|
<!--
|
|
<!--
|
|
|
* @Descripttion: 数据表格组件
|
|
* @Descripttion: 数据表格组件
|
|
|
* @version: 1.10
|
|
* @version: 1.10
|
|
|
|
|
+ * 待重构
|
|
|
-->
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
@@ -13,7 +14,7 @@
|
|
|
|
|
|
|
|
<!-- table-column / 操作 -->
|
|
<!-- table-column / 操作 -->
|
|
|
<template v-for="(_, slotName) in $slots" #[slotName]="context">
|
|
<template v-for="(_, slotName) in $slots" #[slotName]="context">
|
|
|
- <slot :name="slotName" v-bind="{ ...context, row: XEUtils.get(context, '$grid', XEUtils.get(context, '$table'))?.getData(context.rowIndex) || context.row }"></slot>
|
|
|
|
|
|
|
+ <slot :name="slotName" v-bind="formatScoped(context)"></slot>
|
|
|
</template>
|
|
</template>
|
|
|
</vxe-grid>
|
|
</vxe-grid>
|
|
|
</el-main>
|
|
</el-main>
|
|
@@ -24,17 +25,17 @@
|
|
|
import domZIndex from "dom-zindex";
|
|
import domZIndex from "dom-zindex";
|
|
|
domZIndex.setCurrent(domZIndex.getMax() + 1);
|
|
domZIndex.setCurrent(domZIndex.getMax() + 1);
|
|
|
|
|
|
|
|
|
|
+import VxeUI from "vxe-pc-ui";
|
|
|
import XEUtils from "xe-utils";
|
|
import XEUtils from "xe-utils";
|
|
|
import store from "@/store";
|
|
import store from "@/store";
|
|
|
import config from "@/config/table";
|
|
import config from "@/config/table";
|
|
|
import pagerBatchDel from "./renderer/pager-batch-del";
|
|
import pagerBatchDel from "./renderer/pager-batch-del";
|
|
|
-import { nextTick } from "vue";
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
apiObj: { type: Object, default: () => {} },
|
|
apiObj: { type: Object, default: () => {} },
|
|
|
apiKey: { type: String, default: () => "get" },
|
|
apiKey: { type: String, default: () => "get" },
|
|
|
rowKey: { type: String, default: "id" },
|
|
rowKey: { type: String, default: "id" },
|
|
|
- minHeight: { type: [String, Number], default: 144 },
|
|
|
|
|
|
|
+ minHeight: { type: [String, Number], default: VxeUI.getConfig().table.minHeight || 144 },
|
|
|
maxHeight: { type: [String, Number] },
|
|
maxHeight: { type: [String, Number] },
|
|
|
layouts: { type: Array, default: () => [["Top", "Form"], ["Toolbar", "Table", "Bottom", "Pager"]] },
|
|
layouts: { type: Array, default: () => [["Top", "Form"], ["Toolbar", "Table", "Bottom", "Pager"]] },
|
|
|
checkedRows: { type: Array, default: () => [] },
|
|
checkedRows: { type: Array, default: () => [] },
|
|
@@ -53,8 +54,7 @@ const props = defineProps({
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const xGrid = ref();
|
|
const xGrid = ref();
|
|
|
-const selectedRows = ref([]);
|
|
|
|
|
-const gridOptions = ref({
|
|
|
|
|
|
|
+const gridOptions = reactive({
|
|
|
id: "xGride-table",
|
|
id: "xGride-table",
|
|
|
loading: false,
|
|
loading: false,
|
|
|
minHeight: props.minHeight,
|
|
minHeight: props.minHeight,
|
|
@@ -62,7 +62,7 @@ const gridOptions = ref({
|
|
|
size: "mini",
|
|
size: "mini",
|
|
|
align: "center",
|
|
align: "center",
|
|
|
data: [],
|
|
data: [],
|
|
|
- columns: XEUtils.map(props.columns, item => ({ ...item, [item.type != "seq" && "exportMethod"]: ({ row, column }) => row[column?.field] || "" })),
|
|
|
|
|
|
|
+ columns: props.columns,
|
|
|
showOverflow: true,
|
|
showOverflow: true,
|
|
|
keepSource: true,
|
|
keepSource: true,
|
|
|
layouts: [...props.layouts],
|
|
layouts: [...props.layouts],
|
|
@@ -89,7 +89,7 @@ const gridOptions = ref({
|
|
|
slots: { default: "queryAction" },
|
|
slots: { default: "queryAction" },
|
|
|
className: ({ $grid, item, data }) => {
|
|
className: ({ $grid, item, data }) => {
|
|
|
const showItems = XEUtils.filter(XEUtils.orderBy(XEUtils.get(props, "formConfig.items", []), "orderBy"), formItem => (XEUtils.isUndefined(formItem.visible) || formItem.visible) && (XEUtils.isUndefined(formItem.visibleMethod) || formItem.visibleMethod({ data })));
|
|
const showItems = XEUtils.filter(XEUtils.orderBy(XEUtils.get(props, "formConfig.items", []), "orderBy"), formItem => (XEUtils.isUndefined(formItem.visible) || formItem.visible) && (XEUtils.isUndefined(formItem.visibleMethod) || formItem.visibleMethod({ data })));
|
|
|
- const spanItems = (!gridOptions.value.formConfig.collapseStatus && showItems) || XEUtils.filter(showItems, f_item => !f_item.folding);
|
|
|
|
|
|
|
+ const spanItems = (!gridOptions.formConfig.collapseStatus && showItems) || XEUtils.filter(showItems, f_item => !f_item.folding);
|
|
|
|
|
|
|
|
let spanItemsSum = 0;
|
|
let spanItemsSum = 0;
|
|
|
XEUtils.arrayEach(spanItems, s_item => {
|
|
XEUtils.arrayEach(spanItems, s_item => {
|
|
@@ -140,7 +140,8 @@ const gridOptions = ref({
|
|
|
},
|
|
},
|
|
|
exportConfig: {
|
|
exportConfig: {
|
|
|
types: ["xlsx"],
|
|
types: ["xlsx"],
|
|
|
- modes: XEUtils.find(props.columns, item => XEUtils.includes(config.exportExcludeFields, item.type)) && ["current", "selected", "all"] || ["current", "all"],
|
|
|
|
|
|
|
+ modes: XEUtils.find(props.columns, item => XEUtils.get(item, "visible", true) && XEUtils.includes(config.exportExcludeFields, item.type)) && ["current", "selected", "all"] || ["current", "all"],
|
|
|
|
|
+ columns: XEUtils.filter(props.columns, item => !(XEUtils.includes(config.exportExcludeFields, item.type)) && XEUtils.get(item, "visible", true)),
|
|
|
},
|
|
},
|
|
|
rowConfig: {
|
|
rowConfig: {
|
|
|
keyField: props.rowKey,
|
|
keyField: props.rowKey,
|
|
@@ -157,10 +158,16 @@ const gridOptions = ref({
|
|
|
cellConfig: {
|
|
cellConfig: {
|
|
|
height: 36
|
|
height: 36
|
|
|
},
|
|
},
|
|
|
|
|
+ radioConfig: {
|
|
|
|
|
+ reserve: true, // 是否保留勾选状态
|
|
|
|
|
+ highlight: true,
|
|
|
|
|
+ },
|
|
|
checkboxConfig: {
|
|
checkboxConfig: {
|
|
|
|
|
+ reserve: true, // 是否保留勾选状态
|
|
|
highlight: true,
|
|
highlight: true,
|
|
|
- range: true, // 鼠标在复选框的列内滑动选中或取消指定行
|
|
|
|
|
- isShiftKey: true // 鼠标点击和 shift 键选取指定范围的行
|
|
|
|
|
|
|
+ // 树结构有冲突
|
|
|
|
|
+ range: computed(() => !XEUtils.has(props.options, "treeConfig")), // 鼠标在复选框的列内滑动选中或取消指定行
|
|
|
|
|
+ isShiftKey: computed(() => !XEUtils.has(props.options, "treeConfig")) // 鼠标点击和 shift 键选取指定范围的行
|
|
|
},
|
|
},
|
|
|
tooltipConfig: {
|
|
tooltipConfig: {
|
|
|
enterable: true
|
|
enterable: true
|
|
@@ -189,14 +196,19 @@ const gridOptions = ref({
|
|
|
...props.options
|
|
...props.options
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-watch(() => xGrid.value?.getCheckboxRecords(), val => selectedRows.value = val);
|
|
|
|
|
-watch(() => props.options, val => XEUtils.merge(gridOptions.value, val), { deep: true });
|
|
|
|
|
-watch(() => gridOptions.value.data, val => {
|
|
|
|
|
|
|
+watch(() => props.options, val => XEUtils.merge(gridOptions, val), { deep: true });
|
|
|
|
|
+watch(() => gridOptions.data, val => {
|
|
|
if (props.columns.find(item => item.type == "checkbox" && XEUtils.get(item, "visible", true)) && props.checkedRows.length) {
|
|
if (props.columns.find(item => item.type == "checkbox" && XEUtils.get(item, "visible", true)) && props.checkedRows.length) {
|
|
|
xGrid.value?.setCheckboxRow(props.checkedRows, true);
|
|
xGrid.value?.setCheckboxRow(props.checkedRows, true);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ if (props.columns.find(item => item.type == "radio" && XEUtils.get(item, "visible", true)) && props.checkedRows.length) {
|
|
|
|
|
+ xGrid.value?.setRadioRow(XEUtils.first(props.checkedRows));
|
|
|
|
|
+ }
|
|
|
}, { deep: true });
|
|
}, { deep: true });
|
|
|
|
|
|
|
|
|
|
+const formatScoped = context => ({ ...context, row: XEUtils.get(XEUtils.findTree(XEUtils.get(context, "$grid", XEUtils.get(context, "$table"))?.getData(), item => item.id == context.rowid), "item") || context.row });
|
|
|
|
|
+
|
|
|
addEventListener("resize", () => resizeTable());
|
|
addEventListener("resize", () => resizeTable());
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
resizeTable();
|
|
resizeTable();
|
|
@@ -205,8 +217,8 @@ onMounted(() => {
|
|
|
|
|
|
|
|
const resizeTable = () => {
|
|
const resizeTable = () => {
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
- if (store.state.global.ismobile) XEUtils.set(gridOptions.value, "maxHeight", 1048);
|
|
|
|
|
- else XEUtils.set(gridOptions.value, "maxHeight", (props.maxHeight || xGrid.value?.$el.parentElement.offsetHeight));
|
|
|
|
|
|
|
+ if (store.state.global.ismobile) XEUtils.set(gridOptions, "maxHeight", 1048);
|
|
|
|
|
+ else XEUtils.set(gridOptions, "maxHeight", (props.maxHeight || xGrid.value?.$el.parentElement.offsetHeight) - 12);
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -215,26 +227,26 @@ const getData = () => {
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
if (!props.apiObj) {
|
|
if (!props.apiObj) {
|
|
|
if (props.options.data && props.options.data.length > 0) {
|
|
if (props.options.data && props.options.data.length > 0) {
|
|
|
- gridOptions.value.pagerConfig.total = props.options.data.length;
|
|
|
|
|
|
|
+ gridOptions.pagerConfig.total = props.options.data.length;
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- gridOptions.value.data = [];
|
|
|
|
|
- gridOptions.value.pagerConfig.total = 0;
|
|
|
|
|
|
|
+ gridOptions.data = [];
|
|
|
|
|
+ gridOptions.pagerConfig.total = 0;
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- gridOptions.value.loading = true;
|
|
|
|
|
- const reqData = config.queryData(gridOptions.value, props.paramsColums);
|
|
|
|
|
|
|
+ gridOptions.loading = true;
|
|
|
|
|
+ const reqData = config.queryData(gridOptions, props.paramsColums);
|
|
|
props.apiObj[props.apiKey](reqData).then(res => {
|
|
props.apiObj[props.apiKey](reqData).then(res => {
|
|
|
const response = config.parseData(res);
|
|
const response = config.parseData(res);
|
|
|
- gridOptions.value.data = response.data || [];
|
|
|
|
|
- gridOptions.value.pagerConfig.total = response.total || 0;
|
|
|
|
|
- gridOptions.value.loading = false;
|
|
|
|
|
|
|
+ gridOptions.data = response.data || [];
|
|
|
|
|
+ gridOptions.pagerConfig.total = response.total || 0;
|
|
|
|
|
+ gridOptions.loading = false;
|
|
|
}).catch(error => {
|
|
}).catch(error => {
|
|
|
- gridOptions.value.loading = false;
|
|
|
|
|
- gridOptions.value.data = [];
|
|
|
|
|
- gridOptions.value.pagerConfig.total = 0;
|
|
|
|
|
|
|
+ gridOptions.loading = false;
|
|
|
|
|
+ gridOptions.data = [];
|
|
|
|
|
+ gridOptions.pagerConfig.total = 0;
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -243,7 +255,7 @@ const getAllData = () => {
|
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
|
if (!props.apiObj) resolve([]);
|
|
if (!props.apiObj) resolve([]);
|
|
|
|
|
|
|
|
- const reqData = config.queryExport(gridOptions.value, props.paramsColums);
|
|
|
|
|
|
|
+ const reqData = config.queryExport(gridOptions, props.paramsColums);
|
|
|
props.apiObj[props.apiKey](reqData).then(res => {
|
|
props.apiObj[props.apiKey](reqData).then(res => {
|
|
|
const response = config.parseData(res);
|
|
const response = config.parseData(res);
|
|
|
resolve(response.data || [])
|
|
resolve(response.data || [])
|
|
@@ -252,34 +264,48 @@ const getAllData = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const pageChangeEvent = ({ pageSize, currentPage }) => {
|
|
const pageChangeEvent = ({ pageSize, currentPage }) => {
|
|
|
- gridOptions.value.pagerConfig.currentPage = currentPage;
|
|
|
|
|
- gridOptions.value.pagerConfig.pageSize = pageSize;
|
|
|
|
|
|
|
+ gridOptions.pagerConfig.currentPage = currentPage;
|
|
|
|
|
+ gridOptions.pagerConfig.pageSize = pageSize;
|
|
|
getData();
|
|
getData();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const searchData = (mode = "add") => {
|
|
const searchData = (mode = "add") => {
|
|
|
- if (mode == "add") gridOptions.value.pagerConfig.currentPage = 1;
|
|
|
|
|
- gridOptions.value.pagerConfig.pageSize = config.pageSize;
|
|
|
|
|
|
|
+ if (mode == "add") gridOptions.pagerConfig.currentPage = 1;
|
|
|
|
|
+ gridOptions.pagerConfig.pageSize = config.pageSize;
|
|
|
getData();
|
|
getData();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const resetData = () => {
|
|
const resetData = () => {
|
|
|
- gridOptions.value.pagerConfig.currentPage = 1;
|
|
|
|
|
- gridOptions.value.pagerConfig.pageSize = config.pageSize;
|
|
|
|
|
|
|
+ gridOptions.pagerConfig.currentPage = 1;
|
|
|
|
|
+ gridOptions.pagerConfig.pageSize = config.pageSize;
|
|
|
xGrid.value.resetForm();
|
|
xGrid.value.resetForm();
|
|
|
|
|
|
|
|
getData();
|
|
getData();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-const formCollapseEvent = ({ collapse }) => gridOptions.value.formConfig.collapseStatus = collapse;
|
|
|
|
|
|
|
+const getSelectRows = () => {
|
|
|
|
|
+ if (props.columns.find(item => item.type == "checkbox" && XEUtils.get(item, "visible", true))) {
|
|
|
|
|
+ const selectRecords = xGrid.value?.getCheckboxRecords();
|
|
|
|
|
+ const selectReserveRecords = xGrid.value?.getCheckboxReserveRecords();
|
|
|
|
|
+ return selectRecords.concat(selectReserveRecords);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (props.columns.find(item => item.type == "radio" && XEUtils.get(item, "visible", true))) {
|
|
|
|
|
+ const currRow = xGrid.value?.getRadioRecord();
|
|
|
|
|
+ const currReserveRow = xGrid.value?.getRadioReserveRecord();
|
|
|
|
|
+ return [currRow || currReserveRow];
|
|
|
|
|
+ }
|
|
|
|
|
+ return [];
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
-const toggleTableLoading = value => gridOptions.value.loading = value;
|
|
|
|
|
|
|
+const formCollapseEvent = ({ collapse }) => gridOptions.formConfig.collapseStatus = collapse;
|
|
|
|
|
|
|
|
-const toggleFormEnabled = () => gridOptions.value.formConfig.enabled = !gridOptions.value.formConfig.enabled;
|
|
|
|
|
|
|
+const toggleTableLoading = value => gridOptions.loading = value;
|
|
|
|
|
+
|
|
|
|
|
+const toggleFormEnabled = () => gridOptions.formConfig.enabled = !gridOptions.formConfig.enabled;
|
|
|
|
|
|
|
|
const toggleTableExpand = () => xGrid.value.getTreeExpandRecords().length && xGrid.value.clearTreeExpand() || xGrid.value.setAllTreeExpand(true);
|
|
const toggleTableExpand = () => xGrid.value.getTreeExpandRecords().length && xGrid.value.clearTreeExpand() || xGrid.value.setAllTreeExpand(true);
|
|
|
|
|
|
|
|
-const toggleToolbarProps = obj => XEUtils.objectEach(obj, (value, key) => XEUtils.set(gridOptions.value.toolbarConfig, key, value));
|
|
|
|
|
|
|
+const toggleToolbarProps = obj => XEUtils.objectEach(obj, (value, key) => XEUtils.set(gridOptions.toolbarConfig, key, value));
|
|
|
|
|
|
|
|
const reloadColumn = columns => xGrid.value.reloadColumn(columns);
|
|
const reloadColumn = columns => xGrid.value.reloadColumn(columns);
|
|
|
|
|
|
|
@@ -297,11 +323,11 @@ const table_batch_del = ids => {
|
|
|
ElMessage.success("操作成功");
|
|
ElMessage.success("操作成功");
|
|
|
getData();
|
|
getData();
|
|
|
});
|
|
});
|
|
|
- });
|
|
|
|
|
|
|
+ }).catch(() => {});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
defineExpose({
|
|
defineExpose({
|
|
|
- selectedRows,
|
|
|
|
|
|
|
+ getSelectRows,
|
|
|
toggleTableLoading,
|
|
toggleTableLoading,
|
|
|
toggleFormEnabled,
|
|
toggleFormEnabled,
|
|
|
toggleTableExpand,
|
|
toggleTableExpand,
|