lxp_Maxcess/pages/client/account/loginConfig.vue

<template>
	<view class="app loginBox">
		<view class="header-tabs">
			<view class="header-tabs-title active">组织账套配置</view>
		</view>
		<view class="form-body">
			<view class="form-item form-item1">
				<up-textarea v-model="state.ruleForm.organizationText" placeholder="请输入内容"></up-textarea>
			</view>
			<view class="form-item form-item2 u-m-t-32" @tap="centerShowFun">
				<view style="border-bottom: 1rpx solid #CAD9E6;width: 100%;display: flex;box-sizing: border-box;padding: 16rpx;align-items: center;">
					<up-icon name="home" color="#ffffff" size="22" style="margin-right: 4rpx;"></up-icon>
					<view style="margin-left: 8rpx;"> {{ state.ruleForm.centerText }} </view>
				</view>
			</view>
			<view class="form-item form-item3 u-m-t-32" @tap="pickerShowFun">
				<view style="border-bottom: 1rpx solid #CAD9E6;width: 100%;display: flex;box-sizing: border-box;padding: 16rpx;align-items: center;">
					<up-icon name="../../../static/icons/mine/zuzhi.png" color="#ffffff" size="20" style="margin-right: 4rpx;"></up-icon>
					<view style="margin-left: 8rpx;"> {{ state.ruleForm.pickerText }} </view>
				</view>
			</view>
			<view class="form-button" @click="saveConfirmFun">保存</view>
		</view>
		<up-picker :show="state.pickerShow" keyName="FOrgOrgName" :columns="state.pickerList"
			@close="() => {state.pickerShow = false}" @cancel="() => {state.pickerShow = false}"
			@confirm="pickerConfirmFun"></up-picker>
		<up-picker :show="state.CenterListShow" keyName="Name" :columns="state.centerList"
			@close="() => {state.CenterListShow = false}" @cancel="() => {state.CenterListShow = false}"
			@confirm="centerConfirmFun"></up-picker>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, onMounted } from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import i18n from '../../../locale/index'
	import { useI18n } from 'vue-i18n'
	import { ORGOrganizationsList, accountSearchOrg, getDataCenterList } from "../../../common/request/api/api";
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const state = reactive({
		pickerShow: false,
		CenterListShow: false,
		pickerList: [],
		centerList: [],
		userName: '',
		ruleForm: {
			organizationText: 'https://maxcess1.test.ik3cloud.com/K3cloud',
			pickerText: '',
			organizationObj: {},
			centerText:'',
			centerObj:{},
		},
		
	})
	onLoad((pageData : any) => {
		state.userName = pageData.userName
	})
	onShow(() => {
		uni.getStorageSync('appLoginInfo') ? state.ruleForm = uni.getStorageSync('appLoginInfo') : null
	})
	
	const pickerConfirmFun = (val : any) => {
		state.ruleForm.pickerText = val.value[0].FOrgOrgName
		state.ruleForm.organizationObj = val.value[0]
		state.pickerShow = false
	}
	const centerConfirmFun = (val:any) => {
		state.ruleForm.centerObj = val.value[0]
		state.ruleForm.centerText = val.value[0].Name
		state.CenterListShow = false
	}
	
	const pickerShowFun = () => {
		if (state.ruleForm.centerText === '') {
			uni.$u.toast('请先选择数据中心')
			return
		}
		accountSearchOrg({ 
			ServerUrl: state.ruleForm.organizationText,
			DBID:state.ruleForm.centerObj.Id,
			UserName:state.userName
		}).then((res : any) => {
			if (res.code === 200) {
				state.pickerList = [res.data]
				state.pickerShow = true
			}
		})
	}
	
	const centerShowFun = () => {
		if (state.ruleForm.organizationText === '') {
			uni.$u.toast('请先填写配置地址')
			return
		}
		getDataCenterList({ ServerUrl: state.ruleForm.organizationText }).then((res : any) => {
			if (res.code === 200) {
				state.centerList = [res.data]
				state.CenterListShow = true
			}
		})
	}
	const saveConfirmFun = () => {
		uni.setStorageSync('appLoginInfo', state.ruleForm)
		uni.$u.toast('保存成功')
	}
</script>

<style lang="scss" scoped>
	:deep(.u-textarea) {
		background-color: rgba(0, 0, 0, 0);
		border: 1rpx solid white !important;
	}

	:deep(.u-popup__content) {
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
	}

	:deep(.uni-text) {
		line-height: normal !important;
	}

	.loginBox {
		background-image: url("../../../static/bc/loginBc.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.app {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0 64rpx;
		position: relative;
		height: 100vh !important;

		.language {
			position: absolute;
			right: 40rpx;
			top: 360rpx;
			min-width: 100rpx;

			.languageText {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 28rpx;
			}
		}

		.header-tabs {
			width: 100%;
			height: 16vmax;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: 100rpx;
			margin-bottom: 100rpx;

			.header-tabs-title {
				font-size: 36rpx;
				font-family: Bold;
				font-weight: 500;
				color: #666;
				text-align: center;
				flex: 1;

				&.active {
					color: #ffffff;
					font-size: 48rpx;
				}
			}
		}

		.form-body {
			width: 100%;
			// margin-bottom: auto;

			@for $i from 1 through 2 {
				.form-item#{$i} {
					opacity: 0;
					animation-name: error-num;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
					animation-delay: calc($i/10) + s;
					display: flex;
				}
			}

			@keyframes error-num {
				0% {
					transform: translateY(60px);
					opacity: 0;
				}

				100% {
					transform: translateY(0);
					opacity: 1;
				}
			}

			.form-button {
				height: 96rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Medium;
				background-color: #0129D3;
				color: #fff;
				margin-top: 128rpx;
				// margin-bottom: 48rpx;
			}
		}

		.footer-wrap {
			width: 100%;
			// margin-top: auto;
			display: flex;
			flex-direction: column;
			padding-bottom: 32rpx;

			.thirdway-grids {
				margin-bottom: 112rpx;
				display: flex;
				grid-template-columns: 1fr;
				justify-content: center;
			}
		}
	}
</style>