123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <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: [],
- info: [],
- AttachObjectIds: [],
- }
- },
- beforeMount() {},
- created() {
- this.init()
- },
- mounted() {},
- methods: {
-
- handleAttach(flag) {
- switch (flag) {
- case -1:
- bus.$emit('deleteAttachObjectIds')
- break
- default:
- bus.$emit('addAttachObjectIds')
- break
- }
- this.init()
- },
-
- 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({ Name, FontSize, Color, Code })
- })
-
- },
-
- 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>
|