|
<script setup>
|
import user from "@/api/system/user";
|
import archivesApi from "@/api/archivesApi/index";
|
import { ElMessage } from 'element-plus'
|
import waterMeterApi from "@/api/waterMeterApi/index";
|
import { waterMeterRepairApi } from '@/api/workOrderManage/waterMeterRepairApi';
|
import { onMounted, reactive, ref } from 'vue'
|
import setPostParams from "../../../utils/searchParams.js";
|
//定义table数据
|
const queryParams = ref({
|
name: undefined,
|
})
|
const tableData = ref([])
|
const pageParam = ref({
|
total:0,
|
limit:10,
|
page:0,
|
})
|
const setTableList = reactive({
|
repairsNumber:'保修单编号',
|
userName: '用户名称',
|
meterSn:'水表编号',
|
repairsAddress: '报修地址',
|
content:"维修内容",
|
// maintenanceCosts:"维修费用",
|
maintainUserName: '维修人员',
|
maintainTime: '上门时间',
|
stateName:'状态'
|
})
|
//弹窗
|
const formVisible = ref(false)
|
// 添加-form表单数据定义
|
const repairFormData = ref({
|
userId: '',
|
meterSn: '',
|
content:'',
|
maintainUser: '',
|
maintainUserName: '',
|
maintainTime:'',
|
repairsType: '1',
|
remark: '',
|
})
|
const accountFormRef = ref()
|
// 维修人员选择列表
|
const maintainUserList = ref()
|
// 用户选择列表
|
const userNameList = ref()
|
//水表单号选择列表
|
const meterSnList = ref()
|
const rules = ref({
|
userId: [
|
{required: true, message: '请选择用户', trigger: 'blur'}
|
],
|
meterSn: [
|
{required: true, message: '请选择水表', trigger: 'blur'}
|
],
|
maintainUser: [
|
{required: true, message: '请选择维修人员', trigger: 'blur'}
|
],
|
maintainTime: [
|
{required: true, message: '请选择维修时间', trigger: 'blur'}
|
],
|
content:[
|
{required: true, message: '请选择维修内容', trigger: 'blur'}
|
],
|
})
|
// 添加
|
const addAccount = async() =>{
|
repairFormData.value = {
|
userId: '',
|
meterSn: '',
|
content:'',
|
maintainUser: '',
|
maintainUserName: '',
|
maintainTime:'',
|
repairsType: '1',
|
remark: '',
|
}
|
|
// 获取用户档案列表
|
let res0 = await archivesApi().search({limit: 10000, status: 1,page:1})
|
if (res0.code == 200) {
|
userNameList.value = res0.data.list
|
}
|
// 获取维修账号列表信息
|
let res1 = await user().search({limit: 10000, status: 1,page:1})
|
if (res1.code == 200) {
|
maintainUserList.value = res1.data.list
|
}
|
|
formVisible.value = true
|
}
|
//条件搜索
|
const search = () =>{
|
getTableData({keywords:queryParams.value.name})
|
}
|
const handleChange = async(val) =>{
|
repairFormData.value.meterSn="";
|
//通过用户id获取该用户下的水表信息
|
let res = await waterMeterApi().getByUser(val)
|
if(res.code == 200){
|
meterSnList.value = res.data
|
}
|
}
|
const selectChange = (val)=>{
|
maintainUserList.value.forEach((item) =>{
|
if(item.id == val){
|
repairFormData.value.maintainUserName = item.nickName
|
}
|
})
|
}
|
// 提交表单
|
const submitRepairForm = async() =>{
|
accountFormRef.value.validate(async (validate) =>{
|
if(validate){
|
console.log('repairFormData.value ',repairFormData.value )
|
let res = await waterMeterRepairApi().creatWaterMeterRepairs(repairFormData.value)
|
if(res.code == 200){
|
ElMessage({message:'提交成功！',type:'success'})
|
formVisible.value = false
|
getTableData()
|
}
|
}
|
})
|
}
|
const cancelRepairForm = () =>{
|
formVisible.value = false
|
}
|
const getTableData = async (val) => {
|
let postParam = setPostParams(val)
|
let { code, data } = await waterMeterRepairApi().searchWaterMeterRepairs(postParam)
|
if(code == 200) {
|
tableData.value = data.list
|
tableData.value.forEach((item) =>{
|
if(item.state == 1){
|
item.stateName ='待执行'
|
}else if(item.state == 2){
|
item.stateName ='执行中'
|
}else if(item.state == 3){
|
item.stateName ='已执行'
|
}else if(item.state == 4){
|
item.stateName ='已撤销'
|
}else{
|
item.stateName =''
|
}
|
})
|
pageParam.value.total = data.total
|
pageParam.value.limit = data.limit
|
pageParam.value.page = data.page
|
console.log('tableData.value',tableData.value)
|
}
|
}
|
|
//详情相关
|
const formDetailVisible = ref(false)
|
const formDetail = ref({
|
repairsNumber: '',
|
meterSn: '',
|
userName: '',
|
userPhone: '',
|
repairsAddress: '',
|
maintainUserName: '',
|
maintainTime: '',
|
repairsTypeView: '',
|
stateView:'',
|
remark: '',
|
createTimeView: "2024-06-26 10:59:21",
|
updateTimeView: "2024-06-26 10:59:30.700",
|
})
|
const ToDetail = async(row,val) =>{
|
let res = await waterMeterRepairApi().getWaterMeterRepairs(row.id)
|
if(res.code == 200) {
|
formDetail.value = res.data
|
console.log(res.code);
|
}
|
formDetailVisible.value = true
|
if(val === 2){
|
isExecute.value = true
|
}else{
|
isExecute.value = false
|
}
|
console.log('formDetail.value111',formDetail.value);
|
|
}
|
//执行相关
|
const isExecute = ref(false)
|
//提交数据处理
|
// const handleExecuteData = () =>{
|
// executeData.value.repairsId = formDetail.value.id
|
// executeData.value.meterSn = formDetail.value.meterSn
|
// executeData.value.userId = formDetail.value.userId
|
// executeData.value.userName = formDetail.value.userName
|
// executeData.value.maintainTime = formDetail.value.maintainTime
|
// executeData.value.maintainStaff = formDetail.value.maintainUserName
|
// executeData.value.maintainType = formDetail.value.repairsType
|
// }
|
|
// 提交确认报修
|
const acceptAccountForm = async() =>{
|
let res = await waterMeterRepairApi().executeStatusWaterMeterRepairs({repairsId:formDetail.value.id,executeType:2})
|
if(res.code == 200){
|
ElMessage({message:'已接受报修!',type:'success'})
|
}
|
formDetailVisible.value = false
|
getTableData()
|
}
|
// 提交完成报修
|
const completeAccountForm = async() =>{
|
let res = await waterMeterRepairApi().executeStatusWaterMeterRepairs({repairsId:formDetail.value.id,executeType:3})
|
if(res.code == 200){
|
ElMessage({message:'完成报修!',type:'success'})
|
}
|
formDetailVisible.value = false
|
getTableData()
|
}
|
// 撤销报修
|
const revokeAccountForm = async() =>{
|
let res = await waterMeterRepairApi().executeStatusWaterMeterRepairs({repairsId:formDetail.value.id,executeType:4})
|
if(res.code == 200){
|
ElMessage({message:'撤销成功!',type:'success'})
|
}
|
formDetailVisible.value = false
|
getTableData()
|
}
|
onMounted(async() => {
|
|
getTableData()
|
})
|
</script>
|
<template>
|
<div class="app-container">
|
<!-- <div class="text-select">
|
<el-button type="primary" @click="addAccount" size="large">添加</el-button>
|
<el-input placeholder="请输入用户名称或水表编号" v-model="searchData"></el-input>
|
<el-button @click="search" type="primary" size="large">搜索</el-button>
|
</div> -->
|
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
<el-form-item prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入用户或水表编号查询"
|
clearable
|
style="width: 200px"
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="search">搜索</el-button>
|
<el-button icon="Refresh" @click="getTableData">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="Plus"
|
@click="addAccount"
|
>新增</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table :data="tableData">
|
<el-table-column v-for="(item,key,index) of setTableList" :key="index" :prop="key.toString()" :label="item" width="180" />
|
<el-table-column prop="handle" label="操作" width="180" fixed="right">
|
<template #default="scope">
|
<el-button @click="ToDetail(scope.row,1)" link type="primary" icon="Document" title="详细信息">详情</el-button>
|
<el-button v-if="(scope.row.state == 1) || (scope.row.state == 2)" @click="ToDetail(scope.row,2)" link type="primary" icon="EditPen" title="详细信息">执行</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
:total="pageParam.total"
|
v-model:page="pageParam.page"
|
v-model:limit="pageParam.limit"
|
:page-sizes="[10,20,30]"
|
@pagination="getTableData"
|
/>
|
<!-- 分页区域 -->
|
<!-- <div class="pagination">
|
<el-pagination
|
layout="total, prev, pager, next, jumper"
|
v-model:page-size="pagination.pageSize"
|
:total="pagination.total"
|
@current-change="handleCurrentChange">
|
</el-pagination>
|
</div> -->
|
<el-dialog v-model="formVisible" title="水表报修" align-center destroy-on-close>
|
<div class="main">
|
<div class="account-form">
|
<el-form :model="repairFormData" :rules="rules" ref="accountFormRef" :label-width="80">
|
<br>
|
<el-form-item label="用户名称" prop="userId">
|
<el-select v-model="repairFormData.userId" filterable placeholder="请选择用户" @change="handleChange">
|
<el-option
|
v-for="item in userNameList"
|
:key="item.id"
|
:label="item.userName"
|
:title="item.userName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="水表编号" prop="meterSn">
|
<el-select v-model="repairFormData.meterSn" filterable placeholder="请选择用户">
|
<el-option
|
v-for="item in meterSnList"
|
:key="item.id"
|
:label="item.sn"
|
:title="item.sn"
|
:value="item.sn"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="维修内容" prop="content">
|
<el-input type="textarea" v-model="repairFormData.content" maxlength="200" size="large" ></el-input>
|
</el-form-item>
|
<el-form-item label="上门时间" prop="maintainTime">
|
<el-date-picker
|
v-model="repairFormData.maintainTime"
|
type="date"
|
placeholder="请选择安装日期和时间"
|
format="YYYY-MM-DD "
|
value-format="YYYY-MM-DD "
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<br>
|
<el-form-item label="备注" prop="remark">
|
<el-input type="textarea" v-model="repairFormData.remark" maxlength="200" size="large" ></el-input>
|
</el-form-item>
|
<el-form-item label="维修人员" prop="maintainUser">
|
<el-select v-model="repairFormData.maintainUser" filterable placeholder="请选择维修人员" @change="selectChange">
|
<el-option
|
v-for="item in maintainUserList"
|
:key="item.id"
|
:label="item.nickName"
|
:title="item.nickName"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="submit-btn">
|
<el-button size="large" @click="cancelRepairForm">取消</el-button>
|
<el-button type="primary" size="large" @click="submitRepairForm">提交</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
|
<el-dialog v-model="formDetailVisible" title="水表维修详情" style="width: 60vw;" center align-center >
|
<div class="detail">
|
<div class="item">
|
<div class="title">维修单编号:</div>
|
<div>{{ formDetail.repairsNumber }}</div>
|
</div>
|
<div class="item">
|
<div class="title">水表编号:</div>
|
<div>{{ formDetail.meterSn }}</div>
|
</div>
|
<div class="item">
|
<div class="title">用户名称:</div>
|
<div>{{ formDetail.userName }}</div>
|
</div>
|
<div class="item">
|
<div class="title">用户电话:</div>
|
<div>{{ formDetail.userPhone }}</div>
|
</div>
|
<div class="item">
|
<div class="title">报修地址:</div>
|
<div>{{ formDetail.repairsAddress }}</div>
|
</div>
|
<div class="item">
|
<div class="title">维修内容:</div>
|
<div>{{ formDetail.content }}</div>
|
</div>
|
<div class="item">
|
<div class="title">维修工程师:</div>
|
<div>{{ formDetail.maintainUserName }}</div>
|
</div>
|
<div class="item">
|
<div class="title">维修费用:</div>
|
<div>{{ formDetail.maintenanceCosts }}</div>
|
</div>
|
<div class="item">
|
<div class="title">维修时间:</div>
|
<div>{{ formDetail.maintainTime }}</div>
|
</div>
|
<div class="item">
|
<div class="title">报修类型:</div>
|
<div>{{ formDetail.repairsTypeView }}</div>
|
</div>
|
<div class="item">
|
<div class="title">状态:</div>
|
<div>{{ formDetail.stateView }}</div>
|
</div>
|
<div class="item">
|
<div class="title">备注:</div>
|
<div>{{ formDetail.remark }}</div>
|
</div>
|
<div class="item">
|
<div class="title">创建时间:</div>
|
<div>{{ formDetail.createTimeView }}</div>
|
</div>
|
<div class="item">
|
<div class="title">修改日期:</div>
|
<div>{{ formDetail.updateTimeView }}</div>
|
</div>
|
</div>
|
<template #footer>
|
<el-button v-if="!isExecute" @click="formDetailVisible = false" style="width:10%">关闭</el-button>
|
<div class="Execution-btn" v-if="isExecute">
|
<div>
|
<el-button v-if="formDetail.state==1" type="primary" size="large" @click="acceptAccountForm">接受报修</el-button>
|
</div>
|
<div>
|
<el-button v-if="formDetail.state==2" type="primary" size="large" @click="completeAccountForm">完成报修</el-button>
|
</div>
|
<div>
|
<el-button v-if="formDetail.state==1" type="primary" size="large" @click="revokeAccountForm">撤销工单</el-button>
|
</div>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.detail{
|
display:flex;
|
justify-content:center;
|
width:100%;
|
flex-wrap:wrap;
|
.item{
|
margin-bottom: 15px;
|
width:45%;
|
font-size: 18px;
|
display: flex;
|
.title{
|
color: #696969;
|
margin-right: 10px;
|
}
|
}
|
}
|
.main{
|
width: 100%;
|
height: 100%;
|
// background-color: azure;
|
.text-select {
|
height: 5%;
|
padding-top: 20px;
|
display: flex;
|
align-items: center;
|
margin-left: 20px;
|
:deep(.el-input) {
|
width: 318px !important;
|
height: 40px;
|
margin-right: 0;
|
margin-bottom: 2px;
|
}
|
:deep(.el-input__wrapper) {
|
margin-right: 0;
|
}
|
.el-button {
|
margin-left: 10px;
|
margin-right: 80px;
|
}
|
}
|
.account-form{
|
width: 100%;
|
.el-form{
|
margin: 0 auto;
|
width: 96%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
// p{
|
// height: 8%;
|
// margin-bottom: 5px;
|
// margin-left: -60%;
|
// font-size: 16px;
|
// font-weight: 1000px;
|
// color: #212122;
|
// }
|
.el-form-item{
|
width: 70%;
|
padding-bottom: 10px;
|
}
|
}
|
};
|
.submit-btn{
|
display: flex;
|
justify-content: center;
|
.el-button{
|
margin: 10px;
|
}
|
}
|
.el-table{
|
width: 95%;
|
padding-top: 10px;
|
margin: 0 auto;
|
border-radius: 20px;
|
// border: solid 1px;
|
}
|
|
:deep(.el-dialog) {
|
// text-align: left;
|
min-width: 954px;
|
max-height: 88vh;
|
overflow-y: auto;
|
border-radius: 15px;
|
--el-dialog-margin-top: 8vh;
|
.el-dialog__body {
|
padding: 10px;
|
}
|
}
|
.Execution-btn{
|
display: flex;
|
justify-content: center;
|
div{
|
margin: 0 50px 10px 80px ;
|
}
|
}
|
}
|
</style>
|
