Vue 点击搜索按钮切换分页组件 - 实用教程
<template>
<div class='app-container'>
<div class='app-container-search main-bgcolor main-radius'>
<h1 class="">窜货统计</h1>
<br/>
<!-- 搜索工作栏 -->
<StatsForm
:searchFormParam="{ queryParams, dataSource }"
:showSearch.sync="showSearch"
@handleQuery="handleQuery"
@resetQuery="resetQuery"
></StatsForm>
</div>
<pre><code><div class='app-container-list main-bgcolor main-radius'>
<!-- 操作工具栏 -->
<h1>窜货统计列表</h1>
<el-button
style="float: right; margin-bottom: 10px"
type="primary"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['identity:diversion-stats:export']"
>导出
</el-button
>
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="所属商户" align="center" prop="belongBusinessName"/>
<el-table-column label="商品编号" align="center" prop="goodsId"/>
<el-table-column label="商品名称:" align="center" prop="goodsName"/>
<el-table-column label="经销商名称" align="center" prop="dealerName"/>
<el-table-column label="经销商编码" align="center" prop="dealerId"/>
<el-table-column label="窜货数" align="center" prop="num"/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template v-slot="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['identity:diversion-stats:update']"
>修改
</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['identity:diversion-stats:delete']"
>删除
</el-button
>
</template>
</el-table-column>
<div slot="empty">
<StatsTable/>
</div>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 对话框(添加 / 修改) -->
<el-dialog
:title="title"
:visible.sync="open"
width="500px"
v-dialogDrag
append-to-body
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="经销商编码" prop="dealerId">
<el-input v-model="form.dealerId" placeholder="请输入经销商编码"/>
</el-form-item>
<el-form-item label="经销商名称" prop="dealerName">
<el-input v-model="form.dealerName" placeholder="请输入经销商名称"/>
</el-form-item>
<el-form-item label="批次id" prop="batchId">
<el-input v-model="form.batchId" placeholder="请输入批次id"/>
</el-form-item>
<el-form-item label="商品id" prop="goodsId">
<el-input v-model="form.goodsId" placeholder="请输入商品id"/>
</el-form-item>
<el-form-item label="商品名称" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="请输入商品名称"/>
</el-form-item>
<el-form-item label="窜货数" prop="num">
<el-input v-model="form.num" placeholder="请输入窜货数"/>
</el-form-item>
<el-form-item label="所属商户id" prop="belongBusinessId">
<el-input
v-model="form.belongBusinessId"
placeholder="请输入所属商户id"
/>
</el-form-item>
<el-form-item label="所属商户名称" prop="belongBusinessName">
<el-input
v-model="form.belongBusinessName"
placeholder="请输入所属商户名称"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</code></pre>
</div>
</template>
<script>
import StatsForm from '@/components/Customer/SearchForm'
import StatsTable from '@/components/EmptyTable'
import {
createDiversionStats,
deleteDiversionStats,
exportDiversionStatsExcel,
getDiversionStats,
getDiversionStatsPage,
updateDiversionStats,
} from '@/api/identity/diversionStats'
export default {
name: 'DiversionStats',
components: {
StatsForm,
StatsTable,
},
data() {
return {
//展示层
foldBoole: false,
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 窜货统计列表
list: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10,
dealerId: null,
dealerName: null,
batchId: null,
goodsId: null,
goodsName: null,
num: null,
belongBusinessId: null,
belongBusinessName: null,
createTime: [],
},
//表对象
dataSource: [
{
key: 'goodsId', //商品编码
itemType: 'input',
label: '商品编码',
placeholder: '请输入',
onEnterKeyUp: this.handleQuery,
},
{
key: 'goodsName', //商品名称
itemType: 'input',
label: '商品名称',
placeholder: '请输入',
onEnterKeyUp: this.handleQuery,
},
{
key: 'dealerDame', //经销商名称
itemType: 'input',
label: '经销商名称',
placeholder: '请输入',
onEnterKeyUp: this.handleQuery,
},
{
key: 'dealerId', //经销商编码
itemType: 'input',
label: '经销商编码',
placeholder: '请输入',
onEnterKeyUp: this.handleQuery,
},
],
// 表单参数
form: {},
// 表单校验
rules: {
dealerId: [
{required: true, message: '经销商编码不能为空', trigger: 'blur'},
],
dealerName: [
{required: true, message: '经销商名称不能为空', trigger: 'blur'},
],
batchId: [
{required: true, message: '批次id不能为空', trigger: 'blur'},
],
goodsId: [
{required: true, message: '商品id不能为空', trigger: 'blur'},
],
goodsName: [
{required: true, message: '商品名称不能为空', trigger: 'blur'},
],
num: [{required: true, message: '窜货数不能为空', trigger: 'blur'}],
belongBusinessId: [
{required: true, message: '所属商户id不能为空', trigger: 'blur'},
],
belongBusinessName: [
{required: true, message: '所属商户名称不能为空', trigger: 'blur'},
],
},
}
},
created() {
this.getList()
},
methods: {
//展示与收起
foldfun() {
this.foldBoole = !this.foldBoole
},
/** 查询列表 */
getList() {
this.loading = true
// 执行查询
getDiversionStatsPage(this.queryParams).then((response) => {
this.list = response.data.list
this.total = response.data.total
this.loading = false
})
},
/** 取消按钮 */
cancel() {
this.open = false
this.reset()
},
/** 表单重置 */
reset() {
this.form = {
id: undefined,
dealerId: undefined,
dealerName: undefined,
batchId: undefined,
goodsId: undefined,
goodsName: undefined,
num: undefined,
belongBusinessId: undefined,
belongBusinessName: undefined,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1 // 重置页码为1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加窜货统计'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id
getDiversionStats(id).then((response) => {
this.form = response.data
this.open = true
this.title = '修改窜货统计'
})
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate((valid) => {
if (!valid) {
return
}
// 修改的提交
if (this.form.id != null) {
updateDiversionStats(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
return
}
// 添加的提交
createDiversionStats(this.form).then((response) => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
})
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id
this.$modal
.confirm('是否确认删除窜货统计编号为' + id + '的数据项?')
.then(function () {
return deleteDiversionStats(id)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {
})
},
/** 导出按钮操作 */
handleExport() {
// 处理查询参数
let params = {...this.queryParams}
params.pageNo = undefined
params.pageSize = undefined
this.$modal
.confirm('是否确认导出所有窜货统计数据项?')
.then(() => {
this.exportLoading = true
return exportDiversionStatsExcel(params)
})
.then((response) => {
this.$download.excel(response, '窜货统计.xls')
this.exportLoading = false
})
.catch(() => {
})
},
},
}
</script>
原文地址: https://www.cveoy.top/t/topic/mkZS 著作权归作者所有。请勿转载和采集!