提交 f03a22f3 authored 作者: 何忠建's avatar 何忠建

优化调整

上级 b1280e8d
<template>
<a-spin :spinning="confirmLoading">
<div class="title-top">
<h3>{{title}}</h3>
<div class="button">
<a-button @click="toReturn">返回</a-button>
<a-button type="danger" @click="onExamine(2)" v-if="pageType == '2'">审核驳回</a-button>
<a-button type="primary" @click="onExamine(1)" v-if="pageType == '2'">审核通过</a-button>
<a-button type="primary" @click="onExamine(3)" v-if="pageType == '3'">确认</a-button>
</div>
</div>
<j-form-container :disabled="true">
<a-form-model ref="form" :model="model" slot="detail">
<a-card title="基本信息">
<a-row>
<a-col :span="12">
<a-form-model-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName">
<a-input v-model="model.propertyName" placeholder="订单编号"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="creditCode">
<a-input v-model="model.creditCode" placeholder="提交时间"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="提交人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
<a-input-number v-model="model.registCapital" :min="1" placeholder="提交人" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="结算金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
<a-input-number v-model="model.registCapital" :min="1" placeholder="结算金额" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="结算方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
<a-input-number v-model="model.registCapital" :min="1" placeholder="结算方式" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contactName">
<a-input v-model="model.contactName" placeholder="备注"></a-input>
</a-form-model-item>
</a-col>
</a-row>
</a-card>
</a-form-model>
</j-form-container>
<a-card title="对账信息" style="margin-top: 10px;">
<div>
<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
:dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
@change="handleTableChange">
</a-table>
</div>
</a-card>
</a-spin>
</template>
<script>
const mapZoom = [5, 8, 10, 12]
let timer = null
import { auditPropertyApi } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
const columns = [
{
title: '订单编号',
dataIndex: 'id',
key: 'id',
align: 'center',
},
{
title: '提交时间',
dataIndex: 'reconciliationBeginDate',
key: 'reconciliationBeginDate',
align: 'center',
},
{
title: '用户账号',
dataIndex: 'creditCode',
key: 'creditCode',
align: 'center',
},
{
title: '分利金额',
dataIndex: 'propertyName',
key: 'propertyName',
align: 'center',
},
{
title: '支付方式',
dataIndex: 'reconciliationEndDate',
key: 'reconciliationEndDate',
align: 'center',
},
{
title: '订单来源',
dataIndex: 'reconciliationAmount',
key: 'reconciliationAmount',
align: 'center',
},
{
title: '订单状态',
dataIndex: 'updateTime',
key: 'updateTime',
align: 'center',
},
{
title: '备注',
dataIndex: 'empowerCommunityNum',
key: 'empowerCommunityNum',
align: 'center',
},
{
title: '所属平台',
dataIndex: 'auditStatus',
key: 'auditStatus',
align: 'center',
},
{
title: '所属小区',
dataIndex: 'companyAuditStatus',
key: 'companyAuditStatus',
// customRender: function (text) {
// return filterDictTextByCache('companyAuditStatus', text)
// },
},
]
export default {
name: 'SettlementDetails',
inject: [],
mixins: [JeecgListMixin],
data() {
return {
title: '详情',
pageType: '',
pcaa: this.$Jpcaa,
model: {
propertyName: '234234234',
creditCode: '2023-03-22',
legalName: '2023-06-22',
registCapital: 'ADMIN',
contactName: '2023-06-23',
image: '',
},
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
url: {
queryById: '/property-central/property/propertySettled/queryById',
list: '/property-central/property/communityReconciliation/communityAccountPage',
},
costList: [],
mapRef: null,
columns: columns,
loading: false,
dataSource: [
{
id: 'JD2394231',
creditCode: '18000000000',
propertyName: 20000,
reconciliationBeginDate: '2023-01-01',
reconciliationEndDate: '微信',
reconciliationAmount: '小程序',
updateTime: '未对账',
empowerCommunityNum: '备注',
auditStatus: 'XXX物业集团',
companyAuditStatus: '花园小区',
},
{
id: 'JD2394232',
creditCode: '18000000000',
propertyName: 20000,
reconciliationBeginDate: '2023-01-01',
reconciliationEndDate: '微信',
reconciliationAmount: '小程序',
updateTime: '未对账',
empowerCommunityNum: '备注',
auditStatus: 'XXX物业集团',
companyAuditStatus: '花园小区',
},
{
id: 'JD2394233',
creditCode: '18000000000',
propertyName: 20000,
reconciliationBeginDate: '2023-01-01',
reconciliationEndDate: '微信',
reconciliationAmount: '小程序',
updateTime: '未对账',
empowerCommunityNum: '备注',
auditStatus: 'XXX物业集团',
companyAuditStatus: '花园小区',
},
{
id: 'JD2394234',
creditCode: '18000000000',
propertyName: 20000,
reconciliationBeginDate: '2023-01-01',
reconciliationEndDate: '微信',
reconciliationAmount: '小程序',
updateTime: '未对账',
empowerCommunityNum: '备注',
auditStatus: 'XXX物业集团',
companyAuditStatus: '花园小区',
},
],
}
},
methods: {
async onLoadCostList() {
//let data = await getPropertyChargruleListApi()
this.costList = data.result
},
async getPageDetail() {
//let { result } = await getPropertyDetailApi({ id: this.$route.query.id })
this.edit(result)
if (result.provinceName) {
this.getLongitude(
result.provinceName,
result.provinceName + result.cityName + result.countyName + result.addressInfo,
mapZoom[3]
)
}
},
toReturn() {
this.$router.go(-1)
},
contactPhoneChange(e) {
if (!this.model.adminLoginName) {
this.model.adminLoginName = e.target.value
}
},
edit(record) {
this.model = Object.assign({}, record)
this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
this.visible = true
},
onExamine(type) {
// const that = this
// if (type == 1) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'auditPass',
// }).then((res) => {
// that.$message.success('审核通过成功')
// that.$emit('ok')
// this.toReturn()
// })
// } else if (type == 2) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'refuse',
// }).then((res) => {
// that.$message.success('审核驳回成功')
// this.toReturn()
// })
// }
},
addressChange(val) {
const province = Object.keys(val[0])[0]
const city = Object.keys(val[1])[0]
const county = Object.keys(val[2])[0]
this.model.provinceName = val[0][province]
this.model.provinceCode = province
this.model.cityName = val[1][city]
this.model.cityCode = city
this.model.countyName = val[2][county]
this.model.countyCode = county
if (this.model.addressInfo) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo,
mapZoom[3]
)
}
},
addressBlur(val) {
if (this.model.provinceName) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value,
mapZoom[3]
)
}
},
getAddress(e) {
let _this = this
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder()
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function (result) {
if (result) {
_this.mapRef.clearOverlays()
_this.model.registAdress = [
result.addressComponents.province,
result.addressComponents.city,
result.addressComponents.district,
]
_this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
_this.model.longitude = result.point.lng
_this.model.latitude = result.point.lat
_this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
console.log(result)
}
})
},
positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
var point = new BMapGL.Point(mapCenterLng, mapCenterLat) // 创建点坐标
this.mapRef.centerAndZoom(point, mapzoom)
var marker = new BMapGL.Marker(point, { title: address }) // 创建标注
this.mapRef.addOverlay(marker) // 将标注添加到地图中
let _this = this
// marker.addEventListener("click", function(){
var label = new BMapGL.Label(address, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, -55), // 设置标注的偏移量
})
_this.mapRef.addOverlay(label) // 将标注添加到地图中
label.setStyle({
// 设置label的样式
color: '#333',
fontSize: '14px',
padding: '4px 10px',
border: '1px solid #1E90FF',
borderRadius: '4px',
transform: 'translateX(-40%)',
})
// });
},
getLongitude(city, address, zoom) {
let _this = this
var myGeo = new BMapGL.Geocoder()
myGeo.getPoint(
address,
function (point) {
if (point) {
_this.mapRef.clearOverlays()
_this.model.longitude = point.lng
_this.model.latitude = point.lat
_this.positionMap(point.lng, point.lat, zoom, address)
} else {
console.log('您选择的地址没有解析到结果!')
}
},
city
)
},
submitForm() {
const that = this
// 触发表单验证
this.$refs.form.validate((valid) => {
if (valid) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
//this.model.registAdress = undefined
httpAction(httpurl, this.model, method)
.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
this.toReturn()
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
})
}
})
},
},
mounted() {
//备份model原始值
//this.modelDefault = JSON.parse(JSON.stringify(this.model))
// this.onLoadCostList()
this.pageType = this.$route.query.type
if (this.$route.query.type == '1') {
this.title = '详情'
} else if (this.$route.query.type == '2') {
this.title = '审核'
} else if (this.$route.query.type == '3') {
this.title = '拨款'
}
console.log(this.title)
console.log(this.pageType)
// if (this.$route.query.id) {
// this.getPageDetail()
// }
},
}
</script>
<style lang="less" scoped>
.title-top {
background: #fff;
padding: 0 25px;
line-height: 50px;
height: 50px;
margin-bottom: 5px;
h3 {
font-weight: bold;
display: inline-block;
}
.button {
float: right;
.ant-btn {
margin-left: 15px;
}
}
}
</style>
<style>
.area-select {
width: 100% !important;
}
</style>
\ No newline at end of file
......@@ -4,13 +4,11 @@
<h3>{{title}}</h3>
<div class="button">
<a-button @click="toReturn">返回</a-button>
<a-button type="danger" @click="onExamine(2)" v-if="pageType == '2'">审核驳回</a-button>
<a-button type="primary" @click="onExamine(1)" v-if="pageType == '2'">审核通过</a-button>
<a-button type="primary" @click="onExamine(3)" v-if="pageType == '3'">确认</a-button>
<a-button type="primary" @click="toReconciliation()" v-if="pageType == 'add'">确认结算</a-button>
</div>
</div>
<j-form-container :disabled="true">
<j-form-container :disabled="true" v-if="pageType == 'detail'">
<a-form-model ref="form" :model="model" slot="detail">
<a-card title="基本信息">
<a-row>
......@@ -49,13 +47,57 @@
</a-form-model>
</j-form-container>
<a-card title="对账信息" style="margin-top: 10px;">
<a-button slot="extra" type="primary" @click="onStatements()" v-if="pageType == 'add'">选择对账单</a-button>
<div>
<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
:dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
@change="handleTableChange">
:dataSource="selectedList" :pagination="false" :loading="loading" class="j-table-force-nowrap">
</a-table>
</div>
</a-card>
<a-modal centered title="选择对账单" :visible="visibleStatements" @ok="statementsOk" @cancel="statementsCancel"
width="60%">
<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
:dataSource="dataStatements" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
@change="handleTableChange"
:rowSelection="{selectedRowKeys: selectedRowKeys,onSelect:onSelect,onChange: onSelectChange}">
</a-table>
</a-modal>
<a-modal centered title="申请结算" :visible="visibleReconciliation" :confirm-loading="confirmLoading" @ok="handleOk"
@cancel="handleCancel">
<a-form>
<a-row>
<a-col :span="24">
<a-form-model-item label="结算总金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName"
style="width: 100%;margin-bottom: 10px;">
<a-input v-model="model.name1" placeholder="结算总金额"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="结算日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName"
style="width: 100%;margin-bottom: 10px;">
<a-input v-model="model.propertyName" placeholder="结算日期"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="结算方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName"
style="width: 100%;margin-bottom: 10px;">
<a-input v-model="model.propertyName" placeholder="结算方式"></a-input>
</a-form-model-item>
</a-col> <a-col :span="24">
<a-form-model-item label="选择银行卡" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName"
style="width: 100%;margin-bottom: 10px;">
<a-input v-model="model.propertyName" placeholder="选择银行卡"></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="propertyName"
style="width: 100%;">
<a-textarea v-model="model.propertyName" :auto-size="{ minRows: 4, maxRows: 6 }" />
</a-form-model-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</a-spin>
</template>
......@@ -126,9 +168,7 @@ const columns = [
title: '所属小区',
dataIndex: 'companyAuditStatus',
key: 'companyAuditStatus',
// customRender: function (text) {
// return filterDictTextByCache('companyAuditStatus', text)
// },
align: 'center',
},
]
export default {
......@@ -156,18 +196,20 @@ export default {
xs: { span: 24 },
sm: { span: 16 },
},
visibleStatements: false,
confirmLoading: false,
selectedList: [],
selectionRows: [],
selectedRowKeys: [],
visibleReconciliation: false,
url: {
queryById: '/property-central/property/propertySettled/queryById',
list: '/property-central/property/communityReconciliation/communityAccountPage',
},
costList: [],
mapRef: null,
columns: columns,
loading: false,
dataSource: [
dataStatements: [
{
id: 'JD2394231',
creditCode: '18000000000',
......@@ -219,6 +261,17 @@ export default {
],
}
},
created() {
this.pageType = this.$route.query.type
if (this.$route.query.type == 'add') {
this.title = '新增'
} else if (this.$route.query.type == 'detail') {
this.title = '详情'
}
if (this.$route.query.id) {
this.getPageDetail()
}
},
methods: {
async onLoadCostList() {
//let data = await getPropertyChargruleListApi()
......@@ -238,127 +291,52 @@ export default {
toReturn() {
this.$router.go(-1)
},
contactPhoneChange(e) {
if (!this.model.adminLoginName) {
this.model.adminLoginName = e.target.value
//选择对账单
onStatements() {
this.visibleStatements = true
},
onSelect(record, selected) {
if (selected === true) {
this.selectedCurrently = record
}
},
edit(record) {
this.model = Object.assign({}, record)
this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
this.visible = true
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectionRows = selectedRows
},
onExamine(type) {
// const that = this
// if (type == 1) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'auditPass',
// }).then((res) => {
// that.$message.success('审核通过成功')
// that.$emit('ok')
// this.toReturn()
// })
// } else if (type == 2) {
// return auditPropertyApi({
// id: this.$route.query.id,
// auditStatus: 'refuse',
// }).then((res) => {
// that.$message.success('审核驳回成功')
// this.toReturn()
// })
// }
statementsOk() {
this.selectedList = this.selectionRows
this.visibleStatements = false
this.confirmLoading = false
},
addressChange(val) {
const province = Object.keys(val[0])[0]
const city = Object.keys(val[1])[0]
const county = Object.keys(val[2])[0]
this.model.provinceName = val[0][province]
this.model.provinceCode = province
this.model.cityName = val[1][city]
this.model.cityCode = city
this.model.countyName = val[2][county]
this.model.countyCode = county
if (this.model.addressInfo) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + this.model.addressInfo,
mapZoom[3]
)
}
statementsCancel(e) {
this.visibleStatements = false
},
addressBlur(val) {
if (this.model.provinceName) {
this.getLongitude(
this.model.provinceName,
this.model.provinceName + this.model.cityName + this.model.countyName + val.target.value,
mapZoom[3]
)
//申请对账
toReconciliation(record) {
if (this.selectionRows.length > 0) {
this.visibleReconciliation = true
let list = this.selectedList
let sum = 0
for (var i = 0; i < list.length; i++) {
sum += list[i].propertyName
}
this.model.name1 = sum
} else {
this.$message.warning('选择对账单')
}
},
getAddress(e) {
let _this = this
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder()
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function (result) {
if (result) {
_this.mapRef.clearOverlays()
_this.model.registAdress = [
result.addressComponents.province,
result.addressComponents.city,
result.addressComponents.district,
]
_this.model.addressInfo = result.addressComponents.street + result.addressComponents.streetNumber
_this.model.longitude = result.point.lng
_this.model.latitude = result.point.lat
_this.positionMap(e.latlng.lng, e.latlng.lat, mapZoom[3], result.address)
console.log(result)
}
})
handleOk(e) {
this.confirmLoading = true
setTimeout(() => {
this.visibleReconciliation = false
this.confirmLoading = false
}, 2000)
},
positionMap(mapCenterLng, mapCenterLat, mapzoom, address) {
var point = new BMapGL.Point(mapCenterLng, mapCenterLat) // 创建点坐标
this.mapRef.centerAndZoom(point, mapzoom)
var marker = new BMapGL.Marker(point, { title: address }) // 创建标注
this.mapRef.addOverlay(marker) // 将标注添加到地图中
let _this = this
// marker.addEventListener("click", function(){
var label = new BMapGL.Label(address, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, -55), // 设置标注的偏移量
})
_this.mapRef.addOverlay(label) // 将标注添加到地图中
label.setStyle({
// 设置label的样式
color: '#333',
fontSize: '14px',
padding: '4px 10px',
border: '1px solid #1E90FF',
borderRadius: '4px',
transform: 'translateX(-40%)',
})
// });
},
getLongitude(city, address, zoom) {
let _this = this
var myGeo = new BMapGL.Geocoder()
myGeo.getPoint(
address,
function (point) {
if (point) {
_this.mapRef.clearOverlays()
_this.model.longitude = point.lng
_this.model.latitude = point.lat
_this.positionMap(point.lng, point.lat, zoom, address)
} else {
console.log('您选择的地址没有解析到结果!')
}
},
city
)
handleCancel(e) {
this.visibleReconciliation = false
},
submitForm() {
const that = this
// 触发表单验证
......@@ -392,24 +370,7 @@ export default {
})
},
},
mounted() {
//备份model原始值
//this.modelDefault = JSON.parse(JSON.stringify(this.model))
// this.onLoadCostList()
this.pageType = this.$route.query.type
if (this.$route.query.type == '1') {
this.title = '详情'
} else if (this.$route.query.type == '2') {
this.title = '审核'
} else if (this.$route.query.type == '3') {
this.title = '拨款'
}
console.log(this.title)
console.log(this.pageType)
// if (this.$route.query.id) {
// this.getPageDetail()
// }
},
mounted() {},
}
</script>
<style lang="less" scoped>
......
......@@ -27,6 +27,10 @@
</span>
</a-row>
</a-form>
</div>
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="propertyDetails(1)" type="primary">申请结算</a-button>
</div>
<!-- table区域-begin -->
<div>
......@@ -34,8 +38,7 @@
:dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a type="primary" @click="propertyDetails()">详情</a>
<a type="primary" @click="toReconciliation(record)" style="margin-left: 10px;">申请结算</a>
<a type="primary" @click="propertyDetails(2,record)">详情</a>
</span>
</a-table>
......@@ -286,9 +289,15 @@ export default {
},
methods: {
propertyDetails(type, id) {
this.$router.push({
path: '/benefiting/SettlementDetails?id=' + id + '&type=' + type,
})
if (type == 1) {
this.$router.push({
path: '/benefiting/SettlementDetails?type=add',
})
}else if (type == 2) {
this.$router.push({
path: '/benefiting/SettlementDetails?type=detail&id=' + id,
})
}
},
onChangeData(date, dateString) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论