<template>
|
<div class="app-container">
|
<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" />
|
<el-table-column prop="handle" label="操作" width="200" 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.installState == 1 || scope.row.installState == 2" @click="ToDetail(scope.row,2)" link type="primary" icon="EditPen" title="详细信息">执行</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!--分页区域-->
|
<!-- <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> -->
|
<pagination
|
:total="pageParam.total"
|
v-model:page="pageParam.page"
|
v-model:limit="pageParam.limit"
|
:page-sizes="[10,20,30]"
|
@pagination="getTableData"
|
/>
|
<el-dialog v-model="formVisible" style="width: 66vw; height:90vh;" center :title="isDetail ? '水表开户申请单': '水表开户申请'" align-center destroy-on-close>
|
<div>
|
<accountApply :isDetail = isDetail :rowDetail = rowDetail :isExecute = isExecute @setFormVisible="setFormVisible" @getTableData="getTableData"></accountApply>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref ,reactive} from 'vue'
|
import accountApply from '@/views/workOrderManage/accountApply/index.vue'
|
import { waterMeterApplyApi } from '@/api/workOrderManage/waterMeterApplyApi/index'
|
import { ElMessage } from 'element-plus'
|
import setPostParams from "@/utils/searchParams.js";
|
|
//定义变量内容
|
const queryParams = ref({
|
name: undefined,
|
})
|
const tableData = ref([])
|
// const pagination = ref({
|
// total:0,
|
// currentPage:'',
|
// totalPage:'',
|
// pageSize:10
|
// })
|
const pageParam = ref({
|
total:0,
|
limit:10,
|
page:0,
|
})
|
const setTableList = reactive({
|
// workNumber:'工单号',
|
meterSn:"水表编号",
|
userName: '申请用户',
|
// classifyName:'用户类型',
|
// userPhone: '电话号码',
|
// idCard:'身份证号码',
|
// userAddress:'用户地址',
|
installAddress:'安装地址',
|
installTime:'上门时间',
|
installMoney:"安装金额",
|
installUserName:"安装人员",
|
installStateView:'执行状态',
|
|
})
|
//控制弹窗-添加编辑
|
const formVisible = ref(false)
|
const isDetail = ref(false)
|
const rowDetail = ref()
|
// 添加
|
const addAccount = () =>{
|
formVisible.value = true
|
isDetail.value = false
|
}
|
const setFormVisible = () =>{
|
formVisible.value = false
|
}
|
const getTableData = async (val) => {
|
|
let postParam = setPostParams(val)
|
let { code, data } = await waterMeterApplyApi().searchWaterMeterApply(postParam)
|
if(code == 200) {
|
tableData.value = data.list
|
pageParam.value.total = data.total
|
pageParam.value.limit = data.limit
|
pageParam.value.page = data.page
|
}
|
}
|
const search = () =>{
|
getTableData({keywords:queryParams.value.name})
|
}
|
// 分页
|
// const handleCurrentChange = (val) =>{
|
// getTableData({page:val})
|
// console.log('val2',val)
|
// }
|
//执行相关
|
const isExecute = ref(false)
|
const ToDetail =(row,val) =>{
|
if(val == 2){
|
isExecute.value = true
|
}else{
|
isExecute.value = false
|
}
|
formVisible.value = true
|
isDetail.value = true
|
rowDetail.value = row
|
console.log('row',row)
|
}
|
onMounted(() => {
|
getTableData()
|
})
|
</script>
|
|
<style lang = scss scoped>
|
:deep(.el-dialog){
|
background: #ffffff;
|
}
|
:deep(.el-dialog__body){
|
overflow-y: auto;
|
max-height: 70vh;
|
}
|
</style>
|
