235 lines
7.3 KiB
Vue
235 lines
7.3 KiB
Vue
|
|
<template>
|
|
<page-header-wrapper>
|
|
<template v-slot:content>
|
|
<div class="table-page-search-wrapper">
|
|
<a-form layout="inline">
|
|
<a-row :gutter="48">
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="入库人昵称">
|
|
<a-input v-model="queryParam.in_nickname" placeholder="入库人昵称" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="入库人手机号">
|
|
<a-input v-model="queryParam.in_username" placeholder="入库人手机号" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="入库人身份" has-feedback>
|
|
<a-select v-model="queryParam.in_identity" @change="onIdentityInChange" placeholder="身份筛选">
|
|
<a-select-option v-for="item in identity" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="出库人昵称">
|
|
<a-input v-model="queryParam.out_nickname" placeholder="出库人昵称" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="出库人手机号">
|
|
<a-input v-model="queryParam.out_username" placeholder="出库人手机号" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="出库人身份" has-feedback>
|
|
<a-select v-model="queryParam.out_identity" @change="onIdentityOutChange" placeholder="身份筛选">
|
|
<a-select-option v-for="item in identity" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-form-item label="出库时间">
|
|
<a-range-picker
|
|
:placeholder="['开始日期', '结束日期']"
|
|
:value="rang_at"
|
|
:ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
|
|
@change="onCreateChange" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="8" :sm="24">
|
|
<a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
|
|
<a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 列表 -->
|
|
<a-card :bordered="false">
|
|
<!-- <a-card :bordered="false">
|
|
<a-row>
|
|
<a-col :sm="12" :xs="24">
|
|
<info title="线上库存量剩余" :value="listCount.online+''" :bordered="true" />
|
|
</a-col>
|
|
<a-col :sm="12" :xs="24">
|
|
<info title="线下库存量剩余" :value="listCount.offline+''" :bordered="false" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-card> -->
|
|
<br/>
|
|
<s-table
|
|
ref="table"
|
|
:columns="columns"
|
|
:data="loadData"
|
|
:rowKey="(row) => row.stock_log_id + ''"
|
|
showPagination="auto"
|
|
bordered
|
|
:scroll="{ x: 1200, y: 1000 }"
|
|
size="default">
|
|
<user-info slot="in_user" slot-scope="text, record" :info="{...record.in_user}" />
|
|
<user-info slot="out_user" slot-scope="text, record" :info="{...record.out_user}" />
|
|
<a slot="number" slot-scope="text, record" style="color: #1890ff">{{ record.number }}件</a>
|
|
<a slot="stock" slot-scope="text, record" style="color: #1890ff">{{ record.stock }}件</a>
|
|
<a slot="total" slot-scope="text, record" style="color: #1890ff">￥{{ record.total }}</a>
|
|
</s-table>
|
|
</a-card>
|
|
</page-header-wrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import { STable, UserInfo } from '@/components'
|
|
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
|
|
import moment from 'moment'
|
|
import Info from '@/views/home/components/Info'
|
|
import {
|
|
getMiddlesAgentStockOutStocks
|
|
} from '@/api/stock'
|
|
|
|
const columns = [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'stock_log_id',
|
|
align: 'center',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '经销商',
|
|
scopedSlots: { customRender: 'out_user' },
|
|
align: 'center',
|
|
width: 140
|
|
},
|
|
// {
|
|
// title: '分公司/平台',
|
|
// scopedSlots: { customRender: 'out_user' },
|
|
// align: 'center',
|
|
// width: 140
|
|
// },
|
|
{
|
|
title: '库变数据',
|
|
scopedSlots: { customRender: 'number' },
|
|
align: 'center',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '金额',
|
|
scopedSlots: { customRender: 'total' },
|
|
align: 'center',
|
|
width: 80
|
|
},
|
|
{
|
|
title: '补充库存时间',
|
|
dataIndex: 'created_at',
|
|
align: 'center',
|
|
width: 120
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'StockOut',
|
|
components: {
|
|
STable,
|
|
UserInfo,
|
|
Info,
|
|
DeriveButton
|
|
},
|
|
data () {
|
|
return {
|
|
columns,
|
|
rang_at: null,
|
|
queryParam: {
|
|
start_at: undefined,
|
|
end_at: undefined,
|
|
out_identity: undefined, // 身份
|
|
out_nickname: undefined, // 出库人昵称
|
|
out_username: undefined // 出库人手机号
|
|
},
|
|
identity: [ // 4 创客 6 代理商
|
|
{ title: '创客', id: 4 },
|
|
{ title: '代理商 ', id: 6 }
|
|
],
|
|
listCount: {
|
|
offline: 0,
|
|
online: 0
|
|
},
|
|
loadData: (parameter) => {
|
|
const requestParameters = Object.assign({}, parameter, this.queryParam)
|
|
return getMiddlesAgentStockOutStocks(requestParameters)
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
$route (to, from) {
|
|
if (to.name === 'DealerOut' && (
|
|
from.name === 'Home' ||
|
|
from.name === 'cityExperienceOfficer' ||
|
|
from.name === 'StockOut' ||
|
|
from.name === 'StockIn' ||
|
|
from.name === 'DealerIn' ||
|
|
from.name === 'DealerOut' ||
|
|
from.name === 'UserIndex' ||
|
|
from.name === 'SalesOnline' ||
|
|
from.name === 'SalesOffline' ||
|
|
from.name === 'PermissionsIndex' ||
|
|
from.name === 'SalesStock')
|
|
) {
|
|
this.$refs.table.loadData()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
// 更改创建时间
|
|
onCreateChange (dates, dateStrings) {
|
|
this.queryParam.start_at = dateStrings[0]
|
|
this.queryParam.end_at = dateStrings[1]
|
|
this.rang_at = dateStrings
|
|
},
|
|
onIdentityInChange (e) {
|
|
this.queryParam.in_identity = e
|
|
},
|
|
onIdentityOutChange (e) {
|
|
this.queryParam.out_identity = e
|
|
},
|
|
onChannelChange (e) {
|
|
this.queryParam.channel = e
|
|
},
|
|
// 搜索列表
|
|
search () {
|
|
this.$refs.table.refresh(true) // 重置接口且刷先到第一页
|
|
},
|
|
// 重置搜索列表
|
|
resetSearch () {
|
|
this.queryParam.start_at = undefined
|
|
this.queryParam.end_at = undefined
|
|
this.queryParam.out_nickname = undefined
|
|
this.queryParam.out_identity = undefined
|
|
this.queryParam.out_username = undefined
|
|
this.queryParam.in_nickname = undefined
|
|
this.queryParam.in_identity = undefined
|
|
this.queryParam.in_username = undefined
|
|
this.rang_at = []
|
|
this.$refs.table.refresh(true) // 重置接口且刷先到第一页
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ml8 {
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|