#

whycq

2023-10-16 a8ea0a75b5353d7bb97ba7825e3db261f85bcff7

 uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue

New file
@@ -0,0 +1,817 @@
<template>
   <view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
      <template v-if="!isLocal">
         <view class="uni-data-loading">
            <uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
            <text v-else>{{mixinDatacomErrorMessage}}</text>
         </view>
      </template>
      <template v-else>
         <checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
            <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
             :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
               <checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
               <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"  :style="item.styleIcon">
                  <view class="checkbox__inner-icon"></view>
               </view>
               <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
                  <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
                  <view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
               </view>
            </label>
         </checkbox-group>
         <radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
            <!-- -->
            <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
             :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
               <radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
               <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
                :style="item.styleBackgroud">
                  <view class="radio__inner-icon" :style="item.styleIcon"></view>
               </view>
               <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
                  <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
                  <view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
               </view>
            </label>
         </radio-group>
      </template>
   </view>
</template>

<script>
   /**
    * DataChecklist 数据选择器
    * @description 通过数据渲染 checkbox 和 radio
    * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
    * @property {String} mode = [default| list | button | tag] 显示模式
    * @value default     默认横排模式
    * @value list      列表模式
    * @value button   按钮模式
    * @value tag       标签模式
    * @property {Boolean} multiple = [true|false] 是否多选
    * @property {Array|String|Number} value 默认值
    * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
    * @property {Number|String} min 最小选择个数 ，multiple为true时生效
    * @property {Number|String} max 最大选择个数 ，multiple为true时生效
    * @property {Boolean} wrap 是否换行显示
    * @property {String} icon = [left|right]  list 列表模式下icon显示位置
    * @property {Boolean} selectedColor 选中颜色
    * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
    * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
    * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
    * @value left 左侧显示
    * @value right 右侧显示
    * @event {Function} change  选中发生变化触发
    */

   export default {
      name: 'uniDataChecklist',
      mixins: [uniCloud.mixinDatacom || {}],
      emits:['input','update:modelValue','change'],
      props: {
         mode: {
            type: String,
            default: 'default'
         },

         multiple: {
            type: Boolean,
            default: false
         },
         value: {
            type: [Array, String, Number],
            default () {
               return ''
            }
         },
         // TODO vue3
         modelValue: {
            type: [Array, String, Number],
            default() {
               return '';
            }
         },
         localdata: {
            type: Array,
            default () {
               return []
            }
         },
         min: {
            type: [Number, String],
            default: ''
         },
         max: {
            type: [Number, String],
            default: ''
         },
         wrap: {
            type: Boolean,
            default: false
         },
         icon: {
            type: String,
            default: 'left'
         },
         selectedColor: {
            type: String,
            default: ''
         },
         selectedTextColor: {
            type: String,
            default: ''
         },
         emptyText:{
            type: String,
            default: '暂无数据'
         },
         disabled:{
            type: Boolean,
            default: false
         },
         map:{
            type: Object,
            default(){
               return {
                  text:'text',
                  value:'value'
               }
            }
         }
      },
      watch: {
         localdata: {
            handler(newVal) {
               this.range = newVal
               this.dataList = this.getDataList(this.getSelectedValue(newVal))
            },
            deep: true
         },
         mixinDatacomResData(newVal) {
            this.range = newVal
            this.dataList = this.getDataList(this.getSelectedValue(newVal))
         },
         value(newVal) {
            this.dataList = this.getDataList(newVal)
            // fix by mehaotian is_reset 在 uni-forms 中定义
            if(!this.is_reset){
               this.is_reset = false
               this.formItem && this.formItem.setValue(newVal)
            }
         },
         modelValue(newVal) {
            this.dataList = this.getDataList(newVal);
            if(!this.is_reset){
               this.is_reset = false
               this.formItem && this.formItem.setValue(newVal)
            }
         }
      },
      data() {
         return {
            dataList: [],
            range: [],
            contentText: {
               contentdown: '查看更多',
               contentrefresh: '加载中',
               contentnomore: '没有更多'
            },
            isLocal:true,
            styles: {
               selectedColor: '#2979ff',
               selectedTextColor: '#666',
            },
            isTop:0
         };
      },
      computed:{
         dataValue(){
            if(this.value === '')return this.modelValue
            if(this.modelValue === '') return this.value
            return this.value
         }
      },
      created() {
         this.form = this.getForm('uniForms')
         this.formItem = this.getForm('uniFormsItem')
         // this.formItem && this.formItem.setValue(this.value)

         if (this.formItem) {
            this.isTop = 6
            if (this.formItem.name) {
               // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
               if(!this.is_reset){
                  this.is_reset = false
                  this.formItem.setValue(this.dataValue)
               }
               this.rename = this.formItem.name
               this.form.inputChildrens.push(this)
            }
         }

         if (this.localdata && this.localdata.length !== 0) {
            this.isLocal = true
            this.range = this.localdata
            this.dataList = this.getDataList(this.getSelectedValue(this.range))
         } else {
            if (this.collection) {
               this.isLocal = false
               this.loadData()
            }
         }
      },
      methods: {
         loadData() {
            this.mixinDatacomGet().then(res=>{
               this.mixinDatacomResData = res.result.data
               if(this.mixinDatacomResData.length === 0){
                  this.isLocal = false
                  this.mixinDatacomErrorMessage = this.emptyText
               }else{
                  this.isLocal = true
               }
            }).catch(err=>{
               this.mixinDatacomErrorMessage = err.message
            })
         },
         /**
          * 获取父元素实例
          */
         getForm(name = 'uniForms') {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== name) {
               parent = parent.$parent;
               if (!parent) return false
               parentName = parent.$options.name;
            }
            return parent;
         },
         chagne(e) {
            const values = e.detail.value

            let detail = {
               value: [],
               data: []
            }

            if (this.multiple) {
               this.range.forEach(item => {

                  if (values.includes(item[this.map.value] + '')) {
                     detail.value.push(item[this.map.value])
                     detail.data.push(item)
                  }
               })
            } else {
               const range = this.range.find(item => (item[this.map.value] + '') === values)
               if (range) {
                  detail = {
                     value: range[this.map.value],
                     data: range
                  }
               }
            }
            this.formItem && this.formItem.setValue(detail.value)
            // TODO 兼容 vue2
            this.$emit('input', detail.value);
            // // TOTO 兼容 vue3
            this.$emit('update:modelValue', detail.value);
            this.$emit('change', {
               detail
            })
            if (this.multiple) {
               // 如果 v-model 没有绑定 ，则走内部逻辑
               // if (this.value.length === 0) {
               this.dataList = this.getDataList(detail.value, true)
               // }
            } else {
               this.dataList = this.getDataList(detail.value)
            }
         },

         /**
          * 获取渲染的新数组
          * @param {Object} value 选中内容
          */
         getDataList(value) {
            // 解除引用关系，破坏原引用关系，避免污染源数据
            let dataList = JSON.parse(JSON.stringify(this.range))
            let list = []
            if (this.multiple) {
               if (!Array.isArray(value)) {
                  value = []
               }
            }
            dataList.forEach((item, index) => {
               item.disabled = item.disable || item.disabled || false
               if (this.multiple) {
                  if (value.length > 0) {
                     let have = value.find(val => val === item[this.map.value])
                     item.selected = have !== undefined
                  } else {
                     item.selected = false
                  }
               } else {
                  item.selected = value === item[this.map.value]
               }

               list.push(item)
            })
            return this.setRange(list)
         },
         /**
          * 处理最大最小值
          * @param {Object} list
          */
         setRange(list) {
            let selectList = list.filter(item => item.selected)
            let min = Number(this.min) || 0
            let max = Number(this.max) || ''
            list.forEach((item, index) => {
               if (this.multiple) {
                  if (selectList.length <= min) {
                     let have = selectList.find(val => val[this.map.value] === item[this.map.value])
                     if (have !== undefined) {
                        item.disabled = true
                     }
                  }

                  if (selectList.length >= max && max !== '') {
                     let have = selectList.find(val => val[this.map.value] === item[this.map.value])
                     if (have === undefined) {
                        item.disabled = true
                     }
                  }
               }
               this.setStyles(item, index)
               list[index] = item
            })
            return list
         },
         /**
          * 设置 class
          * @param {Object} item
          * @param {Object} index
          */
         setStyles(item, index) {
            //  设置自定义样式
            item.styleBackgroud = this.setStyleBackgroud(item)
            item.styleIcon = this.setStyleIcon(item)
            item.styleIconText = this.setStyleIconText(item)
            item.styleRightIcon = this.setStyleRightIcon(item)
         },

         /**
          * 获取选中值
          * @param {Object} range
          */
         getSelectedValue(range) {
            if (!this.multiple) return this.dataValue
            let selectedArr = []
            range.forEach((item) => {
               if (item.selected) {
                  selectedArr.push(item[this.map.value])
               }
            })
            return this.dataValue.length > 0 ? this.dataValue : selectedArr
         },

         /**
          * 设置背景样式
          */
         setStyleBackgroud(item) {
            let styles = {}
            let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
            if (this.mode !== 'list') {
               styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
            }
            if (this.mode === 'tag') {
               styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
            }
            let classles = ''
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleIcon(item) {
            let styles = {}
            let classles = ''
            let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
            styles['background-color'] = item.selected?selectedColor:'#fff'
            styles['border-color'] = item.selected?selectedColor:'#DCDFE6'

            if(!item.selected && item.disabled){
               styles['background-color'] = '#F2F6FC'
               styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
            }

            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleIconText(item) {
            let styles = {}
            let classles = ''
            let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
            if (this.mode === 'tag') {
               styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
            } else {
               styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
            }
            if(!item.selected && item.disabled){
               styles.color = '#999'
            }

            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleRightIcon(item) {
            let styles = {}
            let classles = ''
            if (this.mode === 'list') {
               styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
            }
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }

            return classles
         }
      }
   }
</script>

<style lang="scss">
   $checked-color: #2979ff;
   $border-color: #DCDFE6;
   $disable:0.4;

   @mixin flex {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
   }

   .uni-data-loading {
      @include flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 36px;
      padding-left: 10px;
      color: #999;
   }

   .uni-data-checklist {
      position: relative;
      z-index: 0;
      flex: 1;
      // 多选样式
      .checklist-group {
         @include flex;
         flex-direction: row;
         flex-wrap: wrap;

         &.is-list {
            flex-direction: column;
         }

         .checklist-box {
            @include flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            margin: 5px 0;
            margin-right: 25px;

            .hidden {
               position: absolute;
               opacity: 0;
            }

            // 文字样式
            .checklist-content {
               @include flex;
               flex: 1;
               flex-direction: row;
               align-items: center;
               justify-content: space-between;
               .checklist-text {
                  font-size: 14px;
                  color: #666;
                  margin-left: 5px;
                  line-height: 14px;
               }

               .checkobx__list {
                  border-right-width: 1px;
                  border-right-color: #007aff;
                  border-right-style: solid;
                  border-bottom-width:1px;
                  border-bottom-color: #007aff;
                  border-bottom-style: solid;
                  height: 12px;
                  width: 6px;
                  left: -5px;
                  transform-origin: center;
                  transform: rotate(45deg);
                  opacity: 0;
               }
            }

            // 多选样式
            .checkbox__inner {
               /* #ifndef APP-NVUE */
               flex-shrink: 0;
               box-sizing: border-box;
               /* #endif */
               position: relative;
               width: 16px;
               height: 16px;
               border: 1px solid $border-color;
               border-radius: 4px;
               background-color: #fff;
               z-index: 1;
               .checkbox__inner-icon {
                  position: absolute;
                  /* #ifdef APP-NVUE */
                  top: 2px;
                  /* #endif */
                  /* #ifndef APP-NVUE */
                  top: 1px;
                  /* #endif */
                  left: 5px;
                  height: 8px;
                  width: 4px;
                  border-right-width: 1px;
                  border-right-color: #fff;
                  border-right-style: solid;
                  border-bottom-width:1px ;
                  border-bottom-color: #fff;
                  border-bottom-style: solid;
                  opacity: 0;
                  transform-origin: center;
                  transform: rotate(40deg);
               }
            }

            // 单选样式
            .radio__inner {
               @include flex;
               /* #ifndef APP-NVUE */
               flex-shrink: 0;
               box-sizing: border-box;
               /* #endif */
               justify-content: center;
               align-items: center;
               position: relative;
               width: 16px;
               height: 16px;
               border: 1px solid $border-color;
               border-radius: 16px;
               background-color: #fff;
               z-index: 1;

               .radio__inner-icon {
                  width: 8px;
                  height: 8px;
                  border-radius: 10px;
                  opacity: 0;
               }
            }

            // 默认样式
            &.is--default {

               // 禁用
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }

                  .radio__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               // 选中
               &.is-checked {
                  .checkbox__inner {
                     border-color: $checked-color;
                     background-color: $checked-color;

                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }
                  .radio__inner {
                     border-color: $checked-color;
                     .radio__inner-icon {
                        opacity: 1;
                        background-color: $checked-color;
                     }
                  }
                  .checklist-text {
                     color: $checked-color;
                  }
                  // 选中禁用
                  &.is-disable {
                     .checkbox__inner {
                        opacity: $disable;
                     }

                     .checklist-text {
                        opacity: $disable;
                     }
                     .radio__inner {
                        opacity: $disable;
                     }
                  }
               }
            }

            // 按钮样式
            &.is--button {
               margin-right: 10px;
               padding: 5px 10px;
               border: 1px $border-color solid;
               border-radius: 3px;
               transition: border-color 0.2s;

               // 禁用
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  border: 1px #eee solid;
                  opacity: $disable;
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .radio__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               &.is-checked {
                  border-color: $checked-color;
                  .checkbox__inner {
                     border-color: $checked-color;
                     background-color: $checked-color;
                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }

                  .radio__inner {
                     border-color: $checked-color;

                     .radio__inner-icon {
                        opacity: 1;
                        background-color: $checked-color;
                     }
                  }

                  .checklist-text {
                     color: $checked-color;
                  }

                  // 选中禁用
                  &.is-disable {
                     opacity: $disable;
                  }
               }
            }

            // 标签样式
            &.is--tag {
               margin-right: 10px;
               padding: 5px 10px;
               border: 1px $border-color solid;
               border-radius: 3px;
               background-color: #f5f5f5;

               .checklist-text {
                  margin: 0;
                  color: #666;
               }

               // 禁用
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  opacity: $disable;
               }

               &.is-checked {
                  background-color: $checked-color;
                  border-color: $checked-color;

                  .checklist-text {
                     color: #fff;
                  }
               }
            }
            // 列表样式
            &.is--list {
               /* #ifndef APP-NVUE */
               display: flex;
               /* #endif */
               padding: 10px 15px;
               padding-left: 0;
               margin: 0;

               &.is-list-border {
                  border-top: 1px #eee solid;
               }

               // 禁用
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               &.is-checked {
                  .checkbox__inner {
                     border-color: $checked-color;
                     background-color: $checked-color;

                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }
                  .radio__inner {
                     .radio__inner-icon {
                        opacity: 1;
                     }
                  }
                  .checklist-text {
                     color: $checked-color;
                  }

                  .checklist-content {
                     .checkobx__list {
                        opacity: 1;
                        border-color: $checked-color;
                     }
                  }

                  // 选中禁用
                  &.is-disable {
                     .checkbox__inner {
                        opacity: $disable;
                     }

                     .checklist-text {
                        opacity: $disable;
                     }
                  }
               }
            }
         }
      }
   }
</style>