配额订单 销售计划类型、销售计划编号、项目更新联合联调

pages/select-product/select-product.vue

@@ -4,7 +4,7 @@
 		<view class="header-bg"></view>
 		<view class="main">
 			<view class="middle view">
-				<view class="text-block">
+				<view class="text-block ">
 					<text class="middle-date">产品名称</text>
 					<input class="middle-date-des" type="text" v-model="condition.product" placeholder="请填写" />
 				</view>
@@ -80,23 +80,20 @@
 					product: ''
 				},
 				lists: [{
-						id: 1,
-						checked: false,
-						product: '新品五粮液',
-						quantity: 2,
-						price: 100
-					},
-					{
-						id: 2,
-						checked: false,
-						product: '新品五粮液91 52%',
-						quantity: 4,
-						price: 200
-					}
-				],
+					checked: false,
+					"PRODUCT_ID": "040001005280116160",
+					"SHORT_TEXT": "新品五粮液091 52%500mL×6",
+					"NORMS": "52%500ML×6",
+					"MSEHT": "盒",
+					"ISPEJ": "X",
+					"NRATE": 1.000,
+					"WRATE": 1.000,
+					"PECYCLE": "Z001"
+				}, ],
 				selectedProduct: {},
 				toPageParams: {
 					page: '',
+					mode: '',
 					index: 0
 				}
 			}
@@ -114,6 +111,7 @@
 			if (this.isOpened === 'left' && this.selectedProduct && this.selectedProduct.PRODUCT_ID) {
 				uni.$emit('selectedProduct', {
 					selectedProduct: this.selectedProduct,
+					mode: this.toPageParams.mode,
 					index: this.toPageParams.index
 				})
 				uni.navigateBack({})
@@ -142,9 +140,11 @@
 			console.log('select-product', option)
 			const {
 				from,
+				mode,
 				index
 			} = option
 			this.toPageParams.index = index
+			this.toPageParams.mode = mode
 			this.toPageParams.page = from
 		},
 		created() {
@@ -231,6 +231,7 @@
 		overflow-y: scroll;
 		background: #f0f4f5;
 		overflow-x: hidden;
+		height: 100%;
 	}
 
 	.main {

pages/select-sale-plan/select-sale-plan.vue

@@ -37,7 +37,12 @@
 					<view class="middle-date-des uni-list picker-year">
 						<view class="uni-list-cell">
 							<view class="uni-list-cell-db">
-								<text class="middle-date-des">请选择</text>
+								<picker class="picker-block" @change="bindPickerTypesChange" range-key='VALUE'
+									mode="selector" :value="typesIndex" :range="selectedSalePlanTypes">
+									<view class="uni-input">{{selectedSalePlanTypes[typesIndex].VALUE}}</view>
+								</picker>
+
+								</uni-data-select>
 							</view>
 						</view>
 						<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
@@ -90,7 +95,8 @@
 		mapState
 	} from 'vuex'
 	import {
-		apiSalesPlanSelect
+		apiSalesPlanSelect,
+		apiSalesPlanTypesSelect
 	} from '@/servers/common.js'
 	import timeFormat from '@/uview-ui/libs/function/timeFormat.js'
 
@@ -107,23 +113,25 @@
 					PLAN_TYPE: ''
 				},
 				lists: [{
-						id: 1,
-						checked: false,
-						product: '新品五粮液',
-						quantity: 2,
-						price: 100
-					},
-					{
-						id: 2,
-						checked: false,
-						product: '新品五粮液91 52%',
-						quantity: 4,
-						price: 200
-					}
-				],
+					checked: false,
+					"REPORT_TYPE": "正式提报",
+					"PLAN_NUMBER": "3800000826",
+					"PLAN_TYPE": "运营商配额酒年度计划",
+					"WLYBRAND": "五粮液.1618",
+					"GJAHR": "2022",
+					"MONAT": "04",
+					"TOTAL_QTY": 10.000,
+					"INITPLAN_QTY": 10.000,
+					"BILLING_QTY": 0.000,
+					"ATP_QTY": 1.000,
+					"REMAIN_QTY": 9.000
+				}, ],
 				selectedSalePlan: {},
+				selectedSalePlanTypes: [],
+				typesIndex: 0,
 				toPageParams: {
 					page: '',
+					index: 0,
 					product: {}
 				}
 			}
@@ -140,7 +148,8 @@
 			// console.log('onNavigationBarButtonTap：', e, this.isOpened, this.selectedSalePlan);
 			if (this.isOpened === 'left' && this.selectedSalePlan && this.selectedSalePlan.PLAN_NUMBER) {
 				uni.$emit('selectedSalePlan', {
-					selectedSalePlan: this.selectedSalePlan
+					selectedSalePlan: this.selectedSalePlan,
+					index: this.toPageParams.index
 				})
 				uni.navigateBack()
 				return
@@ -166,17 +175,19 @@
 		},
 		onLoad(option) {
 			console.log('select-saleplan', option)
-			const {
-				from,
-				product
-			} = option
-			this.toPageParams.product = JSON.parse(product)
-			this.toPageParams.page = from
+			if (option && option.from) {
+				const {
+					from,
+					product
+				} = option
+				this.toPageParams.product = JSON.parse(product)
+				this.toPageParams.page = from
+			}
 		},
 		created() {
 			this.condition.GJAHR = timeFormat(new Date(), 'yyyy')
 			this.condition.MONAT = timeFormat(new Date(), 'mm')
-			this.getSalesPlan();
+			this.getSalesPlanTypes();
 		},
 		methods: {
 			async getSalesPlan() {
@@ -282,8 +293,18 @@
 				})
 				console.log('ddd2', res)
 			},
+			async getSalesPlanTypes() {
+				const res = await apiSalesPlanTypesSelect()
+				this.selectedSalePlanTypes = res.DATA
+				console.log('getSalesPlanTypes', res)
+			},
 			search() {
-
+				this.getSalesPlan();
+			},
+			bindPickerTypesChange(e) {
+				console.log('picker发送选择改变，携带值为', e.detail.value)
+				this.typesIndex = e.detail.value
+				this.condition.PLAN_TYPE = this.selectedSalePlanTypes[this.typesIndex].KEY
 			},
 			bindPickerYearChange(e) {
 				console.log('picker发送选择改变，携带值为', e.detail.value)
@@ -346,6 +367,7 @@
 		flex-direction: column;
 		overflow-y: scroll;
 		background: #f0f4f5;
+		height: 100%;
 	}
 
 	.main {

servers/common.js

@@ -24,6 +24,16 @@ export async function apiSalesPlanSelect(params) {
 	return res
 }
 
+/**
+ * 获取销售计划类型
+ * @param captcha 验证码
+ * @returns {Promise<AxiosResponse<T>>}
+ */
+export async function apiSalesPlanTypesSelect(params) {
+	const res = await apiHelper.post('/sap/bc/ztpm/to_new_crm/transdata/sp_type_ovs', params)
+	return res
+}
+
 export default {
 	apiProductSelect,
 	apiSalesPlanSelect

uni_modules/uni-data-select/changelog.md

+## 0.1.2（2022-05-08）
+- 修复 当 value 为 0 时选择不生效的 bug
+## 0.1.1（2022-05-07）
+- 新增 记住上次的选项（仅 collection 存在时有效）
+## 0.1.0（2022-04-22）
+- 初始化

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

+<template>
+	<view class="uni-stat__select">
+		<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
+		<view :class="{'uni-stat__actived': current}">
+			<view class="uni-select">
+				<view class="uni-select__input-box" @click="toggleSelector">
+					<view v-if="current" class="uni-select__input-text">{{current}}</view>
+					<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
+					<uni-icons v-if="current && clear" type="clear" color="#e1e1e1" size="18" @click="clearVal" />
+					<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
+				</view>
+				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
+				<view class="uni-select__selector" v-if="showSelector">
+					<view class="uni-popper__arrow"></view>
+					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
+						<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
+							<text>{{emptyTips}}</text>
+						</view>
+						<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData"
+							:key="index" @click="change(item)">
+							<text>{{formatItemName(item)}}</text>
+						</view>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染的下拉框组件
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
+	 * @property {String} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Boolean} clear 是否可以清空已选项
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {String} label 左侧标题
+	 * @property {String} placeholder 输入框的提示文字
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: "uni-stat-select",
+		mixins: [uniCloud.mixinDatacom || {}],
+		data() {
+			return {
+				showSelector: false,
+				current: '',
+				mixinDatacomResData: [],
+				apps: [],
+				channels: []
+			};
+		},
+		props: {
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			placeholder: {
+				type: String,
+				default: '请选择'
+			},
+			emptyTips: {
+				type: String,
+				default: '无选项'
+			},
+			clear: {
+				type: Boolean,
+				default: true
+			},
+			defItem: {
+				type: Number,
+				default: 0
+			}
+		},
+		created() {
+			this.last = `${this.collection}_last_selected_option_value`
+			if (this.collection && !this.localdata.length) {
+				this.mixinDatacomEasyGet()
+			}
+		},
+		computed: {
+			typePlaceholder() {
+				const text = {
+					'opendb-stat-app-versions': '版本',
+					'opendb-app-channels': '渠道',
+					'opendb-app-list': '应用'
+				}
+				const common = '请选择'
+				const placeholder = text[this.collection]
+				return placeholder ?
+					common + placeholder :
+					common
+			}
+		},
+		watch: {
+			localdata: {
+				immediate: true,
+				handler(val, old) {
+					if (Array.isArray(val) && !old) {
+						this.mixinDatacomResData = val
+					}
+				}
+			},
+			// #ifndef VUE3
+			value() {
+				this.initDefVal()
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue() {
+				this.initDefVal()
+			},
+			// #endif
+			mixinDatacomResData: {
+				immediate: true,
+				handler(val) {
+					if (val.length) {
+						this.initDefVal()
+					}
+				}
+			}
+		},
+		methods: {
+			initDefVal() {
+				let defValue = ''
+				if (this.value ||this.value === 0) {
+					defValue =  this.value
+				} else if(this.modelValue || this.modelValue === 0 ) {
+					defValue = this.modelValue
+				} else {
+					let strogeValue
+					if (this.collection) {
+						strogeValue = uni.getStorageSync(this.last)
+					}
+					if (strogeValue || strogeValue === 0) {
+						defValue = strogeValue
+					} else {
+						let defItem = ''
+						if (this.defItem > 0 && this.defItem < this.mixinDatacomResData.length) {
+							defItem = this.mixinDatacomResData[this.defItem - 1].value
+						}
+						defValue = defItem
+					}
+					this.emit(defValue)
+				}
+				const def = this.mixinDatacomResData.find(item => item.value === defValue)
+				this.current = def ? this.formatItemName(def) : ''
+			},
+
+			clearVal() {
+				this.emit('')
+				if (this.collection) {
+					uni.removeStorageSync(this.last)
+				}
+			},
+			change(item) {
+				this.showSelector = false
+				this.current = this.formatItemName(item)
+				this.emit(item.value)
+			},
+			emit(val) {
+				this.$emit('change', val)
+				this.$emit('input', val)
+				this.$emit('update:modelValue', val)
+				if (this.collection) {
+					uni.setStorageSync(this.last, val)
+				}
+			},
+
+			toggleSelector() {
+				this.showSelector = !this.showSelector
+			},
+			formatItemName(item) {
+				let {
+					text,
+					value,
+					channel_code
+				} = item
+				channel_code = channel_code ? `(${channel_code})` : ''
+				return this.collection.indexOf('app-list') > 0 ?
+					`${text}(${value})` :
+					(
+						text ?
+						text :
+						`未命名${channel_code}`
+					)
+			}
+		}
+	}
+</script>
+
+<style>
+	/* #ifndef APP-NVUE */
+	@media screen and (max-width: 500px) {
+		.hide-on-phone {
+			display: none;
+		}
+	}
+
+	/* #endif */
+	.uni-stat__select {
+		display: flex;
+		align-items: center;
+		padding: 15px;
+		cursor: pointer;
+	}
+
+	.uni-stat__actived {
+		outline: 1px solid #2979ff;
+	}
+
+	.uni-label-text {
+		font-size: 14px;
+		font-weight: bold;
+		color: #555;
+		margin: auto 0;
+		margin-right: 5px;
+	}
+
+	.uni-select {
+		font-size: 14px;
+		border: 1px solid #DCDFE6;
+		box-sizing: border-box;
+		border-radius: 4px;
+		padding: 0 5px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		user-select: none;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		border-bottom: solid 1px #DDDDDD;
+	}
+
+	.uni-select__label {
+		font-size: 16px;
+		line-height: 22px;
+		padding-right: 10px;
+		color: #999999;
+	}
+
+	.uni-select__input-box {
+		min-height: 36px;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uni-select__input {
+		flex: 1;
+		font-size: 14px;
+		height: 22px;
+		line-height: 22px;
+	}
+
+	.uni-select__input-plac {
+		font-size: 14px;
+		color: #999;
+	}
+
+	.uni-select__selector {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: absolute;
+		top: calc(100% + 12px);
+		left: 0;
+		width: 100%;
+		background-color: #FFFFFF;
+		border: 1px solid #EBEEF5;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		z-index: 2;
+		padding: 4px 0;
+	}
+
+	.uni-select__selector-scroll {
+		/* #ifndef APP-NVUE */
+		max-height: 200px;
+		box-sizing: border-box;
+		/* #endif */
+	}
+
+	.uni-select__selector-empty,
+	.uni-select__selector-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		cursor: pointer;
+		/* #endif */
+		line-height: 36px;
+		font-size: 14px;
+		text-align: center;
+		/* border-bottom: solid 1px #DDDDDD; */
+		padding: 0px 10px;
+	}
+
+	.uni-select__selector-item:hover {
+		background-color: #f9f9f9;
+	}
+
+	.uni-select__selector-empty:last-child,
+	.uni-select__selector-item:last-child {
+		/* #ifndef APP-NVUE */
+		border-bottom: none;
+		/* #endif */
+	}
+
+	/* picker 弹出层通用的指示小三角 */
+	.uni-popper__arrow,
+	.uni-popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 6px;
+	}
+
+	.uni-popper__arrow {
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+		top: -6px;
+		left: 10%;
+		margin-right: 3px;
+		border-top-width: 0;
+		border-bottom-color: #EBEEF5;
+	}
+
+	.uni-popper__arrow::after {
+		content: " ";
+		top: 1px;
+		margin-left: -6px;
+		border-top-width: 0;
+		border-bottom-color: #fff;
+	}
+
+	.uni-select__input-text {
+		width: 280px;
+		color: #333;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		-o-text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.uni-select__input-placeholder {
+		color: #666;
+	}
+
+	.uni-select--mask {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+	}
+</style>

uni_modules/uni-data-select/package.json

+{
+  "id": "uni-data-select",
+  "displayName": "uni-data-select 下拉框选择器",
+  "version": "0.1.2",
+  "description": "通过数据驱动的下拉框选择器",
+  "keywords": [
+    "uni-ui",
+    "select",
+    "uni-data-select",
+    "下拉框",
+    "下拉选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+"engines": {
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无 ",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-load-more"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-data-select/readme.md

+## Badge 数字角标
+> **组件名：uni-data-select**
+> 代码块： `uDataSelect`
+
+数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839