moin_app/pages/sub/batchExecution/batchExecution.vue

<template>
	<view class="main batchExecution">
		<view class="pad">
			<u--form labelPosition="left" :model="FormData" ref="uForm" labelWidth="160rpx">
				<u-form-item label="执行机器" :required="true" @click="$goPage('/pages/sub/batchExecution/selectMachine')">
					<!-- <u--input v-model="FormData.sex"  placeholder="请选择" disabledColor="#ffffff" style="pointer-events: none;"  
						border="none"></u--input> -->
					<view class="blueTxt">忆选择{{FormData.machineIdList.length}}台机器</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="执行命令" :required="true">
					<view class="blueTxt" @click="$goPage('/pages/sub/batchExecution/selectTemplate')">选择模版</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="modalBox">
					<view class="modalCon">
						{{FormData.command}}
					</view>
					<!-- <Editor ref="editor" :value="FormData.command" /> -->
				</view>

				<u-form-item label="执行描述" :required="true">
					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn_row">
			<view class="btnBg" @click="batchExecFn">执 行</view>
		</view>
	</view>
</template>

<script>
	import {
		batchExec
	} from '@/config/api.js'
	// import Editor from './aceEditor.vue'
	export default {
		components: {
			// Editor
		},
		data() {
			return {
				FormData: {
					command: '',
					description: '',
					sendLf: true, //这不知道什么参数
					machineIdList: []
				},

			}
		},
		onLoad() {
			uni.$on('chooseMachine', (listId) => {
				this.FormData.machineIdList = listId
			})
			uni.$on('pickTemplate', (temp) => {
				this.FormData.command = temp.value
			})

		},
		methods: {
			async batchExecFn() {
				// this.FormData.command = this.$refs.editor.getValue()
				if (!this.FormData.machineIdList.length) {
					this.$u.toast('请选择执行机器')
					return
				}
				const command = this.FormData.command
				if (!command.trim().length) {
					this.$u.toast('请输入执行命令')
					return
				}
				if (command.length > 2048) {
					this.$u.toast(`执行命令不能超过2048位 当前${command.length}位`)
					return
				}
				const {
					data: res
				} = await batchExec(this.FormData)
				this.$goPage('/pages/sub/batchExecution/executionDetails?relId=' + res[0].execId)
			}
		}
	}
</script>

<style>
	.batchExecution .u-form-item {
		background-color: #ffff;
		border-radius: 6rpx;
		padding: 0 34rpx;
		margin-bottom: 30rpx;
	}
</style>

<style lang="scss" scoped>
	.btn_row {
		padding: 40rpx;

		.btnBg {
			width: 100%;
		}
	}

	.blueTxt {
		color: $themC;
		text-align: right;
		width: 100%;
	}

	.pad {
		padding: 32rpx;
	}

	.modalBox {
		background-color: #fff;
		padding: 0 30rpx 20rpx 30rpx;
		transform: translateY(-30rpx);

		.modalCon {
			width: 100%;
			background-color: #f5f5f5;
			padding: 20px;
		}
	}
</style>