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>
|