|
<script setup>
|
import userClassify from "@/api/configuration/userClassify";
|
import salePlaceApi from "@/api/configuration/bussinessApi";
|
import { region } from "@/api/basicApi";
|
import TieredCharging from "@/api/configuration/waterPrice";
|
import waterMeterApi from "@/api/waterMeterApi/index";
|
import user from "@/api/system/user";
|
import archivesApi from "@/api/archivesApi/index";
|
import { ElMessage } from 'element-plus'
|
|
import { PREURL } from '@/config/index';
|
import { waterMeterApplyApi } from '@/api/workOrderManage/waterMeterApplyApi/index';
|
import {onMounted, ref} from 'vue';
|
import {areaApi} from "@/api/area/index.js";
|
const emit = defineEmits(['getTableData','setFormVisible'])
|
const props = defineProps({
|
isDetail:{
|
type: Boolean,
|
required: true,
|
default:false
|
},
|
rowDetail:{
|
type: Object,
|
default:{}
|
},
|
isExecute:{
|
type: Boolean,
|
required: true,
|
default:false
|
},
|
})
|
/**
|
* 开户表单信息
|
*/
|
const accountData = ref({
|
workNumber: '',
|
userName: '',
|
userPhone: '',//userPhone
|
idCard: '',
|
classifyId: null,
|
userCode: '',
|
region: '',
|
userAddress: '',//userAddress
|
userUrl:'',//userUrl
|
businessAddress: '',
|
tieredChargingId: null,
|
installState: '',
|
remark: '',
|
operatorUser:'',
|
operatorUserName:'',
|
listDetails: []
|
})
|
// 选中账户Id
|
const accountedData = ref({
|
userId:'',
|
listDetails: []
|
})
|
const waterFormRef = ref()
|
//判断是否已有账户
|
const isNewForm = ref(false)
|
const userNameList = ref()
|
/**
|
* 水表表单信息
|
*/
|
const waterMeterFormList = ref([
|
{
|
id: null,
|
applyId: null,
|
meterSn: '',
|
meterStatus: '',
|
region: '',
|
areaId: '',
|
areaName: '',
|
installAddress: '',
|
installUser: '',
|
installUserName: '',
|
installTime: '',
|
installMoney: null,
|
createTime: null,
|
updateTime: '',
|
installState: null,
|
isDelete: null,
|
}
|
])
|
// 用数组储存多个水表信息中区域form-item的绑定值，方便select选项变化时，不影响其他保单已选区域数据
|
const waterRegionIdlist = ref([' '])
|
// const formVisible = ref()
|
|
const meterSnList = ref([])
|
const operatorUserList = ref([])
|
const accountRegionId = ref('')
|
// const waterRegionId = ref('')
|
// const userDetail = ref()
|
const accountFormRef = ref()
|
const rules = ref({
|
userName: [
|
{ required: true, message: '请输入名称', trigger: 'blur' },
|
{pattern: /^[\u4e00-\u9fa5\\·]*$/, message: '请输入中文或" · "符号', trigger: 'blur'},
|
],
|
userPhone: [
|
{ required: true, message: '请输入电话号码', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
|
],
|
userAddress: [
|
{ required: true, message: '请输入用户地址', trigger: 'blur' }
|
],
|
idCard: [
|
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
{ pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/, trigger: 'blur' ,message:"身份证号格式不正确"}
|
],
|
classifyId: [
|
{ required: true, message: '请选择用户类型', trigger: 'blur' }
|
],
|
region: [
|
{ required: true, message: '请选择区域', trigger: 'blur' }
|
],
|
businessAddress: [
|
{ required: true,message: '请选择营业网点', trigger: 'blur' }
|
],
|
tieredChargingId: [
|
{ required: true, message: '请选择收费配置', trigger: 'blur' },
|
],
|
userUrl: [
|
{ required: true, message: '请上传相关资料', trigger: 'blur' }
|
],
|
operatorUser: [
|
{ required: true, message: '请选择操作人', trigger: 'blur' }
|
],
|
meterSn: [
|
{ required: true, message: '请选择水表编号', trigger: 'blur' }
|
],
|
installAddress: [
|
{ required: true, message: '请输入安装地址', trigger: 'blur' }
|
],
|
installUser: [
|
{ required: true, message: '请输入安装人员', trigger: 'blur' },
|
],
|
installTime: [
|
{ required: true, message: '请选择上门时间', trigger: 'blur' },
|
],
|
installMoney: [
|
{ required: true, message: '请输入安装金额', trigger: 'blur' },
|
{ pattern:/^[1-9][0-9]{0,4}$/, message: '只能输入数字', trigger: 'blur' }
|
]
|
})
|
// select用户类型
|
const userTypeList = ref([]);
|
// select营业网点
|
const businessAddressList = ref([]);
|
// select区域
|
const regionTreeList = ref([])
|
|
// 安装人员选择列表
|
const maintainUserList = ref()
|
const tieredChargingList = ref([])
|
|
/*/**
|
* 添加form表单相关
|
*
|
*/
|
|
//新建账户
|
const setNewForm = () =>{
|
isNewForm.value = true
|
accountedData.value.userId = ''
|
}
|
const concel = () =>{
|
isNewForm.value = false
|
accountData.value = {}
|
}
|
|
//区域相关------------------------------------------------------------------
|
//获取管网父级区域列表
|
const parentAreaList = ref([])
|
const getParentArea = async()=>{
|
let res = await areaApi().getTree('')
|
console.log("分区列表",res.data)
|
parentAreaList.value = res.data
|
}
|
getParentArea()
|
const changeParentTree = (e)=>{
|
// form.value.parentAreaId = e.id
|
waterMeterFormList.value.areaName = e.areaName
|
console.log('e001',e)
|
}
|
//展开所属区域树形， 请求展开区域的下一层子级数据
|
const expandTree = async (data) => {
|
|
//请求展开区域的下一层子级列表数据
|
let res = await region().search(data.code)
|
if(res.code == 200) {
|
res.data.forEach((item)=>{
|
if((item.children == null) && item.level!=4){
|
item.children = [{}]
|
}
|
})
|
data.children = res.data
|
}
|
}
|
//选中区域数据处理
|
const changeTreeValue = (_,nodeData,form,index) => {
|
|
let codelist = getTreeCode(nodeData, 'id')
|
console.log('codelist',codelist)
|
if(form == 1){
|
accountData.value.region = codelist.join()
|
nextTick(()=>{
|
accountRegionId.value = getTreeCode(nodeData, 'name').join(',')
|
})
|
}else{
|
waterMeterFormList.value[index].region = codelist.join()
|
console.log('waterMeterFormList.value001',waterMeterFormList.value)
|
nextTick(()=>{
|
waterRegionIdlist.value[index] = getTreeCode(nodeData, 'name').join(',')
|
})
|
}
|
|
}
|
//表单添加经办人名称
|
const changeOperatorUser = async (val) => {
|
operatorUserList.value.forEach((item) =>{
|
if(item.id == val){
|
accountData.value.operatorUserName = item.nickName
|
}
|
})
|
// accountData.value.operatorUserName = res.data.nickName
|
}
|
//表单添加安装人员名称
|
const selectChange = (val,e)=>{
|
maintainUserList.value.forEach((item) =>{
|
if(item.id == val){
|
waterMeterFormList.value[e].installUserName = item.nickName
|
}
|
})
|
}
|
//从当前选择区域树形查找父级code，组装为[123,456,789](xx省/xx市/xx区)
|
const getTreeCode = (tree, type) => {
|
let codeList = []
|
if(tree.data.level!=1){
|
codeList = codeList.concat(getTreeCode(tree.parent, type))
|
codeList.push(tree.data[type])
|
}else{
|
return [tree.data[type]]
|
}
|
return codeList
|
}
|
//------------------------------------------------------------------
|
//上传文件，添加图片地址信息
|
const uploadData = (data) => {
|
accountData.value.userUrl = data.toString()
|
console.log('url',data)
|
}
|
const addWaterMeterMore = () =>{
|
waterMeterFormList.value.push({
|
id: null,
|
applyId: null,
|
meterSn: '',
|
meterStatus: '',
|
region: '',
|
installAddress: '',
|
installUser: '',
|
installUserName: '',
|
installTime: '',
|
installMoney: null,
|
createTime: null,
|
updateTime: '',
|
installState: null,
|
isDelete: null,
|
})
|
waterRegionIdlist.value.push(' ')
|
// console.log('waterRegionIdlist.value',waterRegionIdlist.value)
|
}
|
const deleteWaterMeterForm = (e) =>{
|
if(waterMeterFormList.value.length > 1){
|
waterMeterFormList.value.splice(e,1)
|
waterRegionIdlist.value.splice(e,1)
|
// console.log('waterRegionIdlist.value',waterRegionIdlist.value)
|
}
|
}
|
/*/
|
*提交表单
|
*/
|
const setWaterMeterList = () =>{
|
//排除空水表
|
let waterList = []
|
if(waterMeterFormList.value){
|
waterMeterFormList.value.forEach((item)=>{
|
if(item.meterSn){
|
waterList.push(item)
|
}
|
})
|
}
|
// 将金额转为数字类型
|
waterList.map((item) =>{
|
if(item.installMoney && item.installMoney != 0 ){
|
item.installMoney = Number(item.installMoney)
|
}else{
|
item.installMoney = null
|
}
|
})
|
return waterList
|
}
|
const submitAccountForm = async() =>{
|
//判断是否已有账户
|
if(!isNewForm.value){
|
let waterList1 = setWaterMeterList()
|
// 加入水表form表单信息
|
accountedData.value.listDetails = waterList1
|
console.log('111',waterList1);
|
//提交申请
|
let res = await waterMeterApplyApi().createWaterMeterApply(accountedData.value)
|
if(res.code == 200){
|
ElMessage({message:"申请已提交！",type:'success'})
|
getTableData()
|
emit('setFormVisible')
|
}
|
}else{
|
accountFormRef.value.validate(async(validate) => {
|
if (validate) {
|
// 将url字符串转数组，方便加imageUrl前缀，再转为字符串
|
// accountData.value.userUrl = accountData.value.userUrl.split(",")
|
// accountData.value.userUrl = accountData.value.userUrl.map((item) => PREURL + item).join()
|
let waterList2 = setWaterMeterList()
|
// 加入水表form表单信息
|
accountData.value.listDetails = waterList2
|
|
// 校验资料图片是否上传
|
if(accountData.value.userUrl){
|
let res = await waterMeterApplyApi().createWaterMeterApply(accountData.value)
|
if(res.code == 200){
|
ElMessage({message:"申请已提交！",type:'success'})
|
getTableData()
|
emit('setFormVisible')
|
}
|
}else{
|
ElMessage({message:"请上传资料！",type:'error'})
|
}
|
}
|
})
|
}
|
}
|
const concelAccountForm = () =>{
|
emit('setFormVisible')
|
}
|
|
/**
|
* @name 执行工单
|
* @description executeType【1待安装 2安装中 3已安装 4撤销工单】
|
**/
|
// 提交接受安装
|
const acceptAccountForm = async() =>{
|
let res = await waterMeterApplyApi().executeWaterMeterApply({id:accountData.value.id,executeType:2})
|
if(res.code == 200){
|
ElMessage({message:'接受成功!',type:'success'})
|
emit('setFormVisible')
|
}else{
|
ElMessage({message:'网络错误，请刷新再试!',type:'error'})
|
}
|
}
|
// 提交完成安装
|
const completeAccountForm = async() =>{
|
let res = await waterMeterApplyApi().executeWaterMeterApply({id:accountData.value.id,executeType:3})
|
if(res.code == 200){
|
ElMessage({message:'完成安装!',type:'success'})
|
emit('setFormVisible')
|
getTableData()
|
}else{
|
ElMessage({message:'网络错误，请刷新再试!',type:'error'})
|
}
|
}
|
// 撤销安装
|
const revokeAccountForm = async() =>{
|
let res = await waterMeterApplyApi().executeWaterMeterApply({id:accountData.value.id,executeType:4})
|
if(res.code == 200){
|
ElMessage({message:'撤销成功!',type:'success'})
|
emit('setFormVisible')
|
getTableData()
|
}else{
|
ElMessage({message:'网络错误，请刷新再试!',type:'error'})
|
}
|
}
|
const getTableData = () =>{
|
emit('getTableData')
|
}
|
onMounted(async() =>{
|
// 进入执行页
|
if(props.isDetail){
|
// 根据该列表行id值获取该申请单详细信息
|
let res0 = await waterMeterApplyApi().getWaterMeterApply(props.rowDetail.id)
|
accountData.value = res0.data
|
console.log("申请详情", res0.data)
|
let res1=await areaApi().get(res0.data.areaId);
|
console.log("分区详情", res1.data)
|
waterMeterFormList.value[0].meterSn = res0.data.meterSn
|
waterMeterFormList.value[0].regionName = res0.data.regionName
|
waterMeterFormList.value[0].installAddress = res0.data.installAddress
|
waterMeterFormList.value[0].installUser = res0.data.installUser
|
waterMeterFormList.value[0].installMoney = res0.data.installMoney
|
waterMeterFormList.value[0].installTime = res0.data.installTime
|
waterMeterFormList.value[0].areaName = res1.data.areaName
|
}else{
|
// 进入申请页
|
accountData.value = {}
|
waterMeterFormList.value = [
|
{
|
id: null,
|
applyId: null,
|
meterSn: '',
|
meterStatus: '',
|
region: '',
|
areaId: null,
|
areaName: '',
|
installAddress: '',
|
installUser: '',
|
installUserName: '',
|
installTime: null,
|
installMoney: null,
|
createTime: null,
|
updateTime: '',
|
installState: null,
|
isDelete: null,
|
}
|
]
|
}
|
let searchDefeult = { limit:10000,page:1}
|
// 获取各select选项列表
|
// 获取营业网点列表
|
let res0 = await salePlaceApi().search(searchDefeult)
|
if(res0.code == 200){
|
businessAddressList.value = res0.data.list
|
}
|
// 获取用户类型
|
let res1 = await userClassify().search({ status: 1,limit: 10000, page: 1})
|
if(res1.code == 200) {
|
userTypeList.value = res1.data.list
|
}
|
//获取区域信息
|
let res2 = await region().search('')
|
if(res2.code == 200) {
|
res2.data.forEach((item)=>{
|
if(item.children == null){
|
item.children = [{}]
|
}
|
})
|
regionTreeList.value = res2.data
|
// regionTreeList.value = listToTree(res2.data)
|
}
|
// 获取水表编号 // limit暂定10000
|
let res3 = await waterMeterApi().getIsUse(0)
|
if(res3.code == 200){
|
meterSnList.value = res3.data
|
}
|
// 请求阶梯类型
|
let res4 = await TieredCharging().search(searchDefeult)
|
if(res4.code == 200){
|
tieredChargingList.value = res4.data.list
|
}
|
// 获取用户档案列表
|
let res5 = await archivesApi().search({limit: 10000, status: 1,page:1})
|
if (res5.code == 200) {
|
userNameList.value = res5.data.list
|
}
|
//获取用户列表，经办人&&维修账号列表选择
|
let res6 = await user().search({limit: 10000, status: 1,page:1})
|
if (res6.code == 200) {
|
operatorUserList.value = res6.data.list
|
maintainUserList.value = res6.data.list
|
}
|
// 获取维修账号列表信息
|
// let res7 = await userApi().searchUser({ limit: 1000, status:1 ,companyId:userDetail.value.customerCompany})
|
// if(res7.code == 200){
|
// maintainUserList.value = res7.data.list
|
// console.log('res2.data',res7.data)
|
// }
|
})
|
|
</script>
|
|
<template>
|
<div class="main">
|
<div class="account-form">
|
<div class="name">开户信息</div>
|
<div>
|
<!-- 已开户用户添加水表信息，通过选择用户名称获取开户信息 -->
|
<p v-if="isDetail ? false : true">*已有账户请选择，无账户请先新建账户</p>
|
<el-form :model="accountedData" inline >
|
<el-form-item v-if= "isDetail ? false : true" style="width: 50%" label="用户名称" prop="userId" >
|
<el-select v-model="accountedData.userId" :disabled="isDetail || isNewForm ? true : false" placeholder="请选择用户名称" clearable>
|
<el-option
|
v-for="item in userNameList"
|
:key="item.value"
|
:label="item.userName"
|
:title="item.userName"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="isDetail ? false : true">
|
<el-button type="primary" @click="setNewForm">新建账户</el-button>
|
<el-button @click="concel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
<!--新建账户表单-->
|
<el-form :model="accountData" :rules="rules" ref="accountFormRef" :label-width="80" inline>
|
<el-form-item v-if="isNewForm || isDetail" label="用户名称" prop="userName">
|
<el-input v-model="accountData.userName" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="用户类型" prop="classifyId" >
|
<el-select v-model="accountData.classifyId" :disabled="isDetail ? true : false" placeholder="请选择用户类型">
|
<el-option
|
v-for="item in userTypeList"
|
:key="item.value"
|
:label="item.name"
|
:title="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="身份证号" prop="idCard">
|
<el-input v-model="accountData.idCard" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="电话号码" prop="userPhone">
|
<el-input v-model="accountData.userPhone" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="营业点" prop="businessAddress">
|
<el-select v-model="accountData.businessAddress" :disabled="isDetail ? true : false" placeholder="请选择营业网点">
|
<el-option
|
v-for="item in businessAddressList"
|
:key="item.value"
|
:label="item.name"
|
:title="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm" label="所属区域" prop="region">
|
<el-tree-select
|
v-model="accountRegionId"
|
:data="regionTreeList"
|
:props="{label:'name', value:'id'}"
|
placeholder="请选择所属区域"
|
filterable
|
highlight-current
|
:check-strictly="true"
|
@node-expand="expandTree"
|
@current-change="(val1,val2) =>changeTreeValue(val1,val2,1)"
|
/>
|
<el-input v-if="isDetail ? true : false" v-model="accountData.regionName" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="用户地址" prop="userAddress">
|
<el-input v-model="accountData.userAddress" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
|
<el-form-item v-if="isNewForm || isDetail" label="收费类型" prop="tieredChargingId">
|
<el-select v-model="accountData.tieredChargingId" filterable placeholder="请选择阶梯收费配置" :disabled="isDetail ? true : false">
|
<el-option
|
v-for="item in tieredChargingList"
|
:key="item.id"
|
:label="item.name"
|
:title="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<br>
|
<div v-if="isNewForm || isDetail" class="upload">
|
<el-form-item label="资料上传" prop="userUrl">
|
<upload-icons @uploadData="uploadData" :imageList="accountData.userUrl" :limit="9" :disabled = 'isDetail ? true : false'></upload-icons>
|
<span style="display: block;">(可上传身份证、房产证等最多9张)</span>
|
</el-form-item>
|
</div>
|
|
<el-form-item v-if="isNewForm || isDetail" label="经办人" prop="operatorUser">
|
<el-select v-model="accountData.operatorUser" @change="changeOperatorUser" filterable placeholder="请选择经办人" :disabled="isDetail ? true : false">
|
<el-option
|
v-for="item in operatorUserList"
|
:key="item.id"
|
:label="item.nickName"
|
:title="item.nickName"
|
:value="item.id"
|
/>
|
</el-select>
|
<!-- <el-input v-model="accountData.operatorUser" :disabled="isDetail ? true : false"></el-input> -->
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="waterMeter-form" >
|
<div class ="name">水表信息</div>
|
<div class = form>
|
<div v-for="(item,index) in waterMeterFormList" :key="index" class="meters-form">
|
<el-form :model="item" ref="waterFormRef" label-width="auto" >
|
<el-form-item label="水表编号" prop="meterSn">
|
<el-select v-model="item.meterSn" :disabled="isDetail ? true : false" clearable placeholder="请选择水表编号">
|
<el-option
|
v-for="(item) in meterSnList"
|
:label="item.name"
|
:title="item.name"
|
:value="item.sn"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="所属区域" prop="region">
|
<el-tree-select
|
v-if="isDetail ? false : true"
|
v-model="waterRegionIdlist[index]"
|
:data="regionTreeList"
|
:props="{label:'name', value:'id'}"
|
placeholder="请选择所属区域"
|
filterable
|
clearable
|
highlight-current
|
:check-strictly="true"
|
@node-expand="expandTree"
|
@current-change="(val1,val2) =>changeTreeValue(val1,val2,2,index)"
|
/>
|
<el-input v-else v-model="item.regionName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="选择DMA区域" prop="areaId">
|
<el-tree-select
|
v-if="isDetail ? false : true"
|
v-model="item.areaId"
|
:data="parentAreaList"
|
clearable
|
:props="{label:'areaName', value:'id'}"
|
placeholder="请选择DMA区域"
|
highlight-current
|
@current-change="changeParentTree"
|
:check-strictly="true"
|
/>
|
<el-input v-else v-model="item.areaName" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="安装地址" prop="installAddress">
|
<el-input v-model="item.installAddress" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
|
<el-form-item label="安装人员" prop="installUser">
|
<el-select v-model="item.installUser" :disabled="isDetail ? true : false" filterable clearable placeholder="请选择安装人员" @change="(val) =>selectChange(val,index)">
|
<el-option
|
v-for="item in maintainUserList"
|
:key="item.id"
|
:label="item.nickName"
|
:title="item.nickName"
|
:value="item.id"
|
/>
|
</el-select>
|
<!-- <el-input v-model="item.installUser" :disabled="isDetail ? true : false"></el-input> -->
|
</el-form-item>
|
|
<el-form-item label="上门时间" prop="installTime">
|
<el-date-picker
|
v-model="item.installTime"
|
type="date"
|
placeholder="请选择安装日期和时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
:disabled="isDetail ? true : false"
|
/>
|
<!-- <el-input v-model="item.installTime" :disabled="isDetail ? true : false"></el-input> -->
|
</el-form-item>
|
|
<el-form-item label="安装费用" prop="installMoney">
|
<el-input v-model="item.installMoney" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
</el-form>
|
<el-button v-if="waterMeterFormList.length > 1 && isDetail == false" type=danger @click="deleteWaterMeterForm(index)">删除</el-button>
|
</div>
|
</div>
|
|
</div>
|
<div class="add-btn">
|
<el-button v-if="isDetail ? false : true" type="primary" @click= addWaterMeterMore>继续添加水表</el-button>
|
</div>
|
<div class="foot-form">
|
<div>
|
<el-form :model="accountData" label-width="68">
|
<el-form-item label="备注" prop="remark" style="width: 50%">
|
<el-input v-model="accountData.remark" :disabled="isDetail ? true : false"></el-input>
|
</el-form-item>
|
<!-- 执行时额外添加创建时间项 -->
|
<el-form-item v-if="isDetail ? true : false" label="申请时间" prop="createTimeView">
|
<el-input v-model="accountData.createTimeView" disabled></el-input>
|
</el-form-item>
|
<el-form-item v-if="isDetail ? true : false" label="执行状态" prop="installStateView">
|
<el-input v-model="accountData.installStateView" disabled></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="submit-btn">
|
<el-button v-if="isDetail ? false : true" size="large" @click="concelAccountForm">取消</el-button>
|
<el-button v-if="isDetail ? false : true" type="primary" size="large" @click="submitAccountForm">提交申请</el-button>
|
</div>
|
<div class="Execution-btn" v-if="props.isExecute == true">
|
<div>
|
<el-button v-if="accountData.installState==1" type="primary" size="large" @click="acceptAccountForm">接受安装</el-button>
|
</div>
|
<div>
|
<el-button v-if="accountData.installState==2" type="primary" size="large" @click="completeAccountForm">完成安装</el-button>
|
</div>
|
<div>
|
<el-button v-if="accountData.installState==1" type="primary" size="large" @click="revokeAccountForm">撤销工单</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.main{
|
background-color: rgb(244, 245, 247);
|
width:100%;
|
height: calc(100% - 30px);
|
border-radius:10px;
|
.account-form{
|
width: 100%;
|
p{
|
margin-left: 2%;
|
font-size: 12px;
|
color: #79bbff;
|
}
|
.el-form{
|
margin:0 auto;
|
width: 96%;
|
//height: 100%;
|
.el-form-item{
|
width: 22%;
|
}
|
.upload{
|
width: 96%;
|
.el-form-item{
|
width: 100%;
|
}
|
}
|
}
|
.name{
|
padding: 20px 0 20px 20px;
|
height: 8%;
|
margin-left: 10px;
|
font-size: 22px;
|
font-weight: 500;
|
color: #414244;
|
}
|
:deep(.el-select__wrapper){
|
width: 100%
|
}
|
|
}
|
.waterMeter-form{
|
width: 100%;
|
margin:0 auto;
|
.name{
|
padding: 20px 0 20px 20px;
|
height: 8%;
|
margin-left: 10px;
|
font-size: 22px;
|
font-weight: 500px;
|
color: #414244;
|
}
|
.form{
|
width: 100%;
|
margin:0 auto;
|
display: flex;
|
flex-wrap: wrap;
|
.meters-form{
|
width: 30%;
|
margin-left:30px;
|
margin-bottom:10px;
|
border: #dcdee2 solid 1px;
|
border-radius: 10px;
|
.el-form{
|
margin:15px;
|
// background-color: #d9dadb;
|
.el-form-item{
|
width: 100%;
|
.el-select{
|
width: 100%;
|
}
|
}
|
}
|
.el-button{
|
margin-bottom:15px;
|
margin-left: 50%;
|
transform:translateX(-50%);
|
}
|
}
|
}
|
}
|
.add-btn{
|
margin: 20px 0;
|
width: 35%;
|
.el-button{
|
margin-left: 50%;
|
transform:translateX(-50%);
|
}
|
}
|
.foot-form{
|
width: 96%;
|
margin:0 auto;
|
.el-form-item{
|
width: 400px
|
}
|
}
|
.submit-btn{
|
width: 100%;
|
margin: 20px 0;
|
height: 5%;
|
display: flex;
|
justify-content: center;
|
.el-button{
|
margin-bottom: 10px;
|
}
|
}
|
.Execution-btn{
|
display: flex;
|
justify-content: center;
|
div{
|
margin: 0 50px 10px 80px ;
|
}
|
}
|
}
|
</style>
|
