OA/pages/reimbursementapplication/bianji.vue

785 lines
18 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="personInfo.name" disabled placeholder="报销人">
</view>
<view class="cont_cell">
<view class="title">报销部门:</view>
<input type="text" v-model="personInfo.department_name" disabled placeholder="报销部门">
</view>
<view class="cont_cell">
<view class="title">报销凭证编号:</view>
<input type="text" v-model="listobj.code" placeholder="报销凭证编号">
</view>
<view class="cont_cell" @click="timeShow=true">
<view class="title">原始单据日期:</view>
<input type="text" v-model="listobj.expense_time" disabled placeholder="始单据日期">
</view>
<view class="cont_cell" @click="timeShow1=true">
<view class="title">入账月份:</view>
<input type="text" v-model="listobj.income_month" disabled placeholder="入账月份">
</view>
<view class="leava_type flex_a_c">
<view class="title">关联项目:</view>
<input type="text" v-model="project" placeholder="请选择" disabled @click="leavaShow1">
</view>
</view>
<view class="leave_box">
<view class="" v-for="(item,i) in list" :key='i'>
<view class="leava_type flex_a_c">
<view class="title">报销项目:</view>
<input type="text" v-model="item.cate_title" placeholder="请选择" disabled @click="leavaShow(item,i)">
</view>
<view class="cont_cell">
<view class="title">报销金额:</view>
<input type="text" v-model="item.amount" placeholder="报销金额">
</view>
<view class="cont_cell">
<view class="title">备注:</view>
<input type="text" v-model="item.remarks" placeholder="备注">
</view>
</view>
<view class="" style="display: flex; justify-content: space-around;padding-top: 20rpx;">
<u-icon name="plus-circle" color="#333333" size="28" @click="addleava"></u-icon>
<u-icon name="minus-circle" color="#333333" size="28" @click="deleteleava(item,index)"></u-icon>
</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>
<!-- <u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon> -->
</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="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,
appexpense,
projectlist,
appexpenseview,
flowusers
} from '@/api/oa.js'
import {
HTTP_REQUEST_URL
} from '@/config/app.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: {},
project: '',
timeShow: false,
timeShow1: false,
branchShow: false,
flowPathShow: false,
leavaTypeShow: false,
leavaTypeShow1: false,
branchColumns: [],
branchColumns1: [],
flowPathSheet: [],
actions4: [],
branchShow1: false,
flowPath: '',
columns: [],
check_admin_name: '',
copy_names: '',
flowShow: true,
sprecord: [],
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.getPersonInfo()
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 appexpenseview({
id: id
})
// console.log(res,'111')
this.listobj.code = res.data.detail.code
this.listobj.id = res.data.detail.id
this.list = res.data.detail.list
this.listobj.expense_time = res.data.detail.expense_time
this.listobj.income_month = res.data.detail.income_month
this.project = res.data.detail.ptname
this.listobj.flow_id = res.data.flows.id
this.listobj.ptid = res.data.detail.ptid
this.personInfo.name = res.data.detail.create_user
this.personInfo.department_name = res.data.detail.department
this.fileArray = res.data.detail.fileArray.map(function(obj) {
return {
name: obj.name,
filepath: obj.filepath,
fileext: obj.fileext,
filesize: obj.filesize
};
});
// console.log(this.fileArray,'11111111111', res.data.detail)
},
reset() {
this.list = [{
name: "",
num: ''
}],
this.listobj = {}
this.fileArray = []
this.copy_names = ''
this.flowPath = ''
this.check_admin_name = ''
},
async getDocumentList1() {
let res = await projectlist({
page: 1,
limit: 10000,
})
this.actions4 = res.data.data.map((step, index) => {
return {
name: step.name,
id: step.id,
};
});
console.log(this.actions4)
},
//获取部门
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);
}
}
},
//弹窗显示
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
},
timeConfirm(e, i) {
this.listobj.expense_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
this.timeShow = false
},
timeConfirm1(e, i) {
this.listobj.income_month = uni.$u.timeFormat(e.value, 'yyyy-mm')
this.timeShow1 = false
},
async submiteBtn() {
console.log(this.list)
let fileIds = [];
this.fileArray.map((item, i) => {
fileIds.push(item.id)
});
this.listobj.amount = this.list.map(item => item.amount);
this.listobj.cate_id = this.list.map(item => item.id);
this.listobj.expense_id = this.list.map(item => item.id);
this.listobj.remarks = this.list.map(item => item.remarks);
this.listobj.flow_id = this.flow_id
if (this.fileArray.length > 0) {
this.listobj.file_ids = fileIds.join(',');
}
const res = await appexpense(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 getPersonInfo() {
const res = await getPersonInfoApi()
this.personInfo = res.data
},
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 appexpenseflow({})
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) {
this.project = e.name
this.listobj.ptid = 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>