标签：orderId vue watch 存包 组件 true 弹窗

现有一个需求如下

 

 

 

 

点击“存包记录”，出现弹窗（如下图），向弹窗传递个唯一的订单id(该表主键)，通过订单id 查询出来弹窗中的列表， 另一张表，与之前表关联）

 

 

 数据库主要涉及两张表

 

涉及的主表

关联的表（弹窗列表查询的数据来源）

 

 

 

需求如上，现在开始梳理做该需求的思路。

 

 把图一页面 看做父组件，点击按钮出现 的弹窗看做子组件

插入小知识点：

【1.什么是父子组件?

在一个组件中又定义了其它组件就是父子组件，其实局部组件就是最简单的父子组件, 因为可以把Vue实例看做是一个大组件，我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件  ，比如图一列表中点击存包记录按钮弹窗，弹窗和图一列表 两者就是大组件中又定义了一个局部组件

2.如何定义其它的父子组件

 自定义组件中也可以使用components， 如下所贴代码

】

贴出父组件部分关键代码  （图一表格）

<el-table v-loading="loading" :data="lockerList"   @selection-change="handleSelectionChange"  :row-class-name="rowClassName" border>
      <el-table-column type="selection" width="60" align="center" />
      <el-table-column label="序号" type="index" width="60" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="200" align="center" prop="orderNo" />
      <el-table-column label="设备编号" width="200" align="center" prop="deviceCode" />
      <el-table-column label="设备名称" width="220" header-align="center" align="left" prop="deviceName" />
      <el-table-column label="存包格位置" width="100"  align="center" prop="storageLocation" />
      <el-table-column label="绿道名称"  width="250" header-align="center" align="left" prop="greenwayName" />
      <el-table-column label="芯片编号" width="160" align="center" prop="chipNumber" />
      <el-table-column label="存包人"  width="120" align="center" prop="lockeruserName" />
      <el-table-column label="存包时间" align="center" prop="lockerTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lockerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="storeRecords(scope.row)"
           >存包记录</el-button>

        </template>
      </el-table-column>
    </el-table>

 弹窗html代码：
<!-- 存包记录-->
<el-dialog :title="title" :visible.sync="storeRecordOpen"   width="1400px" append-to-body >             //:visible.sync="storeRecordOpen"  显示为弹窗
  <LockerRecord :orderId="orderId"></LockerRecord>                   //LockerRecord是声明好的自定义组件  需要在js中声明 在html中这样使用 ，  :orderId   形式直接使用在data()中声明的 orderId　变量　　　　　　　　　　　　　
  <div style="margin-top:40px;margin-left: 1266px;" >
    <el-button @click="storeRecordOpen = false">关 闭</el-button>
  </div>
</el-dialog>

 

“存包记录”作为一个按钮，加入点击事件。

在js中

注： data()是一个html和js交互的 桥梁，变量在data()中定义了可以直接在html及javascript中 method方法 使用

components: {LockerRecord, },            //LockerRecord为自定义的一个组件。需要在js中声明
data() {
    return {
      orderId:'', 

　　　　//存包记录窗口
　　　storeRecordOpen:false,   //弹窗层定义

},

 

  storeRecords(row) {
      this.orderId=row.orderId    //row.orderId 是html表格中的传递过来的订单id, this.orderId是js  定义的订单id变量，需要在data()中声明一下。如上
      this.storeRecordOpen=true;    //显示弹窗
      this.title="存包记录"           //弹窗标题
    },

 

 以上文件都在父组件vue 及Js 定义，

 

但是子组件  列表数据如何来呢，如何与父组件挂钩呢？

父组件vue

 

 

 

 

子组件（弹窗页面）单独做一个vue文件 

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="98px">

    </el-form>
    <el-table ref="tables" v-loading="loading" :data="list"  border>
       <el-table-column label="序号" type="index" width="60" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
       <el-table-column label="设备编号" width="150" align="center" prop="deviceCode" />
       <el-table-column label="设备名称"  header-align="center" align="left" prop="deviceName" />
       <el-table-column label="存包格位置" width="160" align="center" prop="storageLocation" />
      <el-table-column label="存取时间" align="center" prop="lockerTime" width="250">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lockerTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
     <el-table-column label="存取操作"  width="250" align="center" prop="lockerType" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.locker_type" :value="scope.row.lockerType"/>
        </template>
      </el-table-column>
     </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { getRecord} from "@/api/order/locker/lockerRecord";

export default {
  name: "LockerRecords",
  dicts: ['locker_type'],
  props:['orderId'],  
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      newOrderId:'',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 存包记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        deviceId: null,
        orderId: null,
        storageLocation: null,
        lockerTime: null,
        lockerType: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },

  created() {
    this.getList();
  },

  methods: {
    /** 查询存包记录列表 */
    getList() {
      this.loading = true;
      getRecord(this.newOrderId).then( response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
  watch: {
    orderId: {
      deep: true,
      immediate: true, // 监听到后，立即执行 handler方法
      handler: function(newVal, oldVal) {
        this.newOrderId=newVal
        this.getList();
      },

    }
  }
};
</script>

 

 子组件用父组件的数据

 props: ['orderId'],  //需要用到的数据 通过props去传值

即可使用从父组件传来的数据

 

我们看到在该vue  data()中定义了一个

  newOrderId:'', 用来接收变化之后的的订单id ，并把这个新值通过getRecord函数传递给后台 查数据

import request from '@/utils/request'



// 查询存包订单详细
export function getRecord(orderId) {
   return request({
    url: '/order/record/getRecord/' + orderId,    //把上面监测到的新值作为参数传给后台传值
    method: 'get'
  })
}

springboot 后台

  /**
     * 查询存包记录列表
     */
    @PreAuthorize("@ss.hasPermi('order:record:list')")
    @GetMapping(value = "getRecord/{orderId}")
    @ApiOperation(value = "查询存包记录列表", notes = "传入orderLockerRecord")
    public TableDataInfo<OrderLockerRecord> list(@PathVariable("orderId") Long orderId) {
        startPage();
        List<OrderLockerRecord> list = orderLockerRecordService.selectOrderLockerRecordList(orderId);
        return getDataTable(list);    //返回list 
    }

 

查出来的list  返回给子组件的vue  table中

这样呢 每点击一次图一的存包记录，会根据不同订单id，弹窗，并查出相应的关联表记录，并显示在弹窗中

 

 

 

其中涉及 watch进行监听 知识点：

当 项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听

在vue中，使用watch来监听一个值的变化

 

注【 watch 与data 或method同层级，别把watch放入method中否则报错】 

 

watch 是一个监听处理函数，当每次监听到orderId值发生改变时，执行函数。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来得默认值时，也需要执行函数，此时就需要将immediate设为true.

 

标签：orderId,vue,watch,存包,组件,true,弹窗
来源： https://www.cnblogs.com/yizhizhangBlog/p/16577637.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。