<template>
<div class="com-table">
<div class="header">
<slot name="header">
<div>
<el-button class="add_btn" size="small" type="success" @click="onAdd">{{ $t('message.form.add') }}</el-button>
<el-button size="small" type="danger" class="ml10 del_btn" @click="onBatDel">{{ $t('message.form.delete') }}</el-button>
</div>
<div class="layout-flex">
<ui-form v-bind="searchForm" :modelValue="queryParams" @updateQueryParams="updateQueryParams"></ui-form>
<el-button size="small" type="primary" class="ml10 search_btn" @click="handleSearch">
<el-icon>
<elementSearch />
</el-icon>
{{ $t('message.form.search') }}
</el-button>
</div>
</slot>
</div>
<el-table
class="table"
style="width: 100%"
:rowKey="rowKey"
:data="tableData"
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
:header-cell-style="headerCellStyle"
>
<el-table-column v-if="showSelectColumn" type="selection" width="40" />
<el-table-column v-if="showIndexColumn" type="index" :index="handleIndex" width="60" label="序号" align="center"></el-table-column>
<template v-for="item in colList" :key="item.colName">
<el-table-column v-bind="item" align="left" :show-overflow-tooltip="item.overTip ?? true" :fixed="item.fixed" :sortable="item.sort">
<template #default="scope">
<slot :name="item.colName" :row="scope.row">{{ scope.row[item.colName] }}</slot>
</template>
</el-table-column>
</template>
</el-table>
<div class="footer">
<slot name="footer">
<el-pagination
background
:currentPage="currPage"
:page-size="pageSize"
:page-sizes="[10, 50, 100, 500]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, computed } from 'vue';
import UiForm from '/@/components/uiForm/index';
import { useStore } from '/@/store/index';
import { useRoute } from 'vue-router';
export default defineComponent({
components: {
UiForm,
},
props: {
tableData: {
type: Array,
required: true,
},
rowKey: {
type: String,
},
sortVal: {
type: Object,
default: {
prop: 'createTime',
},
},
headerCellStyle: {
type: Object,
},
colList: {
type: Array,
required: true,
},
queryParams: {
type: Object,
default: {
currPage: 1,
pageSize: 10,
totalCount: 0,
totalPage: 0,
},
},
searchForm: {
type: Object,
},
showIndexColumn: {
type: Boolean,
default: false,
},
showSelectColumn: {
type: Boolean,
default: false,
},
currPage: {
type: Number,
default: 1,
},
pageSize: {
type: Number,
default: 10,
},
total: {
type: Number,
default: 0,
},
},
emits: ['selectionChange', 'paramsChange', 'updateQueryParams', 'btnAdd', 'batDel', 'sortChange'],
setup(props, { emit }) {
console.log(props);
const formData = ref({ ...props.queryParams });
const store = useStore();
const route = useRoute();
// 通过深度侦听formData的值，改变数据时通过emit告诉父组件数据的更新
// 实现组件的双向绑定
console.log('查询表单', formData, props);
watch(
() => formData.value,
(newValue) => {
console.log('表单监听', newValue);
emit('updateQueryParams', newValue);
},
{
deep: true,
}
);
const handleIndex = (index: Number) => {
return (props.currPage - 1) * props.pageSize + index + 1;
};
const handleSelectionChange = (val: any) => {
console.log(val);
emit('selectionChange', val);
};
function handleSortChange(val: any) {
emit('sortChange', val);
}
const handleSizeChange = (pageSize: number) => {
emit('paramsChange', { currPage: props.currPage, pageSize: pageSize });
};
const handleCurrentChange = (currentPage: number) => {
emit('paramsChange', { currPage: currentPage, pageSize: props.pageSize });
};
const handleSearch = () => {
emit('paramsChange', props.queryParams);
};
const updateQueryParams = (val) => {
console.log('查询参数', val);
emit('updateQueryParams', val);
};
const onAdd = () => {
emit('btnAdd');
};
const onBatDel = () => {
emit('batDel');
};
return {
handleIndex,
handleSelectionChange,
handleSizeChange,
handleCurrentChange,
handleSearch,
updateQueryParams,
handleSortChange,
onAdd,
route,
onBatDel,
};
},
});
</script>
<style lang="scss" scoped>
.com-table {
width: 100%;
}
.header {
margin-bottom: 15px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer {
margin-top: 10px;
width: 100%;
}
.flatType {
color: #fff;
span {
cursor: pointer;
}
}
.softTitle {
display: flex;
align-items: center;
width: 10rem;
color: #4a4a4a;
font-family: PingFang-SC-Heavy;
.softIcon {
width: 1.375rem;
height: 1.4375rem;
background: url(#{$static-domain}/cubemagic/img/icon/softIcon.jpg) no-repeat;
background-size: 100% 100% !important;
margin-right: 0.625rem;
}
.softs {
font-size: 18px;
}
}
</style>