中间计量

src/views/debit-pay/admin/middlepay.vue

@@ -4,7 +4,12 @@
             <hc-new-card scrollbar>
                 <template #header>
                     <el-select v-model="searchForm.contractPeriodId" placeholder="选择计量期" filterable clearable block @change="searchKey1Click">
-                        <el-option v-for="item in key1Data" :key="item.id" :label="item.periodNumber" :value="item.id" clearable />
+                        <el-option v-for="item in key1Data" :key="item.id" :label="item.periodNumber" :value="item.id" clearable>
+                            <div class="search-form-contract-period-id hc-flex">
+                                <el-tag :color="(item.approveStatus !== 0 || item.id === -1) ? '#e6a23c' : '#67c23a'" class="mr-8px" size="small" />
+                                <span>{{ item.periodNumber }}</span>
+                            </div>
+                        </el-option>
                     </el-select>
                 </template>
                 <hc-lazy-tree :key="treeKey" :h-props="treeProps" tree-key="id" :auto-expand-keys="TreeAutoExpandKeys" @load="treeLoadNode" @node-tap="treeNodeTap" />
@@ -63,7 +68,7 @@
 <script setup>
 import { nextTick, onActivated, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
 import { delMessage } from '~uti/tools'
@@ -74,6 +79,9 @@ import HcDetailsModal from './components/middlepay/detailsModal.vue'
 import unitApi from '~api/project/debit/contract/unit'
 import mainApi from '~api/debit-pay/admin/middlepay'
 import { toPdfPage } from '~uti/btn-auth'
+
+//初始化
+const router = useRouter()
 const useRoutes = useRoute()
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId || '')
@@ -95,12 +103,12 @@ onActivated(async () => {
     await getKey1Data()
     getCurrentMeterMoney().then()
 })
+
 const isReportDrawer = ref(false)
 watch(() => useRoutes, (val) => {
-if (val) {
-    isReportDrawer.value = false
-}
+    if (val) isReportDrawer.value = false
 }, { immediate: true, deep: true })
+
 //初始化设置拖动分割线
 const setSplitRef = () => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
@@ -123,21 +131,17 @@ const approveStatus = ref(0)
 //计量期
 const key1Data = ref([])
 const getKey1Data = async ()=>{
+    const periodId = useRoutes?.query?.period || ''
     const { error, code, data } = await mainApi.getAllPeriod({
         contractId: contractId.value,
         type: 1,
     })
     if (!error && code === 200) {
         let newArr = getArrValue(data), info = getObjValue(newArr[newArr.length - 1])
-        searchForm.value.contractPeriodId = info.id
+        searchForm.value.contractPeriodId = periodId || info.id
         approveStatus.value = info.approveStatus
-
         key1Data.value = newArr
-        key1Data.value.unshift({
-            id:-1,
-            periodNumber:'全部',
-        })
-
+        key1Data.value.unshift({ id: -1, periodNumber:'全部' })
     } else {
         key1Data.value = []
     }
@@ -148,6 +152,11 @@ const searchKey1Click = () => {
     searchForm.value.current = 1
     getTableData()
     getCurrentMeterMoney()
+    //路由跳转
+    router.push({
+        path: useRoutes.path,
+        query: { period: info.id },
+    })
 }
 
 //获取本期计量总金额
@@ -180,8 +189,7 @@ const treeLoadNode = async ({ item, level }, resolve) => {
     }
     //获取数据
     const { data } = await unitApi.lazyTree({
-        contractId: contractId.value,
-        id:id,
+        contractId: contractId.value, id:id,
         contractPeriodId:searchForm.value.contractPeriodId,
     })
     resolve(getArrValue(data))
@@ -227,7 +235,6 @@ const getTableData = async () => {
         } else {
             rawUrl.value = ''
         }
-
     } else {
         rawUrl.value = ''
     }
@@ -367,3 +374,10 @@ const autoClick = async ()=>{
 }
 // const isReportDrawer = ref(false)
 </script>
+
+<style lang="scss">
+.search-form-contract-period-id .el-tag {
+    border: none;
+    aspect-ratio: 1;
+}
+</style>