Merge branch 'master' of http://git.ycjcjy.com/state_grid/invoice_fill_h5

src/pages/index.vue

       <van-button
         round
         :style="{ width: '40vw', margin: 'auto' }"
+        :disabled="!invoiceId"
         type="primary"
         @click="goForm"
       >
       </van-button>
       <van-button
         round
+        class="mybutton"
         :style="{ width: '40vw', margin: 'auto' }"
+        :disabled="!invoiceId"
         type="primary"
-        @click="goRecord"
+        @click="goPromulgate"
       >
-        填写记录
+        信息公示
       </van-button>
       <van-button
         round
-        class="mybutton"
         :style="{ width: '40vw', margin: 'auto' }"
         type="primary"
-        @click="goPromulgate"
+        @click="goRecord"
       >
-        信息公示
+        填写记录
       </van-button>
     </div>
     <div>
-      {{
-        formData.data.status == 1
-          ? "该班次将于2022年10月5日截止"
-          : "该班次已截止如有问题请联系报销助理"
-      }}
+      {{tipText}}
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue';
-import { useRouter } from 'vue-router'
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router'
+import dayjs from 'dayjs'
 import { getInvoiceFill } from '@/services/invoice'
 
 const router = useRouter();
-const formData = reactive({
-  data: {
-    //班级名称
-    invoiceId: 'e288229edfd3cdd2eaac125b65eca10e',
-    endDate: undefined,
-    name: undefined,
-    status: 1
-  }
+const route = useRoute();
+const { invoiceId } = route.query
+
+const formData = reactive({})
+
+const tipText = computed(() => {
+  if (!invoiceId) return '请扫码访问此页面';
+  const finished = formData.status === 2 || (formData.endDate ? dayjs().isAfter(dayjs(formData.endDate)) : false)
+  return finished ? '该班次已截止如有问题请联系报销助理' : `该班次将于 ${dayjs(formData.endDate).format('YYYY年MM月DD日')} 截止`
 })
 
 const goForm = () => {
-  router.push({ name: 'invoice.fill', 
-  params: { 
-    invoiceId: formData.data.invoiceId,
-    invoiceName: formData.data.name,
-    endDate:formData.data.endDate,
-    status:formData.data.status
-  } })
+  router.push({ name: 'invoice.fill', query: route.query })
 }
+
 const goRecord = () => {
-  router.push({ name: 'invoice.records'})
+  router.push({ name: 'invoice.history', query: route.query })
 }
 const goPromulgate = () => {
-  router.push({ name: 'invoice.promulgate'})
+  router.push({ name: 'publicity.list', query: route.query })
 }
+
 onMounted(() => {
-  getInvoiceFill(formData.data.invoiceId).then(res => {
-    formData.data = res
+  getInvoiceFill(invoiceId).then(res => {
+    Object.assign(formData, res)
   }).catch(err => {
     console.log(err)
   })
 })
+
 </script>
 <style lang="less" scoped>
 .body {

src/pages/invoice/history.vue

+<template>
+  <div class="history-page">
+    <h3>填写记录</h3>
+    <van-list
+      class="history-list"
+      v-model:loading="loading"
+      :finished="finished"
+      @load="onLoad"
+      finished-text="我们是有底线的"
+    >
+      <van-cell
+        class="item"
+        v-for="item in list"
+        :key="item.detailId"
+        :title="item.orgName"
+        is-link
+        :to="{ name: 'invoice.fill', query: { invoiceId, personId: item.personId } }"
+      >
+        <template #value>
+          <span class="pname">{{ item.personName }}</span>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue"
+import { useRouter, useRoute } from 'vue-router'
+import { getList } from "@/services/invoice";
+
+const router = useRouter();
+const route = useRoute();
+const { invoiceId } = route.query;
+
+const list = ref([])
+const error = ref(false);
+const loading = ref(false);
+const pagenavi = reactive({ pageNum: 1, pageSize: 10, total: 0 })
+const finished = computed(() => pagenavi.pageNum * pagenavi.pageSize > pagenavi.total)
+
+const queryData = (params) => {
+  getList(invoiceId, params).then(res => {
+    const { records, ...pageInfo } = res;
+    if (pageInfo.current === 1) {
+      list.value = records || []
+    } else {
+      list.value = list.value.concat(records || [])
+    }
+
+    pagenavi.pageNum = pageInfo.current
+    pagenavi.total = pageInfo.total
+    error.value = false
+    loading.value = false
+  }).catch(() => {
+    error.value = true
+    loading.value = false
+  })
+}
+
+const onLoad = () => {
+  const params = { pageNum: pagenavi.pageNum + 1, pageSize: pagenavi.pageSize }
+  queryData(params)
+}
+
+onMounted(() => {
+  //获取提交记录
+  const params = { pageNum: pagenavi.pageNum, pageSize: pagenavi.pageSize }
+  queryData(params)
+})
+
+</script>
+<style lang="less" scoped>
+.history-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    flex: none;
+    text-align: center;
+    letter-spacing: 2px;
+  }
+
+  .history-list {
+    flex: 1;
+  }
+
+  .pname {
+    color: #333;
+  }
+  // .item + .item {
+  //   margin-top: 16px;
+  // }
+}
+</style>

src/pages/invoice/promulgate.vue

-<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

-<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/pages/publicity/list.vue

+<template>
+  <div class="publicity-page">
+    <h3>信息公示</h3>
+    <van-list
+      class="publicity-list"
+      v-model:loading="loading"
+      :finished="finished"
+      @load="onLoad"
+      finished-text="我们是有底线的"
+    >
+      <van-cell
+        class="item"
+        v-for="item in list"
+        :key="item.detailId"
+        :title="item.orgName"
+        is-link
+        :to="{ name: 'invoice.fill', query: { invoiceId, personId: item.personId } }"
+      >
+        <template #value>
+          <span class="pname">{{ item.personName }}</span>
+        </template>
+      </van-cell>
+    </van-list>
+  </div>
+</template>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue"
+import { useRouter, useRoute } from 'vue-router'
+import { getList } from "@/services/invoice";
+
+const router = useRouter();
+const route = useRoute();
+const { invoiceId } = route.query;
+
+const list = ref([])
+const error = ref(false);
+const loading = ref(false);
+const pagenavi = reactive({ pageNum: 1, pageSize: 10, total: 0 })
+const finished = computed(() => pagenavi.pageNum * pagenavi.pageSize > pagenavi.total)
+
+const queryData = (params) => {
+  getList(invoiceId, params).then(res => {
+    const { records, ...pageInfo } = res;
+    if (pageInfo.current === 1) {
+      list.value = records || []
+    } else {
+      list.value = list.value.concat(records || [])
+    }
+
+    pagenavi.pageNum = pageInfo.current
+    pagenavi.total = pageInfo.total
+    error.value = false
+    loading.value = false
+  }).catch(() => {
+    error.value = true
+    loading.value = false
+  })
+}
+
+const onLoad = () => {
+  const params = { pageNum: pagenavi.pageNum + 1, pageSize: pagenavi.pageSize }
+  queryData(params)
+}
+
+onMounted(() => {
+  //获取提交记录
+  const params = { pageNum: pagenavi.pageNum, pageSize: pagenavi.pageSize }
+  queryData(params)
+})
+
+</script>
+<style lang="less" scoped>
+.publicity-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    flex: none;
+    text-align: center;
+    letter-spacing: 2px;
+  }
+
+  .publicity-list {
+    flex: 1;
+  }
+
+  .pname {
+    color: #333;
+  }
+  // .item + .item {
+  //   margin-top: 16px;
+  // }
+}
+</style>

src/router/index.js

 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: '/invoice/history', name: 'invoice.history', component: () => import('@/pages/invoice/history.vue') },
+  { path: '/publicity/list', name: 'publicity.list', component: () => import('@/pages/publicity/list.vue') },
   { path: '/login', name: 'login', component: () => import('@/pages/login.vue') },
 ];
 

src/services/invoice.js

 }
 
 // 获取报销模板详情
-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})
+}
+
+// 获取报销列表
+export function getList(invoiceId, params) {
+  return request.get(`/invoice/${invoiceId}/detail`,{params})
 }
 
 /**
  * @param
  * @returns
  */
-export const setInvoiceDetail = (id, data) =>
-  request(`/invoice/${id}/detail`, { method: "put", data });
+ export const setInvoiceDetail = (id, data) =>
+ request(`/invoice/${id}/detail`, { method: "put", data });