OA/pages/invoice/add.vue

721 lines
17 KiB
Vue
Raw Normal View History

2023-11-05 00:11:08 +08:00
<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" />
</view>
企业
</label>
<label class="radio_select" style="margin-right:15rpx;display: flex;">
<view style="margin-right:5rpx;">
<radio value="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">
<view class="title">选择审批流程</view>
<input type="text" v-model="flowPath" placeholder="请选择" disabled @click="flowPathShow = true">
</view>
<view class="cont_cell" @click="branchShow = true">
<view class="title">审核人</view>
<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
</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 {
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'
export default {
components: {
lsjUpload
},
data() {
return {
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: '',
columns1: [{
name: '企业',
id: 1,
},
{
name: '个人',
id: 2,
}
],
list: [{
cate_title: "",
amount: '',
remarks: ''
}],
fileOption: {},
files: new Map(),
fileArray: [],
dnum: 0
}
},
onLoad() {
},
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: {
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
},
//弹窗显示
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)
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
},
/** 类型 */
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;
}
.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;
.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>