From 76accdc54aaa7dccce6962d2a284f4e89b278dc1 Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期六, 02 十二月 2023 17:01:52 +0800 Subject: [PATCH] # --- uni_modules/riko-combox/package.json | 86 ++++++++ uni_modules/riko-combox/components/riko-combox/riko-combox.vue | 293 +++++++++++++++++++++++++++++ uni_modules/riko-combox/changelog.md | 17 + pages/project/pakin/pakin.vue | 25 +- static/js/util.js | 2 uni_modules/riko-combox/readme.md | 7 pages/common/mat/matPick.vue | 134 +++++++++++-- App.vue | 2 8 files changed, 531 insertions(+), 35 deletions(-) diff --git a/App.vue b/App.vue index 41c6a63..bcd5738 100644 --- a/App.vue +++ b/App.vue @@ -16,7 +16,7 @@ /*姣忎釜椤甸潰鍏叡css */ body { background-color: #f8fafb; - font-family: Helvetica Neue, Helvetica, sans-serif,'my-font'; + font-family: Helvetica, sans-serif,'my-font'; } @font-face { diff --git a/pages/common/mat/matPick.vue b/pages/common/mat/matPick.vue index 077ca63..03807ae 100644 --- a/pages/common/mat/matPick.vue +++ b/pages/common/mat/matPick.vue @@ -5,9 +5,24 @@ <!-- key --> <view class="item-key">{{item.title}}</view> <!-- value --> - <view class="item-val">{{item.value}}</view> + <view class="item-text" v-if="item.type == 'text'">{{mat[item.field]}}</view> + <!-- <view class="item-text" v-if="item.type == 'text'">{{item.value}}</view> --> + <view class="item-input" v-if="item.type == 'input'" :style="'text-align:'+ float"> + <input type="text" @blur="blur" @focus="focus" v-model="inputData"> + </view> + <view class="item-input" v-if="item.type == 'number-box'"> + <uni-number-box v-model="numberData" :max="99999999" :step='1' color="#747474" @change="changeValue" /> + </view> + <view class="item-input" v-if="item.type == 'select'"> + <riko-combox @input="select" :candidates="candidates" :value="city" :inputFlag="true"></riko-combox> + </view> </view> </view> + + <view class="z-floor"> + <view class="z-primary" @click="back">鎻愬彇</view> + </view> + </view> </template> @@ -15,58 +30,133 @@ export default { data() { return { + candidates: [{name: 'box',id:1},{name: 'plan',id: 2}], + city: null, data: [ { - title: '鐗╂枡鍚嶇О鐗�', + title: '鍟嗗搧鍚嶇О', field: 'maktx', hied: false, - value: '123456' + value: '123456', + type: 'text' }, { - title: '鐗╂枡缂栧彿', - field: 'maktx', + title: '鍟嗗搧缂栧彿', + field: 'matnr', hied: false, - value: '娓╁害銆傜┖璋冪敤鏉ユ帶鍒舵暟鎹腑蹇冪殑娓╁害鍜屾箍搴︼紝鍒跺喎涓庣┖璋�' + value: '娓╁害銆傜┖璋�', + type: 'text' }, { - title: '鐗╂枡鍚嶇О鐗╃墿鏂欏悕绉扮墿', - field: 'maktx', + title: '瑙勬牸', + field: 'specs', hied: false, - value: '123456' + value: '蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45蠁160*45', + type: 'text' }, - ] + { + title: '鎵瑰彿', + field: 'batch', + hied: false, + value: '鐗╂枡鍚嶇О鐗�', + type: 'input' + }, + { + title: '鏁伴噺', + field: 'count', + hied: false, + value: '鐗╂枡鍚嶇О鐗�', + type: 'number-box' + }, + // { + // title: '璐т富', + // field: 'maktx', + // hied: false, + // value: '鐗╂枡鍚嶇О鐗�', + // type: 'select' + // }, + ], + mat: '', + float: 'left', + inputData: '', + numberData: '' } }, + onLoad(option) { + let _this = this + const eventChannel = this.getOpenerEventChannel(); + // 鐩戝惉acceptDataFromOpenerPage浜嬩欢锛岃幏鍙栦笂涓�椤甸潰閫氳繃eventChannel浼犻�佸埌褰撳墠椤甸潰鐨勬暟鎹� + eventChannel.on('mat', function(data) { + _this.mat = data.mat + }) + }, methods: { - + blur() { + this.float = 'right' + }, + focus() { + let newData = this.inputData + this.inputData = '' + this.float = 'left' + this.inputData = newData + }, + changeValue() { + }, + select(e){ + console.log(e); + }, + back() { + if (this.mat.anfme === 0) { + uni.showToast({title: '璇疯緭鍏ユ暟閲�', icon: "none", position: 'top'}); + return; + } + this.getOpenerEventChannel().emit('matList', {data: this.mat}); + uni.navigateBack({ + + }) + } } } </script> <style scoped> .box { - min-height: 50rpx; - background-color: antiquewhite; + min-height: 60rpx; + /* background-color: #202124; */ + /* color: #FFF; */ + background-color: #FFF; margin: 16rpx; + padding: 64rpx 32rpx 1rpx 32rpx; } .item { display: flex; - align-items: center; - margin: 8rpx; + min-height: 60rpx; + margin: 20rpx 0; + border-bottom: 1px solid #efeef2; + vertical-align: bottom; + padding: 0 10rpx; + line-height: 1.3; + } + .item:last-child { + border-bottom: none; + margin: 10rpx 0; } .item-key{ - background-color: #888; min-width: 6em; max-width: 6em; align-self: center; + vertical-align: bottom; + font-weight: bold; } - .item-val { + .item-text { flex: 1; - border: 1px solid #999; - border-radius: 16rpx; - padding: 4rpx; align-self: center; - - + text-align: right; + word-break: break-all + } + .item-input { + padding: 4rpx; + flex: 1; + align-self: center; } </style> diff --git a/pages/project/pakin/pakin.vue b/pages/project/pakin/pakin.vue index 1d989e4..7673354 100644 --- a/pages/project/pakin/pakin.vue +++ b/pages/project/pakin/pakin.vue @@ -113,8 +113,9 @@ async getMat(matnr) { let res = await addMat.addMat(matnr) if (res.code === 200 && res.data) { - res.data['count'] = 1 - this.zDataList = util.matCheck(res.data,this.zDataList) + this.matPick(res.data) + // res.data['count'] = 1 + // this.zDataList = util.matCheck(res.data,this.zDataList) this.matnr = '' } else if (res.code === 200 && !res.data) { let msg = `${this.matnr} 鐗╂枡寮傚父锛岃閲嶈瘯` @@ -131,24 +132,24 @@ } }, // 璺宠浆鐗╂枡鎻愬彇椤甸潰 - matPick() { + matPick(mat) { + let _this = this uni.navigateTo({ - url: '/pages/common/data-list/dataDetail', + url: '/pages/common/mat/matPick', // 浼� success: function(data) { - data.eventChannel.emit('param', { - param: param, - index: index + data.eventChannel.emit('mat', { + mat: mat, }) }, // 鎺� events: { - dataList: function(data) { - console.log(data); + matList: function(data) { + data.data['count'] = 1 + let newList = util.matCheck(data.data,_this.zDataList) + _this.zDataList = '' + _this.zDataList = newList }, - del: function(data) { - _this.zDataList.splice(data.data,1) - } }, }) }, diff --git a/static/js/util.js b/static/js/util.js index 8298586..7e655f6 100644 --- a/static/js/util.js +++ b/static/js/util.js @@ -5,6 +5,8 @@ * */ function matCheck(mat, matList) { + // console.log("matList:" + matList); + // console.log("mat:" + JSON.stringify(mat)); let newMatList = [], add = true; if (matList.length > 0) { diff --git a/uni_modules/riko-combox/changelog.md b/uni_modules/riko-combox/changelog.md new file mode 100644 index 0000000..900d4d6 --- /dev/null +++ b/uni_modules/riko-combox/changelog.md @@ -0,0 +1,17 @@ +## 2.0.0锛�2023-04-15锛� +- 涓汉浼樺寲 By LuckyRiko +## 1.0.1锛�2021-11-23锛� +- 浼樺寲 label銆乴abel-width 灞炴�� +## 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-combox](https://uniapp.dcloud.io/component/uniui/uni-combox) +## 0.1.0锛�2021-07-30锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 0.0.6锛�2021-05-12锛� +- 鏂板 缁勪欢绀轰緥鍦板潃 +## 0.0.5锛�2021-04-21锛� +- 浼樺寲 娣诲姞渚濊禆 uni-icons, 瀵煎叆鍚庤嚜鍔ㄤ笅杞戒緷璧� +## 0.0.4锛�2021-02-05锛� +- 浼樺寲 缁勪欢寮曠敤鍏崇郴锛岄�氳繃uni_modules寮曠敤缁勪欢 +## 0.0.3锛�2021-02-04锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 diff --git a/uni_modules/riko-combox/components/riko-combox/riko-combox.vue b/uni_modules/riko-combox/components/riko-combox/riko-combox.vue new file mode 100644 index 0000000..8013494 --- /dev/null +++ b/uni_modules/riko-combox/components/riko-combox/riko-combox.vue @@ -0,0 +1,293 @@ +<template> + <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> + <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" :disabled="!inputFlag" + placeholder-class="uni-combox__input-plac" v-model="inputVal" :focus="showSelector && inputFlag" + @click="toggleSelector" /> + <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> + </uni-icons> + </view> + <view class="uni-combox__selector" v-if="showSelector"> + <view class="uni-popper__arrow"></view> + <scroll-view scroll-y="true" class="uni-combox__selector-scroll"> + <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> + <text>{{emptyTips}}</text> + </view> + + <block v-else> + <view class="uni-combox__selector-item" @click="onSelectorClick('')"> + <text style="color: #aeafb1;">娓呴櫎鎵�閫夊唴瀹�</text> + </view> + <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="item.id" + @click="onSelectorClick(item.name)"> + <text>{{item.name}}</text> + </view> + </block> + </scroll-view> + </view> + </view> +</template> + +<script> + /** + * Combox 缁勫悎杈撳叆妗� + * @description 缁勫悎杈撳叆妗嗕竴鑸敤浜庢棦鍙互杈撳叆涔熷彲浠ラ�夋嫨鐨勫満鏅� + * @tutorial https://ext.dcloud.net.cn/plugin?id=1261 + * @property {String} label 宸︿晶鏂囧瓧 + * @property {String} labelWidth 宸︿晶鍐呭瀹藉害 + * @property {String} placeholder 杈撳叆妗嗗崰浣嶇 + * @property {Array} candidates 鍊欓�夐」鍒楄〃 + * @property {String} emptyTips 绛涢�夌粨鏋滀负绌烘椂鏄剧ず鐨勬枃瀛� + * @property {String} value 缁勫悎妗嗙殑鍊� + */ + export default { + name: 'uniCombox', + emits: ['input', 'update:modelValue'], + props: { + inputFlag: { + type: Boolean, + default: false + }, + border: { + type: Boolean, + default: true + }, + label: { + type: String, + default: '' + }, + labelWidth: { + type: String, + default: 'auto' + }, + placeholder: { + type: String, + default: '' + }, + candidates: { + type: Array, + default () { + return [] + } + }, + emptyTips: { + type: String, + default: '鏃犲尮閰嶉」' + }, + // #ifndef VUE3 + value: { + type: [String, Number], + default: '' + }, + // #endif + // #ifdef VUE3 + modelValue: { + type: [String, Number], + default: '' + }, + // #endif + }, + data() { + return { + showSelector: false, + inputVal: '' + } + }, + computed: { + labelStyle() { + if (this.labelWidth === 'auto') { + return "" + } + return `width: ${this.labelWidth}` + }, + filterCandidates() { + // console.log('---this.inputVal---', this.inputVal); + if (this.inputVal && this.inputFlag == true) { + return this.candidates.filter((item) => { + return item.name.indexOf(this.inputVal) > -1; + }) + } else { + return this.candidates; + } + }, + filterCandidatesLength() { + return this.filterCandidates.length + } + }, + watch: { + // #ifndef VUE3 + value: { + handler(newVal) { + this.inputVal = newVal + }, + immediate: true + }, + // #endif + // #ifdef VUE3 + modelValue: { + handler(newVal) { + this.inputVal = newVal + }, + immediate: true + }, + // #endif + }, + methods: { + toggleSelector() { + this.showSelector = !this.showSelector; + if(this.inputFlag == true && this.showSelector == false){ + this.onSelectorClick(this.inputVal); + } + }, + onSelectorClick(itemName) { + let item = ''; + if (itemName) { + item = this.filterCandidates.find(item => item.name === itemName); + } + + if (!item) { + this.inputVal = '' + } else { + this.inputVal = itemName + } + + this.$emit('input', item) + // #ifdef VUE3 + this.$emit('update:modelValue', item) + // #endif + + this.showSelector = false + }, + + } + } +</script> + +<style lang="scss" scoped> + .uni-combox { + font-size: 14px; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 2px 10px; + position: relative; + /* #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: 14px; + height: 22px; + line-height: 22px; + } + + .uni-combox__input-plac { + font-size: 14px; + color: #999; + } + + .uni-combox__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-combox__selector-scroll { + /* #ifndef APP-NVUE */ + max-height: 200px; + box-sizing: border-box; + /* #endif */ + } + + .uni-combox__selector-empty, + .uni-combox__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-combox__selector-item:hover { + background-color: #f9f9f9; + } + + .uni-combox__selector-empty:last-child, + .uni-combox__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-combox__no-border { + border: none; + } +</style> \ No newline at end of file diff --git a/uni_modules/riko-combox/package.json b/uni_modules/riko-combox/package.json new file mode 100644 index 0000000..c261882 --- /dev/null +++ b/uni_modules/riko-combox/package.json @@ -0,0 +1,86 @@ +{ + "id": "riko-combox", + "displayName": "riko-combox 涓嬫媺鍗曢�夋", + "version": "2.0.0", + "description": "鍙互閫夋嫨涔熷彲浠ユ悳绱㈢殑涓嬫媺鍗曢�夋 瀹樻柟榄旀敼鐗� By LuckyRiko", + "keywords": [ + "uni-ui", + "uniui", + "combox", + "缁勫悎妗�", + "select" +], + "repository": "", +"engines": { + }, + "directories": { + "example": "../../temps/example_temps" + }, +"dcloudext": { + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "鏃�", + "data": "鏃�", + "permissions": "鏃�" + }, + "npmurl": "", + "type": "component-vue" + }, + "uni_modules": { + "dependencies": [ + "uni-scss", + "uni-icons" + ], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "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" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/riko-combox/readme.md b/uni_modules/riko-combox/readme.md new file mode 100644 index 0000000..3310998 --- /dev/null +++ b/uni_modules/riko-combox/readme.md @@ -0,0 +1,7 @@ +## Combox 缁勫悎妗� +> **缁勪欢鍚嶏細riko-combox** + +缁勫悎妗嗙粍浠躲�� + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-combox) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 \ No newline at end of file -- Gitblit v1.9.1