新页面例子 ​

<#include "../shared/Layout.ftl">
<@layout>
  <div id="app">
    <div class="nav-bar">
      
    </div>
  </div>

  <script src="/js/sku/sku.js?v=202205041"></script>
</@layout>

<div class="nav-bar">
  <el-row :gutter="5" class="button-box">
    <el-col :span="20">
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-circle-plus" v-on:click="editSku()">新增商品
        </el-button>
      </el-button-group>
      <el-button-group>
        <el-button type="danger" size="mini" icon="el-icon-delete" v-on:click="changeDataValidate('删除')">删除<el-button>
      </el-button-group>
      <el-button-group>
        <el-button type="info" size="mini" icon="el-icon-message" v-on:click="exportSku()">导出商品
        </el-button>
      </el-button-group>
    </el-col>
    <el-col :span="4">
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-brush" v-on:click="YX.onClear(app.search)">清空
        </el-button>
        <el-button type="primary" size="mini" icon="el-icon-search" v-on:click="onSearch('reset')">查 询
        </el-button>
      </el-button-group>
    </el-col>
  </el-row>
</div>

<div class="nav-bar">
  <el-row :gutter="5" class="search-box">
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">客&emsp;&emsp;户</template>
          <el-select slot="body" v-model="search.customerId" v-on:change="changeCustomerSelect(search.customerId)"  filterable clearable>
            <el-option v-for="item in tag.customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">&nbsp;商品类别</template>
        <el-select slot="body" v-model="search.categoryIds" multiple collapse-tags filterable clearable>
          <el-option v-for="item in tag.categoryList"
            :key="item.categoryId"
            :label="item.categoryName"
            :value="item.categoryId">
          </el-option>
        </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">
          商品类型
        </template>
        <el-select slot="body" size="mini" v-model="search.skuTypes" multiple collapse-tags filterable clearable placeholder="请选择">
          <el-option v-for="item in tag.skuTypeList" :label="item.value" :value="item.key"/>
        </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">供应商</template>
        <el-select slot="body" v-model="search.supplierId" filterable clearable>
          <el-option v-for="item in tag.supplierList"
            :key="item.supplierId"
            :label="item.supplierName"
            :value="item.supplierId">
          </el-option>
        </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">品牌</template>
        <el-select slot="body" v-model="search.brandId" filterable clearable>
          <el-option v-for="item in tag.brandList" :key="item.brandId" :label="item.brandName" :value="item.  brandId">
          </el-option>
        </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">效期管理</template>
        <el-select slot="body" filterable clearable size="mini" v-model="search.isShelfLifeMgmt" placeholder="请选择">
          <el-option v-for="item in tag.dataWhetherList"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-input-box>
    </el-col>
  </el-row>
  <el-row :gutter="5" class="search-box">
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">商品编码</template>
        <el-input slot="body" v-model.trim="search.itemCode" auto-complete="off"></el-input>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">&nbsp;商品名称</template>
        <el-input slot="body" v-model.trim="search.skuName" auto-complete="off"></el-input>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">货&emsp;&emsp;号</template>
        <el-input slot="body" v-model.trim="search.goodsNo" auto-complete="off"></el-input>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">性&emsp;别</template>
        <el-select slot="body" size="mini" v-model="search.sexType" filterable clearable placeholder="请选择">
          <el-option v-for="item in tag.skuSexTypeList" :label="item.value" :value="item.key"/>
        </el-select>
      </el-input-box>
    </el-col>
    <el-col :span="4">
      <el-input-box>
        <template slot="prepend">串号管理</template>
        <el-select slot="body" filterable clearable size="mini" v-model="search.isSNMgmt" placeholder="请选择">
          <el-option v-for="item in tag.dataWhetherList"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-input-box>
    </el-col>
  </el-row>
<div>

<comm-table
        ref="table"
        :res-data="tableData"
        :options="tableOptions"
        :columns="columns"
        @pagination="onSearch"
        @sort-change="sortChange"
></comm-table>