<template>
<div class="tableBox">
<div class="btn-add">
<a-space>
<a-upload v-model:file-list="fileList" v-if="hasImport" name="file" accept=".xls,.xlsx"
action="" :headers="headers" @change="handleChange">
<a-button type="primary"> 导入 </a-button>
</a-upload>
<a-button type="primary" v-if="hasExport" @click="handleAllExport">导出全部</a-button>
<a-button type="primary" v-if="allDel">全部删除</a-button>
<a-button :disabled=" === 0 || flagselectedRowKeys" v-if="rowSelection"
@click="delEvent(selecrowdata, 'many')">批量删除</a-button>
<a-button :disabled=" === 0 || flagselectedRowKeys" v-if="markread"
@click="handleFlagRead(selecrowdata, 'hasread')">标记已读</a-button>
<a-button type="primary" v-if="operatingButton?.addbtn" @click="editEvent('add')">{{addbtnName?addbtnName:'添加'}}</a-button>
<a-button type="primary" v-if="hasgoback" @click="handlegoback">返回</a-button>
</a-space>
</div>
<a-table :dataSource="dataSource" :columns="columns" :loading="loading" :scroll="{ x: }"
:expandIconColumnIndex="" :expandIconAsCell=""
@expand="handleexpand" @expandedRowsChange="expandedRowsChange" :row-selection="rowSelection || markread || rowSelection2
? { ...objrowSelection }
: null
" :pagination="pagination ? : false">
<template #bodyCell="{ column, record, index }">
<slot name="customtable" :column="column" :record="record"></slot>
<template v-if=" === 'operation'">
<span>
<slot name="operation" :column="column" :record="record"></slot>
<a @click="editEvent('download', record)" v-if="operatingButton?.reportdownload">
报表下载</a>
<a-divider type="vertical" v-if="dividerbutton?.reportdownload" />
<a @click="editEvent('detail', record)" v-if="operatingButton?.detail">
查看</a>
<a-divider type="vertical" v-if="dividerbutton?.detail" />
<a @click="editEvent('edit', record)" v-if="operatingButton?.edit">修改</a>
<a-divider type="vertical" v-if="dividerbutton?.edit" />
<a @click="delEvent(record)" v-if="operatingButton?.del" style="color: red">删除</a>
<a-divider type="vertical" v-if="dividerbutton?.del" />
</span>
</template>
<template v-if=" === 'index'">
<span>{{
`${( - 1) * +
index +
1
}`
}}</span>
</template>
<template v-if=" === && ">
<span :style="{
color:
? objTypecolor[record[]]
: null,
}">{{ objType[record[]] }}</span>
<!-- <span :style="{color:`#FF0000`}">{{
objType[record[]]
}}</span> -->
</template>
<template v-if=" === obj2Type?.typeName && obj2Type?.isshow">
<span>{{ obj2Type[record[]] }}</span>
</template>
</template>
</a-table>
</div>
</template>
<script setup>
import { reactive, ref, watch, toRefs } from "vue";
const props = defineProps({
addbtnName: {
type: String,
default: ''
},
operatingButton: {
//操作按钮
reportdownload: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: true,
},
del: {
type: Boolean,
default: true,
},
detail: {
type: Boolean,
default: false,
},
},
dividerbutton: {
//操作按钮之间的分割线
reportdownload: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: true,
},
del: {
type: Boolean,
default: false,
},
detail: {
type: Boolean,
default: false,
},
},
allDel: {
//按钮：全部删除
type: Boolean,
default: false,
},
columns: {
//表格表头
type: Array,
default: [],
},
formessagedivider: {
type: Boolean,
default: false,
},
hasImport: {
//按钮：导入
type: Boolean,
default: false,
},
hasExport: {
//按钮：导出
type: Boolean,
default: false,
},
markread: {
// 按钮：标记已读
type: Boolean,
default: false,
},
hasDetail: {
//表格详情
type: Boolean,
default: false,
},
tableOtherobj: {
type: Object,
default: {
// hasAddbtn: true,// 表格上是否有添加按钮
// hasDetail: false,//操作中是否有详情
scroll: false, //表格是否有横向滚动，以及x,方向的 值是多少 number
actionwidth: "120",
},
},
hasedit: {
//表格修改
type: Boolean,
default: true,
},
hasdel: {
//表格删除
type: Boolean,
default: true,
},
hasseeprocess: {
//表格查看过程
type: Boolean,
default: false,
},
pagination: {
//分页
type: Boolean,
default: true,
},
// 是否有批量操作
rowSelection: {
type: Boolean,
default: false,
},
rowSelection2: {
// 是否可以选择
type: Boolean,
default: false,
},
hasgoback: {
//返回按钮
type: Boolean,
default: false,
},
searchkey: {
// 查询的字段
type: Object,
default: {},
},
objType: {
//后台返回摸个字段，不能直接显示，而是根据不同值显示对应的其他内容
type: Object,
default: {
isshow: false, //是否显示
typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'
1: "公司级",
2: "部门级",
},
},
obj2Type: {
//页面需要两个字段都用枚举时
type: Object,
default: {
isshow: false, //是否显示
typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'
1: "公司级",
2: "部门级",
},
},
objTypecolor: {
type: Object,
default: {
isshow: false, //是否显示
typeName: "monitorDataReportType", // 属性值 '需要设置颜色的字段'
day: "#FF0000",
month: "#FFFF00",
},
},
expandIconSet: {
// 表格嵌套时，那个控制的展开折叠图表的位置
type: Object,
default: {
expandIconColumnIndex: 2, //想让展开图标放在第几列
expandIconAsCell: false, 想让展开图标放在第几列 设置的配套属性
},
},
loading: false, //表格loading
});
const {
objTypecolor,
obj2Type,
operatingButton,
dividerbutton,
formessagedivider,
markread,
columns,
hasImport,
hasExport,
hasDetail,
tableOtherobj,
hasedit,
hasdel,
hasseeprocess,
pagination,
rowSelection,
hasgoback,
searchkey,
objType,
expandIconSet,
} = toRefs(props);
// 发送给父组件的方法
const emits = defineEmits([
"openModel",
"handleDelTable",
"getData",
"FlagRead",
"handleTableRowSelec",
"exportXlsx",
"importXlsx",
]);
// 批量删除
let flagselectedRowKeys = ref(true);
let selecrowdata = ref();
const objrowSelection = {
// selectedRowKeys: selectedRowKeys,
//selectedRowKeys 选中行的datasource 中元素key的值； selectedRows为所选元素中datasource 是一个数组。
onChange: (selectedRowKeys, selectedRows) => {
let falg = selectedRowKeys.length ? false : true;
flagselectedRowKeys.value = falg;
selecrowdata.value = [...selectedRowKeys];
// (`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
emits("handleTableRowSelec", selectedRowKeys, selectedRows);
},
};
// 返回
const handlegoback = () => {
history.back();
};
// 操作
const editEvent = (param1, param2) => {
emits("openModel", param1, param2);
};
const delEvent = (param1, param2) => {
emits("handleDelTable", param1);
};
const handleFlagRead = () => {
emits("FlagRead", selecrowdata);
};
// 分页方法
let objArray = reactive({
// 请求参数
searchParams: {},
// 分页信息
pagination: {
current: 1,
total: 0,
pageSize: 25,
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`,
pageSizeOptions: ['1',"15", "20", "25", "30", "40"],
onChange: (page, pageSize) => {
handleSizeChange(page, pageSize);
},
},
// 批量选中
selectedRowKeys: [],
// 选中的行数据
selectedRows: [],
});
const handleSizeChange = (page, pageSize) => {
if (objArray.pagination.pageSize != pageSize) {
objArray.pagination.current = 1;
objArray.pagination.pageSize = pageSize;
} else {
objArray.pagination.current = page;
}
emits("getData", props.searchkey, objArray.pagination);
};
// 嵌套子表格
const handleexpand = (expanded, record) => {
console.log(expanded, record, "expanded, record");
};
const expandedRowsChange = (expandedRows) => {
console.log(expandedRows, "expandedRows");
};
// 导出全部
const handleAllExport = () => {
emits("exportXlsx");
};
// 导入
const headers = {
authorization: "authorization-text",
};
const fileList = ref([]);
const handleChange = (info) => {
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
if (info.file.status === "done") {
message.success(`${} file uploaded successfully`);
} else if (info.file.status === "error") {
message.error(`${} file upload failed.`);
}
emits("importXlsx", info);
};
const handleImportant = () => { };
const dataSource = ref([]);
const getData = (data, total) => {
dataSource.value = data;
objArray.pagination.total = total;
};
const setpage = (pageojb) => {
objArray.pagination.current = pageojb.current
objArray.pagination.pageSize = pageojb.pageSize
}
defineExpose({ getData, setpage });
</script>
<style lang="less" scoped>
.btn-add {
text-align: right;
/* margin-bottom: 20px; */
/* margin-top: 20px; */
}
:deep(.ant-select-single:not(.ant-select-customize-input)) {
.ant-select-selector {
height: 24px ;
}
}
:deep(.ant-select-single) {
.ant-select-selector {
.ant-select-selection-item {
line-height: 22px ;
}
}
}
</style>