update

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

-const experimentConfig: any = [
-  {
-    id: 1,
-    name: '基础配置',
-    is_checked: true,
-    pid: 0,
-    children: [
-      { id: 2, name: '连接管理', is_checked: true, pid: 1, children: [] },
-      { id: 3, name: '用户属性管理', is_checked: true, pid: 1, children: [] },
-      { id: 4, name: '事件属性管理', is_checked: true, pid: 1, children: [] }
-    ]
-  },
-  {
-    id: 5,
-    name: '营销策划',
-    is_checked: true,
-    pid: 0,
-    children: []
-  },
-  {
-    id: 6,
-    name: '用户画像',
-    is_checked: true,
-    pid: 0,
-    children: []
-  },
-  {
-    id: 7,
-    name: '用户识别',
-    is_checked: true,
-    pid: 0,
-    children: [
-      { id: 8, name: '标签管理', is_checked: true, pid: 7, children: [] },
-      { id: 9, name: '群组管理', is_checked: true, pid: 7, children: [] }
-    ]
-  },
-  {
-    id: 10,
-    name: '营销内容设计',
-    is_checked: true,
-    pid: 0,
-    children: [
-      { id: 11, name: '文本资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 12, name: '图片资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 13, name: '卡券资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 14, name: '视频资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 15, name: 'H5资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 16, name: '二维码资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 17, name: '语言资料管理', is_checked: true, pid: 10, children: [] },
-      { id: 18, name: '小程序资料管理', is_checked: true, pid: 10, children: [] }
-    ]
-  },
-  {
-    id: 19,
-    name: '自动化营销',
-    is_checked: true,
-    pid: 0,
-    children: []
-  },
-  {
-    id: 20,
-    name: '直播带货',
-    is_checked: true,
-    pid: 0,
-    children: [
-      { id: 21, name: '商品品类管理', is_checked: true, pid: 20, children: [] },
-      { id: 22, name: '商品属性管理', is_checked: true, pid: 20, children: [] },
-      { id: 23, name: '商品管理', is_checked: true, pid: 20, children: [] },
-      { id: 24, name: '直播练习', is_checked: true, pid: 20, children: [] },
-      { id: 25, name: '直播话术管理', is_checked: true, pid: 20, children: [] }
-    ]
-  },
-  {
-    id: 26,
-    name: '数据分析',
-    is_checked: true,
-    pid: 0,
-    children: [
-      { id: 27, name: '用户分析', is_checked: true, pid: 26, children: [] },
-      { id: 28, name: '标签群组分析', is_checked: true, pid: 26, children: [] },
-      { id: 29, name: '事件分析', is_checked: true, pid: 26, children: [] },
-      { id: 30, name: '营销分析', is_checked: true, pid: 26, children: [] }
-    ]
-  }
-]
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { pick } from 'lodash-es'
+import { updateExam, getAllExamList } from '../api'
+
+interface Props {
+  id: string
+  data?: any
+  type: string
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update'): void
+  (e: 'update:modelValue', visible: boolean): void
+}>()
+
+const formRef = ref<FormInstance>()
+const form = reactive<any>({
+  experiment_id: props.id,
+  exam_id: ''
+})
+watchEffect(() => {
+  if (!props.data) return
+  Object.assign(form, props.data)
+})
+
+const rules = ref<FormRules>({
+  exam_id: [{ required: true, message: '请选择考试', trigger: 'change' }]
+})
+const isUpdate = $computed(() => {
+  return !!props.data?.id
+})
+const title = computed(() => {
+  return isUpdate ? '编辑理论考试' : '新增理论考试'
+})
+
+const examList = ref<Record<string, any>[]>([])
+// 获取关联考试列表
+function fetchExamList() {
+  getAllExamList({ project: 'x1', 'per-page': 1000 }).then(res => {
+    examList.value = res.data.list || []
+  })
+}
+onMounted(() => {
+  fetchExamList()
+})
+// 提交
+function handleSubmit() {
+  formRef.value?.validate().then(() => {
+    const params = Object.assign({ type: props.type }, pick(form, ['experiment_id', 'exam_id']))
+    isUpdate ? handleUpdate(params) : handleUpdate(params)
+  })
+}
+
+// 修改
+function handleUpdate(params: any) {
+  params.id = props.data?.id
+  updateExam(params).then(() => {
+    ElMessage({ message: '修改成功', type: 'success' })
+    emit('update')
+    emit('update:modelValue', false)
+  })
+}
+</script>
+
+<template>
+  <el-dialog
+    :title="title"
+    :close-on-click-modal="false"
+    width="600px"
+    @update:modelValue="value => $emit('update:modelValue', value)"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
+      <el-form-item label="考试名称" prop="exam_id">
+        <el-select v-model="form.exam_id" filterable style="width: 100%">
+          <el-option v-for="item in examList" :key="item.exam_id" :label="item.name" :value="item.exam_id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-row justify="center">
+        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
+        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
+      </el-row>
+    </el-form>
\ No newline at end of file
+  </el-dialog>
+</template>