wanda-editer/src/components/edit/equipmentAttr.vue

<template>
    <div class='equipment-attr'>
        <p>编辑设备</p>
        <div class='row'>
            <div class='row-tit'>名称</div>
            <a-input v-model='equipmentName' style='width: 180px' @change='changeEquipmentName' />
        </div>
        <!-- 工程信息化对象列表 -->
        <div class='row'>
            <div class='row-tit'>工程信息化对象列表</div>
        </div>
        <div class='row' v-for='(item,index) in AttachObjectIds' :key='index'>
            <a-input class='input' v-model='AttachObjectIds[index]' type='small' @change='changeAttachObjectIds(index)' />
        </div>
        <!-- 添加工程信息化对象列表 -->
        <div class='row'>
            <span>操作工程信息化对象</span>
            <a-button @click='handleAttach(1)' size='small' type='primary'>添加</a-button>
            <a-button @click='handleAttach(-1)' size='small' v-show='AttachObjectIds.length' type='danger'>删除</a-button>
        </div>
        <a-divider />
        <!-- 信息点 -->
        <div class='row'>
            <div class='row-tit'>信息点</div>
        </div>
        <!-- 信息点 信息 -->
        <div class='contain' v-for='(item,index) in info' :key='index'>
            <div class='row'>
                <div>信息点名称:</div>
                <a-input v-model='info[index].Name' class='input' @change='changeInfoName(index)' />
            </div>
            <div class='row'>
                <div>信息点Code:</div>
                <a-input v-model='info[index].Code' class='input' @change='changeInfoName(index)' />
            </div>
            <div class='row'>
                <div class='row-tit'>字号</div>
                <div class='grid-content'>
                    <a-input-number v-model='info[index].FontSize' @change='changeInfoName(index)' :min='1' :max='100' style='width: 128px' />
                </div>
                <div class='color-choice'>
                    <swatches v-model='info[index].Color' popover-x='left' @close='changeInfoName(index)' />
                </div>
            </div>
        </div>
        <!-- 添加信息点 信息 -->
        <div class='row'>
            <a-button @click='addInfo' type='primary'>添加信息点</a-button>
            <a-button @click='delInfo' v-show='info.length' type='danger'>删除信息点</a-button>
        </div>
        <!-- 键盘操作提示 -->
        <KeyTips />
    </div>
</template>
<script>
import bus from '@/bus'
import { log } from 'util'
import Swatches from 'vue-swatches'
import { cloneDeep } from 'lodash'
import KeyTips from './keyTips'

export default {
    name: 'equipmentAttr',
    props: {
        focusItemList: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    components: { Swatches, KeyTips },
    data() {
        return {
            equipmentName: '',
            equipmentData: {},
            InfoList: [], //保存存入的InfoList
            info: [], //修改 info
            AttachObjectIds: [], //工程信息化对象 ID 列表
        }
    },

    beforeMount() {},
    created() {
        this.init()
    },
    mounted() {},
    methods: {
        /**
         * @description 添加,删除 工程信息化对象, baseEditer.vue bus事务中做对应处理
         * @param { Number } flag  -1:删除 1:添加
         */
        handleAttach(flag) {
            switch (flag) {
                case -1:
                    bus.$emit('deleteAttachObjectIds')
                    break
                default:
                    bus.$emit('addAttachObjectIds')
                    break
            }
            this.init()
        },
        /**
         * @description
         */
        addInfo() {
            bus.$emit('addEquipmentInfo')
            this.init()
        },
        delInfo() {
            bus.$emit('deleteEquipmentInfo')
            this.init()
        },
        init() {
            // 设置设备名称
            window.equipmentData = this.focusItemList.itemList[0].toData()
            this.equipmentData = this.focusItemList.itemList[0].toData()
            this.equipmentName = this.equipmentData.Name
            this.InfoList = cloneDeep(this.equipmentData.InfoList)
            this.AttachObjectIds = cloneDeep(this.equipmentData.AttachObjectIds || [])
            this.info = []
            this.InfoList.map((item) => {
                let { Name, FontSize, Color, Code } = item
                // this.info.push(item.Name)
                this.info.push({ Name, FontSize, Color, Code })
            })
            // console.log(this.equipmentData)
        },
        // 更改设备名称
        changeEquipmentName() {
            bus.$emit('changeEquipmentName', this.equipmentName)
        },
        // 更改 工程信息化对象列表
        changeAttachObjectIds(index) {
            let ID = this.AttachObjectIds[index]
            bus.$emit('changeEqAttachObjectIds', { index, ID })
        },
        // 更改信息点名称
        changeInfoName(index) {
            let info = this.info[index]
            let { Name, FontSize, Color, Code } = info
            bus.$emit('changeInfoName', { index, Name, FontSize, Color, Code })
        },
    },
}
</script>
<style lang='less' scoped>
.equipment-attr {
    width: 100%;
    // height: 500px;
    height: calc(100% - 150px);
    padding: 12px 16px;
    box-sizing: border-box;
    overflow-y: scroll;
    //   background-color: lightblue;
    .contain {
        margin: 10px 0;
    }
    .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        .color-choice {
            & /deep/ .vue-swatches__trigger {
                width: 26px !important;
                height: 26px !important;
                border-radius: 0px !important;
            }
        }
        .row-tit {
            color: #1f2429;
            font-size: 14px;
        }
        .input {
            width: 150px;
        }
    }
    .grid {
        margin: 10px 15px;
        .grid-title {
            font-size: 12px;
            color: #8d9399;
        }
    }
    .grid-content {
        // margin-top: 10px;
        position: relative;
    }
}
</style>