| | <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> |
---|
| | |
---|
| | |