From cf4cde6399c3c847ec80ef42bece70d7d39de0b1 Mon Sep 17 00:00:00 2001
From: Panzihang <819652404@qq.com>
Date: Thu, 13 Jul 2023 16:46:06 +0800
Subject: [PATCH] 713 pan

---
 components/lm-combox/lm-combox.vue            | 241 +++++
 config/index.js                               |   6 +-
 pages/index/index.vue                         |  12 +-
 pages/shipWork/index.vue                      | 172 +++-
 uni_modules/uni-data-checkbox/changelog.md    |  45 +
 .../uni-data-checkbox/uni-data-checkbox.vue   | 821 ++++++++++++++++++
 uni_modules/uni-data-checkbox/package.json    |  84 ++
 uni_modules/uni-data-checkbox/readme.md       |  18 +
 8 files changed, 1353 insertions(+), 46 deletions(-)
 create mode 100644 components/lm-combox/lm-combox.vue
 create mode 100644 uni_modules/uni-data-checkbox/changelog.md
 create mode 100644 uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
 create mode 100644 uni_modules/uni-data-checkbox/package.json
 create mode 100644 uni_modules/uni-data-checkbox/readme.md

diff --git a/components/lm-combox/lm-combox.vue b/components/lm-combox/lm-combox.vue
new file mode 100644
index 0000000..0f8509d
--- /dev/null
+++ b/components/lm-combox/lm-combox.vue
@@ -0,0 +1,241 @@
+<template>
+	<view class="uni-combox">
+		<view v-if="label" class="uni-combox__label" :style="labelStyle">
+			<text>{{label}}</text>
+		</view>
+		<view class="uni-combox__input-box">
+			<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
+			<!-- <uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons> 源代码注释掉上下距离太高不好看,去掉源码中class-->
+			<uni-icons  type="arrowdown" size="18" v-if="inputVal===''" color="#999999" @click="toggleSelector"></uni-icons> <!-- 下箭头颜色#999999 -->
+			<uni-icons  type="clear" size="18" v-else color="#999999" @click="clearInputVal"></uni-icons> <!-- add by limeng 追加的代码片段用叉号图标快速清空输入框 -->
+			<view class="uni-combox__selector" v-if="showSelector">
+				<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+					<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
+						<text>{{emptyTips}}</text>
+					</view>
+					<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
+						<text>{{item}}</text>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
+	export default {
+		name: 'uniCombox',
+		components: {
+			uniIcons
+		},
+		props: {
+			label: {
+				type: String,
+				default: ''
+			},
+			labelWidth: {
+				type: String,
+				default: 'auto'
+			},
+			placeholder: {
+				type: String,
+				default: ''
+			},
+			/** 不再需要这个属性
+			candidates: {
+				type: Array,
+				default () {
+					return []
+				}
+			},*/
+			//add by limeng 20210702 增加 map 类型的属性
+			candidatesMap: {
+				type: Map,//这个类型会被警告但是不影响使用
+				default () {
+					return {}
+				}
+			},
+			emptyTips: {
+				type: String,
+				default: '无匹配项'
+			},
+			value: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				showSelector: false,
+				inputVal: '',  //输入框中输入的字符
+				inputValId: '',//add by limeng 真实往后台传递的下拉id标识(比如项目id)
+			}
+		},
+		computed: {
+			labelStyle() {
+				if (this.labelWidth === 'auto') {
+					return {}
+				}
+				return {
+					width: this.labelWidth
+				}
+			},
+			filterCandidates() {
+				//从candidatesMap 取值遍历所有key并赋值给内部变量candidates这个数组
+				var candidates = [];//数组清空
+				this.candidatesMap.forEach(function(value, key){
+					var key = key;
+					candidates.push(key);//获取的值给内部变量赋值
+				})
+
+				return candidates.filter((item) => {
+					return item.indexOf(this.inputVal) > -1
+				})
+			},
+			filterCandidatesLength() {
+				return this.filterCandidates.length
+			}
+		},
+		watch: {
+			value: {
+				handler(newVal) {
+					this.inputVal = newVal
+				},
+				immediate: true
+			},
+		},
+		methods: {
+			toggleSelector() {
+				this.showSelector = !this.showSelector
+			},
+			onFocus() {
+				this.showSelector = true
+			},
+			onBlur() {
+				/**update by limeng 20210710 上午周六
+				  离开输入框焦点的时候输入框里的内容必须包含在下拉框列表中，
+				  否则输入框内容是用户瞎写的没有意义，后台也无法识别
+				  因此,强制用户必须以选中的为准
+				  备注：提供输入功能仅仅是为了匹配合适的下拉选项，但不能以输入的值为准,必须以选中的为准
+				*/
+			    //if(this.candidates.indexOf(this.inputVal) > -1){ //则包含该元素
+				if(this.filterCandidates.indexOf(this.inputVal) > -1){ //则包含该元素
+				   	//alert("你输值在列表中");
+					//关闭下拉(原代码保留)
+					setTimeout(() => {
+						this.showSelector = false
+					}, 50)
+				}else {
+					//alert("你输的值不在列表中，此时下拉列表不能关闭，直到用户选中才能关闭下拉");
+					return;
+				}
+			},
+			onSelectorClick(index) {//index 只是这个数组中顺序的索引值比如 1,2,3...,和map中的key value没有关系
+				this.inputVal = this.filterCandidates[index]//选中后给控件的输入框赋值
+				this.inputValId = this.candidatesMap.get(this.inputVal);//根据输入框内容反查出对应的id或者code(以便提交到后台)
+				this.showSelector = false;//选中后关闭下拉列表
+				this.$emit('input', this.inputVal);//拿到子组件的值(name)赋值给父组件的input事件,即父组件的v-model绑定的属性
+				this.$emit("setId",this.inputValId);//将name对应的id或者code返回给父组件,通过调用父组件的setId方法传值给父组件data中声明的变量
+			},
+			onInput() {
+				setTimeout(() => {
+					this.$emit('input', this.inputVal)
+				})
+			},
+			clearInputVal(){
+				this.inputVal='';
+				this.inputValId = '';//同时清空输入框id
+				this.$emit("setId",'');//将父组件的值也置为空
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-combox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		height: 40px;
+		flex-direction: row;
+		align-items: center;
+		/* border-bottom: solid 1px #DDDDDD;
+ */
+	}
+
+	.uni-combox__label {
+		font-size: 16px;
+		line-height: 22px;
+		padding-right: 10px;
+		color: #999999;
+	}
+
+	.uni-combox__input-box {
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-combox__input {
+		flex: 1;
+		font-size: 33upx;/*16px*/
+		height: 25px;
+		line-height: 22px;
+	}
+
+	.uni-combox__input-arrow {
+		padding: 10px;
+	}
+
+	.uni-combox__selector {
+		box-sizing: border-box;
+		position: absolute;
+		top: 42px;
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border-radius: 0px;
+		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
+		z-index: 2;
+	}
+
+	.uni-combox__selector-scroll {
+		max-height: 500px;/*200px*/
+		box-sizing: border-box;
+	}
+
+	.uni-combox__selector::before {
+		content: '';
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-bottom: solid 6px #FFFFFF;
+		border-right: solid 6px transparent;
+		border-left: solid 6px transparent;
+		left: 50%;
+		top: -6px;
+		margin-left: -6px;
+	}
+
+	.uni-combox__selector-empty,
+	.uni-combox__selector-item {
+		/* #ifdef APP-NVUE */
+		display: flex;
+		/* #endif */
+		line-height: 50px;/*36px*/
+		font-size: 33upx;/* 14px*/
+		text-align: center;
+		border-bottom: solid 1px #DDDDDD;
+		margin: 0px 10px;
+	}
+
+	.uni-combox__selector-empty:last-child,
+	.uni-combox__selector-item:last-child {
+		border-bottom: none;
+	}
+</style>
\ No newline at end of file
diff --git a/config/index.js b/config/index.js
index d2c90c8..4c21d77 100644
--- a/config/index.js
+++ b/config/index.js
@@ -15,8 +15,8 @@ export default {
 	/**
 	 * @description api请求基础路径
 	 */
-	// local: "http://192.168.0.103:8891",
-	local: "http://61.184.202.72:8891",
+	// local: "http://192.168.61.133/tos",
+	local: "http://192.168.61.133/tos",
 	imgSrc: "http://116.205.142.169/HtRtosResource/assets/",
 	mapkey: "FUFBZ-KBIWW-P63RR-RR4W3-BNV4H-T6BGX"
-}
+}
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4c5909d..e4e5bd7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -6,6 +6,8 @@
 			<view class="content">
 				<view class="form">
 					<view class="end">
+						<lm-combox label="所属项目" @setId=setId :candidatesMap="projectsMap" placeholder="请选择所属项目"
+							v-model="project"></lm-combox>
 						<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="港区"
 							@iconClick="iconClick">
 						</uni-easyinput>
@@ -60,6 +62,8 @@
 				value1: '',
 				value2: '',
 				ltemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
+				projectsMap: {}, //项目集合map
+				projectId: '', //选中的项目id(通过子组件调用setId给父组件传值的方式获取)   
 			}
 		},
 		onLoad() {
@@ -74,7 +78,11 @@
 				uni.navigateTo({
 					url: '/pages/index/instruct'
 				})
-			}
+			},
+			setId(e) {
+				this.projectId = e; //将子组件通过setId传值给父组件的projectId
+				console.log("本次选中的项目id是" + e)
+			},
 		}
 	};
 </script>
@@ -158,4 +166,4 @@
 			}
 		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/shipWork/index.vue b/pages/shipWork/index.vue
index 725d44c..269f862 100644
--- a/pages/shipWork/index.vue
+++ b/pages/shipWork/index.vue
@@ -6,50 +6,55 @@
 			<view class="content">
 				<view class="form">
 					<view class="select">
-						<uni-data-select v-model="value" :localdata="range" @change="change">
+						<uni-data-select v-model="pamValue" :localdata="pamList" @change="pamChange"
+							placeholder="请选择港口">
 						</uni-data-select>
 					</view>
-					<view class="input">
-						<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="船名/航次"
-							@iconClick="iconClick">
-						</uni-easyinput>
+					<view class="select">
+						<uni-data-select v-model="shipValue" :localdata="shipList" @change="shipChange"
+							placeholder="请选择船名航次">
+						</uni-data-select>
 					</view>
+					<van-button type="default" @click="search">搜索</van-button>
 				</view>
 				<view class="itemList">
 					<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toGo">
 						<view class="title">
 							<view class="name">
-								海王星领袖
+								{{item.spmName}}
 							</view>
 						</view>
-
 						<view class="table">
 							<view class="row">
 								<view class="nitem">
-									进口航次: <text>735546</text>
+									进口航次: <text>{{item.inVvyName}}</text>
 								</view>
 								<view class="nitem">
-									贸易类型: <text>内贸</text>
+									进口贸易类型: <text>{{item.inTradeTypeName}}</text>
 								</view>
 							</view>
 							<view class="row">
 								<view class="nitem">
-									出口航次: <text>555546</text>
+									出口航次: <text>{{item.outVvyName}}</text>
 								</view>
 								<view class="nitem">
-									贸易类型: <text>外贸</text>
+									出口贸易类型: <text>{{item.outTradeTypeName}}</text>
 								</view>
 							</view>
 							<view class="row">
 								<view class="nitem">
-									计划泊位: <text>一泊位</text>
+									计划泊位: <text>{{item.planBerthageName}}</text>
 								</view>
 								<view class="nitem">
-									实际泊位: <text>一泊位</text>
+									实际泊位: <text>{{item.actualBerthageName}}</text>
 								</view>
 							</view>
 							<view class="row">
-								<view class="nitem" v-if="item==1">
+								<view class="nitem">
+									<text>{{item.uploadStatusDesc}}</text>
+									<text>{{item.uploadTime}}</text>
+								</view>
+								<!-- <view class="nitem" v-if="item==1">
 									<text class="green">●</text> 已下载
 									<text>2023/09/21 12:00</text>
 								</view>
@@ -62,17 +67,16 @@
 								</view>
 								<view class="nitem" v-if="item==2">
 									<text>●</text> 未上传
-								</view>
+								</view> -->
 							</view>
 							<view class="footer">
-								<view class="fitem">
+								<view class="fitem" @click="download(item)">
 									下载
 								</view>
-								<view class="fitem">
+								<view class="fitem" @click="upload">
 									上传
 								</view>
 							</view>
-
 						</view>
 					</view>
 				</view>
@@ -88,22 +92,13 @@
 	export default {
 		data() {
 			return {
-				value: 0,
-				value1: '',
-				range: [{
-						value: 0,
-						text: "一号港"
-					},
-					{
-						value: 1,
-						text: "二号港"
-					},
-					{
-						value: 2,
-						text: "不冻港"
-					},
-				],
-				ltemList: [1, 2, 1, 1, 2, 1, 1, 1, 1],
+				// 港口
+				pamValue: "",
+				pamList: [],
+				// 船名航次
+				shipValue: '',
+				shipList: [],
+				ltemList: [],
 			}
 		},
 		onLoad() {
@@ -111,12 +106,101 @@
 		},
 		components: {
 			SideBar,
-			HeadInfo
+			HeadInfo,
+		},
+		mounted() {
+			this.getPam();
+			this.getShip();
 		},
 		methods: {
-			change(e) {
-				console.log("e:", e);
+			// 获取船的数据
+			initData() {
+				uni.request({
+					url: this.$local + '/api/shipOperate/select?pamId=' + this.pamValue + "&vvyId=" + this
+						.shipValue,
+					header: {
+						'Content-Type': 'application/json' //自定义请求头信息
+					},
+					method: 'GET', //请求方式，必须为大写
+					success: (res) => {
+						console.log('接口返回------', res);
+						if (res.statusCode === 200) {
+							this.ltemList = res.data.data.records
+						}
+					}
+				})
 			},
+			// 获取港区下拉数据
+			getPam() {
+				uni.request({
+					url: this.$local + '/api/shipOperate/queryPortArea',
+					header: {
+						'Content-Type': 'application/json' //自定义请求头信息
+					},
+					method: 'GET', //请求方式，必须为大写
+					success: (res) => {
+						console.log('接口返回------', res);
+						if (res.statusCode === 200) {
+							let arr = res.data.data;
+							arr.forEach((v, index) => {
+								this.pamList.push({
+									text: v.pamName,
+									value: v.pamId
+								})
+							})
+						}
+					}
+				})
+			},
+			// 获取船名航次下拉数据
+			getShip() {
+				uni.request({
+					url: this.$local + '/api/shipOperate/queryShipmentVoyageData?key=阳',
+					header: {
+						'Content-Type': 'application/json' //自定义请求头信息
+					},
+					method: 'GET', //请求方式，必须为大写
+					success: (res) => {
+						console.log('接口返回------', res);
+						if (res.statusCode === 200) {
+							// this.shipList = res.data.data
+							let arr = res.data.data;
+							arr.forEach((v, index) => {
+								this.shipList.push({
+									text: v.spmName,
+									value: v.vvyId
+								})
+							})
+						}
+					}
+				})
+			},
+			// 港区下拉
+			pamChange(event) {},
+			// 船名航次下拉
+			shipChange(e) {},
+			// 点击搜索
+			search() {
+				this.initData()
+			},
+			// 点击下载
+			download(item) {
+				let ids = [item.outVvyName, item.inVvyName]
+				console.log(ids)
+				uni.request({
+					url: this.$local + '/api/shipOperate/download?vvyIds=' + ids,
+					header: {
+						'Content-Type': 'application/json' //自定义请求头信息
+					},
+					method: 'GET', //请求方式，必须为大写
+					success: (res) => {
+						console.log('接口返回------', res);
+						if (res.statusCode === 200) {}
+					}
+				})
+			},
+			// 点击上传
+			upload() {},
 			toGo() {
 				uni.navigateTo({
 					url: `/pages/shipWork/documentList`
@@ -126,20 +210,23 @@
 	};
 </script>
 
-<style>
+<style lang="less" scoped>
 	.container {
 		background-color: #f5f6fa;
 		display: flex;
+		min-height: calc(100vh - 44px - 40px);
 	}
 
 	.content {
 		padding: 20px;
+		min-height: calc(100vh - 44px - 40px);
 
 		.form {
 			display: flex;
 
 			.select {
-				width: 100px;
+				width: 200px;
+				margin-right: 20px;
 			}
 
 			.input {
@@ -148,6 +235,11 @@
 				line-height: 35px;
 				margin-left: 15px;
 			}
+
+			/deep/.van-button {
+				height: 35px;
+				line-height: 35px;
+			}
 		}
 
 		.itemList {
@@ -198,9 +290,7 @@
 						width: 50%;
 						text-align: center;
 					}
-
 				}
-
 			}
 
 			.item:nth-child(2n) {
diff --git a/uni_modules/uni-data-checkbox/changelog.md b/uni_modules/uni-data-checkbox/changelog.md
new file mode 100644
index 0000000..c7a468a
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/changelog.md
@@ -0,0 +1,45 @@
+## 1.0.3（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.2（2022-06-30）
+- 优化 在 uni-forms 中的依赖注入方式
+## 1.0.1（2022-02-07）
+- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+## 1.0.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+## 0.2.5（2021-08-23）
+- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+## 0.2.4（2021-08-17）
+- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+## 0.2.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.2.2（2021-07-30）
+- 优化 在uni-forms组件，与label不对齐的问题
+## 0.2.1（2021-07-27）
+- 修复 单选默认值为0不能选中的Bug
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.11（2021-07-06）
+- 优化 删除无用日志
+## 0.1.10（2021-07-05）
+- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+## 0.1.9（2021-07-05）
+- 修复 nvue 黑框样式问题
+## 0.1.8（2021-06-28）
+- 修复 selectedTextColor 属性不生效的Bug
+## 0.1.7（2021-06-02）
+- 新增 map 属性，可以方便映射text/value属性
+## 0.1.6（2021-05-26）
+- 修复 不关联服务空间的情况下组件报错的Bug
+## 0.1.5（2021-05-12）
+- 新增 组件示例地址
+## 0.1.4（2021-04-09）
+- 修复 nvue 下无法选中的问题
+## 0.1.3（2021-03-22）
+- 新增 disabled属性
+## 0.1.2（2021-02-24）
+- 优化 默认颜色显示
+## 0.1.1（2021-02-24）
+- 新增 支持nvue
+## 0.1.0（2021-02-18）
+- “暂无数据”显示居中
diff --git a/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue b/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
new file mode 100644
index 0000000..3c75d9f
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
@@ -0,0 +1,821 @@
+<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.selectedColor) {
+					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 = ''
+				if (this.selectedColor) {
+					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 = ''
+				if (this.selectedColor) {
+					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">
+	$uni-primary: #2979ff !default;
+	$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: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							border-color: $uni-primary;
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+						.checklist-text {
+							color: $uni-primary;
+						}
+						// 选中禁用
+						&.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: $uni-primary;
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.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: $uni-primary;
+						border-color: $uni-primary;
+
+						.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: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+						.radio__inner {
+							.radio__inner-icon {
+								opacity: 1;
+							}
+						}
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						.checklist-content {
+							.checkobx__list {
+								opacity: 1;
+								border-color: $uni-primary;
+							}
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/uni_modules/uni-data-checkbox/package.json b/uni_modules/uni-data-checkbox/package.json
new file mode 100644
index 0000000..113c350
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/package.json
@@ -0,0 +1,84 @@
+{
+  "id": "uni-data-checkbox",
+  "displayName": "uni-data-checkbox 数据选择器",
+  "version": "1.0.3",
+  "description": "通过数据驱动的单选框和复选框",
+  "keywords": [
+    "uni-ui",
+    "checkbox",
+    "单选",
+    "多选",
+    "单选多选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more","uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
diff --git a/uni_modules/uni-data-checkbox/readme.md b/uni_modules/uni-data-checkbox/readme.md
new file mode 100644
index 0000000..6eb253d
--- /dev/null
+++ b/uni_modules/uni-data-checkbox/readme.md
@@ -0,0 +1,18 @@
+
+
+## DataCheckbox 数据驱动的单选复选框
+> **组件名：uni-data-checkbox**
+> 代码块： `uDataCheckbox`
+
+
+本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
+
+1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
+2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
+3. 本组件合并了单选多选
+4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
+
+在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file