EdgeManager/src/views/edgeServer/edgeServerConfigure/deviceConfigure.vue

<template>
    <div>
        <el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
            <el-form-item label="设备">
                <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
                    <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
                <template v-if="item.type === 'text'">
                    <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
                        :placeholder="item.placeholder"></el-input>
                </template>

                <template v-if="item.type === 'select'">
                    <el-select v-model='deviceConfigureModelValue[item.key]' style="width:80px" :disabled="item.disabled"
                        :placeholder="item.placeholder">
                        <el-option v-for="index in item.option" :key="index.value" :label="index.label"
                            :value="index.value">
                        </el-option>
                    </el-select>
                </template>

                <template v-if="item.type === 'time'">
                    <el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime" :placeholder="item.placeholder"
                        defaultValue="2022-06-17 16:36:00" :disabled="item.disabled" style="width:180px">
                    </el-date-picker>
                </template>


            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import deviceConfigureFormItemData from './deviceSetting/index.json'
import { each } from 'lodash'
export default {
    name:'deviceConfigure',
    props: {
        loading: {
            default: false
        },
        defaultDeviceName: {
            default: Object.keys(deviceConfigureFormItemData)[0]
        },
        defaultFormData: {
            default: () => []
        }

    },
    computed: {

    },
    watch: {
        defaultDeviceName: {
            handler(val) {
                if(val){
                    this.defaultDeviceTypeNameValue = val
                    this.deviceChange(val)
                }
            },
            immediate: true
        },
        defaultFormData: {
            handler(val) {
                this.setDeviceDefaultFormItemValue(val)
            },
            immediate: true
        },
    },
    data() {
        return {
            deviceConfigureFormItem: [],
            defaultDeviceTypeNameValue: '',
            deviceConfigureModelValue: {},
            deviceSelectedVlaue: '',
            deviceTypeData: [
            ],
        }
    },
    methods: {
        deviceChange(e) {
            //获取所有字符串的key 用于v-model渲染
            let deviceConfigureModelValue = {}
            each(deviceConfigureFormItemData[e], (item) => {
                
                if (item.type === 'time') {
                    deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
                } else {
                    deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ""
                }
            })
            this.deviceConfigureModelValue = deviceConfigureModelValue
            this. deviceConfigureFormItem = deviceConfigureFormItemData[e]
        },
        setDeviceDefaultFormItemValue(val) {
                let deviceConfigureModelValue = {}
                each(deviceConfigureFormItemData[this.defaultDeviceTypeNameValue], (item) => {
                    if (item.type === 'time') {
                        deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : new Date()
                    } else {
                        deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : item.defaultValue
                    }
                }
                )
                this.deviceConfigureModelValue = deviceConfigureModelValue
        },
        getDeviceType() {
            this.deviceTypeData = Object.keys(deviceConfigureFormItemData)
        }
    },
    mounted() {
        this.getDeviceType()
    }

}
</script>