9 changed files with 755 additions and 1633 deletions
@ -1,165 +1,154 @@ |
|||
<template> |
|||
<div> |
|||
<el-upload class="upload-demo" :data="datas" :accept="accept" :on-success="uploadImgSuccess" |
|||
:on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian" |
|||
:http-request="uploadSectionFile"> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型：{{ accept }}</div> |
|||
<el-upload class="upload-demo" :headers="accessToken" :action="uploadFile" :accept="accept" :data="uploadData" |
|||
:on-success="uploadImgSuccess_FuJian" :on-remove="handleRemove" :file-list="fileList_FuJian" |
|||
:on-preview="handlePictureCardPreview" :show-file-list="false"> |
|||
<el-button size="mini" type="primary">上传</el-button> |
|||
</el-upload> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
uploadFile |
|||
} from '@/api/business/beiAn' |
|||
import { |
|||
mapGetters |
|||
} from 'vuex' |
|||
export default { |
|||
props: { |
|||
placeholder: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
// 长度 |
|||
width: { |
|||
type: String, |
|||
default: '270px', |
|||
}, |
|||
accept: { |
|||
type: String, |
|||
default: '.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx', |
|||
}, |
|||
// 文件列表 |
|||
files: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
// 文件名称 |
|||
name: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
import { uploadFile } from '@/api/Common/Upload.js' |
|||
import { getStorage } from '@/utils/auth.js' |
|||
|
|||
export default { |
|||
model: { |
|||
prop: 'name', |
|||
event: 'change' |
|||
}, |
|||
props: { |
|||
placeholder: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
data() { |
|||
return { |
|||
datas: null, |
|||
name:null, |
|||
accessToken: {}, |
|||
fileList_FuJian: [], |
|||
enclosure: '', |
|||
file_add: '', |
|||
idsz: '', |
|||
file_catch: '', |
|||
files_list: [], |
|||
} |
|||
bucket: { |
|||
type: String, |
|||
default: 'abc' |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'id', |
|||
'departmentCode', |
|||
'departmentLevel', |
|||
'departmentType', |
|||
'token', |
|||
]), |
|||
// 长度 |
|||
width: { |
|||
type: String, |
|||
default: '270px' |
|||
}, |
|||
watch: { |
|||
files: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.pageLoad(val, '') |
|||
}, |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
creatd() { |
|||
accept: { |
|||
type: String, |
|||
default: |
|||
'.jpg,.jpeg,.png,.JPG,.JPEG,' |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
// this.Init() |
|||
}) |
|||
// 文件名称 |
|||
name: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
methods: { |
|||
// 页面第一次加载 |
|||
Init() { |
|||
// 1. 文件上传用token |
|||
// this.accessToken = { |
|||
// token: this.token, |
|||
// } |
|||
this.pageLoad(this.files) |
|||
}, |
|||
handleChange(file, fileList) {}, |
|||
// 传入数据并绑定 |
|||
pageLoad(files) { |
|||
// console.log('传入：' + files) |
|||
if (files !== null && files !== '') { |
|||
this.files_list = JSON.parse(files) |
|||
var ids = '' |
|||
this.fileList_FuJian = [] |
|||
// 1. 回显页面 |
|||
for (var i = 0; i < this.files_list.length; i++) { |
|||
var body = { |
|||
name: this.files_list[i].name, |
|||
url: '', |
|||
status: 'finished', |
|||
} |
|||
this.fileList_FuJian.push(body) |
|||
ids = ids + this.files_list[i].id + ',' |
|||
} |
|||
// 2. 回存文件id |
|||
if (ids !== '') { |
|||
ids = ids.substring(0, ids.length - 1) |
|||
} |
|||
this.enclosure = ids |
|||
this.file_catch = ids |
|||
} else { |
|||
this.file_add = '' |
|||
this.file_catch = '' |
|||
this.enclosure = '' |
|||
this.files_list = [] |
|||
this.fileList_FuJian = [] |
|||
} |
|||
}, |
|||
// 上传方案--成功后执行 |
|||
uploadImgSuccess(response, file, fileList) { |
|||
this.$emit('change', this.enclosure) |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
if (this.idsz != '') { |
|||
this.$emit('handleRemove', this.idsz) |
|||
} |
|||
}, |
|||
// 上传文件 FrontPhoto |
|||
uploadSectionFile(params) { |
|||
const file = params.file |
|||
// 根据后台需求数据格式 |
|||
const form = new FormData() |
|||
// console.log('77777777777777',form) |
|||
// 文件对象 |
|||
form.append('file', file) |
|||
// 项目封装的请求方法，下面做简单介绍 |
|||
uploadFile(form).then((res) => { |
|||
// 自行处理各种情况 |
|||
if (res.code === '200') { |
|||
let a = '' |
|||
a = res.data.filePath |
|||
this.idsz = a |
|||
this.$emit('handleSuccess', res) |
|||
} |
|||
if (res.msg == '操作成功') { |
|||
this.$message({ |
|||
message: '上传成功！', |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err) |
|||
// 如果等于备案,就调备案图片上传接口 |
|||
uploadData: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
accessToken: null, |
|||
uploadFile: uploadFile, |
|||
fileList_FuJian: [], |
|||
enclosure: '', |
|||
file_add: '', |
|||
file_catch: '', |
|||
files: [], |
|||
files_list: [], |
|||
filedUrl: '', |
|||
loadding: false, |
|||
sid: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
name: { |
|||
deep: true, |
|||
immediate: true, |
|||
handler(newVal, oldVal) { |
|||
console.log('aaaa1', newVal) |
|||
this.files = newVal |
|||
console.log('aaaa2', this.files) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.Init() |
|||
}) |
|||
}, |
|||
created() { |
|||
this.uploadFile = uploadFile // 接口 |
|||
this.accessToken = { |
|||
token: getStorage() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 页面第一次加载 |
|||
Init() { |
|||
if (this.name !== undefined) { |
|||
this.files = [] |
|||
for (var i = 0; i < this.name.length; i++) { |
|||
this.files.push({ |
|||
name: this.name[i], |
|||
url: this.name[i] |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
}, |
|||
// 上传方案--成功后执行 |
|||
uploadImgSuccess_FuJian(response, file, fileList) { |
|||
let _this = this |
|||
console.log('您选择的file:', file) |
|||
if (file.response.code === '200') { |
|||
this.loadding = false |
|||
// 返显图片 |
|||
this.filedUrl = this.fileUrl + file.response.data |
|||
this.files.push({ |
|||
name: file.response.data.sourceFileName, |
|||
url: file.response.data.fullUrl, |
|||
size: file.response.data.size |
|||
}) |
|||
this.$emit('change', this.files) |
|||
this.$emit('eett', this.files) |
|||
} |
|||
}, |
|||
removeImage(file, ImageFileList) { |
|||
this.files.splice(this.files.indexOf(file), 1) |
|||
const imgFiles = [] |
|||
this.files.forEach((o) => { |
|||
imgFiles.push(o.url) |
|||
}) |
|||
this.$emit('fileChange', this.files) |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log('file:' + JSON.stringify(file)) |
|||
console.log('fileList:' + JSON.stringify(fileList)) |
|||
this.enclosure = '' |
|||
// 4. 返回拼接id |
|||
this.$emit('change', this.enclosure) |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
this.dialogImageUrl = file.url |
|||
}, |
|||
// 上传失败 |
|||
uploadError() { |
|||
this.loadding = false |
|||
}, |
|||
uploadProgrees(event, file, fileList) { |
|||
if (Number(event.percent) > 0) { |
|||
this.loadding = true |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style scoped></style> |
|||
|
|||
|
|||
@ -0,0 +1,355 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!-- Start 列表页面 --> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar view-title="开票管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header"> |
|||
<el-form-item label="开票单位"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="开票类型"> |
|||
<el-select v-model="listQuery.params.state" placeholder="请选择" clearable style="width: 150px"> |
|||
<el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="合同编号"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="车架号"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="发票状态"> |
|||
<el-select v-model="listQuery.params.applyTypeKey" placeholder="请选择" clearable style="width: 150px"> |
|||
<el-option v-for="item in applyType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="移交状态"> |
|||
<el-select v-model="listQuery.params.paymentState" placeholder="请选择" clearable style="width: 150px"> |
|||
<el-option v-for="item in paymentState_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="开票名称"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="发票代码"> |
|||
<el-input v-model="listQuery.params.proSchAppNo" placeholder="" clearable style="width: 150px"/> |
|||
</el-form-item> |
|||
<el-form-item label="开票日期"> |
|||
<el-date-picker v-model="listQuery.params.subscriptionStartDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 150px"/> |
|||
<span style="padding: 0 8px">至</span> |
|||
<el-date-picker v-model="listQuery.params.subscriptionEndDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 150px"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" icon="el-icon-search" @click="handleFilter" size="small">查询</el-button> |
|||
<el-button type="primary" icon="el-icon-refresh" @click="handleReset" size="small">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="listtop"> |
|||
<div class="tit">发票列表</div> |
|||
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<div class=""> |
|||
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;"> |
|||
<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center"/> |
|||
<el-table-column fixed label="操作" width="180" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="success" size="mini" v-show="scope.row.isShowAdopt == 1" @click="toEdit(scope.row)">编辑</el-button> |
|||
<el-button type="success" size="mini" @click="toInfo(scope.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="发票状态" width="100px" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.state }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="交接状态" width="100px" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.state }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票单位" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.proSchAppNo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票类型" align="center" width="200px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.applyType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="合同编号" header-align="center" align="left" width="150px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.paymentMoney }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="客户名称" align="center" width="100px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.paymentState }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="车架号" align="center" width="100px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionDate }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票名称" align="center" width="120px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionPeo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票金额" align="center" width="120px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionPeo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票日期" align="center" width="120px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionPeo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="发票代码" align="center" width="120px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionPeo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="发票号" align="center" min-width="120px"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.subscriptionPeo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="发票图片" align="center" width="180px" class-name="small-padding"> |
|||
<template slot-scope="scope"> |
|||
<el-button size="mini" v-show="scope.row.witMatUrl !== ''" type="primary" @click="handleGetCheck(scope.row)">查看</el-button> |
|||
<div class="upload_img" v-show="scope.row.isShowAdopt == 1"> |
|||
<FileUpload ref="uploadMoreImg" v-model="imgList" bucket="map" @eett="getList" :upload-data="{type:'0001',sid: scope.row.sid}"></FileUpload> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="pages"> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- End 列表页面 --> |
|||
<billingmanagementAdd v-show="viewState == 2" ref="divAdd" @doback="reseaState" @readlist="getList"/> |
|||
<billingmanagementInfo v-show="viewState == 3" ref="divInfo" @doback="reseaState"/> |
|||
<!-- 照片弹窗 --> |
|||
<el-dialog :append-to-body="true" :visible.sync="dialogImgVisible"> |
|||
<img width="100%" :src="dialogImageUrl" alt="" /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listPage } from '@/api/anruifinmanagement/fininvoiceapply' |
|||
import { getOrgSidByPath, typeValues } from '@/api/jichuxinxi/dictcommons' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import upload from '@/components/uploadFile/FileUpload' |
|||
import billingmanagementAdd from './billingmanagementAdd' |
|||
import billingmanagementInfo from './billingmanagementInfo' |
|||
|
|||
export default { |
|||
name: 'KaiPiaoGuanLi', |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
FileUpload, |
|||
ButtonBar, |
|||
billingmanagementAdd, |
|||
billingmanagementInfo |
|||
}, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, |
|||
btnList: [ |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
dialogImgVisible: false, |
|||
dialogFileVisible: false, |
|||
// 查询条件 ----------- |
|||
tableKey: 0, |
|||
list: [], |
|||
srcList: [], |
|||
state_list: [ |
|||
{ |
|||
dictKey: 0, |
|||
dictValue: '未认款' |
|||
}, |
|||
{ |
|||
dictKey: 1, |
|||
dictValue: '已认款' |
|||
} |
|||
], |
|||
paymentState_list: [ |
|||
{ |
|||
dictKey: 0, |
|||
dictValue: '未打款' |
|||
}, |
|||
{ |
|||
dictKey: 1, |
|||
dictValue: '已打款' |
|||
}, |
|||
{ |
|||
dictKey: 2, |
|||
dictValue: '无需打款' |
|||
} |
|||
], |
|||
applyType_list: [], |
|||
FormLoading: false, |
|||
listLoading: false, |
|||
listQuery: { |
|||
params: { |
|||
state: 0, |
|||
paymentState: '', |
|||
subscriptionStartDate: '', |
|||
subscriptionEndDate: '', |
|||
proSchAppNo: '', |
|||
applyTypeKey: '', |
|||
createOrgSid: '' |
|||
}, |
|||
current: 1, |
|||
size: 10, |
|||
total: 0 |
|||
}, |
|||
dialogImageUrl: '', |
|||
imgList: [], |
|||
rules: {} |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init() |
|||
// this.getList() |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
btnHandle(btnKey) { |
|||
console.log('XXXXXXXXXXXXXXX ' + btnKey) |
|||
switch (btnKey) { |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
init() { |
|||
typeValues({ type: 'applyType' }).then((resp) => { |
|||
if (resp.success) { |
|||
this.applyType_list = resp.data |
|||
} |
|||
}) |
|||
getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => { |
|||
if (res.success) { |
|||
this.listQuery.params.createOrgSid = res.data |
|||
this.getList() |
|||
console.log(this.listQuery.params.createOrgSid) |
|||
} |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
// 查询列表信息 |
|||
getList() { |
|||
// this.listLoading = true |
|||
// listPage(this.listQuery).then((response) => { |
|||
// console.log('列表查询结果：', response) |
|||
// this.listLoading = false |
|||
// if (response.success) { |
|||
// this.list = response.data.records |
|||
// this.listQuery.total = response.data.total |
|||
// } else { |
|||
// this.list = [] |
|||
// this.listQuery.total = 0 |
|||
// } |
|||
// }) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1 |
|||
this.getList() |
|||
}, |
|||
handleReset() { |
|||
this.listQuery = { |
|||
params: { |
|||
state: 0, |
|||
paymentState: '', |
|||
subscriptionStartDate: '', |
|||
subscriptionEndDate: '', |
|||
proSchAppNo: '', |
|||
applyTypeKey: '', |
|||
createOrgSid: '' |
|||
}, |
|||
current: 1, |
|||
size: 10, |
|||
total: 0 |
|||
} |
|||
this.init() |
|||
}, |
|||
toEdit(row) { |
|||
this.viewState = 2 |
|||
this.$refs['divAdd'].showEdit(row) |
|||
}, |
|||
toInfo(row) { |
|||
this.viewState = 3 |
|||
this.$refs['divInfo'].showInfo(row) |
|||
}, |
|||
handleGetCheck(row) { |
|||
this.dialogImgVisible = true |
|||
this.dialogImageUrl = row.witMatUrl |
|||
}, |
|||
reseaState() { |
|||
this.viewState = 1 |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.upload_img { |
|||
display: inline-block; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>{{ viewTitle }}</div> |
|||
<!--start 添加修改按钮--> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存 |
|||
</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="listconadd"> |
|||
<div class="titwu">发票信息</div> |
|||
<el-form ref="form_obj" v-model="formobj" :rules="rules" class="formaddcopy02"> |
|||
<el-row style="border-top: 1px solid #E0E3EB"> |
|||
<el-col :span="24"> |
|||
<div class="span-sty">开票单位</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">合同编号</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">客户名称</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">车架号</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票类型</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票金额</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票状态</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="span-sty">开票名称</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">开票人</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">开票日期</div> |
|||
<el-form-item><el-date-picker v-model="formobj.name" class="addinputw" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期"/></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">发票号</div> |
|||
<el-form-item><el-input v-model="formobj.name" clearable class="addinputw" /></el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">发票代码</div> |
|||
<el-form-item><el-input v-model="formobj.name" clearable class="addinputw" /></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center">发票照片</div> |
|||
<el-form-item> |
|||
<upload ref="uploadImg" v-model="diploma_list" :accept="accept" class="addinputw" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listPage } from '@/api/anruifinmanagement/fininvoiceapply' |
|||
import upload from '@/components/uploadFile/upload' |
|||
|
|||
export default { |
|||
name: '', |
|||
components: { |
|||
upload |
|||
}, |
|||
data() { |
|||
return { |
|||
viewTitle: '', |
|||
submitdisabled: false, |
|||
diploma_list: [], |
|||
accept: '.jpg,.jpeg,.png,.JPG,.JPEG', |
|||
formobj: {}, |
|||
rules: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
showEdit(row) { |
|||
this.viewTitle = '【编辑】发票信息' |
|||
}, |
|||
handleSave() {}, |
|||
handleReturn() { |
|||
this.$emit('doback') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.span-sty { |
|||
width: 100px !important; |
|||
} |
|||
.addinputInfo { |
|||
margin-left: 90px !important; |
|||
} |
|||
.addinputw { |
|||
margin-left: 90px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>{{ viewTitle }}</div> |
|||
<!--start 添加修改按钮--> |
|||
<div> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="listconadd"> |
|||
<div class="titwu">发票信息</div> |
|||
<el-form ref="form_obj" v-model="formobj" :rules="rules" class="formaddcopy02"> |
|||
<el-row style="border-top: 1px solid #E0E3EB"> |
|||
<el-col :span="24"> |
|||
<div class="span-sty">开票单位</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">合同编号</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">客户名称</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">车架号</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票类型</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票金额</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="span-sty">开票状态</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="span-sty">开票名称</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">开票人</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">开票日期</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">发票号</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="span-sty">发票代码</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div class="span-sty">发票照片</div> |
|||
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listPage } from '@/api/anruifinmanagement/fininvoiceapply' |
|||
|
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
viewTitle: '', |
|||
formobj: {}, |
|||
rules: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
showInfo(row) { |
|||
this.viewTitle = '发票信息' |
|||
}, |
|||
handleReturn() { |
|||
this.$emit('doback') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.span-sty { |
|||
width: 100px !important; |
|||
} |
|||
.addinputInfo { |
|||
margin-left: 90px !important; |
|||
} |
|||
</style> |
|||
@ -1,514 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 5"> |
|||
<!--标题按钮部分开始--> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>公司开票申请列表</div> |
|||
<!--start 查询列表按钮部分开始--> |
|||
<div> |
|||
<el-button type="primary" size="small" @click="handleCreate()">提前开票</el-button> |
|||
<!-- <el-button type="primary" size="small" @click="handleUpdate()">编辑</el-button>--> |
|||
<el-button type="primary" size="small" @click="handleSubmit()">提交</el-button> |
|||
<el-button type="danger" size="small" @click="handleDelete()">删除</el-button> |
|||
<!-- <el-button type="success" size="small" @click="handleDaoRu()">导入</el-button>--> |
|||
<!-- <el-button type="success" size="small" @click="handleDaoChu()">导出</el-button>--> |
|||
</div> |
|||
<!--end 查询列表按钮部分结束--> |
|||
</div> |
|||
<!--按钮部分结束--> |
|||
<div class="switch_btn"> |
|||
<el-button class="" @click="handleWaitList">待开票车辆列表</el-button> |
|||
<el-button :class="{btn_style:viewState === 5}">开票申请列表</el-button> |
|||
</div> |
|||
<!--Start查询列表部分--> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header"> |
|||
<el-form-item label="合同编号"> |
|||
<el-input v-model="listQuery.params.contractNo" placeholder="请输入合同编号" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-select v-model="listQuery.params.customerName" class="addinputw" clearable filterable |
|||
placeholder="请选择" @change="customerChange"> |
|||
<el-option v-for="item in customerList" :key="item.sid" :label="item.customerName" |
|||
:value="item.customerName"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="开票类型"> |
|||
<el-form-item prop="invoiceType"> |
|||
<el-select @change="getinvoicingNature" placeholder="请选择" |
|||
v-model="listQuery.params.invoiceType"> |
|||
<el-option :key="index.dictKey" :label="item.dictValue" :value="item.dictKey" |
|||
v-for="(item,index) in typeList"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form-item> |
|||
<el-form-item label="申请人"> |
|||
<el-input v-model="listQuery.params.applicant" placeholder="请输入申请人姓名" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<el-form-item label="申请日期"> |
|||
<div class="block"> |
|||
<el-date-picker |
|||
v-model="listQuery.params.startDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</div> |
|||
<label>至</label> |
|||
<div class="block"> |
|||
<el-date-picker |
|||
v-model="listQuery.params.endDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</div> |
|||
</el-form-item> |
|||
<el-divider></el-divider> |
|||
<div class="btn"> |
|||
<el-button type="primary" @click="handleFilter">查询</el-button> |
|||
<el-button type="primary" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<!--End查询列表部分--> |
|||
|
|||
<div class="listtop"> |
|||
<div class="tit">公司开票申请列表</div> |
|||
<pageye v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<!--Start 主页面主要部分 --> |
|||
<div class="listcon"> |
|||
<el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" fit highlight-current-row |
|||
style="width: 100%;" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" align="center" width="50"/> |
|||
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/> |
|||
<el-table-column width="150px" label="操作" align="center"> |
|||
<template slot-scope="scope"> |
|||
<div class="searchbtns"> <!--:disabled="scope.row.nodeState == ''?false:true"--> |
|||
<el-button size="small" type="primary" |
|||
@click="changeNodeState(scope.row)">办理 |
|||
</el-button> |
|||
<el-button size="small" type="primary" @click="handleCheck(scope.row)">查看</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.invoiceType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="jc" label="合同编号" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span class="bluezi" @click="handleCheck(scope.row)">{{ scope.row.billNo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="客户名称" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.customerName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="数量" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.vehicleQuantity }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票总金额" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.invoiceMoney }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="开票状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.isOwedMoney }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="申请人" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.createByName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="申请日期" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.createTime }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!--End 主页面主要部分--> |
|||
<div class="pages"> |
|||
<div class="tit"/> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<!--End查询列表部分--> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex' |
|||
import { |
|||
listPage, |
|||
typeValues, |
|||
customerName |
|||
} from '@/api/anruifinmanagement/fininvoiceapply' |
|||
import {setuser, getuser} from '@/utils/baocun' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
|
|||
export default { |
|||
name: "fininvoiceapply", |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewTitle: '', |
|||
//主页面：隐藏查询条件按钮 |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
viewState: 5, // 1、列表 2、新增 3、编辑 4、查看 |
|||
//查询 ----------- |
|||
tableKey: 0, |
|||
customerList: [], |
|||
list: [], |
|||
sids: [],// 用于导出的时候保存已选择的SIDs |
|||
sides: '', |
|||
total: 1, |
|||
FormLoading: false, |
|||
listLoading: false, |
|||
departmentSid: window.sessionStorage.getItem('departmentSid'), //部门sid |
|||
departmentName: window.sessionStorage.getItem('departmentName'), //部门名称 |
|||
typeList: [], //选择器 |
|||
//翻页 |
|||
listQuery: { |
|||
current: 1, |
|||
size: 20, |
|||
params: { |
|||
applicant: '', |
|||
contractNo: '', |
|||
customerName: '', |
|||
endDate: '', |
|||
invoiceState: '', |
|||
startDate: '' |
|||
}, |
|||
}, |
|||
temp: {}, // 添加和修改 |
|||
templook: {}, // 查看实体 |
|||
textMap: { |
|||
update: '编辑', |
|||
create: '创建' |
|||
}, |
|||
dialogStatus: '', |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['id', 'roles', 'rolesIds', 'departmentId', 'departmentCode']), |
|||
}, |
|||
|
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
}, |
|||
methods: { |
|||
handleWaitList() { |
|||
this.$parent.viewState = 1 |
|||
}, |
|||
|
|||
//修改、编辑、详情返回列表页面 |
|||
resetViewState() { |
|||
this.viewState = 5; |
|||
}, |
|||
|
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
init() { |
|||
this.getList() |
|||
this.getCustomer() |
|||
this.setaDter(); |
|||
}, |
|||
|
|||
//信息条数 获取点击时当前的sid |
|||
handleSelectionChange(row) { |
|||
console.log('开票', row) |
|||
const aa = []; |
|||
row.forEach(element => { |
|||
aa.push(element.sid); |
|||
setuser(this.sids) //用于导出的时候保存已选择的sids |
|||
}); |
|||
this.sids = aa; |
|||
this.sides = this.sids.join(); //将sid数组的元素转化成字符串 |
|||
console.log('sids数组', this.sids) |
|||
console.log('sides字符串', this.sides) |
|||
}, |
|||
|
|||
// 表中序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex |
|||
}, |
|||
|
|||
// 客户下拉框 |
|||
getCustomer() { |
|||
customerName().then((response) => { |
|||
if (response.code === '200') { |
|||
this.customerList = response.data |
|||
console.log('客户列表', this.customerList) |
|||
} |
|||
}) |
|||
}, |
|||
// 客户名称 |
|||
customerChange(value) { |
|||
console.log('触发下拉框按钮', value); |
|||
let bb = {}; |
|||
this.customerList.forEach((e) => { |
|||
if (e.customerName == value) { |
|||
bb = { |
|||
name: e.customerName, |
|||
sid: e.sid |
|||
} |
|||
} |
|||
}); |
|||
this.listQuery.params.customerName = bb.name; |
|||
console.log('开票性质的值', this.listQuery.params.customerName); |
|||
}, |
|||
|
|||
// 开票性质option选择框 |
|||
setaDter() { |
|||
typeValues({ |
|||
type: 'invoiceType' |
|||
}).then((res) => { |
|||
if (res.code === '200') { |
|||
this.typeList = res.data; |
|||
console.log('下拉框请求', this.typeList) |
|||
} |
|||
}) |
|||
}, |
|||
//dictKey: "01"; dictType: "invoicingNature" |
|||
getinvoicingNature(value) { |
|||
console.log('触发下拉框按钮'); |
|||
let bb = {}; |
|||
this.typeList.forEach((e) => { |
|||
if (e.dictKey == value) { |
|||
bb = { |
|||
type: e.dictType, |
|||
name: e.dictValue, |
|||
key: e.dictKey |
|||
} |
|||
} |
|||
}); |
|||
this.listQuery.invoiceType = bb.name; |
|||
console.log('开票性质的值', this.listQuery.invoiceType); |
|||
}, |
|||
|
|||
// 查询列表信息 |
|||
getList() { |
|||
this.listLoading = true; |
|||
listPage(this.listQuery).then(response => { //拦截器 |
|||
this.listLoading = false; |
|||
console.log(response) |
|||
if (response.code === '200' && response.data && response.data.total > 0) { |
|||
this.list = response.data.records; |
|||
this.total = response.data.total; |
|||
} else { |
|||
this.list = []; |
|||
this.total = 0 |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 根据本行sid删除数据 |
|||
handleDelete() { |
|||
if (this.sids.length === 0) { |
|||
this.$message({showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作'}); |
|||
return |
|||
} |
|||
console.log('这里是获取删除按钮里的sids数组', this.sids); |
|||
deleteBySids(this.sids).then(response => { |
|||
console.log('删除数返回的结果', response); |
|||
if (response.code === '200') { |
|||
this.$notify({ |
|||
title: '提示', |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2000 |
|||
}); |
|||
this.getList() |
|||
} else { |
|||
this.$notify({ |
|||
title: '删除失败', |
|||
message: response.msg, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1; |
|||
this.getList() |
|||
}, |
|||
//点击重置 |
|||
handleReset() { |
|||
this.listQuery.params = { |
|||
applicant: '', |
|||
contractNo: '', |
|||
customerName: '', |
|||
endDate: '', |
|||
invoiceState: '', |
|||
startDate: '' |
|||
} |
|||
}, |
|||
|
|||
//页面初始化 |
|||
resetTemp() { |
|||
this.temp = {} |
|||
}, |
|||
// 打开新增 |
|||
handleCreate() { |
|||
this.viewState = 2; |
|||
this.resetTemp(); //添加前数据初始化 |
|||
// this.$nextTick(() => { |
|||
// this.$refs['ruleForm'].clearValidate() |
|||
// }) |
|||
}, |
|||
|
|||
// 打开编辑(修改) |
|||
handleUpdate() { |
|||
// if (this.sids.length === 0) { |
|||
// this.$message({showClose: true, type: 'error', message: '请选择一条记录进行编辑'}); |
|||
// return |
|||
// } |
|||
// if (this.sids.length > 1) { |
|||
// this.$message({showClose: true, type: 'error', message: '只能选择一条记录进行编辑'}) |
|||
// return |
|||
// } |
|||
// if (this.sids.length === 1) { |
|||
// this.resetTemp(); |
|||
// this.viewState = 3 |
|||
// this.dialogStatus = 'update'; |
|||
// this.FormLoading = true; |
|||
// var sid = this.sids[0]; |
|||
// getAll(sid).then(response => { |
|||
// console.log('列表页面:打开编辑response', response); //输出 |
|||
// if (response.code === '200') { |
|||
// this.FormLoading = false; |
|||
// this.temp = response.data; |
|||
// console.log('列表页面:打开编辑temp', this.temp); //输出 |
|||
// //把列表页的temp值传给添加页面 |
|||
// this.$refs['divAdd'].temp = this.temp; |
|||
// this.$refs['divAdd'].ruleForm.sid = this.sids[0]; |
|||
// this.$refs['divAdd'].showUpdate(); |
|||
// // this.$nextTick(() => { |
|||
// // this.$refs['ruleForm'].clearValidate() |
|||
// // }) |
|||
// } |
|||
// }) |
|||
// } |
|||
}, |
|||
|
|||
// 打开查看 |
|||
handleCheck(row) { |
|||
// this.viewState = 4; |
|||
// console.log('这是打开查看', row.billNo); |
|||
// details(row.billNo).then(response => { |
|||
// console.log('01列表页面:详情response', response); //输出 |
|||
// if (response.code === '200') { |
|||
// this.FormLoading = false; |
|||
// this.temp = response.data; |
|||
// console.log('02列表页面:详情temp', this.temp); //输出 |
|||
// //把列表页的temp值传给添加页面 |
|||
// this.$refs['divInfo'].temp = this.temp; |
|||
// console.log('这里是列表页面temp传值给详情temp333', this.$refs['divInfo'].temp);//输出 |
|||
// this.$refs['divInfo'].showCheck(); |
|||
// // this.$nextTick(() => { |
|||
// // this.$refs['ruleForm'].clearValidate() |
|||
// // }) |
|||
// } |
|||
// }) |
|||
}, |
|||
changeNodeState(row) { |
|||
console.log('111', row) |
|||
console.log('222', row.nodeState) |
|||
console.log('333', row.billType) |
|||
if (row.nodeState == '') { |
|||
this.viewState = 5; |
|||
} |
|||
}, |
|||
//提交 |
|||
handleSubmit() { |
|||
|
|||
}, |
|||
//导入 |
|||
// handleDaoRu() { |
|||
// this.$confirm('确定要导入数据, 是否继续?', '提示', { |
|||
// confirmButtonText: '确定', |
|||
// cancelButtonText: '取消', |
|||
// type: 'warning' |
|||
// }) |
|||
// }, |
|||
// 导出 |
|||
// handleDaoChu(row) { |
|||
// this.$confirm('确定要导出数据, 是否继续?', '提示', { |
|||
// confirmButtonText: '确定', |
|||
// cancelButtonText: '取消', |
|||
// type: 'warning' |
|||
// }) |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.switch_btn { |
|||
padding: 15px 0 10px 0; |
|||
} |
|||
|
|||
.btn_style { |
|||
background-color: #018ad2; |
|||
color: white; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/deep/ .el-collapse { |
|||
border-top: 0px solid #e6ebf5; |
|||
border-bottom: 0px solid #e6ebf5; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__content { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__wrap { |
|||
border-bottom: 0px solid #ebeef5; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__header { |
|||
border-bottom: 0px solid #e6ebf5; |
|||
} |
|||
|
|||
.searchbtn { |
|||
border: #2cab69 1px solid; |
|||
color: #2cab69; |
|||
} |
|||
|
|||
.searchli { |
|||
padding: 5px 100px; |
|||
} |
|||
</style> |
|||
@ -1,474 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!--待开票列表页面--> |
|||
<div v-show="viewState == 1"> |
|||
<!--标题按钮部分开始--> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>待开票车辆列表</div> |
|||
<!--start 查询列表按钮部分开始--> |
|||
<div> |
|||
<el-button type="primary" size="small" @click="handleCreate()">开票申请</el-button> |
|||
<!-- <el-button type="primary" size="small" @click="handleUpdate()">编辑</el-button>--> |
|||
<!-- <el-button type="primary" size="small" @click="handleSubmit()">提交</el-button>--> |
|||
<!-- <el-button type="danger" size="small" @click="handleDelete()">删除</el-button>--> |
|||
</div> |
|||
<!--end 查询列表按钮部分结束--> |
|||
</div> |
|||
<!--按钮部分结束--> |
|||
<div class="switch_btn"> |
|||
<el-button :class="{btn_style:viewState === 1}">待开票车辆列表</el-button> |
|||
<el-button class="" @click="handleInvoiceList">开票申请列表</el-button> |
|||
</div> |
|||
<!--Start查询列表部分--> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header"> |
|||
<el-form-item label="合同编号"> |
|||
<el-input v-model="listQuery.contractNo" placeholder="请输入合同编号" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<el-form-item label="客户名称"> |
|||
<el-select v-model="listQuery.customerName" class="addinputw" clearable filterable |
|||
placeholder="请选择" @change="customerChange"> |
|||
<el-option v-for="item in customerList" :key="item.sid" :label="item.customerName" |
|||
:value="item.customerName"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="车架号"> |
|||
<el-input v-model="listQuery.VINNo" placeholder="请输入车架号" clearable class="filter-item"/> |
|||
</el-form-item> |
|||
<el-divider></el-divider> |
|||
<div class="btn"> |
|||
<el-button type="primary" @click="handleFilter">查询</el-button> |
|||
<el-button type="primary" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<!--End查询列表部分--> |
|||
<div class="listtop"> |
|||
<div class="tit">待开票车辆列表</div> |
|||
<pageye v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<!--Start 主页面主要部分 --> |
|||
<div class="listcon"> |
|||
<el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" fit highlight-current-row |
|||
style="width: 100%;" @selection-change="handleSelectionChange"> |
|||
<el-table-column type="selection" align="center" width="50"/> |
|||
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/> |
|||
<el-table-column label="状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.invoiceType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="jc" label="合同编号" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.contractNo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="客户名称" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.customerName}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="车架号" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.VINNo }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="pages"> |
|||
<div class="tit"/> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" |
|||
class="pagination" @pagination="getList"/> |
|||
</div> |
|||
</div> |
|||
<!--待开票新增及修改 --> |
|||
<finginvoiceapply-add v-show="viewState == 2 || viewState == 3" ref="divAdd" |
|||
@goBack="resetViewState"></finginvoiceapply-add> |
|||
<!--待开票详情--> |
|||
<!-- <finginvoiceapply-info v-show="viewState == 4" ref="divInfo" @goBack="resetViewState"></finginvoiceapply-info>--> |
|||
<!--开票申请列表--> |
|||
<fininvoiceapply v-show="viewState == 5"></fininvoiceapply> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex' |
|||
import { |
|||
listPage, |
|||
deleteBySids, |
|||
details, |
|||
getAll, |
|||
typeValues, |
|||
customerName, |
|||
checkNum |
|||
} from '@/api/anruifinmanagement/finwaitinvoiceapply' |
|||
import {setuser, getuser} from '@/utils/baocun' |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import finginvoiceapplyAdd from "./fingwaitinvoiceapplyAdd"; |
|||
// import finginvoiceapplyInfo from "./finginvoiceapplyInfo"; |
|||
import fininvoiceapply from "../fininvoiceapply/fininvoiceapply"; |
|||
|
|||
export default { |
|||
name: 'finginvoiceapply', |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
finginvoiceapplyAdd, |
|||
// finginvoiceapplyInfo, |
|||
fininvoiceapply |
|||
}, |
|||
data() { |
|||
return { |
|||
isSearchShow: false, //主页面：隐藏查询条件按钮 |
|||
searchxianshitit: '显示查询条件', |
|||
viewState: 1, // 1、列表 2、新增 3、编辑 4、查看 5.开票申请 |
|||
//查询 ----------- |
|||
tableKey: 0, |
|||
checkNum_list: [], |
|||
infoList: [], |
|||
sids: [],// 用于导出的时候保存已选择的SIDs |
|||
total: 1, |
|||
FormLoading: false, |
|||
listLoading: false, |
|||
departmentSid: window.sessionStorage.getItem('departmentSid'), //部门sid |
|||
departmentName: window.sessionStorage.getItem('departmentName'), //部门名称 |
|||
customerList: [], |
|||
invoicingNature: 'invoicingNature', |
|||
typeList: [], //选择器 |
|||
list: [], |
|||
//翻页 |
|||
listQuery: { |
|||
current: 1, |
|||
size: 20, |
|||
params: { |
|||
VINNo: '', |
|||
contractNo: '', |
|||
customerName: '' |
|||
} |
|||
}, |
|||
textMap: { |
|||
update: '编辑', |
|||
create: '创建' |
|||
}, |
|||
dialogStatus: '', |
|||
} |
|||
}, |
|||
// ------------------------------------ |
|||
computed: { |
|||
...mapGetters(['id', 'roles', 'rolesIds', 'departmentId', 'departmentCode']), |
|||
}, |
|||
|
|||
created() { |
|||
// 初始化变量 |
|||
this.init(); |
|||
// 加载列表 |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
handleInvoiceList() { |
|||
this.viewState = 5 |
|||
}, |
|||
//修改、编辑、详情返回列表页面 |
|||
resetViewState() { |
|||
this.viewState = 1; |
|||
}, |
|||
|
|||
//add========== |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
alert('submit!'); |
|||
} else { |
|||
console.log('error submit!!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields() |
|||
}, |
|||
//==================== |
|||
|
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow; |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
init() { |
|||
this.getCustomer() |
|||
}, |
|||
|
|||
//信息条数 获取点击时当前的sid |
|||
handleSelectionChange(row) { |
|||
console.log('开票', row) |
|||
const aa = []; |
|||
const bb = []; |
|||
const cc = []; |
|||
row.forEach(element => { |
|||
aa.push(element.sid); |
|||
setuser(this.sids) // 用于导出的时候保存已选择的sids |
|||
bb.push({ |
|||
VINNo: element.VINNo, |
|||
contractNo: element.contractNo, |
|||
customerName: element.customerName, |
|||
customerSid: element.customerSid, |
|||
vehicleSid: element.vehicleSid, |
|||
state: element.state |
|||
}) |
|||
cc.push({ |
|||
vinno: element.VINNo, |
|||
dealInvoiceUnitPrice: element.dealInvoiceUnitPrice, |
|||
}) |
|||
}); |
|||
this.sids = aa; |
|||
this.checkNum_list = bb; |
|||
this.infoList = cc |
|||
console.log(1, this.sids, 2, this.checkNum_list, 3, this.infoList) |
|||
}, |
|||
|
|||
// 表中序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size; |
|||
var pageindex = index + 1 + pagestart; |
|||
return pageindex |
|||
}, |
|||
// 客户下拉框 |
|||
getCustomer() { |
|||
customerName().then((response) => { |
|||
if (response.code === '200') { |
|||
this.customerList = response.data |
|||
console.log('客户列表', this.customerList) |
|||
} |
|||
}) |
|||
}, |
|||
// 客户名称 |
|||
customerChange(value) { |
|||
console.log('触发下拉框按钮', value); |
|||
let bb = {}; |
|||
this.typeList.forEach((e) => { |
|||
if (e.customerName == value) { |
|||
bb = { |
|||
name: e.customerName, |
|||
sid: e.sid |
|||
} |
|||
} |
|||
}); |
|||
this.listQuery.params.customerName = bb.name; |
|||
console.log('开票性质的值', this.listQuery.params.customerName); |
|||
}, |
|||
// 开票性质option选择框 |
|||
setaDter() { |
|||
typeValues({ |
|||
type: this.invoicingNature |
|||
}).then((res) => { |
|||
if (res.code === '200') { |
|||
this.typeList = res.data; |
|||
console.log('下拉框请求', this.typeList) |
|||
} |
|||
}) |
|||
}, |
|||
//dictKey: "01"; dictType: "invoicingNature" |
|||
getinvoicingNature(value) { |
|||
console.log('触发下拉框按钮'); |
|||
let bb = {}; |
|||
this.typeList.forEach((e) => { |
|||
if (e.dictKey == value) { |
|||
bb = { |
|||
type: e.dictType, |
|||
name: e.dictValue, |
|||
key: e.dictKey |
|||
} |
|||
} |
|||
}); |
|||
this.listQuery.invoiceType = bb.name; |
|||
console.log('开票性质的值', this.listQuery.invoiceType); |
|||
}, |
|||
|
|||
// 查询列表信息 |
|||
getList() { |
|||
this.listLoading = true; |
|||
listPage({ |
|||
current: this.listQuery.current, |
|||
size: this.listQuery.size, |
|||
params: { |
|||
billNo: this.listQuery.billNo, |
|||
customerName: this.listQuery.customerName, //传递参数， |
|||
invoiceName: this.listQuery.invoiceName, |
|||
} |
|||
}).then(response => { //拦截器 |
|||
this.listLoading = false; |
|||
console.log(response) |
|||
if (response.code === '200' && response.data && response.data.total > 0) { |
|||
this.list = response.data.records; |
|||
this.total = response.data.total; |
|||
} else { |
|||
this.list = []; |
|||
this.total = 0 |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 根据本行sid删除数据 |
|||
handleDelete() { |
|||
if (this.sids.length === 0) { |
|||
this.$message({showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作'}); |
|||
return |
|||
} |
|||
console.log('这里是获取删除按钮里的sids数组', this.sids); |
|||
deleteBySids(this.sids).then(response => { |
|||
console.log('删除数返回的结果', response); |
|||
if (response.code === '200') { |
|||
this.$notify({ |
|||
title: '提示', |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 2000 |
|||
}); |
|||
this.getList() |
|||
} else { |
|||
this.$notify({ |
|||
title: '删除失败', |
|||
message: response.msg, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1; |
|||
this.getList() |
|||
}, |
|||
//点击重置 |
|||
handleReset() { |
|||
this.listQuery.params.VINNo = ''// 单据编号 |
|||
this.listQuery.params.contractNo = ''// 开票性质 |
|||
this.listQuery.params.customerName = '' // 开票名称 |
|||
}, |
|||
|
|||
// 打开新增 |
|||
handleCreate() { |
|||
if (this.sids.length === 0) { |
|||
this.$message({showClose: true, type: 'error', message: '请选择一条记录进行开票申请'}); |
|||
return |
|||
} |
|||
if (this.sids.length > 0) { |
|||
this.FormLoading = true; |
|||
checkNum(this.checkNum_list).then(response => { |
|||
if (response.code === '200') { |
|||
this.viewState = 2 |
|||
this.$refs['divAdd'].showCreated(this.infoList); |
|||
} else { |
|||
this.$notify({ |
|||
title: '验证失败', |
|||
message: response.msg, |
|||
type: 'error' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
// this.$nextTick(() => { |
|||
// this.$refs['ruleForm'].clearValidate() |
|||
// }) |
|||
}, |
|||
|
|||
// 打开编辑(修改) |
|||
handleUpdate() { |
|||
if (this.sids.length === 0) { |
|||
this.$message({showClose: true, type: 'error', message: '请选择一条记录进行编辑'}); |
|||
return |
|||
} |
|||
if (this.sids.length > 1) { |
|||
this.$message({showClose: true, type: 'error', message: '只能选择一条记录进行编辑'}) |
|||
return |
|||
} |
|||
if (this.sids.length === 1) { |
|||
this.viewState = 3 |
|||
this.FormLoading = true; |
|||
var sid = this.sids[0]; |
|||
this.$refs['divAdd'].showUpdate(sid); |
|||
} |
|||
}, |
|||
|
|||
// 打开查看 |
|||
handleCheck(row) { |
|||
this.viewState = 4; |
|||
console.log('点击查看', row) |
|||
}, |
|||
|
|||
//提交 |
|||
handleSubmit() { |
|||
typeValues({type: this.supplyType}).then((response) => { |
|||
if (response.code === '200') { |
|||
this.typeOptions = response.data |
|||
} |
|||
}) |
|||
}, |
|||
//导入 |
|||
handleDaoRu() { |
|||
this.$confirm('确定要导入数据, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
// 导出 |
|||
handleDaoChu(row) { |
|||
this.$confirm('确定要导出数据, 是否继续?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.switch_btn { |
|||
padding: 15px 0 10px 0; |
|||
} |
|||
|
|||
.btn_style { |
|||
background-color: #018ad2; |
|||
color: white; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
/deep/ .el-collapse { |
|||
border-top: 0px solid #e6ebf5; |
|||
border-bottom: 0px solid #e6ebf5; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__content { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__wrap { |
|||
border-bottom: 0px solid #ebeef5; |
|||
} |
|||
|
|||
/deep/ .el-collapse-item__header { |
|||
border-bottom: 0px solid #e6ebf5; |
|||
} |
|||
|
|||
.searchbtn { |
|||
border: #2cab69 1px solid; |
|||
color: #2cab69; |
|||
} |
|||
|
|||
.searchli { |
|||
padding: 5px 100px; |
|||
} |
|||
</style> |
|||
@ -1,458 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!--标题按钮部分开始--> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>{{ viewTitle }}</div> |
|||
<!--start 新增修改按钮--> |
|||
<div> |
|||
<!--保存和提交是一样的作用，直接提交给后台，后台接收前按钮不可用--> |
|||
<el-button size="small" type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">保存 |
|||
</el-button> |
|||
<el-button size="small" type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">提交 |
|||
</el-button> |
|||
<el-button size="small" type="primary">打印</el-button> |
|||
<el-button size="small" type="info" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
<!--end 添加修改按钮--> |
|||
</div> |
|||
<!--按钮部分结束--> |
|||
<div class="listconadd"> |
|||
<div class="title">公司开票申请单</div> |
|||
<el-form |
|||
ref="ruleForm" |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
class="invoiceform" |
|||
label-width="100px" |
|||
> |
|||
<div class=" topcon"> |
|||
<!--第一行--> |
|||
<el-row class="topline lineone"> |
|||
<el-col :span="7"> |
|||
<el-form-item label="单据编号"> |
|||
<el-input v-model="ruleForm.contractNo" readonly/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"/> |
|||
<el-col :span="7"> |
|||
<el-form-item label="制单日期"> |
|||
<el-input v-model="ruleForm.applicationDate" readonly/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="invoiceadd"> |
|||
<!--开票信息--> |
|||
<div class="addtable"> |
|||
<div class="tabletitle"> |
|||
<div class="titlename"> |
|||
开票信息 |
|||
</div> |
|||
<button type="submit" class="addbtn" @click="dataAdd">添加</button> |
|||
</div> |
|||
<template class="tablelist"><!----> |
|||
<el-table |
|||
:data="ruleForm.infoList" |
|||
:index="index" |
|||
border |
|||
tyle="width: 100%" |
|||
show-summary |
|||
:summary-method="getSummaries" |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
label="序号" |
|||
width="100" |
|||
:index="index+1" |
|||
align="center" |
|||
/> |
|||
<el-table-column prop="vinno" label="车架号" align="center"> |
|||
<template slot-scope="props"> |
|||
<span>{{props.row.vinno}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dealInvoiceUnitPrice" label="成交单价" align="center"> |
|||
<template slot-scope="props"> |
|||
<span>{{props.row.dealInvoiceUnitPrice}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="invoiceMoney" label="开票金额" align="center"> |
|||
<template slot-scope="props"> |
|||
<el-input v-model="props.row.invoiceMoney" class="tableinput"/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="invoiceType" label="开票类型" align="center"> |
|||
<template slot-scope="props"> |
|||
<el-select |
|||
v-model="props.row.invoiceType" |
|||
placeholder="请选择" |
|||
@change="getinvoicingNature" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in typeList" |
|||
:key="index.dictKey" |
|||
:label="item.dictValue" |
|||
:value="item.dictKey" |
|||
/> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="invoiceName" label="开票名称" align="center"> |
|||
<template slot-scope="props"> |
|||
<el-input v-model="props.row.invoiceName" class="tableinput"/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4" class="addlabel"> |
|||
<span>开票金额总计</span> |
|||
</el-col> |
|||
<el-col :span="20" class="addinput"> |
|||
<el-form-item prop="invoiceSumMoney"> |
|||
<span>{{ ruleForm.invoiceSumMoney }}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="addlabel"> |
|||
<span>备注</span> |
|||
</el-col> |
|||
<el-col :span="20" class="addinput"> |
|||
<el-form-item prop="remarks"> |
|||
<el-input v-model="ruleForm.remarks"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="addlabel"> |
|||
<span>开票状态</span> |
|||
</el-col> |
|||
<el-col :span="20" class="addinput"> |
|||
<el-form-item prop="invoiceState"> |
|||
<el-input v-model="ruleForm.invoiceState"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<!--所附资料附件--> |
|||
<div class="addtable"> |
|||
<div class="tabletitle"> |
|||
<div class="titlename"> |
|||
所附资料附件 |
|||
</div> |
|||
<!-- :action="action 必选参数，上传的地址" :header="设置上传的请求头部" :data="上传时附带的额外参数" |
|||
:file-list="上传的文件列表[{}]" :on-success="文件上传成功时的钩子" --> |
|||
<el-upload |
|||
:action="uploadAction" |
|||
:data="requestData" |
|||
:headers="accessToken" |
|||
:multiple="false" |
|||
:on-success="uploadSuccess" |
|||
:show-file-list="false" |
|||
class="upload-demo" |
|||
> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
</el-upload> |
|||
</div> |
|||
<template class="tablelist"> |
|||
<el-table |
|||
:data="ruleForm.commonAppendixDtoList" |
|||
:index="index" |
|||
border |
|||
tyle="width: 100%" |
|||
> |
|||
<el-table-column :index="index+1" align="center" label="序号" type="index" width="100"/> |
|||
<el-table-column align="center" label="操作" width="190"> |
|||
<template slot-scope="scope"> <!--HTML内容模板（<template>）元素--> |
|||
<el-button |
|||
type="text" |
|||
@click="dataDelete(scope.$index,ruleForm.commonAppendixDtoList[scope.$index])" |
|||
>删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="附件名称" prop="fileName"> |
|||
<template slot-scope="props"> |
|||
<span class="bluezi" @click="handleDown(props.row)">{{ props.row.fileName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="文件格式" prop="fileType"> |
|||
<template slot-scope="props"> |
|||
<span>{{ props.row.fileType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="上传人" prop="createByName"> |
|||
<template slot-scope="props"> |
|||
<span>{{ props.row.createByName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex' |
|||
import { |
|||
saveList, |
|||
update, |
|||
typeValues, |
|||
removeFile, |
|||
} from '@/api/anruifinmanagement/finwaitinvoiceapply' |
|||
import {getToken, getStorage} from '@/utils/auth' |
|||
|
|||
export default { |
|||
name: 'FinginvoiceAdd', |
|||
data() { |
|||
return { |
|||
index: 0, |
|||
// Start 上传附件 |
|||
userName: sessionStorage.getItem('name'), |
|||
// 请求头部 |
|||
accessToken: { |
|||
token: getStorage() |
|||
}, |
|||
// 请求路径 |
|||
uploadAction: process.env.VUE_APP_BASE_API + '/base/file/upload', |
|||
requestData: { |
|||
departmentName: window.sessionStorage.getItem('userSid'), |
|||
staffSid: window.sessionStorage.getItem('staffSid') |
|||
}, |
|||
fileList2: [], |
|||
// End 上传附件 |
|||
multiple: false, |
|||
FormLoading: false, |
|||
viewTitle: '', // 2新增 3编辑修改 |
|||
dialogStatus: '', |
|||
// 上传附件 |
|||
invoicingNature: 'invoicingNature', |
|||
typeList: [], // 选择器 |
|||
temp: {}, |
|||
infoList: [], |
|||
// 数据表单 |
|||
ruleForm: { |
|||
sid: '', |
|||
invoiceSumMoney:'', |
|||
userSid: window.sessionStorage.getItem('userSid'), |
|||
applicationDate: '', |
|||
infoList: [], |
|||
commonAppendixDtoList: [] |
|||
}, |
|||
rules: {} |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
...mapGetters(['id', 'roles', 'rolesIds', 'departmentId', 'departmentCode', 'token']) |
|||
}, |
|||
created() { |
|||
this.setaDter() |
|||
}, |
|||
methods: { |
|||
// 新增模块赋值 |
|||
showCreated(infoList) { |
|||
this.ruleForm.infoList = infoList |
|||
this.dialogStatus = 'create' |
|||
this.viewTitle = '【新增】公司开票申请' |
|||
}, |
|||
// 编辑模块赋值 |
|||
showUpdate() { |
|||
this.dialogStatus = 'update' |
|||
this.viewTitle = '【编辑】公司开票申请' |
|||
// commonAppendixDtoList 附件上传的数组 |
|||
this.ruleForm.commonAppendixDtoList = this.temp.finCommonAppendixVoList // 附件 |
|||
}, |
|||
// 合计 |
|||
getSummaries(param) { |
|||
const {columns, data} = param |
|||
const sums = [] |
|||
columns.forEach((column, index) => { |
|||
if (index === 0) { |
|||
sums[index] = '合计' |
|||
return |
|||
} |
|||
const values = data.map(item => Number(item[column.property])) |
|||
// 只需要进行开票金额的计算，判断并赋值给计算条件 |
|||
if (column.property === 'invoiceMoney') { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
const value = Number(curr) |
|||
if (!isNaN(value)) { |
|||
return prev + curr |
|||
} else { |
|||
return prev |
|||
} |
|||
}, 0) |
|||
sums[index] += ' 元' |
|||
this.ruleForm.invoiceSumMoney = sums[index] += '' |
|||
console.log('总价',this.ruleForm.invoiceSumMoney) |
|||
} else { |
|||
sums[index] = '' |
|||
} |
|||
}) |
|||
return sums |
|||
}, |
|||
|
|||
// 开票性质option选择框 |
|||
setaDter() { |
|||
typeValues({ |
|||
type: this.invoicingNature |
|||
}).then((res) => { |
|||
if (res.code === '200') { |
|||
this.typeList = res.data |
|||
console.log('下拉框请求', this.typeList) |
|||
} |
|||
}) |
|||
}, |
|||
// dictKey: "01"; dictType: "invoicingNature" |
|||
getinvoicingNature(value) { |
|||
console.log('触发下拉框按钮') |
|||
let bb = {} |
|||
this.typeList.forEach((e) => { |
|||
if (e.dictKey == value) { |
|||
bb = { |
|||
type: e.dictType, |
|||
name: e.dictValue, |
|||
key: e.dictKey |
|||
} |
|||
} |
|||
}) |
|||
this.ruleForm.infoList.invoiceTypeKey = bb.key// 开票性质key |
|||
this.ruleForm.infoList.invoiceType = bb.name |
|||
console.log('开票性质的值', this.ruleForm.infoList.invoiceType) |
|||
console.log('开票性质的key值', this.ruleForm.infoList.invoiceTypeKey) |
|||
}, |
|||
|
|||
// 上传附件 服务器返回的内容 |
|||
uploadSuccess(response, file) { |
|||
const userName = sessionStorage.getItem('name') |
|||
const staffSid = sessionStorage.getItem('staffSid') |
|||
var nameArr = file.name.split('.') |
|||
this.fileList2.push({ |
|||
fileName: file.name, // 文件名 |
|||
fileType: nameArr[nameArr.length - 1], // 文件类型 |
|||
createByName: userName, // 上传人 |
|||
createBySid: staffSid, // 业务员sid |
|||
fullUrl: response.data.fullUrl, // 文件全路径 |
|||
filePath: response.data.filePath, |
|||
fileSize: response.data.size, // 文件大小 文件大小应该是字节 |
|||
attachType: '0003' |
|||
}) |
|||
this.ruleForm.commonAppendixDtoList = this.fileList2 |
|||
console.log('保存后的附件表', this.ruleForm.commonAppendixDtoList) |
|||
}, |
|||
|
|||
// 下载附件 |
|||
handleDown(row) { |
|||
// window.open(process.env.VUE_APP_BASE_API + "/hospital/file/downloadFile?tPath=" + tPath) |
|||
console.log('这是下载附件选中的file', row) |
|||
var name = row.fileName |
|||
var url = row.filePath |
|||
const a = document.createElement('a') |
|||
a.setAttribute('download', name) |
|||
a.setAttribute('target', '_blank') |
|||
// 下载附件请求 |
|||
a.setAttribute('href', process.env.VUE_APP_BASE_API + '/base/file/download') |
|||
a.click() |
|||
}, |
|||
|
|||
// 文件列表移除文件调用方法删除 |
|||
dataDelete(index, row) { |
|||
console.log(index) |
|||
console.log(row) |
|||
row.fullPath = row.filePath |
|||
// 请求删除附件接口 |
|||
removeFile(row).then((res) => { |
|||
if (res.code === '200') { |
|||
// 删除页面表中展示的结果 |
|||
this.fileList2.splice(index, 1) |
|||
console.log('删除index', index) |
|||
this.ruleForm.commonAppendixDtoList.splice(index, 1) |
|||
} else { |
|||
this.$notify({ |
|||
title: '提示', |
|||
message: '移除失败', |
|||
type: 'error', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 提交新增的数据 |
|||
createData() { |
|||
this.$refs['ruleForm'].validate(valid => { // 自定义表单验证 |
|||
// var that = this; |
|||
if (valid) { |
|||
|
|||
saveList(this.ruleForm).then(response => { |
|||
this.dialogStatus = 'create' |
|||
console.log('新增返回值:', this.ruleForm) |
|||
this.FormLoading = false |
|||
if (response.code === '200') { |
|||
this.$notify({ |
|||
title: '提示', |
|||
message: '添加成功', |
|||
type: 'success', |
|||
duration: 2000 |
|||
}) |
|||
// 新增返回并刷新列表 |
|||
this.$emit('goBack') |
|||
this.$refs['ruleForm'].resetFields() // |
|||
this.ruleForm.commonAppendixDtoList = [] |
|||
this.$parent.getList() |
|||
// this.$nextTick(() => { |
|||
// this.getList() |
|||
// }) |
|||
} else { |
|||
this.$notify({ |
|||
title: '提示', |
|||
message: '添加失败', |
|||
type: 'error', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 提交编辑修改数据 |
|||
updateData() { |
|||
this.$refs['ruleForm'].validate(valid => { |
|||
if (valid) { |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
// 关闭、返回到列表页面 |
|||
handleReturn() { |
|||
this.$emit('goBack') // 在子组件中，通过$emit()来触发事件 |
|||
this.$refs['ruleForm'].resetFields() // |
|||
this.ruleForm.commonAppendixDtoList = [] |
|||
this.fileList2 = [] |
|||
}, |
|||
dataAdd() { |
|||
this.ruleForm.finReceiptDetailDtoList.push({}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/deep/ .el-col-3, |
|||
.el-col-4 { |
|||
text-align: right; |
|||
padding-right: 10px; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 40px !important; |
|||
font-weight: 600; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue