118 lines
3.8 KiB
Vue
118 lines
3.8 KiB
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: ''
|
|
},
|
|
defaultFormData: {
|
|
default: () => []
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
defaultDeviceName: {
|
|
handler (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渲染
|
|
const 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) {
|
|
const 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>
|