jhlapp/pagesT/account/AddAcount.vue

<template>
	<view class="detail-view">
		<u-form label-width="150" :model="add_form" ref="uForm">
			<view class="form-model-view">

				<u-form-item label='所属店铺' prop="shopName">
					<view class="clearfix form-val" @click="goPage('/pagesT/shop/selShop')">
						<view class="float_right" @click.stop="add_form.shopId = ''">
							<u-icon :name="!add_form.shopId ? 'arrow-right' : 'close-circle-fill'" size="28"
								color="#999999">
							</u-icon>
						</view>
						<text class="float_right ellipsis">{{ add_form.shopId ? add_form.shopName : '请选择' }}</text>
					</view>
				</u-form-item>
				<u-form-item label="账户名称">
					<view class="form-value">
						<input v-model="add_form.name" placeholder="请输入账户名称"/>
					</view>
				</u-form-item>
				<u-form-item label="账户号">
					<view class="form-value">
						<input v-model="add_form.accountNumber" placeholder="请输入账户号"/>
					</view>
				</u-form-item>
				<u-form-item label="期初余额">
					<view class="form-value">
						<input v-model="add_form.money" :disabled="!!account_id" placeholder="请输入期初余额"/>
					</view>
				</u-form-item>
				<u-form-item label="开户行名称" v-if="add_form.type === 3">
					<view class="form-value">
						<input v-model="add_form.bankName"  placeholder="请输入开户行名称"/>
					</view>
				</u-form-item>
				<u-form-item label="账户类型" prop="settlementMethod">
					<view class="float_right" @click="openMethods(index)">
						<text>{{add_form.settlementMethod|| '请选择' }}</text>
						<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="备注">
					<view class="form-value">
						<input v-model="add_form.remark" />
					</view>
				</u-form-item>
			</view>
		</u-form>
		<u-select @confirm="methodsConfirm" v-model="methods_show" :list="pay_type_list"></u-select>
		<view class="detail-bottom">
			<view class="handel-btn" @click="submit">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					shopName: [{
						required: true,
						message: '请选择所属店铺',
						trigger: ['change', 'blur']
					}],
					settlementMethod:[
						{
							required: true,
							message: '请选择账户类型',
							trigger: ['change', 'blur']
						}
					]
				},
				add_form: {
					isDefault: 5,
					remark:'',
					settlementMethod: '',
					accountNumber: '',
					money: '',
					name: '',
					enableStatus:'',
					operatorName: '',
					receivable: '',					
					type:'',
					shopId: "",
					shopName: "",
					bankName:'',
					receiptRequisitionAccountDate: [{
						collectionAmount: '',
						preferentialAmount: '',
						actualAmount: '',
						settlementMethod: '',
						remark: '',
						accountName: "",
						accountId: "",
					}]
				},
				methods_show: false,
				account_index: 0,
				pay_type_list: [{
						label: "普通账户",
						value: 4
					},
					{
						label: "支付宝账户",
						value: 1
					},
					{
						label: "微信账户",
						value: 2
					},
					{
						label: "银行账户",
						value: 3
					},
				],
				customerData: '',
				account_id: '',
				shopData: {},
				AccountData: {},
				index: ''
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}			
		},
		watch: {
			customerData(val) {
				if (val) {
					this.add_form.custormerId = val.id;
					this.add_form.custormerName = val.name;
					this.add_form.receivable = val.money;
				}
			},
			// 店铺
			shopData(val) {
				if (val) {
					this.add_form.shopName = val.name;
					this.add_form.shopId = val.id;
				}
			},
			AccountData(val) {
				if (val) {
					console.log(val);
					this.add_form.receiptRequisitionAccountDate[this.index].accountId = val.id
					this.add_form.receiptRequisitionAccountDate[this.index].accountName = val.name
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.account_id = options.id;
				uni.setNavigationBarTitle({
					title: '编辑账户'
				});
				this.getAccountInfo();
			} else {
				this.add_form.operatorId = this.userInfo.userCenterId;
				this.add_form.operatorName = this.userInfo.name;
			}
		},
		methods: {
			// 详情
			getAccountInfo() {
				this.$u.api.getAccountInfo(this.account_id).then(({
					data
				}) => {
					this.add_form = {
						accountNumber: data.accountNumber,
						beginMoney:data.beginMoney,
						enableStatus: data.enableStatus,
						money:data.money,
						name:data.name,
						shopId:data.shopId,
						shopName:data.shopName,
						type:data.type,
						remark:data.remark
					};					
				});
			},
			openMethods(index) {
				console.log(index)
				this.methods_show = true;
				this.account_index = index;
			},
			methodsConfirm(arr) {
				console.log(arr)
				this.add_form.settlementMethod = arr[0].label;
				this.add_form.type=arr[0].value;
			},	
						
			//  添加
			submit() {	
					
						const params = {
							money:this.add_form.money,
							bankName:this.add_form.bankName,
							accountNumber: this.add_form.accountNumber,
							beginMoney:this.add_form.beginMoney,
							enableStatus: this.add_form.enableStatus,
							name:this.add_form.name,
							shopId:this.add_form.shopId,
							shopName:this.add_form.shopName,
							type:this.add_form.type,
							remark:this.add_form.remark
						};				
						
						if (this.account_id) {
							this.$u.api.editAccount(this.account_id, params).then(res => {
								this.$u.toast('修改成功');
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							});
						} else {
							this.$u.api.addAccount(params).then(res => {
								this.$u.toast('新增成功');
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							});
						}
					
				
			},
			settlementAccount(index) {
				if (!this.add_form.shopId) {
					this.$u.toast('必须先选择商铺');
					return
				}
				this.goPage('/pagesT/account/selAccount')
				this.index = index
			},
			delsettlementAccount() {
				this.add_form.receiptRequisitionAccountDate[this.index].accountId = "";
				this.add_form.receiptRequisitionAccountDate[this.index].accountName = "";
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="scss" scoped>
	.detail-ul {
		.detail-li {
			padding-left: 60rpx;
			position: relative;
			border-bottom: 1px solid #eeeeee;

			&:last-child {
				border-bottom: 0 none;
			}

			.del-icon {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}

			.title {
				line-height: 80rpx;
			}

			.money-ul {
				border-top: 1px solid #eeeeee;
				padding: 20rpx 0;
				display: flex;

				.money-li {
					flex: 3;
					border-right: 1px solid #eeeeee;

					input {
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
					}

					&:last-child {
						border-right: 0 none;
					}
				}
			}

			.bottom {
				border-top: 1px solid #eeeeee;

				input {
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
	}
</style>