OA/pages/invoice/detail.vue

801 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="leave_request">
<view class="leave_box">
<view class="cont_cell">
<view class="title">开票金额</view>
<input type="text" v-model="listobj.amount" placeholder="开票金额">
</view>
<view class="leava_type flex_a_c">
<view class="title">开票类型:</view>
<input type="text" v-model="project1" placeholder="请选择" disabled @click="leavaTypeShow2=true">
</view>
<view class="leava_type flex_a_c">
<view class="title">开票主体:</view>
<input type="text" v-model="project2" placeholder="请选择" disabled @click="leavaShow1">
</view>
<view class="cont_cell">
<view class="title">抬头类型:</view>
<radio-group class="select_group" @change="deliveryWayChangetwo">
<label class="radio_select" style="margin-right:15rpx;display: flex; margin-bottom: 30rpx;">
<view style="margin-right:5rpx;">
<radio value="1" :checked="selected === '1'" />
</view>
企业
</label>
<label class="radio_select" style="margin-right:15rpx;display: flex;">
<view style="margin-right:5rpx;">
<radio value="2" :checked="selected === '2'" />
</view>
<view @click="branchShow = true" style="display: flex;">
<view class="title">个人</view>
</view>
</label>
</radio-group>
</view>
<view class="cont_cell">
<view class="title">开票抬头:</view>
<input type="text" v-model="listobj.invoice_title" placeholder="开票抬头">
</view>
<view class="cont_cell">
<view class="title">电话号码:</view>
<input type="text" v-model="listobj.invoice_phone" placeholder="电话号码">
</view>
<view class="cont_cell">
<view class="title">纳税人识别号 </view>
<input type="text" v-model="listobj.invoice_tax" placeholder="纳税人识别号">
</view>
<view class="cont_cell">
<view class="title">开户行:</view>
<input type="text" v-model="listobj.invoice_bank" placeholder="开户行">
</view>
<view class="cont_cell">
<view class="title">银行账号:</view>
<input type="text" v-model="listobj.invoice_account" placeholder="银行账号">
</view>
<view class="cont_cell">
<view class="title">银行营业网点 </view>
<input type="text" v-model="listobj.invoice_banking" placeholder="银行营业网点">
</view>
<view class="cont_cell">
<view class="title">地址:</view>
<input type="text" v-model="listobj.invoice_address" placeholder="地址">
</view>
</view>
<!-- <view class="leave_box" style="padding-top: 100rpx;"> -->
<!-- 附件 -->
<!-- <block v-for="(item, i) in fileArray" :key="i">
<view class="file flex_a_c_j_sb">
<view class="l_file">
<view class="file_name">{{ item.name }}</view>
<view class="file_size">{{ item.filesize | formatBytes }}</view>
<view class="upload_people">上传人:{{ item.admin_name }}</view>
</view>
</view>
</block> -->
<!-- <view class="upload_box flex_a_c_j_sb">
<view>
<view class="title">选择文件并上传</view>
<view class="text">
上传前请规范命名最大只能上传100M的文件<br />
超过请压缩成多个文件上传。
</view>
</view> -->
<!-- <view class="" style="margin-top: 60rpx;">
<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
style="margin-top: 28rpx;" :debug="false"
:formats="'pdf,txt,zip,rar,jpg,png,mp3,avi,mov,mp4,gif'" :multiple="false" :count="3"
:instantly="true" @change="changeFile" @uploadEnd='onuploadEnd' @progress='onprogre'> -->
<!-- <view class="change-file">请选择PDF类型的发票</view> -->
<!-- <u-icon name="plus-circle" color="#333333" size="28"
style="margin-top: 40rpx; margin-left: 60rpx;"></u-icon> -->
<!-- <u-icon name="plus-circle" color="#333333" size="28"></u-icon>
</lsjUpload>
</view>
</view>-->
<!-- </view> -->
<view class="flow_path">
<view class="cont_cell" style="padding-top: 20rpx;" v-if="listobj.check_status!= 4&& ktype!=0">
<view class="title" style="width: 200rpx;">撤回意见</view>
<textarea v-model="mscontent" placeholder="请输入撤回意见" />
</view>
<view class="cont_cell">
<view class="title">审批流程:</view>
</view>
<block v-for="(item,i) in check_record" :key="i">
<view class="record" style="display: flex;">
<view class="circle"></view>
<text class="text">{{item.check_time_str}} {{item.name}} {{item.status_str}}
了此申请。操作意见:{{item.content}}</text>
</view>
</block>
<view class="cont_cell">
<view class="title">审核状态:</view>
{{listobj.check_status=='0'?'待审核':listobj.check_status=='1'?'审核中':listobj.check_status=='2'?'审核通过':listobj.check_status=='3'?'审核不通过':'撤销审核'}}
</view>
<view class="cont_cell">
<view class="title">审核人:</view>
<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
</view>
<view class="cont_cell">
<view class="title">抄送人:</view>
<input type="text" v-model="copy_names" placeholder="请选择" disabled>
</view>
</view>
<view class="" v-if="ktype!=0">
<view class="bot_btn" v-if="listobj.check_status!= 4">
<!-- <view class="reset" @click="reset">重置</view> -->
<view class="submit_btn" @click="submiteBtn">撤回</view>
</view>
<view class="bot_btn" v-else>
<!-- <view class="reset" @click="reset">重置</view> -->
<view class="submit_btn" @click="bianjiBtn">重新编辑</view>
</view>
</view>
<u-action-sheet :show="leavaTypeShow2" keyName="name" :actions="columns1" title="请选择"
@close="leavaTypeShow2 = false" @select="leavaType2">
</u-action-sheet>
<u-action-sheet :show="leavaTypeShow" keyName="name" :actions="columns" title="请选择"
@close="leavaTypeShow = false" @select="leavaType">
</u-action-sheet>
<u-action-sheet :show="leavaTypeShow1" keyName="name" :actions="actions4" title="请选择"
@close="leavaTypeShow1 = false" @select="leavaType1">
</u-action-sheet>
<!-- 选择审批流程 -->
<u-action-sheet :actions="flowPathSheet" @select="flowPathSelect" title="选择审批流程" :show="flowPathShow"
@close="flowPathShow=false" :closeOnClickOverlay="true" :closeOnClickAction="true">
</u-action-sheet>
<!-- 部门选择 -->
<u-picker :show="branchShow" :defaultIndex='defaultIndex' ref="branchRef" :columns="branchColumns"
@confirm="branchConfirm" @change="columnCode" :closeOnClickOverlay="true" @close="branchShowclose"
keyName="name">
</u-picker>
<u-picker :show="branchShow1" :defaultIndex='defaultIndex1' ref="branchRef" :columns="branchColumns1"
@confirm="branchConfirm1" @change="columnCode1" :closeOnClickOverlay="true" @close="branchShowclose1"
keyName="name">
</u-picker>
<!-- 选择时间 -->
<u-datetime-picker :show="timeShow" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
closeOnClickOverlay @confirm="timeConfirm($event)" @cancel="timeShow = false"
@close="timeShow = false"></u-datetime-picker>
<u-datetime-picker :show="timeShow1" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
closeOnClickOverlay @confirm="timeConfirm1($event)" @cancel="timeShow1 = false"
@close="timeShow1 = false"></u-datetime-picker>
</view>
</template>
<script>
import {
Toast
} from '../../libs/uniApi'
import {
getPersonInfoApi,
appexpensecate,
appexpenseflow,
userdepartment,
getemployee,
addinvoice,
invoicecate,
appflow_check,
invoiceview,
invoiceflow
} from '@/api/oa.js'
import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
import {
FILE_URL
} from '@/api/file.js'
export default {
components: {
lsjUpload
},
data() {
return {
selected: "2",
defaultIndex: [0, 0, 0],
defaultIndex1: [0, 0, 0],
timestamp: '',
personInfo: {},
company: '',
listobj: {},
project1: '',
project2: '',
mscontent: '',
timeShow: false,
timeShow1: false,
branchShow: false,
flowPathShow: false,
leavaTypeShow: false,
leavaTypeShow1: false,
leavaTypeShow2: false,
branchColumns: [],
branchColumns1: [],
flowPathSheet: [],
actions4: [],
branchShow1: false,
flowPath: '',
columns: [],
check_admin_name: '',
copy_names: '',
columns1: [{
name: '企业',
id: 1,
},
{
name: '个人',
id: 2,
}
],
list: [{
cate_title: "",
amount: '',
remarks: ''
}],
fileOption: {},
files: new Map(),
fileArray: [],
check_record: [],
dnum: 0,
ktype:1,
}
},
onLoad(option) {
this.detail(option.type)
this.ktype=option.num
},
onShow() {
this.fileOption = {
url: FILE_URL,
name: 'file',
header: {
token: this.$store.state.app.token
}
},
// 获取当前时间戳
this.timestamp = Date.parse(new Date());
// this.getlist()
this.getlist1()
this.getDocumentList()
this.getDocumentList1()
},
methods: {
async detail(id) {
let res = await invoiceview({
id: id
})
this.listobj = res.data.detail
this.project1 = this.columns1.find(obj => obj.id === res.data.detail.type).name;
this.project2 = this.actions4.find(obj => obj.id === res.data.detail.invoice_subject).name;
this.check_record = res.data.check_record
this.check_admin_name = res.data.detail.check_user
this.copy_names = res.data.detail.copy_user
this.selected= res.data.detail.type.toString()
},
reset() {
this.list = [{
name: "",
num: ''
}],
this.listobj = {}
this.fileArray = []
this.copy_names = ''
this.flowPath = ''
this.check_admin_name = ''
},
async getDocumentList1() {
let res = await invoicecate()
this.actions4 = res.data.map((step, index) => {
return {
name: step.title,
id: step.id,
};
});
},
//获取部门
async getDocumentList() {
const res = await userdepartment()
const deArr = res.data
let codelist = [
[], //顶级部门
[], //次级部门
[] // 负责人
]
codelist[0] = res.data.map((item) => { // 赋值
return {
id: item.id,
name: item.title
}
})
codelist[1] = res.data[0].children.map((item) => { // 赋值
return {
id: item.id,
name: item.title
}
})
let dat = await getemployee({
did: codelist[1][0].id
})
codelist[2] = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
this.$forceUpdate()
this.$nextTick(() => {
this.branchColumns = codelist
this.branchColumns1 = codelist
this.branchColumns2 = codelist
})
},
//监听人员加载数据
async columnCode(e) {
if (e.columnIndex == 1) {
let arr1 = []
let dat = await getemployee({
did: this.branchColumns[e.columnIndex][e.index].id
})
if (dat.data.length > 0) {
const newColumn = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
this.$set(this.branchColumns, 2, newColumn);
}
}
},
//监听人员加载数据
async columnCode1(e) {
if (e.columnIndex == 1) {
let arr1 = []
let dat = await getemployee({
did: this.branchColumns1[e.columnIndex][e.index].id
})
if (dat.data.length > 0) {
const newColumn = dat.data.map((item) => {
return {
id: item.id,
name: item.name
}
})
// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
this.$set(this.branchColumns1, 2, newColumn);
}
}
},
deliveryWayChangetwo(e) {
this.listobj.type = e.detail.value
},
//弹窗显示
leavaShow(item, i) {
this.dnum = i
this.leavaTypeShow = true
},
leavaShow1() {
this.leavaTypeShow1 = true
},
branchConfirm(e) {
// console.log('confirm', e, e.value[2].name)
this.check_admin_name = e.value[2].name
this.listobj.check_admin_ids = e.value[2].id
this.branchShow = false
},
branchConfirm1(e) {
console.log('confirm', e, e.value[2].name)
if (this.listobj.copy_uids) {
this.listobj.copy_uids += e.value[2].id
} else {
this.listobj.copy_uids = e.value[2].id
}
this.copy_names += e.value[2].name + ','
this.branchShow1 = false
},
async submiteBtn() {
console.log(this.list)
let data = {
id: this.listobj.id,
type: 3,
check: 3,
content: this.mscontent,
}
let res = await appflow_check(data)
// console.log(res)
Toast(res.msg)
// const res = await appexpense(this.listobj)
Toast('提交成功')
},
bianjiBtn() {
uni.navigateTo({
url: '/pages/invoice/bianji?type=' + this.listobj.id
})
},
async getlist() {
const res = await appexpensecate()
// this.personInfo = res.data
const reformattedData = res.data.map(item => {
return {
name: item.title,
id: item.id
};
});
this.columns = reformattedData
},
async getlist1() {
const res = await invoiceflow()
this.flowPathSheet = res.data
// console.log('个人信息2', res.data);
},
flowPathSelect(value) {
this.flowPath = value.name
this.flow_id = value.id
},
/** 类型 */
leavaType(e) {
this.list[this.dnum].cate_title = e.name
this.list[this.dnum].id = e.id
this.leavaTypeShow = false
},
leavaType1(e) {
this.project2 = e.name
this.listobj.invoice_subject = e.id
this.leavaTypeShow1 = false
},
leavaType2(e) {
this.project1 = e.name
this.listobj.invoice_type = e.id
this.leavaTypeShow1 = false
},
branchShowclose() {
this.branchShow = false
},
branchShowclose1() {
this.branchShow1 = false
},
/**
* 某文件上传结束回调(成功失败都回调)
* @param {Object} item 当前上传完成的文件
*/
onuploadEnd(item) {
console.log(`${item.name}已上传结束,上传状态=${item.type}`);
if (item['responseText']) {
this.files.get(item.name).responseText = JSON.parse(item.responseText);
}
// 更新当前窗口状态变化的文件
this.files.set(item.name, item);
let arr1 = this.files.get(item.name).responseText
this.fileArray.push(arr1.data)
// 强制更新视图
this.$forceUpdate();
},
/**
* 上传进度回调
* 如果网页上md文档没有渲染出事件名称onprogre请复制代码的小伙伴自行添加上哈没有哪个事件是只(item)的
* @param {Object} item 当前正在上传的文件
*/
onprogre(item) {
console.log('打印对象', JSON.stringify(this.files.get(item.name)));
// 更新当前状态变化的文件
this.files.set(item.name, item);
// 强制更新视图
this.$forceUpdate();
},
/**
* 文件选择回调
* @param {Object} files 已选择的所有文件Map集合
*/
changeFile(files) {
console.log('当前选择的文件列表:', JSON.stringify([...files.values()]));
// 更新选择的文件
this.files = files
console.log(files.values())
// 强制更新视图
this.$forceUpdate();
},
/**
* 指定上传某个文件
* @param {Object} name 带后缀名的文件名称
*/
resetUpload(name) {
this.$refs.lsjUpload.upload(name);
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.leave_request {
position: relative;
padding-bottom: 100px;
}
.leave_box,
.flow_path {
width: 100%;
padding: 0 28.07rpx;
background: #fff;
margin-bottom: 35.09rpx;
padding-bottom: 28.07rpx;
}
.bot_btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 87.72rpx;
>view {
width: 100%;
text-align: center;
line-height: 87.72rpx;
}
.reset {
background-color: #fff;
}
.submit_btn {
color: #fff;
height: 87.72rpx;
background: $theme-oa-color;
}
}
.leava_type {
height: 100rpx;
border-bottom: 1px solid #999;
.title {
font-size: 31.58rpx;
}
}
.cont_cell {
display: flex;
align-items: center;
width: 100%;
min-height: 87.72rpx;
border-bottom: 1px solid #f7f7f7;
.title {
font-size: 31.58rpx;
}
}
// 审批流程
.audit_process {
.process_item {
position: relative;
height: 100%;
margin: 17.54rpx 0;
}
:last-child {
.circle {
&::before {
display: none;
}
}
}
.tag {
font-size: 21.05rpx;
color: #fff;
padding: 0 4px;
margin-left: 10.53rpx;
background-color: #3c9cff;
border-radius: 2px;
}
.verifier {
margin: 17.54rpx 0;
}
}
.circle {
width: 31.58rpx;
height: 31.58rpx;
background-color: #fff;
border: 2px solid #34A853;
border-radius: 50%;
margin: 0 5px;
display: flex;
flex-direction: column;
align-items: center;
&::before {
content: "";
display: block;
position: absolute;
clear: both;
width: 1px;
height: 100%;
background-color: rgba(204, 204, 204, 0.5);
margin: 31.58rpx;
}
}
// 附件
.upload_box {
padding: 17.54rpx;
background-color: #F7F7F7;
border-radius: 4px;
.title {
font-size: 28.07rpx;
}
.text {
margin-top: 7.02rpx;
font-size: 21.05rpx;
color: #999;
}
}
.record {
position: relative;
margin-bottom: 14.04rpx;
.circle {
width: 31.58rpx;
height: 31.58rpx;
background-color: #fff;
border: 2px solid #34A853;
border-radius: 50%;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
&::before {
content: "";
display: block;
position: absolute;
clear: both;
width: 1px;
height: 100%;
background-color: rgba(204, 204, 204, 0.5);
margin: 31.58rpx;
}
}
.text {
flex: 1;
margin-left: 7.02rpx;
}
}
.file_name {
width: 526.32rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file {
padding: 17.54rpx;
border-radius: 4px;
border: 1px solid #F2F2F2;
margin: 17.54rpx 0;
.file_size {
margin-top: 7.02rpx;
}
.file_size,
.upload_people {
font-size: 21.05rpx;
color: #999;
}
}
</style>