GitBucket
1<template>
<div id="DutyHistory">
<div id="searchBox">
<n-space>
<n-input placeholder="泵站名称" v-model:value="selectedValue1" autosize style="width: 250px" />
<n-select v-model:value="selectedValue2" filterable placeholder="" :options="options"
style="width: 250px" />
<n-radio-group v-model:value="selectedValue3" name="radiobuttongroup1">
<n-radio-button v-for="song in songs" :key="song.value" :value="song.value">
{{ song.label }}
</n-radio-button>
</n-radio-group>
</n-space>
</div>
<div id="cententBox">
<n-data-table ref="tableRef" :bordered="false" :max-height="700" striped :columns="columns" :data="data"
:pagination="paginations"></n-data-table>
</div>
</div>
</template>
<script>
import {
ref,
reactive,
toRefs,
onMounted,
h
} from "vue";
import {
NButton
} from "naive-ui";
export default {
name: "DutyHistory",
setup() {
const searchValue = reactive({
selectedValue1: null,
selectedValue2: ref("0"),
selectedValue3: ref("0"),
options: [{
label: "全部",
value: "0",
},
{
label: "工单维修提醒配置",
value: "1",
},
{
label: "运维巡查提醒提置",
value: "2",
},
{
label: "应急指挥提醒",
value: "3",
},
{
label: "设备故障提醒",
value: "4",
},
{
label: "事件报警提醒",
value: "5",
},
{
label: "事件报警提醒",
value: "6",
},
],
songs: [{
value: "0",
label: "今天",
},
{
value: "1",
label: "近30天",
},
{
value: "2",
label: "近6个月",
},
{
value: "3",
label: "近一年",
},
{
value: "4",
label: "近三年",
},
],
//表格相关
columns: [{
title: "序号",
key: "A",
align: "center",
},
{
title: "日期",
key: "B",
align: "center",
width: "180px",
},
{
title: "值班人员",
key: "C",
align: "center",
},
{
title: "值班泵站",
key: "D",
align: "center",
},
{
title: "值班类型",
key: "E",
align: "center",
},
{
title: "是否计划值班",
key: "F",
align: "center",
},
{
title: "值班内容",
key: "G",
align: "center",
},
{
title: "值班问题反馈",
key: "H",
align: "center",
},
{
title: "值班时长",
key: "I",
align: "center",
},
{
title: "操作",
key: "actions",
width: "400",
align: "center",
render(row) {
const btn = searchValue.actionColumn.map((item, index) => {
return h(
NButton, {
text: true,
size: item.size,
style: {
margin: "10px",
},
type: item.btnType,
onClick: () => handleClick(row, item.type),
}, {
default: () => item.default
}
);
});
return btn;
},
},
],
data: [],
actionColumn: [{
size: "small",
btnType: "primary",
type: "see",
default: "查看明细",
}, ],
});
async function getTableData() {
const res = reactive({
"code": 200,
"message": "获取人员管理-人员值班历史记录结果成功",
"data": [{
"A": 1,
"B": "1999-09-12 06:56:08",
"C": "韩娜",
"D": "决青效认。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 2
}, {
"A": 2,
"B": "2013-03-10 03:16:52",
"C": "宋丽",
"D": "准除已业按。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 3
}, {
"A": 3,
"B": "2011-01-04 03:29:24",
"C": "任军",
"D": "状现己习。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 6
}, {
"A": 4,
"B": "2017-04-14 01:45:47",
"C": "龚平",
"D": "飞王老什。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 8
}, {
"A": 5,
"B": "2009-11-23 14:30:41",
"C": "罗明",
"D": "选风它干非。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 3
}, {
"A": 6,
"B": "1975-12-13 19:51:11",
"C": "于娜",
"D": "毛北她多权。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 2
}, {
"A": 7,
"B": "2013-08-28 14:33:26",
"C": "康平",
"D": "收物。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 4
}, {
"A": 8,
"B": "1972-01-14 08:16:59",
"C": "于娜",
"D": "意原。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 7
}, {
"A": 9,
"B": "1980-12-04 22:32:10",
"C": "苏磊",
"D": "容算局算。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 7
}, {
"A": 10,
"B": "1973-05-26 02:42:02",
"C": "郭勇",
"D": "出在得备。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 5
}, {
"A": 11,
"B": "2008-09-23 00:43:11",
"C": "谭杰",
"D": "何达王个段。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 5
}, {
"A": 12,
"B": "1993-08-31 08:04:15",
"C": "许霞",
"D": "证族你。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 6
}, {
"A": 13,
"B": "1976-03-12 10:39:30",
"C": "雷强",
"D": "定习。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 2
}, {
"A": 14,
"B": "2000-04-12 02:27:29",
"C": "汤敏",
"D": "近能此内。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 4
}, {
"A": 15,
"B": "2007-04-23 09:23:11",
"C": "邹娟",
"D": "己才华会。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 3
}, {
"A": 16,
"B": "1993-12-10 05:11:24",
"C": "崔丽",
"D": "更任还织。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 7
}, {
"A": 17,
"B": "1978-09-05 21:48:56",
"C": "范洋",
"D": "物党义。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 4
}, {
"A": 18,
"B": "1999-03-17 10:31:14",
"C": "万静",
"D": "采收头。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 2
}, {
"A": 19,
"B": "2020-10-15 17:59:52",
"C": "杨平",
"D": "后极色。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 3
}, {
"A": 20,
"B": "1995-08-28 04:07:50",
"C": "董杰",
"D": "面低适万人。",
"E": "早班",
"F": "是",
"G": "无",
"H": "暂无反馈",
"I": 2
}]
})
console.log(res.code)
if (res.code == 200) {
searchValue.data.push(...res.data);
}
}
//分页
const paginationReactive = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 20, 30],
showQuickJumper: true,
onChange: (page) => {
paginationReactive.page = page;
},
onPageSizeChange: (pageSize) => {
paginationReactive.pageSize = pageSize;
paginationReactive.page = 1;
},
});
// 点击事件
const handleClick = (row, type) => {
switch (type) {
case "see":
console.log("查看明细");
break;
}
};
onMounted(() => {
getTableData();
});
return {
...toRefs(searchValue),
getTableData,
paginations: paginationReactive,
};
},
computed: {},
methods: {},
};
</script>
<style lang="less" scoped>
#DutyHistory {
width: 100%;
height: 100%;
}
#searchBox {
width: 100%;
height: 40px;
}
#cententBox {
width: 100%;
height: calc(100% - 60px);
margin-top: 20px;
}
</style>