ibms/src/components/config_point/step3_edit/auto_handle.vue

<template>
    <el-form ref='form' :rules='rules' :model='form' label-width='140px'>
        <el-form-item v-if='devFlag' ref='form' label='设备标识' prop='EquipmentMark'>
            <el-input v-model='form.EquipmentMark'></el-input>
        </el-form-item>
        <el-form-item
            label='原始点位值单位'
            prop='unit'
            :rules='[
                { required: true, message: "请选择原始点位值单位" , trigger: ["change", "blur"]},
                { validator: validateUnit, trigger: "change"},
            ]'
        >
            <el-cascader :options='options' v-model='form.unit' @change='handleChange'></el-cascader>
            <p
                class='tip'
            >数据字典信息点-{{unitObj ? (unitObj.infoPointName || '--') : '--'}}({{unitObj ? (unitObj.unit || '--') : '--'}})</p>
        </el-form-item>
    </el-form>
</template>

<script>
import { batchQueryUnit } from '@/fetch/point_http'
export default {
    name: 'step3_auto-handle',
    data() {
        return {
            options: [],
            form: {
                EquipmentMark: '',
                unit: [],
            },
            rules: {
                EquipmentMark: [{ required: true, message: '请输入设备标识', trigger: 'blur' }],
            }
        }
    },
    props: {
        unitObj: {
            default: {}
        },
        devFlag: {
            default: true,
            type: Boolean
        },
        autoHandleShow: {}
    },
    methods: {
        validateUnit(rule, value, callback) {
            if(this.unitObj.unit) {
                callback()
            } else {
                callback(new Error("无数据字典信息点单位"))
            }
        },
        getForm(cb) {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if(this.unitObj.unit) {
                        cb(this.form)
                    } else {
                        cb(false)
                    }                    
                } else {
                    cb(false)
                }
            })
        },
        handleChange(val) {
            // console.log(val)
        },
        getUnitList() {
            batchQueryUnit({}, res => {
                if (res.Result == 'success') {
                    let data = res.Content
                    let arr = []
                    data.forEach(item => {
                        let first = {
                            value: item.Type,
                            label: item.Type,
                            children: []
                        }
                        item.Units.forEach(ele => {
                            let second = {}
                            second = {
                                value: ele.Name,
                                label: ele.Name
                            }
                            first.children.push(second)
                        })
                        arr.push(first)
                    })
                    this.options = arr
                }
            })
        },
        init() {
            //获取单位
            this.getUnitList()
        }
    },
    created() {
        this.init()
    },
    watch: {
        unitObj: {
            deep: true,
            handler() {
                this.$refs['form'].validateField('unit')
            }
        },
        autoHandleShow: {
            deep: true,
            immediate: true,
            handler(val) {
                if(val){
                    this.form = val;
                }
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.tip {
    color: #ccc;
}
</style>