.

src/components/OrgPicker/index.vue

@@ -42,8 +42,9 @@ watch(props.modelValue, (val) => {
 })
 
 const queryData = (params) => {  
-  getOrgList({ ...params, isSystem: true })
+  getOrgList({ ...params })
     .then((res) => {
+      //是否为第一页
       const first = res.current === 1
       if (first) {
         orgResult.value = res
@@ -74,7 +75,6 @@ const onCancel = () => {
 // 组件加载, onLoad 就会执行一次
 // 所以 onMounted 里面不需要初始化执行了
 const onLoad = () => {
-  console.info('----------invoiceId-------->',props.invoiceId)
   const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
   queryData({ pageNum, pageSize, name: searchValue.value,invoiceId:props.invoiceId })
 }
@@ -84,7 +84,6 @@ const onClick = (org) => {
 }
 
 const onSubmit = () => {
-  console.info(orgSelected.value)
   emit('update:modelValue', orgSelected.value.invoiceOrgId)
   if (orgSelected.value.invoiceOrgId && orgSelected.value.name) {
     emit('change', orgSelected.value)

src/components/PersonPicker/index.vue

@@ -16,11 +16,11 @@
       >
         <van-cell
           v-for="org in orgList"
-          :key="org.orgId"
+          :key="org.invoiceOrgId"
           :title="org.name"
           @click="onClick(org)"
         >
-          <template #right-icon v-if="org.orgId === orgSelected.orgId">
+          <template #right-icon v-if="org.invoiceOrgId === orgSelected.invoiceOrgId">
             <van-icon name="success" />
           </template>
         </van-cell>
@@ -53,18 +53,15 @@ const emit = defineEmits(['update:modelValue', 'change'])
 
 const orgList = computed(() => orgResult.value.records || [])
 watch(props.modelValue, (val) => {
-  orgSelected.value = { orgId: val }
+  orgSelected.value = { invoiceOrgId: val }
 })
-watch(() => props.orgId, (val) => {
-  if (!props.orgId) {
-    alert('请先选则所属公司')
-  } else {
-    queryData({ pageNum:1, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
-  }
+watch(()=>props.orgId,(val)=>{
+  const pageNum = 1
+  queryData({ pageNum, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: val })
 })
 
 const queryData = (params) => {
-  getPersonList({ ...params, isSystem: true })
+  getPersonList(params)
     .then((res) => {
       const first = res.current === 1
       if (first) {
@@ -75,7 +72,6 @@ const queryData = (params) => {
           records: orgResult.value.records.concat(res.records)
         }
       }
-
       loading.value = false
       finished.value = res.current >= res.pages
     })
@@ -86,11 +82,7 @@ const queryData = (params) => {
 }
 
 const onSearch = (val) => {
-  if (!props.orgId) {
-    alert('请先选则所属公司')
-  } else {
-    queryData({ pageNum:1, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
-  }
+  queryData({ pageNum: 1, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
 }
 
 const onCancel = () => {
@@ -101,11 +93,7 @@ const onCancel = () => {
 // 所以 onMounted 里面不需要初始化执行了
 const onLoad = () => {
   const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
-  if (!props.orgId) {
-    alert('请先选则所属公司')
-  } else {
-    queryData({ pageNum, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
-  }
+  queryData({ pageNum, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
 }
 
 const onClick = (org) => {
@@ -113,7 +101,6 @@ const onClick = (org) => {
 }
 
 const onSubmit = () => {
-  console.info(orgSelected.value)
   emit('update:modelValue', orgSelected.value.invoicePersonId)
   if (orgSelected.value.invoicePersonId && orgSelected.value.name) {
     emit('change', orgSelected.value)

src/pages/index.vue

@@ -13,6 +13,7 @@
         round
         :style="{ width: '40vw', margin: 'auto' }"
         type="primary"
+        @click="goRecord"
       >
         填写记录
       </van-button>
@@ -21,6 +22,7 @@
         class="mybutton"
         :style="{ width: '40vw', margin: 'auto' }"
         type="primary"
+        @click="goPromulgate"
       >
         信息公示
       </van-button>
@@ -52,11 +54,22 @@ const formData = reactive({
 })
 
 const goForm = () => {
-  router.push({ name: 'invoice.fill', params: { id: formData.data.invoiceId } })
+  router.push({ name: 'invoice.fill', 
+  params: { 
+    invoiceId: formData.data.invoiceId,
+    invoiceName: formData.data.name,
+    status:formData.data.status
+  } })
+}
+const goRecord = () => {
+  router.push({ name: 'invoice.records'})
+}
+const goPromulgate = () => {
+  router.push({ name: 'invoice.promulgate'})
 }
 onMounted(() => {
   getInvoiceFill(formData.data.invoiceId).then(res => {
-    formData.data = res.invoice
+    formData.data = res
   }).catch(err => {
     console.log(err)
   })

src/pages/invoice/fill.vue

@@ -1,7 +1,7 @@
 <template>
   <van-form @failed="onFailed" @submit="onSubmit">
     <h2 :style="{ textAlign: 'center' }">{{ formData.invoiceName }}</h2>
-    <van-cell-group title="开票单位">
+    <van-cell-group title="报销人信息">
       <van-field
         label="所属公司"
         v-model="formData.invoiceOrgName"
@@ -27,7 +27,7 @@
         v-model="formData.personName"
         name="personName"
         readonly
-        @click="showPersonPicker = true"
+        @click="showOrgPopup"
         placeholder="请输入报销人"
         :rules="[{ required: true, message: '请输入报销人' }]"
       />
@@ -134,7 +134,7 @@
 <script setup>
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router'
-import {getInvoiceFill} from '@/services/invoice'
+import { getInvoiceModel } from '@/services/invoice'
 
 const formData = reactive({
   //班级名称
@@ -159,7 +159,7 @@ const formData = reactive({
   charge: undefined,
   mergeRemark: undefined,
   stayRemark: undefined,
-  status:undefined
+  status: undefined
 })
 const showOrgPicker = ref(false)
 const showPersonPicker = ref(false)
@@ -172,20 +172,15 @@ const validator = (val) => /1\d{10}/.test(val);
 const validatorMessage = (val) => `${val} 不合法，请重新输入`;
 
 onMounted(() => {
-  formData.invoiceId=router.currentRoute._rawValue.params.id
-  getInvoiceFill(formData.invoiceId).then(res=>{
-    formData.invoiceName=res.invoice.name;
-    formData.status=res.invoice.status;
-  }).catch(err=>{
-    console.log(err)
-  })
+  formData.invoiceId = router.currentRoute._rawValue.params.invoiceId
+  formData.invoiceName = router.currentRoute._rawValue.params.invoiceName
+  formData.status = router.currentRoute._rawValue.params.status
 })
 
 // 校验函数可以返回 Promise，实现异步校验
 const asyncValidator = (val) =>
   new Promise((resolve) => {
     Toast.loading('验证中...');
-
     setTimeout(() => {
       Toast.clear();
       resolve(val === '1234');
@@ -199,15 +194,31 @@ const onOrgConfirm = (value) => {
   if (value) {
     formData.orgId = value.invoiceOrgId
     formData.invoiceOrgName = value.name
+    formData.personName = ''
+    formData.invoicePersonId=''
   }
   showOrgPicker.value = false;
 };
-const getDetail=()=>{
-  
+const showOrgPopup = () => {
+  if (formData.orgId) {
+    showPersonPicker.value = true
+  } else {
+    alert('请先选择所属公司')
+  }
+}
+//获取模板详情
+const getDetail = () => {
+  getInvoiceModel(formData.invoiceId, { invoicePersonId: formData.invoicePersonId,personId:formData.invoicePersonId }).then(res => {
+    console.log(res)
+  }).catch(err => {
+    console.log(err);
+  })
 }
 const onPersonConfirm = (value) => {
   if (value) {
+    console.log(value);
     formData.personName = value.name
+    formData.invoicePersonId= value.invoicePersonId
     getDetail()
   }
   showPersonPicker.value = false;

src/pages/invoice/promulgate.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="list">
+    <h2>信息公示</h2>
+    <van-list>
+      <van-cell
+        class="item"
+        v-for="item in recordList"
+        :key="item.invoiceId"
+        :title="item.orgName"
+        @click="() => goDetail(item.invoiceId)"
+      >
+        <template #value>
+          <span>{{ item.name }}</span>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue"
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const recordList = ref([
+  {
+    orgName:'江苏林业集团',
+    name: '张九九',
+    invoiceId: '1',
+  },
+  {
+    orgName:'南京云致科技有限公司',
+    name: '李盼',
+    invoiceId: '2',
+  },
+  {
+    orgName:'邓州市源盛农机专业合作社',
+    name: '印雪彬',
+    invoiceId: '3',
+  },
+  {
+    orgName:'杭州昱恒科技有限公司',
+    name: '陈康',
+    invoiceId: '4',
+  },
+])
+
+onMounted(() => {
+  //获取提交记录
+})
+const goDetail = (val) => {
+  router.push({ name: 'invoice.fill', params: { id: val } })
+}
+</script>
+<style lang="less" scoped>
+.list {
+  padding: 16px;
+  h2 {
+    text-align: center;
+  }
+  .item + .item {
+    margin-top: 16px;
+  }
+}
+</style>

src/pages/invoice/records.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="list">
+    <h2>填写记录</h2>
+    <van-list>
+      <van-cell
+        class="item"
+        v-for="item in recordList"
+        :key="item.invoiceId"
+        :title="item.name"
+        @click="() => goDetail(item.invoiceId)"
+      >
+        <template #value>
+          <span>{{ item.createDate }} >></span>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue"
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const recordList = ref([
+  {
+    name: '电网一班',
+    invoiceId: '1',
+    createDate: '2022-4-8'
+  },
+  {
+    name: '电网二班',
+    invoiceId: '2',
+    createDate: '2022-6-8'
+  },
+  {
+    name: '电网三班',
+    invoiceId: '3',
+    createDate: '2022-9-8'
+  },
+  {
+    name: '电网四班',
+    invoiceId: '4',
+    createDate: '2022-2-8'
+  },
+])
+
+onMounted(() => {
+  //获取提交记录
+})
+const goDetail = (val) => {
+  router.push({ name: 'invoice.fill', params: { id: val } })
+}
+</script>
+<style lang="less" scoped>
+.list {
+  padding: 16px;
+  h2 {
+    text-align: center;
+  }
+  .item + .item {
+    margin-top: 16px;
+  }
+}
+</style>

src/router/index.js

@@ -6,6 +6,8 @@ import store from '@/store';
 const routes = [
   { path: '/', name: 'index', component: () => import('@/pages/index.vue') },
   { path: '/invoice/fill', name: 'invoice.fill', component: () => import('@/pages/invoice/fill.vue') },
+  { path: '/invoice/records', name: 'invoice.records', component: () => import('@/pages/invoice/records.vue') },
+  { path: '/invoice/promulgate', name: 'invoice.promulgate', component: () => import('@/pages/invoice/promulgate.vue') },
   { path: '/login', name: 'login', component: () => import('@/pages/login.vue') },
 ];
 

src/services/invoice.js

@@ -4,3 +4,8 @@ import request from "@/utils/request";
 export function getInvoiceFill(id) {
   return request.get(`/invoice/${id}`)
 }
+
+// 获取报销模板详情
+export function getInvoiceModel(id,params) {
+  return request.get(`/invoice/${id}/detail/info`,{params})
+}