列表tab开发

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dayjs": "^1.10.8",
     "pinia": "^2.x.x",
     "vant": "^3.4.5",
     "vue": "^3.2.25",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ specifiers:
   '@vitejs/plugin-vue': ^2.2.0
   '@vue/eslint-config-typescript': ^10.0.0
   axios: ^0.26.0
+  dayjs: ^1.10.8
   eslint: ^8.10.0
   eslint-plugin-vue: ^8.5.0
   pinia: ^2.x.x
@@ -21,6 +22,7 @@ specifiers:
   windicss: ^3.5.1
 
 dependencies:
+  dayjs: registry.npmmirror.com/dayjs/1.10.8
   pinia: registry.npmmirror.com/pinia/2.0.11_typescript@4.6.2+vue@3.2.31
   vant: registry.npmmirror.com/vant/3.4.5_vue@3.2.31
   vue: registry.npmmirror.com/vue/3.2.31
@@ -877,6 +879,12 @@ packages:
     version: 2.6.20
     dev: false
 
+  registry.npmmirror.com/dayjs/1.10.8:
+    resolution: {integrity: sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dayjs/-/dayjs-1.10.8.tgz}
+    name: dayjs
+    version: 1.10.8
+    dev: false
+
   registry.npmmirror.com/debug/4.3.3:
     resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/debug/-/debug-4.3.3.tgz}
     name: debug

src/App.vue

@@ -1,9 +1,12 @@
 
 
 <template>
-  <router-view></router-view>
+  <!-- <router-view></router-view> -->
+  <Layout />
+
 </template>
 <script setup lang="ts">
+  import Layout from '@/layout/Layout.vue'
 </script>
 <style>
 </style>

src/api/reqHeaders.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: 文帅
  * @Date: 2022-03-08 17:08:19
- * @LastEditTime: 2022-03-08 17:27:41
+ * @LastEditTime: 2022-03-11 15:13:31
  * @LastEditors: 文帅
  * @Description:
  */
@@ -14,5 +14,5 @@ export const headerData = {
   'brand': '',
   'osVersion': '',
   'appVersion': '',
-  'sessionId': localStorage.getItem('qccSessionId') ? localStorage.getItem('qccSessionId') : ''
+  'sessionId': localStorage.getItem('sessionId') ? localStorage.getItem('sessionId') : '2203011444526GU9ABP6HOKMLA4M0375'
 }

src/components/CommonList.vue

@@ -1,20 +1,47 @@
 <template>
   <div>
-    <div v-for="(item,index) in data.dataList" :key="index" class="card">
-      <div v-for="obj in demension.selectDemension.viewList" :key="obj.value" class="item">
-        <p>{{obj.name}}：</p>
-        <p>{{item[obj.value]}}</p>
+    <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
+      <div v-for="(item,index) in store.dataList" :key="index" class="card">
+        <div v-for="obj in store.selectDemension.viewList" :key="obj.value" class="item">
+          <p v-if="obj.name">{{obj.name}}：</p>
+          <p v-if="obj.valueType === 'date'">{{dayjs(item[obj.value]).format('YYYY-MM-DD')}}</p>
+          <p v-else :class="obj.valueType === 'title' ? 'title' : ''">{{item[obj.value]}}</p>
+        </div>
       </div>
-    </div>
+    </van-list>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { inject, ref } from 'vue'
-  import routerMatch from '@/hooks/routerMatch'
+  import { useDemensionStore } from '@/store/demension'
+  import dayjs from 'dayjs'
+  import { ref, watch } from 'vue'
+  const store = useDemensionStore()
+  const loading = ref(false)
+  const finished = ref(false)
 
-  const data = inject('state',ref({dataList:[]}))
-  const demension = inject('demension',routerMatch())
+
+  const onLoad = () => {
+    if (store.totalPage > store.pageNum) {
+      loading.value = true
+      store.pageNum++
+      store.getList()
+      setTimeout(() => {
+        loading.value = false
+      }, 200)
+    }else{
+      loading.value = false
+      finished.value = true
+    }
+  }
+
+  watch(() => store.dataList.length,(newVal) => {
+    if(!newVal) {
+      console.log(877)
+
+      finished.value = false
+    }
+  })
 
 </script>
 
@@ -27,6 +54,10 @@
   .item{
     display: flex;
     align-items: center;
+    .title{
+      font-weight: bold;
+      color: #000;
+    }
   }
 }
 </style>

src/components/vant/CommonTab.vue

@@ -1,8 +1,11 @@
 <template>
 
   <div>
-    <van-tabs v-model:active="state.active">
-      <van-tab v-for="(item,index) in state.tabList" :key="index" :title="item.name" :name="item.deleted" title-style="font-weight:bold">
+    <van-tabs></van-tabs>
+    <van-tabs v-model:active="state.active" class="fixed w-full top-0"
+              swipeable animated
+              @change="change">
+      <van-tab v-for="(item,index) in state.tabList" :key="index" :title="`${item.name}${store.tabInfo.totalNumList[index] || ''}`" :name="item.deleted" title-style="font-weight:bold">
       </van-tab>
     </van-tabs>
 
@@ -10,48 +13,56 @@
 </template>
 
 <script lang="ts" setup>
-  import { inject, onMounted, reactive, ref } from 'vue'
-  import routerMatch from '@/hooks/routerMatch'
+  import { onMounted, reactive } from 'vue'
+  import { useDemensionStore } from '@/store/demension'
 
+  interface tabItem {
+    name:string,
+    deleted:number,
+    num:number
+  }
   interface tabState {
-    tabList:{
-      name:string,
-      deleted:number,
-      num:number
-    }[],
+    tabList:tabItem[],
     active:number
   }
 
   const state =reactive<tabState>({
-    tabList:[],
+    tabList:[{name:'',deleted:0,num:0}],
     active:0
   })
 
-  const data = inject('state',ref({dataList:[]}))
-  const demension = inject('demension',routerMatch())
+  const store = useDemensionStore()
 
   onMounted(() => {
-    console.log(demension,9999)
     getTabs()
   })
 
   const getTabs = () => {
-    if(demension.selectDemension.tabs === 'deleted') {
+    if(store.selectDemension.tabs === 'deleted') {
       state.tabList = [
         {
-          name:demension.selectDemension.title,
+          name:store.selectDemension.title,
           deleted:0,
           num:0
         },
         {
-          name:`历史${demension.selectDemension.title}`,
+          name:`历史${store.selectDemension.title}`,
           deleted:1,
           num:0
         }
       ]
     }
   }
+
+  const change = (deleted:number) => {
+    store.deleted = deleted
+    store.pageNum = 1
+    store.dataList = []
+    store.getList()
+  }
+
 </script>
 
 <style lang="less" scoped>
+
 </style>

src/hooks/routerMatch.ts

@@ -1,58 +0,0 @@
-import { DemensionPagesInter, DemensionPagesListInter } from '@/js-pages/types'
-import pagesArr from '@/js-pages'
-import { useRoute } from 'vue-router'
-import $axios from '@/api'
-import { reactive } from 'vue'
-
-const routerMatch = () => {
-
-  //遍历获取所有维度列表
-  const allDemensionArr = [] as DemensionPagesListInter[]
-  const demensionArr = (arr: any[]): DemensionPagesInter[] => {
-    return arr.reduce((total, item: any) => item.list ? demensionArr(item.list) : allDemensionArr.push(item), [])
-  }
-  demensionArr(pagesArr)
-
-  //根据路由名称匹配对应维度
-  const route = useRoute()
-  const selectDemension = allDemensionArr.find(item => route.path === `/${item.routing}`)!
-
-  const state = reactive({
-    pageNum: 1,
-    pageSize: 10,
-    deleted: 0,
-    entityType: 2,
-    entityName: '宁德时代新能源科技股份有限公司',
-    entityId: '76d4d8ae15b063986d88abe92a5efe83',
-    totalNum: 0,
-    totalPage: 0
-  })
-
-
-  const getList = async (extraParams?: {}) => {
-    //发起请求
-    const { pageNum, pageSize, deleted, entityType, entityName, entityId } = state
-    const params = {
-      dimensionCode: selectDemension?.code,
-      pageNum,
-      pageSize,
-      deleted,
-      entityType,
-      entityName,
-      entityId,
-      ...extraParams
-    }
-    const res = await $axios.get('lawyer-workbench/risk/dimension/page', { params }) as { totalNum: number, totalPage: number }
-    state.totalNum = res.totalNum
-    state.totalPage = res.totalPage
-    return res
-
-  }
-
-  return {
-    selectDemension,
-    state,
-    getList
-  }
-}
-export default routerMatch

src/js-pages/company-detail/FaLvFengXian/index.ts

@@ -9,12 +9,17 @@ export const FaLvFengXian: DemensionPagesInter = {
       tabs: 'deleted',
       viewList: [
         {
+          value: 'caseReason',
+          valueType: 'title'
+        },
+        {
           name: '案号',
           value: 'caseNo'
         },
         {
           name: '开庭时间',
-          value: 'startDate'
+          value: 'startDate',
+          valueType: 'date'
         }
       ]
     },
@@ -29,7 +34,8 @@ export const FaLvFengXian: DemensionPagesInter = {
         },
         {
           name: '开庭时间',
-          value: 'startDate'
+          value: 'startDate',
+          valueType: 'date'
         }
       ]
     }

src/js-pages/types.ts

@@ -18,7 +18,12 @@ export interface DemensionPagesListInter {
   customRender?: any
 }
 
+
+//标准字段展示列表，必须有value，valueType表示展示字段的处理类型
 export interface ViewListInter {
-  name: string,
-  value: string
+  name?: string,
+  value: string,
+  //类型 时间、标题
+  valueType?: 'date' | 'title'
 }
+

src/layout/Layout.vue

@@ -0,0 +1,25 @@
+
+
+<template>
+  <div class="layout">
+    <router-view></router-view>
+  </div>
+</template>
+<script setup lang="ts">
+
+  import { useDemensionStore } from '@/store/demension'
+  import { onMounted, watch } from 'vue'
+  import { useRoute } from 'vue-router'
+  const store = useDemensionStore()
+  const route = useRoute()
+
+  watch(() => route.path,() => {
+    if(!store.entityId) {
+      store.entityId = route.query.companyId  || '88f04cbfab150fe2bccdeec3aea32750'
+      store.entityName = route.query.companyName  || '乐视网信息技术（北京）股份有限公司'
+    }
+  })
+
+</script>
+<style>
+</style>

src/plugins/vant.ts

@@ -1,4 +1,4 @@
-import { Button, Row, Tab, Tabs } from 'vant'
+import { Button, Row, Tab, Tabs, List } from 'vant'
 import { App } from 'vue'
 
 export const useVant = (app: App<Element>) => {
@@ -6,5 +6,6 @@ export const useVant = (app: App<Element>) => {
   app.use(Row)
   app.use(Tab)
   app.use(Tabs)
+  app.use(List)
 
 }

src/store/demension.ts

@@ -0,0 +1,75 @@
+import { DemensionStoreInter } from './../types/store'
+import { DemensionPagesListInter, DemensionPagesInter } from '@/js-pages/types'
+import { defineStore } from 'pinia'
+import pagesArr from '@/js-pages'
+import $axios from '@/api'
+import { useRoute } from 'vue-router'
+
+export const useDemensionStore = defineStore({
+  id: 'process',
+  state: () => {
+    return <DemensionStoreInter>{
+      pageNum: 1,
+      pageSize: 10,
+      deleted: 0,
+      entityType: 2,
+      entityName: '',
+      entityId: '',
+      totalNum: 0,
+      totalPage: 0,
+      selectDemension: {},
+      dataList: [],
+      tabInfo: {
+        totalNumList: [0, 0]
+      }
+    }
+  },
+  actions: {
+    getDemension() {
+      const route = useRoute()
+      //遍历获取所有维度列表
+      const allDemensionArr = [] as DemensionPagesListInter[]
+      const demensionArr = (arr: any[]): DemensionPagesInter[] => {
+        return arr.reduce((total, item: any) => item.list ? demensionArr(item.list) : allDemensionArr.push(item), [])
+      }
+      demensionArr(pagesArr)
+
+      //根据路由名称匹配对应维度
+      this.selectDemension = allDemensionArr.find(item => route.path === `/${item.routing}`)!
+
+      if (this.selectDemension.tabs === 'deleted') {
+        this.getDeletedList()
+        return
+      }
+      this.getList()
+    },
+
+    //有历史tab页的请求，自定义请求获取额外数据
+    async getDeletedList() {
+      const totalNum1 = await (await this.getList()).totalNum
+      this.deleted = 1
+      const totalNum2 = await (await this.getList()).totalNum
+      this.tabInfo.totalNumList = [totalNum1, totalNum2]
+      // console.log()
+    },
+    async getList(extraParams?: {}) {
+      //发起请求
+      const { pageNum, pageSize, deleted, entityType, entityName, entityId } = this
+      const params = {
+        dimensionCode: this.selectDemension?.code,
+        pageNum,
+        pageSize,
+        deleted,
+        entityType,
+        entityName,
+        entityId,
+        ...extraParams
+      }
+      const res = await $axios.get('lawyer-workbench/risk/dimension/page', { params }) as { totalNum: number, totalPage: number, dataList: [] }
+      this.totalNum = res.totalNum
+      this.totalPage = res.totalPage
+      this.dataList.push(...res.dataList)
+      return res
+    }
+  }
+})

src/types/store.ts

@@ -0,0 +1,17 @@
+import { DemensionPagesListInter } from '@/js-pages/types'
+export interface DemensionStoreInter {
+  pageNum: number;
+  pageSize: number;
+  deleted: number;
+  entityType: number;
+  entityName: string;
+  entityId: string;
+  totalNum: number;
+  totalPage: number;
+  selectDemension: DemensionPagesListInter;
+  dataList: [];
+  tabInfo: {
+    totalNumList: number[]
+  }
+}
+

src/views/demension/list.vue

@@ -10,18 +10,10 @@
 <script lang="ts" setup>
   import CommonList from '@/components/CommonList.vue'
   import CommonTab from '@/components/vant/CommonTab.vue'
-  import routerMatch from '@/hooks/routerMatch'
-  import { onMounted, provide, reactive, ref,InjectionKey } from 'vue'
-
-
-  const data = ref({})
-  const demension = routerMatch()
-  provide('demension',demension)
-  provide('state',  data)
-
-  onMounted(async () => {
-    data.value = await demension.getList()
-  })
+  // import routerMatch from '@/hooks/routerMatch'
+  import { useDemensionStore } from '@/store/demension'
+  const store = useDemensionStore()
+  store.getDemension()
 
 </script>
 

vite.config.ts

@@ -7,6 +7,9 @@ import * as path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    host: true
+  },
   plugins: [
     vue(),
     WindiCSS(),

windi.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite-plugin-windicss'
 
 export default defineConfig({
+  important: true,
   extract: {
     include: ['index.html', 'src/**/*.{vue,jsx,tsx,html}']
   },