OA/pages/invoice/bianji.vue

819 lines
20 KiB
Vue
Raw Permalink 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="cont_cell">
<view class="title">开票类型:</view>
<input type="text" v-model="project1" placeholder="请选择" disabled @click="leavaTypeShow2=true">
</view>
<view class="cont_cell">
<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" v-if="isshow">
<view class="title">纳税人识别号 </view>
<input type="text" v-model="listobj.invoice_tax" placeholder="纳税人识别号">
</view>
<view class="cont_cell" v-if="isshow">
<view class="title">开户行:</view>
<input type="text" v-model="listobj.invoice_bank" placeholder="开户行">
</view>
<view class="cont_cell" v-if="isshow">
<view class="title">银行账号:</view>
<input type="text" v-model="listobj.invoice_account" placeholder="银行账号">
</view>
<view class="cont_cell" v-if="isshow">
<view class="title">银行营业网点 </view>
<input type="text" v-model="listobj.invoice_banking" placeholder="银行营业网点">
</view>
<view class="cont_cell" v-if="isshow">
<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 }}</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">
<view class="title">选择审批流程:</view>
<input type="text" v-model="flowPath" placeholder="请选择" disabled @click="flowPathShow = true">
</view>
<view class="cont_cell" @click="branchShow = true" v-if="flowShow">
<view class="title">审核人:</view>
<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
</view>
<view v-else>
<block v-for="(item,i) in sprecord" :key="i">
<view class="record" style="display: flex;">
<view class="circle"></view>
<text class="text">第{{i+1}}级 {{item.flow_type_txt}}
</text>
</view>
<view class="" v-if="item.user_id_info.length>0&&item.user_id_info" style='padding-left: 20rpx;padding-right: 20rpx;margin-bottom: 20rpx;'>
<view class="" v-for="(items,k) in item.user_id_info" style="display: flex;margin-right: 20rpx;">
<view class=""
style="width: 30rpx;height: 30rpx;border-radius: 50%; margin-left: 20rpx;margin-right: 10rpx;">
<image :src="`${httpRequestUrl}`+items.thumb" mode=""
style="width: 30rpx;height: 30rpx;border-radius: 50%;margin-top: 5rpx;"></image>
</view>
<view class=""> {{items.name}}</view>
</view>
</view>
</block>
</view>
<view class="cont_cell" @click="branchShow1 = true">
<view class="title">抄送人:</view>
<input type="text" v-model="copy_names" placeholder="请选择" disabled>
</view>
</view>
<view class="bot_btn">
<view class="reset" @click="reset">重置</view>
<view class="submit_btn" @click="submiteBtn">立即提交</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 {
flowusers,
userdepartment,
getemployee,
addinvoice,
invoicecate,
appexpenseview,
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'
import {
HTTP_REQUEST_URL
} from '@/config/app.js'
export default {
components: {
lsjUpload
},
data() {
return {
selected: "2",
defaultIndex: [0, 0, 0],
defaultIndex1: [0, 0, 0],
timestamp: '',
personInfo: {},
company: '',
listobj: {},
project1: '',
project2: '',
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: '',
isshow: true,
flowShow: true,
sprecord: [],
columns1: [{
name: '增值税专用发票',
id: 1,
},
{
name: '普通发票',
id: 2,
}, {
name: '专用发票',
id: 3
}
],
list: [{
cate_title: "",
amount: '',
remarks: ''
}],
fileOption: {},
files: new Map(),
fileArray: [],
dnum: 0
}
},
onLoad(option) {
this.detail(option.type)
},
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()
},
computed: {
httpRequestUrl() {
return HTTP_REQUEST_URL;
}
},
methods: {
//选择流程id
async flowuser(id) {
let res = await flowusers({
id: id
})
if (res.data.flow_data.length > 0) {
this.flowShow = false
this.sprecord = res.data.flow_data
} else {
this.flowShow = true
}
},
async detail(id) {
let res = await invoiceview({
id: id
})
console.log(res.data.detail.invoice_subject, this.flowPathSheet, '111')
// 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.copy_names = res.data.detail.copy_user
this.listobj.id = res.data.detail.id
this.listobj.invoice_account = res.data.detail.invoice_account
this.listobj.invoice_address = res.data.detail.invoice_address
this.listobj.invoice_bank = res.data.detail.invoice_bank
this.listobj.invoice_banking = res.data.detail.invoice_banking
this.listobj.invoice_phone = res.data.detail.invoice_phone
this.listobj.invoice_subject = res.data.detail.invoice_subject
this.listobj.invoice_tax = res.data.detail.invoice_tax
this.listobj.invoice_title = res.data.detail.invoice_title
this.listobj.invoice_type = res.data.detail.invoice_type
this.listobj.amount = res.data.detail.amount
this.listobj.type = res.data.detail.type
this.selected = res.data.detail.type.toString()
// console.log(res.data.detail.type)
if (res.data.detail.type == 2) {
this.isshow = false
} else {
this.isshow = true
}
},
reset() {
this.list = [{
name: "",
num: ''
}],
this.listobj = {}
this.fileArray = []
this.copy_names = ''
this.flowPath = ''
this.check_admin_name = ''
this.project1 = ''
this.project2 = ''
},
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
if (e.detail.value == 2) {
this.isshow = false
} else {
this.isshow = true
}
},
//弹窗显示
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.listobj)
let fileIds = [];
this.fileArray.map((item, i) => {
fileIds.push(item.id)
});
if (this.fileArray.length > 0) {
this.listobj.file_ids = fileIds.join(',');
}
this.listobj.flow_id = this.flow_id
if (this.listobj.invoice_phone) {
const pattern = /^1[3456789]\d{9}$/;
if (!pattern.test(this.listobj.invoice_phone)) return Toast('手机号输入错误')
}
if (!this.listobj.invoice_title) return Toast('请输入开票抬头')
if (!this.listobj.type) return Toast('请选择抬头类型')
if (!this.listobj.invoice_subject) return Toast('请输入开票主体')
if (!this.listobj.amount) return Toast('请输入发票金额')
if (!this.listobj.invoice_type) return Toast('请选择开票类型')
const res = await addinvoice(this.listobj)
if (res.code == 0) {
uni.navigateBack({
delta: 1
})
}
Toast('提交成功')
},
//新增
addleava() {
this.list.push({
name: "",
num: ''
})
},
deleteleava(item, index) {
if (this.list.length > 1) {
this.list.splice(0, 1)
} else {
Toast('不能删除')
}
},
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
this.flowuser(value.id)
},
/** 类型 */
leavaType(e) {
this.list[this.dnum].cate_title = e.name
this.list[this.dnum].id = e.id
this.leavaTypeShow = false
},
leavaType1(e) {
console.log(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;
}
/deep/.u-action-sheet__item-wrap {
overflow: auto;
max-height: 50vh;
}
.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: 50%;
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;
input {
width: 460rpx;
}
.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;
}
}
.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>