OA/pages/reimbursementapplication/handle.vue

805 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="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">
<view class="title">原始单据日期:</view>
<input type="text" v-model="listobj.expense_time" disabled placeholder="始单据日期">
</view>
<view class="cont_cell">
<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 >
</view>
<view class="cont_cell">
<view class="title">报销金额:</view>
<input type="number" 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>
<view class="leave_box" style="padding-top: 100rpx; background-color: #fff;">
<!-- 附件 -->
<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 class="upload_people">上传人:{{ item.admin_name }}</view>
</view>
<!-- <u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon> -->
</view>
</block>
</view>
<view class="flow_path">
<view class="cont_cell">
<view class="title">审批流程:</view>
</view>
<view class="cont_cell">
<view class="title">审核状态:</view>
{{listobj.check_status=='0'?'待审核':listobj.check_status=='1'?'审核中':listobj.check_status=='2'?'审核通过':listobj.check_status=='3'?'审核不通过':listobj.check_status=='4'?'审核不通过':'已打款'}}
</view>
<view class="cont_cell">
<view class="title">审核人:</view>
<input type="text" v-model="admin_name" placeholder="请选择" disabled>
</view>
<view class="cont_cell">
<view class="title">抄送人:</view>
<input type="text" v-model="copy_names" placeholder="请选择" disabled>
</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="" v-if='listobj.check_status!=2'>
<view class="title" style="margin-bottom: 30rpx;">审核节点:</view>
<radio-group class="select_group" @change="deliveryWayChangetwo1" >
<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>
<input type="text" v-model="check_admin_name" placeholder="请选择" disabled>
</view>
</label>
</radio-group>
</view>
<view class="cont_cell" style="padding-top: 20rpx;" v-if="listobj.check_status!= 4&&listobj.check_status!=2">
<view class="title" style="width: 200rpx;">审核意见</view>
<textarea v-model="mscontent" placeholder="请输入审核意见" />
</view>
</view>
<view class="bot_btn" v-if='listobj.check_status!=2'>
<view class="reset" @click="appflowcheck()">拒绝</view>
<view class="submit_btn" @click=" appflowcheck1()">通过</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,
appflow_check,
} 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: '',
mscontent: '',
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: '',
admin_name: '',
copy_names: '',
list: [{
cate_title: "",
amount: '',
remarks: ''
}],
fileOption: {},
files: new Map(),
fileArray: [],
dnum: 0,
check_record: [],
check: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()
},
methods: {
async detail(id) {
let res = await appexpenseview({
id: id
})
// console.log(res,'111')
this.listobj.code = res.data.detail.code
this.listobj.id = 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.admin_name = res.data.detail.check_user
this.copy_names = res.data.detail.copy_user
this.project = res.data.detail.ptname
this.listobj.flow_id = res.data.flows.id
this.listobj.ptid = res.data.detail.ptid
this.check_record = res.data.check_record
this.listobj.check_status = res.data.detail.check_status
this.fileArray = res.data.detail.fileArray.map(function(obj) {
return {
name: obj.name,
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);
}
}
},
//流程审批
async appflowcheck() {
let data = {
id: this.listobj.id,
type: 2,
check_node: this.check,
content: this.mscontent,
check: 2,
check_admin_ids: this.listobj.check_admin_ids
}
let res = await appflow_check(data)
Toast(res.msg)
},
async appflowcheck1() {
console.log(this.listobj)
let data = {
id: this.listobj.id,
type: 2,
check_node: this.check,
check: 1,
content: this.mscontent,
check_admin_ids: this.listobj.check_admin_ids
}
let res = await appflow_check(data)
console.log(res)
if(res.code==0){
uni.navigateBack({
delta:1
})
}
Toast(res.msg)
},
bianjiBtn() {
uni.navigateTo({
url: '/pages/reimbursementapplication/bianji??type=' + this.listobj.id
})
},//选择是否结束
deliveryWayChangetwo1(e) {
console.log(e)
this.check = 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
},
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
},
//新增
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
this.flowPath = res.data[0].name
this.flow_id = res.data[0].id
// 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.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;
}
}
.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;
}
}
.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>