Skip to content

W
wly-APP
Commit 86b26abd authored by chuan.liu's avatar chuan.liu
Browse files
Options

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

parent d0f58e1d
Show whitespace changes
Inline Side-by-side
Showing with 689 additions and 118 deletions
pages/quota/quota-order.nvue
View file @ 86b26abd
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<text class="upload-text">合计金额</text> <text class="upload-text">合计金额</text>
</view> </view>
<view> <view>
<text class="summary-num">789*6*4</text> <text class="summary-num">{{intotalComputed}}</text>
</view> </view>
</view> </view>
...@@ -14,16 +14,16 @@ ...@@ -14,16 +14,16 @@
<view class="view"> <view class="view">
<view class="planout-block"> <view class="planout-block">
<text class="planout-block-title">计划内</text> <text class="planout-block-title">计划内</text>
<image class="planout-block-icon" src="@/static/image/shop_more@3x.png" @click="addPlanout" <image class="planout-block-icon" src="@/static/image/shop_more@3x.png" @click="addPlanout()"
mode="aspectFit"></image> mode="aspectFit"></image>
</view> </view>
<uni-swipe-action class="planout-block-lists"> <uni-swipe-action class="planout-block-lists">
<uni-swipe-action-item v-for="(item,index) in planoutLists" :key='index'> <uni-swipe-action-item v-for="(item,index) in planinnerLists" :key='index'>
<view class="middle view planout-block-item"> <view class="middle view planout-block-item">
<view class="text-block title-first"> <view class="text-block title-first">
<text class="middle-date title-first__text">{{index+1}}</text> <text class="middle-date title-first__text">{{index+1}}</text>
</view> </view>
<view class="text-block" @click="selectProduct(index)"> <view class="text-block" @click="selectProduct(index,'inner')">
<text class="middle-date">产品</text> <text class="middle-date">产品</text>
<view class="middle-date-des uni-list picker-year"> <view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell"> <view class="uni-list-cell">
...@@ -35,14 +35,26 @@ ...@@ -35,14 +35,26 @@
</image> </image>
</view> </view>
</view> </view>
<view class="text-block" @click="selectPlanOrder(item,index)">
<text class="middle-date">计划编号</text>
<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">{{item.ZZFLD000005}}</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit">
</image>
</view>
</view>
<view class="text-block"> <view class="text-block">
<text class="middle-date">数量（件）</text> <text class="middle-date">数量（件）</text>
<input class="middle-date-des" type="text" :value="item.quantity" <input class="middle-date-des" type="number" :value="item.quantity"
@input="calcOuterTotal($event,item,index)" placeholder="请填写" /> @input="calcInnerTotal($event,item,index)" placeholder="请填写" />
</view> </view>
<view class="text-block"> <view class="text-block">
<text class="middle-date">单价</text> <text class="middle-date">单价</text>
<text class="middle-date-des">{{item.price}}</text> <text class="middle-date-des">{{item.NET_PRICE}}</text>
</view> </view>
<view class="text-block text-block-last"> <view class="text-block text-block-last">
<text class="middle-date">小计</text> <text class="middle-date">小计</text>
...@@ -50,7 +62,7 @@ ...@@ -50,7 +62,7 @@
</view> </view>
</view> </view>
<template v-slot:right> <template v-slot:right>
<view class="swipe-right-block" @click="handleDel"> <view class="swipe-right-block" @click="handleDel(index,'inner')">
<text class="swipe-right-block__text">删除</text> <text class="swipe-right-block__text">删除</text>
</view> </view>
</template> </template>
...@@ -73,7 +85,7 @@ ...@@ -73,7 +85,7 @@
<view class="text-block title-first"> <view class="text-block title-first">
<text class="middle-date title-first__text">{{index+1}}</text> <text class="middle-date title-first__text">{{index+1}}</text>
</view> </view>
<view class="text-block" @click="selectProduct(index)"> <view class="text-block" @click="selectProduct(index,'outer')">
<text class="middle-date">产品</text> <text class="middle-date">产品</text>
<view class="middle-date-des uni-list picker-year"> <view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell"> <view class="uni-list-cell">
...@@ -87,12 +99,12 @@ ...@@ -87,12 +99,12 @@
</view> </view>
<view class="text-block"> <view class="text-block">
<text class="middle-date">数量（件）</text> <text class="middle-date">数量（件）</text>
<input class="middle-date-des" type="text" :value="item.quantity" <input class="middle-date-des" type="number" :value="item.quantity"
@input="calcOuterTotal($event,item,index)" placeholder="请填写" /> @input="calcOuterTotal($event,item,index)" placeholder="请填写" />
</view> </view>
<view class="text-block"> <view class="text-block">
<text class="middle-date">单价</text> <text class="middle-date">单价</text>
<text class="middle-date-des">{{item.price}}</text> <text class="middle-date-des">{{item.NET_PRICE}}</text>
</view> </view>
<view class="text-block text-block-last"> <view class="text-block text-block-last">
<text class="middle-date">小计</text> <text class="middle-date">小计</text>
...@@ -100,7 +112,7 @@ ...@@ -100,7 +112,7 @@
</view> </view>
</view> </view>
<template v-slot:right> <template v-slot:right>
<view class="swipe-right-block" @click="handleDel"> <view class="swipe-right-block" @click="handleDel(index,'outer')">
<text class="swipe-right-block__text">删除</text> <text class="swipe-right-block__text">删除</text>
</view> </view>
</template> </template>
...@@ -166,26 +178,10 @@ ...@@ -166,26 +178,10 @@
export default { export default {
data() { data() {
return { return {
selectedSalePlan: {
id: '',
checked: false,
product: '',
quantity: 0,
price: 0,
total: 0
},
selectedProductInner: {
"PRODUCT_ID": "",
"ORDERED_PROD": "",
"DESCRIPTION": "",
"SHORT_TEXT": "",
'NET_PRICE': '',
'NET_VALUE': '',
'quantity': 0,
'total': 0
},
scrollTop: 0, scrollTop: 0,
planoutLists: [{ mode: 'inner',
planoutLists: [],
planinnerLists: [{
checked: false, checked: false,
"PRODUCT_ID": "", "PRODUCT_ID": "",
"ORDERED_PROD": "", "ORDERED_PROD": "",
...@@ -194,38 +190,53 @@ ...@@ -194,38 +190,53 @@
'NET_PRICE': '', 'NET_PRICE': '',
'NET_VALUE': '', 'NET_VALUE': '',
'quantity': 0, 'quantity': 0,
'total': 0 'total': 0,
'product_info': {},
'salesplan_info': {}
}] }]
} }
}, },
computed: {
intotalComputed() {
let money = 0
this.planinnerLists.forEach((item) => {
money += item.total
})
this.planoutLists.forEach((item) => {
money += item.total
})
return money
}
},
mounted() { mounted() {
console.log('监听到事件来自 onShow'); console.log('监听到事件来自 onShow');
let _this = this let _this = this
uni.$on('selectedSalePlan', function(data) { uni.$on('selectedSalePlan', function(data) {
console.log('监听到事件来自 selectedSalePlan ，携带参数 msg 为：', data.selectedSalePlan); console.log('监听到事件来自 selectedSalePlan ，携带参数 msg 为：', data);
_this.selectedSalePlan = { const fromIndex = data.index * 1
...data.selectedSalePlan let selectedSalePlan = data.selectedSalePlan
let selectedProductSalePlan = {}
_this.planinnerLists = _this.planinnerLists.map((item, i) => {
if (i === fromIndex) {
item.salesplan_info = {
...selectedSalePlan
}
selectedProductSalePlan = {
...item
} }
}
return item
})
_this.updateQuotaData(fromIndex, 'inner', selectedProductSalePlan);
}) })
uni.$on('selectedProduct', function(data) { uni.$on('selectedProduct', function(data) {
console.log('监听到事件来自 selectedProduct ，携带参数 msg 为：', data); console.log('监听到事件来自 selectedProduct ，携带参数 msg 为：', data);
const fromIndex = data.index * 1 const fromIndex = data.index * 1
const selectedProduct = data.selectedProduct const selectedProduct = data.selectedProduct
_this.mode = data.mode
if (fromIndex === -1) { _this.updateQuotaData(fromIndex, data.mode, selectedProduct);
this.selectedProductInner = {
...selectedProduct
}
_this.updateQuotaData(fromIndex, selectedProduct);
} else {
// _this.planoutLists.forEach((item, index) => {
// if (index === fromIndex) {
// item = selectedProduct
// }
// })
_this.updateQuotaData(fromIndex, selectedProduct);
}
}) })
}, },
...@@ -234,13 +245,13 @@ ...@@ -234,13 +245,13 @@
uni.$off('selectedProduct') uni.$off('selectedProduct')
}, },
methods: { methods: {
async updateQuotaData(productIndex, product) { async updateQuotaData(productIndex, mode, product) {
console.log('updateQuotaData---entry', productIndex, product) console.log('updateQuotaData---entry', productIndex, mode, product)
let productId = '' let productId = ''
let item_type = '' let item_type = ''
let item_inner = [] let item_inner = []
let item_outer = [] let item_outer = []
if (productIndex === -1) { if (mode === 'inner') {
productId = product.PRODUCT_ID productId = product.PRODUCT_ID
item_type = "ITEM_INNER" item_type = "ITEM_INNER"
item_outer = [] item_outer = []
...@@ -250,14 +261,14 @@ ...@@ -250,14 +261,14 @@
"NUMBER_INT": "0000000010", "NUMBER_INT": "0000000010",
"ITM_TYPE": "", "ITM_TYPE": "",
"ZZFLD000029": "V001", "ZZFLD000029": "V001",
"ZZFLD000005": "3800000826", "ZZFLD000005": product?.ZZFLD000005 ? product?.ZZFLD000005 : '',
"ZZFLD000005_Z1": "", "ZZFLD000005_Z1": "",
"ZZFLD000006": "20220322", "ZZFLD000006": "20220322",
"ZZFLD00002Q": "V001", "ZZFLD00002Q": "V001",
"ZZFLD00002Q_Z1": "", "ZZFLD00002Q_Z1": "",
"ORDERED_PROD": productId, "ORDERED_PROD": productId,
"DESCRIPTION": "五粮液.1618(131) 52%618mL×6", "DESCRIPTION": product.SHORT_TEXT,
"ZZFLD00002S": "52%618ML×6", "ZZFLD00002S": product.NORMS,
"UNIT": "", "UNIT": "",
"ZZFLD00002T": "盒", "ZZFLD00002T": "盒",
"QUANTITY": "", "QUANTITY": "",
...@@ -383,11 +394,42 @@ ...@@ -383,11 +394,42 @@
ITEM_INNER, ITEM_INNER,
ITEM_OUTER ITEM_OUTER
} = res.DATA } = res.DATA
if (productIndex === -1) { if (mode === 'inner') {
this.selectedProductInner = { this.planinnerLists = this.planinnerLists.map((item, i) => {
...this.selectedProductInner, if (i === productIndex) {
...ITEM_INNER && ITEM_INNER[0] item = {
...item,
...product,
...ITEM_INNER[0]
}
item.product_info = ITEM_INNER[0]
}
return item
})
if (ITEM_OUTER && ITEM_OUTER[0] && product && product.salesplan_info) {
if (this.planoutLists.length > 0) {
let isHasOutTargetIndex = this.planoutLists.findIndex((out) => {
return out.NUMBER_INT === ITEM_OUTER[0].ITEM_OUTER
})
if (isHasOutTargetIndex) {
this.planoutLists = this.planoutLists.map((out, i) => {
if (isHasOutTargetIndex === i) {
out = {
...out,
...ITEM_OUTER[0]
}
}
return out
})
} else {
this.planoutLists.push(ITEM_OUTER)
}
} else {
this.planoutLists = ITEM_OUTER
}
} }
console.log('planinnerLists', this.planinnerLists)
} else { } else {
this.planoutLists = this.planoutLists.map((item, i) => { this.planoutLists = this.planoutLists.map((item, i) => {
if (i === productIndex) { if (i === productIndex) {
...@@ -399,16 +441,21 @@ ...@@ -399,16 +441,21 @@
} }
return item return item
}) })
console.log('planoutLists', this.planoutLists)
} }
}, },
calcInnerTotal(e, item) { calcInnerTotal(e, item, i) {
console.log('ddd', item, e) console.log('sss', item, e)
let value = e.target.value let value = e.target.value
// value = `${value}`.replace(/[^0-9]/g, '') // 正则判断只能输入数字
e.target.value = value * 1 e.target.value = value * 1
this.selectedProductInner.quantity = value * 1 this.planinnerLists.forEach((product, index) => {
this.selectedProductInner.total = value * item.NET_VALUE * 1 if (i === index) {
product.quantity = value * 1
product.total = value * item.NET_VALUE * 1 || 0
}
})
// value = `${value}`.replace(/[^0-9]/g, '') // 正则判断只能输入数字
}, },
calcOuterTotal(e, item, i) { calcOuterTotal(e, item, i) {
console.log('sss', item, e) console.log('sss', item, e)
...@@ -417,17 +464,21 @@ ...@@ -417,17 +464,21 @@
this.planoutLists.forEach((product, index) => { this.planoutLists.forEach((product, index) => {
if (i === index) { if (i === index) {
product.quantity = value * 1 product.quantity = value * 1
product.total = value * item.price * 1 product.total = value * item.NET_VALUE * 1 || 0
} }
}) })
}, },
handleDel() { handleDel(index, mode = 'inner') {
console.log(1) if (mode === 'inner') {
this.planinnerLists.splice(index, 1)
} else {
this.planoutLists.splice(index, 1)
}
}, },
selectPlanOrder() { selectPlanOrder(product, index, mode = 'inner') {
if (this.selectedProductInner.PRODUCT_ID) { if (this.planinnerLists && this.planinnerLists.length > 0) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/select-sale-plan/select-sale-plan?from='quota'&product=${JSON.stringify(this.selectedProductInner)}` url: `/pages/select-sale-plan/select-sale-plan?from='quotaOrder'&product=${JSON.stringify((product))}&index=${index}`
}); });
} else { } else {
uni.showToast({ uni.showToast({
...@@ -437,20 +488,27 @@ ...@@ -437,20 +488,27 @@
}); });
} }
}, },
selectProduct(index) { selectProduct(index, mode = 'inner') {
this.mode = mode
uni.navigateTo({ uni.navigateTo({
url: `/pages/select-product/select-product?from='quotaOrder'&index=${index}` url: `/pages/select-product/select-product?from='quotaOrder'&mode=${mode}&index=${index}`
}); });
}, },
addPlanout() { addPlanout() {
let product = { let product = {
checked: false, checked: false,
product: '', "PRODUCT_ID": "",
quantity: 0, "ORDERED_PROD": "",
price: 0, "DESCRIPTION": "",
total: 0 "SHORT_TEXT": "",
'NET_PRICE': '',
'NET_VALUE': '',
'quantity': 0,
'total': 0,
'product_info': {},
'salesplan_info': {}
} }
this.planoutLists.unshift(product) this.planinnerLists.unshift(product)
}, },
nextStep() { nextStep() {
this.$emit('click', 'orderUpload') this.$emit('click', 'orderUpload')
......
pages/select-product/select-product.vue
View file @ 86b26abd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<view class="header-bg"></view> <view class="header-bg"></view>
<view class="main"> <view class="main">
<view class="middle view"> <view class="middle view">
<view class="text-block"> <view class="text-block ">
<text class="middle-date">产品名称</text> <text class="middle-date">产品名称</text>
<input class="middle-date-des" type="text" v-model="condition.product" placeholder="请填写" /> <input class="middle-date-des" type="text" v-model="condition.product" placeholder="请填写" />
</view> </view>
...@@ -80,23 +80,20 @@ ...@@ -80,23 +80,20 @@
product: '' product: ''
}, },
lists: [{ lists: [{
id: 1,
checked: false,
product: '新品五粮液',
quantity: 2,
price: 100
},
{
id: 2,
checked: false, checked: false,
product: '新品五粮液91 52%', "PRODUCT_ID": "040001005280116160",
quantity: 4, "SHORT_TEXT": "新品五粮液091 52%500mL×6",
price: 200 "NORMS": "52%500ML×6",
} "MSEHT": "盒",
], "ISPEJ": "X",
"NRATE": 1.000,
"WRATE": 1.000,
"PECYCLE": "Z001"
}, ],
selectedProduct: {}, selectedProduct: {},
toPageParams: { toPageParams: {
page: '', page: '',
mode: '',
index: 0 index: 0
} }
} }
...@@ -114,6 +111,7 @@ ...@@ -114,6 +111,7 @@
if (this.isOpened === 'left' && this.selectedProduct && this.selectedProduct.PRODUCT_ID) { if (this.isOpened === 'left' && this.selectedProduct && this.selectedProduct.PRODUCT_ID) {
uni.$emit('selectedProduct', { uni.$emit('selectedProduct', {
selectedProduct: this.selectedProduct, selectedProduct: this.selectedProduct,
mode: this.toPageParams.mode,
index: this.toPageParams.index index: this.toPageParams.index
}) })
uni.navigateBack({}) uni.navigateBack({})
...@@ -142,9 +140,11 @@ ...@@ -142,9 +140,11 @@
console.log('select-product', option) console.log('select-product', option)
const { const {
from, from,
mode,
index index
} = option } = option
this.toPageParams.index = index this.toPageParams.index = index
this.toPageParams.mode = mode
this.toPageParams.page = from this.toPageParams.page = from
}, },
created() { created() {
...@@ -231,6 +231,7 @@ ...@@ -231,6 +231,7 @@
overflow-y: scroll; overflow-y: scroll;
background: #f0f4f5; background: #f0f4f5;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
} }
.main { .main {
......
pages/select-sale-plan/select-sale-plan.vue
View file @ 86b26abd
...@@ -37,7 +37,12 @@ ...@@ -37,7 +37,12 @@
<view class="middle-date-des uni-list picker-year"> <view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell"> <view class="uni-list-cell">
<view class="uni-list-cell-db"> <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>
</view> </view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image> <image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
...@@ -90,7 +95,8 @@ ...@@ -90,7 +95,8 @@
mapState mapState
} from 'vuex' } from 'vuex'
import { import {
apiSalesPlanSelect apiSalesPlanSelect,
apiSalesPlanTypesSelect
} from '@/servers/common.js' } from '@/servers/common.js'
import timeFormat from '@/uview-ui/libs/function/timeFormat.js' import timeFormat from '@/uview-ui/libs/function/timeFormat.js'
...@@ -107,23 +113,25 @@ ...@@ -107,23 +113,25 @@
PLAN_TYPE: '' PLAN_TYPE: ''
}, },
lists: [{ lists: [{
id: 1,
checked: false,
product: '新品五粮液',
quantity: 2,
price: 100
},
{
id: 2,
checked: false, checked: false,
product: '新品五粮液91 52%', "REPORT_TYPE": "正式提报",
quantity: 4, "PLAN_NUMBER": "3800000826",
price: 200 "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: {}, selectedSalePlan: {},
selectedSalePlanTypes: [],
typesIndex: 0,
toPageParams: { toPageParams: {
page: '', page: '',
index: 0,
product: {} product: {}
} }
} }
...@@ -140,7 +148,8 @@ ...@@ -140,7 +148,8 @@
// console.log('onNavigationBarButtonTap：', e, this.isOpened, this.selectedSalePlan); // console.log('onNavigationBarButtonTap：', e, this.isOpened, this.selectedSalePlan);
if (this.isOpened === 'left' && this.selectedSalePlan && this.selectedSalePlan.PLAN_NUMBER) { if (this.isOpened === 'left' && this.selectedSalePlan && this.selectedSalePlan.PLAN_NUMBER) {
uni.$emit('selectedSalePlan', { uni.$emit('selectedSalePlan', {
selectedSalePlan: this.selectedSalePlan selectedSalePlan: this.selectedSalePlan,
index: this.toPageParams.index
}) })
uni.navigateBack() uni.navigateBack()
return return
...@@ -166,17 +175,19 @@ ...@@ -166,17 +175,19 @@
}, },
onLoad(option) { onLoad(option) {
console.log('select-saleplan', option) console.log('select-saleplan', option)
if (option && option.from) {
const { const {
from, from,
product product
} = option } = option
this.toPageParams.product = JSON.parse(product) this.toPageParams.product = JSON.parse(product)
this.toPageParams.page = from this.toPageParams.page = from
}
}, },
created() { created() {
this.condition.GJAHR = timeFormat(new Date(), 'yyyy') this.condition.GJAHR = timeFormat(new Date(), 'yyyy')
this.condition.MONAT = timeFormat(new Date(), 'mm') this.condition.MONAT = timeFormat(new Date(), 'mm')
this.getSalesPlan(); this.getSalesPlanTypes();
}, },
methods: { methods: {
async getSalesPlan() { async getSalesPlan() {
...@@ -282,8 +293,18 @@ ...@@ -282,8 +293,18 @@
}) })
console.log('ddd2', res) console.log('ddd2', res)
}, },
async getSalesPlanTypes() {
const res = await apiSalesPlanTypesSelect()
this.selectedSalePlanTypes = res.DATA
console.log('getSalesPlanTypes', res)
},
search() { 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) { bindPickerYearChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value) console.log('picker发送选择改变，携带值为', e.detail.value)
...@@ -346,6 +367,7 @@ ...@@ -346,6 +367,7 @@
flex-direction: column; flex-direction: column;
overflow-y: scroll; overflow-y: scroll;
background: #f0f4f5; background: #f0f4f5;
height: 100%;
} }
.main { .main {
......
servers/common.js
View file @ 86b26abd
...@@ -24,6 +24,16 @@ export async function apiSalesPlanSelect(params) { ...@@ -24,6 +24,16 @@ export async function apiSalesPlanSelect(params) {
return res 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 { export default {
apiProductSelect, apiProductSelect,
apiSalesPlanSelect apiSalesPlanSelect
......
uni_modules/uni-data-select/changelog.md 0 → 100644
View file @ 86b26abd
## 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 0 → 100644
View file @ 86b26abd
<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 0 → 100644
View file @ 86b26abd
{
"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 0 → 100644
View file @ 86b26abd
## Badge 数字角标
> **组件名：uni-data-select**
> 代码块： `uDataSelect`
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment