183 lines
3.6 KiB
Vue
183 lines
3.6 KiB
Vue
<!--/*
|
||
* @Author: zwq
|
||
* @Date: 2020-12-29 15:41:11
|
||
* @LastEditTime: 2022-04-15
|
||
* @LastEditors: juzi
|
||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||
*/
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||
<base-table
|
||
:page="listQuery.current"
|
||
:limit="listQuery.size"
|
||
:table-config="tableProps"
|
||
:table-data="list"
|
||
:is-loading="listLoading"
|
||
@clickTopBtn="clickTopBtn"
|
||
/>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="listQuery.current"
|
||
:limit.sync="listQuery.size"
|
||
@pagination="getList()"
|
||
/>
|
||
<data-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import HeadForm from '@/components/basicData/HeadForm'
|
||
import BaseTable from '@/components/BaseTable'
|
||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||
import { timeFormatter } from '@/filters'
|
||
import i18n from '@/lang'
|
||
/**
|
||
* 表格表头配置项 TypeScript接口注释
|
||
* tableConfig<ConfigItem> = []
|
||
*
|
||
* Interface ConfigItem = {
|
||
* prop: string,
|
||
* label: string,
|
||
* width: string,
|
||
* align: string,
|
||
* subcomponent: function,
|
||
* filter: function
|
||
* }
|
||
*
|
||
*
|
||
*/
|
||
|
||
const tableProps = [
|
||
{
|
||
prop: 'createTime',
|
||
label: i18n.t('module.basicData.factory.createTime'),
|
||
filter: timeFormatter
|
||
},
|
||
{
|
||
prop: 'name1',
|
||
label: '单号'
|
||
},
|
||
{
|
||
prop: 'name2',
|
||
label: '类型'
|
||
},
|
||
{
|
||
prop: 'name3',
|
||
label: '品名'
|
||
},
|
||
{
|
||
prop: 'name4',
|
||
label: '规格'
|
||
},
|
||
{
|
||
prop: 'name5',
|
||
label: '物料编码'
|
||
},
|
||
{
|
||
prop: 'name6',
|
||
label: '数量'
|
||
}
|
||
]
|
||
|
||
export default {
|
||
name: 'InventoryReport',
|
||
components: { Pagination, BaseTable, HeadForm },
|
||
filters: {
|
||
statusFilter(status) {
|
||
const statusMap = {
|
||
published: 'success',
|
||
draft: 'info',
|
||
deleted: 'danger'
|
||
}
|
||
return statusMap[status]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
trueWidth: 200,
|
||
tableProps,
|
||
list: [],
|
||
total: 0,
|
||
listLoading: true,
|
||
listQuery: {
|
||
current: 1,
|
||
size: 20,
|
||
key: ''
|
||
},
|
||
headFormConfig: [
|
||
{
|
||
type: 'input',
|
||
label: i18n.t('module.basicData.visual.keyword'),
|
||
placeholder: '单号或品名',
|
||
param: 'name'
|
||
},
|
||
{
|
||
type: 'datePicker',
|
||
dateType: 'daterange',
|
||
rangeSeparator: '至',
|
||
startPlaceholder: '开始日期',
|
||
endPlaceholder: '结束日期',
|
||
label: '时间范围',
|
||
param: 'dateArr'
|
||
},
|
||
{
|
||
type: 'button',
|
||
btnName: 'btn.search',
|
||
name: 'search',
|
||
color: 'primary'
|
||
}
|
||
],
|
||
headFormValue: {}
|
||
}
|
||
},
|
||
computed: {
|
||
},
|
||
created() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.listLoading = false
|
||
this.listQuery.key = this.headFormValue.name
|
||
this.list = [
|
||
{
|
||
id: 1,
|
||
name1: '2022040696',
|
||
name2: '类别1',
|
||
name3: '成品',
|
||
name4: '中型',
|
||
name5: 'E554846167',
|
||
name6: '96'
|
||
}
|
||
]
|
||
},
|
||
btnClick(val) {
|
||
this.headFormValue = val
|
||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||
if (this.headFormValue.btnName === 'search') {
|
||
this.getList()
|
||
}
|
||
},
|
||
clickTopBtn(val) {
|
||
if (val === 'add') {
|
||
this.addNew()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.edit-input {
|
||
padding-right: 100px;
|
||
}
|
||
.cancel-btn {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 10px;
|
||
}
|
||
</style>
|