zfire-newmall-admin/src/views/auxiliaryFittings/projectAuxiliaryManage/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="工程名称" prop="source" :required="true">
								<el-select v-model="formData.source" :disabled="formType==2" placeholder="请选择" style="width: 100%;">
								    <el-option
									  v-for="item in [{name: '在线订单',id: 'ONLINE'},{name: '自建订单',id: 'SELF'}]"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id">
								    </el-option>
								  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工程编号" prop="projectNo" :required="true">
								<el-input type="text" :disabled="formType==2" v-model="formData.projectNo" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="负责人" prop="projectNo" :required="true">
								<el-input type="text" :disabled="formType==2" v-model="formData.projectNo" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系电话" prop="projectNo" :required="true">
								<el-input type="text" :disabled="formType==2" v-model="formData.projectNo" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="项目时间" prop="projectNo" :required="true">
								<el-date-picker
									style="width: 100%"
								    v-model="formData.projectDate"
									:disabled="formData.flag != 'SAVE' && formType!=0"
								    type="daterange"
								    align="right"
								    unlink-panels
								    range-separator="至"
								    start-placeholder="开始日期"
								    end-placeholder="结束日期"
								    :picker-options="pickerOptions">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="项目地址" prop="province" :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="formType==2" 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="formType==2" v-model="formData.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="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="收款金额">
								<el-input type="text" v-model="formData1.amount" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="收款凭证">
								<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="" label="收款结果" align="center"></el-table-column>
					<el-table-column prop="" label="收款金额" align="center"></el-table-column>
					<el-table-column prop="" align="center" label="收款凭证" >
						<template slot-scope="scope">
							<el-image src=""></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="" label="备注" align="center"></el-table-column>
					<el-table-column prop="" align="center" label="收款人" ></el-table-column>
					<el-table-column prop="" align="center" label="收款时间" ></el-table-column>
				</el-table>
			</div>
		</el-card>
		<div class="page-footer">
			<div class="footer">
				<el-button v-if="true" 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: [],
				formData: {},
				formData1: {
					amount: '',
					remark: '',
					fileUrl: []
				},
				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
				rules: {
					websitId: [
						{ required: true, message: '请选择网点', trigger: 'change' }
					],
					workerName: [
						{ required: true, message: '请输入客户姓名', trigger: 'blur' }
					],
				},
				rules1: {},
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
						}
					}]
				},
			};
		},
		computed: {},
		created() {
			if(this.id){
				this.getDetail()
			}
			this.getinitlbslist()
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			async getDetail(){
				const that = this
				getDetail({salesId: this.id}).then( async res => {
					Object.assign(this.formData, 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.$confirm(`请确定是否确认提货, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					confirm({
						salesId: this.formData.salesId
					}).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>