feat: 沉浸模式

src/assets/icons/immersion-model.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710483988979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9416" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="9417"></path><path d="M743.8336 230.4C842.0352 230.4 921.6 306.7392 921.6 400.896v249.2416c0 79.2576-66.9696 143.4624-149.6064 143.4624h-77.1072c-30.976 0-60.928-10.4448-84.6336-29.5424l-92.16-74.3936a7.8848 7.8848 0 0 0-10.0864 0.256L426.496 760.832a134.656 134.656 0 0 1-88.3712 32.768H257.536a158.6176 158.6176 0 0 1-109.7216-43.5712A145.7152 145.7152 0 0 1 102.4 644.8128V400.896C102.4 306.688 182.016 230.4 280.2176 230.4z m0 74.24H280.2176c-55.3984 0-100.352 43.0592-100.4544 96.256v243.9168c0 41.216 34.816 74.5472 77.7216 74.5472h80.7424c13.4144 0 26.368-4.8128 36.3008-13.4656l81.408-70.9632a87.8592 87.8592 0 0 1 111.9744-2.048l92.2624 74.3424c9.728 7.8336 22.016 12.1344 34.7648 12.1344h77.1072c39.8336 0 72.192-30.976 72.192-69.2224V400.896c0-53.1456-44.9536-96.256-100.352-96.256z m-46.336 140.6976c38.4 0 69.5296 29.8496 69.5296 66.6624 0 36.864-31.1296 66.6624-69.5296 66.6624-38.4 0-69.5808-29.8496-69.5808-66.6624 0-36.864 31.1296-66.6624 69.5808-66.6624z m-370.944 0c38.4 0 69.5808 29.8496 69.5808 66.6624 0 23.808-13.312 45.824-34.816 57.7536a72.192 72.192 0 0 1-69.5296 0A66.2016 66.2016 0 0 1 257.024 512c0-36.864 31.1296-66.6624 69.5296-66.6624z" fill="#507AFD" p-id="9418"></path></svg>

src/layout/components/Header/RecycleModal.vue

@@ -245,7 +245,6 @@ defineExpose({
 const checked = ref(false)
 function onCheckChange(val: any, item: any) {
   checked.value = val
-  console.log('onCheckChange')
 }
 </script>
 

src/store/modules/task.ts

@@ -11,6 +11,7 @@ export const useTaskStore = defineStore({
     approvalList: [],
     packageid: '',
     refresh: false,
+    immersion: false,
   }),
   getters: {
     getActiveId: (state: TaskState) => state.activeId,
@@ -54,6 +55,9 @@ export const useTaskStore = defineStore({
 
       return res.data
     },
+    updateImmersion() {
+      this.immersion = !this.immersion
+    },
     reset() {
       this.currentIndex = -1
       this.activeId = ''

src/store/modules/workOrder.ts

@@ -1,20 +1,21 @@
 import { defineStore } from 'pinia'
-import type { PackageListItem, PackageState } from '/#/workorder'
+import type { OrderState, PackageListItem } from '/#/workorder'
 import { useMessage } from 'naive-ui'
 import { getPackageList } from '@/api/work/work'
 import { store } from '@/store'
 
 export const useWorkOrderStore = defineStore({
   id: 'work-order',
-  state: (): PackageState => ({
+  state: (): OrderState => ({
     currentIndex: -1,
     activeId: '',
     packageList: [],
+    immersion: false,
   }),
   getters: {
-    getActiveId: (state: PackageState) => state.activeId,
-    getCurrentIndex: (state: PackageState) => state.currentIndex,
-    getOrderList: (state: PackageState) => state.packageList,
+    getActiveId: (state: OrderState) => state.activeId,
+    getCurrentIndex: (state: OrderState) => state.currentIndex,
+    getOrderList: (state: OrderState) => state.packageList,
   },
   actions: {
     setOrderList(list: PackageListItem[]) {
@@ -51,6 +52,9 @@ export const useWorkOrderStore = defineStore({
 
       return res.data
     },
+    updateImmersion() {
+      this.immersion = !this.immersion
+    },
     reset() {
       this.currentIndex = -1
       this.activeId = ''

src/views/task/aside/Aside.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onBeforeMount, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, onBeforeMount, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import TaskList from './TaskList.vue'
 import type { TaskListItem } from '/#/task'
 import { useTaskStore } from '@/store/modules/task'
@@ -66,6 +66,10 @@ async function refreshHandler() {
   const orderList = await taskStore.fetchApprovalList(pagination, id)
   data.value = orderList
 }
+
+watch(() => taskStore.immersion, () => {
+  collapse.value = true
+})
 </script>
 
 <template>

src/views/task/content/Content.vue

@@ -227,6 +227,10 @@ onUnmounted(() => {
 const mark = computed(() => {
   return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
 })
+
+function immersionHandler() {
+  taskStore.updateImmersion()
+}
 </script>
 
 <template>
@@ -238,10 +242,13 @@ const mark = computed(() => {
         <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
       </div>
       <div class="right">
-        <div v-show="!showActions" class="btn" @click="setBatch(true)">
+        <div v-show="!showActions" style="display: flex;align-items: center;" @click="setBatch(true)">
+          <div class="btn">
             <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
             批量审批
           </div>
+          <SvgIcon style="cursor: pointer;" size="20" name="immersion-model" @click="immersionHandler" />
+        </div>
         <div v-show="showActions" class="batch">
           <n-button text @click="setBatch(false)">
             <template #icon>
@@ -257,7 +264,6 @@ const mark = computed(() => {
             <SvgIcon width="64" height="28" name="a2" />
           </div>
         </div>
-        <SvgIcon name="floder" size="30" />
       </div>
     </div>
     <div class="wrapper-detail">
@@ -405,7 +411,7 @@ const mark = computed(() => {
         align-items: center;
         justify-content: center;
         color: #FFF;
-        margin-right: 6px;
+        margin-right: 10px;
         cursor: pointer;
       }
 

src/views/worksheet/aside/Aside.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineOptions, nextTick, onBeforeMount, onMounted, reactive, ref, unref } from 'vue'
+import { computed, defineOptions, nextTick, onBeforeMount, onMounted, reactive, ref, unref, watch } from 'vue'
 import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
 import WorkSheetList from './WorkSheetList.vue'
 import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
@@ -76,6 +76,10 @@ function showFilter() {
   const modal = unref(filterModalRef)! as any
   modal.showModal()
 }
+
+watch(() => workStore.immersion, () => {
+  collapse.value = true
+})
 </script>
 
 <template>

src/views/worksheet/content/Content.vue

@@ -272,6 +272,10 @@ function getPercent(pictureid: string) {
 const mark = computed(() => {
   return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
 })
+
+function immersionHandler() {
+  workStore.updateImmersion()
+}
 </script>
 
 <template>
@@ -283,15 +287,16 @@ const mark = computed(() => {
         <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
       </div>
       <div class="right">
-        <div v-show="!showActions" style="display: flex;">
+        <div v-show="!showActions" style="display: flex;align-items: center;">
           <n-button text @click="clearHandler">
             <SvgIcon size="12" name="delete" />
             清除标记
           </n-button>
-          <div class="btn" style="margin-left: 20px;" @click="setBatch(true)">
+          <div class="btn" style="margin: 0px 10px;" @click="setBatch(true)">
             <SvgIcon style="margin-right: 6px;" size="14" name="tf" />
             辨别真假
           </div>
+          <SvgIcon style="cursor: pointer;" size="20" name="immersion-model" @click="immersionHandler" />
         </div>
 
         <div v-show="showActions" class="batch">

types/task.d.ts

@@ -11,6 +11,7 @@ export interface TaskState {
   currentIndex: number
   approvalList: any[]
   refresh: boolean
+  immersion: boolean
 }
 
 export interface TaskEntity {

types/workorder.d.ts

@@ -10,10 +10,11 @@ export interface PackageListItem {
 }
 
 // 任务包状态
-export interface PackageState {
+export interface OrderState {
   activeId: string
   currentIndex: number
   packageList: PackageListItem[]
+  immersion: boolean
 }
 
 // 任务实体