crm-app-vue3/pages/configuration/index.vue

<template>
	<view class="follow_wrap">
		<u-navbar placeholder  title="呼叫中心配置" @rightClick="handleNavSaveClick" @leftClick="handleBack">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
			</view>
			<view class="u-nav-slot" slot="right">
				保存
			</view>
		</u-navbar>
		<view class="form_wrap">
			<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap">
				<u-form-item label="是否启用" prop="isCallOff" borderBottom>
					<u-switch inactiveColor="rgb(230, 230, 230)" v-model="form.isCallOff" inactiveValue="2" activeValue="1"
											size="20" @change="changeIsCallOff"></u-switch>
				</u-form-item>
				<u-form-item label="呼叫中心" prop="webRtcIp" borderBottom class="form_required">
					<u--input v-model="form.webRtcIp" disabledColor="#ffffff" placeholder="如:10.12.200.100"
						border="none"></u--input>
				</u-form-item>
				
				<u-form-item label="端口号" prop="webRtcPort" borderBottom class="form_required">
					<u--input v-model="form.webRtcPort" disabledColor="#ffffff" placeholder="如:5500" border="none"></u--input>
				</u-form-item>
				
				<view class="line"></view>
				<u-form-item label="版本号" prop="folder" borderBottom>
					v{{version}}
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				version: this.$store.state.app.currentVersion,
				rules: {
					'webRtcIp': {
						type: 'string',
						required: true,
						message: '请输入呼叫中心地址',
						trigger: ['blur', 'change']
					},
					'webRtcPort': {
						type: 'string',
						required: true,
						message: '请输入呼叫中心端口',
						trigger: ['blur', 'change']
					},
				},
				form : uni.$u.deepClone(this.$store.state.user.netConfig),
			}
		},
		methods: {
			changeIsCallOff(value){
				this.form.isCallOff = value;
			},
			handleBack(){
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			handleNavSaveClick() {
				this.$refs.form.validate().then(async () => {
					this.$store.commit("user/SET_NETCONFIG", this.form);
					uni.$u.api.getAppSystemList().then((res)=>{
						const systemCodeList = res.data;
						this.$store.dispatch("user/setSystemlist",systemCodeList);
						uni.$u.toast("保存成功");
						this.handleBack();
					}).catch((e)=>{
						uni.$u.toast("服务网络不通");
					})
				})
			},
		},
		onLoad(option) {}
	}
</script>

<style lang="scss" scoped>
	.form_wrap {
		background-color: #fff;
		margin: 20rpx 0;

		.form_wrap {
			::v-deep .u-form-item__body {
				padding: 20rpx 40rpx;
			}
		}

		.line {
			width: 100%;
			height: 20rpx;
			background: #f5f6f8;
		}

		.uuid_box {
			display: flex;
			align-items: center;
			text-align: right;
			justify-content: space-between;

			.copy_btn {
				display: flex;
				font-size: 24rpx;
				color: #108CFF;
				margin-left: 20rpx;
			}
		}
	}
</style>