#

whycq

2023-10-08 30991d69333a9f7e4ab31c6012d23159077a1d0e

 pages/common/data-list/dataDetail.vue

@@ -1,24 +1,58 @@
<template>
   <view>
      <view class="main" v-for="(it,i) in dataList" :key="i">
         <view class="main-left">{{it.key}}</view>
			
         <view class="main-right" 
            v-show="!it.type">
               {{it.value}}
         </view>
			
         <input class="main-right input" 
            v-show="it.type == 'input'" 
            type="text" 
            v-model="it.value"
         >
         <view class="main-right dis-center no-border" v-show="it.type == 'number-box'" >
            <uni-number-box
               color="#606266" 
               v-show="it.type == 'number-box'" 
                v-model="it.value"
               :max="99999999999999" 
               :min="0"
               :step='1' 
               @change="changeValue" 
            />
         </view>
			
         <!-- todo: 日期选择 -->
      </view>
		
      <view class="footer">
         <button @click="modify">modify</button>
         <button @click="del">delete</button>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            mat: {
               matnr: null,
               maktx: null,
               specs: null,
               batch: null,
               orderNo: null,
               anfme: 0,
            },
            dataList: [
               {key: '商品码',value: 'LSH90152025',valText: 'val-text'},
               {key: '商品名称',value: '尼龙头（灰白）5.2x25'},
               {key: '规格',value: '700*699*80'},
               {key: '批号',value: '20231007204944',type: 'input'},
               {key: '数量',value: 951326478,type: 'number-box',valText: 'val-num'},
            ],
            baseIP:'',
            basePORT:'',
            index: 0,
         }
      },
      onLoad(option) {
         let that = this
         let _this = this
         // #ifdef APP-NVUE
         const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
         // #endif
@@ -27,22 +61,73 @@
         // #endif
         
         // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
         eventChannel.on('mat', function(data) {
            console.log(data);
         eventChannel.on('param', function(res) {
            _this.dataList = res.param
            _this.index = res.index
         })
         
         
      },
      methods: {
         back() {
            this.getOpenerEventChannel().emit('matList', {data: this.mat});
            uni.navigateBack({
					
            })
         changeValue(value) {
            this.val = value
         },
         modify() {
            this.getOpenerEventChannel().emit('dataList', {data: this.dataList});
            uni.navigateBack()
         },
         del() {
            this.getOpenerEventChannel().emit('del', {data: this.index});
            uni.navigateBack()
         }
      }
   }
</script>

<style>
<style scoped> 
   .main {
      display: flex;
      min-height: 30px;
      align-items: center;
      margin-left: 8px;
      padding: 8px;
   }
   .main-left {
      width: 65px;
      text-align: right;
      color: #606266;
   }
   .main-right {
      flex: 1;
      margin-left: 8px;
      display: flex;
      flex-wrap: wrap;
      /* word-wrap: break-word; */
      word-break: break-all;
      border: 1px solid #dcdfe6;
      padding: 6px;
      border-radius: 4px;
      color: #a8abb2;
      font-size: 12px;
   }
   .dis-center {
      justify-content: center;
   }
   .no-border {
      border: none;
   }
   .input {
      color: #606266;
   }
   .footer {
      height: 70px;
      width: 100%;
      background-color: #f8f8f8;
      border-top: 1px solid #dcdfe6;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
   }
</style>