admin-ui/src/views/iot/device/product/component/editFun.vue

<template>
	<div class="system-edit-dic-container">
		<!-- 新增功能定义/编辑功能定义 -->
		<el-dialog :title="ruleForm.id !== 0 ? $t('message.device.dialogI18n.editFunctionDefinition') : $t('message.device.dialogI18n.addFunctionDefinition')" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="120px">
				<!-- 功能定义标识 -->
				<el-form-item :label="$t('message.device.formI18nLabel.functionKey')" prop="key">
					<!-- 请输入功能定义标识 -->
					<el-input v-model="ruleForm.key" :placeholder="$t('message.device.formI18nPlaceholder.functionKey')" :disabled="ruleForm.id !== 0 ? true : false" />
				</el-form-item>
				<!-- 功能定义名称 -->
				<el-form-item :label="$t('message.device.formI18nLabel.functionName')" prop="name">
					<!-- 请输入功能定义名称 -->
					<el-input v-model="ruleForm.name" :placeholder="$t('message.device.formI18nPlaceholder.functionName')" />
				</el-form-item>

				<!-- 输入参数 -->
				<el-form-item :label="$t('message.device.formI18nLabel.functionInput')" prop="maxLength">
					<div v-for="(item, index) in inputsdata" :key="index" class="jslist">
						<div class="jsonlist">
							<!-- 参数标识 -->
							<div>{{ $t('message.device.formI18nLabel.parameterIdentifier') }}：{{ item.key }}</div>
							<!-- 参数名称 -->
							<div>{{ $t('message.device.formI18nLabel.parameterName') }}：{{ item.name }}</div>
							<!-- 数据类型 -->
							<div>{{ $t('message.device.formI18nLabel.dataType') }}：{{ item.valueType.type }}</div>
							<div class="jsonoption">
								<!-- 编辑 -->
								<el-link type="primary" @click="editjson(index, 'fun')">{{ $t('message.tableI18nAction.edit') }}</el-link>
								<!-- 删除 -->
								<el-link type="primary" @click="deljson(index, 'fun')">{{ $t('message.tableI18nAction.delete') }}</el-link>
							</div>
						</div>
					</div>

					<div style="display: block; width: 100%">
						<div class="input-options" @click="addJson('fun')">
							<el-icon>
								<Plus />
							</el-icon>
							<!-- 添加参数 -->
							<div>{{ $t('message.device.formI18nButton.addParameter') }}</div>
						</div>
					</div>
				</el-form-item>

				<!-- 输出参数 -->
				<el-form-item :label="$t('message.device.formI18nLabel.functionOutput')" prop="">
					<div v-for="(item, index) in outputsdata" :key="index" class="jslist">
						<div class="jsonlist">
							<!-- 参数标识 -->
							<div>{{ $t('message.device.formI18nLabel.parameterIdentifier') }}：{{ item.key }}</div>
							<!-- 参数名称 -->
							<div>{{ $t('message.device.formI18nLabel.parameterName') }}：{{ item.name }}</div>
							<!-- 数据类型 -->
							<div>{{ $t('message.device.formI18nLabel.dataType') }}：{{ item.valueType.type }}</div>
							<div class="jsonoption">
								<!-- 编辑 -->
								<el-link type="primary" @click="editjsonOut(index)">{{ $t('message.tableI18nAction.edit') }}</el-link>
								<!-- 删除 -->
								<el-link type="primary" @click="deljsonOut(index, 'fun')">{{ $t('message.tableI18nAction.delete') }}</el-link>
							</div>
						</div>
					</div>

					<div style="display: block; width: 100%">
						<div class="input-options" @click="addJsonOut('fun')">
							<el-icon>
								<Plus />
							</el-icon>
							<!-- 添加参数 -->
							<div>{{ $t('message.device.formI18nButton.addParameter') }}</div>
						</div>
					</div>
				</el-form-item>
				<!-- 功能定义描述 -->
				<el-form-item :label="$t('message.device.formI18nLabel.functionDescription')" prop="desc">
					<!-- 请输入功能定义描述 -->
					<el-input v-model="ruleForm.desc" type="textarea" :placeholder="$t('message.device.formI18nPlaceholder.functionDescription')"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<!-- 取消 -->
					<el-button @click="onCancel">{{ $t('message.tableI18nAction.cancel') }}</el-button>
					<!-- 编辑 / 新增 -->
					<el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? $t('message.tableI18nAction.edit') : $t('message.tableI18nAction.add') }}</el-button>
				</span>
			</template>
		</el-dialog>
		<EditOption ref="editOptionRef" key="editOptionRef" @typeList="getOptionData" />
		<EditOption ref="editOptionOutRef" key="editOptionOutRef" @typeList="getOptionDataOut" />
	</div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue'
import api from '/@/api/device'
import { Plus, Minus, Right } from '@element-plus/icons-vue'
import EditOption from './editOption.vue'
import { validateNoSpace } from '/@/utils/validator'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n';

const { locale, t } = useI18n();

interface RuleFormState {
	id?: number
	key: string
	productKey: string
	name: string
	type: string
	dictType: string
	valueType: Object
	inputs: any
	outputs: any
	status: number
	desc: string
}

const form = {
	productKey: '',
	type: '',
	name: '',
	key: '',
	status: 1,
	dictType: '',
	inputs: [],
	outputs: [],
	valueType: {
		type: '',
		maxLength: '',
	},
	desc: '',
}

const emit = defineEmits(['typeList'])

const formRef = ref<HTMLElement | null>(null)
const editOptionRef = ref()
const editOptionOutRef = ref()
const isShowDialog = ref(false)
const type = ref('')
const types = ref('')
const productKey = ref('')
// const valueType = ref<any>({
// 	type: '',
// 	maxLength: '',
// 	trueText: '是',
// 	trueValue: 'true',
// 	falseText: '否',
// 	falseValue: 'false',
// })
const elementType = ref({
	type: '',
	maxLength: '',
})
const jsondata = ref<any>([])
const inputsdata = ref<any>([])
const outputsdata = ref<any>([])
const ruleForm = ref(JSON.parse(JSON.stringify(form)))
const rules = computed(() => ({
	name: [
		// 功能定义名称不能为空
		{ required: true, message: t('message.device.rules.functionName'), trigger: 'blur' },
		// 功能定义名称不能超过32个字符
		{ max: 32, message: t('message.device.rules.functionNameMax32'), trigger: 'blur' },
		// 功能定义名称不能包含空格
		{ validator: validateNoSpace, message: t('message.device.rules.functionNameValidator'), trigger: 'blur' },
	],
	// 功能定义标识不能为空
	key: [{ required: true, message: t('message.device.rules.functionKey'), trigger: 'blur' }],
	// 请选择数据类型
	type: [{ required: true, message: t('message.device.rules.functionType'), trigger: 'blur' }],
}))

// 打开弹窗
const openDialog = (row: RuleFormState, productKeyData: string) => {
	resetForm()
	ruleForm.value = row
	productKey.value = productKeyData
	inputsdata.value = row.inputs || []
	outputsdata.value = row.outputs || []
	isShowDialog.value = true
}
const resetForm = () => {
	ruleForm.value = JSON.parse(JSON.stringify(form))
	type.value = ''
	types.value = ''
	inputsdata.value = []
	outputsdata.value = []
	elementType.value = {
		type: '',
		maxLength: '',
	}
}


const editjson = (index: number, type: string) => {
	if (type == 'fun') {
		editOptionRef.value.openDialog(inputsdata.value[index])
	} else {
		editOptionRef.value.openDialog(jsondata.value[index])
	}
}

const deljson = (index: number, type: string) => {
	if (type == 'fun') {
		inputsdata.value.splice(index, 1)
	} else {
		jsondata.value.splice(index, 1)
	}
}

const deljsonOut = (index: number, type: string) => {
	if (type == 'fun') {
		outputsdata.value.splice(index, 1)
	} else {
		outputsdata.value.splice(index, 1)
	}
}

const editjsonOut = (index: number) => {
	editOptionOutRef.value.openDialog(outputsdata.value[index])
}

const addJson = (type: string) => {
	editOptionRef.value.openDialog({ productKey: '', id: 0, type_data: type })
}

const addJsonOut = (type: string) => {
	editOptionOutRef.value.openDialog({ productKey: '', id: 0, type_data: type })
}

const getOptionData = (data: any, type_data: any) => {
	if (type_data == 'fun') {
		inputsdata.value.push(data)
	} else {
		jsondata.value.push(data)
	}
}
const getOptionDataOut = (data: any, type_data: any) => {
	if (type_data == 'fun') {
		outputsdata.value.push(data)
	} else {
		outputsdata.value.push(data)
	}
}
// 关闭弹窗
const closeDialog = () => {
	isShowDialog.value = false
}
// 取消
const onCancel = () => {
	closeDialog()
}
// 新增
const onSubmit = () => {
	const formWrap = unref(formRef) as any
	if (!formWrap) return
	formWrap.validate((valid: boolean) => {
		if (valid) {
			ruleForm.value.inputs = inputsdata.value
			ruleForm.value.outputs = outputsdata.value
			if (ruleForm.value.id !== 0) {
				ruleForm.value.productKey = productKey.value
				api.model.functionedit(ruleForm.value).then(() => {
					// 编辑成功
					ElMessage.success(t('message.tableI18nConfirm.editSuccess'))
					closeDialog() // 关闭弹窗
					emit('typeList')
				})
			} else {
				api.model.functionadd(ruleForm.value).then(() => {
					// 新增成功
					ElMessage.success(t('message.tableI18nConfirm.addSuccess'))
					closeDialog() // 关闭弹窗
					emit('typeList')
				})
			}
		}
	})
}
defineExpose({ openDialog })
</script>
<style scoped lang="scss">
[data-theme="dark"] {
	.jslist {
		border-color: var(--next-border-color-light) !important;
	}
}
.input-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 10px;
}

.input-option {
	line-height: 30px;
	padding-top: 5px;
	width: 140px;
}

.input-option i {
	margin: 0px 5px;
	border: 1px solid #c3c3c3;
	font-size: 16px;
}

.input-options {
	display: flex;
	align-items: center;
	color: #409eff;
	cursor: pointer;
}

.jslist {
	width: 100%;
	border: 1px solid #e8e8e8;
	padding: 10px;
	margin-bottom: 10px;
}

.jsonlist {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.jsonoption a {
	margin: 0px 10px;
}
</style>