decouple code

src/renderer/src/components/assessment/AssessmentStage.vue

@@ -20,9 +20,10 @@
 <script setup lang="ts">
 import { Edit, Plus } from '@element-plus/icons-vue'
 import { IAssessment, IAssessmentMethod } from '@renderer/types'
-import { computed, ref } from 'vue'
+import { computed, reactive, Ref, ref } from 'vue'
 import { Operation } from '@renderer/types/share'
 import { useGlobalStore } from '@renderer/store'
+import { AssessmentData, AssessmentMethod } from '@renderer/models/Assessment'
 
 type Parent = 'n' | 'p' | 'f'
 
@@ -42,8 +43,26 @@ const emits = defineEmits<{
 }>()
 
 const store = useGlobalStore()
-const tempAssessmentMethod = ref<IAssessmentMethod>({ method: '', weight: 0 })
+const stage = ref<{ title: string; assessment: IAssessment }[]>([
-const showEditDialog = ref(false)
+  {
+    title: '平时考核',
+    assessment: reactive(store.doc.assessment.daily)
+  },
+  {
+    title: '过程考核',
+    assessment: reactive(store.doc.assessment.progress)
+  },
+  {
+    title: '期末考核',
+    assessment: reactive(store.doc.assessment.final)
+  }
+])
+
+const isShowStageEditor = ref(false)
+const isShowMethodEditor = ref(false)
+
+const tempAssessmentMethod = ref<IAssessmentMethod>(AssessmentMethod.factoryToImpl())
+const tempStage = ref<IAssessment>(AssessmentData.factoryToImpl())
 
 const status = computed((): MethodStatus => {
   let total = 0
@@ -61,32 +80,39 @@ const addAssessmentMethodSubmit = computed(
   () => !Object.values(tempAssessmentMethod.value).every((v) => v)
 )
 
-const handleAddAssessmentMethod = (action: Operation, idx?: number) => {
+const checkAllStageWeightSum = computed(() => {
-  if (action === 'save') {
+  return normalStage.value.weight + processStage.value.weight + finalStage.value.weight === 100
-    if (idx === undefined) store.addMethodToStage(tempAssessmentMethod.value, props.parent)
+})
-    else {
+
-      store.modifyMethod(tempAssessmentMethod.value, idx, props.parent)
+const handleShow
-    }
-  }
-  tempAssessmentMethod.value = { method: '', weight: 0 }
-  showEditDialog.value = false
-}
 </script>
 
 <template>
-  <el-descriptions class="px-8 pb-4" border :column="3">
+  <div class="pb-4">
+    <el-alert v-show="!checkAllStageWeightSum" type="warning" show-icon :closable="false"
+      >所有考核占比之和不是100%</el-alert
+    >
+  </div>
+
+  <el-descriptions
+    v-for="(item, idx) in stage"
+    :key="item.title"
+    class="px-8 pb-4"
+    border
+    :column="3"
+  >
     <template #title>
       <p>
-        {{ title }}
+        {{ item.title }}
-        <span v-if="!assessment.stage">（待编辑）</span>
+        <span v-if="!item.assessment.stage">（待编辑）</span>
-        <span v-else>（通过 {{ assessment.stage }}，占比 {{ assessment.weight }}%）</span>
+        <span v-else>（通过 {{ item.assessment.stage }}，占比 {{ item.assessment.weight }}%）</span>
       </p>
     </template>
     <template #extra>
       <el-button :icon="Plus" type="primary" @click="emits('add', parent)">添加</el-button>
       <el-button :icon="Edit" @click="emits('edit', parent)">编辑</el-button>
     </template>
-    <div v-for="method in assessment.method" :key="method.method">
+    <div v-for="method in item.assessment.method" :key="method.method">
       <el-descriptions-item label="考核方式">{{ method.method }}</el-descriptions-item>
       <el-descriptions-item label="占比">{{ method.weight }}%</el-descriptions-item>
       <el-descriptions-item label="操作">
@@ -105,8 +131,9 @@ const handleAddAssessmentMethod = (action: Operation, idx?: number) => {
       </span>
     </el-descriptions-item>
   </el-descriptions>
+
   <el-dialog
-    v-model="showEditDialog"
+    v-model="isShowMethodEditor"
     title="添加考核方式"
     :show-close="false"
     :close-on-click-modal="false"
@@ -131,6 +158,28 @@ const handleAddAssessmentMethod = (action: Operation, idx?: number) => {
       <el-button @click="handleAddAssessmentMethod('cancel')">取消</el-button>
     </template>
   </el-dialog>
+
+  <el-dialog v-model="isShowStageEditor" title="编辑考核方式">
+    <el-form v-model="tempAssessment" label-width="auto">
+      <el-form-item label="考核方式">
+        <el-autocomplete v-model="tempAssessment.stage" clearable />
+      </el-form-item>
+      <el-form-item label="权重">
+        <el-input v-model="tempAssessment.weight" type="number" clearable />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button
+        type="primary"
+        @click="handleEditAssessmentSubmit('save', assessmentParent ?? 'n')"
+      >
+        保存
+      </el-button>
+      <el-button @click="handleEditAssessmentSubmit('cancel', assessmentParent ?? 'n')">
+        取消
+      </el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped></style>

src/renderer/src/models/Assessment.ts

@@ -19,18 +19,72 @@
 
 import { IAssessment, IAssessmentMethod } from '@renderer/types'
 
+export class AssessmentMethod implements IAssessmentMethod {
+  private _method: string
+  private _weight: number
+
+  constructor(method: string, weight: number) {
+    this._method = method
+    this._weight = weight
+  }
+
+  public static factory() {
+    return new AssessmentMethod('', 0)
+  }
+
+  public static factoryFromImpl(impl: IAssessmentMethod) {
+    return new AssessmentMethod(impl.method, Number(impl.weight))
+  }
+
+  public static factoryToImpl(): IAssessmentMethod {
+    return {
+      method: '',
+      weight: 0
+    }
+  }
+
+  public setFromImpl(impl: IAssessmentMethod) {
+    this._method = impl.method
+    this._weight = Number(impl.weight)
+  }
+
+  public getCurrImpl(): IAssessmentMethod {
+    return { method: this._method, weight: this.weight }
+  }
+
+  get method(): string {
+    return this._method
+  }
+
+  set method(value: string) {
+    this._method = value
+  }
+
+  get weight(): number {
+    return this._weight
+  }
+
+  set weight(value: number) {
+    this._weight = value
+  }
+}
+
 export class AssessmentData implements IAssessment {
-  private readonly _method: IAssessmentMethod[]
+  private readonly _method: AssessmentMethod[]
   private _stage: string
   private _weight: number
 
-  constructor(stage: string, weight: number | string, method?: IAssessmentMethod[]) {
+  constructor(stage: string, weight: number | string, method?: AssessmentMethod[]) {
     this._method = method ?? []
     this._stage = stage
     this._weight = Number(weight)
   }
 
-  get method(): IAssessmentMethod[] {
+  public static factoryToImpl(): IAssessment {
+    return { method: [], stage: '', weight: 0 }
+  }
+
+  get method(): AssessmentMethod[] {
     return this._method
   }
 
@@ -50,15 +104,15 @@ export class AssessmentData implements IAssessment {
     this._weight = Number(value)
   }
 
-  public addMethod(method: IAssessmentMethod) {
+  public addMethod(method: AssessmentMethod) {
-    this._method.push({ ...method, weight: Number(method.weight) })
+    this._method.push(method)
   }
 
-  public modifyMethod(method: IAssessmentMethod, idx: number) {
+  public modifyMethod(method: AssessmentMethod, idx: number) {
     if (idx < 0 || idx >= this._method.length) {
       return
     }
-    this._method[idx] = { ...method, weight: Number(method.weight) }
+    this._method[idx] = method
   }
 
   public removeMethod(idx: number) {
@@ -89,6 +143,10 @@ export class Assessment {
     )
   }
 
+  public checkTotalWeight() {
+    return this._daily.weight + this._progress.weight + this._final.weight === 100
+  }
+
   get daily(): AssessmentData {
     return this._daily
   }

src/renderer/src/views/panel/PanelIndex.vue

@@ -50,12 +50,12 @@ const assessmentStageList = ref<{ title: string; parent: Parent; assessment: Ref
   {
     title: '平时考核',
     parent: 'n',
-    assessment: normalStage
+    assessment: ref(store.doc.assessment.daily)
   },
   {
     title: '过程考核',
     parent: 'p',
-    assessment: processStage
+    assessment: ref(store.doc.assessment.progress)
   },
   {
     title: '期末考核',
@@ -164,43 +164,7 @@ onMounted(async () => {
 
     <course-info-display ref="courseInfoDisplay" />
 
-    <el-dialog v-model="showEditStage" title="编辑考核方式">
+    <assessment-stage />
-      <el-form v-model="tempAssessment" label-width="auto">
-        <el-form-item label="考核方式">
-          <el-autocomplete v-model="tempAssessment.stage" clearable />
-        </el-form-item>
-        <el-form-item label="权重">
-          <el-input v-model="tempAssessment.weight" type="number" clearable />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button
-          type="primary"
-          @click="handleEditAssessmentSubmit('save', assessmentParent ?? 'n')"
-        >
-          保存
-        </el-button>
-        <el-button @click="handleEditAssessmentSubmit('cancel', assessmentParent ?? 'n')">
-          取消
-        </el-button>
-      </template>
-    </el-dialog>
-
-    <div class="pb-4">
-      <el-alert v-show="!checkAllStageWeightSum" type="warning" show-icon :closable="false"
-        >所有考核占比之和不是100%</el-alert
-      >
-    </div>
-    <assessment-stage
-      v-for="(item, index) in assessmentStageList"
-      :key="index"
-      :title="item.title"
-      :assessment="item.assessment"
-      :parent="item.parent"
-      @edit="handleEditAssessment"
-      @add="handleShowAddAssessmentMethodDialog"
-      @modify="handleEditAssessmentMethod"
-    />
 
     <el-divider content-position="left">课程目标</el-divider>
     <div class="mx-auto w-full max-w-lg">