<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">Import</a-button>
</a-upload>
<a-button type="primary" v-if="hasExport" @click="handleAllExport">Export all</a-button>
<a-button type="primary" v-if="allDel">Delete all</a-button>
<a-button :disabled=" === 0 || flagselectedRowKeys" v-if="rowSelection"
@click="delEvent(selecrowdata, 'many')">Batch Delete</a-button>
<a-button :disabled=" === 0 || flagselectedRowKeys" v-if="markread"
@click="handleFlagRead(selecrowdata, 'hasread')">Tag read</a-button>
<a-button type="primary" v-if="operatingButton?.addbtn" @click="editEvent('add')">{{addbtnName?addbtnName:'Add'}}</a-button>
<a-button type="primary" v-if="hasgoback" @click="handlegoback">return</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">
Report download</a>
<a-divider type="vertical" v-if="dividerbutton?.reportdownload" />
<a @click="editEvent('detail', record)" v-if="operatingButton?.detail">
Check</a>
<a-divider type="vertical" v-if="dividerbutton?.detail" />
<a @click="editEvent('edit', record)" v-if="operatingButton?.edit">Revise</a>
<a-divider type="vertical" v-if="dividerbutton?.edit" />
<a @click="delEvent(record)" v-if="operatingButton?.del" style="color: red">delete</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: {
//Operation button
reportdownload: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: true,
},
del: {
type: Boolean,
default: true,
},
detail: {
type: Boolean,
default: false,
},
},
dividerbutton: {
//The split line between the operation buttons
reportdownload: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: true,
},
del: {
type: Boolean,
default: false,
},
detail: {
type: Boolean,
default: false,
},
},
allDel: {
//Button: Delete all
type: Boolean,
default: false,
},
columns: {
//Table header
type: Array,
default: [],
},
formessagedivider: {
type: Boolean,
default: false,
},
hasImport: {
//Button: Import
type: Boolean,
default: false,
},
hasExport: {
//Button: Export
type: Boolean,
default: false,
},
markread: {
// Button: Mark read
type: Boolean,
default: false,
},
hasDetail: {
//Form details
type: Boolean,
default: false,
},
tableOtherobj: {
type: Object,
default: {
// hasAddbtn: true,// Is there any button added on the table
// hasDetail: false,//Is there any details in the operation
scroll: false, //Is there any horizontal scrolling in the table, and what is the value in the x and direction number
actionwidth: "120",
},
},
hasedit: {
//Table modification
type: Boolean,
default: true,
},
hasdel: {
//Delete the form
type: Boolean,
default: true,
},
hasseeprocess: {
//Table viewing process
type: Boolean,
default: false,
},
pagination: {
//Pagination
type: Boolean,
default: true,
},
// Is there any batch operation
rowSelection: {
type: Boolean,
default: false,
},
rowSelection2: {
// Is it possible to choose
type: Boolean,
default: false,
},
hasgoback: {
//Return button
type: Boolean,
default: false,
},
searchkey: {
// Query fields
type: Object,
default: {},
},
objType: {
//Return to touch a field in the background, and cannot be displayed directly, but display the corresponding other content according to different values.
type: Object,
default: {
isshow: false, // Whether to display
typeName: "type", // Attribute value 'Table field that needs to be escaped, when type=1 is displayed in company level; when type=2 is displayed in department level'
1: "Company Level",
2: "Departmental Level",
},
},
obj2Type: {
// When both fields are enumerated on the page,
type: Object,
default: {
isshow: false, // Whether to display
typeName: "type", // Attribute value 'Table field that needs to be escaped, when type=1 is displayed in company level; when type=2 is displayed in department level'
1: "Company Level",
2: "Departmental Level",
},
},
objTypecolor: {
type: Object,
default: {
isshow: false, // Whether to display
typeName: "monitorDataReportType", // Property value 'Fields that require color setting'
day: "#FF0000",
month: "#FFFF00",
},
},
expandIconSet: {
// When the table is nested, the position of the expanded and collapsed chart is controlled
type: Object,
default: {
expandIconColumnIndex: 2, //Want to put the expand icon in which column
expandIconAsCell: false, the supporting properties that you want to put the expand icon in the column
},
},
loading: false, //Table loading
});
const {
objTypecolor,
obj2Type,
operatingButton,
dividerbutton,
formessagedivider,
markread,
columns,
hasImport,
hasExport,
hasDetail,
tableOtherobj,
hasedit,
hasdel,
hasseeprocess,
pagination,
rowSelection,
hasgoback,
searchkey,
objType,
expandIconSet,
} = toRefs(props);
// Method to send to parent component
const emits = defineEmits([
"openModel",
"handleDelTable",
"getData",
"FlagRead",
"handleTableRowSelec",
"exportXlsx",
"importXlsx",
]);
// Batch Delete
let flagselectedRowKeys = ref(true);
let selecrowdata = ref();
const objrowSelection = {
// selectedRowKeys: selectedRowKeys,
//selectedRowKeys Select the value of the element key in the datasource of the row; selectedRows is the selected element, and the datasource is an array.
onChange: (selectedRowKeys, selectedRows) => {
let falg = selectedRowKeys.length ? false : true;
flagselectedRowKeys.value = falg;
selecrowdata.value = [...selectedRowKeys];
// (`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
emits("handleTableRowSelec", selectedRowKeys, selectedRows);
},
};
// return
const handlegoback = () => {
history.back();
};
// operate
const editEvent = (param1, param2) => {
emits("openModel", param1, param2);
};
const delEvent = (param1, param2) => {
emits("handleDelTable", param1);
};
const handleFlagRead = () => {
emits("FlagRead", selecrowdata);
};
// Pagination method
let objArray = reactive({
// Request parameters
searchParams: {},
// Pagination information
pagination: {
current: 1,
total: 0,
pageSize: 25,
showSizeChanger: true,
showTotal: (total) => `Total${total}Strip`,
pageSizeOptions: ['1',"15", "20", "25", "30", "40"],
onChange: (page, pageSize) => {
handleSizeChange(page, pageSize);
},
},
// Select in batches
selectedRowKeys: [],
// Selected row data
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);
};
// Nested subtables
const handleexpand = (expanded, record) => {
console.log(expanded, record, "expanded, record");
};
const expandedRowsChange = (expandedRows) => {
console.log(expandedRows, "expandedRows");
};
// Export all
const handleAllExport = () => {
emits("exportXlsx");
};
// Import
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>