<template>
<div class="searchBox">
<n-space>
<n-input
placeholder="请输入工单编号"
v-model:value="searchValue1"
autosize
clearable
style="width: 250px"
/>
<n-select
v-model:value="searchValue2"
filterable
:options="options"
placeholder="请选择审核状态"
style="width: 250px"
/>
<n-button type="primary" @click="handleClick('row', 'search')"
><template #icon>
<n-icon>
<Search />
</n-icon> </template
>搜索</n-button
>
</n-space>
</div>
<div class="tableBox">
<n-data-table
ref="tableRef"
:bordered="false"
:max-height="700"
striped
:columns="columns"
:data="data"
:pagination="pagination"
></n-data-table>
</div>
<n-modal
v-model:show="showModal"
:show-icon="false"
preset="card"
title="审核派单"
:style="{ width: '500px' }"
></n-modal>
</template>
<script>
import { onMounted, reactive, toRefs, h } from "vue";
import { Search } from "@vicons/ionicons5";
import { NButton } from "naive-ui";
export default {
name: "maintenanceAudit",
components: {
Search,
},
setup() {
const state = reactive({
searchValue1: "",
searchValue2: 0,
options: [
{ label: "全部", value: 0 },
{ label: "未审核", value: 1 },
{ label: "已审核", value: 2 },
],
// 表格相关
columns: [
{
title: "序号",
key: "id",
width: "60",
align: "center",
},
{
title: "派单日期",
key: "dispatchDate",
align: "center",
},
{
title: "派单人",
key: "dispatchMen",
align: "center",
},
{
title: "工单编号",
key: "number",
align: "center",
},
{
title: "派单模式",
key: "mode",
align: "center",
width: "80",
},
{
title: "派单类型",
key: "type",
align: "center",
},
{
title: "进度",
key: "progess",
align: "center",
},
{
title: "工单内容",
key: "content",
align: "center",
},
{
title: "维修人",
key: "person",
align: "center",
},
{
title: "最晚处理时间",
key: "lastTime",
align: "center",
},
{
title: "操作",
key: "actions",
align: "center",
render(row) {
return h(
NButton,
{
text: true,
size: "small",
type: "primary",
onClick: () => handleClick(row,'shenhe'),
},
{ default: () => "审核" }
);
},
},
],
data: [],
// 弹窗相关
showModal: false,
});
// 分页
const paginationReactive = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 20, 50],
showQuickJumper: true,
onChange: (page) => {
paginationReactive.page = page;
},
onPageSizeChange: (pageSize) => {
paginationReactive.pageSize = pageSize;
paginationReactive.page = 1;
},
});
const getTableData = async () => {
const res = reactive(
{"code":200,"message":"获取人员管理-生成设备维修记录结果成功","data":[{"A":21,"B":"1989-05-22 21:10:39","C":"余平","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"万明","K":4},{"A":22,"B":"2011-08-15 03:41:44","C":"高明","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"梁明","K":3},{"A":23,"B":"2010-05-08 14:32:50","C":"史刚","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"邱娜","K":3},{"A":24,"B":"1998-03-29 16:05:16","C":"冯芳","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"何芳","K":4},{"A":25,"B":"1979-12-24 02:28:36","C":"张芳","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"阎洋","K":4},{"A":26,"B":"1993-11-17 04:07:30","C":"黎娟","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"高涛","K":5},{"A":27,"B":"1998-11-12 15:08:59","C":"魏涛","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"高涛","K":4},{"A":28,"B":"1983-12-28 18:41:38","C":"谭静","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"毛军","K":2},{"A":29,"B":"2011-03-21 20:23:46","C":"龙勇","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"董勇","K":1},{"A":30,"B":"1973-08-30 07:08:45","C":"顾军","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"冯磊","K":1},{"A":31,"B":"2007-10-30 11:56:12","C":"郑强","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"廖秀兰","K":1},{"A":32,"B":"2021-12-21 04:47:11","C":"雷秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"刘洋","K":2},{"A":33,"B":"1995-09-30 14:40:38","C":"宋娜","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"许娜","K":3},{"A":34,"B":"1982-10-04 00:25:11","C":"龚秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"贺杰","K":1},{"A":35,"B":"1986-02-08 01:13:56","C":"钱刚","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"罗霞","K":2},{"A":36,"B":"2016-12-25 14:38:31","C":"韩秀兰","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"金艳","K":4},{"A":37,"B":"1993-07-29 13:41:37","C":"许娜","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"戴涛","K":2},{"A":38,"B":"2020-07-06 21:19:31","C":"白丽","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"袁丽","K":3},{"A":39,"B":"1999-08-31 22:39:46","C":"于敏","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"侯桂英","K":1},{"A":40,"B":"2002-08-25 05:32:55","C":"蒋静","D":"22013896","E":"早班","F":"是","G":"无","H":"暂无反馈","I":"暂无","J":"史洋","K":4}]}
)
if (res.code == 200) {
state.data = res.data.list;
}
};
const handleClick = (row, type) => {
switch (type) {
case "search":
console.log("搜索");
break;
case "shenhe":
state.showModal = true;
break;
}
};
onMounted(() => {
getTableData();
});
return {
...toRefs(state),
getTableData,
handleClick,
pagination: paginationReactive,
};
},
};
</script>
<style lang="less" scoped>
.searchBox {
margin-bottom: 20px;
}
</style>
