admin-ui/src/views/iot/property/attribute/edit.vue

<template>
	<el-dialog
		class="api-edit"
		v-model="showDialog"
		:title="formData.id ? $t('message.property.attribute.dialog.editTitle') : $t('message.property.attribute.dialog.addTitle')"
		width="800px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
			<el-form-item :label="$t('message.property.attribute.form.productKey')" prop="productKey">
				<el-select v-model="formData.productKey" :placeholder="$t('message.property.attribute.form.productPlaceholder')" class="w100" disabled>
					<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
						<span style="float: left">{{ item.name }}</span>
						<span style="float: right; font-size: 13px">{{ item.key }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('message.property.attribute.form.fieldName')" prop="name">
				<el-input v-model.trim="formData.name" :placeholder="$t('message.property.attribute.form.fieldNamePlaceholder')" />
			</el-form-item>
			<el-form-item :label="$t('message.property.attribute.form.fieldTitle')" prop="title">
				<el-input v-model.trim="formData.title" :placeholder="$t('message.property.attribute.form.fieldTitlePlaceholder')" />
			</el-form-item>
			<el-form-item :label="$t('message.property.attribute.form.fieldType')" prop="types">
				<el-select v-model="formData.types" :placeholder="$t('message.property.attribute.form.typePlaceholder')" class="w100" clearable>
					<el-option v-for="item in typesData" :key="item.value" :label="t('message.property.attribute.types.' + item.value)" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('message.property.attribute.form.fieldDesc')" prop="desc">
				<el-input v-model.trim="formData.desc" :placeholder="$t('message.property.attribute.form.fieldDescPlaceholder')" />
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="showDialog = false">{{ $t('message.tableI18nAction.cancel') }}</el-button>
				<el-button type="primary" @click="onSubmit">{{ $t('message.property.attribute.actions.save') }}</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import api from '/@/api/device'
import { ruleRequired } from '/@/utils/validator'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const emit = defineEmits(['getList'])

const showDialog = ref(false)
const formRef = ref()
const productData = ref();
const typesData = ref([
    { value: 'input' },
    { value: 'textarea' },
    { value: 'date' },
    { value: 'file' },
])
const baseForm = {
    id: undefined,
    name: '',
    productKey: '',
    title: '',
    types: '',
    desc: '',
}

const formData = reactive({
    ...baseForm,
})

const { t } = useI18n()

const ruleForm = {
    name: [ruleRequired(t('message.property.attribute.valid.nameRequired'))],
    title: [ruleRequired(t('message.property.attribute.valid.titleRequired'))],
    productKey: [ruleRequired(t('message.property.attribute.valid.productRequired'))],
    types: [ruleRequired(t('message.property.attribute.valid.typeRequired'))],
}


const onSubmit = async () => {
	await formRef.value.validate()

	const theApi = formData.id ? api.dev_asset_metadata.edit : api.dev_asset_metadata.add

	await theApi(formData)

	ElMessage.success(t('message.property.attribute.messages.saveSuccess'))
	resetForm()
	showDialog.value = false
	emit('getList')
}

const resetForm = async () => {
	Object.assign(formData, { ...baseForm })
	formRef.value && formRef.value.resetFields()
}

const open = async (row: any, productInfo: any) => {
	resetForm()
	showDialog.value = true
	nextTick(() => {
		Object.assign(formData, { ...row })

		//获取 所有的产品
		api.product.getLists({}).then((res: any) => {
			productData.value = res.product
		})

		formData.productKey = productInfo.key
	})
}

defineExpose({ open })
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
	--el-input-width: 320px;
}
</style>