新增营销策略分值

src/modules/admin/lab/experiment/components/GradeRulesDialog.vue

 <script setup lang="ts">
 import type { FormInstance } from 'element-plus'
 import type { ExperimentItem } from '../types'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Minus } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { gradeRule, gradeRuleList } from '@/utils/dictionary'
 import { getExperimentGradeRule, updateExperimentGradeRule, getScoreExamList } from '../api'
@@ -40,6 +40,12 @@ function fetchInfo() {
     } catch (error) {
       console.log(error)
     }
+    if (!!detail.marketing_planning_rule) {
+      marketingForm = detail.marketing_planning_rule
+      if (detail.marketing_planning_rule.percent > 0) {
+        marketingShow = true
+      }
+    }
     Object.assign(form, detail, { rule_list: ruleList })
   })
 }
@@ -53,11 +59,6 @@ async function fetchExamList() {
   })
 }
 
-onMounted(() => {
-  fetchInfo()
-  fetchExamList()
-})
-
 // 合计
 const total = $computed(() => {
   const examTotal = form.exam_rules.reduce((result: number, item: any) => {
@@ -66,7 +67,9 @@ const total = $computed(() => {
   return (
     form.rule_list.reduce((result: number, item: any) => {
       return result + (item.percent || 0)
-    }, 0) + examTotal
+    }, 0) +
+    examTotal +
+    marketingForm.percent
   )
 })
 
@@ -103,7 +106,9 @@ function handleSubmit(call?: any) {
         return
       }
       if (item.type === 5 && /实验报告|实验准备|实验结果|课堂活跃度/.test(item.name)) {
-        ElMessage.error(`第${i + 1}行规则配置错误，自定义的名称不能包含“实验报告”、“实验准备”、“实验结果”和“课堂活跃度”`)
+        ElMessage.error(
+          `第${i + 1}行规则配置错误，自定义的名称不能包含“实验报告”、“实验准备”、“实验结果”和“课堂活跃度”`
+        )
         return
       }
     }
@@ -112,12 +117,14 @@ function handleSubmit(call?: any) {
     ElMessage.error('实验成绩规则项权重之和必须为100%！')
     return
   }
-
   formRef?.validate().then(() => {
     const params = { ...form, rule_list: JSON.stringify(form.rule_list) }
+    if (marketingShow) {
+      params.marketing_planning_rule = JSON.stringify(marketingForm)
+    } else {
+      delete params.marketing_planning_rule
+    }
     updateExperimentGradeRule(params).then(() => {
-      // call()
-      console.log(call, 'call()')
       if (!call) {
         ElMessage({ message: '保存成功', type: 'success' })
         emit('update')
@@ -191,10 +198,73 @@ function handleAddExamRule() {
 function handleRemoveExamRule(index: number) {
   form.exam_rules.splice(index, 1)
 }
+
+// 营销策划
+const marketingTotal = ref(100)
+const marketingType = {
+  '1': '1、营销背景分析',
+  '2': '2、营销渠道选择',
+  '3': '3、用户分析',
+  '4': '4、用户标签体系',
+  '5': '5、用户精准分群',
+  '6': '6、自动化营销旅程',
+  '7': '7、营销物料设计',
+  '8': '8、营销策划报告'
+}
+let marketingForm = $ref({
+  percent: 0,
+  rule_mode: 1,
+  details: [
+    { type: '1', percent: 5 },
+    { type: '2', percent: 5 },
+    { type: '3', percent: 15 },
+    { type: '4', percent: 25 },
+    { type: '5', percent: 15 },
+    { type: '6', percent: 15 },
+    { type: '7', percent: 15 },
+    { type: '8', percent: 5 }
+  ]
+})
+let marketingShow = $ref(false)
+const handleMarketingAdd = function () {
+  marketingShow = !marketingShow
+  if (!marketingShow) {
+    marketingForm.percent = 0
+  }
+}
+
+const handleMarketingChildChange = function (row: any, index: number) {
+  const otherTotal = marketingForm.details.reduce((result: number, item: any, i: number) => {
+    if (index !== i) {
+      result += item.percent || 0
+    }
+    return result
+  }, 0)
+  // 最大可输入占比
+  nextTick(() => {
+    row.percent = Math.min(100 - otherTotal, row.percent)
+  })
+
+  const t = marketingForm.details.reduce((a: any, b: any) => {
+    a += b.percent
+    return a
+  }, 0)
+  marketingTotal.value = t > 100 ? 100 : t
+}
+
+onMounted(() => {
+  fetchInfo()
+  fetchExamList()
+})
 </script>
 
 <template>
-  <el-dialog title="编辑实验成绩规则" :close-on-click-modal="false" width="800px" @update:modelValue="value => $emit('update:modelValue', value)">
+  <el-dialog
+    title="编辑实验成绩规则"
+    :close-on-click-modal="false"
+    width="800px"
+    @update:modelValue="value => $emit('update:modelValue', value)"
+  >
     <el-form ref="formRef" :model="form" label-suffix="：">
       <el-form-item label="实验名称">{{ data?.name }}</el-form-item>
       <el-row>
@@ -215,7 +285,8 @@ function handleRemoveExamRule(index: number) {
       <el-form-item>
         <el-row justify="space-between" style="width: 100%">
           <p>理论考试：</p>
-          <el-button type="primary" :icon="Plus" @click="handleAddExamRule" :disabled="form.exam_rules.length >= 1"> </el-button>
+          <el-button type="primary" :icon="Plus" @click="handleAddExamRule" :disabled="form.exam_rules.length >= 1">
+          </el-button>
         </el-row>
         <el-table :data="form.exam_rules" row-key="id">
           <el-table-column prop="name" width="170">
@@ -226,7 +297,9 @@ function handleRemoveExamRule(index: number) {
             </template>
           </el-table-column>
           <el-table-column prop="percent" align="center" width="200">
-            <template #default="{ row, $index }"> <el-input-number v-model="row.percent" :min="0" @change="handlePercentChange(row, $index, 2)" /> % </template>
+            <template #default="{ row, $index }">
+              <el-input-number v-model="row.percent" :min="0" @change="handlePercentChange(row, $index, 2)" /> %
+            </template>
           </el-table-column>
           <el-table-column prop="is_auto_scoring" width="200">
             <template #default="{ row }">
@@ -241,7 +314,14 @@ function handleRemoveExamRule(index: number) {
           </el-table-column>
           <el-table-column align="right">
             <template #default="{ $index, row }">
-              <el-button style="padding: 0" text type="primary" @click="handleRemoveExamRule($index)" v-if="row.type !== 1">删除</el-button>
+              <el-button
+                style="padding: 0"
+                text
+                type="primary"
+                @click="handleRemoveExamRule($index)"
+                v-if="row.type !== 1"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -255,13 +335,21 @@ function handleRemoveExamRule(index: number) {
           <el-table-column prop="name" width="170">
             <template #default="{ row }">
               <el-input v-model="row.name" :maxlength="20" style="width: 100%" v-if="row.type === 5" />
-              <el-select v-model="row.type" :disabled="row.type === 1" style="width: 100%" @change="handleTypeChange(row)" v-else>
+              <el-select
+                v-model="row.type"
+                :disabled="row.type === 1"
+                style="width: 100%"
+                @change="handleTypeChange(row)"
+                v-else
+              >
                 <el-option v-for="item in currentRuleNames(row.type)" :key="item.value" v-bind="item"></el-option>
               </el-select>
             </template>
           </el-table-column>
           <el-table-column prop="percent" align="center" width="200">
-            <template #default="{ row, $index }"> <el-input-number v-model="row.percent" :min="0" @change="handlePercentChange(row, $index, 1)" /> % </template>
+            <template #default="{ row, $index }">
+              <el-input-number v-model="row.percent" :min="0" @change="handlePercentChange(row, $index, 1)" /> %
+            </template>
           </el-table-column>
           <el-table-column prop="rule_mode" width="200">
             <template #default="{ row }">
@@ -279,7 +367,13 @@ function handleRemoveExamRule(index: number) {
             <template #default="{ $index, row }">
               <div class="btn-box">
                 <!-- || row.type === 8 -->
-                <el-button :disabled="row.type === 1" style="padding: 0" text type="primary" @click="handleEdit(row.type)" v-if="row.type !== 1"
+                <el-button
+                  :disabled="row.type === 1"
+                  style="padding: 0"
+                  text
+                  type="primary"
+                  @click="handleEdit(row.type)"
+                  v-if="row.type !== 1"
                   >编辑</el-button
                 >
                 <el-button style="padding: 0" text type="primary" @click="handleRemove($index)">删除</el-button>
@@ -287,7 +381,45 @@ function handleRemoveExamRule(index: number) {
             </template>
           </el-table-column>
         </el-table>
-        <div class="total" v-if="form.rule_list.length">
+        <!-- <div class="total" v-if="form.rule_list.length">
+          <p>合计：{{ total }}%</p>
+        </div> -->
+      </el-form-item>
+      <el-form-item>
+        <el-row justify="space-between" style="width: 100%">
+          <p>营销策划：</p>
+          <div style="display: flex">
+            <el-form-item label="营销策划所占整体比例" v-if="marketingShow">
+              <el-input-number
+                @change="handlePercentChange(marketingForm, 1, 3)"
+                v-model="marketingForm.percent"
+                :min="0"
+              />
+              %
+            </el-form-item>
+            <el-button
+              style="margin-left: 20px"
+              type="primary"
+              :icon="!marketingShow ? Plus : Minus"
+              @click="handleMarketingAdd"
+            ></el-button>
+          </div>
+          <el-divider></el-divider>
+          <el-form-item
+            v-if="marketingShow"
+            style="margin-bottom: 10px"
+            label-width="150px"
+            :label="marketingType[item.type as '1']"
+            v-for="(item, index) in marketingForm.details"
+          >
+            <el-input-number @change="handleMarketingChildChange(item, index)" v-model="item.percent" :min="0" /> %
+          </el-form-item>
+          <div class="total-c" v-if="marketingShow">
+            <p>营销策划小计：{{ marketingTotal }}%</p>
+          </div>
+        </el-row>
+        <el-divider v-if="marketingShow"></el-divider>
+        <div class="total">
           <p>合计：{{ total }}%</p>
         </div>
       </el-form-item>
@@ -313,4 +445,18 @@ function handleRemoveExamRule(index: number) {
     background-color: #ededed;
   }
 }
+.total-c {
+  width: 100%;
+  padding: 10px 0;
+  box-sizing: border-box;
+  p {
+    margin-left: 16px;
+    display: inline-block;
+    min-width: 150px;
+    text-align: center;
+    color: #016fa0;
+    background-color: #ededed;
+    float: right;
+  }
+}
 </style>