فهرست منبع

考评指标选择

lilei 4 سال پیش
والد
کامیت
34640c8735
2فایلهای تغییر یافته به همراه272 افزوده شده و 254 حذف شده
  1. 234 215
      pages/spotCheckConfigure/addSpotCheck.vue
  2. 38 39
      pages/spotCheckConfigure/evaluateItem.vue

+ 234 - 215
pages/spotCheckConfigure/addSpotCheck.vue

@@ -2,10 +2,9 @@
 	<view class="pageInfo">
 		<view>
 			<u-form :model="form" ref="uForm">
-				<u-form-item label="任务名称" label-width="160rpx" prop="name">
-					<u-input v-model="form.name" maxlength="30"/>
-				</u-form-item>
-				<u-form-item label="任务周期" v-model="form.cycleType" label-width="160rpx" prop="cycleType"><v-select  ref="cycleType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择任务周期" v-model="form.cycleType"></v-select>
+				<u-form-item label="任务名称" label-width="160rpx" prop="name"><u-input v-model="form.name" maxlength="30" /></u-form-item>
+				<u-form-item label="任务周期" v-model="form.cycleType" label-width="160rpx" prop="cycleType">
+					<v-select ref="cycleType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择任务周期" v-model="form.cycleType"></v-select>
 				</u-form-item>
 				<u-form-item label="执行日期" label-width="160rpx" prop="buildTime">
 					<view style="width: 100%;" @tap="choosePartMark">
@@ -23,32 +22,45 @@
 					<mx-date-picker class="beginTime" :show="showPickerBegin" :type="type" :value="form.beginTime" :show-tips="true"  @confirm="onSelectedBegin" @cancel="onSelectedBegin"/> -->
 				</u-form-item>
 				<u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
-					<view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{time ? time : '请选择执行时间'}}</view>
-					<mx-date-picker class="beginTime" :show="showPickerTime" type="time" :value="form.zxTime" :show-tips="true"  @confirm="onSelectedTime" @cancel="onSelectedTime"/>
+					<view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{ time ? time : '请选择执行时间' }}</view>
+					<mx-date-picker
+						class="beginTime"
+						:show="showPickerTime"
+						type="time"
+						:value="form.zxTime"
+						:show-tips="true"
+						@confirm="onSelectedTime"
+						@cancel="onSelectedTime"
+					/>
 				</u-form-item>
 				<u-form-item label="开始日期" label-width="160rpx" prop="startDate">
-					<view @click="onShowPickerBegin('date')" style="color: rgb(192,196,204);">{{form.startDate ? form.startDate : '请选择开始日期'}}</view>
-					<mx-date-picker class="beginTime" :show="showPickerBegin" :type="type" :value="form.startDate" :show-tips="true"  @confirm="onSelectedBegin" @cancel="onSelectedBegin"/>
+					<view @click="onShowPickerBegin('date')" style="color: rgb(192,196,204);">{{ form.startDate ? form.startDate : '请选择开始日期' }}</view>
+					<mx-date-picker
+						class="beginTime"
+						:show="showPickerBegin"
+						:type="type"
+						:value="form.startDate"
+						:show-tips="true"
+						@confirm="onSelectedBegin"
+						@cancel="onSelectedBegin"
+					/>
 				</u-form-item>
 				<u-form-item label="结束日期" label-width="160rpx" prop="endDate">
-					<view @click="onShowPickerEnd('date')" style="color: rgb(192,196,204);">{{form.endDate ? form.endDate : '请选择结束日期'}}</view>
-					<mx-date-picker class="beginTime" :show="showPickerEnd" :type="type" :value="form.endDate" :show-tips="true"  @confirm="onSelectedEnd" @cancel="onSelectedEnd"/>
+					<view @click="onShowPickerEnd('date')" style="color: rgb(192,196,204);">{{ form.endDate ? form.endDate : '请选择结束日期' }}</view>
+					<mx-date-picker class="beginTime" :show="showPickerEnd" :type="type" :value="form.endDate" :show-tips="true" @confirm="onSelectedEnd" @cancel="onSelectedEnd" />
 				</u-form-item>
 				<u-form-item label="执行类型" label-width="160rpx" prop="zxType">
-					<v-select  ref="contentCls" v-model="form.zxType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择执行类型">
-					</v-select>
+					<v-select ref="contentCls" v-model="form.zxType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择执行类型"></v-select>
 				</u-form-item>
 				<u-form-item label="考评指标" label-width="160rpx" prop="assessList">
-					<view style="color:rgb(192,196,204); width: 100%;" @click="openZBpage">{{form.assessList ?form.assessList :'请选择考评指标'}}</view>
+					<view style="color:rgb(192,196,204); width: 100%;" @click="openZBpage">{{ form.assessList ? form.assessList.length + '项指标' : '请选择考评指标' }}</view>
 					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openZBpage"></u-icon>
 				</u-form-item>
 				<u-form-item label="考评门店" label-width="160rpx" prop="storeList">
-					<view style="color:rgb(192,196,204); width: 100%;" @click="openMDpage">{{form.storeList ?form.storeList :'请选择考评门店'}}</view>
+					<view style="color:rgb(192,196,204); width: 100%;" @click="openMDpage">{{ form.storeList ? form.storeList : '请选择考评门店' }}</view>
 					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openMDpage"></u-icon>
 				</u-form-item>
-				<u-form-item label="任务有效天数" label-width="180rpx" prop="effectiveDay">
-					<u-input v-model="form.effectiveDay" placeholder="请输入任务有效天数"/>
-				</u-form-item>
+				<u-form-item label="任务有效天数" label-width="180rpx" prop="effectiveDay"><u-input v-model="form.effectiveDay" placeholder="请输入任务有效天数" /></u-form-item>
 				<!-- <u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
 					<view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{time ? time : '请选择执行时间'}}</view>
 					<mx-date-picker class="beginTime" :show="showPickerTime" type="time" :value="form.zxTime" :show-tips="true"  @confirm="onSelectedTime" @cancel="onSelectedTime"/>
@@ -63,214 +75,221 @@
 </template>
 
 <script>
-	import vSelect  from  '@/components/select/v-select.vue' 
-	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
-	import { clzConfirm } from '@/libs/tools.js'
-	export default{
-		components: {
-			vSelect,MxDatePicker
+import vSelect from '@/components/select/v-select.vue';
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
+import { clzConfirm } from '@/libs/tools.js';
+export default {
+	components: {
+		vSelect,
+		MxDatePicker
+	},
+	data() {
+		// const currentDate = this.getDate({
+		// 	format: true
+		// })
+		return {
+			showPickerBegin: false, // 默认是否显示开始日期的日期组件
+			showPickerEnd: false, // 默认是否显示结束日期的日期组件
+			showPickerTime: false, // 默认是否显示时间的时间组件
+			date: '',
+			time: '',
+			type: 'date',
+			form: {
+				name: '', // 任务名称
+				cycleType: '', // 周期类型
+				buildTime: '', // 执行日期
+				zxTime: '', // 执行时间
+				zxType: '', // 执行类型
+				startDate: '', // 开始日期
+				endDate: '', // 结束日期
+				assessList: '', // 考评指标
+				storeList: '', // 考评门店
+				effectiveDay: '' // 任务有效天数
+			},
+			markList: [], //  配件标签数据列表
+			markArr: [], //  配件标签  已选 数据
+			isPartMark: false,
+			rules: {
+				name: [{ required: true, message: '请输入名称30个字以内', trigger: 'blur' }],
+				cycleType: [{ required: true, message: '请选择任务周期', trigger: 'blur' }],
+				buildTime: [{ required: true, message: '请选择执行日期', trigger: 'blur' }],
+				zxTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
+				zxType: [{ required: true, message: '请选择执行类型', trigger: 'blur' }],
+				startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
+				endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
+				assessList: [{ required: true, message: '请选择考评指标', trigger: 'blur' }],
+				storeList: [{ required: true, message: '请选择考评门店', trigger: 'blur' }],
+				effectiveDay: [{ required: true, message: '请输入任务有效天数', trigger: 'blur' }]
+			}
+			// // date: currentDate,
+			// dateMode: 'date',
+			// dateShow: false,
+		};
+	},
+	// computed: {
+	//         startDate() {
+	//             return this.getDate('start');
+	//         },
+	//         endDate() {
+	//             return this.getDate('end');
+	//         }
+	//     },
+	onReady() {
+		this.$refs.uForm.setRules(this.rules);
+		// 检测选择的考评指标
+		uni.$on('selKpItem', (data) => {
+			this.form.assessList = data.msg;
+		});
+	},
+	onUnload() {
+		uni.$off('selKpItem')
+	},
+	methods: {
+		//  显示开始日期选择
+		onShowPickerBegin(type) {
+			this.type = type;
+			this.showPickerBegin = true;
+			this.form.startDate = this[type];
 		},
-		data(){
-			// const currentDate = this.getDate({
-			// 	format: true
-			// })
-			return{
-				showPickerBegin: false,	// 默认是否显示开始日期的日期组件
-				showPickerEnd:false,	// 默认是否显示结束日期的日期组件
-				showPickerTime:false,	// 默认是否显示时间的时间组件
-				date:'',	
-				time:'',
-				type:"date",
-				form: {
-					name: '',		// 任务名称
-					cycleType: '',	// 周期类型
-					buildTime:'',	// 执行日期
-					zxTime:'',		// 执行时间	
-					zxType:'',		// 执行类型
-					startDate:'',  	// 开始日期
-					endDate:'',		// 结束日期
-					assessList:'',	// 考评指标
-					storeList:'',	// 考评门店
-					effectiveDay:''	// 任务有效天数
-				},
-				markList: [], //  配件标签数据列表
-				markArr: [], //  配件标签  已选 数据
-				isPartMark: false,
-				rules: {
-					name: [{ required: true, message: '请输入名称30个字以内',trigger: 'blur'}],
-					cycleType:[{required: true, message: '请选择任务周期',trigger: 'blur'}],
-					buildTime: [{ required: true, message: '请选择执行日期',trigger: 'blur'}],
-					zxTime: [{ required: true, message: '请选择执行时间',trigger: 'blur'}],
-					zxType: [{ required: true, message: '请选择执行类型',trigger: 'blur'}],
-					startDate: [{ required: true, message: '请选择开始日期',trigger: 'blur'}],
-					endDate: [{ required: true, message: '请选择结束日期',trigger: 'blur'}],
-					assessList: [{ required: true, message: '请选择考评指标',trigger: 'blur'}],
-					storeList: [{ required: true, message: '请选择考评门店',trigger: 'blur'}],
-					effectiveDay: [{ required: true, message: '请输入任务有效天数',trigger:  'blur'}],
-				}
-				// // date: currentDate,
-				// dateMode: 'date',
-				// dateShow: false,
+		//  日期选择
+		onSelectedBegin(e) {
+			console.log(e);
+			this.showPickerBegin = false;
+			if (e) {
+				this[this.type] = e.value;
+				// this[this.form.startDate] = e.value
+				console.log(this[this.form.startDate], '------------日期', this[this.type]);
 			}
 		},
-		// computed: {
-		//         startDate() {
-		//             return this.getDate('start');
-		//         },
-		//         endDate() {
-		//             return this.getDate('end');
-		//         }
-		//     },
-		onReady() {
-				this.$refs.uForm.setRules(this.rules);
-			},
-		methods:{
-			//  显示开始日期选择
-			onShowPickerBegin(type){
-				this.type = type
-				this.showPickerBegin = true
-				this.form.startDate = this[type]
-			},
-			//  日期选择
-			onSelectedBegin(e) {
-				console.log(e)
-				this.showPickerBegin = false
-				if(e) {
-					this[this.type] = e.value
-					// this[this.form.startDate] = e.value
-					console.log(this[this.form.startDate],'------------日期',this[this.type])
-				}
-			},
-			//  显示结束日期选择
-			onShowPickerEnd(type){
-				this.type = type
-				this.showPickerEnd = true
-				this.form.endDate = this[type]
-			},
-			//  日期选择
-			onSelectedEnd(e) {
-				this.showPickerEnd = false
-				if(e) {
-					this[this.type] = e.value
-					console.log('------------日期',this[this.type])
-				}
-			},
-			// 执行时间选择
-			onShowPickerTime(type){
-				this.type = type
-				this.showPickerTime = true
-				this.form.zxTime = this[type]
-			},
-			//  日期选择
-			onSelectedTime(e) {
-				this.showPickerTime = false
-				if(e) {
-					this[this.type] = e.value
+		//  显示结束日期选择
+		onShowPickerEnd(type) {
+			this.type = type;
+			this.showPickerEnd = true;
+			this.form.endDate = this[type];
+		},
+		//  日期选择
+		onSelectedEnd(e) {
+			this.showPickerEnd = false;
+			if (e) {
+				this[this.type] = e.value;
+				console.log('------------日期', this[this.type]);
+			}
+		},
+		// 执行时间选择
+		onShowPickerTime(type) {
+			this.type = type;
+			this.showPickerTime = true;
+			this.form.zxTime = this[type];
+		},
+		//  日期选择
+		onSelectedTime(e) {
+			this.showPickerTime = false;
+			if (e) {
+				this[this.type] = e.value;
+			}
+		},
+		// 		dateChange(e){
+		// 			this.form.entryDate = e.result
+		// 		},
+		// 		confirm(e){
+		// 			console.log(e)
+		// 		},
+		// 		openSeleteType(){
+		// 			this.show=true
+		// 		},
+		// 		bindDateChange: function(e) {
+		// 			this.date = e.target.value
+		// 		},
+		// 		getDate(type) {
+		// 			const date = new Date();
+		// 			let year = date.getFullYear();
+		// 			let month = date.getMonth() + 1;
+		// 			let day = date.getDate();
+
+		// 			if (type === 'start') {
+		// 				year = year - 60;
+		// 			} else if (type === 'end') {
+		// 				year = year + 2;
+		// 			}
+		// 			month = month > 9 ? month : '0' + month;;
+		// 			day = day > 9 ? day : '0' + day;
+		// 			return `${year}-${month}-${day}`;
+		// 		},
+		//  选择配件标签
+		choosePartMark() {
+			this.isPartMark = false;
+			this.$nextTick(function() {
+				this.isPartMark = true;
+			});
+		},
+		// 确认
+		markConfirm(arr) {
+			this.markArr = arr;
+			let arrId = [];
+			arr.map(item => {
+				arrId.push({ id: item.id });
+			});
+			this.formData.labels = arrId;
+			this.isPartMark = false;
+		},
+		//  取消  配件标签
+		markCancel() {
+			this.isPartMark = false;
+		},
+		openZBpage() {
+			uni.navigateTo({
+				url: '/pages/spotCheckConfigure/evaluateItem?item='+encodeURIComponent(JSON.stringify(this.form.assessList))
+			});
+		},
+		openMDpage() {
+			uni.navigateTo({
+				url: '/pages/spotCheckConfigure/evaluateStore'
+			});
+		},
+		// 提交
+		submit() {
+			console.log(this.form);
+			this.$refs.uForm.validate(valid => {
+				if (valid) {
+					console.log('验证通过');
+				} else {
+					console.log('验证失败');
 				}
-			},
-	// 		dateChange(e){
-	// 			this.form.entryDate = e.result
-	// 		},
-	// 		confirm(e){
-	// 			console.log(e)
-	// 		},
-	// 		openSeleteType(){
-	// 			this.show=true
-	// 		},
-	// 		bindDateChange: function(e) {
-	// 			this.date = e.target.value
-	// 		},
-	// 		getDate(type) {
-	// 			const date = new Date();
-	// 			let year = date.getFullYear();
-	// 			let month = date.getMonth() + 1;
-	// 			let day = date.getDate();
-	
-	// 			if (type === 'start') {
-	// 				year = year - 60;
-	// 			} else if (type === 'end') {
-	// 				year = year + 2;
-	// 			}
-	// 			month = month > 9 ? month : '0' + month;;
-	// 			day = day > 9 ? day : '0' + day;
-	// 			return `${year}-${month}-${day}`;
-	// 		},
-			//  选择配件标签
-			choosePartMark() {
-				this.isPartMark = false;
-				this.$nextTick(function() {
-					this.isPartMark = true;
-				});
-			},
-			// 确认
-			markConfirm(arr) {
-				this.markArr = arr;
-				let arrId = [];
-				arr.map(item => {
-					arrId.push({ id: item.id });
-				});
-				this.formData.labels = arrId;
-				this.isPartMark = false;
-			},
-			//  取消  配件标签
-			markCancel() {
-				this.isPartMark = false;
-			},
-			openZBpage(){
-				uni.navigateTo({
-					url:"/pages/spotCheckConfigure/evaluateItem"
-				})
-			},
-			openMDpage(){
-				uni.navigateTo({
-					url:"/pages/spotCheckConfigure/evaluateStore"
-				})
-			},
-			// 提交
-			submit() {
-				console.log(this.form)
-				this.$refs.uForm.validate(valid => {
-					if (valid) {
-						console.log('验证通过');
-					} else {
-						console.log('验证失败');
-					}
-				});
-			},
-			// 取消
-			cancel(){
-				this.$refs.uForm.resetFields(this.rules);
-			},
+			});
+		},
+		// 取消
+		cancel() {
+			this.$refs.uForm.resetFields(this.rules);
 		}
 	}
+};
 </script>
 
 <style lang="scss">
-	page{
-		height: 100%;
-	};
-	.pageInfo{
-		padding:0 40upx;
-		.form-input-placeholder {
-			font-size: 28upx;
-			color:rgb(192,196,204) ;
-		}
-		// .beginTime{
-		// 	z-index:999;
-		// }
-		.beginTime{
-			z-index: 999999 !important;
+page {
+	height: 100%;
+}
+.pageInfo {
+	padding: 0 40upx;
+	.form-input-placeholder {
+		font-size: 28upx;
+		color: rgb(192, 196, 204);
+	}
+	// .beginTime{
+	// 	z-index:999;
+	// }
+	.beginTime {
+		z-index: 999999 !important;
+	}
+	.btns {
+		text-align: center;
+		padding: 50upx 0;
+		.confirmBtn {
+			margin-right: 20upx;
 		}
-		.btns{
-			text-align: center;
-			padding: 50upx 0;
-			.confirmBtn{
-				margin-right:20upx;
-			}
-			.cancelBtn{
-				margin-left:20upx;
-			}
+		.cancelBtn {
+			margin-left: 20upx;
 		}
-		
 	}
+}
 </style>

+ 38 - 39
pages/spotCheckConfigure/evaluateItem.vue

@@ -9,22 +9,16 @@
 				</view>
 			</view>
 			<view class="kp-items">
-				<view>
-					<checkbox-group @change="checkboxChange" class="checkbox-group">
-						<label v-for="item in childItems" :key="item.id" >
-							<view  class="checkbox-item">
-								<view class="item-name">{{item.name}}</view>
-								<view>
-									<checkbox :value="item.id" :checked="item.checked" />
-								</view>
-							</view>
-						</label>
-					</checkbox-group>
+				<view v-for="(item,index) in childItems" :key="item.id" @click="chooseItem(item,index)" class="checkbox-item">
+					<view class="item-name">{{item.name}}</view>
+					<view>
+						<checkbox :value="item.id" :checked="item.checked" />
+					</view>
 				</view>
 			</view>
 		</view>
 		<!-- 选择按钮 -->
-		<view class="kp-ok">
+		<view class="kp-ok" @click="kpOk">
 			确定选择
 		</view>
 	</view>
@@ -41,7 +35,8 @@
 				checkedList:[]
 			}
 		},
-		onLoad() {
+		onLoad(opts) {
+			this.checkedList = JSON.parse(opts.item) || []
 			findAllItem().then(res=>{
 				if(res.status == 200){
 					this.items = res.data
@@ -53,21 +48,27 @@
 			onTab(index){
 				this.activeIndex = index
 				this.childItems = this.items[index].assessTargetList
+				this.childItems.map(item=>{
+					let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
+					item.checked = hasItemIndex>=0
+				})
 			},
-			checkboxChange: function (e) {
-				var items = this.items,
-					values = e.detail.value;
-				this.checkedList = values
-				console.log(values,'checkboxChange')
-				for (var i = 0, lenI = items.length; i < lenI; ++i) {
-					const item = items[i]
-					if(values.includes(item.value)){
-						
-						
-					}else{
-						this.$set(item,'checked',false)
-					}
+			chooseItem(item,index){
+				console.log(item,index)
+				let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
+				// 已存在
+				if(hasItemIndex>=0){
+					this.checkedList.splice(hasItemIndex,1)
+				}else{
+					this.checkedList.push(item)
 				}
+				this.childItems[index].checked  = !(hasItemIndex>=0)
+				this.childItems.splice()
+			},
+			kpOk(){
+				console.log(this.checkedList)
+				uni.$emit('selKpItem',{msg:this.checkedList})
+				uni.navigateBack()
 			}
 		}
 	}
@@ -95,6 +96,7 @@
 					background: #fff;
 					border-radius: 6upx;
 					box-shadow: 1px 2px 3px #eee;
+					border: 1px solid #eee;
 					margin-bottom: 15upx;
 					> view{
 						&:last-child{
@@ -116,19 +118,16 @@
 				width: 70%;
 				margin: 15upx 15upx 15upx 6upx;
 				overflow: auto;
-				> view{
-					.checkbox-group{
-						.checkbox-item{
-							width:100%;
-							padding: 15upx;
-							border-radius: 6upx;
-							box-shadow: 1px 2px 3px #eee;
-							background: #fff;
-							display: flex;
-							justify-content: space-between;
-							margin-bottom: 15upx;
-						}
-					}
+				.checkbox-item{
+					width:100%;
+					padding: 15upx;
+					border-radius: 6upx;
+					border: 1px solid #eee;
+					box-shadow: 1px 2px 3px #eee;
+					background: #fff;
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 15upx;
 				}
 			}
 		}