count-pass-app/subpages/tenant/list.vue

<template>
	<view class="enterprise-list">
		<view class="list-wrap">
			<u-sticky bgColor="#fff" class="main-sticky">
				<view class="search-wrap">
					<view class="input-wrap">
						<view class="input search">
							<u-search bgColor='#fff' :showAction='false'
								:placeholder="$t('base.common.inputPlaceholder')" @search="searchList"
								@clear='searchList' v-model="form.keyword">
							</u-search>
							<view class="sx-btn" @click="searchList">{{ $t("customer_meter.search") }}</view>
						</view>
					</view>
				</view>
				<view class="tabs-box">
					<!-- <u-subsection :list="statusList" mode="subsection" fontSize="30rpx" activeColor="rgb(60, 156, 255)"
						:current="statusActive" @change="onChangeStatus">
					</u-subsection> -->
					<u-tabs lineWidth="40" :list="statusList" :current="statusActive" @change="onChangeStatus"
						lineColor="#3275F5" :itemStyle="{ 'height': '90rpx', 'padding': '0 32rpx' }">
					</u-tabs>
				</view>
			</u-sticky>



			<template v-if="tenantList.length">
				<view class="business-card" v-for="(item, index) in tenantList" :key="index">
					<view class="title">{{ item.tenantName || '' }}</view>
					<view class="business-card-info">
						<view class="info-line">
							<text class="label">{{ $t('customer_meter.tenantCode') }}</text>
							<text class="info">{{ item.tenantCode || '' }}</text>
						</view>
						<view class="businessStatus-info">
							<u--image width="100rpx" height="88rpx" v-if="item.statusFlag == 2"
								src="/subpages/static/czzn-img/state/not-audit.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.statusFlag == 3"
								src="/subpages/static/czzn-img/state/no-pass-audit.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.statusFlag == 0"
								src="/subpages/static/czzn-img/state/stop.png" @click="onUpdateStatus(item)"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.statusFlag == 1"
								src="/subpages/static/czzn-img/state/start.png"
								@click="onUpdateStatus(item)"></u--image>
						</view>
					</view>
					<view v-if="isDealerUser==true">
						<u-line></u-line>
						<view class="business-card-append"
							v-for="tenantVehicleType in vehicleTypeList.filter((p) => { return p.tenantId == item.tenantId })"
							:key="tenantVehicleType.tenantId">
							<template v-if="tenantVehicleType.vehicleTypeList.length">
								<view class="btn" v-for="vehicleType in tenantVehicleType.vehicleTypeList"
									:key="vehicleType.value">
									<button class="oper-btn bule"
										@click="toCompanyList(item.tenantId, vehicleType.value)">
										{{ vehicleType.text }}
									</button>
								</view>
							</template>
							<template v-else>
								<u-tag text="未分配业务" size="mini" type="error"></u-tag>
							</template>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="data-empty">
					<image src="/subpages/static/czzn-img/empty.png" mode="widthFix" style="width:100%" />
					<text class="empty-text">{{$t('base.common.noData')}}</text>
				</view>
			</template>
			<!-- <uni-fab ref="fab" buttonColor="#3c9cff" @trigger="trigger" @fabClick="onClickRight" /> -->
		</view>
		<u-modal :show="showAdd" @confirm="onApplyTenant" ref="addModal" showCancelButton closeOnClickOverlay
			@cancel="showAdd = false" @close="showAdd = false" stlye="z-index:-1">
			<view class="invite-box">
				<u--input :placeholder="$t('base.common.PleaseEnterTheBusinessNumber')" border="surround"
					v-model="tenantCode" @blur="tenantBlur()"></u--input>
				<u--text :text="tenantName"></u--text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getDealerTenantList,
		applyTenant,
		updateStatus,
		getTenantByCode
	} from "../../api/tenant.js";
	export default {
		data() {
			return {
				current: undefined,
				showAdd: false,
				form: {
					keyword: "",
					statusFlag: ""
				},
				showConfirm:false,
				value: "",
				statusActive: 0,
				tenantCode: "",
				tenantName: "",
				isDealerUser: false,
				tenantList: [],
				vehicleTypeList: [],
				statusList: [{
						name: this.$t("customer_meter.all"),
						statusFlag: ''
					},
					{
						name: this.$t("customer_meter.enable"),
						statusFlag: '1'
					},
					{
						name: this.$t("customer_meter.deactivate"),
						statusFlag: '0'
					},
					{
						name: this.$t("customer_meter.audit"),
						statusFlag: '2'
					},
				],
			};
		},
		components: {},
		onLoad(options) {
			this.bindTenant();
			if (options.q && options.q == "add") {
				this.showAdd = true;
			}
			this.isDealerUser = uni.getStorageSync('isDealerUser')
		},
		methods: {
			tenantBlur() {
				var that = this;
				if (!that.tenantCode) {
					uni.showToast({
						title: this.$t('tenant.tenantCode'),
						icon: "none",
						duration: 2500,
					})
					return;
				}
				getTenantByCode(that.tenantCode).then((res) => {
					console.log("获取到的租户信息，", res);
					if (res.statusCode == 200 && res.data.code == 0) {
						uni.showModal({
							// title: '提示',
							content: that.$t("tenant.bindTenant") + "【" + res.data.data.name + "】",
							showCancel: true,
							cancelText: that.$t("base.button.goBack"),
							confirmText: that.$t("base.button.submit"),
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									that.showConfirm=true;
									that.onApplyTenant();
								} else if (res.cancel) {
									console.log('用户点击取消');
									that.showAdd = false
									that.showConfirm=false;
									that.tenantCode = ""
								}
							}
						})
					}
				}).catch((res) => {
					that.showAdd = false
				});
			},
			//跳转到企业下客商列表
			toCompanyList(tenantId, vehicleType) {
				uni.navigateTo({
					url: `/subpages/tenant/companyInfo?tenantId=${tenantId}&vehicleType=${vehicleType}`,
				})
			},
			//搜索列表
			searchList() {
				this.bindTenant()
			},
			//显示启用弹窗
			onUpdateStatus(item) {
				var that = this;
				wx.showModal({
					content: (item.statusFlag == '1' ? that.$t('tenant.stopTenant') : that.$t(
						'tenant.startTenant')),
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							updateStatus(item.id, (item.statusFlag == '1' ? '0' : '1')).then(res => {
								if (res.statusCode == 200) {
									uni.showToast({
										title: that.$t("base.common.complete"),
										icon: "none",
										duration: 2000,
									});
									that.bindTenant()
								}
							})
							console.log('用户点击确定');
						} else {

						}
					}
				})


			},
			bindTenant() {
				var that = this;
				getDealerTenantList(this.form).then((res) => {
					if (res.statusCode == 200) {
						that.tenantList = res.data.data;
						uni.removeStorageSync('tenantInfo')
						uni.setStorageSync('tenantInfo', that.tenantList)
						that.vehicleTypeList = [];
						that.tenantList.forEach(tenant => {
							that.vehicleTypeList.push({
								"tenantId": tenant.tenantId,
								"vehicleTypeList": uni.getStorageSync('vehicleType-' + tenant
									.tenantId)
							});
						});
						console.log("获取到租户对应的业务信息、", that.vehicleTypeList);
					}
				});
			},
			//点击右侧加号
			onClickRight() {
				this.showAdd = true;
			},
			onChangeStatus(item) {
				this.statusActive = item.index
				var statusFlag = this.statusList[item.index].statusFlag;
				if (this.form.statusFlag == statusFlag) {
					return
				} else {
					this.form.statusFlag = statusFlag;
					this.bindTenant()
				}
			},
			//绑定企业
			onApplyTenant() {
				var that = this;
				if(!that.showConfirm){
					return;
				}
				console.log("企业编码：",that.tenantCode);
				applyTenant(that.tenantCode).then((res) => {
					that.tenantCode = ""
					that.showAdd = false
					if (res.statusCode == 200 && res.data.code == 0) {
						uni.showToast({
							title: that.$t("base.common.complete"),
							icon: "none",
							duration: 2000,
						});
						that.bindTenant();
					}
					that.showConfirm=false;
				});
			},
		},
	};
</script>
<style>
	/* #ifndef APP-NVUE */
	view {
		box-sizing: border-box;
	}

	page {
		background-color: #f5f7fa;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';
</style>