feat: 优化工作进度管理页面的样式

- 优化工作进度管理页面的样式，使其更加美观和易读 - 更新了 StatusBlock 组件，使其支持动态传入标题和副标题 - 更新了 Lesson 类型定义，将脚本文件、拍摄文件和素材文件的类型改为字符串 - 添加了 wd-drop-menu 和 wd-drop-menu-item 组件，用于下拉菜单的展示和选择 - 更新了首页列表请求参数，添加了加载指示器 - 在 Lesson 页面增加了单位、角色和权限的展示 - 修复了一些接口请求的问题，提升了用户资料更新的效率
2024-09-23 23:41:37 +08:00 · 2024-09-23 23:41:37 +08:00 · fe36c1a72b
commit fe36c1a72b
parent 66289511dd
7 changed files with 130 additions and 20 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -14,7 +14,6 @@ declare module 'vue' {
    WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
    WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
    WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
-    WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
    WdDropMenu: typeof import('wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue')['default']
    WdDropMenuItem: typeof import('wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue')['default']
    WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
@ -28,7 +27,6 @@ declare module 'vue' {
    WdStatusTip: typeof import('wot-design-uni/components/wd-status-tip/wd-status-tip.vue')['default']
    WdStep: typeof import('wot-design-uni/components/wd-step/wd-step.vue')['default']
    WdSteps: typeof import('wot-design-uni/components/wd-steps/wd-steps.vue')['default']
-    WdSwitch: typeof import('wot-design-uni/components/wd-switch/wd-switch.vue')['default']
    WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']
    WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
    WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
--- a/src/pages/lesson/index.vue
+++ b/src/pages/lesson/index.vue
@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import BussApi from '@/api/BussApi';
 import { useDayjs } from '@/composables/useDayjs';
+import { useTabbar } from '@/stores/useTabbar';
 import type { Lesson } from '@/types/api/lesson';
 import { calcLessonProgress, extractLessonStage, getLessonSteps } from '@/utils/lesson';
-import { useRoute } from 'uni-mini-router';
+import { useRoute, useRouter } from 'uni-mini-router';
 import { computed, onMounted, ref } from 'vue';
 import { useToast } from 'wot-design-uni';

 const route = useRoute()
+const router = useRouter()
+const tabbar = useTabbar()
 const toast = useToast()
 const dayjs = useDayjs()

@ -16,6 +19,17 @@ const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) :
 const lessonStages = computed(() => lesson.value ? extractLessonStage(lesson.value) : null)
 const lessonProgress = computed(() => lesson.value ? calcLessonProgress(lesson.value) : 0)

+const goProgress = (lessonId: number) => {
+  router.replaceAll({
+    name: 'progress',
+    params: {
+      courseName: `${lesson.value?.course_name}`,
+      lessonId: `${lessonId}`
+    }
+  })
+  tabbar.activeTab = 'progress'
+}
+
 onMounted(() => {
  if (!route.params?.courseId) {
    toast.error({
@ -37,7 +51,8 @@ onMounted(() => {

 <template>
  <div>
-    <div :class="`pattern p-4 flex flex-col gap-6 relative ${lessonProgress === 100 ? 'bg-emerald' : (lessonProgress === 0 ? 'bg-neutral' : 'bg-blue')}`">
+    <div
+      :class="`pattern p-4 flex flex-col gap-6 relative ${lessonProgress === 100 ? 'bg-emerald' : (lessonProgress === 0 ? 'bg-neutral' : 'bg-blue')}`">
      <div class="flex flex-col gap-0">
        <h2 class="text-sm text-white font-black op-50">{{ lesson?.course_name }}</h2>
        <h1 class="text-lg text-white font-bold">{{ lesson?.m_lesson_name }}</h1>
@ -57,6 +72,9 @@ onMounted(() => {
          :description="step.description" />
      </wd-steps>
    </div>
+    <div class="px-4 pt-2">
+      <wd-button type="primary" :round="false" plain block @click="goProgress(lesson?.id!)">进度处理</wd-button>
+    </div>
  </div>
 </template>

--- a/src/pages/progress/StatusBlock.vue
+++ b/src/pages/progress/StatusBlock.vue
@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const props = defineProps({
+  title: String,
+  subtitle: String
+})
+</script>
+
+<template>
+  <div class="rounded-lg mx-4 p-4 py-12 bg-neutral-100 flex items-center flex-col gap-4">
+    <slot name="icon"></slot>
+    <div class="text-center">
+      <p class="text-base">{{ title }}</p>
+      <p class="text-xs text-neutral-500">{{ subtitle }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/src/pages/progress/index.vue
+++ b/src/pages/progress/index.vue
@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import BussApi from '@/api/BussApi';
 import { useDayjs } from '@/composables/useDayjs';
-import type { Lesson, ScriptFileDestination } from '@/types/api/lesson';
-import { extractLessonStage, getLessonSteps } from '@/utils/lesson';
-import { computed, onMounted, ref } from 'vue';
+import type { Lesson, FileUploadDestination } from '@/types/api/lesson';
+import { extractLessonStage, getLessonSteps, getScriptFile, parseCombinedFileString } from '@/utils/lesson';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import { useMessage, useToast } from 'wot-design-uni';
+import StatusBlock from './StatusBlock.vue';
+import { useRoute } from 'uni-mini-router';

+const route = useRoute()
 const message = useMessage()
 const toast = useToast()
 const dayjs = useDayjs()
@ -39,7 +42,7 @@ const selectedLessonStage = computed(() => {

 const onCoursePick = ({ value }: { value: string }) => {
  pickerCourseValue.value = value
-  pickerLessonValue.value = void 0
+  pickerLessonValue.value = undefined
 }

 const onLessonPick = ({ value }: { value: number }) => {
@ -50,7 +53,7 @@ const onLessonPick = ({ value }: { value: number }) => {
 * lesson progress modifition steps
 */

-const script_file_destination = ref<ScriptFileDestination>('wechat')
+const script_file_destination = ref<FileUploadDestination>('wechat')

 const onStep0 = () => {
  message.confirm({
@ -67,7 +70,10 @@ const onStep0 = () => {
      msg: '正在提交...'
    })
    BussApi.editCourse(selectedLesson.value.id, {
-      script_file: script_file_destination.value,
+      script_file: JSON.stringify({
+        method: script_file_destination.value,
+        uploaded: false
+      }),
      script_upload_time: dayjs().unix()
    }).then(res => {
      toast.success({
@ -101,6 +107,13 @@ const updateLessons = () => {
    pickerCourseColumns.value = [
      ...Object.keys(groupData)
    ]
+
+    if (route.params?.courseName) {
+      onCoursePick({ value: decodeURI(route.params.courseName) })
+      if (route.params?.lessonId) {
+        onLessonPick({ value: parseInt(route.params.lessonId) })
+      }
+    }
  }).catch(err => {
    toast.error({ msg: err.message })
  })
@ -141,7 +154,25 @@ onMounted(() => {

          <wd-button type="primary" block @click="onStep0" custom-class="w-full">提交脚本</wd-button>
        </div>
-        <div v-if="selectedLessonStage?.step === 1"></div>
+        <div v-if="selectedLessonStage?.step === 1">
+          <StatusBlock v-if="!parseCombinedFileString(selectedLesson!, 'script_file')?.uploaded" title="脚本已提交"
+            subtitle="请耐心等待审核">
+            <template #icon>
+              <div class="i-tabler-progress-bolt text-7xl text-neutral-400"></div>
+            </template>
+          </StatusBlock>
+          <div v-else>
+            <StatusBlock title="脚本处理已完成" subtitle="请核对并审核">
+              <template #icon>
+                <div class="i-tabler-progress-check text-7xl text-neutral-400"></div>
+              </template>
+            </StatusBlock>
+            <div class="mt-4 px-4 space-y-2">
+              <wd-button type="primary" :round="false" block>通过</wd-button>
+              <wd-button type="error" :round="false" block>驳回</wd-button>
+            </div>
+          </div>
+        </div>
        <div v-if="selectedLessonStage?.step === 2"></div>
        <div v-if="selectedLessonStage?.step === 3"></div>
        <div v-else-if="selectedLessonStage?.step === 4">
--- a/src/static/TablerProgressBolt.png
+++ b/src/static/TablerProgressBolt.png
--- a/src/types/api/lesson.ts
+++ b/src/types/api/lesson.ts
@ -8,12 +8,17 @@ export interface Lesson {
  script_confirm_time: number;
  video_capture_time: number;
  video_confirm_time: number;
-  script_file: ScriptFileDestination;
+  script_file: string;
+  capture_file: string;
+  material_file: string;
  finish_time: number;
-  material_file: null;
-  capture_file: null;
  advise: null;
  created_at: string;
 }

-export type ScriptFileDestination = "qq" | "wechat" | "platform";
+// export interface CombinedFileString {
+//   method?: ScriptFileDestination;
+//   reupload?: string;
+// }
+
+export type FileUploadDestination = "qq" | "wechat" | "platform";
--- a/src/utils/lesson.ts
+++ b/src/utils/lesson.ts
@ -1,5 +1,5 @@
 import { useDayjs } from "@/composables/useDayjs";
-import type { Lesson } from "@/types/api/lesson";
+import type { FileUploadDestination, Lesson } from "@/types/api/lesson";

 export const extractLessonStage = (lesson: Lesson) => {
  const stages = {
@ -26,26 +26,66 @@ export const getLessonSteps = (lesson: Lesson, simplify: boolean = false) => {
    {
      title: progress.script_upload ? "脚本提交" : undefined,
      description: progress.script_upload
-        ? (simplify ? '已完成' : `已于 ${dayjs(lesson.script_upload_time * 1000).format(dateFormat)} 完成上传`)
+        ? simplify
+          ? "已完成"
+          : `已于 ${dayjs(lesson.script_upload_time * 1000).format(
+              dateFormat
+            )} 完成上传`
        : "脚本文件提交",
    },
    {
      title: progress.script_confirm ? "脚本确认" : undefined,
      description: progress.script_confirm
-        ? (simplify ? '已完成' : `已于 ${dayjs(lesson.script_confirm_time * 1000).format(dateFormat)} 确认`)
+        ? simplify
+          ? "已完成"
+          : `已于 ${dayjs(lesson.script_confirm_time * 1000).format(
+              dateFormat
+            )} 确认`
        : "脚本文件确认",
    },
    {
      title: progress.video_capture ? "视频拍摄" : undefined,
      description: progress.video_capture
-        ? (simplify ? '已完成' : `已于 ${dayjs(lesson.video_capture_time * 1000).format(dateFormat)} 完成上传`)
+        ? simplify
+          ? "已完成"
+          : `已于 ${dayjs(lesson.video_capture_time * 1000).format(
+              dateFormat
+            )} 完成上传`
        : "视频拍摄提交",
    },
    {
      title: progress.post_production ? "后期制作" : undefined,
      description: progress.post_production
-        ? (simplify ? '已完成' : `已于 ${dayjs(lesson.video_confirm_time * 1000).format(dateFormat)} 完成上传`)
+        ? simplify
+          ? "已完成"
+          : `已于 ${dayjs(lesson.video_confirm_time * 1000).format(
+              dateFormat
+            )} 完成上传`
        : "视频后期制作",
    },
  ];
 };
+
+export const getScriptFile = (lesson: Lesson) => {
+  const scriptFile = lesson.script_file ? lesson.script_file.split("|") : [];
+  return {
+    way: scriptFile[0] || null,
+    reupload: scriptFile[1] || null,
+  };
+};
+
+export const parseCombinedFileString = (
+  lesson: Lesson,
+  key: keyof Pick<Lesson, "script_file" | "capture_file" | "material_file">
+): {
+  method: FileUploadDestination;
+  uploaded: Boolean;
+} => {
+  const combined = lesson[key]
+    ? JSON.parse(lesson[key])
+    : {
+        method: null,
+        uploaded: false,
+      };
+  return combined;
+};