equipmentAttr.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div class='equipment-attr'>
  3. <p>编辑设备</p>
  4. <div class='row'>
  5. <div class='row-tit'>名称</div>
  6. <!-- <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button> -->
  7. </div>
  8. <div class='row'>
  9. <a-input v-model='equipmentName' size='small' @change='changeEquipmentName' />
  10. </div>
  11. <div class='row'>
  12. <div class='row-tit'>信息点</div>
  13. </div>
  14. <!-- 信息点 信息 -->
  15. <div class='contain' v-for='(item,index) in info' :key='index'>
  16. <div class='row'>
  17. <div>信息点名称:</div>
  18. <a-input v-model='info[index]' class='input' @change='changeInfoName(index)' />
  19. </div>
  20. <div class='row'>
  21. <div class='row-tit'>字号</div>
  22. <div class='grid-content'>
  23. <a-input-number :min='1' style='width: 128px' />
  24. </div>
  25. <div class='color-choice'>
  26. <swatches popover-x='left' />
  27. </div>
  28. </div>
  29. </div>
  30. <!-- 添加信息点 信息 -->
  31. <div class='row'>
  32. <a-button @click='addInfo'>添加信息点</a-button>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import bus from '@/bus'
  38. import { log } from 'util'
  39. import Swatches from 'vue-swatches'
  40. export default {
  41. name: 'equipmentAttr',
  42. props: {
  43. focusItemList: {
  44. type: Object,
  45. default() {
  46. return {}
  47. },
  48. },
  49. },
  50. components: { Swatches },
  51. data() {
  52. return {
  53. equipmentName: '',
  54. equipmentData: {},
  55. InfoList: [],
  56. info: [],
  57. }
  58. },
  59. beforeMount() {},
  60. created() {
  61. this.init()
  62. },
  63. mounted() {},
  64. methods: {
  65. addInfo() {
  66. bus.$emit('addEquipmentInfo')
  67. console.log(this.focusItemList)
  68. this.init()
  69. },
  70. init() {
  71. // 设置设备名称
  72. // window._focusItem = this.focusItemList.itemList[0]
  73. this.equipmentData = this.focusItemList.itemList[0].toData()
  74. this.equipmentName = this.equipmentData.Name
  75. this.equipmentName = this.equipmentData.Name
  76. this.InfoList = JSON.parse(JSON.stringify(this.equipmentData.InfoList))
  77. this.info = []
  78. this.InfoList.map((item) => {
  79. this.info.push(item.Name)
  80. })
  81. // console.log(this.equipmentData)
  82. },
  83. changeEquipmentName() {
  84. bus.$emit('changeEquipmentName', this.equipmentName)
  85. },
  86. // 更改信息点名称
  87. changeInfoName(index) {
  88. let name = this.info[index]
  89. console.log(index, name)
  90. bus.$emit('changeInfoName', { index, name })
  91. },
  92. },
  93. }
  94. </script>
  95. <style lang='less' scoped>
  96. .equipment-attr {
  97. width: 100%;
  98. height: 500px;
  99. padding: 12px 16px;
  100. box-sizing: border-box;
  101. overflow-y: scroll;
  102. // background-color: lightblue;
  103. .contain {
  104. margin: 10px 0;
  105. }
  106. .row {
  107. width: 100%;
  108. display: flex;
  109. justify-content: space-between;
  110. align-items: center;
  111. margin-top: 12px;
  112. .color-choice {
  113. & /deep/ .vue-swatches__trigger {
  114. width: 26px !important;
  115. height: 26px !important;
  116. border-radius: 0px !important;
  117. }
  118. }
  119. .row-tit {
  120. color: #1f2429;
  121. font-size: 14px;
  122. }
  123. .input {
  124. width: 150px;
  125. }
  126. }
  127. .grid {
  128. margin: 10px 15px;
  129. .grid-title {
  130. font-size: 12px;
  131. color: #8d9399;
  132. }
  133. }
  134. .grid-content {
  135. // margin-top: 10px;
  136. position: relative;
  137. }
  138. }
  139. </style>