|
|
@@ -14,9 +14,11 @@
|
|
|
<el-dropdown-item @click="onImportTableAll">导出全部数据</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
- <SvgIcon name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />
|
|
|
+
|
|
|
</el-dropdown>
|
|
|
- <el-popover placement="top-end" trigger="click" transition="el-zoom-in-top" popper-class="table-tool-popper" :width="300" :persistent="false" @show="onSetTable">
|
|
|
+ <SvgIcon v-if="!config.hidePrint" name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />
|
|
|
+ <el-popover 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>
|
|
|
@@ -25,15 +27,19 @@
|
|
|
<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>
|
|
|
@@ -41,21 +47,11 @@
|
|
|
</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 -->
|
|
|
@@ -64,14 +60,9 @@
|
|
|
</template>
|
|
|
<template v-else v-slot="scope">
|
|
|
<template v-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>
|
|
|
{{ scope.row[item.prop] }}
|
|
|
@@ -83,18 +74,10 @@
|
|
|
</template>
|
|
|
</el-table>
|
|
|
<div v-if="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="[10, 30, 50, 100]"
|
|
|
- :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="[10, 30, 50, 100]" :total="state.total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
|
|
|
+ @current-change="onHandleCurrentChange">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -125,17 +108,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: {
|
|
|
@@ -271,17 +254,23 @@ const onPrintTable = () => {
|
|
|
let tableTrTd = '';
|
|
|
let tableTd: any = {};
|
|
|
// 表头
|
|
|
- props.header.forEach((v: any) => {
|
|
|
- tableTh += `<th class="table-th">${v.title}</th>`;
|
|
|
+ props?.columns.forEach((v: any) => {
|
|
|
+ if (v.prop === "action") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ tableTh += `<th class="table-th">${v.label}</th>`;
|
|
|
});
|
|
|
// 表格内容
|
|
|
- props.data.forEach((val: any, key: any) => {
|
|
|
+ state.data.forEach((val: any, key: any) => {
|
|
|
if (!tableTd[key]) tableTd[key] = [];
|
|
|
- props.header.forEach((v: any) => {
|
|
|
+ props.columns.forEach((v: any) => {
|
|
|
+ if (v.prop === "action") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (v.type === 'text') {
|
|
|
- tableTd[key].push(`<td class="table-th table-center">${val[v.key]}</td>`);
|
|
|
+ tableTd[key].push(`<td class="table-th table-center">${val[v.prop]}</td>`);
|
|
|
} else if (v.type === 'image') {
|
|
|
- tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.key]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
|
|
|
+ tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.prop]}" style="width:${v.width}px;height:${v.height}px;"/></td>`);
|
|
|
}
|
|
|
});
|
|
|
tableTrTd += `<tr>${tableTd[key].join('')}</tr>`;
|
zuohuaijun