165 lines
6.4 KiB
Vue
165 lines
6.4 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<div class="filter_wrap">
|
|
<el-input v-model="query.name" size="small" clearable placeholder="供应商"
|
|
@keyup.enter.native="getTableData" style="width: 200px;" />
|
|
<el-select v-model="query.type" placeholder="选择类型">
|
|
<el-option label="进货" value="purveyor"></el-option>
|
|
<el-option label="退货" value="reject"></el-option>
|
|
</el-select>
|
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
|
<el-button @click="resetHandle">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-button type="primary" icon="el-icon-plus" @click="$refs.addSupplier.show()">添加供应商</el-button>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-table :data="tableData.list" v-loading="tableData.loading">
|
|
<el-table-column label="供应商" prop="purveyorName"></el-table-column>
|
|
<el-table-column label="联系电话" prop="purveyorTelephone"></el-table-column>
|
|
<el-table-column label="地址" prop="address"></el-table-column>
|
|
<!-- <el-table-column label="标签" prop="tip"></el-table-column> -->
|
|
<el-table-column label="备注" prop="remark"></el-table-column>
|
|
<el-table-column label="剩余付款金额" prop="waitAmount">
|
|
<template v-slot="scope">
|
|
<span class="num">
|
|
￥{{ scope.row.waitAmount }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="待付款笔数" prop="waitCount">
|
|
<template v-slot="scope">
|
|
<template v-if="scope.row.waitCount > 0">
|
|
有<span class="count">{{ scope.row.waitCount }}笔</span>未付
|
|
</template>
|
|
<template v-else>-</template>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" prop="type">
|
|
<template v-slot="scope">
|
|
<el-tag :type="scope.row.type == 0 ? 'warning' : 'success'">
|
|
{{ scope.row.type == 0 ? '待支付' : '已完结' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="上笔进货日期" prop="lastTransactAt">
|
|
<template v-slot="scope">
|
|
{{ scope.row.lastTransactAt && dayjs(scope.row.lastTransactAt).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="250">
|
|
<template v-slot="scope">
|
|
<el-button type="text" size="mini" round icon="el-icon-edit"
|
|
@click="$refs.addSupplier.show(scope.row)">编辑</el-button>
|
|
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
|
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
|
|
删除
|
|
</el-button>
|
|
</el-popconfirm>
|
|
<router-link :to="{ name: 'purchase_detail', query: { purveyorId: scope.row.id } }">
|
|
<el-button type="text" size="mini">结款记录</el-button>
|
|
</router-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
|
@current-change="paginationChange" @size-change="pagesizeChange"
|
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
|
<addSupplier ref="addSupplier" @success="getTableData" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
import { tbShopPurveyorGets, tbShopPurveyor } from '@/api/invoicing'
|
|
import addSupplier from './components/addSupplier'
|
|
export default {
|
|
components: {
|
|
addSupplier
|
|
},
|
|
data() {
|
|
return {
|
|
dayjs,
|
|
query: {
|
|
name: '',
|
|
type: ""
|
|
},
|
|
tableData: {
|
|
page: 0,
|
|
size: 10,
|
|
total: 0,
|
|
sort: 'id',
|
|
loading: false,
|
|
list: []
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTableData()
|
|
},
|
|
methods: {
|
|
// 删除
|
|
async delHandle(ids) {
|
|
try {
|
|
await tbShopPurveyor(ids, 'delete')
|
|
this.$notify({
|
|
title: '成功',
|
|
message: `删除成功`,
|
|
type: 'success'
|
|
});
|
|
this.getTableData()
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
async getTableData() {
|
|
this.tableData.loading = true
|
|
try {
|
|
const res = await tbShopPurveyorGets({
|
|
page: this.tableData.page,
|
|
size: this.tableData.size,
|
|
sort: this.tableData.sort,
|
|
purveyorName: this.query.name,
|
|
type: this.query.type,
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.tableData.loading = false
|
|
this.tableData.list = res.content
|
|
this.tableData.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.query.name = ''
|
|
this.query.type = ''
|
|
this.tableData.page = 0;
|
|
this.getTableData()
|
|
},
|
|
pagesizeChange(e) {
|
|
this.tableData.size = e
|
|
this.tableData.page = 0;
|
|
this.getTableData()
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1
|
|
this.getTableData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.num {
|
|
color: #F56C6C;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.count {
|
|
color: #409EFF;
|
|
}
|
|
</style> |