窜货统计管理系统 - 搜索、新增、修改、删除和导出功能
<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
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/mkZw 著作权归作者所有。请勿转载和采集!