.

package.json

     "@zjxpcyc/vue-tiny-store": "^1.0.1",
     "axios": "^0.27.2",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.3",
     "nprogress": "^0.2.0",
     "vant": "^3.5.2",
     "vue": "^3.2.25",

src/pages/index.vue

 const formData = reactive({
   data: {
     //班级名称
-    invoiceId: 'f11ab8d28fd097e7aa4877ae7068a876',
+    invoiceId: 'e288229edfd3cdd2eaac125b65eca10e',
     endDate: undefined,
     name: undefined,
     status: 1
   params: { 
     invoiceId: formData.data.invoiceId,
     invoiceName: formData.data.name,
+    endDate:formData.data.endDate,
     status:formData.data.status
   } })
 }

src/pages/invoice/fill.vue

 <template>
-  <van-form @failed="onFailed" @submit="onSubmit">
+  <van-form
+    @failed="onFailed"
+    @submit="onSubmit"
+    :readonly="formData.isFinished"
+  >
     <h2 :style="{ textAlign: 'center' }">{{ formData.invoiceName }}</h2>
     <van-cell-group title="报销人信息">
       <van-field
         v-model="formData.invoiceOrgName"
         name="invoiceOrgName"
         readonly
-        @click="showOrgPicker = true"
+        @click="changeOrg"
         placeholder="请输入所属公司"
         :rules="[{ required: true, message: '请输入所属公司' }]"
       />
         placeholder="请输入开户行账号"
         :rules="[{ required: true, message: '请输入开户行账号' }]"
       />
-    </van-cell-group>
-
-    <van-cell-group title="报销信息">
-      <van-cell title="报销项目">
-        <template #value>
-          <span style="color: #000">培训费</span>
-        </template>
-      </van-cell>
-      <van-cell title="开票金额">
-        <template #value>
-          <span style="color: #f00">600.00</span>
-        </template>
-      </van-cell>
-      <van-cell title="报销项目">
-        <template #value>
-          <span style="color: #000">住宿费</span>
-        </template>
-      </van-cell>
-      <van-cell title="开票金额">
-        <template #value>
-          <span style="color: #f00">1200.00</span>
-        </template>
-      </van-cell>
-      <van-cell title="报销项目">
-        <template #value>
-          <span style="color: #000">餐费</span>
-        </template>
-      </van-cell>
-      <van-cell title="开票金额">
-        <template #value>
-          <span style="color: #f00">600.00</span>
+      <van-field
+        name="radio"
+        label="是否合开"
+        error-message="如果合开请和报销专员联系"
+      >
+        <template #input>
+          <van-radio-group
+            v-model="formData.mergeRemark"
+            direction="horizontal"
+            :disabled="formData.isFinished"
+          >
+            <van-radio name="是">是</van-radio>
+            <van-radio name="否">否</van-radio>
+          </van-radio-group>
         </template>
-      </van-cell>
+      </van-field>
     </van-cell-group>
 
+    <van-cell-group v-if="itemList.length != 0" title="报销信息">
+      <div class="itembox" v-for="item in itemList" :key="item.invoiceItemId">
+        <van-cell title="报销项目">
+          <template #value>
+            <span style="color: #000">{{ item.name }}</span>
+          </template>
+        </van-cell>
+        <van-cell title="开票金额">
+          <template #value>
+            <span style="color: #000">{{ item.charge }}</span>
+          </template>
+        </van-cell>
+        <div class="lastLine" />
+      </div>
+    </van-cell-group>
     <div style="margin: 16px">
-      <van-button round block type="primary" native-type="submit">
+      <van-button
+        v-show="!formData.isFinished"
+        round
+        block
+        type="primary"
+        native-type="submit"
+      >
         提交
       </van-button>
     </div>
 <script setup>
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router'
-import { getInvoiceModel } from '@/services/invoice'
+import { Dialog,Toast } from 'vant'
+import dayjs from 'dayjs'
+import { getInvoiceModel, setInvoiceDetail } from '@/services/invoice'
+import { useModel } from '@zjxpcyc/vue-tiny-store'
 
 const formData = reactive({
   //班级名称
   personId: undefined,
   personName: undefined,
   orgNameId: undefined,
+  endDate: undefined,
   orgId: undefined,
   invoiceOrgName: undefined,
   orgName: undefined,
   invoiceItemTplId: undefined,
   itemName: undefined,
   charge: undefined,
-  mergeRemark: undefined,
-  stayRemark: undefined,
+  //是否结束
+  isFinished: false,
+  mergeRemark: '否',
   status: undefined
 })
+const itemList = ref([])
 const showOrgPicker = ref(false)
 const showPersonPicker = ref(false)
 const router = useRouter();
+const { user } = useModel('user')
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 const validator = (val) => /1\d{10}/.test(val);
 const validatorMessage = (val) => `${val} 不合法，请重新输入`;
 
 onMounted(() => {
+  //不是扫码进入
+  if (!router.currentRoute._rawValue.params.invoiceId) {
+    Dialog.alert({
+      message: '请退出页面重新扫码进入'
+    }).then(() => { })
+    formData.isFinished = ture
+    return
+  }
+  //过期
+  let endDate = router.currentRoute._rawValue.params.endDate
+  if (dayjs().isAfter(dayjs(endDate))) {
+    formData.isFinished = true
+    Dialog.alert({
+      message: '该班次已截止如有问题请联系报销助理'
+    }).then(() => { })
+  }
   formData.invoiceId = router.currentRoute._rawValue.params.invoiceId
   formData.invoiceName = router.currentRoute._rawValue.params.invoiceName
   formData.status = router.currentRoute._rawValue.params.status
+  formData.endDate = endDate
+  formData.mergeRemark = '否'
 })
 
 // 校验函数可以返回 Promise，实现异步校验
     formData.orgId = value.invoiceOrgId
     formData.invoiceOrgName = value.name
     formData.personName = ''
-    formData.invoicePersonId=''
+    formData.invoicePersonId = ''
   }
   showOrgPicker.value = false;
 };
+const changeOrg = () => {
+  if (!formData.isFinished) {
+    showOrgPicker.value = true
+  }
+}
 const showOrgPopup = () => {
-  if (formData.orgId) {
-    showPersonPicker.value = true
-  } else {
-    alert('请先选择所属公司')
+  if (!formData.isFinished) {
+    if (formData.orgId) {
+      showPersonPicker.value = true
+    } else {
+      Dialog.alert({
+        message: '请先选择所属公司'
+      }).then(() => { })
+    }
   }
 }
 //获取模板详情
 const getDetail = () => {
-  getInvoiceModel(formData.invoiceId, { invoicePersonId: formData.invoicePersonId,personId:formData.invoicePersonId }).then(res => {
-    console.log(res)
+  getInvoiceModel(formData.invoiceId, { invoicePersonId: formData.invoicePersonId, personId: user.value.personId }).then(res => {
+    const info = {
+      ...(res.detail || res.tpl),
+      invoicePersonId: formData.invoicePersonId,
+      personName: formData.personName,
+      orgId: formData.orgId,
+      invoiceOrgName: formData.invoiceOrgName
+    }
+    Object.assign(formData, info)
+    itemList.value = info.itemList
   }).catch(err => {
     console.log(err);
   })
   if (value) {
     console.log(value);
     formData.personName = value.name
-    formData.invoicePersonId= value.invoicePersonId
+    formData.invoicePersonId = value.invoicePersonId
     getDetail()
   }
   showPersonPicker.value = false;
 };
 const onSubmit = (val) => {
-  console.info(formData)
+  console.log(formData);
+  if (itemList.value.length == 0) {
+    Dialog.alert({
+      message: '未找到报销项目请联系报销专员'
+    }).then(() => { })
+    return;
+  }
+  setInvoiceDetail(formData.invoiceId, formData).then(() => {
+    Toast.success('提交成功');
+    setTimeout(() => {
+      router.back()
+    }, 1000);
+  }).catch(err => {
+    console.log(err);
+  })
+}
+</script>
+<style lang="less" scoped>
+.lastLine::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: " ";
+  pointer-events: none;
+  right: var(--van-padding-md);
+  bottom: 0;
+  left: var(--van-padding-md);
+  border-bottom: 1px solid var(--van-cell-border-color);
+  transform: scaleY(0.5);
+}
+.cellClassName {
+  .van-cell__value {
+    min-width: 80% !important; //可根据自己需求设定值
+    text-align: left !important;
+  }
 }
-</script>
+</style>

src/services/invoice.js

 
 // 获取班级详情
 export function getInvoiceFill(id) {
-  return request.get(`/invoice/${id}`)
+  return request.get(`/invoice/${id}`);
 }
 
 // 获取报销模板详情
-export function getInvoiceModel(id,params) {
-  return request.get(`/invoice/${id}/detail/info`,{params})
-}
+export function getInvoiceModel(id, params) {
+  return request.get(`/invoice/${id}/detail/info`, { params });
+}
+
+/**
+ * 生成报销明细
+ * @param
+ * @returns
+ */
+export const setInvoiceDetail = (id, data) =>
+  request(`/invoice/${id}/detail`, { method: "put", data });

src/vant.js

   ImagePreview,
   Search,
   Toast,
+  Radio,
+  RadioGroup,
   Popup
 } from 'vant';
 
 import 'vant/es/image-preview/style';
 
 export default function vant(app) {
+  //use包裹起来是全局注册是给标签用的如果是给setup 语法用要在需要的页面引用一下
   app.use(Button);
   app.use(Cell);
   app.use(CellGroup);
   app.use(Search);
   app.use(Toast);
   app.use(Popup);
+  app.use(Radio);
+  app.use(RadioGroup);
 }

yarn.lock

   resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
 
+dayjs@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
+  integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
+
 debug@^3.2.6:
   version "3.2.7"
   resolved "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"