|
<script setup >
|
import {onMounted, reactive, ref} from 'vue'
|
import { ElMessage } from 'element-plus'
|
import archivesApi from "@/api/archivesApi/index";
|
import userClassify from "@/api/configuration/userClassify";
|
import salePlaceApi from "@/api/configuration/bussinessApi";
|
import waterMeterApi from "@/api/waterMeterApi/index";
|
import billRecord from "@/api/financial/billRecord/index";
|
import { region } from "@/api/basicApi";
|
import TieredCharging from "@/api/configuration/waterPrice";
|
import {waterMeterAlterationApi} from '@/api/workOrderManage/waterMeterAlterationApi';
|
import {PREURL} from '@/config/index';
|
import setPostParams from "../../../utils/searchParams.js";
|
const { proxy } = getCurrentInstance();
|
//定义table数据
|
const queryParams = ref({
|
name: undefined,
|
})
|
const tableData = ref([])
|
const pageParam = ref({
|
total:0,
|
limit:10,
|
page:0,
|
})
|
const setTableList = reactive({
|
alterationNumber: '过户单编号',
|
meterSn: '过户水表编号',
|
beforeUserName: '过户用户',
|
laterUserName: '承接用户',
|
companyName: '所属公司',
|
executeTypeName:'状态',
|
createUser: '创建人',
|
createTimeView:'创建时间'
|
})
|
//弹窗
|
const formVisible = ref(false)
|
// 添加-过户form表单
|
const accountData = ref({
|
userName: '',
|
userPhone: '',
|
idCard: '',
|
classifyTxt: '',
|
region: '',
|
userCode:'', //水表安装地址
|
url:''
|
|
})
|
const waterData = ref({
|
sn:'',
|
tieredChargingId:'',
|
arrearageAmount:'', //欠费金额
|
address:'', //水表安装地址
|
})
|
const Forms = ref({accountData:accountData.value,waterData:waterData.value})
|
// 添加-承接form表单
|
const alterationFormId = ref({
|
beforeUserId:'',
|
laterUserId:'',
|
meterSn:''
|
})
|
const alterationFormData = ref({
|
beforeUserId:'',
|
meterSn:'',
|
userName: '',
|
phone: '',
|
idCard: '',
|
classifyId: '',
|
listRegion: [],
|
address: '',
|
businessAddress: '',
|
tieredChargingId: '',
|
remark: '',
|
url: ''
|
})
|
const businessAddress = ref()
|
//单独定义form表单中用户名称与水表编号，如果不单独定义，@change方法中给form表单数据赋值时会报错
|
const userNameId = ref()
|
const snId = ref()
|
|
const alterationFormRefNew = ref()
|
const alterationFormRef = ref()
|
const accountFormRef = ref()
|
// 选项列表数据
|
const snList = ref()
|
const userNameList = ref([])
|
const businessAddressList = ref([])
|
const userTypeList = ref([]);
|
const alterationRegionId = ref([]);
|
const tieredChargeList = ref([]);
|
const regionTreeList = ref([]);
|
|
const isShow = ref(false)
|
const confirmFormData = ref()
|
|
const getTableData = async(val) =>{
|
let postParam = setPostParams(val)
|
let res =await waterMeterAlterationApi().searchWaterMeterAlteration(postParam)
|
if(res.code == 200){
|
tableData.value = res.data.list
|
tableData.value.forEach((item) =>{
|
if(item.executeType == 1){
|
item.executeTypeName ='待执行'
|
}else if(item.executeType == 2){
|
item.executeTypeName ='执行中'
|
}else if(item.executeType == 3){
|
item.executeTypeName ='已执行'
|
}else if(item.executeType == 4){
|
item.executeTypeName ='已撤销'
|
}else{
|
item.executeTypeName =''
|
}
|
})
|
pageParam.value.total = res.data.total
|
pageParam.value.limit = res.data.limit
|
pageParam.value.page = res.data.page
|
}
|
}
|
|
const addAccount = async() =>{
|
//打开时清空数据
|
Forms.value.accountData = {
|
userName: '',
|
userPhone: '',
|
idCard: '',
|
classifyTxt: '',
|
region: '',
|
userCode:'',
|
url:''
|
}
|
Forms.value.waterData = {
|
sn:'',
|
tieredChargingId:'',
|
arrearageAmount:'',
|
address:'',
|
}
|
alterationFormId.value = {
|
beforeUserId:'',
|
laterUserId:'',
|
meterSn:''
|
}
|
alterationFormData.value = {
|
beforeUserId:'',
|
meterSn:'',
|
userName: '',
|
phone: '',
|
idCard: '',
|
classifyId: '',
|
listRegion: [],
|
address: '',
|
businessAddress: businessAddress.value,
|
tieredChargingId: '',
|
remark: '',
|
url: ''
|
}
|
alterationRegionId.value = ''
|
userNameId.value = ''
|
snId.value = ''
|
formVisible.value = true
|
proxy.resetForm("alterationFormRefNew");
|
proxy.resetForm("alterationFormRef");
|
proxy.resetForm("accountFormRef");
|
}
|
//条件搜索
|
const search = () =>{
|
getTableData({keywords:queryParams.value.name})
|
}
|
|
const handleChange = async(val) =>{
|
Forms.value.accountData = userNameList.value.find((item) => item.id == val)
|
//将所属区域与详细地址拼接为完整地址，并去掉区域中的#号字符
|
Forms.value.accountData.regionName = Forms.value.accountData.regionName ? Forms.value.accountData.regionName : ""
|
Forms.value.accountData.userAddress = Forms.value.accountData.userAddress ? Forms.value.accountData.userAddress : ""
|
Forms.value.accountData.region = (Forms.value.accountData.regionName +'-'+ Forms.value.accountData.userAddress).replace(/#/g,"")
|
//通过用户id获取该用户下的水表信息
|
let res = await waterMeterApi().getByUser(Forms.value.accountData.id)
|
|
if(res.code == 200){
|
snList.value = res.data
|
}
|
Forms.value.waterData = {}
|
snId.value = ''
|
|
}
|
const handleWaterChange = async (val) => {
|
//通过选中水表sn编号自动获取该水表信息
|
Forms.value.waterData = snList.value.find((item) => item.sn == val)
|
console.log("水表编号", val)
|
let res1 = await billRecord().getMeterArrearsAmount(val)
|
if (res1.code == 200) {
|
Forms.value.waterData.arrearageAmount = res1.data
|
}
|
|
//若欠费金额为空，则显示已结清
|
Forms.value.waterData.arrearageAmount = Forms.value.waterData.arrearageAmount ? Forms.value.waterData.arrearageAmount : '已结清'
|
//将阶梯收费id转为name
|
tieredChargeList.value.forEach((item) => {
|
if (item.id == Forms.value.waterData.tieredChargingId) {
|
Forms.value.waterData.tieredChargingId = item.name
|
}
|
})
|
}
|
//新建账户判断
|
const isNewForm = ref(false)
|
const setNewForm = () =>{
|
isShow.value = true
|
isNewForm.value = true
|
alterationFormId.value.laterUserId = ''
|
}
|
//取消清空数据
|
const concelNewForm = ()=>{
|
isShow.value = false
|
isNewForm.value = false
|
alterationFormData.value = {
|
beforeUserId:'',
|
meterSn:'',
|
userName: '',
|
phone: '',
|
idCard: '',
|
classifyId: '',
|
listRegion: [],
|
address: '',
|
businessAddress: businessAddress.value,
|
tieredChargingId: '',
|
remark: '',
|
url: ''
|
}
|
}
|
// const handleCurrentChange = (val) =>{
|
// getTableData({page:val})
|
// console.log('val2',val)
|
// }
|
|
//上传文件，添加图片地址信息
|
const uploadData = (data) => {
|
alterationFormData.value.url = data.toString()
|
}
|
//区域相关----------------------------------------------------------------------------
|
//展开所属区域树形， 请求展开区域的下一层子级数据
|
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) => {
|
console.log('alterationRegionId',nodeData);
|
let codelist = getTreeCode(nodeData, 'id')
|
// alterationFormData.value.listRegion = codelist.map((item) => item = Number(item));
|
alterationFormData.value.listRegion = codelist.join().split(',')
|
console.log('alterationFormData.value.listRegion',alterationFormData.value.listRegion);
|
nextTick(()=>{
|
alterationRegionId.value = getTreeCode(nodeData, 'name').join(',')
|
})
|
|
}
|
//从当前选择区域树形查找父级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 accountRules = ref({
|
snId: [{required: true, message: '请选择水表编号', trigger: 'blur'}],
|
userNameId: [
|
{required: true, message: '请选择账户名称', trigger: 'blur'}
|
],
|
})
|
//老用户开户表单校验
|
const rules0 = ref({
|
laterUserId: [
|
{required: true, message: '请选择账户名称', trigger: 'blur'}
|
],
|
})
|
//新用户开户表单校验
|
const rules = ref({
|
userName: [
|
{required: true, message: '请输入名称', trigger: 'blur'},
|
{pattern: /^[\u4e00-\u9fa5\\·]*$/, message: '请输入中文或" · "符号', trigger: 'blur'},
|
],
|
phone: [
|
{required: true, message: '请输入电话号码', trigger: 'blur'},
|
{pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
|
],
|
address: [
|
{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'}
|
],
|
listRegion: [
|
{required: true, message: '请选择区域', trigger: 'blur'}
|
],
|
businessAddress: [
|
{required: true, message: '请选择营业网点', trigger: 'blur'}
|
],
|
tieredChargingId: [
|
{required: true, message: '请选择收费配置', trigger: 'blur'},
|
],
|
url: [
|
{required: true, message: '请上传相关资料', trigger: 'blur'}
|
],
|
})
|
//提交过户申请
|
const submitForm = async() =>{
|
if(userNameId.value && snId.value){
|
if(isShow.value){
|
alterationFormRefNew.value.validate(async (validate) =>{
|
if(validate){
|
alterationFormData.value.beforeUserId = userNameId.value
|
alterationFormData.value.meterSn = snId.value
|
// 将url字符串转数组，方便加imageUrl前缀，再转为字符串
|
// let url = alterationFormData.value.url.split(",")
|
// alterationFormData.value.url = url.map((item) => PREURL + item).join()
|
confirmFormData.value = alterationFormData.value
|
|
let res = await waterMeterAlterationApi().creatWaterMeterAlteration(confirmFormData.value)
|
if(res.code == 200){
|
ElMessage({message:"已提交过户申请！",type:'success'})
|
formVisible.value = false
|
getTableData()
|
}
|
}
|
})
|
}else{
|
alterationFormRef.value.validate(async(validate) =>{
|
if(validate){
|
alterationFormId.value.beforeUserId = userNameId.value
|
alterationFormId.value.meterSn = snId.value
|
confirmFormData.value = alterationFormId.value
|
|
let res = await waterMeterAlterationApi().creatWaterMeterAlteration(confirmFormData.value)
|
if(res.code == 200){
|
ElMessage({message:"已提交过户申请！",type:'success'})
|
formVisible.value = false
|
getTableData()
|
}
|
}
|
})
|
}
|
}else{
|
proxy.$modal.msgWarning("请选择账户名称和水表编号！");
|
}
|
}
|
const cancelForm = () =>{
|
formVisible.value = false
|
}
|
// 详情相关
|
const formDetailVisible = ref(false)
|
const formDetail = ref({
|
alterationNumber: '',
|
meterSn: '',
|
companyName: '',
|
createTimeView: '',
|
updateTimeView: '',
|
installAddress: '',
|
beforeUser: {
|
userName:'',
|
idCard: '',
|
userPhone: '',
|
userAddress: '',
|
walletBalance: '',
|
totalWater: '',
|
arrearsStatus: '',
|
},
|
laterUser: {
|
userName:'',
|
idCard: '',
|
userPhone: '',
|
userAddress: '',
|
},
|
})
|
const ToDetail = async(row,val) =>{
|
formDetailVisible.value = true
|
let res = await waterMeterAlterationApi().getWaterMeterAlteration(row.id)
|
console.log('row',row)
|
if(res.code == 200){
|
formDetail.value = res.data
|
}
|
if(val === 2){
|
isExecute.value = true
|
}else{
|
isExecute.value = false
|
}
|
}
|
//执行相关
|
const isExecute = ref(false)
|
// 提交确认过户
|
const acceptAccountForm = async() =>{
|
let res = await waterMeterAlterationApi().executeWaterMeterAlteration(formDetail.value.id,3)
|
if(res.code == 200){
|
ElMessage({message:'过户成功!',type:'success'})
|
}
|
formDetailVisible.value = false
|
getTableData()
|
}
|
|
onMounted(async() => {
|
getTableData()
|
|
// 获取用户类型列表
|
let res1 = await userClassify().search({ status: 1,limit: 10000, page: 1})
|
if(res1.code == 200) {
|
userTypeList.value = res1.data.list
|
}
|
|
//获取区域列表
|
let res3 = await region().search('')
|
if(res3.code == 200) {
|
res3.data.forEach((item)=>{
|
if(item.children == null){
|
item.children = [{}]
|
}
|
})
|
regionTreeList.value = res3.data
|
}
|
// 获取用户档案列表
|
|
let res4 = await archivesApi().search({limit: 10000, status: 1,page:1})
|
if (res4.code == 200) {
|
userNameList.value = res4.data.list
|
}
|
|
let res5 = await salePlaceApi().search({limit:10,page:1})
|
if(res5.code == 200){
|
businessAddressList.value = res5.data.list
|
}
|
|
// 请求阶梯类型列表
|
let res6 = await TieredCharging().search({ limit: 100,page:1})
|
if(res6.code == 200){
|
tieredChargeList.value = res6.data.list
|
}
|
})
|
</script>
|
<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" 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">查看</el-button>
|
<el-button v-if="scope.row.executeType == 1 || scope.row.executeType == 2" @click="ToDetail(scope.row,2)" link type="primary" icon="EditPen" >执行</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"
|
/>
|
<el-dialog v-model="formVisible" title="水表过户" center align-center >
|
<div class="main">
|
<p>过户人信息</p>
|
<el-form class="form-box1" :model="Forms.accountData" :rules="accountRules" ref="accountFormRef" label-width="auto" inline>
|
<el-form-item label="账户名称:" prop="userNameId">
|
<el-select v-model="userNameId" 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="classifyTxt" >
|
<span>{{Forms.accountData.classifyTxt }}</span>
|
</el-form-item>
|
|
<el-form-item label="过户水表编号:" prop="snId">
|
<el-select v-model="snId" placeholder="请选择水表编号" @change=handleWaterChange>
|
<el-option
|
v-for="(item) in snList"
|
:label="item.sn"
|
:title="item.sn"
|
:value="item.sn"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="用户户号:" prop="userCode">
|
<span>{{Forms.accountData.userCode}}</span>
|
</el-form-item>
|
|
<el-form-item label="身份证号:" prop="idCard">
|
<span>{{Forms.accountData.idCard}}</span>
|
</el-form-item>
|
|
<el-form-item label="开户地址:" prop="region">
|
<span>{{Forms.accountData.region}}</span>
|
</el-form-item>
|
|
<el-form-item label="电话号码:" prop="userPhone">
|
<span>{{Forms.accountData.userPhone}}</span>
|
</el-form-item>
|
|
<el-form-item label="欠费金额:" prop="arrearageAmount">
|
<span>{{Forms.waterData.arrearageAmount}}</span>
|
</el-form-item>
|
|
|
<el-form-item label="水表安装地址:" prop="address">
|
<span>{{Forms.waterData.address}}</span>
|
</el-form-item>
|
|
<el-form-item label="收费类型:" prop="tieredChargingId">
|
<span>{{Forms.waterData.tieredChargingId}}</span>
|
</el-form-item>
|
<br>
|
<div class="upload">
|
<el-form-item label="用户资料:" prop="url" >
|
<upload-icons @uploadData="uploadData" :imageList="Forms.accountData.url" :limit="9" :disabled="true"></upload-icons>
|
<span style="display: block;">(身份证、房产证等)</span>
|
</el-form-item>
|
</div>
|
</el-form>
|
<!-- 承接人为老用户 -->
|
<p>承接人信息</p>
|
<div class="form2">
|
<div class="formUp">
|
<el-form class="form-box1" :model="alterationFormId" :rules="rules0" ref="alterationFormRef" label-width="auto" inline>
|
<el-form-item label="承接用户:" prop="laterUserId" >
|
<el-select v-model="alterationFormId.laterUserId" :disabled="isNewForm ? true : false" filterable placeholder="请选择承接用户">
|
<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>
|
<el-button type="primary" @click="setNewForm">新建账户</el-button>
|
<el-button @click="concelNewForm">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 承接人为新用户 -->
|
<el-form class="form-box1" v-if="isShow" :rules="rules" :model="alterationFormData" ref="alterationFormRefNew" label-width="auto" inline>
|
<el-form-item label="用户名称:" prop="userName">
|
<el-input v-model="alterationFormData.userName" ></el-input>
|
</el-form-item>
|
|
<el-form-item label="电话号码:" prop="phone">
|
<el-input v-model="alterationFormData.phone" ></el-input>
|
</el-form-item>
|
|
<el-form-item label="身份证号:" prop="idCard">
|
<el-input v-model="alterationFormData.idCard" ></el-input>
|
</el-form-item>
|
|
<el-form-item label="用户类型:" prop="classifyId" >
|
<el-select v-model="alterationFormData.classifyId" 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 label="所属区域:" prop="listRegion">
|
<el-tree-select
|
v-model="alterationRegionId"
|
:data="regionTreeList"
|
:props="{label:'name', value:'id'}"
|
placeholder="请选择所属区域"
|
filterable
|
highlight-current
|
:check-strictly="true"
|
@node-expand="expandTree"
|
@current-change="changeTreeValue"
|
/>
|
</el-form-item>
|
|
<el-form-item label="用户地址:" prop="address">
|
<el-input v-model="alterationFormData.address" ></el-input>
|
</el-form-item>
|
|
<el-form-item label="营业点:" prop="businessAddress">
|
<el-select v-model="alterationFormData.businessAddress" 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 label="收费类型:" prop="tieredChargingId">
|
<el-select v-model="alterationFormData.tieredChargingId" filterable placeholder="请选择阶梯收费配置">
|
<el-option
|
v-for="item in tieredChargeList"
|
:key="item.id"
|
:label="item.name"
|
:title="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="备注:" prop="remark">
|
<el-input type="textarea" v-model="alterationFormData.remark" maxlength="200" size="large" ></el-input>
|
</el-form-item>
|
<br>
|
<div class="upload">
|
<el-form-item label="资料上传:" prop="url">
|
<upload-icons @uploadData="uploadData" :imageList="alterationFormData.url" :limit="9" ></upload-icons>
|
<span style="display: block;">(可上传身份证、房产证等最多9张)</span>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div class="submit-btn">
|
<el-button size="large" @click="cancelForm">取消</el-button>
|
<el-button type="primary" size="large" @click="submitForm">确认过户</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog v-model="formDetailVisible" :title="isExecute ? '水表过户确认' : '水表过户详情'" style="width: 60vw;" center align-center >
|
<div class="detail">
|
<div class="item">
|
<div class="title">过户单编号:</div>
|
<div>{{ formDetail.alterationNumber }}</div>
|
</div>
|
<div class="item">
|
<div class="title">水表唯一编号:</div>
|
<div>{{ formDetail.meterSn }}</div>
|
</div>
|
<div class="item">
|
<div class="title">所属公司名称:</div>
|
<div>{{ formDetail.companyName }}</div>
|
</div>
|
<div class="item">
|
<div class="title">水表安装地址:</div>
|
<div>{{ formDetail.installAddress }}</div>
|
</div>
|
<div class="item">
|
<div class="title">过户人:</div>
|
<div>{{ formDetail.beforeUser.userName }}</div>
|
</div>
|
<div class="item">
|
<div class="title">过户人身份证号:</div>
|
<div>{{ formDetail.beforeUser.idCard }}</div>
|
</div>
|
<div class="item">
|
<div class="title">过户人电话号码:</div>
|
<div>{{ formDetail.beforeUser.userPhone }}</div>
|
</div>
|
<div class="item">
|
<div class="title">过户人地址:</div>
|
<div>{{ formDetail.beforeUser.regionName + formDetail.beforeUser.userAddress }}</div>
|
</div>
|
<div class="item">
|
<div class="title">承接人:</div>
|
<div>{{ formDetail.laterUser.userName }}</div>
|
</div>
|
<div class="item">
|
<div class="title">承接人身份证号:</div>
|
<div>{{ formDetail.laterUser.idCard }}</div>
|
</div>
|
<div class="item">
|
<div class="title">承接人电话:</div>
|
<div>{{ formDetail.laterUser.userPhone }}</div>
|
</div>
|
<div class="item">
|
<div class="title">承接人地址:</div>
|
<div>{{ formDetail.laterUser.regionName + formDetail.laterUser.userAddress }}</div>
|
</div>
|
<div class="item">
|
<div>创建时间:</div>
|
<div>{{ formDetail.createTimeView }}</div>
|
</div>
|
<div class="item">
|
<div>修改时间:</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.executeType==1" type="primary" size="large" @click="acceptAccountForm">确认过户</el-button>
|
</div>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.main{
|
width: 100%;
|
height: 100%;
|
// background-color: #f3f5f8;
|
border-radius: 15px;
|
.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;
|
}
|
};
|
p{
|
margin-left: 20px;
|
font-size: 22px;
|
font-weight: 500;
|
color: #414244;
|
};
|
.el-form {
|
padding: 20px;
|
width: 94%;
|
margin: 0 auto;
|
.upload{
|
.el-form-item{
|
width:90%;
|
}
|
}
|
.el-form-item{
|
width:45%;
|
}
|
}
|
.submit-btn{
|
display: flex;
|
justify-content: center;
|
.el-button{
|
margin: 10px;
|
}
|
}
|
.add-btn{
|
width: 100%;
|
height: 80px;
|
.el-button{
|
margin: 25px 0 0 2.5%;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
.detail{
|
display:flex;
|
justify-content:flex-start;
|
width:100%;
|
flex-wrap:wrap;
|
padding-left: 50px;
|
.item{
|
margin-bottom: 15px;
|
width:45%;
|
font-size: 18px;
|
display: flex;
|
.title{
|
color: #696969;
|
margin-right: 10px;
|
}
|
}
|
}
|
.Execution-btn{
|
display: flex;
|
justify-content: center;
|
div{
|
margin: 0 10px 10px 10px ;
|
}
|
}
|
.formUp{
|
margin-bottom: 20px;
|
}
|
.form-box1{
|
padding-top: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
width: 98%;
|
justify-content:flex-start;
|
border-radius: 10px;
|
box-shadow: 0 0 5px 1px #ecedee;
|
background-color: #ffffff;
|
margin:0 auto;
|
.el-form-item{
|
width: 46%;
|
}
|
}
|
</style>
|
