table不随屏幕改变尺寸问题

This commit is contained in:
mabo
2021-05-27 16:37:00 +08:00
parent 087ffe230d
commit 0df88e08e4
88 changed files with 5255 additions and 5397 deletions

View File

@@ -1,32 +1,26 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 200px" />
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 200px" />
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect">
</Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect">
</Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</div>
</template>

View File

@@ -48,15 +48,13 @@
<Tabs active-key="key1" @on-click="clickTabs">
<Tab-pane label="入账流水" key="key1">
<Card>
<Row>
<Table
:loading="loading"
border
:columns="orderColumns"
:data="order"
ref="table"
></Table>
</Row>
<Table
:loading="loading"
border
:columns="orderColumns"
:data="order"
ref="table"
></Table>
<Row type="flex" justify="end" class="page">
<Page
:current="orderParam.pageNumber"
@@ -73,15 +71,13 @@
</Tab-pane>
<Tab-pane label="退款流水" key="key2">
<Card>
<Row>
<Table
:loading="loading"
border
:columns="refundColumns"
:data="refund"
ref="table"
></Table>
</Row>
<Table
:loading="loading"
border
:columns="refundColumns"
:data="refund"
ref="table"
></Table>
<Row type="flex" justify="end" class="page">
<Page
:current="refundParam.pageNumber"

View File

@@ -1,42 +1,36 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 200px" />
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Form-item label="筛选状态">
<Select v-model="searchForm.billStatus" style="width:160px">
<Option value="">全部</Option>
<Option value="OUT">出账</Option>
<Option value="CHECK">已核对</Option>
<Option value="COMPLETE">已完成</Option>
</Select>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="delAll">批量删除</Button>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-selection-change="changeSelect">
</Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="账单编号" prop="sn">
<Input type="text" v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 200px" />
</Form-item>
<Form-item label="出帐时间" prop="createTime">
<DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item>
<Form-item label="筛选状态">
<Select v-model="searchForm.billStatus" style="width:160px">
<Option value="">全部</Option>
<Option value="OUT">已出账</Option>
<Option value="CHECK">已核对</Option>
<Option value="COMPLETE">完成</Option>
</Select>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="delAll">批量删除</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-selection-change="changeSelect">
</Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</div>
</template>

View File

@@ -1,44 +1,38 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="padding-row">
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</div>
</template>

View File

@@ -246,22 +246,20 @@
</Form>
</Row>
<div style="min-height: 180px">
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="orderColumns"
:data="orderData"
ref="table"
sortable="custom"
@on-sort-change="orderChangeSort"
>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a @click="$router.push({name: 'order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
</Row>
<Table
:loading="loading"
border
:columns="orderColumns"
:data="orderData"
ref="table"
sortable="custom"
@on-sort-change="orderChangeSort"
>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a @click="$router.push({name: 'order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
<Page
@@ -349,44 +347,42 @@
</Form>
</Row>
<div style="min-height: 180px">
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="refundGoodsOrderColumns"
:data="refundGoodsOrderData"
ref="table"
sortable="custom"
@on-sort-change="refundGoodsOrderChangeSort"
>
<!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="scope">
<div style="margin-top: 5px;height: 80px; display: flex;">
<div style="">
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
</div>
<div style="margin-left: 13px;margin-top: 3px;">
<div class="div-zoom">
<a>{{scope.row.goodsName}}</a>
</div>
</div>
<Table
:loading="loading"
border
:columns="refundGoodsOrderColumns"
:data="refundGoodsOrderData"
ref="table"
sortable="custom"
@on-sort-change="refundGoodsOrderChangeSort"
>
<!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="scope">
<div style="margin-top: 5px;height: 80px; display: flex;">
<div style="">
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
</div>
</template>
<div style="margin-left: 13px;margin-top: 3px;">
<div class="div-zoom">
<a>{{scope.row.goodsName}}</a>
</div>
</div>
</div>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
</template>
</template>
<!-- 售后单详情格式化 -->
<template slot="refundGoodsOrderSlot" slot-scope="scope">
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
</Row>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
</template>
<!-- 售后单详情格式化 -->
<template slot="refundGoodsOrderSlot" slot-scope="scope">
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
<Page
@@ -474,44 +470,42 @@
</Form>
</Row>
<div style="min-height: 180px">
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="refundGoodsOrderColumns"
:data="refundOrderData"
ref="table"
sortable="custom"
@on-sort-change="refundOrderChangeSort"
>
<!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="scope">
<div style="margin-top: 5px;height: 80px; display: flex;">
<div style="">
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
</div>
<div style="margin-left: 13px;margin-top: 3px;">
<div class="div-zoom">
<a>{{scope.row.goodsName}}</a>
</div>
</div>
<Table
:loading="loading"
border
:columns="refundGoodsOrderColumns"
:data="refundOrderData"
ref="table"
sortable="custom"
@on-sort-change="refundOrderChangeSort"
>
<!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="scope">
<div style="margin-top: 5px;height: 80px; display: flex;">
<div style="">
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
</div>
</template>
<div style="margin-left: 13px;margin-top: 3px;">
<div class="div-zoom">
<a>{{scope.row.goodsName}}</a>
</div>
</div>
</div>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
</template>
</template>
<!-- 售后单详情格式化 -->
<template slot="refundGoodsOrderSlot" slot-scope="scope">
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
</Row>
<!-- 订单详情格式化 -->
<template slot="orderSlot" slot-scope="scope">
<a
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
</template>
<!-- 售后单详情格式化 -->
<template slot="refundGoodsOrderSlot" slot-scope="scope">
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
</template>
</Table>
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
<Page

View File

@@ -1,56 +1,50 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺状态" prop="shopDisable">
<Select v-model="searchForm.shopDisable" clearable style="width: 200px">
<Option value="OPEN">开启</Option>
<Option value="CLOSED">已关闭</Option>
<Option value="APPLY">申请中</Option>
<Option value="APPLYING">审核中</Option>
<Option value="REFUSED">审核拒绝</Option>
</Select>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
</Row>
<Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</Col>
</Row>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺名称" prop="storeName">
<Input
type="text"
v-model="searchForm.storeName"
placeholder="请输入店铺名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="店铺状态" prop="shopDisable">
<Select v-model="searchForm.shopDisable" clearable style="width: 200px">
<Option value="OPEN">开启中</Option>
<Option value="CLOSED">已关闭</Option>
<Option value="APPLY">申请</Option>
<Option value="APPLYING">审核中</Option>
<Option value="REFUSED">审核拒绝</Option>
</Select>
</Form-item>
<Form-item label="创建时间" prop="createTime">
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Row>
<Row class="operation padding-row">
<Button @click="add" type="primary">添加</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</div>
</template>