mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-26 16:19:44 +08:00
269 lines
11 KiB
Vue
269 lines
11 KiB
Vue
<template>
|
|
<div class="padding">
|
|
<el-row :gutter="10">
|
|
<el-col :span="3">
|
|
<div class="list-group-border-radius">
|
|
<div class=" treeview">
|
|
<ul class="list-group text-center ">
|
|
<li v-for="(item, index) in states" :key="index" @click="swatchState(item)" :class="{
|
|
'vc-node-selected': conditions.state === item.state
|
|
}" class="list-group-item node-orgTree">
|
|
{{ $t(`invoiceApply.states.${item.stateName}`) }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="21">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-card>
|
|
<div slot="header" class="text-left">
|
|
<span>{{ $t('invoiceApply.searchTitle') }}</span>
|
|
</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<el-input v-model="conditions.invoiceCode" :placeholder="$t('invoiceApply.invoiceCodePlaceholder')" />
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select v-model="conditions.invoiceType" :placeholder="$t('invoiceApply.invoiceTypePlaceholder')">
|
|
<el-option label="请选择发票类型" value="" />
|
|
<el-option label="个人" value="1001" />
|
|
<el-option label="企业" value="2002" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-input v-model="conditions.ownerName" :placeholder="$t('invoiceApply.ownerNamePlaceholder')" />
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-input v-model="conditions.createUserName" :placeholder="$t('invoiceApply.applicantPlaceholder')" />
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-input v-model="conditions.applyTel" :placeholder="$t('invoiceApply.phonePlaceholder')" />
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-button type="primary" @click="_queryInvoiceApplyMethod">
|
|
<i class="el-icon-search" />
|
|
<span>{{ $t('common.search') }}</span>
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row class="margin-top">
|
|
<el-col :span="24">
|
|
<el-card>
|
|
<div slot="header" class="flex justify-between">
|
|
<span>{{ $t('invoiceApply.title') }}</span>
|
|
<el-button type="primary" size="small" class="float-right" @click="_invoiceApply">
|
|
{{ $t('invoiceApply.apply') }}
|
|
</el-button>
|
|
</div>
|
|
<el-table :data="invoiceApplys" border style="width: 100%">
|
|
<el-table-column prop="applyId" :label="$t('invoiceApply.table.id')" align="center" />
|
|
<el-table-column prop="invoiceType" :label="$t('invoiceApply.table.invoiceType')" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.invoiceType === '1001' ? $t('invoiceApply.personal') : $t('invoiceApply.company') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="ownerName" :label="$t('invoiceApply.table.ownerName')" align="center" />
|
|
<el-table-column :label="$t('invoiceApply.table.applicant')" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.createUserName }}({{ scope.row.applyTel }})
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="invoiceName" :label="$t('invoiceApply.table.invoiceName')" align="center" />
|
|
<el-table-column prop="invoiceNum" :label="$t('invoiceApply.table.taxNumber')" align="center" />
|
|
<el-table-column prop="invoiceAddress" :label="$t('invoiceApply.table.addressPhone')" align="center" />
|
|
<el-table-column prop="invoiceAmount" :label="$t('invoiceApply.table.amount')" align="center" />
|
|
<el-table-column prop="invoiceCode" :label="$t('invoiceApply.table.invoiceCode')" align="center">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.invoiceCode || $t('invoiceApply.notUploaded') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stateName" :label="$t('invoiceApply.table.status')" align="center" />
|
|
<el-table-column prop="createTime" :label="$t('invoiceApply.table.applyTime')" align="center" />
|
|
<el-table-column :label="$t('common.operation')" align="center" width="220">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="scope.row.state === 'W'" size="mini" @click="_openInvoiceAuditModel(scope.row)">
|
|
{{ $t('common.audit') }}
|
|
</el-button>
|
|
<template v-else>
|
|
<el-button v-if="hasPlugin('invoice') && scope.row.state !== 'W'" size="mini"
|
|
@click="_toOpenInvoicePlugin(scope.row)">
|
|
{{ $t('invoiceApply.openInvoice') }}
|
|
</el-button>
|
|
<div v-else>
|
|
<el-button v-if="['U', 'G', 'C'].includes(scope.row.state)" size="mini"
|
|
@click="_openUploadInvoicePhoto(scope.row)">
|
|
{{ scope.row.state === 'U' ? $t('invoiceApply.uploadInvoice') : $t('invoiceApply.reUpload') }}
|
|
</el-button>
|
|
<el-button v-if="['U', 'G', 'C'].includes(scope.row.state)" size="mini"
|
|
@click="_openUserGetInvoice(scope.row)">
|
|
{{ scope.row.state === 'G' ? $t('invoiceApply.verify') : $t('invoiceApply.register') }}
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<el-button size="mini" type="danger" @click="_openDeleteInvoiceApplyModel(scope.row)">
|
|
{{ $t('common.delete') }}
|
|
</el-button>
|
|
<el-button size="mini" @click="_openInvoiceApplyDetail(scope.row)">
|
|
{{ $t('common.detail') }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
|
|
:total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<delete-invoice-apply ref="deleteDialog" @success="listInvoiceApplys" />
|
|
<upload-invoice-photo ref="uploadPhotoDialog" @success="listInvoiceApplys" />
|
|
<wirte-invoice-event ref="writeEventDialog" @success="listInvoiceApplys" />
|
|
<audit-dialog ref="auditDialog" @success="notifyAuditInfo" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listInvoiceApply, auditInvoiceApply } from '@/api/fee/invoiceApplyApi'
|
|
import { getCommunityId } from '@/api/community/communityApi'
|
|
import DeleteInvoiceApply from '@/components/fee/deleteInvoiceApply'
|
|
import UploadInvoicePhoto from '@/components/fee/uploadInvoicePhoto'
|
|
import WirteInvoiceEvent from '@/components/fee/wirteInvoiceEvent'
|
|
import AuditDialog from '@/components/fee/audit'
|
|
import { jumpToPlugin } from '@/api/user/menuApi'
|
|
import {getUserName} from '@/api/user/userApi'
|
|
|
|
export default {
|
|
name: 'InvoiceApplyList',
|
|
components: {
|
|
DeleteInvoiceApply,
|
|
UploadInvoicePhoto,
|
|
WirteInvoiceEvent,
|
|
AuditDialog
|
|
},
|
|
data() {
|
|
return {
|
|
states: [
|
|
{ stateName: 'all', state: '' },
|
|
{ stateName: 'pendingReview', state: 'W' },
|
|
{ stateName: 'pendingUpload', state: 'U' },
|
|
{ stateName: 'reviewFailed', state: 'F' },
|
|
{ stateName: 'pendingReceive', state: 'G' },
|
|
{ stateName: 'received', state: 'C' }
|
|
],
|
|
conditions: {
|
|
invoiceCode: '',
|
|
invoiceType: '',
|
|
ownerName: '',
|
|
applyTel: '',
|
|
createUserName: '',
|
|
state: ''
|
|
},
|
|
invoiceApplys: [],
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0
|
|
},
|
|
auditData: {}
|
|
}
|
|
},
|
|
created() {
|
|
this.communityId = getCommunityId()
|
|
this.listInvoiceApplys()
|
|
},
|
|
methods: {
|
|
async listInvoiceApplys() {
|
|
try {
|
|
const params = {
|
|
...this.conditions,
|
|
page: this.page.current,
|
|
row: this.page.size,
|
|
communityId: this.communityId
|
|
}
|
|
const res = await listInvoiceApply(params)
|
|
this.invoiceApplys = res.data
|
|
this.page.total = res.total
|
|
} catch (error) {
|
|
this.$message.error(this.$t('common.fetchError'))
|
|
}
|
|
},
|
|
handleSizeChange(size) {
|
|
this.page.size = size
|
|
this.listInvoiceApplys()
|
|
},
|
|
handleCurrentChange(current) {
|
|
this.page.current = current
|
|
this.listInvoiceApplys()
|
|
},
|
|
swatchState(item) {
|
|
this.conditions.state = item.state
|
|
this.listInvoiceApplys()
|
|
},
|
|
_queryInvoiceApplyMethod() {
|
|
this.page.current = 1
|
|
this.listInvoiceApplys()
|
|
},
|
|
_invoiceApply() {
|
|
this.$router.push('/views/fee/ownerApplyInvoice')
|
|
},
|
|
_openInvoiceApplyDetail(row) {
|
|
this.$router.push(`/views/fee/invoiceApplyDetail?applyId=${row.applyId}`)
|
|
},
|
|
_openInvoiceAuditModel(row) {
|
|
this.auditData = { ...row }
|
|
this.$refs.auditDialog.open()
|
|
},
|
|
async notifyAuditInfo(auditInfo) {
|
|
try {
|
|
const params = {
|
|
...this.auditData,
|
|
state: auditInfo.state,
|
|
remark: auditInfo.remark,
|
|
communityId: this.communityId
|
|
}
|
|
await auditInvoiceApply(params)
|
|
this.$message.success(this.$t('invoiceApply.auditSuccess'))
|
|
this.listInvoiceApplys()
|
|
} catch (error) {
|
|
this.$message.error(error.message)
|
|
}
|
|
},
|
|
_openUploadInvoicePhoto(row) {
|
|
this.$refs.uploadPhotoDialog.open(row)
|
|
},
|
|
_openUserGetInvoice(row) {
|
|
this.$refs.writeEventDialog.open(row)
|
|
},
|
|
_toOpenInvoicePlugin(row) {
|
|
jumpToPlugin(`/#/pages/index/plugin?pluginType=invoice&orderNo=&orderNo=${row.applyId}&staffName=${getUserName()}&communityId=${this.communityId}`)
|
|
},
|
|
_openDeleteInvoiceApplyModel(row) {
|
|
this.$refs.deleteDialog.open(row)
|
|
},
|
|
hasPlugin(pluginName) {
|
|
// 实际项目中需要根据业务逻辑实现
|
|
console.log(pluginName)
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.border-radius {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
</style> |