|
@@ -1,5 +1,9 @@
|
1
|
1
|
<template>
|
2
|
|
- <van-form @failed="onFailed" @submit="onSubmit">
|
|
2
|
+ <van-form
|
|
3
|
+ @failed="onFailed"
|
|
4
|
+ @submit="onSubmit"
|
|
5
|
+ :readonly="formData.isFinished"
|
|
6
|
+ >
|
3
|
7
|
<h2 :style="{ textAlign: 'center' }">{{ formData.invoiceName }}</h2>
|
4
|
8
|
<van-cell-group title="报销人信息">
|
5
|
9
|
<van-field
|
|
@@ -7,7 +11,7 @@
|
7
|
11
|
v-model="formData.invoiceOrgName"
|
8
|
12
|
name="invoiceOrgName"
|
9
|
13
|
readonly
|
10
|
|
- @click="showOrgPicker = true"
|
|
14
|
+ @click="changeOrg"
|
11
|
15
|
placeholder="请输入所属公司"
|
12
|
16
|
:rules="[{ required: true, message: '请输入所属公司' }]"
|
13
|
17
|
/>
|
|
@@ -88,43 +92,47 @@
|
88
|
92
|
placeholder="请输入开户行账号"
|
89
|
93
|
:rules="[{ required: true, message: '请输入开户行账号' }]"
|
90
|
94
|
/>
|
91
|
|
- </van-cell-group>
|
92
|
|
-
|
93
|
|
- <van-cell-group title="报销信息">
|
94
|
|
- <van-cell title="报销项目">
|
95
|
|
- <template #value>
|
96
|
|
- <span style="color: #000">培训费</span>
|
97
|
|
- </template>
|
98
|
|
- </van-cell>
|
99
|
|
- <van-cell title="开票金额">
|
100
|
|
- <template #value>
|
101
|
|
- <span style="color: #f00">600.00</span>
|
102
|
|
- </template>
|
103
|
|
- </van-cell>
|
104
|
|
- <van-cell title="报销项目">
|
105
|
|
- <template #value>
|
106
|
|
- <span style="color: #000">住宿费</span>
|
107
|
|
- </template>
|
108
|
|
- </van-cell>
|
109
|
|
- <van-cell title="开票金额">
|
110
|
|
- <template #value>
|
111
|
|
- <span style="color: #f00">1200.00</span>
|
112
|
|
- </template>
|
113
|
|
- </van-cell>
|
114
|
|
- <van-cell title="报销项目">
|
115
|
|
- <template #value>
|
116
|
|
- <span style="color: #000">餐费</span>
|
117
|
|
- </template>
|
118
|
|
- </van-cell>
|
119
|
|
- <van-cell title="开票金额">
|
120
|
|
- <template #value>
|
121
|
|
- <span style="color: #f00">600.00</span>
|
|
95
|
+ <van-field
|
|
96
|
+ name="radio"
|
|
97
|
+ label="是否合开"
|
|
98
|
+ error-message="如果合开请和报销专员联系"
|
|
99
|
+ >
|
|
100
|
+ <template #input>
|
|
101
|
+ <van-radio-group
|
|
102
|
+ v-model="formData.mergeRemark"
|
|
103
|
+ direction="horizontal"
|
|
104
|
+ :disabled="formData.isFinished"
|
|
105
|
+ >
|
|
106
|
+ <van-radio name="是">是</van-radio>
|
|
107
|
+ <van-radio name="否">否</van-radio>
|
|
108
|
+ </van-radio-group>
|
122
|
109
|
</template>
|
123
|
|
- </van-cell>
|
|
110
|
+ </van-field>
|
124
|
111
|
</van-cell-group>
|
125
|
112
|
|
|
113
|
+ <van-cell-group v-if="itemList.length != 0" title="报销信息">
|
|
114
|
+ <div class="itembox" v-for="item in itemList" :key="item.invoiceItemId">
|
|
115
|
+ <van-cell title="报销项目">
|
|
116
|
+ <template #value>
|
|
117
|
+ <span style="color: #000">{{ item.name }}</span>
|
|
118
|
+ </template>
|
|
119
|
+ </van-cell>
|
|
120
|
+ <van-cell title="开票金额">
|
|
121
|
+ <template #value>
|
|
122
|
+ <span style="color: #000">{{ item.charge }}</span>
|
|
123
|
+ </template>
|
|
124
|
+ </van-cell>
|
|
125
|
+ <div class="lastLine" />
|
|
126
|
+ </div>
|
|
127
|
+ </van-cell-group>
|
126
|
128
|
<div style="margin: 16px">
|
127
|
|
- <van-button round block type="primary" native-type="submit">
|
|
129
|
+ <van-button
|
|
130
|
+ v-show="!formData.isFinished"
|
|
131
|
+ round
|
|
132
|
+ block
|
|
133
|
+ type="primary"
|
|
134
|
+ native-type="submit"
|
|
135
|
+ >
|
128
|
136
|
提交
|
129
|
137
|
</van-button>
|
130
|
138
|
</div>
|
|
@@ -134,7 +142,10 @@
|
134
|
142
|
<script setup>
|
135
|
143
|
import { onMounted, reactive, ref } from 'vue';
|
136
|
144
|
import { useRouter } from 'vue-router'
|
137
|
|
-import { getInvoiceModel } from '@/services/invoice'
|
|
145
|
+import { Dialog,Toast } from 'vant'
|
|
146
|
+import dayjs from 'dayjs'
|
|
147
|
+import { getInvoiceModel, setInvoiceDetail } from '@/services/invoice'
|
|
148
|
+import { useModel } from '@zjxpcyc/vue-tiny-store'
|
138
|
149
|
|
139
|
150
|
const formData = reactive({
|
140
|
151
|
//班级名称
|
|
@@ -145,6 +156,7 @@ const formData = reactive({
|
145
|
156
|
personId: undefined,
|
146
|
157
|
personName: undefined,
|
147
|
158
|
orgNameId: undefined,
|
|
159
|
+ endDate: undefined,
|
148
|
160
|
orgId: undefined,
|
149
|
161
|
invoiceOrgName: undefined,
|
150
|
162
|
orgName: undefined,
|
|
@@ -157,13 +169,16 @@ const formData = reactive({
|
157
|
169
|
invoiceItemTplId: undefined,
|
158
|
170
|
itemName: undefined,
|
159
|
171
|
charge: undefined,
|
160
|
|
- mergeRemark: undefined,
|
161
|
|
- stayRemark: undefined,
|
|
172
|
+ //是否结束
|
|
173
|
+ isFinished: false,
|
|
174
|
+ mergeRemark: '否',
|
162
|
175
|
status: undefined
|
163
|
176
|
})
|
|
177
|
+const itemList = ref([])
|
164
|
178
|
const showOrgPicker = ref(false)
|
165
|
179
|
const showPersonPicker = ref(false)
|
166
|
180
|
const router = useRouter();
|
|
181
|
+const { user } = useModel('user')
|
167
|
182
|
|
168
|
183
|
// 校验函数返回 true 表示校验通过,false 表示不通过
|
169
|
184
|
const validator = (val) => /1\d{10}/.test(val);
|
|
@@ -172,9 +187,27 @@ const validator = (val) => /1\d{10}/.test(val);
|
172
|
187
|
const validatorMessage = (val) => `${val} 不合法,请重新输入`;
|
173
|
188
|
|
174
|
189
|
onMounted(() => {
|
|
190
|
+ //不是扫码进入
|
|
191
|
+ if (!router.currentRoute._rawValue.params.invoiceId) {
|
|
192
|
+ Dialog.alert({
|
|
193
|
+ message: '请退出页面重新扫码进入'
|
|
194
|
+ }).then(() => { })
|
|
195
|
+ formData.isFinished = ture
|
|
196
|
+ return
|
|
197
|
+ }
|
|
198
|
+ //过期
|
|
199
|
+ let endDate = router.currentRoute._rawValue.params.endDate
|
|
200
|
+ if (dayjs().isAfter(dayjs(endDate))) {
|
|
201
|
+ formData.isFinished = true
|
|
202
|
+ Dialog.alert({
|
|
203
|
+ message: '该班次已截止如有问题请联系报销助理'
|
|
204
|
+ }).then(() => { })
|
|
205
|
+ }
|
175
|
206
|
formData.invoiceId = router.currentRoute._rawValue.params.invoiceId
|
176
|
207
|
formData.invoiceName = router.currentRoute._rawValue.params.invoiceName
|
177
|
208
|
formData.status = router.currentRoute._rawValue.params.status
|
|
209
|
+ formData.endDate = endDate
|
|
210
|
+ formData.mergeRemark = '否'
|
178
|
211
|
})
|
179
|
212
|
|
180
|
213
|
// 校验函数可以返回 Promise,实现异步校验
|
|
@@ -195,21 +228,38 @@ const onOrgConfirm = (value) => {
|
195
|
228
|
formData.orgId = value.invoiceOrgId
|
196
|
229
|
formData.invoiceOrgName = value.name
|
197
|
230
|
formData.personName = ''
|
198
|
|
- formData.invoicePersonId=''
|
|
231
|
+ formData.invoicePersonId = ''
|
199
|
232
|
}
|
200
|
233
|
showOrgPicker.value = false;
|
201
|
234
|
};
|
|
235
|
+const changeOrg = () => {
|
|
236
|
+ if (!formData.isFinished) {
|
|
237
|
+ showOrgPicker.value = true
|
|
238
|
+ }
|
|
239
|
+}
|
202
|
240
|
const showOrgPopup = () => {
|
203
|
|
- if (formData.orgId) {
|
204
|
|
- showPersonPicker.value = true
|
205
|
|
- } else {
|
206
|
|
- alert('请先选择所属公司')
|
|
241
|
+ if (!formData.isFinished) {
|
|
242
|
+ if (formData.orgId) {
|
|
243
|
+ showPersonPicker.value = true
|
|
244
|
+ } else {
|
|
245
|
+ Dialog.alert({
|
|
246
|
+ message: '请先选择所属公司'
|
|
247
|
+ }).then(() => { })
|
|
248
|
+ }
|
207
|
249
|
}
|
208
|
250
|
}
|
209
|
251
|
//获取模板详情
|
210
|
252
|
const getDetail = () => {
|
211
|
|
- getInvoiceModel(formData.invoiceId, { invoicePersonId: formData.invoicePersonId,personId:formData.invoicePersonId }).then(res => {
|
212
|
|
- console.log(res)
|
|
253
|
+ getInvoiceModel(formData.invoiceId, { invoicePersonId: formData.invoicePersonId, personId: user.value.personId }).then(res => {
|
|
254
|
+ const info = {
|
|
255
|
+ ...(res.detail || res.tpl),
|
|
256
|
+ invoicePersonId: formData.invoicePersonId,
|
|
257
|
+ personName: formData.personName,
|
|
258
|
+ orgId: formData.orgId,
|
|
259
|
+ invoiceOrgName: formData.invoiceOrgName
|
|
260
|
+ }
|
|
261
|
+ Object.assign(formData, info)
|
|
262
|
+ itemList.value = info.itemList
|
213
|
263
|
}).catch(err => {
|
214
|
264
|
console.log(err);
|
215
|
265
|
})
|
|
@@ -218,12 +268,45 @@ const onPersonConfirm = (value) => {
|
218
|
268
|
if (value) {
|
219
|
269
|
console.log(value);
|
220
|
270
|
formData.personName = value.name
|
221
|
|
- formData.invoicePersonId= value.invoicePersonId
|
|
271
|
+ formData.invoicePersonId = value.invoicePersonId
|
222
|
272
|
getDetail()
|
223
|
273
|
}
|
224
|
274
|
showPersonPicker.value = false;
|
225
|
275
|
};
|
226
|
276
|
const onSubmit = (val) => {
|
227
|
|
- console.info(formData)
|
|
277
|
+ console.log(formData);
|
|
278
|
+ if (itemList.value.length == 0) {
|
|
279
|
+ Dialog.alert({
|
|
280
|
+ message: '未找到报销项目请联系报销专员'
|
|
281
|
+ }).then(() => { })
|
|
282
|
+ return;
|
|
283
|
+ }
|
|
284
|
+ setInvoiceDetail(formData.invoiceId, formData).then(() => {
|
|
285
|
+ Toast.success('提交成功');
|
|
286
|
+ setTimeout(() => {
|
|
287
|
+ router.back()
|
|
288
|
+ }, 1000);
|
|
289
|
+ }).catch(err => {
|
|
290
|
+ console.log(err);
|
|
291
|
+ })
|
|
292
|
+}
|
|
293
|
+</script>
|
|
294
|
+<style lang="less" scoped>
|
|
295
|
+.lastLine::after {
|
|
296
|
+ position: absolute;
|
|
297
|
+ box-sizing: border-box;
|
|
298
|
+ content: " ";
|
|
299
|
+ pointer-events: none;
|
|
300
|
+ right: var(--van-padding-md);
|
|
301
|
+ bottom: 0;
|
|
302
|
+ left: var(--van-padding-md);
|
|
303
|
+ border-bottom: 1px solid var(--van-cell-border-color);
|
|
304
|
+ transform: scaleY(0.5);
|
|
305
|
+}
|
|
306
|
+.cellClassName {
|
|
307
|
+ .van-cell__value {
|
|
308
|
+ min-width: 80% !important; //可根据自己需求设定值
|
|
309
|
+ text-align: left !important;
|
|
310
|
+ }
|
228
|
311
|
}
|
229
|
|
-</script>
|
|
312
|
+</style>
|