【新增】试题页面（残缺）上传

src/views/paper/question/CdesignForm.vue

@@ -0,0 +1,174 @@
+<template>
+  <Dialog
+          v-model="dialogVisible"
+          :title="dialogTitle"
+          width="70%"
+          top="10vh">
+    <el-scrollbar height="600px">
+      <el-tabs
+          v-model="activeName"
+          class="demo-tabs"
+          @tab-click="handleClick"
+      >
+        <el-tab-pane label="基本内容" name="common">
+          <div class="line">
+            <div class="title-text">试题题目</div>
+            <div class="block">
+              <Editor v-model="content" height="150px" />
+            </div>
+          </div>
+          <div class="line">
+            <div>答题程序模板</div>
+            <ElTextarea v-model="textarea" :rows="4" />
+          </div>
+          <div class="line">
+            <div class="title-text">基本信息</div>
+            <el-form
+                label-width="80"
+                :inline="false"
+                :model="formData"
+                class="demo-form-inline"
+            >
+              <el-form-item label="知识点">
+                <el-input
+                    disabled
+                    placeholder="请输入知识点"
+                    size="large"
+                />
+              </el-form-item>
+              <el-form-item label="试题版本">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="来源">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="创建人">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="修改人">
+                <p>测试测试</p>
+              </el-form-item>
+              <el-form-item label="修改时间">
+                <p>测试测试</p>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-scrollbar>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import ElTextarea from './components/el-textarea.vue'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as PostApi from '@/api/system/post'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { FormRules } from 'element-plus'
+
+defineOptions({ name: 'SystemUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  content: '',
+  specialtyName: '',
+  courseName: '',
+  quBankName: '',
+  required: '',
+  chapteridDictText: '',
+  analysis: ''
+})
+const formRules = reactive<FormRules>({
+  specialtyName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const postList = ref([] as PostApi.PostVO[]) // 岗位列表
+/** 页面内容开始 */
+const activeName = ref('common');
+const content = ref('');
+const textarea = ref('');
+
+const handleClick = (tab, e) => {
+  activeName.value = tab.paneName.value;
+};
+/** 页面内容结束 */
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 加载部门树
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  // 加载岗位列表
+  postList.value = await PostApi.getSimplePostList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  console.log(textarea.value)
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as UserApi.UserVO
+    if (formType.value === 'create') {
+      await UserApi.createUser(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await UserApi.updateUser(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    content: '',
+    specialtyName: '',
+    courseName: '',
+    quBankName: '',
+    required: '',
+    chapteridDictText: '',
+    analysis: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>