人员弹窗

src/components/OrgPicker/index.vue

     </div>
     <div class="picker-list">
       <van-list v-model:loading="loading" :finished="finished" finished-text="我们是有底线的" @load="onLoad">
-        <van-cell v-for="org in orgList" :key="org.orgId" :title="org.name" @click="onClick(org)">
-          <template #right-icon v-if="org.orgId === orgSelected.orgId">
+        <van-cell v-for="org in orgList" :key="org.invoiceOrgId" :title="org.name" @click="onClick(org)">
+          <template #right-icon v-if="org.invoiceOrgId === orgSelected.invoiceOrgId">
             <van-icon name="success" />
           </template>
         </van-cell>
 
 const orgList = computed(() => orgResult.value.records || [])
 watch(props.modelValue, (val) => {
-  orgSelected.value = { orgId: val }
+  orgSelected.value = { invoiceOrgId: val }
 })
 
-const queryData = (params) => {
+const queryData = (params) => {  
   getOrgList({ ...params, isSystem: true })
     .then((res) => {
       const first = res.current === 1
 }
 
 const onSearch = (val) => {
-  queryData({ pageNum: 1, pageSize, name: val })
+  queryData({ pageNum: 1, pageSize, name: val,invoiceId:props.invoiceId })
 }
 
 const onCancel = () => {
 const onLoad = () => {
   console.info('----------invoiceId-------->',props.invoiceId)
   const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
-  queryData({ pageNum, pageSize, name: searchValue.value })
+  queryData({ pageNum, pageSize, name: searchValue.value,invoiceId:props.invoiceId })
 }
 
 const onClick = (org) => {
 
 const onSubmit = () => {
   console.info(orgSelected.value)
-  emit('update:modelValue', orgSelected.value.orgId)
-  if (orgSelected.value.orgId && orgSelected.value.name) {
+  emit('update:modelValue', orgSelected.value.invoiceOrgId)
+  if (orgSelected.value.invoiceOrgId && orgSelected.value.name) {
     emit('change', orgSelected.value)
   } else {
     emit('change')

src/components/PersonPicker/index.vue

 <template>
   <div class="org-picker">
     <div class="picker-search">
-      <van-search v-model="searchValue" placeholder="请输入公司名称" @search="onSearch" />
+      <van-search
+        v-model="searchValue"
+        placeholder="请输入公司名称"
+        @search="onSearch"
+      />
     </div>
     <div class="picker-list">
-      <van-list v-model:loading="loading" :finished="finished" finished-text="我们是有底线的" @load="onLoad">
-        <van-cell v-for="org in orgList" :key="org.orgId" :title="org.name" @click="onClick(org)">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="我们是有底线的"
+        @load="onLoad"
+      >
+        <van-cell
+          v-for="org in orgList"
+          :key="org.orgId"
+          :title="org.name"
+          @click="onClick(org)"
+        >
           <template #right-icon v-if="org.orgId === orgSelected.orgId">
             <van-icon name="success" />
           </template>
 
 <script setup>
 import { computed, watch, ref, onMounted } from 'vue'
-import { getOrgList } from '@/services/org'
+import { getPersonList } from '@/services/person'
 
 
 const searchValue = ref('')
 
 const props = defineProps({
   modelValue: String,
-  invoiceId:String,
-  orgId:String
+  invoiceId: String,
+  orgId: String
 })
 const emit = defineEmits(['update:modelValue', 'change'])
 
 watch(props.modelValue, (val) => {
   orgSelected.value = { orgId: val }
 })
+watch(() => props.orgId, (val) => {
+  if (!props.orgId) {
+    alert('请先选则所属公司')
+  } else {
+    queryData({ pageNum:1, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
+  }
+})
 
 const queryData = (params) => {
-  getOrgList({ ...params, isSystem: true })
+  getPersonList({ ...params, isSystem: true })
     .then((res) => {
       const first = res.current === 1
       if (first) {
 }
 
 const onSearch = (val) => {
-  queryData({ pageNum: 1, pageSize, name: val })
+  if (!props.orgId) {
+    alert('请先选则所属公司')
+  } else {
+    queryData({ pageNum:1, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
+  }
 }
 
 const onCancel = () => {
 // 组件加载, onLoad 就会执行一次
 // 所以 onMounted 里面不需要初始化执行了
 const onLoad = () => {
-  console.info('----------invoiceId-------->',props.invoiceId)
-  console.info('----------orgId-------->',props.orgId)
   const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
-  queryData({ pageNum, pageSize, name: searchValue.value })
+  if (!props.orgId) {
+    alert('请先选则所属公司')
+  } else {
+    queryData({ pageNum, pageSize, name: searchValue.value, invoiceId: props.invoiceId, invoiceOrgId: props.orgId })
+  }
 }
 
 const onClick = (org) => {
 
 const onSubmit = () => {
   console.info(orgSelected.value)
-  emit('update:modelValue', orgSelected.value.orgId)
-  if (orgSelected.value.orgId && orgSelected.value.name) {
+  emit('update:modelValue', orgSelected.value.invoicePersonId)
+  if (orgSelected.value.invoicePersonId && orgSelected.value.name) {
     emit('change', orgSelected.value)
   } else {
     emit('change')

src/pages/index.vue

 <template>
-  <!-- <OrgPicker /> -->
-  <h2 :style="{textAlign:'center'}">电网报销系统</h2>
-  <van-button round block type="primary"> 立即申请 </van-button>
-  <p></p>
-  <van-button round block type="primary"> 我的提交 </van-button>
+  <div class="body">
+    <div class="bottombox">
+      <van-button
+        round
+        :style="{ width: '40vw', margin: 'auto' }"
+        type="primary"
+        @click="goForm"
+      >
+        立即填写
+      </van-button>
+      <van-button
+        round
+        :style="{ width: '40vw', margin: 'auto' }"
+        type="primary"
+      >
+        填写记录
+      </van-button>
+      <van-button
+        round
+        class="mybutton"
+        :style="{ width: '40vw', margin: 'auto' }"
+        type="primary"
+      >
+        信息公示
+      </van-button>
+    </div>
+    <div>
+      {{
+        formData.data.status == 1
+          ? "该班次将于2022年10月5日截止"
+          : "该班次已截止如有问题请联系报销助理"
+      }}
+    </div>
+  </div>
 </template>
 
 <script setup>
-import OrgPicker from '@/components/OrgPicker/index.vue'
+import { onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router'
+import { getInvoiceFill } from '@/services/invoice'
+
+const router = useRouter();
+const formData = reactive({
+  data: {
+    //班级名称
+    invoiceId: 'f11ab8d28fd097e7aa4877ae7068a876',
+    endDate: undefined,
+    name: undefined,
+    status: 1
+  }
+})
+
+const goForm = () => {
+  router.push({ name: 'invoice.fill', params: { id: formData.data.invoiceId } })
+}
+onMounted(() => {
+  getInvoiceFill(formData.data.invoiceId).then(res => {
+    formData.data = res.invoice
+  }).catch(err => {
+    console.log(err)
+  })
+})
 </script>
+<style lang="less" scoped>
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 80vh;
+  padding-top: 10vh;
+  .bottombox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 50vh;
+  }
+}
+</style>

src/pages/invoice/fill.vue

 <template>
   <van-form @failed="onFailed" @submit="onSubmit">
-    <h2 :style="{textAlign:'center'}">{{formData.invoiceName}}</h2>
+    <h2 :style="{ textAlign: 'center' }">{{ formData.invoiceName }}</h2>
     <van-cell-group title="开票单位">
       <van-field
         label="所属公司"
-        v-model="formData.orgName"
-        name="orgName"
+        v-model="formData.invoiceOrgName"
+        name="invoiceOrgName"
         readonly
         @click="showOrgPicker = true"
         placeholder="请输入所属公司"
         position="left"
         :style="{ height: '100%', width: '80%' }"
       >
-        <org-picker v-model="formData.orgId" :invoiceId="formData.invoiceId" @change="onOrgConfirm" />
+        <org-picker
+          v-model="formData.orgId"
+          :invoiceId="formData.invoiceId"
+          @change="onOrgConfirm"
+        />
       </van-popup>
       <van-field
         label="报销人"
         position="left"
         :style="{ height: '100%', width: '80%' }"
       >
-        <person-picker v-model="formData.personId" :invoiceId="formData.invoiceId" :orgId="formData.orgId" @change="onPersonConfirm" />
+        <person-picker
+          v-model="formData.personId"
+          :invoiceId="formData.invoiceId"
+          :orgId="formData.orgId"
+          @change="onPersonConfirm"
+        />
       </van-popup>
     </van-cell-group>
 
     <van-cell-group title="开票单位">
       <van-field
         label="开票单位"
-        v-model="formData.invoiceOrg"
-        name="invoiceOrg"
+        v-model="formData.orgName"
+        name="orgName"
         placeholder="请输入开票单位"
         :rules="[{ required: true, message: '请输入开票单位' }]"
       />
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router'
+import {getInvoiceFill} from '@/services/invoice'
 
 const formData = reactive({
   //班级名称
-  invoiceName: '电网一班',
+  invoiceName: '',
   detailId: undefined,
-  invoiceId: '好的',
+  invoiceId: undefined,
   invoicePersonId: undefined,
   personId: undefined,
   personName: undefined,
-  invoiceOrgId: undefined,
-  orgId: '66666',
+  orgNameId: undefined,
+  orgId: undefined,
+  invoiceOrgName: undefined,
   orgName: undefined,
-  invoiceOrg:undefined,
   taxNo: undefined,
   address: undefined,
   phone: undefined,
   charge: undefined,
   mergeRemark: undefined,
   stayRemark: undefined,
+  status:undefined
 })
 const showOrgPicker = ref(false)
 const showPersonPicker = ref(false)
+const router = useRouter();
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 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)
+  })
+})
+
 // 校验函数可以返回 Promise，实现异步校验
 const asyncValidator = (val) =>
   new Promise((resolve) => {
 };
 const onOrgConfirm = (value) => {
   if (value) {
-    formData.orgId = value.orgId
-    formData.orgName = value.name
+    formData.orgId = value.invoiceOrgId
+    formData.invoiceOrgName = value.name
   }
   showOrgPicker.value = false;
 };
-
+const getDetail=()=>{
+  
+}
 const onPersonConfirm = (value) => {
   if (value) {
-    formData.personId = value.orgId
     formData.personName = value.name
+    getDetail()
   }
   showPersonPicker.value = false;
 };
-const onSubmit=(val)=>{
+const onSubmit = (val) => {
   console.info(formData)
 }
 </script>

src/services/invoice.js

+import request from "@/utils/request";
+
+// 获取班级详情
+export function getInvoiceFill(id) {
+  return request.get(`/invoice/${id}`)
+}

src/services/org.js

 
 // 获取组织列表
 export function getOrgList(params) {
-  return request.get('/org', { params } )
+  return request.get(`/invoice/${params.invoiceId}/org`, { params } )
 }

src/services/person.js

+import request from "@/utils/request";
+
+// 获取组织列表
+export function getPersonList(params) {
+  return request.get(`/invoice/${params.invoiceId}/person`, { params } )
+}

vite.config.js

   server: {
     proxy: {
       '/api': {
-        target: 'http://192.168.89.76:7081',
+        target: 'http://192.168.89.147:7081',
         changeOrigin: true,
       },
     },