select_one.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!--
  2. @param name 表头文案
  3. @param isSelected 是否显示前一级的完成
  4. @param renderData 数据
  5. @param infosKey dom中显示renderData中的某个字段
  6. -->
  7. <template>
  8. <div class="select-own-one saga-border">
  9. <p>{{name}}</p>
  10. <ul v-if="renderData.length">
  11. <li v-for="(item,index) in renderData" :key="index">
  12. <div @click="checkItem(item,index)" :class="{'saga-active-select': index == active,'disabled':item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'}" class="select-item border-bottom pointer">
  13. <!-- <span v-if="isSelected" :class="{'is-checked': item[isCheckInfo]}" class="el-checkbox__input">
  14. <span class="el-checkbox__inner"></span>
  15. </span> -->
  16. <span v-if="isSelected" :class="item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'?'iconfont icon-shenglvehao load-color':item[isCheckInfo] ? 'el-icon-success success-color' : 'el-icon-error error-color'">
  17. </span>
  18. {{overString(item[infosKey])}}
  19. <i v-if="isDel" @click.stop="delItem(item)" class="el-icon-error saga-delete pointer"></i>
  20. </div>
  21. </li>
  22. </ul>
  23. <div v-else class="center" style="padding-top: 50px;box-sizing:border-box;">
  24. <i class="icon-wushuju iconfont"></i> 暂无数据
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. name: "select_one",
  31. props: {
  32. name: {
  33. default: "原始点位描述"
  34. },
  35. isSelected: {
  36. default: false
  37. },
  38. isCheckInfo: {
  39. default: ""
  40. },
  41. renderData: {
  42. default: function() {
  43. return []
  44. }
  45. },
  46. infosKey: {
  47. default: "name"
  48. },
  49. isDel: {
  50. default: false
  51. }
  52. },
  53. data() {
  54. return {
  55. active: 0,
  56. }
  57. },
  58. created() {},
  59. mounted() {},
  60. methods: {
  61. checkItem(item, index) {
  62. if(item.RelationStatus=='Waiting'||item.RelationStatus=='Pending'){
  63. this.$message('正在执行')
  64. return
  65. }
  66. this.$emit("check", item)
  67. this.active = index
  68. },
  69. delItem(item) {
  70. this.$emit('deleteItem', item)
  71. },
  72. change() {
  73. this.$emit("check", this.renderData[this.active])
  74. },
  75. overString(val) {
  76. if (val.length > 13) {
  77. return val.substring(0, 13) + '...'
  78. } else {
  79. return val
  80. }
  81. }
  82. },
  83. watch: {
  84. renderData: {
  85. deep: true,
  86. handler: function() {
  87. this.change()
  88. //do something
  89. console.log("change")
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. .saga-active-select {
  97. background-color: #9FC5F8;
  98. }
  99. .select-own-one {
  100. display: inline-block;
  101. height: 340px;
  102. width: 230px;
  103. overflow: hidden;
  104. p {
  105. line-height: 40px;
  106. height: 40px;
  107. padding-left: 10px;
  108. box-sizing: border-box;
  109. }
  110. ul {
  111. height: 300px;
  112. max-height: 300px;
  113. overflow-y: auto;
  114. li {
  115. // padding-left: 10px;
  116. box-sizing: border-box;
  117. div {
  118. padding-left: 10px;
  119. }
  120. }
  121. }
  122. }
  123. .border-bottom {
  124. border-bottom: 1px solid #ccc;
  125. }
  126. .select-item {
  127. height: 30px;
  128. line-height: 30px;
  129. &.disabled{
  130. background-color: #ccc;
  131. }
  132. .success-color{
  133. color: #409EFF;
  134. }
  135. .error-color{
  136. color: #F56C6C;
  137. }
  138. .load-color{
  139. color: #909399;
  140. }
  141. }
  142. .saga-delete {
  143. display: none;
  144. float: right;
  145. line-height: 31px;
  146. padding-right: 10px;
  147. box-sizing: border-box;
  148. }
  149. .select-item:hover {
  150. background-color: #9FC5F8;
  151. .saga-delete {
  152. display: inline;
  153. }
  154. }
  155. </style>