jhlapp/pagesT/Purchase/SupplierDetail.vue

<template>
	<view>
		<view class="detail-view" v-if="$accessCheck($Access.SupplierGetSupplierInfoById)">
			<u-form label-width="150">
				<view class="form-model-view">
					<u-form-item label="供应商编号">
						<view class="form-value">{{ supplier_detail.code }}</view>
					</u-form-item>
					<u-form-item label="供应商名称">
						<view class="form-value">{{ supplier_detail.title }}</view>
					</u-form-item>
					<u-form-item label="联系人">
						<view class="form-value">{{ supplier_detail.realName }}</view>
					</u-form-item>
					<u-form-item label="联系电话">
						<view class="form-value mobile" @click="callPhone(supplier_detail.mobile)">
							{{ supplier_detail.mobile }}
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="联系人职务">
						<view class="form-value">{{ supplier_detail.position }}</view>
					</u-form-item>
					<u-form-item label="状态" v-if='$accessCheck($Access.SupplierUpdateEnableStatus)'>
						<view class="form-value">
							<u-switch style="transform: translateY(14rpx);" @change="enableStatusChange"
								v-model="enable_status" :active-value="5" :inactive-value="5" size="40"></u-switch>
						</view>
					</u-form-item>
				</view>
				<view class="form-model-view">
					<u-form-item label="所属区域" label-position="top">
						<block v-if="supplier_detail.area">
							{{ supplier_detail.area.provinceName }}-{{ supplier_detail.area.cityName }}-{{ supplier_detail.area.districtName }}-{{ supplier_detail.area.address }}
						</block>
					</u-form-item>
				</view>
				<view class="form-model-view">
					<u-form-item label="开户人">
						<view class="form-value">{{ supplier_detail.accountName || '--' }}</view>
					</u-form-item>
					<u-form-item label="开户银行">
						<view class="form-value">{{ supplier_detail.bankName || '--' }}</view>
					</u-form-item>
					<u-form-item label="银行账号">
						<view class="form-value">{{ supplier_detail.bankCard || '--' }}</view>
					</u-form-item>
				</view>
				<view class="form-model-view">
					<u-form-item label="备注" label-position="top">{{ supplier_detail.remark || '无' }}</u-form-item>
				</view>
			</u-form>
			<view class="detail-bottom">
				<view v-if="$accessCheck($Access.SupplierDelSupplier)" class="handel-btn info-btn"
					@click="openModel('确定要删除该供应商吗？', '删除')">删除</view>
				<view v-if="$accessCheck($Access.SupplierEditSupplier)" class="handel-btn"
					@click="goPage(`/pagesT/Purchase/AddSupplier?id=${supplier_id}`)">编辑</view>
			</view>
			<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm">
			</u-modal>
		</view>
		<view v-else>没有权限</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model_tag: '',
				model_show: false,
				enable_status: false,
				model_content: '',
				supplier_id: '',
				supplier_detail: {},
				add_form: {
					title: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					address: '',
					realName: '',
					mobile: '',
					enableStatus: 5,
					sex: 0,
					phone: '',
					position: '',
					email: '',
					remark: '',
					accountName: '',
					bankName: '',
					bankCard: ''
				}
			};
		},
		onLoad(options) {
			this.supplier_id = options.id;
			this.getSupplierInfoById();
		},
		onPullDownRefresh() {
			this.getSupplierInfoById();
		},
		onShow() {
			this.getSupplierInfoById();
		},
		methods: {
			// 打开提示框
			openModel(content, tag) {
				this.model_content = content;
				this.model_show = true;
				this.model_tag = tag;
			},
			modelConfirm() {
				switch (this.model_tag) {
					case '删除':
						this.delSupplier();
						break;
				}
			},
			getSupplierInfoById() {
				this.$u.api.getSupplierInfoById(this.supplier_id).then(res => {
					this.supplier_detail = res.data;
					this.enable_status = res.data.enableStatus === 5;
				});
			},
			enableStatusChange() {
				this.$u.api
					.SupplierUpdateEnableStatus(this.supplier_id, {
						enableStatus: this.enable_status ? 5 : 4
					})
					.then(res => {
						this.$u.toast('操作成功');
						setTimeout(() => {
							this.getSupplierInfoById();
						}, 1500)
					});
			},
			delSupplier() {
				this.$u.api.delSupplier(this.supplier_id).then(res => {
					this.$u.toast('已删除');
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				});
			}
		}
	};
</script>

<style lang="scss">
	.mobile {
		color: $uni-color-primary;
	}
</style>