源文件
This commit is contained in:
136
src/views/invoicing/supplier_manage/purchase.vue
Normal file
136
src/views/invoicing/supplier_manage/purchase.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<div class="filter_wrap">
|
||||
<el-input v-model="query.name" clearable placeholder="供应商" @keyup.enter.native="getTableData"
|
||||
style="width: 200px;" />
|
||||
<el-select v-model="query.type" placeholder="付款状态">
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in types" :key="item.id"></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-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="供应商" prop="purveyorName"></el-table-column>
|
||||
<el-table-column label="剩余付款金额" prop="waitAmount">
|
||||
<template v-slot="scope">
|
||||
<span class="num" v-if="scope.row.waitAmount > 0">￥{{ scope.row.waitAmount }}</span>
|
||||
<span v-else>-</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">
|
||||
{{ dayjs(scope.row.lastTransactAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template v-slot="scope">
|
||||
<router-link :to="{ name: 'purchase_detail', query: { purveyorId: scope.row.purveyorId } }">
|
||||
<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" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { tbShopPurveyorTransactGet, dictDetail } from '@/api/invoicing'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
types: [],
|
||||
query: {
|
||||
name: '',
|
||||
type: ''
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
sort: 'id',
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dictDetail()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopPurveyorTransactGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: this.tableData.sort,
|
||||
purveyorName: this.query.name,
|
||||
status: this.query.type,
|
||||
type: 'purveyor',
|
||||
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()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
async dictDetail() {
|
||||
const { content } = await dictDetail({
|
||||
dictName: 'purveyor_transact_status',
|
||||
size: 100,
|
||||
page: 0
|
||||
})
|
||||
this.types = content
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.num {
|
||||
color: #F56C6C;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
350
src/views/invoicing/supplier_manage/purchase_detail.vue
Normal file
350
src/views/invoicing/supplier_manage/purchase_detail.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-radio-group v-model="query.time" @change="timeChange">
|
||||
<el-radio-button :label="item.value" v-for="item in timeList" :key="item.label">{{ item.label
|
||||
}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="head-container" v-if="query.time == 'custom'">
|
||||
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getTableData">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="filter_wrap">
|
||||
<el-select v-model="query.type" placeholder="付款状态">
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in types" :key="item.id"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||||
<el-button @click="resetHandle">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="info_list">
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="background-color: #F2D7FF;">
|
||||
<i class="icon el-icon-info" style="color:#C978EE;"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="n">￥{{ info.totalAmount }}</div>
|
||||
<div class="intro">总交易{{ info.waitCount }}笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="background-color: #DFFECC;">
|
||||
<i class="icon el-icon-success" style="color:#47B505;"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="n">￥{{ info.paidAmount }}</div>
|
||||
<div class="intro">已支付金额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="background-color: #FFE7D6;">
|
||||
<i class="icon el-icon-circle-plus" style="color: #FF6B00;"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="n">￥{{ info.waitAmount }}</div>
|
||||
<div class="intro">待支付金额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon_wrap" style="background-color: #FFF1D5;">
|
||||
<i class="icon el-icon-warning" style="color: #FEB420;"></i>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="n">{{ info.waitNumber }}</div>
|
||||
<div class="intro">待支付笔数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="select_count_wrap">
|
||||
<div class="select_count">
|
||||
<i class="icon el-icon-warning"></i>
|
||||
已选中
|
||||
<span class="n">{{ selectCount }}</span>
|
||||
项
|
||||
</div>
|
||||
<el-button>批量付款</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading" @select="selectHandle"
|
||||
@select-all="selectHandle">
|
||||
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
||||
<el-table-column label="创建日期" prop="createdAt">
|
||||
<template v-slot="scope">
|
||||
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" prop="type">
|
||||
<template v-slot="scope">
|
||||
进货单
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总金额" prop="totalAmount">
|
||||
<template v-slot="scope">
|
||||
￥{{ scope.row.totalAmount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="待付款金额" prop="waitAmount">
|
||||
<template v-slot="scope">
|
||||
<span class="num" v-if="scope.row.waitAmount > 0">￥{{ scope.row.waitAmount }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="status">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="info">{{ types.find(item => item.value == scope.row.status).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" prop="remark"></el-table-column>
|
||||
<el-table-column label="付款时间" prop="updatedAt">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.paidAt && dayjs(scope.row.paidAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template v-slot="scope">
|
||||
<router-link :to="{ name: 'purchase_detail', query: { purveyorId: scope.row.purveyorId } }">
|
||||
<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" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { tbShopPurveyorTransactInfo, dictDetail, tbShopPurveyorTransactSum } from '@/api/invoicing'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
timeList: [
|
||||
{
|
||||
label: '全部',
|
||||
value: 'all'
|
||||
},
|
||||
{
|
||||
label: '今天',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '昨天',
|
||||
value: '-1'
|
||||
},
|
||||
{
|
||||
label: '最近7天',
|
||||
value: '-7'
|
||||
},
|
||||
{
|
||||
label: '最近30天',
|
||||
value: '-30'
|
||||
},
|
||||
{
|
||||
label: '本周',
|
||||
value: 'week'
|
||||
},
|
||||
{
|
||||
label: '本月',
|
||||
value: 'moth'
|
||||
},
|
||||
{
|
||||
label: '自定义',
|
||||
value: 'custom'
|
||||
}
|
||||
],
|
||||
types: [],
|
||||
selectCount: 0,
|
||||
query: {
|
||||
type: '',
|
||||
time: 'all',
|
||||
createdAt: []
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
sort: 'id',
|
||||
loading: false,
|
||||
list: []
|
||||
},
|
||||
info: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dictDetail()
|
||||
this.getTableData()
|
||||
this.tbShopPurveyorTransactSum()
|
||||
},
|
||||
methods: {
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopPurveyorTransactInfo({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: this.tableData.sort,
|
||||
purveyorId: this.$route.query.purveyorId,
|
||||
status: this.query.type,
|
||||
type: 'purveyor',
|
||||
createdAt: this.query.createdAt
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.time = 'all'
|
||||
this.query.createdAt = []
|
||||
this.tableData.page = 0;
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
async dictDetail() {
|
||||
const { content } = await dictDetail({
|
||||
dictName: 'purveyor_transact_status',
|
||||
size: 100,
|
||||
page: 0
|
||||
})
|
||||
this.types = content
|
||||
},
|
||||
// 选择时间
|
||||
timeChange(e) {
|
||||
this.query.createdAt = []
|
||||
const format0 = 'YYYY-MM-DD 00:00:00'
|
||||
const format1 = 'YYYY-MM-DD 23:59:59'
|
||||
switch (e) {
|
||||
case '0':
|
||||
this.query.createdAt = [dayjs().format(format0), dayjs().format(format1)]
|
||||
break;
|
||||
case '-1':
|
||||
this.query.createdAt = [dayjs().add(-1, 'day').format(format0), dayjs().add(-1, 'day').format(format1)]
|
||||
break;
|
||||
case '-7':
|
||||
this.query.createdAt = [dayjs().add(-7, 'day').format(format0), dayjs().format(format1)]
|
||||
break;
|
||||
case '-30':
|
||||
this.query.createdAt = [dayjs().add(-30, 'day').format(format0), dayjs().format(format1)]
|
||||
break;
|
||||
case 'week':
|
||||
this.query.createdAt = [dayjs().startOf('week').format(format0), dayjs().endOf('week').format(format1)]
|
||||
break;
|
||||
case 'moth':
|
||||
this.query.createdAt = [dayjs().startOf('month').format(format0), dayjs().endOf('month').format(format1)]
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.getTableData()
|
||||
},
|
||||
selectHandle(selection, row) {
|
||||
this.selectCount = 0
|
||||
this.selectCount = selection.length
|
||||
},
|
||||
async tbShopPurveyorTransactSum() {
|
||||
this.info = await tbShopPurveyorTransactSum({ purveyorId: this.$route.query.purveyorId, type: 'purveyor' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select_count_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select_count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e7f3ff;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.n {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.n {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F56C6C;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.info_list {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.icon_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 20px;
|
||||
|
||||
.n {
|
||||
font-size: 28px;
|
||||
text-indent: -6px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/views/invoicing/supplier_manage/refund.vue
Normal file
136
src/views/invoicing/supplier_manage/refund.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<div class="filter_wrap">
|
||||
<el-input v-model="query.name" clearable placeholder="供应商" @keyup.enter.native="getTableData"
|
||||
style="width: 200px;" />
|
||||
<el-select v-model="query.type" placeholder="付款状态">
|
||||
<el-option :label="item.label" :value="item.value" v-for="item in types" :key="item.id"></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-table :data="tableData.list" v-loading="tableData.loading">
|
||||
<el-table-column label="供应商" prop="purveyorName"></el-table-column>
|
||||
<el-table-column label="剩余付款金额" prop="waitAmount">
|
||||
<template v-slot="scope">
|
||||
<span class="num" v-if="scope.row.waitAmount > 0">￥{{ scope.row.waitAmount }}</span>
|
||||
<span v-else>-</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">
|
||||
{{ dayjs(scope.row.lastTransactAt).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template v-slot="scope">
|
||||
<router-link :to="{ name: 'purchase_detail', query: { purveyorId: scope.row.purveyorId } }">
|
||||
<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" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { tbShopPurveyorTransactGet, dictDetail } from '@/api/invoicing'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
types: [],
|
||||
query: {
|
||||
name: '',
|
||||
type: ''
|
||||
},
|
||||
tableData: {
|
||||
page: 0,
|
||||
size: 10,
|
||||
total: 0,
|
||||
sort: 'id',
|
||||
loading: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dictDetail()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopPurveyorTransactGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: this.tableData.sort,
|
||||
purveyorName: this.query.name,
|
||||
status: this.query.type,
|
||||
type: 'reject',
|
||||
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()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
async dictDetail() {
|
||||
const { content } = await dictDetail({
|
||||
dictName: 'purveyor_transact_status',
|
||||
size: 100,
|
||||
page: 0
|
||||
})
|
||||
this.types = content
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.num {
|
||||
color: #F56C6C;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
110
src/views/invoicing/supplier_manage/supplier_list.vue
Normal file
110
src/views/invoicing/supplier_manage/supplier_list.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<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-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="操作" width="200">
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
<addSupplier ref="addSupplier" @success="getTableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tbShopPurveyorGet, tbShopPurveyor } from '@/api/invoicing'
|
||||
import addSupplier from '../components/addSupplier'
|
||||
export default {
|
||||
components: {
|
||||
addSupplier
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
name: ''
|
||||
},
|
||||
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 tbShopPurveyorGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
sort: this.tableData.sort,
|
||||
purveyorName: this.query.name,
|
||||
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.tableData.page = 0;
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user