zfire-newmall-admin/src/views/auxiliaryFittings/projectAttachmentManage/detail.vue

<template>
	<div class="s-page">
		<el-page-header @back="goBack" :content="title"></el-page-header>
		<el-divider></el-divider>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>项目信息</span>
			</div>
			<div class="mymain-container">
				<el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
					<el-row :gutter="20" justify="start">
						<el-col :span="12">
							<el-form-item label="所属商户" :required="true" >
								<el-input type="text" :value="companyName" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="工程名称" :required="true">
								<el-input type="text" v-model="formData.projectName" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工程编号" :required="true">
								<el-input type="text" disabled v-model="formData.projectNo" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="负责人" :required="true">
								<el-input type="text" disabled v-model="formData.manger" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系电话" :required="true">
								<el-input type="text" disabled v-model="formData.mobile" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="项目时间" :required="true">
								<el-date-picker
									style="width:50%"
								    v-model="formData.startTime"
								    type="date"
									:disabled="true"
									value-format="yyyy-MM-dd"
								    placeholder="开始日期">
								</el-date-picker>
								<el-date-picker
									style="width:50%"
								    v-model="formData.endTime"
								    type="date"
									:disabled="true"
									value-format="yyyy-MM-dd"
								    placeholder="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="项目地址" :required="true">
								<el-row>
									<el-col :span="5" style="margin-right: 12px;">
										<el-input type="text" v-model="formData.province" disabled placeholder="请选择省"></el-input>
									</el-col>
									<el-col :span="5" style="margin-right: 12px;">
										<el-input type="text" v-model="formData.city" disabled placeholder="请选择市"></el-input>
									</el-col>
									<el-col :span="5" style="margin-right: 12px;">
										<el-input type="text" v-model="formData.area" disabled placeholder="请选择区"></el-input>
									</el-col>
									<el-col :span="8">
										<el-input type="text" v-model="formData.street" disabled placeholder="请选择街道"></el-input>
									</el-col>
								</el-row>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="address">
								<el-row :gutter="20">
									<el-col :span="24">
										<el-input type="text" v-model="formData.address" disabled placeholder="详细地址"></el-input>
									</el-col>
									<!-- <el-col :span="2">
										<geographicalPosi :disabled="formType==2" :formData="this.formData" @selectPosi="selectAddress"/>
									</el-col> -->
								</el-row>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="项目说明">
								<el-input type="textarea" :rows="4" disabled v-model="formData.remark" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="销售订单数" :required="true">
								<el-input type="text" disabled v-model="detail.salesNum" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="销售金额" :required="true">
								<el-input type="text" disabled v-model="detail.salesPrice" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="返还单数量" :required="true">
								<el-input type="text" disabled v-model="detail.retNum" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="退货金额" :required="true">
								<el-input type="text" disabled v-model="detail.retPrice" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="应收金额" :required="true">
								<el-input type="text" disabled v-model="detail.price" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="已收金额" :required="true">
								<el-input type="text" disabled v-model="detail.givePrice" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="待收金额" :required="true">
								<el-input type="text" disabled v-model="detail.waitPrice" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>收款信息</span>
			</div>
			<div class="mymain-container">
				<el-form ref="formData1" :rules="rules1" :model="formData1" label-width="110px" size="small" label-position="left">
					<el-row :gutter="20" justify="start">
						<el-col :span="24">
							<el-form-item label="收款金额" prop="price">
								<el-input type="text" v-model="formData1.price" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="收款凭证" prop="fileUrl">
								<ImageUpload :fileList="formData1.fileUrl" :limit="1" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input type="textarea" :rows="4" v-model="formData1.remark" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>收款记录</span>
			</div>
			<div class="table">
				<el-table :data="collectionList" element-loading-text="Loading" border fit highlight-current-row stripe>
					<el-table-column prop="status" label="收款结果" align="center">
						<template slot-scope="scope">
							{{scope.row.status == 'NO'?'未付款':scope.row.status == 'WAIT'?'部分付款':scope.row.status == 'OK'?'已完成':''}}
						</template>
					</el-table-column>
					<el-table-column prop="price" label="收款金额" align="center"></el-table-column>
					<el-table-column prop="" align="center" label="收款凭证" >
						<template slot-scope="scope" v-if="scope.row.urlPrc">
							<el-image style="width: 80px;" :src="scope.row.urlPrc" fit="scale-down" :preview-src-list="[scope.row.urlPrc]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center"></el-table-column>
					<el-table-column prop="updateBy" align="center" label="收款人" ></el-table-column>
					<el-table-column prop="updateTime" align="center" label="收款时间" ></el-table-column>
				</el-table>
			</div>
		</el-card>
		<div class="page-footer">
			<div class="footer">
				<el-button size="small" type="primary"  @click="confirm()">确定</el-button>
				<el-button size="small" type="info" @click="goBack">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import ImageUpload from '@/components/file-upload'
	import { lbsAmapRegion } from '@/api/common.js'
	import geographicalPosi from '@/components/geographicalPosi/index.vue'
	import { getDetail, givePrice, getPriceDetail } from "@/api/auxiliaryFittings/projectAuxiliaryManage";
	export default {
		components: {geographicalPosi,ImageUpload},
		props: ['id','title','formType'],
		data() {
			return {
				dataList: [],
				provinceList: [],
				cityList: [],
				areaList: [],
				streetList: [],
				collectionList: [],
				detail: {},
				formData: {
					projectName: ''
				},
				formData1: {
					price: '',
					remark: '',
					fileUrl: []
				},
				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
				rules: {
					websitId: [
						{ required: true, message: '请选择网点', trigger: 'change' }
					],
					workerName: [
						{ required: true, message: '请输入客户姓名', trigger: 'blur' }
					],
				},
				rules1: {
					price: [
						{ required: true, message: '请输入收款金额', trigger: 'blur' },
						{ pattern:/^[1-9]\d*(\.\d+)?$|^0\.[1-9]\d*$/, message: '请输入大于0的数字', trigger: 'blur' }
					],
					fileUrl: [
						{ required: true, message: '请上传收款凭证', trigger: 'change' }
					],
				},
			};
		},
		computed: {},
		created() {
			if(this.id){
				this.getDetail()
			}
			this.getinitlbslist()
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			async getDetail(){
				const that = this
				getDetail({id: this.id}).then( async res => {
					this.detail = res.data
					Object.assign(this.formData, res.data.orderEnginBase)
					this.getPriceDetail(res.data.orderEnginBaseId)
				})
			},
			getPriceDetail(orderEnginBaseId){
				getPriceDetail({orderEnginBaseId,goodsType: 'P'}).then(res => {
					this.collectionList = res.data
				})
			},
			getinitlbslist() {
			  // 初始化请求省市区街道下拉选项数据
			  lbsAmapRegion({ pid: 0 }).then(res => {
			    this.provinceList = res.data
			    // 创建工单时获取ip地址定位赋值
			    if (!this.id && this.$IpAdd.province) {
			      var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
			      if (item) {
			        this.formData.provinceId = item.id
			        this.formData.province = item.name
			      }
			    }
			    if (this.formData.provinceId) {
			      lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
			        this.cityList = res.data
			        // 创建工单时获取ip地址定位赋值
			        if (!this.id && this.$IpAdd.city) {
			          var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
			          if (item2) {
			            this.formData.cityId = item2.id
			            this.formData.city = item2.name
			          }
			        }
			        if (this.formData.cityId) {
			          lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
			            this.areaList = res.data
			          })
			        }
			        if (this.formData.areaId) {
			          lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
			            this.streetList = res.data
			          })
			        }
			      })
			    }
			  })
			},
			selectAddress(data){
				this.formData.lng = data.center[0]
				this.formData.lat = data.center[1]
				// 获取定位的省市区街道
				var { province, city, district, township } = data.data.addressComponent
				// 获取选中省名称id
				var { id, name } = this.provinceList.find(item => item.name === province)
				this.formData.provinceId = id
				this.formData.province = name
				// 请求市选项
				lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
				  // 赋值市选项
				  this.cityList = res.data
				  // 获取选中市名称id
				  var { id, name } = res.data.find(item => item.name === city)
				  this.formData.cityId = id
				  this.formData.city = name
				  // 请求区选项
				  lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
				    // 赋值区选项
				    this.areaList = res.data
				    // 获取选中区名称id
				    var { id, name } = res.data.find(item => item.name === district)
				    this.formData.areaId = id
				    this.formData.area = name
				    // 请求街道选项
				    lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
				      // 赋值街道选项
				      this.streetList = res.data
				      // 获取选中街道名称id
				      var { id, name } = res.data.find(item => item.name === township)
				      this.formData.streetId = id
				      this.formData.street = name
				      // 赋值GPS详细地址
				      this.formData.address = data.name
				    })
				  })
				})
			},
			confirm(){
				this.$refs.formData1.validate((valid, invalidFields, errLabels) => {
					if (valid) {
						this.$confirm(`请确定是否确认提交收款信息, 是否继续?`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							givePrice({
								goodsType: this.detail.goodsType,
								orderEnginBaseId: this.detail.orderEnginBaseId,
								orderId: this.detail.orderEnginBaseId,
								price: this.formData1.price,
								remark: this.formData1.remark,
								urlPrc: this.formData1.fileUrl[0].url
							}).then(res => {
								if(res.code == 200){
									this.$message.success('提交成功！')
									this.goBack()
								}
							})
						});
					}
				})
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.s-page {
		padding: 20px;
		background-color: #ffffff;
	}
	.page-footer {
		height: 70px;
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		background: #fff;
		padding: 15px 40px;
		box-sizing: border-box;
		transition: all 0.28s;
		text-align: right;
		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
	
		&.hideSidebar {
			margin-left: 54px;
			width: calc(100vw - 54px);
		}
	
		&.openSidebar {
			margin-left: 210px;
			width: calc(100vw - 210px);
		}
	
		.tips {
			font-size: 12px;
			color: red;
			margin-top: 10px;
		}
	}
</style>