update

src/components/base/AppUpload.vue

@@ -70,7 +70,8 @@ const handleSuccess = (response: any, file: any, files: any) => {
           name: last.name,
           url: last.url || last.raw?.url,
           size: last.size || last.raw?.size,
-          type: last.type || last.raw?.type
+          type: last.type || last.raw?.type,
+          is_download: last.is_download || last.raw?.is_download || false
         }
       ])
     } else {
@@ -81,7 +82,8 @@ const handleSuccess = (response: any, file: any, files: any) => {
             name: item.name,
             url: item.url || item.raw?.url,
             size: item.size || item.raw?.size,
-            type: item.type || item.raw?.type
+            type: item.type || item.raw?.type,
+            is_download: item.is_download || item.raw?.is_download || false
           }
         })
       )
@@ -128,7 +130,8 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     :on-preview="handlePreview"
     :on-success="handleSuccess"
     :file-list="fileList"
-    class="uploader">
+    class="uploader"
+  >
     <slot>
       <template v-if="showFileList">
         <template v-if="$attrs['list-type'] === 'picture-card'">
@@ -146,6 +149,9 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     <template #tip>
       <div class="el-upload__tip"><slot name="tip"></slot></div>
     </template>
+    <template #file="{ file }">
+      <slot name="file" v-bind="{ file }"></slot>
+    </template>
   </el-upload>
 </template>
 

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

@@ -119,7 +119,8 @@ function handleSubmit() {
     title="配置数字营销实验"
     :close-on-click-modal="false"
     width="600px"
-    @update:modelValue="$emit('update:modelValue')">
+    @update:modelValue="$emit('update:modelValue')"
+  >
     <el-form ref="formRef" :model="form" label-suffix="：">
       <el-row justify="space-between">
         <el-form-item label="实验名称">{{ data.name }}</el-form-item>
@@ -147,7 +148,8 @@ function handleSubmit() {
                 :label="item.name"
                 :value="item.id"
                 :key="item.id"
-                disabled></el-option>
+                disabled
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-tab-pane>
@@ -161,7 +163,8 @@ function handleSubmit() {
               v-model="form.user_attr_config.items"
               multiple
               style="margin-left: 40px"
-              v-if="!form.user_attr_config.is_all">
+              v-if="!form.user_attr_config.is_all"
+            >
               <el-option v-for="item in userAttrList" :label="item.name" :value="item.id" :key="item.id"></el-option>
             </el-select>
           </el-form-item>
@@ -174,7 +177,8 @@ function handleSubmit() {
               v-model="form.event_config.items"
               multiple
               style="margin-left: 40px"
-              v-if="!form.event_config.is_all">
+              v-if="!form.event_config.is_all"
+            >
               <el-option v-for="item in metaEventList" :label="item.name" :value="item.id" :key="item.id"></el-option>
             </el-select>
           </el-form-item>

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

@@ -100,7 +100,7 @@ function currentRuleNames(value: number) {
     // 数字营销实验
     return tempList.filter(item => [1, 5, 6, 7, 8, 9].includes(item.value as number))
   } else {
-    return tempList.filter(item => item.value <= 5)
+    return tempList.filter((item: any) => item.value <= 5)
   }
 }
 
@@ -134,7 +134,8 @@ function rowScore(percent = 0) {
     title="编辑实验成绩规则"
     :close-on-click-modal="false"
     width="800px"
-    @update:modelValue="$emit('update:modelValue')">
+    @update:modelValue="$emit('update:modelValue')"
+  >
     <el-form ref="formRef" :model="form" label-suffix="：">
       <el-form-item label="实验名称">{{ data?.name }}</el-form-item>
       <el-row>
@@ -156,7 +157,7 @@ function rowScore(percent = 0) {
           <el-button type="primary" :icon="Plus" @click="handleAdd"></el-button>
         </el-row>
         <el-table :data="form.rule_list" row-key="id">
-          <el-table-column prop="name" width="200">
+          <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
@@ -164,7 +165,8 @@ function rowScore(percent = 0) {
                 :disabled="row.type === 1"
                 style="width: 100%"
                 @change="handleTypeChange(row)"
-                v-else>
+                v-else
+              >
                 <el-option v-for="item in currentRuleNames(row.type)" :key="item.value" v-bind="item"></el-option>
               </el-select>
             </template>
@@ -174,20 +176,28 @@ function rowScore(percent = 0) {
               <el-input-number v-model="row.percent" :min="0" @change="handlePercentChange(row, $index)" /> %
             </template>
           </el-table-column>
-          <el-table-column prop="rule_mode">
+          <el-table-column prop="rule_mode" width="200">
             <template #default="{ row }">
               <el-radio-group v-model="row.rule_mode" size="small">
                 <el-radio :label="1">人工评分</el-radio>
-                <el-radio :label="2" v-if="[2, 3].includes(row.type)">自动评分</el-radio>
+                <!-- <el-radio :label="2" v-if="[2, 3].includes(row.type)">自动评分</el-radio> -->
+                <el-radio :label="2">自动评分</el-radio>
               </el-radio-group>
             </template>
           </el-table-column>
-          <el-table-column width="100">
+          <el-table-column width="90">
             <template #default="{ row }">满分：{{ 100 || rowScore(row.percent) }} </template>
           </el-table-column>
-          <el-table-column align="right" width="60">
+          <el-table-column align="right">
             <template #default="{ $index, row }">
-              <el-button text type="primary" @click="handleRemove($index)" v-if="row.type !== 1">删除</el-button>
+              <div class="btn-box">
+                <el-button style="padding: 0" text type="primary" @click="handleRemove($index)" v-if="row.type !== 1"
+                  >编辑</el-button
+                >
+                <el-button style="padding: 0" text type="primary" @click="handleRemove($index)" v-if="row.type !== 1"
+                  >删除</el-button
+                >
+              </div>
             </template>
           </el-table-column>
         </el-table>

src/modules/admin/lab/experiment/components/Questions/QuestionsOrder.vue

+<script setup lang="ts"></script>
+
+<template>
+  <div class="order-box">
+    <div class="order-score">
+      <div class="order-score_flex">
+        <span class="el-tooltip question-total-number">0</span>
+        <span class="el-tooltip paper-total-score">/100</span>
+        <em>分</em>
+      </div>
+      <div class="tip">注：每模块满分为100，请注意每题分值。</div>
+    </div>
+    <div class="order-list">
+      <div class="title">用户/事件数据</div>
+      <div class="list">
+        <div class="li active">1</div>
+        <div class="li">2</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.order-list {
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    .li {
+      border-radius: 50px;
+      width: 25px;
+      font-size: 14px;
+      line-height: 25px;
+      text-align: center;
+      border: 2px solid #ccc;
+      color: #666;
+      cursor: pointer;
+      margin: 10px 5px;
+      &.active {
+        color: #c01c40;
+        border: 2px solid #c01c40;
+      }
+    }
+  }
+}
+.order-score_flex {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.order-score {
+  font-size: 40px;
+  line-height: 1;
+  margin-bottom: 20px;
+  color: #ccc;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  .question-total-number {
+    color: #c01c40;
+  }
+  em {
+    font-size: 14px;
+  }
+  .tip {
+    font-size: 14px;
+    padding-top: 20px;
+  }
+}
+</style>

src/modules/admin/lab/experiment/components/Questions/User.vue

+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { Document, CircleCheck, CircleClose } from '@element-plus/icons-vue'
+import AppUpload from '@/components/base/AppUpload.vue'
+import type { UploadFile } from 'element-plus'
+
+const activeName = ref('1')
+
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive({
+  title: '',
+  content: '',
+  answer: '导入成功',
+  answer_analysis: '',
+  files: []
+})
+
+const rules = reactive<FormRules>({
+  title: [{ required: true, message: '请输入', trigger: 'blur' }],
+  answer: [{ required: true, message: '请输入', trigger: 'blur' }]
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(ruleForm, 'ruleForm')
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+
+const num = ref(0)
+
+// 移除上传文件
+const handleRemove = (file: UploadFile) => {
+  if (file) {
+    const index = ruleForm.files.findIndex((item: any) => item.url === file.url)
+    if (index != -1) ruleForm.files.splice(index, 1)
+  }
+}
+
+const handleDownload = (file: any) => {
+  if (file) {
+    const item: any = ruleForm.files.find((item: any) => item.url === file.url)
+    if (item) item.is_download = file.is_download
+  }
+}
+</script>
+
+<template>
+  <el-card class="box-card">
+    <div class="head-box">
+      <el-tabs v-model="activeName" type="card" class="demo-tabs">
+        <el-tab-pane label="用户数据" name="1"></el-tab-pane>
+        <el-tab-pane label="事件数据" name="2"></el-tab-pane>
+      </el-tabs>
+      <el-form-item label="本题分值" class="head-r">
+        <el-input-number v-model="num" :min="1" :max="10" controls-position="right" />
+      </el-form-item>
+    </div>
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
+      <el-form-item label="题目标题" prop="title">
+        <el-input v-model="ruleForm.title" placeholder="请输入"/>
+      </el-form-item>
+      <el-form-item label="题干内容">
+        <el-input v-model="ruleForm.content" :rows="5" type="textarea" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="正确答案" prop="answer"> 导入成功 </el-form-item>
+      <el-form-item label="答案解析">
+        <el-input v-model="ruleForm.answer_analysis" :rows="5" type="textarea" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="试题文件">
+        <AppUpload v-model="ruleForm.files">
+          <template #tip>试题文件支持格式包含：png jpg doc docx xls xlsx pdf ppt pptx,大小不超过50M</template>
+          <template #file="{ file }">
+            <!-- {{ file }} -->
+            <div class="upload-box">
+              <div class="upload-loading">
+                <el-icon style="margin-right: 5px"><Document /></el-icon>
+                <p style="margin-right: 5px">{{ file.name }}</p>
+                <p v-if="file.status === 'uploading'">{{ file.percentage }}%</p>
+                <template v-if="file.status === 'success'">
+                  <el-icon class="succ-icon1" color="#67c23a" size="18" style="margin-left: 30px"
+                    ><CircleCheck
+                  /></el-icon>
+                  <el-icon class="succ-icon2" size="18" style="margin-left: 30px" @click="handleRemove(file)"
+                    ><CircleClose
+                  /></el-icon>
+                </template>
+              </div>
+              <el-switch
+                @change="handleDownload(file)"
+                v-model="file.is_download"
+                size="large"
+                active-text="能否下载"
+              />
+            </div>
+          </template>
+        </AppUpload>
+        <!-- <el-input v-model="ruleForm.textarea" :rows="5" type="textarea" placeholder="Please input" /> -->
+      </el-form-item>
+      <!-- <el-form-item style="display: flex">
+        <div>
+          <el-button @click="resetForm(ruleFormRef)">删除</el-button>
+        </div>
+        <div style="margin-left: auto">
+          <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
+          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+        </div>
+      </el-form-item> -->
+    </el-form>
+  </el-card>
+</template>
+<style lang="scss" scoped>
+.head-box {
+  display: flex;
+  margin-bottom: 30px;
+  .head-r {
+    margin-left: auto;
+  }
+}
+.upload-box {
+  display: flex;
+  .upload-loading {
+    width: 300px;
+    display: flex;
+    align-items: center;
+    &:hover {
+      .succ-icon2 {
+        display: block;
+      }
+      .succ-icon1 {
+        display: none;
+      }
+    }
+    .succ-icon2 {
+      display: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/modules/admin/lab/experiment/index.ts

@@ -10,7 +10,8 @@ export const routes: Array<RouteRecordRaw> = [
       { path: 'experiment', component: () => import('./views/Index.vue') },
       { path: 'experiment/:id', component: () => import('./views/View.vue'), props: true },
       { path: 'experiment/group/:id', component: () => import('./views/Group.vue'), props: true },
-      { path: 'experiment/report/:id', component: () => import('./views/Report.vue'), props: true }
+      { path: 'experiment/report/:id', component: () => import('./views/Report.vue'), props: true },
+      { path: 'experiment/questions', component: () => import('./views/Questions.vue'), props: true }
     ]
   }
 ]

src/modules/admin/lab/experiment/views/Questions.vue

+<script setup lang="ts">
+const User = defineAsyncComponent(() => import('../components/Questions/User.vue'))
+const QuestionsOrder = defineAsyncComponent(() => import('../components/Questions/QuestionsOrder.vue'))
+</script>
+
+<template>
+  <AppCard>
+    <div class="content-top">
+      <div class="info" style="display: flex">
+        <p>实验名称： 2023商业数据分析大赛决赛</p>
+        <p>实验类型： 数字营销实验</p>
+        <p>实验总成绩：100</p>
+      </div>
+      <el-button>预览</el-button>
+    </div>
+  </AppCard>
+  <div class="content-bottom">
+    <AppCard class="l-card">
+      <div class="btn-box">
+        <div class="btn-l">
+          <el-button type="primary"> 添加试题 </el-button>
+          <el-button> 取消 </el-button>
+        </div>
+        <div class="btn-r">
+          <el-button type="primary"> 保存 </el-button>
+        </div>
+      </div>
+      <User></User>
+    </AppCard>
+    <AppCard class="r-card">
+      <QuestionsOrder></QuestionsOrder>
+    </AppCard>
+  </div>
+</template>
+<style lang="scss" scoped>
+.btn-box {
+  display: flex;
+  margin-bottom: 20px;
+  .btn-r {
+    margin-left: auto;
+  }
+}
+.app-main {
+  overflow: inherit;
+}
+
+.content-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .info {
+    display: flex;
+    p {
+      margin-right: 100px;
+    }
+  }
+}
+.content-bottom {
+  margin-top: 20px;
+  display: flex;
+  .r-card {
+    position: sticky;
+    top: 80px;
+    margin-left: 20px;
+    width: 30%;
+    margin-top: 0;
+    height: fit-content;
+    :deep(.app-card-bd.has-background) {
+      // height: 100%;
+      box-sizing: border-box;
+    }
+  }
+  .l-card {
+    margin-top: 0;
+    flex: 1;
+    height: 10000px;
+  }
+}
+</style>