营销策划开发

index.html

@@ -11,5 +11,6 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
     <script src="https://webapp-pub.ezijing.com/plugins/sky-agents/sky-agent.umd.cjs?v=1"></script>
+    <script src="https://webapp-pub.ezijing.com/plugins/tinymce/tinymce.min.js"></script>
   </body>
 </html>

src/modules/market/review/api.ts

@@ -4,3 +4,23 @@ import httpRequest from '@/utils/axios'
 export function getExperiment() {
   return httpRequest.get('/api/lab/v1/experiment')
 }
+
+// 获取列表搜索条件
+export function getSearchCriteria() {
+  return httpRequest.get('/api/lab/v1/experiment/marketing-planning/record-condition')
+}
+
+// 获取列表
+export function getRecordList(params?: { name: string, sno_number: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/marketing-planning/record-list', { params })
+}
+
+// 获取平分
+export function getScore(params?: { record_id: any }) {
+  return httpRequest.get('/api/lab/v1/experiment/marketing-planning/score', { params })
+}
+
+// 更新评分
+export function updateScore(data: { experiment_id: any; record_id: any,score: string }) {
+  return httpRequest.post(`/api/lab/v1/experiment/marketing-planning/score?experiment_id=${data.experiment_id}&record_id=${data.record_id}`, data)
+}

src/modules/market/review/index.ts

@@ -5,7 +5,10 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/market/review',
     component: Layout,
-    children: [{ path: '', component: () => import('./views/Index.vue') }]
+    children: [
+      { path: '', component: () => import('./views/Index.vue') },
+      { path: 'score', component: () => import('./views/Score.vue') }
+    ]
   }
 ]
 

src/modules/market/review/types.ts

+export interface ExperimentInfo {
+  name: string
+  course_name: string
+  teacher_name: string
+  length: string
+  teacher: { name: string }[]
+}

src/modules/market/review/views/Index.vue

 <script setup lang="ts">
+import type { ExperimentInfo } from '../types'
+import { getSearchCriteria, getRecordList } from '../api'
+
+const route = useRoute()
+
+let experimentInfo = $ref<ExperimentInfo>()
+getSearchCriteria().then((res: { data: { experiment: ExperimentInfo } }) => {
+  if (res?.data) {
+    const data = res.data.experiment
+    data.teacher_name = data.teacher.reduce((a: any, b: any) => a.push(b.name) && a, []).join(',')
+    experimentInfo = data
+  }
+})
+
 // 列表配置
 const listOptions = computed(() => {
   return {
-    data: [{}, {}],
+    remote: {
+      httpRequest: getRecordList,
+      params: { name: '', sno_number: '' }
+    },
+    filters: [
+      { type: 'input', prop: 'name', placeholder: '请输入学生姓名' },
+      { type: 'input', prop: 'sno_number', placeholder: '请输入学生学号' }
+    ],
     columns: [
       { label: '序号', type: 'index', width: 60 },
       { label: '班级', prop: 'class_name' },
-      { label: '学号', prop: 'name' },
-      { label: '学生姓名', prop: 'id' },
-      { label: '营销背景分析', prop: 'id' },
-      { label: '营销渠道选择', prop: 'id' },
-      { label: '用户分析', prop: 'id' },
-      { label: '标签体系设计', prop: 'id' },
-      { label: '用户精准分群', prop: 'id' },
-      { label: '自动化营销旅程设计', prop: 'id' },
-      { label: '营销物料设计', prop: 'id' },
-      { label: '得分', prop: 'id' },
+      { label: '学号', prop: 'sno_number' },
+      { label: '学生姓名', prop: 'name' },
+      {
+        label: '营销背景分析',
+        computed(row: any) {
+          return isComplete(row.row.step_1.is_complete)
+        }
+      },
+      {
+        label: '营销渠道选择',
+        computed(row: any) {
+          return isComplete(row.row.step_2.is_complete)
+        }
+      },
+      {
+        label: '用户分析',
+        computed(row: any) {
+          return isComplete(row.row.step_3.is_complete)
+        }
+      },
+      {
+        label: '标签体系设计',
+        computed(row: any) {
+          return isComplete(row.row.step_4.is_complete)
+        }
+      },
+      {
+        label: '用户精准分群',
+        computed(row: any) {
+          return isComplete(row.row.step_5.is_complete)
+        }
+      },
+      {
+        label: '自动化营销旅程设计',
+        computed(row: any) {
+          return isComplete(row.row.step_6.is_complete)
+        }
+      },
+      {
+        label: '营销物料设计',
+        computed(row: any) {
+          return isComplete(row.row.step_7.is_complete)
+        }
+      },
+      { label: '得分', prop: 'score' },
       { label: '操作', slots: 'table-x', width: 200 }
     ]
   }
 })
+
+function isComplete(is: Boolean) {
+  let n = ''
+  is
+    ? (n = '<div style="color: #009b3b; font-size:20px;">✓</div>')
+    : (n = '<div style="font-size:20px;">-</div>')
+  return n
+}
 </script>
 
 <template>
   <AppCard>
     <el-form label-suffix=":" inline class="info">
-      <el-form-item label="实验名称">信用卡数字营销</el-form-item>
-      <el-form-item label="课程名称">数字营销实训课程</el-form-item>
-      <el-form-item label="指导教师">张三疯</el-form-item>
-      <el-form-item label="实验学时">16学时</el-form-item>
+      <el-form-item label="实验名称">{{ experimentInfo?.name }}</el-form-item>
+      <el-form-item label="课程名称">{{ experimentInfo?.course_name }}</el-form-item>
+      <el-form-item label="指导教师">{{ experimentInfo?.teacher_name }}</el-form-item>
+      <el-form-item label="实验学时">{{ experimentInfo?.length }}</el-form-item>
     </el-form>
     <el-divider />
     <h2 class="h2-title">营销策划</h2>
     <AppList v-bind="listOptions">
-      <template>
+      <template #table-x="{ row }">
         <el-button text type="primary">查看营销策划报告</el-button>
-        <el-button text type="primary">评分</el-button>
+        <router-link
+          target="_blank"
+          :to="{
+            path: '/market/review/score',
+            query: {
+              id: row.id,
+              name: row.name,
+              snoNumber: row.sno_number,
+              className: row.class_name,
+              experiment_id: route.query.experiment_id
+            }
+          }"
+          ><el-button text type="primary">评分</el-button></router-link
+        >
+        <!-- <el-button text type="primary" @click="">评分</el-button> -->
       </template>
     </AppList>
   </AppCard>

src/modules/market/review/views/Score.vue

+<script setup lang="ts">
+import AppEditor from '@/components/base/AppEditor.vue'
+import { getScore, updateScore } from '../api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const route = useRoute()
+
+let data = $ref<any>([])
+getScore({ record_id: route.query.id }).then(res => {
+  console.log(res.data, 'res.data')
+  data = res.data.map((item: any) => {
+    item.score = item.score === '' ? 0 : parseInt(item.score)
+    return item
+  })
+})
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    columns: [
+      { type: 'index', width: 60 },
+      { label: '', prop: 'name' },
+      {
+        label: '',
+        prop: 'is_complete',
+        computed(row: any) {
+          return isComplete(row.row.is_complete)
+        }
+      },
+      { label: '', prop: 'percent' },
+      {
+        label: '',
+        prop: 'score',
+        slots: 'table-input'
+      },
+      { slots: 'table-x', width: 200 }
+    ],
+    ['show-header']: false,
+    border: true,
+    data: data
+  }
+})
+
+function isComplete(is: Boolean) {
+  let n = ''
+  is ? (n = '<div style="color: #009b3b; font-size:20px;">✓</div>') : (n = '<div style=" font-size:20px;">-</div>')
+  return n
+}
+
+let editorText = ref('')
+
+const dialogVisible = ref(false)
+
+let commentId = ref()
+const handleComment = function (row: any) {
+  commentId = row.id
+  editorText.value = row.comment
+  dialogVisible.value = true
+}
+
+let handleBtn = function () {
+  const item = data.find((i: any) => i.id === commentId)
+  item.comment = editorText.value
+  editorText.value = ''
+  dialogVisible.value = false
+}
+
+const handleSubmit = function () {
+  updateScore({
+    experiment_id: route.query.experiment_id,
+    record_id: route.query.id,
+    score: JSON.stringify(data)
+  }).then(res => {
+    ElMessage.success('保存成功')
+  })
+}
+</script>
+
+<template>
+  <AppCard>
+    <el-form label-suffix=":" inline class="info">
+      <el-form-item label="姓名">{{ route.query.name }}</el-form-item>
+      <el-form-item label="学号">{{ route.query.snoNumber }}</el-form-item>
+      <el-form-item label="班级">{{ route.query.className }}</el-form-item>
+    </el-form>
+    <el-divider />
+    <h2 class="h2-title">营销策划评分</h2>
+    <AppList v-bind="listOptions" ref="appList">
+      <template #table-input="{ row }">
+        <el-input-number style="width: 150px; text-align: center" v-model="row.score" :min="0" :max="100" />
+      </template>
+      <template #table-x="{ row }">
+        <el-button text type="primary" @click="handleComment(row)">评语</el-button>
+      </template>
+    </AppList>
+    <div style="display: flex; justify-content: center">
+      <el-button type="primary" @click="handleSubmit">保&nbsp;&nbsp;&nbsp;存</el-button>
+    </div>
+  </AppCard>
+  <el-dialog v-model="dialogVisible" width="700px" title="评语">
+    <AppEditor v-model="editorText"></AppEditor>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleBtn"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+</style>