Merge pull request 'feat: 任务审批增加沉浸模式' (#36) from jie into test

Reviewed-on: #36

src/views/task/content/Content.vue

@@ -77,6 +77,17 @@ const taskDetailPictureList = ref<any[]>([])
 const userStore = useUser()
 const imageRef = ref<ComponentElRef | null>()
 let processItems: any[] = []
+const isFullScreen = ref(false);
+
+const fullscreenStyles = computed<any>(() => ({
+  'width': isFullScreen.value ? '100vw' : '',
+  'height': isFullScreen.value ? '100vh' : '',
+  'position': isFullScreen.value ? 'fixed' : '',
+  'top': isFullScreen.value ? '0' : '',
+  'left': isFullScreen.value ? '0' : '',
+  'zIndex': isFullScreen.value ? '9999' : '',
+}));
+
 
 onMounted(() => {
   window.addEventListener('keydown', handleKeydown)
@@ -299,9 +310,13 @@ onUnmounted(() => {
 })
 
 function immersionHandler() {
-  taskStore.updateImmersion()
+  // taskStore.updateImmersion()
+  toggleFullScreen();
 }
-
+// 切换全屏状态
+const toggleFullScreen = () => {
+  isFullScreen.value = !isFullScreen.value;
+};
 function previewHandler(event: MouseEvent) {
   event.stopImmediatePropagation()
   event.stopPropagation()
@@ -342,7 +357,7 @@ function reloadList(param, text) {
 </script>
 
 <template>
-  <div class="wrapper">
+  <div class="wrapper fullscreen-container" :style="fullscreenStyles">
     <div class="wrapper-header">
       <div class="left">
         <span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
@@ -381,7 +396,8 @@ function reloadList(param, text) {
             </ul>
           </n-popover> -->
           <div class="icon-wrap">
-            <SvgIcon size="20" name="immersion-model" @click="immersionHandler" />
+            <SvgIcon size="20" v-if="isFullScreen" name="power-off" @click="immersionHandler" style="cursor: pointer;"/>
+            <SvgIcon size="20" v-else name="immersion-model" @click="immersionHandler" style="cursor: pointer;"/>
           </div>
         </div>
         <div v-show="showActions" class="batch">
@@ -607,6 +623,12 @@ function reloadList(param, text) {
 </template>
 
 <style lang="less" scoped>
+.fullscreen-container {
+  /* 可添加其他样式 */
+  width: 100vw;
+  height: 100vh;
+  margin: 0px !important;
+}
 ::v-deep(.n-tabs-tab__label) {
   font-size: 14px;
   font-family: PingFang SC, PingFang SC-Regular;