|
|
@@ -16,8 +16,7 @@
|
|
|
</template>
|
|
|
</el-dropdown>
|
|
|
<SvgIcon v-if="!config.hidePrint" name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />
|
|
|
- <el-popover v-if="!config.hideSet" placement="bottom-end" trigger="click" transition="el-zoom-in-top" popper-class="table-tool-popper"
|
|
|
- :width="300" :persistent="false" @show="onSetTable">
|
|
|
+ <el-popover v-if="!config.hideSet" placement="bottom-end" trigger="click" transition="el-zoom-in-top" popper-class="table-tool-popper" :width="300" :persistent="false" @show="onSetTable">
|
|
|
<template #reference>
|
|
|
<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
|
|
|
</template>
|
|
|
@@ -26,19 +25,15 @@
|
|
|
<el-tooltip content="拖动进行排序" placement="top-start">
|
|
|
<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
|
|
|
</el-tooltip>
|
|
|
- <el-checkbox v-model="state.checkListAll" :indeterminate="state.checkListIndeterminate"
|
|
|
- class="ml10 mr1" label="列显示" @change="onCheckAllChange" />
|
|
|
+ <el-checkbox v-model="state.checkListAll" :indeterminate="state.checkListIndeterminate" class="ml10 mr1" label="列显示" @change="onCheckAllChange" />
|
|
|
<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
|
|
|
- <el-checkbox v-if="getConfig.showSelection" v-model="getConfig.isSelection" class="ml12 mr1"
|
|
|
- label="多选" />
|
|
|
+ <el-checkbox v-if="getConfig.showSelection" v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
|
|
|
</div>
|
|
|
<el-scrollbar>
|
|
|
<div ref="toolSetRef" class="tool-sortable">
|
|
|
- <div class="tool-sortable-item" v-for="v in columns" :key="v.prop"
|
|
|
- v-show="!v.hideCheck && !v.fixed" :data-key="v.prop">
|
|
|
+ <div class="tool-sortable-item" v-for="v in columns" :key="v.prop" v-show="!v.hideCheck && !v.fixed" :data-key="v.prop">
|
|
|
<i class="fa fa-arrows-alt handle cursor-pointer"></i>
|
|
|
- <el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.label"
|
|
|
- @change="onCheckChange" />
|
|
|
+ <el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.label" @change="onCheckChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
@@ -46,51 +41,67 @@
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-table ref="tableRef" :data="state.data" :border="setBorder" :stripe="setStripe" v-bind="$attrs" row-key="id"
|
|
|
- default-expand-all style="width: 100%" v-loading="state.loading" :default-sort="defaultSort"
|
|
|
- @selection-change="onSelectionChange" @sort-change="sortChange">
|
|
|
- <el-table-column type="selection" :reserve-selection="true" :width="30"
|
|
|
- v-if="config.isSelection && config.showSelection" />
|
|
|
+ <el-table
|
|
|
+ ref="tableRef"
|
|
|
+ :data="state.data"
|
|
|
+ :border="setBorder"
|
|
|
+ :stripe="setStripe"
|
|
|
+ v-bind="$attrs"
|
|
|
+ row-key="id"
|
|
|
+ default-expand-all
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="state.loading"
|
|
|
+ :default-sort="defaultSort"
|
|
|
+ @selection-change="onSelectionChange"
|
|
|
+ @sort-change="sortChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" :reserve-selection="true" :width="30" v-if="config.isSelection && config.showSelection" />
|
|
|
<el-table-column type="index" label="序号" align="center" :width="60" v-if="config.isSerialNo" />
|
|
|
<el-table-column v-for="(item, index) in setHeader" :key="index" v-bind="item">
|
|
|
<!-- 自定义列插槽,插槽名为columns属性的prop -->
|
|
|
- <template #default="scope" v-if="(!item.children) && $slots[item.prop]">
|
|
|
- <formatter v-if="item.formatter" :fn="item.formatter(scope.row,scope.column,scope.cellValue,scope.index)">
|
|
|
- </formatter>
|
|
|
+ <template #default="scope" v-if="!item.children && $slots[item.prop]">
|
|
|
+ <formatter v-if="item.formatter" :fn="item.formatter(scope.row, scope.column, scope.cellValue, scope.index)"> </formatter>
|
|
|
<slot v-else :name="item.prop" v-bind="scope"></slot>
|
|
|
</template>
|
|
|
<template v-else-if="!item.children" v-slot="scope">
|
|
|
- <formatter v-if="item.formatter" :fn="item.formatter(scope.row,scope.column,scope.cellValue,scope.index)">
|
|
|
- </formatter>
|
|
|
+ <formatter v-if="item.formatter" :fn="item.formatter(scope.row, scope.column, scope.cellValue, scope.index)"> </formatter>
|
|
|
<!-- <span v-if="item.formatter">{{ item.formatter(scope.row,scope.column,scope.cellValue,scope.index) }}</span> -->
|
|
|
<template v-else-if="item.type === 'image'">
|
|
|
- <el-image :style="{ width: `${item.width}px`, height: `${item.height}px` }"
|
|
|
- :src="scope.row[item.prop]" :zoom-rate="1.2" :preview-src-list="[scope.row[item.prop]]"
|
|
|
- preview-teleported fit="cover" />
|
|
|
+ <el-image
|
|
|
+ :style="{ width: `${item.width}px`, height: `${item.height}px` }"
|
|
|
+ :src="scope.row[item.prop]"
|
|
|
+ :zoom-rate="1.2"
|
|
|
+ :preview-src-list="[scope.row[item.prop]]"
|
|
|
+ preview-teleported
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- {{ getProperty(scope.row,item.prop) }}
|
|
|
+ {{ getProperty(scope.row, item.prop) }}
|
|
|
</template>
|
|
|
</template>
|
|
|
<el-table-column v-for="(childrenItem, childrenIndex) in item.children" :key="childrenIndex" v-bind="childrenItem">
|
|
|
<!-- 自定义列插槽,插槽名为columns属性的prop -->
|
|
|
<template #default="scope" v-if="$slots[childrenItem.prop]">
|
|
|
- <formatter v-if="childrenItem.formatter" :fn="childrenItem.formatter(scope.row,scope.column,scope.cellValue,scope.index)">
|
|
|
- </formatter>
|
|
|
+ <formatter v-if="childrenItem.formatter" :fn="childrenItem.formatter(scope.row, scope.column, scope.cellValue, scope.index)"> </formatter>
|
|
|
<!-- <span v-if="childrenItem.formatter">{{ childrenItem.formatter(scope.row,scope.column,scope.cellValue,scope.index) }}</span> -->
|
|
|
<slot v-else :name="childrenItem.prop" v-bind="scope"></slot>
|
|
|
</template>
|
|
|
<template v-else v-slot="scope">
|
|
|
- <formatter v-if="childrenItem.formatter" :fn="childrenItem.formatter(scope.row,scope.column,scope.cellValue,scope.index)">
|
|
|
- </formatter>
|
|
|
+ <formatter v-if="childrenItem.formatter" :fn="childrenItem.formatter(scope.row, scope.column, scope.cellValue, scope.index)"> </formatter>
|
|
|
<!-- <span v-if="childrenItem.formatter">{{ childrenItem.formatter(scope.row,scope.column,scope.cellValue,scope.index) }}</span> -->
|
|
|
<template v-else-if="childrenItem.type === 'image'">
|
|
|
- <el-image :style="{ width: `${childrenItem.width}px`, height: `${childrenItem.height}px` }"
|
|
|
- :src="scope.row[childrenItem.prop]" :zoom-rate="1.2" :preview-src-list="[scope.row[childrenItem.prop]]"
|
|
|
- preview-teleported fit="cover" />
|
|
|
+ <el-image
|
|
|
+ :style="{ width: `${childrenItem.width}px`, height: `${childrenItem.height}px` }"
|
|
|
+ :src="scope.row[childrenItem.prop]"
|
|
|
+ :zoom-rate="1.2"
|
|
|
+ :preview-src-list="[scope.row[childrenItem.prop]]"
|
|
|
+ preview-teleported
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- {{ getProperty(scope.row,childrenItem.prop) }}
|
|
|
+ {{ getProperty(scope.row, childrenItem.prop) }}
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -100,10 +111,18 @@
|
|
|
</template>
|
|
|
</el-table>
|
|
|
<div v-if="!config.hidePagination && state.showPagination" class="table-footer mt15">
|
|
|
- <el-pagination v-model:current-page="state.page.page" v-model:page-size="state.page.pageSize" small
|
|
|
- :pager-count="5" :page-sizes="config.pageSizes" :total="state.total"
|
|
|
- layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
|
|
|
- @current-change="onHandleCurrentChange">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="state.page.page"
|
|
|
+ v-model:page-size="state.page.pageSize"
|
|
|
+ small
|
|
|
+ :pager-count="5"
|
|
|
+ :page-sizes="config.pageSizes"
|
|
|
+ :total="state.total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ background
|
|
|
+ @size-change="onHandleSizeChange"
|
|
|
+ @current-change="onHandleCurrentChange"
|
|
|
+ >
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -135,17 +154,17 @@ const props = defineProps({
|
|
|
// 配置项:isBorder-是否显示表格边框,isSerialNo-是否显示表格序号,showSelection-是否显示表格可多选,isSelection-是否默认选中表格多选,pageSize-每页条数,hideExport-是否隐藏导出按钮,exportFileName-导出表格的文件名,空值默认用应用名称作为文件名
|
|
|
config: {
|
|
|
type: Object,
|
|
|
- default: () => { },
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
// 筛选参数
|
|
|
param: {
|
|
|
type: Object,
|
|
|
- default: () => { },
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
// 默认排序方式,{prop:"排序字段",order:"ascending or descending"}
|
|
|
defaultSort: {
|
|
|
type: Object,
|
|
|
- default: () => { },
|
|
|
+ default: () => {},
|
|
|
},
|
|
|
// 导出报表自定义数据转换方法,不传按字段值导出
|
|
|
exportChangeData: {
|
|
|
@@ -183,14 +202,14 @@ const state = reactive({
|
|
|
checkListIndeterminate: false,
|
|
|
});
|
|
|
|
|
|
-const getProperty=(obj, property)=> {
|
|
|
- const keys = property.split('.');
|
|
|
- let value = obj;
|
|
|
- for (const key of keys) {
|
|
|
- value = value[key];
|
|
|
- }
|
|
|
- return value;
|
|
|
- }
|
|
|
+const getProperty = (obj, property) => {
|
|
|
+ const keys = property.split('.');
|
|
|
+ let value = obj;
|
|
|
+ for (const key of keys) {
|
|
|
+ value = value[key];
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+};
|
|
|
|
|
|
// 设置边框显示/隐藏
|
|
|
const setBorder = computed(() => {
|
|
|
@@ -209,7 +228,7 @@ const setHeader = computed(() => {
|
|
|
return props.columns.filter((v) => v.isCheck);
|
|
|
});
|
|
|
// tool 列显示全选改变时
|
|
|
-const onCheckAllChange = <T>(val: T) => {
|
|
|
+const onCheckAllChange = <T,>(val: T) => {
|
|
|
if (val) props.columns.forEach((v) => (v.isCheck = true));
|
|
|
else props.columns.forEach((v) => (v.isCheck = false));
|
|
|
state.checkListIndeterminate = false;
|
|
|
@@ -291,7 +310,7 @@ const onPrintTable = () => {
|
|
|
let tableTd: any = {};
|
|
|
// 表头
|
|
|
setHeader.value.forEach((v: any) => {
|
|
|
- if (v.prop === "action") {
|
|
|
+ if (v.prop === 'action') {
|
|
|
return;
|
|
|
}
|
|
|
tableTh += `<th class="table-th">${v.label}</th>`;
|
|
|
@@ -300,7 +319,7 @@ const onPrintTable = () => {
|
|
|
state.data.forEach((val: any, key: any) => {
|
|
|
if (!tableTd[key]) tableTd[key] = [];
|
|
|
setHeader.value.forEach((v: any) => {
|
|
|
- if (v.prop === "action") {
|
|
|
+ if (v.prop === 'action') {
|
|
|
return;
|
|
|
}
|
|
|
if (v.type === 'text') {
|
|
|
@@ -309,7 +328,7 @@ const onPrintTable = () => {
|
|
|
tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.prop]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
|
|
|
} else {
|
|
|
tableTd[key].push(`<td class="table-th table-center">${val[v.prop]}</td>`);
|
|
|
- }
|
|
|
+ }
|
|
|
});
|
|
|
tableTrTd += `<tr>${tableTd[key].join('')}</tr>`;
|
|
|
});
|
|
|
@@ -350,7 +369,7 @@ const handleList = async () => {
|
|
|
state.loading = true;
|
|
|
let param = Object.assign({}, props.param, { ...state.page });
|
|
|
// Object.keys(param).forEach((key) => !param[key] && delete param[key]);
|
|
|
- Object.keys(param).forEach((key) => (param[key] === undefined) && delete param[key]);
|
|
|
+ Object.keys(param).forEach((key) => param[key] === undefined && delete param[key]);
|
|
|
const res = await props.getData(param);
|
|
|
state.loading = false;
|
|
|
if (res && res.result && res.result.items) {
|
|
|
@@ -359,7 +378,7 @@ const handleList = async () => {
|
|
|
state.total = res.result?.total ?? 0;
|
|
|
} else {
|
|
|
state.showPagination = false;
|
|
|
- state.data = (res && res.result) ? res.result : [];
|
|
|
+ state.data = res && res.result ? res.result : [];
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -369,10 +388,11 @@ const toggleSelection = (row: any, statu?: boolean) => {
|
|
|
|
|
|
const getTableData = () => {
|
|
|
return state.data;
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const setTableData = (data: Array<EmptyObjectType>, add: boolean = false) => {
|
|
|
- if (add) { // 追加
|
|
|
+ if (add) {
|
|
|
+ // 追加
|
|
|
//去重
|
|
|
var repeat = false;
|
|
|
for (let newItem of data) {
|
|
|
@@ -390,7 +410,7 @@ const setTableData = (data: Array<EmptyObjectType>, add: boolean = false) => {
|
|
|
} else {
|
|
|
state.data = data;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
if (props.defaultSort) {
|