wx_oms/customerManagement/companyManagement/detail.vue

<template>
	<view class="enterpriseRecharge_body">
		<topBar height="143rpx" title="公司管理">
		</topBar>
		<view class="listContainer" style='flex: 1;overflow: hidden;'>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex ">
							<view class="flex">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										企业名称
										<view style="margin: 0 10rpx; min-width: 150rpx;" class="blackcolor">
											{{rowDetails.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title ">
							<view>
								<uni-list style="margin: 10rpx 0;" v-for="(item,index) in detailList" :key="index">
									<view style="border-bottom: 2rpx solid #e5e5e5;padding: 10rpx;position: relative;">
										<radio :value="item.commonMark" :checked="item.commonMark==1?true:false"
											@tap="radioChange(item)">默认</radio>
										<view class="datailDetele" v-if="detailList.length>1"
											@click="pushDelete(index)">删除</view>
									</view>


									<uni-list-item @click="seleoli(item,index)" link>
										<view class="list_header" slot="header">
											银行性质
										</view>
										<view style="" slot="body" class="list_right">
											<view slot="body" :style="{color:item.bankNature?'#333333':' '}"
												class="list_right list_nosele">
												{{item.bankNature&&item.bankNature==='1'?'个人账户':'公户'}}
											</view>
										</view>
									</uni-list-item>
									<uni-list-item>
										<view class="list_header" slot="header">
											打款名称
										</view>
										<view slot="body" class="list_right ">
											<view style="width: 100%;padding-right: 16px !important;display: flex; ">
												<input type="digit" v-model="item.bankCardName"
													class="list_right_input" />
											</view>
										</view>
									</uni-list-item>
									<uni-list-item>
										<view class="list_header" slot="header">
											银行卡号
										</view>
										<view slot="body" class="list_right ">
											<view style="width: 100%;padding-right: 16px !important;display: flex; ">
												<input type="digit" v-model="item.bankCardNo"
													class="list_right_input" />
											</view>
										</view>
									</uni-list-item>
									<uni-list-item>
										<view class="list_header" slot="header">
											开户行名称
										</view>
										<view slot="body" class="list_right ">
											<view @click="inputFocusbankName(index)" class="special-input"
												style="line-height: 44rpx;">
												{{ item.bankName || '开户行名称'}}
												<image v-if="item.bankName" class="close" src="../../static/close.png"
													@click.stop="inputClear(item)"></image>
											</view>
										</view>
									</uni-list-item>
									<uni-list-item>
										<view class="list_header" slot="header">
											联行号
										</view>
										<view slot="body" class="list_right ">
											<view style="width: 100%;padding-right: 16px !important;display: flex; ">
												<input disabled type="digit" v-model="item.interBankCode"
													class="list_right_input" />
											</view>
										</view>
									</uni-list-item>
								</uni-list>
							</view>
						</view>
					</view>

				</view>
				<view style="display: flex;justify-content: center;">
					<view class="detailAdd" @click="pushAdd">新增</view>
				</view>

				<view style="display: flex;padding: 30rpx 20rpx 50rpx;">
					<view class="preTreatmentSign" style="background-color: #fff;border: #555;" @tap="back">
						返回
					</view>
					<view class="preTreatmentSign" style="background-color: #1890ff;color: #fff;" @tap="handleClick">
						确认提交
					</view>
				</view>

			</scroll-view>
		</view>
		<uni-popup ref="bankPopup" background-color="#fff">
			<view style="width: 400rpx;height:150rpx; padding: 20rpx;display: flex;">
				<view @click="olioss(item)" :class="bankNature==item.bankNature? 'seleOlipopup_item' : 'olipopup_item' "
					v-for="(item,index) in bankNatureList" :key="item.id">
					{{item.name}}
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import scroll from '@/components/scroll'
	import companyManagement from '@/api/companyManagement'
	export default {
		components: {
			scroll
		},
		data() {
			return {
				rowDetails: {},
				detailList: [{
					bankCardName: '',
					bankCardNo: '',
					bankName: '',
					interBankCode: '',
					disabledType: false,
					commonMark: 1,
					companyId: ''
				}],
				id: '',
				indexNature: 0,
				bankNatureList: [{
						id: '0',
						name: '公司'
					},
					{
						id: '1',
						name: '个人账户'
					},
				],
				isShow: {
					oliType: false
				},
				bankNature: '',
				indexBank: 0,
				indexDelete: ''

			}
		},
		onLoad(e) {
			if (e.jsData) {
				this.rowDetails = JSON.parse(e.jsData)
				this.id = JSON.parse(e.jsData).id
				this.findDetail(this.id)
			}
			uni.$on('bankNameEnterprise', (item) => {
				if (!item.bankName) return
				this.detailList[this.indexNature].bankName = item.bankName
				this.detailList[this.indexNature].interBankCode = item.cnaps
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			handleClick() {
				this.detailList.forEach(item => {
					item.companyId = this.rowDetails.id
				})
				let arr = this.detailList
				const allValuesNotEmpty = arr.every((obj) => {
					return Object.values(obj).every((value) => value !== "")
				})
				if (allValuesNotEmpty == true) {
					let that = this
					uni.showModal({
						title: '提示',
						content: '确认将不可更改?',
						success: function(res) {
							if (res.confirm) {
								that.saveSbumit()
							} else if (res.cancel) {
								console.log(res.cancel, '用户取消');
							}
						}
					});
				} else {
					uni.showToast({
						title: '请把信息填写完整后提交',
						icon: 'none'
					})
				}

			},
			saveSbumit() {
				let data = this.detailList
				companyManagement.saveBatchCompanyRelationBank(data).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.back()
					}
				})
			},
			findDetail(id) {
				companyManagement.getByCompanyId(id).then(res => {
					if (res.code !== 20000) return
					if (res.data && res.data.length > 0) {
						this.detailList = res.data
					}

				})
			},
			seleoli(item, index) {
				this.bankNature = item.bankNature
				this.indexBank = index
				this.$refs.bankPopup.open()
			},
			olioss(e) {
				this.detailList[this.indexBank].bankNature = e.id;
				this.$forceUpdate()
				this.$refs.bankPopup.close()
			},
			inputFocusbankName(index) {
				this.indexNature = index
				uni.navigateTo({
					url: './bankNameEnterprise'
				})
			},
			inputClear(item) {
				item.bankName = ''
				item.interBankCode = ''
			},
			radioChange(item) {
				this.detailList.forEach(tab => {
					tab.commonMark = 0
				})
				item.commonMark = 1
			},
			pushAdd() {
				this.detailList.push({
					bankCardName: '',
					bankCardNo: '',
					bankName: '',
					interBankCode: '',
					commonMark: 0,
					companyId: ''
				})
			},
			pushDelete(index) {
				let that = this
				that.indexDelete = index
				uni.showModal({
					title: '提示',
					content: '确认删除?',
					success: function(res) {
						if (res.confirm) {
							that.detailList.splice(that.indexDelete, 1)
							var res = that.detailList.some(item => {
								if (item.commonMark == '1') {
									return true
								}
							})
							if (!res) {
								that.detailList[0].commonMark = 1
							}
						}
					}
				});
			}

		}
	}
</script>

<style>
	@import url("./index.css");
</style>