vue集成Element组件--使用记录

忘是亡心i 2022-12-15 12:40 225阅读 0赞

一、安装及组装暂不考虑  
基础vue页面的组成：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center]

二、el语法记录  
1.el-menu-item标签

其中：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:index</td> 
   <td>为v-bind:index用于动态绑定跳转url的，为必须项！</td> 
  </tr> 
  <tr> 
   <td>:key</td> 
   <td>为v-bind:key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。(为了重新渲染虚拟DOM而定义的唯一id)</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 1]

2.el-table和el-table-column标签

<el-table :data="testmesg.dataList">
            <el-table-column prop="testId" label="aaaa"></el-table-column>
            <el-table-column prop="testName" label="bbbb"></el-table-column>
    </el-table>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:data</td> 
   <td>需要展示到table中的data数据，必须是一个可循环的list或数组</td> 
  </tr> 
  <tr> 
   <td>prop</td> 
   <td>当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>table展示列的名称，如果tabledata为空，则展示表头行内容，如果tabledata不为空，则在展示表头行之后展示数据</td> 
  </tr> 
 </tbody> 
</table>

如tabledata为空则展示：  
![在这里插入图片描述][20201016170240661.png_pic_center]  
如tabledata不为空，则展示  
![在这里插入图片描述][20201016170328318.png_pic_center]  
3.el-form-item多项展示成一行

<el-row>
                <el-col :span="8">
                  <el-form-item prop="dczt" label="调出主体">
                    <el-select v-model="dczt" :value="dczt" clearable filterable multiple>
                      <el-option v-for="(item, key) in dczt" :key="key" :label="item" :value="key"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="drzt" label="调入主体">
                    <el-select v-model="drzt" :value="drzt" clearable filterable multiple>
                      <el-option v-for="(item, key) in drzt" :key="key" :label="item" :value="key"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
     </el-row>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 2]  
4.el-select标签的使用–生成select下拉框  
select可多选时，增加multiple属性即可！

<el-form-item prop="changeNum" label="调整单状态">
              <el-select v-model="query.empstatus" :value="query.empstatus" clearable filterable multiple>
                <el-option v-for="(item, key) in empStatus" :key="key" :label="item" :value="key"></el-option>
              </el-select>
    </el-form-item>

上边的赋值方式，是empStatus是个数组或者list，循环展示！  
另外：如果需要select加载已选中的值，如进入编辑页面会显示已选中的值，目前有两种方式：  
(1)如果可获取到option需要的所有值，且系统不要求下拉中所有值都加载上，只需要显示出已选中的那条option即可使用如下方式：

<el-form-item :span="12" prop="organizationCode" label="人资架构">
                <el-select :value="editForm.organizationCode" :disabled="disabled" filterable remote :remote-method="changeOrg" @change="handleChangeOrg"
                           v-model="editForm.organizationCode" placeholder="人资架构">
                  <el-option
                      v-for="item in organizationCodeList"
                      :key="item.organizationCode"
                      :label="item.organizationFullName"
                      :value="item.organizationCode">
                  </el-option>
                </el-select>
    </el-form-item>
    
    data() {
    	return {
    		organizationCodeList: []
    	}
    },
    watch: {
        row: {
          immediate: true,
          // handler中的val为返回的值
          handler(val) {
            this.handleInit(val)
          },
          deep: true
    },
    async handleInit(model) {
    	console.log(model);
         // 人资机构
          this.editForm.organizationCode = model.organizationCode;
          this.editForm.organizationPath = model.organizationPath;
          // 进入编辑页面静态加载选中的一个option即可！
          this.organizationCodeList = [{
          	organizationCode: model.organizationCode, 	
          	organizationPath: model.organizationPath, 
          	organizationFullName: model.organizationName
          }];
    }

这样编写，会在select下拉中增加organizationCodeList中下拉数据！为了把该option值选中，则需要el-select标签上 v-model的配合，设置v-model=“editForm.organizationCode”，则它会在option中查找:value="item.organizationCode"的值，所以手动设置value之后再利用v-model绑定，即可把选择的默认值显示出来！  
(2)同样的，如果需要把下拉值都显示出来再选中某一个，参照(1)中v-model的方式，则只需要把organizationCodeList数据赋值上，再设置v-model为需要选中的value值即可！！

另外：  
动态设置select下拉的是不是可选即动态增加disabled：  
(1)从实际操作结果来看，在el-select上增加disabled="false"或者disabled="true"是不起作用的，最终得select都是置灰不可选的！！  
(2)正确的使用方式是利用v-bind:disabled=“true” or v-bind:disabled="false"来动态给select下拉增加disabled属性----亲测有效！

<el-form-item label="单据类型" prop="orderType">
                  <el-select v-model="applyUniform.orderType" :value="applyUniform.value" v-bind:disabled="disabledOrderType" clearable filterable>
                    <el-option v-for="(item, index) in orderTypeList" :key="index" :label="item.name"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
    
    export default {
    	data() {
    		return {
    			disabledOrderType: false
    		}
    	}
    }         
    
    接下来在我们的方法中根据条件判断   disabledOrderType的值，动态赋值为false或者true即可！-----从传参结果看，即使增加上disabled=true，传参时依然可以把该参数传递到后台！

5.el-input标签的使用–生成input文本框

<el-form-item label="货主调整单号">
              <el-input v-model.trim="query.num"  maxLength="50"/>
    </el-form-item>

![在这里插入图片描述][20201020211208601.png_pic_center]

6.el-date-picker标签的使用–生成日期插件  
区间值插件：

<el-form-item prop="queryTime" label="计划时间">
              <el-date-picker
                  v-model="query.queryTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
    </el-form-item>

取值时，需要在data中定义日期属性值，由于有2个日期，因此下标为0的为开始日期，下标为1的为截止日期

import moment from 'moment/moment';
    export default {
      name: 'OwnerChangeList',
      data() {
        return {
          // 调整单状态
          currentStatuList: [],
          // 仓库名称
          warehouseNameList: [],
          query: {
            adjustBillId: '',
            externalBillId: '',
            queryTime: '',
            currentStatus: [],
            warehouseCode: '',
            warehouseName: []
          },
          dataPage: {},
          currentPage: 0,
          pageSize: 10,
          shipperList: [],
          mainIdList: [],
          wmsList: [],
          msg: '无数据',
          createTimeRange: [],
          loading: false
        }
      },
      methods: {
        async searchOwnerChange(pageIndex = 0) {
          // 列表数据查询方法
          alert('searchOwnerChange');
          if (this.query.queryTime && this.query.queryTime.length > 0) {
            this.query.queryTimeStart = this.query.queryTime[0] ? moment(this.query.queryTime[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
            this.query.endTimeStart = this.query.queryTime[1] ? moment(this.query.queryTime[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
          } else {
            this.query.queryTimeStart = null
            this.query.endTimeStart = null
          }
          this.query.dataPage = pageIndex
          this.query.size = this.pageSize
        console.log(this.query.queryTimeStart);
         console.log(this.query.endTimeStart );
        }
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 3]单个日期插件，当前日期之前的不可选：

重点关注：< :picker-options="expireTimeOption">
    <el-date-picker v-model="checkForm.checkEndTime" type="date" end-placeholder="截止日期" clearable
                                    :picker-options="expireTimeOption">
                                </el-date-picker>
    data实现，当天前日期不可选：
    data() {
        return {
    	    expireTimeOption: {
    	        disabledDate(date) {
    	            //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
    				// 当天前日期不可选，当天可选
    	            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
    	            //如果需要当天及之前日期不可选
    	            //return date.getTime() < Date.now();
    	        }
    	      }
        }
    }

注意:如果后端设定的接收日期格式为：

spring.jackson.date-format=yyyy-MM-dd HH:mm:ss

则需要在在插件上value-format=“yyyy-MM-dd HH:mm:ss”，否则传值会报错

<el-date-picker v-model="checkForm.checkEndTime" type="date" end-placeholder="盘点截止日期" clearable
                                    :picker-options="expireTimeOption"  value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70]

7.el-button标签的使用–生成button按钮

<el-form-item>
              <el-button type="primary" @click="xx" :loading="loading">查询</el-button>
    </el-form-item>

![在这里插入图片描述][20201020211807113.png_pic_center]

8.list数据的循环–生成列表数据

<el-table
              :data="dataPage.list"
              border
              style="width: 100%">
            <el-table-column
                prop="testId"
                label="序号">
            </el-table-column>
            <el-table-column
                prop="testName"
                label="操作">
            </el-table-column>
            <el-table-column
                prop="ownerName"
                label="货主调整单号">
            </el-table-column>
            <div slot="empty" style="color: red">{
       {msg}}</div>
    </el-table>

9.el-breadcrumb标签的使用–分隔符使用

<el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <i class="el-icon-lx-calendar"></i> 货主调整
            </el-breadcrumb-item>
    </el-breadcrumb>

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 4]解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 5]  
10.form表单提交数据  
get请求后端对应@GetMapping  
post请求后端对应@PostMapping，且方法形参上需要增加@RequestBody

<template>
      <div>
        <div class="crumbs">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <i class="el-icon-lx-calendar"></i> 货主调整
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="container">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="货主调整单号">
              <el-input v-model.trim="query.adjustBillId"  maxLength="50"/>
            </el-form-item>
            <el-form-item label="外部单号">
              <el-input v-model.trim="query.externalBillId"  maxLength="50"/>
            </el-form-item>
            <el-form-item prop="queryTime" label="计划时间">
              <el-date-picker
                  v-model="query.queryTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="currentStatus" label="调整单状态">
              <el-select v-model="query.currentStatus" clearable filterable multiple>
                <el-option v-for="(item, key) in currentStatuList" :key="key" :label="item" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库编号">
              <el-input v-model.trim="query.warehouseCode"  maxLength="50"/>
            </el-form-item>
            <el-form-item prop="jg" label="仓库名称">
              <el-select v-model="query.warehouseName" clearable filterable multiple>
                <el-option v-for="(item, index) in warehouseNameList" :key="index" :label="item.mainName" :value="item.mainId"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="searchOwnerChange" :loading="loading">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleExport" :loading="loading">导出</el-button>
            </el-form-item>
          </el-form>
          <el-table
              :data="dataPage.list"
              border
              style="width: 100%">
            <el-table-column
                type="index"
                label="序号">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    icon="el-icon-info"
                    @click="handleDetail(scope.row)">详情</el-button>
                <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleCancel(scope.row)">取消</el-button>
              </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="货主调整单号">
            </el-table-column>
            <el-table-column
                prop="externalBillId"
                label="外部单号">
            </el-table-column>
            <el-table-column
                prop="warehouseName"
                label="仓库名称">
            </el-table-column>
            <el-table-column
                prop="warehouseCode"
                label="仓库编号">
            </el-table-column>
            <el-table-column
                prop="originMainName"
                label="调出主体名称">
            </el-table-column>
            <el-table-column
                prop="targetMainName"
                label="调入主体名称">
            </el-table-column>
            <el-table-column
                prop="status"
                label="调整单状态">
            </el-table-column>
            <el-table-column
                prop="createUser"
                label="创建人">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="thirdCategoryName"
                label="完成时间">
            </el-table-column>
            <div slot="empty" style="color: red">{
       {msg}}</div>
          </el-table>
        </div>
      </div>
    </template>
    
    <script>
    import moment from "moment/moment";
    import {findPageList} from '~services/biz/ownerChangeList'
    
    export default {
      name: 'OwnerChangeList',
      data() {
        return {
          // 调整单状态
          currentStatuList: [],
          // 仓库名称
          warehouseNameList: [],
          query: {
            adjustBillId: '',
            externalBillId: '',
            queryTime: '',
            currentStatus: [],
            warehouseCode: '',
            warehouseName: []
          },
          dataPage: {},
          currentPage: 0,
          pageSize: 10,
          shipperList: [],
          mainIdList: [],
          wmsList: [],
          msg: '无数据',
          createTimeRange: [],
          loading: false
        }
      },
      methods: {
        async searchOwnerChange(pageIndex = 0) {
          // 列表数据查询方法
          alert('searchOwnerChange');
          if (pageIndex === 0) {
            this.currentPage = 0
          }
          if (this.query.queryTime && this.query.queryTime.length > 0) {
            this.query.queryTimeStart = this.query.queryTime[0] ? moment(this.query.queryTime[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
            this.query.endTimeStart = this.query.queryTime[1] ? moment(this.query.queryTime[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
          } else {
            this.query.queryTimeStart = null
            this.query.endTimeStart = null
          }
          this.query.dataPage = pageIndex
          this.query.size = this.pageSize
          try {
            this.dataPage = await findPageList(this.query)
          } catch (e) {
            // empty
          }
        },
        handleDetail(row) {
          // 点击详情按钮，进入详情页
          alert(row.id);
          console.log(row);
    	  // 跳转到请求/ownerChangeDetail对应的页面
          this.$router.push({
            path: `/ownerChangeDetail`,
            query: {id: row.id}
          })
        },
        handleCancel(row) {
          // 点击取消按钮，执行方法
          alert(row.id);
          this.$router.push({
            path: `/cancel`,
            query: {id: row.id}
          })
        },
        handleExport() {
          // 导出按钮，执行方法
          alert('导出');
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    
    (2)新建一个JS，
    import {get, post} from '../../libs/ajax'
    
    export const findPageList = params => {
      console.log(params);
      return get(`api/adjustBill/findPageList`, params)
    }
    
    export const findPageList = params => {
      console.log(params);
      return post(`api/adjustBill/findPageLists`, params)
    }
    
    (3)后端代码中Controller层接收时需要注意：
    如果前端使用get方法传参，则使用@GetMapping(..)如：
    @GetMapping("/findPageList")
    public PageInfo<AAA> findPageList(Pageable pageable, AAA a) {}
    如果前端使用post方法传参，则使用@PostMapping(..)且方法的形参上一定要加@RequestBody，否则接收不到参数，如：
    @PostMapping("/findPageList")
    public PageInfo<AAA> findPageLists(Pageable pageable, @RequestBody AAA a) {}

11.在表格/列表的表头上再增加一行数据或者增加一行按钮  
在table上再放一个table，并且不显示表头，宽度100%，为了使该空数据的表格显示出来，需要定义一个空的数据值，使之显示数据行中的按钮(如下方定义的title)。

<el-table border style="width: 100%" :show-header="false" :data="title">
            <el-table-column>
              <template>
                <el-button type="primary" @click="searchOwnerChange" :loading="loading">新建</el-button>
                <el-button type="primary" @click="searchOwnerChange" :loading="loading">导入</el-button>
                <el-button type="primary" @click="searchOwnerChange" :loading="loading">导出模板</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
              :data="dataPage.list"
              border
              style="width: 100%">
            <el-table-column
                type="index"
                label="序号">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    icon="el-icon-info"
                    @click="handleDetail(scope.row)">详情</el-button>
                <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleCancel(scope.row)">取消</el-button>
              </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="货主调整单号">
            </el-table-column>
            <el-table-column
                prop="externalBillId"
                label="外部单号">
            </el-table-column>
            </el-table-column>
            <div slot="empty" style="color: red">{
       {msg}}</div>
          </el-table>
    
    
    data() {
        return {
          // 调整单状态
          currentStatuList: [],
          // 仓库名称
          warehouseNameList: [],
          query: {
            adjustBillId: ''
          },
          dataPage: {},
          title: [{title: false}], // 该值定义无实际意义，只为显示第一个table中的按钮而定义的假值
          msg: '无数据',
          createTimeRange: [],
          loading: false
        }
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 6]  
12、Vue循环数据(标签上v-for，data数据使用.forEach)

data中list数据使用v-for循环到页面展示
    <el-form-item prop="warehouseName" label="库房名称">
                <el-select v-model="editForm.warehouseName" @change="handleChangeWarehouse" clearable filterable ch>
                  <el-option v-for="(item, key) in warehouseNameList" :key="key" :label="item.warehouseName" :value="item.warehouseCode"></el-option>
                </el-select>
              </el-form-item>
    
    data() {
      warehouseNameList: []
    }
    // data中list数据使用.forEach循环方式取到JS中：
    this.warehouseNameList.forEach(item => {
            console.log(item);
          })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 7]  
13、Vue中调用JS方法往后端传参  
方式一：

methods: {
      async handleChangeGoodsCode(row, type) {
          // 根据输入的商品编码获取商品名称
          // 商品编码
          this.goodsCode = row.originIsvGoodsCode;
          // 传参设定
          let param = {
            goodsCode : this.goodsCode
          };
          this.originIsvGoodsCode = await findGoodNameByCode(param);
        }
    }
    
    在js文件中定义方法findGoodNameByCode 
    /**
     * 根据商品编码获取商品名称
     * @param params
     * @returns list
     */
    export const findGoodNameByCode = params => {
      return get(`/api/adjustBill/getPNameByPCode`, params)
    }
    
    java中Controller定义
    @GetMapping("/getPNameByPCode")
    public List<GoodsVO> getPNameByPCode(String goodsCode){}

方式二：  
VUE:

一、
    method: {
    	async handleSearchCheckDetail() {
          // 根据列表传入的id获取信息
          this.bizWmsCheck = await getWmsCheckById(this.checkFormParam.id);
        }
    }
    二、
    async handleUpdateOverNum() {
          let param = {"pushDetailId" : this.editCheckDetailId, "checkOverNum" : this.editCheckOverNum};
          await updateCheckOverNum(param);
    ｝

JS:

一、
    /**
     * 根据盘点ID获取盘点信息
     * @param {*} param 
     */
    export const getWmsCheckById = id => {
        return get(`/api/bizWmsCheck/findByCheckId/${id}`)
    }
    二、
    export const updateCheckOverNum = (param) => {
        return get(`/api/bizPersonalCheckPushDetail/update/${param.pushDetailId}/${param.checkOverNum}`)
    }

Controller:

一、
    @GetMapping("/findByCheckId/{id}")
        public BizWmsCheckVO findByCheckId(@PathVariable Long id)
    二、    
    @GetMapping("/updatePushDetailOverNum/{pushDetailId}/{checkOverNum}")
        public void updatePushDetailOverNum(@PathVariable Long pushDetailId, @PathVariable String checkOverNum) {

14、Vue+Element-UI中动态增加table中的行数据

<div>
                <h5 class="title">明细 <el-button @click="handleAddItem" type="primary">增加</el-button></h5>
                <el-table
                    :data="adjustBillInfoItems"
                    border
                    style="width: 100%">
                  <el-table-column label="调出编码" align="center" width="180px">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.originIsvGoodsCode" @change="handleChangeGoodsCode(scope.row, 'dc')"></el-input>
                    </template>
                  </el-table-column>
                  .......
                  <el-table-column label="计划调整数量" align="center" width="180px">
                    <template slot-scope="scope">
                      <el-input-number :step-strictly="true" v-model="scope.row.applyOutstoreQty" :step="1" :min="1" size="small"
                                       @change="computeSum(scope.row)"></el-input-number>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
    
    定义方法：
    data() {
    	adjustBillInfoItems: []
    },
    methods: {
    async handleAddItem() {
          // 点击增加明细按钮，明细表格中增加一条数据
          let item = {
            lineNo: '1',
            originIsvGoodsCode: '',
            originIsvGoodsName: '',
            targetIsvGoodsCode: '',
            targetIsvGoodsName: '',
            stockNum: '',
            applyOutstoreQty: ''
          };
          this.adjustBillInfoItems.push(item);
        },
        async handleChangeGoodsCode(row, type) {
          // 根据输入的商品编码获取商品名称
          alert('根据输入的商品编码获取商品名称');
          // 商品编码
          if (type == 'dc') {
            // 调出货品编码和名称设定
            this.goodsCode = row.originIsvGoodsCode;
          } else if (type == 'dr') {
            // 调入货品编码和名称设定
            this.goodsCode = row.targetIsvGoodsCode;
          }
          // 传参设定
          let param = {
            goodsCode : this.goodsCode
          };
          // 根据商品编码查询商品信息(名称)
          let gdcode = await findGoodNameByCode(param);
          // 判断调入调出
          if (type == 'dc') {
            // 调出货品编码和名称设定
            // 行上回显名称
            row.originIsvGoodsName = gdcode[0].goodsName;
          } else if (type == 'dr') {
            // 调入货品编码和名称设定
            // 行上回显名称
            row.targetIsvGoodsName = gdcode[0].goodsName;
          } else {
            alert('根据商品编码获取商品名称出错！');
          }
          console.log(this.adjustBillInfoItems);
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 8]  
15.一个Vue页面跳转到另外一个Vue页面的同时，进行传参；如列表页跳转到详情页需要传递主键ID到详情页，详情页获取到ID再进行查询信息。通过两种方式传递：  
(1)通过$router.push方法传参，该方式适合打开一个新页面：  
如果需要获取push时传递的参数，则使用：

this.$route.query.formIds;  从push传递的参数中获取formIds参数

列表页面操作如下：

methods: {
    	handleDetail(row) {
          // 点击详情按钮，进入详情页
          this.$router.push({
            path: `/ownerChangeDetail`,
            query: {id: row.id}
          })
        }
    }

点击后，地址行显示：/ownerChangeDetail?id=1603329068784  
详情页获取传入的id值如下：

methods: {
        // 根据ID获取信息
        async getAdjectBillInfoById() {
          //获取从list页面传过来的id值
          this.adjustBillId = this.$route.query.id;
          alert(this.adjustBillId);
          let param = {
            id: this.adjustBillId
          };
          this.adjustBill = await getAdjectBillInfo(param);
          // 明细信息
          this.dataPagelist = this.adjustBill.adjustBillInfoItems;
        }
      }

(2)通过vm页面设定传参，该方式适合在列表页弹出注册的详情页：  
列表页定义：

<template>
    	<div>
    	
    	<el-table-column/>
    	<el-table-column label="操作" align="center" width="150px">
                <template slot-scope="scope">
                  <el-button type="primary" @click="seeDetail(scope.row)" size="mini" style="float:left;">详情</el-button>
              </el-table-column>
    		<el-dialog v-if="dialogVisible" :visible="dialogVisible" width="80%" @close="handleClose">
            <return-apply-detail :return-apply-param="returnApplyParam" @handleClose="handleClose"></return-apply-detail>
          </el-dialog>
    	</div>
    </template>
    <script>
    
    import ReturnApplyDetail from './ReturnApplyDetail'
    
    export default {
      name: 'ReturnApplyList',
     components: {
        ReturnApplyDetail
      },
      data() {
        return {
        	dialogVisible : false,
        	returnApplyParam: {}
        }
      },
      method: {
    	seeDetail(param) {
          this.returnApplyParam = param
          // 显示详情页
          this.dialogVisible = true
        }
      }
    }
    </script>

\----注意这里点击详情按钮传递的row行数据，即列表这一行显示用到的所有数据！  
\----注意这里的return-apply-detail，这其实是一个驼峰写法的vue页面的名称：ReturnApplyDetail.vue！！！配合import和components即可定位到页面！！！  
\----注意这里的:return-apply-param，这里其实是在列表页和详情页传参定义的属性名称：returnApplyParam

详情页定义：

注意上边的props，可接受列表页传递的参数  
注意上边查询数据时使用了await，一定要加，否则获取不到数据，同时加上async！！

16.一个Vue页面中，form表单做表单验证，如必填等

<el-form :model="editForm" ref="editForm" size="small" label-width="130px">
              <el-form-item prop="warehouseCode" label="库房名称" :rules="[{ required: true, message: '库房名称不能为空'}]">
                <el-select v-model="editForm.warehouseCode" @change="handleChangeWarehouse" clearable filterable ch>
                  <el-option v-for="(item, key) in warehouseNameList" :key="key" :label="item.warehouseName" :value="item.warehouseCode"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主题" prop="bizStockUpBill.theme" :rules="[ { required: true, message: '主题不能为空'} ]">
                 <el-input v-model="stockUpForm.bizStockUpBill.theme" placeholder="主题"></el-input>
               </el-form-item>
     </el-form>
    
    
    methods: {
    async handleSumit() {
          // 提交按钮执行方法
          this.$refs['editForm'].validate(async valid => {
            if (!valid) {
              this.loading = false;
              return;
            }
            // 设置明细数据
            this.editForm.adjustBillInfoItems = this.adjustBillInfoItems;
            if (!this.editForm.adjustBillInfoItems || this.editForm.adjustBillInfoItems.length < 1) {
              this.$message.warning('至少添加一个货主调整明细！');
              this.loading = false;
              return;
            }
            try {
              let saveResult = {};
              saveResult = await saveAdjustBillInfo(this.editForm);
              // 返回状态码为200则是保存成功
              if (saveResult.code !== 200) {
                this.$message.error(`保存失败：${saveResult.message}`);
              } else {
                this.$message.success(`保存成功！`);
                // 跳转到列表页
                this.$router.push('/ownerChangeList');
              }
              this.loading = false;
            } catch (e) {
              console.error(e);
            } finally {
              this.loading = false;
            }
          });
        }
    }

如上所示代码，如果需要做必填验证，则需要在el-form-item上增加属性:rules，一定注意不是在el-select或者el-input等上，而是在el-form-item上。加上必填验证后，在页面展示item时会自动添加上红色的\*  
而在提交时，一定要把提交验证的代码放入this.$refs\[‘editForm’\].validate(async valid => \{ 提交的代码操作在验证中间 \});否则点击提交按钮验证不生效。  
展示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 9]  
17、Vue中forEach循环无法终止程序 return 无效，修改为for循环  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 10]for循环中执行return就不往下执行代码 了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 11]  
18、Vue中不要求JS代码的后边以分号结尾，但好的习惯是分号结尾  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 12]  
19、Vue中不使用ajax，建议使用axios，如下方的导出方法：

this.$axios({
            method: 'post',
            url: 'api/adjustBill/export',
            data: this.query,
            responseType: 'blob',
            headers: { 'Content-Type': 'application/json' }
          }).then(res => {
            // 处理返回的文件流
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            })
            let fileName = '货主调整单报表.xlsx'
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          }).catch(() => {
          })

20、Vue中跳转页面，使用router  
如下：跳转到/ownerChangeDetail页面，传递参数id=row.id

this.$router.push({
            path: `/ownerChangeDetail`,
            query: {id: row.id}
          })

21、Vue中提示信息的方法：

(1)this.$message.success('导入成功！')
    (2)this.$alert('导入成功！', '提示', {
              type: 'success',
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showClose: false
    }).then(() => {
    }).catch(e => {})
    (3)this.$message.error('导入失败！');

22、Vue中上传excel等文件

<el-upload
                    ref="importFile"
                    style="margin-left: 10px; border: 0; border-radius: 0; display:inline-block; vertical-align:middle;"
                    action="/api/adjustBill/import"
                    :limit="1"
                    :on-success="handleImport"
                    :show-file-list="false">
                  <el-button type="primary" :loading="operationLoading">导入</el-button>
    </el-upload>
    其中action为上传文件调用的后端接口，on-success为导入成功后的回调方法
    handleImport(response, file, fileList) {
          // 导入执行方法
          this.operationLoading = true;
          if (response && response.message && response.message !== 'success') {
            this.$message.error(response.message);
          } else {
            // this.$message.success('导入成功！')
            this.$alert('导入成功！', '提示', {
              type: 'success',
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showClose: false
            }).then(() => {
            }).catch(e => {})
          }
          this.$refs['importFile'].clearFiles();
          this.operationLoading = false;
          this.searchOwnerChange();
        },

23、Vue文件再Idea中提交时，有时候需要build，部署才会生效：  
步骤一：执行命令npm run build 更新dist下的文件(有时需要npm run build:pre)  
步骤二：把src下的WEB-INF文件夹整个的放到dist文件夹下即可！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 13]步骤三：提交的git即可！

24、使用Element-ui生成列表数据时，如果需要把值作为超链接，则可以：

<el-table
            :data="dataPage.list"
            border
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="使用人">
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <el-button type="text" @click="handleViewDetail(scope.row)" >{
       { scope.row.countNum }}</el-button>
              </template>
            </el-table-column>
            <div slot="empty" style="color: red">{
       {mssg}}</div>
          </el-table>

其中  
:data="dataPage.list"为列表数据(数组或者list)；  
prop="userName"为获取列表数据中，每一行数据中的userName字段值显示  
在column中增加template，是为了把每一行中的countNum这个值做成超链接形式，执行@click方法进行详情页展示等操作！，此时获取值的方法只能通过scope获取了，scope.row中包含了每一行的所有数据通过\{ \{ scope.row.属性 \}\}取得。

25、使用Element-ui，在dialog中引入一个外部页面，以及使用row传递数据

1)该dialog是否显示使用v-if中的detailVisible是true还是false，true就显示出来！  
2):row="row"是吧list页面获取的row行数据传入到dialog中，详情页定义row后即可获取传入的row行数据！  
在list页面中点击一个按钮弹出一个dialog，其中dialog为一个新页面，在list页面定义如下，引入组件页面StockEmpDetails.vue作为一个详情页，吧该详情页放入el-dialog中，其中标签为页面大写字符做分隔符显示出来的，输入时可以提示：

import StockEmpDetails from './StockEmpDetails'
    
    export default {
      name: 'StockEmpSearchPage',
      // eslint-disable-next-line vue/no-unused-components
      components: { StockEmpDetails },
      data() {
     	detailVisible : false
      }
      method: {
      	handleDetail(row) {
          this.row = row;
          this.detailVisible = true;
        }
      }
    }

定义StockEmpDetails.vue页面，定义如下：

export default {
      name: 'StockEmpDetails',
      props: {
        row: {
          type: Object,
          required: true
        }
      },
      data() {
        return {
          detailList: [],
          msg: '无数据'
        }
      },
      created() {
        this.init()
      },
      methods: {
        async init() {
          console.log(this.row);
          alert(this.row.id);
          this.detailList = [];
        }
      }
    }

在详情页一定要在Data()中定义row否则，在方法等地方获取从列表传入的this.row数据是无法获取到数据的！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 14]  
26、vue页面引入js或者其他vue页面的方式  
引入js：  
import pagination from ‘…/…/…/…/mixins/pagination’  
// import pagination from ‘~mixins/pagination’ 这个方式会报错，不建议使用

export default \{  
name: “xxx”  
mixins: \[pagination, timeUtil\],  
data() \{  
\}  
\}  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 15]

引入其他vue页面：  
import UniformApplyDetail from ‘./UniformApplyDetail’  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 16]  
27、vue页面中，列表页需要多选checkbox  
1.在el-table上增加ref=“multipleTable”  
2.在el-table上增加@selection-change=“changeFun”，不要在el-table-column上增加因为不生效！  
3.在data()\{\}中定义multipleTable: \[\]  
4.定义方法changeFun(val)\{this.multipleTable = val;\}从输出结果看，这里获取的是一行所定义的所有数据！

<el-table ref="multipleTable" :data="dataList" border style="width: 100%" v-loading="loading" @selection-change="changeFun">
              <el-table-column type="selection" width="50" ></el-table-column>
              <el-table-column label="序号" type="index" align="center"></el-table-column>
              <el-table-column label="申请单ID" prop="id" align="center"></el-table-column>
              <el-table-column label="商品名称" prop="productName" align="center"></el-table-column>
              <el-table-column label="申请数量" prop="applyNum" align="center"></el-table-column>
              <el-table-column label="申请人姓名" prop="applyName" align="center"></el-table-column>
              <el-table-column label="申请人ERP" prop="applyErp" align="center"></el-table-column>
              <el-table-column label="提交时间" prop="createTime" align="center"></el-table-column>
              <el-table-column label="费用承担部门" prop="orgName" align="center"></el-table-column>
              <el-table-column label="方式" prop="applyMethodDesc" align="center"></el-table-column>
              <el-table-column label="单据类型" prop="formTypeDesc" align="center"></el-table-column>
              <el-table-column label="单据状态" prop="formStatusDesc" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="250px">
                <template slot-scope="scope">
                  <el-button type="primary" @click="seeDetail(scope.row)" size="mini" style="float:left;">详情</el-button>
                  <el-button type="primary" v-if="scope.row.formStatus == 10" @click="handleReject(scope.row)" size="mini" style="float:left;">驳回</el-button>           
                </template>
              </el-table-column>
            </el-table>

//复选框状态改变
    changeFun(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    }

27、vue页面中，给数组增加一个对象：  
如定义dataList:\[\]，现在需要把一个data:\{…\}添加到list中，则：  
this.dataList.push(data);  
给数组dataList去重：利用ES6中的 Set 方法去重  
dataList= Array.from(new Set(dataList))  
console.log(dataList);  
注：Set为ES6新增的一个对象，允许存储任何类型（原始值或引用值）的唯一值  
28、vm.$emit( eventName, \[…args\] )触发当前实例上的事件。附加参数都会传给监听器回调。  
\{string\} eventName 事件名称  
\[…args\] 参数  
使用方式如下：  
在当前父页面A中嵌入一个小页面aHtml，代码如下：

<el-card shadow="hover" style="margin-top: 10px">
    	 
          <a-html @handle-select="handleSelect" :show-stock="true" :wms-code.sync="applyBill.wmsCode" :main-id.sync="applyBill.receiverCompany"></a-html>
        </el-card>

此时在子页面aHtml中如果调用：

this.$emit('handle-select', selectedRows)

代表在子页面调用父页面中名称为handle-select的事件方法handleSelect()，传递selectedRows参数到事件方法中！  
28、vue列表页面中，有时需要把两列的值合并到一个单元格显示，可以使用如下方式：

<el-table-column label="操作人" align="center">
              <template slot-scope="scope">
                  {
       {scope.row.createUser}}-{
       {scope.row.createName}}
              </template>
    </el-table-column>

![在这里插入图片描述][20201214105756665.png] 29、vue列表页面中，可用.find方法循环list或者数组获取想要的数据，  
如：

// 获取当前选中的机构数据this.wmsCheckForm.checkOrg在数组中查找完整的数据信息，就可以使用find方法
    const org = this.orgList.find(item => this.wmsCheckForm.checkOrg == item.id)
    console.log(org);

30、vue做表单校验，如：必填非空等校验的做法  
表单校验：  
第一步：form表单上增加:rules=“rules”  
第二步：在data()\{\}中增加rules规则  
第三步：提交表单时，使用this.$refs\[‘wmsCheckForm’\].validate校验

<el-form :inline="true" :model="wmsCheckForm" :rules="rules" class="demo-form-inline" ref="wmsCheckForm">
                      <el-row>
                          <el-col :span="6">
                              <el-form-item label="盘点任务" prop="checkTaskName">
                                <el-input v-model="wmsCheckForm.checkTaskName" placeholder="盘点任务"></el-input>
                              </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="盘点方式" prop="checkMethod">
                              <el-select v-model="wmsCheckForm.checkMethod" :value="wmsCheckForm.checkMethod" filterable >
                                <el-option v-for="(item, index) in checkMethodList" :label="item.name" :value="item.value"
                                          :key="index"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                  </el-row>     
    </el-form>  
    
    export default{
    	data() {
        return {
          wmsCheckForm: {
            checkTaskName: '',
            checkMethod: ''
          },
          rules: {
            checkTaskName: [
              {required: true, message: '盘点任务不能为空', trigger: 'blur'}
            ],
            checkMethod: [
              {required: true, message: '盘点方式不能为空', trigger: 'change'}
            ]
          },
          loading: false
        }
      },
    }
    method: {
    	async handleSave() {
    		this.$refs['wmsCheckForm'].validate(async valid => {
            if (!valid) {
              this.loading = false
              return
            }
            });
    	}
    }

31、vue中删除List中的一个元素

// 已有删除
        handleDelete(detail) {
          this.$confirm('确定要删除吗？', '提示', {
            type: 'warning',
            distinguishCancelAndClose: true
          }).then(() => {
            this.wmsCheckForm.bizWmsCheckDetailList.splice(this.wmsCheckForm.bizWmsCheckDetailList.indexOf(detail), 1);
            this.$message.success('删除成功');
          }).catch(e => {
            if (e !== 'cancel' && e !== 'close') {
              this.$message.warning('删除失败');
            }
          })
        },

32、vue+ElementUI列表有复选框时，获取选中的值

<el-table
                            :data="dataPage.list"
                            border
                            ref="goodsTable"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                label="全选">
                        </el-table-column>
                        <el-table-column
                                prop="sku"
                                label="商品编码">
                        </el-table-column>
    </el-table>                    
    
    handleSelect() {
          // 必选选择一行数据
          const selectedRows = this.$refs.goodsTable.selection;
          if (!selectedRows || selectedRows.length < 1) {
            this.$message.warning('必须选择一行')
            return
          }
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 1]33、el-dialog的使用：弹出的dialog页面在遮罩层下边显示了  
具体使用情况如下：在列表页弹出详情页dialog，在详情页中再弹出一个dialog即出现遮罩层盖住的情况![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 2]需要在第二层的dialog上配置属性:append-to-body="true"即可解决该问题  
如下：

<el-dialog v-if="dialogVisible" :visible="dialogVisible" width="30%" @close="handleClose" title="单号编辑" :append-to-body="true">
          <div class="demo-input-suffix">
            盘盈单号：
            <el-input placeholder="请输入单号：" v-model="editCheckOverNum"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 3]34、VUE中判断输入的是不是数字

let real = Number(this.realNumber);
     if (isNaN(real)) {
        this.$toast.warn('请输入数字！');
        return;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ccef43b5a708420e8fe2d90602c47833.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/c61449a28fb141d09d8e708f539eb5f3.png
[20201016170240661.png_pic_center]: /images/20221123/8b8d068b9b164ceaa715f4d158ead14c.png
[20201016170328318.png_pic_center]: /images/20221123/feb36433924347eaa4452689a72c8aff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/db93142887074ef2b4a9c3eea45e5ccd.png
[20201020211208601.png_pic_center]: /images/20221123/ffb436f494934baab83d7816da0ccdde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/99960eb8595143c096bbbf1f7aa8f4e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70]: /images/20221123/6f46e2022d83454bae8a4841538fae10.png
[20201020211807113.png_pic_center]: /images/20221123/909aae8870814466ab8c9ff32aa91c55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/298965ad1e8c483b86ed1924a34c31fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/c88bdf653664458ab3f1fa8dd29a4b47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/513ed962005c4879a0ae0bfbe29eef16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/2688faf3510d4d5a9ee4fbf8ae35a231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/08ed45f3e1674fd292726ced13fd4ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/047d216d6f4d485787f7bf3a359767e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/453dbe02c6f84bfab044dd34343325f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/d30b37695d7f4b519d84c5c468ee7cd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/ed36826792894a7a9c832778651db66d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/690b2805955543259e220a02602b07d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/724cf04f3b1b4b8f8c7c6695480f315e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/9216d67f00534bda96af48a346ed5a2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/32186eb8b6f840d497f55106c0c82504.png
[20201214105756665.png]: /images/20221123/6bffa396ecb045e285483fc3e122435e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 1]: /images/20221123/a65507b82091438c87f154bae5827652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 2]: /images/20221123/998f8cc76f5040a0a8a36bffdd774774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 3]: /images/20221123/c7106e97537041769f73ba2de94fc42b.png