#

whycq

2023-12-02 76accdc54aaa7dccce6962d2a284f4e89b278dc1

#

 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 {

 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>

 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)
                        }
                    },
                })
            },

 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) {

 uni_modules/riko-combox/changelog.md

New file
@@ -0,0 +1,17 @@
## 2.0.0（2023-04-15）
- 个人优化 By LuckyRiko
## 1.0.1（2021-11-23）
- 优化 label、label-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，如何创建vue3项目，详见 [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）
- 调整为uni_modules目录规范

 uni_modules/riko-combox/components/riko-combox/riko-combox.vue

New file
@@ -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>

 uni_modules/riko-combox/package.json

New file
@@ -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"
        }
      }
    }
  }
}

 uni_modules/riko-combox/readme.md

New file
@@ -0,0 +1,7 @@
## Combox 组合框
> **组件名：riko-combox**

组合框组件。

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839