|
@@ -1,157 +1,155 @@
|
|
|
<template>
|
|
|
<view class="check-list-pages">
|
|
|
<view>
|
|
|
- <view
|
|
|
- class="selList"
|
|
|
- v-for="(item, index) in list" :key="index"
|
|
|
- >
|
|
|
+ <view class="selList" v-for="(item, index) in list" :key="index">
|
|
|
<view class="radios" @click="chooseItem(item)">
|
|
|
- <radio v-if="types=='radio'" :checked="item.checked" :value="item.id" />
|
|
|
- <checkbox v-if="types=='checkbox'" :checked="item.checked" :value="item.id" />
|
|
|
- <text>{{item[titleKeys]}}</text>
|
|
|
+ <radio v-if="types == 'radio'" :checked="item.checked" :value="item.id" />
|
|
|
+ <checkbox v-if="types == 'checkbox'" :checked="item.checked" :value="item.id" />
|
|
|
+ <text>{{ item[titleKeys] }}</text>
|
|
|
</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>
|
|
|
+ <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="暂无考评方案" mode="list"></u-empty>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!-- 选择按钮 -->
|
|
|
- <view v-if="types=='checkbox'" @click="kpOk" class="kp-ok">
|
|
|
- 确认选择
|
|
|
- </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'
|
|
|
- },
|
|
|
- // 是否显示右边箭头
|
|
|
- showArrow:{
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- defValue:{
|
|
|
- type: Array,
|
|
|
- default:function(){
|
|
|
- return []
|
|
|
- }
|
|
|
+export default {
|
|
|
+ name: 'UniCheckList',
|
|
|
+ props: {
|
|
|
+ listData: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return [];
|
|
|
}
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: this.listData,
|
|
|
- value: []
|
|
|
- }
|
|
|
+ // 类型 radio 或 checkbox 或 views 指 只是展示列表
|
|
|
+ types: {
|
|
|
+ type: String,
|
|
|
+ default: 'radio'
|
|
|
+ },
|
|
|
+ // 标题显示的字段
|
|
|
+ titleKeys: {
|
|
|
+ type: String,
|
|
|
+ default: 'name'
|
|
|
},
|
|
|
- watch: {
|
|
|
- listData(newValue, oldValue) {
|
|
|
- this.list = newValue
|
|
|
- },
|
|
|
- defValue(newValue){
|
|
|
- this.value = newValue
|
|
|
- this.hasCheck()
|
|
|
+ // 是否显示右边箭头
|
|
|
+ showArrow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ defValue: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return [];
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: this.listData,
|
|
|
+ value: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ listData(newValue, oldValue) {
|
|
|
+ this.list = newValue;
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.hasCheck()
|
|
|
+ defValue(newValue) {
|
|
|
+ this.value = newValue;
|
|
|
+ this.hasCheck();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.hasCheck();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hasCheck() {
|
|
|
+ this.list.map(item => {
|
|
|
+ let a = this.value.indexOf(item.id);
|
|
|
+ item.checked = a >= 0;
|
|
|
+ });
|
|
|
+ this.list.splice();
|
|
|
},
|
|
|
- methods: {
|
|
|
- hasCheck(){
|
|
|
- this.list.map(item => {
|
|
|
- let a = this.value.indexOf(item.id)
|
|
|
- item.checked = a >= 0
|
|
|
- })
|
|
|
- this.list.splice()
|
|
|
- },
|
|
|
- // 选中
|
|
|
- chooseItem(item) {
|
|
|
- // 单选
|
|
|
- if(this.types == 'radio'){
|
|
|
- this.value[0] = item.id
|
|
|
- this.$emit('ok',this.value)
|
|
|
- }else{
|
|
|
- // 取消选中
|
|
|
- if(item.checked){
|
|
|
- let index = this.value.indexOf(item.id)
|
|
|
- this.value.splice(index,1)
|
|
|
- }else{
|
|
|
- this.value.push(item.id)
|
|
|
- }
|
|
|
+ // 选中
|
|
|
+ chooseItem(item) {
|
|
|
+ // 单选
|
|
|
+ if (this.types == 'radio') {
|
|
|
+ this.value[0] = item.id;
|
|
|
+ this.$emit('ok', this.value);
|
|
|
+ } else {
|
|
|
+ // 取消选中
|
|
|
+ if (item.checked) {
|
|
|
+ let index = this.value.indexOf(item.id);
|
|
|
+ this.value.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.value.push(item.id);
|
|
|
}
|
|
|
- this.hasCheck()
|
|
|
- },
|
|
|
- rightClick(item){
|
|
|
- this.$emit('rightClick',item)
|
|
|
- },
|
|
|
- kpOk(){
|
|
|
- this.$emit('ok',this.value)
|
|
|
}
|
|
|
+ this.hasCheck();
|
|
|
},
|
|
|
+ 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;
|
|
|
- }
|
|
|
+.check-list-pages {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > view {
|
|
|
+ &:first-child {
|
|
|
+ flex-grow: 1;
|
|
|
}
|
|
|
}
|
|
|
- .selList{
|
|
|
- width: 100%;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+.selList {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .radios {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .radios{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-grow: 1;
|
|
|
- width: 50%;
|
|
|
- padding: 26upx 20upx;
|
|
|
- &:active{
|
|
|
- background-color: #F8F8F8;
|
|
|
- }
|
|
|
- text{
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
+ flex-grow: 1;
|
|
|
+ width: 50%;
|
|
|
+ padding: 26upx 20upx;
|
|
|
+ &:active {
|
|
|
+ background-color: #f8f8f8;
|
|
|
}
|
|
|
- .details{
|
|
|
- color: #007AFF;
|
|
|
- padding-right: 20upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- &:active{
|
|
|
- color: #D9363E;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
}
|
|
|
- .kp-ok{
|
|
|
- text-align: center;
|
|
|
- padding: 26upx;
|
|
|
- background: #55aaff;
|
|
|
- color: #fff;
|
|
|
- font-size: 18px;
|
|
|
+ .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>
|