enum_handle.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <div class='edit-box'>
  3. <el-form ref='form' :rules='rules' :model='form' label-width='140px'>
  4. <!-- <el-form-item v-if='devFlag' label='对象标识' prop='EquipmentMark'>
  5. <el-input v-model='form.EquipmentMark'></el-input>
  6. </el-form-item> -->
  7. <ul class='point-box'>
  8. <span class='left'>如果</span>
  9. <span class='right'>那么</span>
  10. <li v-for='(item,index) in form.pointArr' :key='index'>
  11. <p>
  12. <el-form-item
  13. label='原始点位值'
  14. :prop='"pointArr." + index + ".from"'
  15. :rules='{
  16. required: true, message: "不能为空", trigger: "blur"
  17. }'
  18. >
  19. <el-input v-model='item.from'></el-input>
  20. </el-form-item>
  21. </p>
  22. <p>
  23. <el-form-item label='转换为标准值' :prop='"pointArr." + index + ".to"' :rules='{
  24. required: true, message: "不能为空", trigger: "blur"
  25. }'>
  26. <el-input v-model='item.to'></el-input>
  27. </el-form-item>
  28. <i v-if='index > 0' class='el-icon-delete delete' @click='deleteRow(index)'></i>
  29. </p>
  30. </li>
  31. </ul>
  32. </el-form>
  33. <div class='add-btn-box'>
  34. <el-button type='primary' @click='addRules'>+添加新转换规则</el-button>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. export default {
  40. name: 'step3_auto-handle',
  41. data() {
  42. return {
  43. form: {
  44. EquipmentMark: '',
  45. pointArr: [{ from: '', to: '' }]
  46. },
  47. rules: {
  48. // EquipmentMark: [{ required: true, message: '请输入对象标识', trigger: 'blur' }]
  49. }
  50. }
  51. },
  52. props: {
  53. devFlag: {
  54. default: true,
  55. type: Boolean
  56. },
  57. enumHandleShow:{}
  58. },
  59. methods: {
  60. getForm(cb) {
  61. this.$refs['form'].validate(valid => {
  62. if (valid) {
  63. cb(this.form)
  64. } else {
  65. cb(false)
  66. }
  67. })
  68. },
  69. addRules() {
  70. this.form.pointArr.push(this.newRules())
  71. },
  72. newRules() {
  73. return { from: '', to: '' }
  74. },
  75. deleteRow(index) {
  76. this.form.pointArr.splice(index, 1)
  77. }
  78. },
  79. watch:{
  80. enumHandleShow: {
  81. deep: true,
  82. immediate: true,
  83. handler(val) {
  84. if(val) {
  85. this.form = JSON.parse(JSON.stringify(val))
  86. }
  87. }
  88. }
  89. }
  90. }
  91. </script>
  92. <style scoped lang='scss'>
  93. .edit-box {
  94. padding: 20px 0;
  95. .tip {
  96. color: #ccc;
  97. }
  98. .point-box {
  99. margin-top: 45px;
  100. position: relative;
  101. width: 500px;
  102. .left,
  103. .right {
  104. font-size: 20px;
  105. background: #fff;
  106. }
  107. .left {
  108. position: absolute;
  109. top: -35px;
  110. left: 23px;
  111. margin: 0;
  112. padding: 0;
  113. }
  114. .right {
  115. position: absolute;
  116. top: -35px;
  117. left: 260px;
  118. margin: 0;
  119. padding: 0
  120. }
  121. li {
  122. display: flex;
  123. justify-content: space-between;
  124. margin-top: 5px;
  125. position: relative;
  126. p {
  127. .name {
  128. padding-left: 40px;
  129. }
  130. .value {
  131. margin-left: 10px;
  132. display: inline-block;
  133. width: 80px;
  134. }
  135. }
  136. .delete {
  137. top: 5px;
  138. right: -20px;
  139. cursor: pointer;
  140. position: absolute;
  141. z-index: 99999;
  142. }
  143. }
  144. }
  145. .add-btn-box {
  146. margin-top: 20px;
  147. text-align: center;
  148. }
  149. }
  150. </style>