596 lines
17 KiB
Vue
596 lines
17 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="condition-box">
|
|
<view class="condition-input-box">
|
|
<view class="condition-input-container">
|
|
<icon class="ml-20" type="search" size="20"></icon>
|
|
<input class="condition-input-text" :value="keywords" @input="inputKeywords"
|
|
@confirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text"
|
|
confirm-type="search" placeholder="搜索" />
|
|
<view class="icon-clear size-32 mr-10" v-if="keywords != ''" @click="clearSearch"></view>
|
|
</view>
|
|
<view class="add-btn" @click="showCreate">新增</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="margin-top: 80rpx;">
|
|
<ContainerLoading :loadingVisible="loadingState" @refresh="doRefreshList">
|
|
<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
|
|
@scrolltolower="doLoadMore">
|
|
<view class="order-box">
|
|
<block v-for="(item,index) in invoiceInfoList" :key="index">
|
|
<view class="order-item">
|
|
<view class="contact-desc">
|
|
<view class="contact-icon single-line">
|
|
<view class="icon-user-default-blue size-48"></view>
|
|
<view class="ml-10 name single-line">{{item.invoiceName}}</view>
|
|
</view>
|
|
<view class="operate-box">
|
|
<view class="icon-edit-blue size-48 mr-10" @click="showEdit" :data-value="item">
|
|
</view>
|
|
<view class="icon-del-red size-48" @click="showDel" :data-value="item"></view>
|
|
</view>
|
|
</view>
|
|
<view class="service-desc ml-10">纳税识别号:{{item.invoiceNumber}}</view>
|
|
<view v-if="item.invoiceOrgtel != ''" class="service-desc ml-10">
|
|
企业电话:{{item.invoiceOrgtel}}</view>
|
|
<view class="service-desc ml-5" v-if="item.invoiceOrgaddress != ''">
|
|
<view class="icon-location-yellow size-32"></view>
|
|
<view class="ml-10">{{item.invoiceOrgaddress}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<uni-load-more :status="hasMore"></uni-load-more>
|
|
</view>
|
|
</scroll-view>
|
|
</ContainerLoading>
|
|
</view>
|
|
<uni-popup ref="operateDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
|
|
<view class="bottom-dialog-container">
|
|
<view class="dialog-title-box">
|
|
<view class="icon-close size-48" @click="closeDialog"></view>
|
|
<view class="dialog-title-txt">{{isCreate?'新增':'编辑'}}</view>
|
|
</view>
|
|
<view class="form-box">
|
|
<view class="form-item">
|
|
<text class="form-item-title star" decode>公 司 名 称</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyName" placeholder="请输入公司名称" class="form-item-content"
|
|
@input="inputCompanyName" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-item-title star">纳税人识别号</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyTinNum" placeholder="请输入纳税人识别号" class="form-item-content"
|
|
@input="inputCompanyTinNum" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-item-title" decode>公 司 地 址</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyAddress" placeholder="请输入公司地址" class="form-item-content"
|
|
@input="inputCompanyAddress" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-item-title" decode>公 司 电 话</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyPhone" placeholder="请输入公司电话" class="form-item-content"
|
|
@input="inputCompanyPhone" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-item-title" decode>开  户  行</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyBank" placeholder="请输入开户行" class="form-item-content"
|
|
@input="inputCompanyBank" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="form-item-title" decode>开 户 行 账 号</text>
|
|
<input confirm-type="next" type="text" :adjust-position="true" :cursor-spacing="50"
|
|
:value="companyBankNum" placeholder="请输入开户行账号" class="form-item-content"
|
|
@input="inputCompanyBankNum" />
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view v-if="isCreate" class="confirm-btn" @click="doAdd">提交</view>
|
|
<view v-if="!isCreate" class="confirm-btn" @click="doEdit">保存</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ContainerLoading from '@/components/container-loading.vue'
|
|
import InvoiceApi from '../../../../common/js/net/InvoiceApi';
|
|
import {
|
|
isValidPhone
|
|
} from '@/common/js/validator.js'
|
|
import {
|
|
inject
|
|
} from 'vue';
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
setup() {
|
|
const globalData = inject('globalData')
|
|
return {
|
|
globalData
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
imgAssets: this.globalData.imgAssetsUrl,
|
|
localAssets: this.globalData.localAssets,
|
|
keywords: '',
|
|
pageData: {
|
|
page: 1,
|
|
rows: 10,
|
|
keywords: ''
|
|
},
|
|
msgHint: '',
|
|
msgType: 'error',
|
|
loadingState: 'loading',
|
|
listRefreshTrig: false,
|
|
isLoadMore: false,
|
|
hasMore: 'more',
|
|
createDialog: false,
|
|
title: '开票信息',
|
|
isCreate: true, //区别是创建 or 编辑
|
|
companyName: '', //公司名称
|
|
companyAddress: '', //公司地址
|
|
companyPhone: '', //公司电话
|
|
companyBank: '', //公司开户行
|
|
companyBankNum: '', //开户行账号
|
|
companyTinNum: '', //纳税人识别号
|
|
btnTxt: '提交',
|
|
invoiceInfoList: [], //开票信息列表
|
|
tempItem: null,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: "发票抬头",
|
|
});
|
|
uni.setNavigationBarColor({
|
|
frontColor: "#000000",
|
|
backgroundColor: "#F0F0F0",
|
|
animation: {
|
|
duration: 500,
|
|
timingFunc: "easeIn",
|
|
},
|
|
});
|
|
this.doRefreshList()
|
|
},
|
|
methods: {
|
|
closeDialog() {
|
|
this.companyName = ''
|
|
this.companyAddress = ''
|
|
this.companyPhone = ''
|
|
this.companyBank = ''
|
|
this.companyBankNum = ''
|
|
this.companyTinNum = ''
|
|
this.tempItem = null
|
|
this.$refs.operateDialog.close()
|
|
},
|
|
showEdit(e) {
|
|
this.tempItem = e.currentTarget.dataset.value
|
|
this.isCreate = false
|
|
this.companyName = this.tempItem.invoiceName
|
|
this.companyAddress = this.tempItem.invoiceOrgaddress
|
|
this.companyPhone = this.tempItem.invoiceOrgtel
|
|
this.companyBank = this.tempItem.invoiceBank
|
|
this.companyBankNum = this.tempItem.invoiceBanknumber
|
|
this.companyTinNum = this.tempItem.invoiceNumber
|
|
this.$refs.operateDialog.open()
|
|
},
|
|
showDel(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
const _self = this
|
|
uni.showModal({
|
|
title: '警告',
|
|
content: '您确定要删除该开票信息吗?',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
_self.doDel(item)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
showCreate() {
|
|
this.companyName = ''
|
|
this.companyAddress = ''
|
|
this.companyPhone = ''
|
|
this.companyBank = ''
|
|
this.companyBankNum = ''
|
|
this.companyTinNum = ''
|
|
this.tempItem = null
|
|
this.isCreate = true
|
|
this.$refs.operateDialog.open()
|
|
},
|
|
inputCompanyName(e) {
|
|
this.companyName = e.detail.value
|
|
},
|
|
inputCompanyAddress(e) {
|
|
this.companyAddress = e.detail.value
|
|
},
|
|
inputCompanyPhone(e) {
|
|
this.companyPhone = e.detail.value
|
|
},
|
|
inputCompanyBank(e) {
|
|
this.companyBank = e.detail.value
|
|
},
|
|
inputCompanyBankNum(e) {
|
|
this.companyBankNum = e.detail.value
|
|
},
|
|
inputCompanyTinNum(e) {
|
|
this.companyTinNum = e.detail.value
|
|
},
|
|
inputKeywords(e) {
|
|
this.keywords = e.detail.value
|
|
},
|
|
doSearchKeyWord() {
|
|
this.doRefreshList()
|
|
},
|
|
clearSearch() {
|
|
this.keywords = ''
|
|
this.doRefreshList()
|
|
},
|
|
doRefreshList() {
|
|
console.log('正在刷新...')
|
|
const _self = this
|
|
_self.loadingState = 'loading'
|
|
_self.hasMore = 'more'
|
|
_self.pageData.page = 1
|
|
_self.pageData.keywords = _self.keywords
|
|
_self.isLoadMore = false
|
|
_self.doGetInvoiceInfoList(true)
|
|
},
|
|
doLoadMore() {
|
|
//判断是否正在加载中 与是否存在更多数据
|
|
const _self = this
|
|
if (_self.data.isLoadMore || _self.hasMore == 'noMore') {
|
|
return
|
|
}
|
|
_self.isLoadMore = true
|
|
_self.hasMore= 'loading'
|
|
_self.pageData.page = ++_self.pageData.page
|
|
_self.pageData.keywords = _self.keywords
|
|
_self.doGetInvoiceInfoList(false)
|
|
},
|
|
doGetInvoiceInfoList(isRefresh) {
|
|
const _self = this
|
|
_self.invoiceInfoList = isRefresh ? [] : _self.invoiceInfoList
|
|
_self.loadingState = isRefresh ? 'loading' : ''
|
|
InvoiceApi.doGetMineInvoiceList(_self.pageData)
|
|
.then(res => {
|
|
console.log(res)
|
|
var status = 'success'
|
|
status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
_self.loadingState = isRefresh ? status : ''
|
|
_self.invoiceInfoList = _self.invoiceInfoList.concat(res.rows)
|
|
_self.isLoadMore = false
|
|
_self.hasMore = _self.invoiceInfoList.length < res.total ? 'more' : 'noMore'
|
|
})
|
|
.catch(err => {
|
|
_self.loadingState = 'error'
|
|
_self.isLoadMore = false
|
|
_self.hasMore = 'more'
|
|
})
|
|
},
|
|
//新增提交
|
|
doAdd() {
|
|
const isLegal = this.checkParams()
|
|
if (isLegal) {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
})
|
|
const data = _self.buildParams()
|
|
InvoiceApi.doSaveMineInvoiceInfo(data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
_self.$refs.operateDialog.close()
|
|
_self.msgType = 'success'
|
|
_self.msgHint = '新增开票信息成功'
|
|
_self.$refs.msg.open()
|
|
_self.companyAddress = ''
|
|
_self.companyBank = ''
|
|
_self.companyBankNum = ''
|
|
_self.companyName = ''
|
|
_self.companyPhone = ''
|
|
_self.companyTinNum = ''
|
|
_self.isCreate = true
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgHint = err.msg ? err.msg : '新增开票信息失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
//编辑提交
|
|
doEdit() {
|
|
const isLegal = this.checkParams()
|
|
if (isLegal) {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '修改中...',
|
|
})
|
|
const data = _self.buildParams()
|
|
InvoiceApi.doUpdateMineInvoiceInfo(_self.tempItem.invoiceId, data)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
_self.$refs.operateDialog.close()
|
|
_self.msgType = 'success'
|
|
_self.msgHint = '修改开票信息成功'
|
|
_self.$refs.msg.open()
|
|
_self.companyAddress = ''
|
|
_self.companyBank = ''
|
|
_self.companyBankNum = ''
|
|
_self.companyName = ''
|
|
_self.companyPhone = ''
|
|
_self.companyTinNum = ''
|
|
_self.tempItem = null
|
|
_self.isCreate = true
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgType = 'error'
|
|
_self.msgHint = err.msg ? err.msg : '修改开票信息失败,请稍后重试'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
//删除
|
|
doDel(item) {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '删除中...',
|
|
})
|
|
InvoiceApi.doDelMineInvoiceInfo(item.invoiceId)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
_self.msgHint = '删除成功'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgHint = err.msg ? err.msg : '删除失败,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
})
|
|
},
|
|
buildParams() {
|
|
const _self = this
|
|
const data = {
|
|
invoiceType: "企业",
|
|
invoiceName: _self.companyName,
|
|
invoiceNumber: _self.companyTinNum,
|
|
invoiceOrgaddress: _self.companyAddress,
|
|
invoiceOrgtel: _self.companyPhone,
|
|
invoiceBank: _self.companyBank,
|
|
invoiceBanknumber: _self.companyBankNum,
|
|
}
|
|
return data
|
|
},
|
|
checkParams() {
|
|
if (this.companyName == '') {
|
|
this.msgHint = '请输入公司名称'
|
|
this.msgType = 'error'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
if (this.companyTinNum == '') {
|
|
this.msgHint = '请输入纳税人识别号'
|
|
this.msgType = 'error'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
if (this.companyPhone != '') {
|
|
if (!isValidPhone(this.companyPhone)) {
|
|
this.msgHint = '请输入正确公司电话'
|
|
this.msgType = 'error'
|
|
this.$refs.msg.open()
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
},
|
|
onPullDownRefresh() {
|
|
this.doRefreshList()
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.condition-content-container {
|
|
background-color: $divider-color;
|
|
padding: 0rpx 30rpx;
|
|
height: 350rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.add-btn {
|
|
border-radius: 8rpx;
|
|
background-color: $btn-green-color;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
height: 50rpx;
|
|
margin-left: 20rpx;
|
|
line-height: 50rpx;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5rpx 10rpx;
|
|
}
|
|
|
|
.add-btn:active {
|
|
background-color: $btn-green-color-active;
|
|
}
|
|
|
|
.order-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.order-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $white-color;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.order-item:nth-of-type(n+2) {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.contact-desc {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 15px;
|
|
}
|
|
|
|
.contact-icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.operate-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.name {
|
|
line-height: 32rpx;
|
|
flex: 1;
|
|
color: $text-color;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
font-family: SourceHanSansSC-black;
|
|
// display: -webkit-box;
|
|
// -webkit-box-orient: vertical;
|
|
// -webkit-line-clamp: 1;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
}
|
|
|
|
.service-desc {
|
|
padding: 5rpx 15rpx 15rpx 30rpx;
|
|
line-height: 26rpx;
|
|
color: $text-gray-desc-color;
|
|
font-size: 26rpx;
|
|
text-align: left;
|
|
font-family: SourceHanSansSC-regular;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.edit {
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
background-color: $btn-blue-color;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5rpx 15rpx;
|
|
}
|
|
|
|
.edit:active {
|
|
background-color: $btn-blue-color-active;
|
|
}
|
|
|
|
.del {
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
background-color: $btn-red-color;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC-regular;
|
|
padding: 5rpx 15rpx;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.del:active {
|
|
background-color: $btn-red-color-active;
|
|
}
|
|
|
|
.options-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 170rpx;
|
|
}
|
|
|
|
|
|
.form-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 10rpx 0rpx;
|
|
}
|
|
|
|
.form-item-title {
|
|
flex: .5;
|
|
font-size: 28rpx;
|
|
color: $text-color;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.form-item-content {
|
|
flex: 1;
|
|
text-align: right;
|
|
background-color: $bg-gray-input-color;
|
|
padding: 15rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 15rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: $btn-green-color;
|
|
color: $white-color;
|
|
font-size: 28rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
border-radius: 5px;
|
|
width: 100% !important;
|
|
padding: 0rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.confirm-btn:active {
|
|
background-color: $btn-green-color-active;
|
|
color: $white-color;
|
|
}
|
|
</style> |