uni-check-list.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <view class="check-list-pages">
  3. <view>
  4. <view class="selList" v-for="(item, index) in list" :key="index">
  5. <view class="radios" @click="chooseItem(item)">
  6. <view v-if="checkIconPositon=='right'" style="flex-grow: 1;" class="title">{{ item[titleKeys] }}</view>
  7. <view>
  8. <radio v-if="types == 'radio'" :checked="item.checked" :value="item.id" />
  9. <u-checkbox v-if="types == 'checkbox'" :disabled="item.disabled" v-model="item.checked" :name="item.id" />
  10. </view>
  11. <view v-if="checkIconPositon=='left'" class="title">{{ item[titleKeys] }}</view>
  12. </view>
  13. <view class="details" @click="rightClick(item)">
  14. <slot name="right"></slot>
  15. <u-icon v-if="showArrow && types != 'views'" name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
  16. </view>
  17. </view>
  18. <view style="padding-top: 10vh;" v-if="list.length==0 && status!='loading'">
  19. <u-empty :text="noDataText" mode="list"></u-empty>
  20. </view>
  21. </view>
  22. <!-- 选择按钮 -->
  23. <view v-if="types == 'checkbox'" @click="kpOk" class="kp-ok">确认选择</view>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. name: 'UniCheckList',
  29. props: {
  30. listData: {
  31. type: Array,
  32. default: function() {
  33. return [];
  34. }
  35. },
  36. // 类型 radio 或 checkbox 或 views 指 只是展示列表
  37. types: {
  38. type: String,
  39. default: 'radio'
  40. },
  41. // 标题显示的字段
  42. titleKeys: {
  43. type: String,
  44. default: 'name'
  45. },
  46. // 暂无数据提示内容
  47. noDataText: {
  48. type: String,
  49. default: '暂无数据'
  50. },
  51. // 是否在加载中
  52. status: {
  53. type: String,
  54. default: 'onmore'
  55. },
  56. // 是否显示右边箭头
  57. showArrow: {
  58. type: Boolean,
  59. default: true
  60. },
  61. // 赋值,格式要和backValue 一致
  62. defValue: {
  63. type: Array,
  64. default: function() {
  65. return [];
  66. }
  67. },
  68. // 返回结果是
  69. // idArr: [id,id,id...],objArr:[obj,obj,obj...]
  70. backValue:{
  71. type: String,
  72. default: 'idArr'
  73. },
  74. // 选择按钮位置,left ,right
  75. checkIconPositon:{
  76. type: String,
  77. default: 'left'
  78. }
  79. },
  80. data() {
  81. return {
  82. list: JSON.parse(JSON.stringify(this.listData)),
  83. value: this.defValue
  84. };
  85. },
  86. watch: {
  87. listData(newValue, oldValue) {
  88. this.list = JSON.parse(JSON.stringify(newValue));
  89. this.hasCheck();
  90. },
  91. defValue(newValue, oldValue){
  92. this.value = newValue;
  93. }
  94. },
  95. mounted() {
  96. this.hasCheck();
  97. },
  98. methods: {
  99. hasCheck() {
  100. this.list.map((item,index) => {
  101. let a = this.value.findIndex(k=>{
  102. return this.backValue == 'idArr' ? k == item.id : k.id == item.id
  103. })
  104. item.checked = a>=0
  105. this.list.splice(index,1,item)
  106. })
  107. },
  108. // 选中
  109. chooseItem(item) {
  110. if (item.disabled) {
  111. return
  112. }
  113. // 单选
  114. if (this.types == 'radio') {
  115. this.value[0] = this.backValue == 'idArr' ? item.id : item;
  116. this.$emit('ok', this.value);
  117. } else {
  118. // 已选项点击文本,取消选中
  119. item.checked = this.value.find(a=>a.id==item.id) ? false : true
  120. // 选中
  121. if (item.checked) {
  122. this.value.push(this.backValue == 'idArr' ? item.id : item);
  123. } else {
  124. let index = this.backValue == 'idArr' ? this.value.indexOf(item.id) : this.value.findIndex(a=> a.id == item.id);
  125. this.value.splice(index, 1);
  126. }
  127. }
  128. this.hasCheck();
  129. },
  130. rightClick(item) {
  131. this.$emit('rightClick', item);
  132. },
  133. kpOk() {
  134. this.$emit('ok', this.value);
  135. }
  136. }
  137. };
  138. </script>
  139. <style lang="less">
  140. .check-list-pages {
  141. height: 100%;
  142. display: flex;
  143. flex-direction: column;
  144. > view {
  145. &:first-child {
  146. flex-grow: 1;
  147. overflow: auto;
  148. }
  149. }
  150. }
  151. .selList {
  152. width: 100%;
  153. border-bottom: 1px solid #eee;
  154. display: flex;
  155. align-items: center;
  156. .radios {
  157. display: flex;
  158. align-items: center;
  159. flex-grow: 1;
  160. width: 50%;
  161. padding: 26upx 20upx;
  162. &:active {
  163. background-color: #f8f8f8;
  164. }
  165. .title {
  166. word-break: break-all;
  167. }
  168. }
  169. .details {
  170. color: #007aff;
  171. padding-right: 20upx;
  172. display: flex;
  173. align-items: center;
  174. &:active {
  175. color: #d9363e;
  176. }
  177. }
  178. }
  179. .kp-ok {
  180. text-align: center;
  181. padding: 26upx;
  182. background: #55aaff;
  183. color: #fff;
  184. font-size: 18px;
  185. }
  186. </style>