123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <view class="check-list-pages">
- <view>
- <view class="selList" v-for="(item, index) in list" :key="index">
- <view class="radios" @click="chooseItem(item)">
- <view v-if="checkIconPositon=='right'" style="flex-grow: 1;" class="title">{{ item[titleKeys] }}</view>
- <view>
- <radio v-if="types == 'radio'" :checked="item.checked" :value="item.id" />
- <checkbox v-if="types == 'checkbox'" :checked="item.checked" :value="item.id" />
- </view>
- <view v-if="checkIconPositon=='left'" class="title">{{ item[titleKeys] }}</view>
- </view>
- <view class="details" @click="rightClick(item)">
- <slot name="right"></slot>
- <u-icon v-if="showArrow && types != 'views'" name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888"></u-icon>
- </view>
- </view>
- <view style="padding-top: 10vh;" v-if="list.length==0">
- <u-empty :text="noDataText" mode="list"></u-empty>
- </view>
- </view>
- <!-- 选择按钮 -->
- <view v-if="types == 'checkbox'" @click="kpOk" class="kp-ok">确认选择</view>
- </view>
- </template>
- <script>
- export default {
- name: 'UniCheckList',
- props: {
- listData: {
- type: Array,
- default: function() {
- return [];
- }
- },
- // 类型 radio 或 checkbox 或 views 指 只是展示列表
- types: {
- type: String,
- default: 'radio'
- },
- // 标题显示的字段
- titleKeys: {
- type: String,
- default: 'name'
- },
- // 暂无数据提示内容
- noDataText: {
- type: String,
- default: '暂无考评方案'
- },
- // 是否显示右边箭头
- showArrow: {
- type: Boolean,
- default: true
- },
- // 赋值,格式要和backValue 一致
- defValue: {
- type: Array,
- default: function() {
- return [];
- }
- },
- // 返回结果是
- // idArr: [id,id,id...],objArr:[obj,obj,obj...]
- backValue:{
- type: String,
- default: 'idArr'
- },
- // 选择按钮位置,left ,right
- checkIconPositon:{
- type: String,
- default: 'left'
- }
- },
- data() {
- return {
- list: this.listData,
- value: this.defValue
- };
- },
- watch: {
- listData(newValue, oldValue) {
- this.list = newValue;
- this.hasCheck();
- },
- defValue(newValue) {
- console.log(newValue)
- this.value = newValue;
- this.hasCheck();
- }
- },
- mounted() {
- this.hasCheck();
- },
- methods: {
- hasCheck() {
- this.list.map(item => {
- let a = this.value.findIndex(k=>{
- return this.backValue == 'idArr' ? k == item.id : k.id == item.id
- })
- item.checked = a>=0
- })
- console.log(this.list,'111111111')
- },
- // 选中
- chooseItem(item) {
- // 单选
- if (this.types == 'radio') {
- this.value[0] = this.backValue == 'idArr' ? item.id : item;
- this.$emit('ok', this.value);
- } else {
- // 取消选中
- if (item.checked) {
- let index = this.backValue == 'idArr' ? this.value.indexOf(item.id) : this.value.findIndex(a=> a.id == item.id);
- this.value.splice(index, 1);
- } else {
- this.value.push(this.backValue == 'idArr' ? item.id : item);
- }
- }
- },
- rightClick(item) {
- this.$emit('rightClick', item);
- },
- kpOk() {
- this.$emit('ok', this.value);
- }
- }
- };
- </script>
- <style lang="less">
- .check-list-pages {
- height: 100%;
- display: flex;
- flex-direction: column;
- > view {
- &:first-child {
- flex-grow: 1;
- overflow: auto;
- }
- }
- }
- .selList {
- width: 100%;
- border-bottom: 1px solid #eee;
- display: flex;
- align-items: center;
- .radios {
- display: flex;
- align-items: center;
- flex-grow: 1;
- width: 50%;
- padding: 26upx 20upx;
- &:active {
- background-color: #f8f8f8;
- }
- .title {
- word-break: break-all;
- }
- }
- .details {
- color: #007aff;
- padding-right: 20upx;
- display: flex;
- align-items: center;
- &:active {
- color: #d9363e;
- }
- }
- }
- .kp-ok {
- text-align: center;
- padding: 26upx;
- background: #55aaff;
- color: #fff;
- font-size: 18px;
- }
- </style>
|