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

<template>
	<div class="system-edit-dic-container">
		<!-- 编辑参数 / 新增参数 -->
		<el-dialog :title="typeof ruleForm.valueType !== 'undefined' ? $t('message.device.dialogI18n.editOption') : $t('message.device.dialogI18n.addOption')" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" ref="formRef" :rules="rules" :label-width="currentLocale == 'en' ? '150px' : '120px'">
				<!-- 参数标识 -->
				<el-form-item :label="$t('message.device.formI18nLabel.parameterIdentifier')" prop="key">
					<!-- 请输入参数标识 -->
					<el-input v-model="ruleForm.key" :placeholder="$t('message.device.formI18nPlaceholder.parameterIdentifier')" />
				</el-form-item>
				<!-- 参数名称 -->
				<el-form-item :label="$t('message.device.formI18nLabel.parameterName')" prop="name">
					<!-- 请输入参数名称 -->
					<el-input v-model="ruleForm.name" :placeholder="$t('message.device.formI18nPlaceholder.parameterName')" />
				</el-form-item>

				<!-- 数据类型 -->
				<el-form-item :label="$t('message.device.formI18nLabel.dataType')" prop="type">
					<!-- 请选择数据类型 -->
					<el-select v-model="valueType.type" :placeholder="$t('message.device.formI18nPlaceholder.dataType')" @change="seletChange">
						<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
							<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
						</el-option-group>
					</el-select>
				</el-form-item>

				<TypeItem :valueType="valueType" :typeData="typeData"></TypeItem>
				<div v-if="type == 'array'">
				<!-- 元素类型 -->
					<el-form-item :label="$t('message.device.formI18nLabel.elementType')" prop="type">
						<!-- 请选择元素类型 -->
						<el-select v-model="elementType.type" :placeholder="$t('message.device.formI18nPlaceholder.elementType')" @change="seletChanges">
							<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
								<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="['array', 'enum'].includes(item.type)" />
							</el-option-group>
						</el-select>
					</el-form-item>
					<TypeItem :valueType="elementType" :typeData="typeData"></TypeItem>
				</div>
				<!-- 参数描述 -->
				<el-form-item :label="$t('message.device.formI18nLabel.parameterDescription')" prop="desc">
					<!-- 请输入参数描述 -->
					<el-input v-model="ruleForm.desc" type="textarea" :placeholder="$t('message.device.formI18nPlaceholder.parameterDescription')"></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">{{ typeof ruleForm.valueType !== 'undefined' ? $t('message.tableI18nAction.edit') : $t('message.tableI18nAction.add') }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

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

interface stateType {
	isShowDialog: boolean
	ruleForm: any
	valueType: any
	typeData: any
	elementType: any
	type: string
	[key: string]: any
}

const valueTypeBase = {
	// max: null,
	// min: null,
	unit: null,
	decimals: null,
	trueText: '是',
	falseText: '否',
	trueValue: true,
	falseValue: false,
	type: null,
	maxLength: null,
}

const valueType = {
	...JSON.parse(JSON.stringify(valueTypeBase)),
	properties: [{
		'key': '',
		'name': '',
		'desc': '',
		'valueType': {
			...JSON.parse(JSON.stringify(valueTypeBase)),
			elements: [{
				'text': '',
				'value': ''
			}]
		}
	}],
	elements: [{
		'text': '',
		'value': ''
	}]
}

export default defineComponent({
	name: 'deviceEditPro',
	components: { Plus, Minus, Right, TypeItem },
	setup(prop, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const { locale, t } = useI18n();
		const currentLocale = computed(() => locale.value)
		const rules = computed(() => ({
			name: [
				// 参数名称不能为空
				{ required: true, message: t('message.device.rules.parameterName'), trigger: 'blur' },
				// 参数名称不能超过32个字符
				{ max: 32, message: t('message.device.rules.parameterNameMax32'), trigger: 'blur' },
				//  参数名称不能包含空格
				{ validator: validateNoSpace, message: t('message.device.rules.parameterNameValidator'), trigger: 'blur' }
			],
			// 参数标识不能为空
			key: [{ required: true, message: t('message.device.rules.parameterKey'), trigger: 'blur' }],
			// 请选择是否只读
			accessMode: [{ required: true, message: t('message.device.rules.accessMode'), trigger: 'blur' }],
		}));
		const state = reactive<stateType>({
			isShowDialog: false,
			typeData: [], //
			type: '',
			types: '',
			valueType: JSON.parse(JSON.stringify(valueType)),
			elementType: JSON.parse(JSON.stringify(valueType)),
			properties: [JSON.parse(JSON.stringify(valueType))],
			enumdata: [
				{
					'text': '',
					'value': '',
				},
			],
			ruleForm: {
				id: 0,
				name: '',
				key: '',
				transportProtocol: '',
				accessMode: '0',
				status: 1,
				valueType: {},
				desc: '',
			}
		});

		// 打开弹窗
		const openDialog = (row?: any) => {
			resetForm();

			api.product.getDataType({ status: -1 }).then((res: any) => {
				const datat: any = Object.values(res.dataType);
				datat.forEach((item: any, index: number) => {
					if (index == 0) {
						// 基础类型
						datat[index]['label'] = t('message.device.baseType');
						datat[index]['options'] = item;
					} else {
						// 基础类型
						datat[index]['label'] = t('message.device.extensionType');
						datat[index]['options'] = item;
					}
				});
				state.typeData = datat || [];
			});

			if (row) {
				if (typeof row.valueType !== 'undefined') {
					state.type = row.valueType.type;

					if (typeof row.valueType.elementType !== 'undefined') state.elementType = row.valueType.elementType;
					if (typeof row.valueType.elements !== 'undefined') state.enumdata = row.valueType.elements;
					if (typeof row.valueType.properties !== 'undefined') state.properties = row.valueType.properties;
					if (typeof row.valueType.type !== 'undefined') state.valueType.type = row.valueType.type;

					const fieldCount = Object.keys(row.valueType).length;
					if (fieldCount > 1) state.valueType = row.valueType;
				}

				state.ruleForm = row;
			}
			state.isShowDialog = true;
		};
		const resetForm = () => {
			state.ruleForm = {
				name: '',
				desc: '',
			};
			state.valueType = JSON.parse(JSON.stringify(valueType));
			state.enumdata = [{
				'text': '',
				'value': '',
			}];
			state.elementType = JSON.parse(JSON.stringify(valueType));
		};

		const seletChange = (val: string) => {

			state.type = val;
		};
		const seletChanges = (val: string) => {
			state.types = val;
		};

		const addEnum = () => {
			state.enumdata.push({
				'text': '',
				'value': '',
			});
		};
		const delEnum = (index: number) => {
			state.enumdata.splice(index, 1);
		}

		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					if (typeof state.ruleForm.valueType !== 'undefined') {
						//修改

						if (state.type == 'array') {
							state.valueType.elementType = state.elementType;
						}

						state.ruleForm.valueType = state.valueType;
						// ElMessage.success('参数类型修改成功');
						closeDialog(); // 关闭弹窗
						emit('editTypeList', state.ruleForm, state.ruleForm.type_data);
					} else {
						// //添加

						if (state.type == 'array') {
							state.valueType.elementType = state.elementType;
						}

						state.ruleForm.valueType = state.valueType;
						// 新增成功
						ElMessage.success(t('message.tableI18nConfirm.addSuccess'));
						closeDialog(); // 关闭弹窗
						emit('typeList', state.ruleForm, state.ruleForm.type_data);
					}
				}
			});
		};

		return {
			currentLocale,
			rules,
			openDialog,
			addEnum,
			delEnum,
			seletChange,
			seletChanges,
			closeDialog,
			onCancel,
			onSubmit,
			formRef,
			...toRefs(state),
		};
	},
});
</script>
<style scoped>
.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
}
</style>