<template>
|
<view class="full-page ">
|
<view class="list">
|
<up-form labelPosition="left" :model="state.publicJob" ref="formRef" labelWidth='140rpx'>
|
<view class="content c-p-l-24 c-p-b-120">
|
<up-form-item label="部门" prop="departmentId" required :borderBottom='false' ref="item1">
|
<up-input v-model="state.publicJob.departmentName" border="none" placeholder="请点击选择部门"
|
readonly></up-input>
|
</up-form-item>
|
<up-form-item label="姓名" prop="name" required :borderBottom='false' ref="item1">
|
<up-input v-model="state.publicJob.name" border="none" placeholder="请填写姓名" readonly></up-input>
|
</up-form-item>
|
<up-form-item label="金额" prop="planMoney" required :borderBottom='false' ref="item1">
|
<up-input v-model="state.publicJob.planMoney" border="none" placeholder="请填写金额"
|
type="digit"></up-input>
|
</up-form-item>
|
<up-form-item label="科目" prop="rewardContent" required :borderBottom='false' ref="item1"
|
@click='openKemuPicker'>
|
<up-input v-model="state.publicJob.rewardContent" border="none" placeholder="请点击选择科目"
|
readonly></up-input>
|
</up-form-item>
|
<up-form-item label="摘要" prop="planContent" required :borderBottom='false' ref="item1">
|
<!-- <view class="c-p-b-20"> -->
|
<up-textarea v-model="state.publicJob.planContent" border="none" height='35'
|
placeholder="请填写摘要"></up-textarea>
|
<!-- </view> -->
|
</up-form-item>
|
<up-form-item label="发票" prop="houbufapiaoStatus" required :borderBottom='false' ref="item1">
|
<u-radio-group v-model="state.publicJob.houbufapiaoStatus" placement="row"
|
@change="checkboxChange">
|
<u-radio :customStyle="{marginBottom: '8px',marginRight:'8px'}" label="有发票" name="You"
|
usedAlone />
|
<u-radio :customStyle="{marginBottom: '8px',marginRight:'8px'}" label="后补发票"
|
name="HouBuFaPiao" usedAlone />
|
<u-radio :customStyle="{marginBottom: '8px'}" label="没发票" name="Wu" usedAlone />
|
</u-radio-group>
|
</up-form-item>
|
<up-form-item label="上传发票" prop="idCardFace" required
|
v-if='state.publicJob.houbufapiaoStatus=="You"'>
|
<tem-upload-file immediate :url="`${apiBaseUrl}/api/UpFile/UpdateFile`" ref="uploadF"
|
fileType='all' @success="success('Invoice',$event)" @error="errorInvoice"
|
@complete="completeInvoice('Invoice',$event)">
|
</tem-upload-file>
|
</up-form-item>
|
<up-form-item label="上传附件" prop="idCardFace">
|
<tem-upload-file immediate :url="`${apiBaseUrl}/api/UpFile/UpdateFile`" ref="uploadB"
|
fileType="all" @success="success('File',$event)" @error="errorInvoice"
|
@complete="completeInvoice('',$event)">
|
</tem-upload-file>
|
</up-form-item>
|
</view>
|
</up-form>
|
</view>
|
<view class="tabbtns">
|
<view class="chuany-flex">
|
<up-button type="primary" :text="'保存报销'" :loading='isLoading' :loadingText="'保存中'"
|
@click="saveOrder('Uncommitted')" v-if='state.publicJob.approvalStatus=="Uncommitted"'></up-button>
|
<up-button color='#fece01' :text="state.publicJob.approvalStatus!=='Uncommitted'?'修改报销':'提交报销'" :loading='isLoading'
|
:loadingText="state.publicJob.approvalStatus!=='Uncommitted'?'修改中':'提交中'" @click="saveOrder('unApproval')"></up-button>
|
</view>
|
|
</view>
|
<!-- <u-picker :show="pickerShow" :columns="departList" keyName="name" @cancel='openPicker'
|
:defaultIndex='defaultIndex' @confirm='confirmPicker'></u-picker> -->
|
<u-picker :show="kemuPicker" :columns="kemuList" keyName="subjectName" @cancel='openKemuPicker'
|
:defaultIndex='defaultIndex' @confirm='confirmKemuPicker'></u-picker>
|
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
apiBaseUrl
|
} from '@/common/setting/constVarsHelper.js';
|
import {
|
ref,
|
reactive,
|
getCurrentInstance,
|
onMounted,
|
computed
|
} from 'vue';
|
import {
|
onLoad,
|
onShow,
|
onReady,
|
onHide
|
} from "@dcloudio/uni-app";
|
const {
|
$upload,
|
$api,
|
$util,
|
$db
|
} = getCurrentInstance().appContext.config.globalProperties
|
import {
|
useStore
|
} from 'vuex'
|
const store = useStore()
|
let departList = ref()
|
let kemuList = ref()
|
let defaultIndex = ref([0])
|
let planId = ref('')
|
let state = reactive({
|
publicJob: {
|
departmentId: '', //部门Id
|
departmentName: '',
|
name: '', //姓名
|
rewardResult: '', //科目id
|
rewardContent: '', //科目名称
|
planMoney: '', //金额
|
planContent: '', //摘要
|
houbufapiaoStatus: 'You', //有无发票
|
workPlanAttachments: [], //附件&发票
|
approvalStatus:'Uncommitted'
|
},
|
})
|
onLoad((options) => {
|
let data = $db.get('userInfo').userCompany
|
planId.value = options.planId
|
if (!planId.value) {
|
state.publicJob.departmentId = $db.get('userInfo').oaPermissions.departId
|
state.publicJob.departmentName = $db.get('userInfo').oaPermissions.departmentName
|
state.publicJob.name = $db.get('userInfo').oaPermissions.name
|
}
|
// $api.GetDepartLstt().then(res => {
|
// departList = [res.data]
|
// let index = res.data.findIndex(item => {
|
// return item.keyid == planId.value ? state.publicJob.departmentId : oaPermissions.departId
|
// })
|
// defaultIndex = [index]
|
// })
|
$api.getKeMuList().then(res => {
|
kemuList = [res.data]
|
let obj = kemuList[0].find(item => {
|
return item.subjectName == '差旅费'
|
})
|
state.publicJob.rewardResult = String(obj.keyid)
|
state.publicJob.rewardContent = obj.subjectName
|
dataPlan(planId.value)
|
})
|
})
|
let rules = {
|
name: {
|
required: true,
|
message: '姓名不能为空',
|
trigger: ['blur', 'change']
|
},
|
departId: {
|
required: true,
|
message: '部门不能为空',
|
trigger: ['blur', 'change']
|
},
|
planMoney: {
|
required: true,
|
message: '金额不能为空',
|
trigger: ['blur', 'change']
|
},
|
planContent: {
|
required: true,
|
message: '摘要不能为空',
|
trigger: ['blur', 'change']
|
},
|
rewardContent: {
|
required: true,
|
message: '科目不能为空',
|
trigger: ['blur', 'change']
|
}
|
}
|
const formRef = ref(null);
|
onReady(() => {
|
formRef.value.setRules(rules);
|
})
|
onShow(() => {
|
console.log('Show-------------', state.publicJob);
|
})
|
onMounted(() => {
|
formRef.value.setRules(rules);
|
console.log(formRef.value, 'formRef'); // 访问子组件Demo中的属性
|
|
});
|
let oaPermissions = computed(() => store.getters.userInfo.oaPermissions || {})
|
let dateType = ref()
|
let minDate = $util.formatDate(new Date())
|
let sDate = $util.formatDate(new Date(), null, 1)
|
let eDate = '结束日期'
|
let workDate = ref('')
|
let workTime = ref('8:00至18:00')
|
let datePickerShow = ref(false)
|
let pickerShow = ref(false)
|
let kemuPicker = ref(false)
|
let isLoading = ref(false)
|
let editItem = null
|
let uploadF = ref()
|
let uploadB = ref()
|
|
const changStyle = (val) => {
|
state.publicJob.workerType = val
|
if (val == 0) {
|
state.publicJob.zixinganpai = false
|
}
|
}
|
const dataPlan = (planId) => {
|
if (planId) {
|
$api.workerGetPlanInfo(planId).then(res => {
|
state.publicJob = {
|
keyid: res.data.keyid,
|
departmentId: res.data.departId, //部门Id
|
departmentName: $db.get('userInfo').oaPermissions.departmentName,
|
name: res.data.planPeople, //姓名
|
rewardResult: res.data.rewardResult, //科目id
|
rewardContent: res.data.rewardContent, //科目名称
|
planMoney: String(res.data.planMoney), //金额
|
planContent: res.data.planContent, //摘要
|
houbufapiaoStatus: res.data.houbufapiaoStatus, //有无发票
|
workPlanAttachments: res.data.workPlanAttachments ,//附件&发票
|
approvalStatus:res.data.approvalStatus
|
}
|
state.publicJob.workPlanAttachments.forEach(item => {
|
if (item.attachmentType == 1) {
|
uploadF.value.urls.push(item.planAttachment)
|
uploadF.value.status.push('success')
|
} else {
|
uploadB.value.urls.push(item.planAttachment)
|
uploadB.value.status.push('success')
|
}
|
})
|
let index = kemuList[0].findIndex(item => {
|
return item.keyid == state.publicJob.rewardResult
|
})
|
defaultIndex = [index]
|
console.log(state.publicJob);
|
})
|
|
// state.publicJob = reactive(editItem)
|
// $db.del('editItem')
|
}
|
}
|
const confirmPicker = (arr) => {
|
state.publicJob.departmentId = arr.value[0].keyid
|
state.publicJob.departmentName = arr.value[0].name
|
openPicker()
|
}
|
const confirmKemuPicker = (arr) => {
|
state.publicJob.rewardResult = String(arr.value[0].keyid)
|
state.publicJob.rewardContent = arr.value[0].subjectName
|
openKemuPicker()
|
}
|
const clickTime = (type) => {
|
dateType.value = type
|
datePickerShow.value = !datePickerShow.value
|
}
|
const cancel = () => {
|
datePickerShow.value = !datePickerShow.value
|
}
|
const openPicker = () => {
|
pickerShow.value = !pickerShow.value
|
}
|
const openKemuPicker = () => {
|
kemuPicker.value = !kemuPicker.value
|
}
|
const checkboxChange = () => {
|
|
}
|
const saveOrder = (val) => {
|
if (state.publicJob.houbufapiaoStatus == "You") {
|
let index = state.publicJob.workPlanAttachments.findIndex(item => {
|
return item.attachmentType == 1
|
})
|
if (index == -1) {
|
$util.showToast({
|
title: "选择有发票时，必须上传发票！",
|
})
|
return
|
}
|
|
}
|
formRef.value.validate().then(res => {
|
isLoading.value = true
|
let functionOrder = null
|
if (planId.value) {
|
functionOrder = $api.EditOder
|
} else {
|
functionOrder = $api.CreatOder
|
}
|
val ? state.publicJob.approvalStatus = val : ''
|
functionOrder(state.publicJob).then(res => {
|
if (res.code == 1) {
|
$util.showToast({
|
title: state.publicJob.approvalStatus=='Uncommitted' ? '保存成功！' : "提交成功！",
|
icon: "success"
|
})
|
// if (editItem) {
|
// uni.navigateBack()
|
// } else if (val == 'continue') {
|
state.publicJob = {
|
departmentId: $db.get('userInfo').oaPermissions.departId, //部门Id
|
departmentName: $db.get('userInfo').oaPermissions.departmentName,
|
name: $db.get('userInfo').oaPermissions.name, //姓名
|
rewardResult: '', //科目id
|
rewardContent: '', //科目名称
|
planMoney: '', //金额
|
planContent: '', //摘要
|
houbufapiaoStatus: 'You', //有无发票
|
workPlanAttachments: [], //附件&发票
|
approvalStatus:'Uncommitted',
|
}
|
uploadB.value.urls = []
|
uploadB.value.status = []
|
uploadF.value.urls = []
|
uploadF.value.status = []
|
// } else {
|
// uni.redirectTo({
|
// url: '/pages/reimbursement/myreim'
|
// })
|
// }
|
|
} else {
|
$util.showToast({
|
title: res.error
|
})
|
}
|
isLoading.value = false
|
})
|
})
|
}
|
//选择图片或上传完成时触发
|
const completeInvoice = (val, e) => {
|
if (e.action == 'delete') {
|
// 删除处理
|
state.publicJob.workPlanAttachments = state.publicJob.workPlanAttachments.filter(item => {
|
return item.attachmentType == (val == "Invoice" ? 2 : 1)
|
})
|
e.urls.forEach(item => {
|
let obj = {}
|
obj.attachmentType = val == "Invoice" ? 1 : 2
|
obj.planAttachment = item //发票
|
state.publicJob.workPlanAttachments.push(obj)
|
})
|
return
|
}
|
// $util.pathToBase64(e.urls[0]).then(res => {
|
// idCardFaceBase64.value = res
|
// console.log(idCardFaceBase64, idCardFaceBase64.value);
|
// })
|
}
|
const errorInvoice = (e) => {
|
console.log(e, '--------------');
|
}
|
//上传成功时触发
|
const success = (text, e) => {
|
let obj = {}
|
//e.res 为服务器返回数据
|
//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
|
let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
|
if (res.code == 1) {
|
if (res.data && text == 'Invoice') {
|
obj.attachmentType = 1
|
obj.planAttachment = res.data //发票
|
uploadF.value.urls.push(res.data)
|
uploadF.value.urls = uploadF.value.urls.filter(item => {
|
return item.indexOf('https') !== -1
|
})
|
uploadF.value.status.push('success')
|
uploadF.value.status.length = uploadF.value.urls.length
|
} else {
|
obj.attachmentType = 2
|
obj.planAttachment = res.data //附件
|
uploadB.value.urls.push(res.data)
|
uploadB.value.urls = uploadB.value.urls.filter(item => {
|
return item.indexOf('https') !== -1
|
})
|
uploadB.value.status.push('success')
|
uploadB.value.status.length = uploadB.value.urls.length
|
}
|
state.publicJob.workPlanAttachments.push(obj)
|
console.log(state.publicJob.workPlanAttachments);
|
} else {
|
uni.$u.toast(res.error)
|
if (text == 'Invoice') {
|
uploadF.value.deleteImage()
|
} else {
|
uploadB.value.deleteImage()
|
}
|
}
|
|
}
|
</script>
|
|
<style>
|
.list {}
|
|
.u-button {
|
width: 280rpx !important;
|
margin: 0;
|
}
|
|
.content {
|
width: 100%;
|
box-sizing: border-box;
|
background-color: #fff;
|
}
|
|
.u-textarea {
|
padding: 0 !important;
|
}
|
|
.u-form-item__body {
|
padding: 5px 0 !important;
|
}
|
</style>
|
