<template>
<div class="searchBox">
<div class="top">
<div
class="btn btnOne"
@click="changeTable(0)"
:class="[active === 0 ? 'active' : '']"
>
故障派单
</div>
<div
class="btn btnOne"
@click="changeTable(1)"
:class="[active === 1 ? 'active' : '']"
>
告警派单
</div>
<div
class="btn btnOne"
@click="changeTable(2)"
:class="[active === 2 ? 'active' : '']"
>
运维派单
</div>
<div
class="btn btnOne"
@click="changeTable(3)"
:class="[active === 3 ? 'active' : '']"
>
手工派单
</div>
<div class="btn btnTwo gongdan">
工单次数：<span>{{ gongdanBtn }}</span> 次
</div>
<div class="btn btnTwo xiangying">
相应次数：<span>{{ xiangying }}</span
>次
</div>
<div class="btn btnTwo done">
运维完成次数：<span>{{ done }}</span
>次
</div>
</div>
<div class="bot">
<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-radio-group v-model:value="searchValue3">
<n-radio-button
v-for="time in times"
:key="time.value"
:value="time.value"
>
{{ time.label }}
</n-radio-button>
</n-radio-group>
</n-space>
</div>
</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 { NButton } from "naive-ui";
export default {
name: "dispatchApplication",
setup() {
const state = reactive({
active: 0,
gongdanBtn: 20,
xiangying: 20,
done: 20,
searchValue1: "",
searchValue2: 0,
searchValue3: 0,
options: [{ label: "全部", value: 0 }],
times: [
{
value: "0",
label: "今天",
},
{
value: "1",
label: "近30天",
},
{
value: "2",
label: "近6个月",
},
{
value: "3",
label: "近一年",
},
{
value: "4",
label: "近三年",
},
],
// 表格相关
columns: [
{
type: "selection",
width: "30",
},
{
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),
},
{ 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 changeTable = (i) => {
switch (i) {
case 0:
state.active = 0;
break;
case 1:
state.active = 1;
break;
case 2:
state.active = 2;
break;
case 3:
state.active = 3;
break;
}
};
async function getTableData() {
const res = reactive(
{"code":200,"message":"获取设备管理-派单申请表格数据","data":{"totalCount":5,"pageSize":10,"totalPage":1,"currPage":1,"list":[{"key":0,"id":0,"dispatchDate":"1996-06-21 21:00:20","dispatchMen":"Lisa Garcia","number":"LWZBZ-GZ-001","mode":"自动","type":"自前池液位检查动","progess":"进行中","content":" 南广当报住金史社特","person":"Ronald Davis","lastTime":"2005-02-19 05:24:55"},{"key":1,"id":1,"dispatchDate":"1997-12-31 18:25:08","dispatchMen":"Brenda Martinez","number":"LWZBZ-GZ-001","mode":"自动","type":"自前池液位检查动","progess":"进行中","content":" 处代开化收","person":"Sandra Williams","lastTime":"1981-10-02 02:39:22"},{"key":2,"id":2,"dispatchDate":"1978-02-14 18:25:43","dispatchMen":"Melissa Miller","number":"LWZBZ-GZ-001","mode":"自动","type":"自前池液位检查动","progess":"进行中","content":" 快类比按东生发","person":"Sharon Walker","lastTime":"2020-11-17 10:46:57"},{"key":3,"id":3,"dispatchDate":"1988-05-23 23:37:29","dispatchMen":"Jose Brown","number":"LWZBZ-GZ-001","mode":"自动","type":"自前池液位检查动","progess":"进行中","content":" 拉二广深主影","person":"Cynthia Jones","lastTime":"2013-12-18 17:56:00"},{"key":4,"id":4,"dispatchDate":"2012-06-06 03:54:34","dispatchMen":"James Thomas","number":"LWZBZ-GZ-001","mode":"自动","type":"自前池液位检查动","progess":"进行中","content":" 十习争但周我华加","person":"Kimberly Perez","lastTime":"1987-10-03 22:54:29"}]}}
)
if (res.code == 200) {
state.data = res.data.list;
}
}
const handleClick=(row)=>{
state.showModal=true
}
onMounted(() => {
getTableData();
});
return {
...toRefs(state),
changeTable,
getTableData,
pagination: paginationReactive,
};
},
};
</script>
<style lang='less' scoped>
.searchBox {
margin-bottom: 20px;
.top {
margin-bottom: 20px;
display: flex;
align-self: center;
.btn {
text-align: center;
line-height: 32px;
color: #fff;
}
.btnOne {
width: 172px;
background: url("../../../assets/Imgs/defual_btn.png") no-repeat center;
}
.btnTwo {
width: 140px;
height: 32px;
border-radius: 10px;
margin-right: 10px;
&.gongdan {
background: linear-gradient(60deg, #6766ff 0%, #4aa8e8 100%);
}
&.xiangying {
background: linear-gradient(60deg, #4db5c0 0%, #53cbd9 100%);
}
&.done {
background: linear-gradient(60deg, #e47778 0%, #f68687 100%);
}
}
:nth-child(4){
background: url("../../../assets/Imgs/defual_btn2.png") no-repeat center;
}
.active {
background: url("../../../assets/Imgs/active_btn.png") no-repeat center;
}
}
}
</style>
