工单页面修改及工单查询
1 parent 89a1a3c commit b98e506be346a9f2fdda3d8d446c59e4475f2c95
@zhangzhihui zhangzhihui authored on 4 Nov
Showing 4 changed files
View
11
src/api/order.js 0 → 100644
import request from '@/utils/request';
 
// /business/workOrder/list
export function workOrderPage(query) {
return request({
url: '/business/workOrder/page',
method: 'get',
params: query,
});
}
View
233
src/views/order/components/orderDia.vue 0 → 100644
<template>
<div class="orderDia">
<div class="orderBox">
<div class="boxTitle">基本情况</div>
<div class="boxContent">
<el-from ref="ruleFormRef" :rules="rules" label-width="auto" :model="orderForm">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="工单编码" prop="">
<el-input v-model="orderForm.orderNum" placeholder="请输入工单编码" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单类型" prop="">
<el-select v-model="orderForm.orderType" placeholder="请选择工单类型" style="width: 100%" disabled>
<el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="工单来源" prop="">
<el-select v-model="orderForm.orderSource" placeholder="请选择工单来源" style="width: 100%" disabled>
<el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="上&ensp;报&ensp;人" prop="">
<el-input v-model="orderForm.reportPerson" placeholder="请输入上报人" disabled/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系方式" prop="">
<!-- phone -->
<el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="警情时间" prop="">
<el-date-picker
v-model="orderForm.alarmTime"
type="datetime"
placeholder="请选择警情时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="16">
<el-form-item label="发送位置" prop="">
<!-- phone -->
<el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="登记时间" prop="">
<el-date-picker
v-model="orderForm.registerTime"
type="datetime"
placeholder="请选择登记时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="24">
<el-form-item label="信&emsp;&emsp;息" prop="">
<!-- phone -->
<el-input
v-model="orderForm.message"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入工单信息"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="要求完成时间" prop="">
<el-date-picker
v-model="orderForm.requireFinishTime"
type="datetime"
placeholder="请选择要求完成时间"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
style="width: 100%"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="处理单位" prop="">
<!-- phone -->
<el-input v-model="orderForm.handleDeptId" disabled />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="处理人" prop="">
<!-- phone -->
<el-input v-model="orderForm.handlePersonId" disabled />
</el-form-item>
</el-col>
</el-row>
</el-from>
</div>
</div>
<div class="orderBox">
<div class="boxTitle">附件</div>
<div class="boxContent">
<div></div>
</div>
</div>
<div class="orderBox">
<div class="boxTitle">处理流程</div>
<div class="boxContent">
<div></div>
</div>
</div>
<div class="boxBtn">
<el-button type="primary">提交</el-button>
<el-button>返回</el-button>
</div>
</div>
</template>
 
<script setup name="orderDia">
const { proxy } = getCurrentInstance();
// 工单类型: work_order_type
// 工单状态: work_order_status
// 工单来源: work_order_source
const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
'work_order_type',
'work_order_status',
'work_order_source'
);
 
const orderFormRef = ref();
const value = ref('');
 
const orderData = reactive({
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
region: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
],
count: [
{
required: true,
message: 'Please select Activity count',
trigger: 'change',
},
],
},
orderForm: {
name: '',
code: '',
date: '',
type: '',
ly: '',
sbr: '',
phone: '',
jqTime: '',
djTime: '',
location: '',
doneTime: '',
info: '',
state: '',
},
});
 
const { rules, orderForm } = toRefs(orderData);
</script>
 
<style lang="scss" scoped>
.orderDia {
width: 100%;
height: 700px;
// border: 1px solid red;
padding-bottom: 20px;
overflow-y: auto;
 
.orderBox {
width: 100%;
border-radius: 2px;
border: 1px solid #eaeaea;
margin-bottom: 20px;
.boxTitle {
height: 40px;
background: #f6f6f8;
// border-radius: 2px;
// border: 1px solid #eaeaea;
font-weight: bold;
font-size: 14px;
color: #333333;
display: flex;
align-items: center;
padding-left: 20px;
}
.boxContent {
// height: calc(100% - 120px);
margin: 10px 0;
// border: 1px solid red;
padding: 0 20px;
}
}
.boxBtn {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
}
</style>
View
2
■■■
src/views/order/workOrderProcessing/components/registerOrder.vue
<el-divider />
<div class="orderBox">
<div class="boxTitle">基本情况</div>
<div class="boxContent">
<el-from ref="ruleFormRef" :rules="rules" label-width="auto" :model="orderForm">
<el-from ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
<el-row justify="space-between">
<el-col :span="7">
<el-form-item label="工单编码" prop="">
<el-input v-model="orderForm.code" placeholder="请输入工单编码" />
View
315
src/views/order/workOrderQuery/index.vue
<template>
<div class="workOrderQuery publicContainer">
<el-row class="chooseBox">
<el-col :span="7" class="flex flex-align-center chooseTime">
<span class="title">监测时间:</span>
<el-col :span="6" class="flex flex-align-center chooseTime">
<span class="title">监测时间</span>
<el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="To"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-col>
<el-col :span="4" class="flex flex-align-center chooseType">
<span class="title">工单类型:</span>
<el-select v-model="value" placeholder="请选择" style="width: 150px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<span class="title">工单类型</span>
<el-select v-model="queryParams.orderType" placeholder="请选择" clearable style="width: 150px">
<el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="4" class="flex flex-align-center">
<span class="title">工单状态:</span>
<el-select v-model="value1" placeholder="请选择" style="width: 150px">
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
<span class="title">工单状态</span>
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 150px">
<el-option v-for="item in work_order_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="4" class="flex flex-align-center">
<span class="title">工单来源:</span>
<el-select v-model="value2" placeholder="请选择" style="width: 150px">
<el-option v-for="item in lyList" :key="item.value" :label="item.label" :value="item.value" />
<span class="title">工单来源</span>
<el-select v-model="queryParams.orderSource" placeholder="请选择" clearable style="width: 150px">
<el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-col>
<el-col :span="4">
<el-button type="primary">查询</el-button>
<el-button type="primary" @click="getList">查询</el-button>
<el-button type="primary">导出</el-button>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
<el-table-column type="index" label="序号" width="50" />
<el-table-column prop="code" label="工单编号" />
<el-table-column prop="date" label="登记时间" />
<el-table-column prop="type" label="工单类型" />
<el-table-column prop="ly" label="工单来源" />
<el-table-column prop="info" label="信息" />
<el-table-column prop="state" label="工单状态" />
<el-table-column prop="bm" label="处理部门" />
<el-table-column prop="orderNum" label="工单编号" />
<el-table-column prop="registerTime" label="登记时间" />
<el-table-column prop="orderType" label="工单类型">
<template #default="{ row }">
<div>{{ work_order_type.find(item => item.value == row.orderType)?.label || row.orderType }}</div>
</template>
</el-table-column>
<el-table-column prop="orderSource" label="工单来源">
<template #default="{ row }">
<div>{{ work_order_source.find(item => item.value == row.orderSource)?.label || row.orderSource }}</div>
</template>
</el-table-column>
<el-table-column prop="message" label="信息" />
<!-- <el-table-column prop="status" label="工单状态" /> -->
<el-table-column prop="status" label="工单状态">
<template #default="{ row }">
<div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
</template>
</el-table-column>
<el-table-column prop="submitDeptName" label="处理部门" />
<el-table-column label="操作">
<template #default="{ row }">
<div style="display: flex; justify-content: space-evenly">
<!-- <el-button link type="primary" icon="Edit" @click="addArea(row)">编辑</el-button>
<el-button link type="danger" icon="Delete" @click="deleteArea(row)">删除</el-button> -->
<el-button link type="primary">详情</el-button>
<el-button link type="primary" @click="handleDetail(row)">详情</el-button>
</div>
</template>
</el-table-column>
</el-table>
<pagination
class="pagingPosition"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
 
<!-- 详情弹窗 -->
<!--
:draggable="true"
@closed="handleClosed"
-->
<el-dialog
v-model="dialogConfig.visible"
:title="dialogConfig.title"
width="1400px"
:append-to-body="true"
:destroy-on-close="true"
>
<orderDia></orderDia>
</el-dialog>
</div>
</template>
 
<script setup name="workOrderQuery">
const dateRange = ref([]);
const value = ref('Option1');
const value1 = ref('');
const value2 = ref('');
import orderDia from '../components/orderDia.vue';
import { workOrderPage } from '@/api/order';
 
const options = [
{
value: 'Option1',
label: '燃气工单',
},
{
value: 'Option2',
label: '排水工单',
},
{
value: 'Option3',
label: '桥梁工单',
},
{
value: 'Option4',
label: '隧道工单',
},
];
const typeList = ref([
{
label: '待受理',
value: '0',
},
{
label: '待提交',
value: '1',
},
{
label: '待分派',
value: '2',
},
{
label: '待响应',
value: '3',
},
{
label: '待上报',
value: '4',
},
{
label: '待核实',
value: '5',
},
{
label: '待接单',
value: '6',
},
{
label: '已归档',
value: '7',
},
]);
const lyList = ref([
{
label: 'APP',
value: '1',
},
{
label: '电话',
value: '2',
},
{
label: '指挥调度',
value: '3',
},
]);
const { proxy } = getCurrentInstance();
// 工单类型: work_order_type
// 工单状态: work_order_status
// 工单来源: work_order_source
const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
'work_order_type',
'work_order_status',
'work_order_source'
);
const dateRange = ref([proxy.moment().subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const dialogConfig = ref({
visible: false,
title: '工单详情',
});
const total = ref(0);
const queryParams = ref({
registerStartTime: '',
registerEndTime: '',
orderType: '',
status: '',
orderSource: '',
pageNum: 1,
pageSize: 10,
});
 
const tableData = [
{
code: 'GD2024102900001',
date: '2024-05-03 12:00:00',
type: '燃气工单',
ly: 'APP',
info: '',
state: '待受理',
bm: '燃气总公司',
},
{
code: 'GD2024102900002',
date: '2024-05-03 12:00:00',
type: '排水工单',
ly: '电话',
info: '',
state: '待受理',
bm: '内涝办',
},
{
code: 'GD2024102900003',
date: '2024-05-03 12:00:00',
type: '排水工单',
ly: '指挥调度',
info: '',
state: '待受理',
bm: '内涝办',
},
];
const tableData = ref([]);
 
const handleDetail = () => {
dialogConfig.value.visible = true;
};
 
const getList = () => {
queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
workOrderPage(queryParams.value).then(res => {
console.log('🚀 ~ workOrderList ~ res:', res);
tableData.value = res.data;
total.value = res.total;
});
};
 
onMounted(() => {
getList();
});
</script>
 
<style lang="scss" scoped>
.workOrderQuery {
position: relative;
width: 100%;
height: 100%;
.chooseBox {
padding: 0 0 20px 0;
}
.chooseType {
margin-left: 20px;
}
.title {
font-size: 16px;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-right: 10px;
}
}
 
.pagingPosition {
position: absolute;
right: 20px;
bottom: 10px;
// margin-bottom: 10px;
}
</style>